wip: add option

SwissDataScienceCenter · Jan 17, 2025 · 278fdec · 278fdec
1 parent f3c1390
commit 278fdec
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 31 deletions.
diff --git 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,15 +49,13 @@ interface SessionLauncherFormContentProps {
 
 interface EditLauncherFormContentProps extends SessionLauncherFormContentProps {
   environmentId?: string;
-  setValue: UseFormSetValue<SessionLauncherForm>;
 }
 export default function EditLauncherFormContent({
   control,
   errors,
   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
@@ -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
@@ -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
@@ -130,7 +130,6 @@ export default function UpdateSessionLauncherModal({
               watch={watch}
               touchedFields={touchedFields}
               environmentId={launcher.environment?.id}
-              setValue={setValue}
             />
           </Form>
         )}