From 278fdece029b28195fbdbf2b93c230b159bdd416 Mon Sep 17 00:00:00 2001
From: Flora Thiebaut <flora.thiebaut@sdsc.ethz.ch>
Date: Fri, 17 Jan 2025 16:08:02 +0100
Subject: [PATCH] wip: add option

---
 .../SessionForm/EditLauncherFormContent.tsx   |  5 +-
 .../SessionForm/EnvironmentField.tsx          |  2 +-
 .../SessionForm/EnvironmentKindField.tsx      | 74 ++++++++++++-------
 .../UpdateSessionLauncherModal.tsx            |  1 -
 4 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/client/src/features/sessionsV2/components/SessionForm/EditLauncherFormContent.tsx b/client/src/features/sessionsV2/components/SessionForm/EditLauncherFormContent.tsx
index d37607295c..cebe6c745b 100644
--- a/client/src/features/sessionsV2/components/SessionForm/EditLauncherFormContent.tsx
+++ b/client/src/features/sessionsV2/components/SessionForm/EditLauncherFormContent.tsx
@@ -23,7 +23,6 @@ import {
   Controller,
   FieldErrors,
   FieldNamesMarkedBoolean,
-  UseFormSetValue,
   UseFormWatch,
 } from "react-hook-form";
 import { Collapse, Input, Label, ListGroup } from "reactstrap";
@@ -50,7 +49,6 @@ interface SessionLauncherFormContentProps {
 
 interface EditLauncherFormContentProps extends SessionLauncherFormContentProps {
   environmentId?: string;
-  setValue: UseFormSetValue<SessionLauncherForm>;
 }
 export default function EditLauncherFormContent({
   control,
@@ -58,7 +56,6 @@ export default function EditLauncherFormContent({
   watch,
   touchedFields,
   environmentId,
-  setValue,
 }: EditLauncherFormContentProps) {
   const {
     data: environments,
@@ -221,7 +218,7 @@ export default function EditLauncherFormContent({
           )}
         />
       </div>
-      <EnvironmentKindField control={control} setValue={setValue} />
+      <EnvironmentKindField control={control} />
 
       {environmentKind === "GLOBAL" && renderEnvironmentList()}
 
diff --git a/client/src/features/sessionsV2/components/SessionForm/EnvironmentField.tsx b/client/src/features/sessionsV2/components/SessionForm/EnvironmentField.tsx
index 51cc77c549..82cfa145b8 100644
--- a/client/src/features/sessionsV2/components/SessionForm/EnvironmentField.tsx
+++ b/client/src/features/sessionsV2/components/SessionForm/EnvironmentField.tsx
@@ -52,7 +52,7 @@ export function EnvironmentFields({
         <span className="fw-bold">1 of 2. Define environment</span>
       </div>
       <div>
-        <EnvironmentKindField control={control} setValue={setValue} />
+        <EnvironmentKindField control={control} />
       </div>
       <div className={cx(watchEnvironmentKind !== "GLOBAL" && "d-none")}>
         <GlobalEnvironmentFields
diff --git a/client/src/features/sessionsV2/components/SessionForm/EnvironmentKindField.tsx b/client/src/features/sessionsV2/components/SessionForm/EnvironmentKindField.tsx
index 5846b5c27b..5ffbd04c9a 100644
--- a/client/src/features/sessionsV2/components/SessionForm/EnvironmentKindField.tsx
+++ b/client/src/features/sessionsV2/components/SessionForm/EnvironmentKindField.tsx
@@ -16,17 +16,15 @@
  * limitations under the License.
  */
 import cx from "classnames";
-import { Control, Controller, UseFormSetValue } from "react-hook-form";
-import { Button, ButtonGroup } from "reactstrap";
+import { Control, Controller } from "react-hook-form";
+import { ButtonGroup } from "reactstrap";
 import { SessionLauncherForm } from "../../sessionsV2.types";
 
 interface EnvironmentKindField {
-  control: Control<SessionLauncherForm, unknown>;
-  setValue: UseFormSetValue<SessionLauncherForm>;
+  control: Control<SessionLauncherForm>;
 }
 export default function EnvironmentKindField({
   control,
-  setValue,
 }: EnvironmentKindField) {
   return (
     <Controller
@@ -35,30 +33,56 @@ export default function EnvironmentKindField({
       render={({ field }) => (
         <div className={cx("d-flex", "gap-4")}>
           <ButtonGroup size="sm">
-            <Button
-              active={field.value === "GLOBAL"}
-              data-cy="existing-global-button"
-              onClick={() => setValue("environment_kind", "GLOBAL")}
-              className={cx(
-                field.value === "GLOBAL"
-                  ? ["text-white", "bg-primary"]
-                  : ["text-primary", "bg-white"]
-              )}
+            <input
+              type="radio"
+              className="btn-check"
+              name={field.name}
+              autoComplete="off"
+              checked={field.value === "GLOBAL"}
+              id="environment-kind-global-radio"
+              onChange={() => field.onChange("GLOBAL")}
+              onBlur={field.onBlur}
+            />
+            <label
+              className={cx("btn", "btn-outline-primary")}
+              htmlFor="environment-kind-global-radio"
             >
               Global environment
-            </Button>
-            <Button
-              active={field.value === "CUSTOM"}
-              data-cy="existing-custom-button"
-              onClick={() => setValue("environment_kind", "CUSTOM")}
-              className={cx(
-                field.value === "CUSTOM"
-                  ? ["text-white", "bg-primary"]
-                  : ["text-primary", "bg-white"]
-              )}
+            </label>
+
+            <input
+              type="radio"
+              className="btn-check"
+              name={field.name}
+              autoComplete="off"
+              checked={field.value === "CUSTOM"}
+              id="environment-kind-custom-radio"
+              onChange={() => field.onChange("CUSTOM")}
+              onBlur={field.onBlur}
+            />
+            <label
+              className={cx("btn", "btn-outline-primary")}
+              htmlFor="environment-kind-custom-radio"
             >
               Custom Environment
-            </Button>
+            </label>
+
+            <input
+              type="radio"
+              className="btn-check"
+              name={field.name}
+              autoComplete="off"
+              checked={field.value === "BUILDER"}
+              id="environment-kind-builder-radio"
+              onChange={() => field.onChange("BUILDER")}
+              onBlur={field.onBlur}
+            />
+            <label
+              className={cx("btn", "btn-outline-primary")}
+              htmlFor="environment-kind-builder-radio"
+            >
+              Create from a repository
+            </label>
           </ButtonGroup>
         </div>
       )}
diff --git a/client/src/features/sessionsV2/components/SessionModals/UpdateSessionLauncherModal.tsx b/client/src/features/sessionsV2/components/SessionModals/UpdateSessionLauncherModal.tsx
index c6a337f5d9..0c39e0d955 100644
--- a/client/src/features/sessionsV2/components/SessionModals/UpdateSessionLauncherModal.tsx
+++ b/client/src/features/sessionsV2/components/SessionModals/UpdateSessionLauncherModal.tsx
@@ -130,7 +130,6 @@ export default function UpdateSessionLauncherModal({
               watch={watch}
               touchedFields={touchedFields}
               environmentId={launcher.environment?.id}
-              setValue={setValue}
             />
           </Form>
         )}