wip: add builder type for session launchers

SwissDataScienceCenter · Jan 17, 2025 · f3c1390 · f3c1390
1 parent 2b99829
commit f3c1390
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 55 deletions.
diff --git a/client/src/features/sessionsV2/components/SessionForm/EditLauncherFormContent.tsx b/client/src/features/sessionsV2/components/SessionForm/EditLauncherFormContent.tsx
@@ -36,7 +36,7 @@ import { prioritizeSelectedEnvironment } from "../../session.utils";
 import { useGetSessionEnvironmentsQuery } from "../../sessionsV2.api";
 import { SessionLauncherForm } from "../../sessionsV2.types";
 import { AdvancedSettingsFields } from "./AdvancedSettingsFields";
-import { EnvironmentKindField } from "./EnvironmentKindField";
+import EnvironmentKindField from "./EnvironmentKindField";
 import { SessionEnvironmentItem } from "./SessionEnvironmentItem";
 
 interface SessionLauncherFormContentProps {

diff --git a/client/src/features/sessionsV2/components/SessionForm/EnvironmentField.tsx b/client/src/features/sessionsV2/components/SessionForm/EnvironmentField.tsx
@@ -25,7 +25,7 @@ import {
 } from "react-hook-form";
 import { SessionLauncherForm } from "../../sessionsV2.types";
 import { CustomEnvironmentFields } from "./CustomEnvironmentFields";
-import { EnvironmentKindField } from "./EnvironmentKindField";
+import EnvironmentKindField from "./EnvironmentKindField";
 import { GlobalEnvironmentFields } from "./GlobalEnvironmentFields";
 
 export interface EnvironmentFieldsProps {

diff --git a/client/src/features/sessionsV2/components/SessionForm/EnvironmentKindField.tsx b/client/src/features/sessionsV2/components/SessionForm/EnvironmentKindField.tsx
@@ -24,7 +24,7 @@ interface EnvironmentKindField {
   control: Control<SessionLauncherForm, unknown>;
   setValue: UseFormSetValue<SessionLauncherForm>;
 }
-export function EnvironmentKindField({
+export default function EnvironmentKindField({
   control,
   setValue,
 }: EnvironmentKindField) {

diff --git a/client/src/features/sessionsV2/components/SessionForm/SessionLauncherBreadcrumbNavbar.tsx b/client/src/features/sessionsV2/components/SessionForm/SessionLauncherBreadcrumbNavbar.tsx
@@ -18,34 +18,34 @@
 import cx from "classnames";
 import { Breadcrumb, BreadcrumbItem, Button } from "reactstrap";
 
-export enum LauncherType {
+export enum LauncherStep {
   Environment = "environment",
   LauncherDetails = "launcherDetails",
 }
 interface SessionLauncherBreadcrumbNavbarProps {
-  setStep: (newState: LauncherType) => void;
-  step: LauncherType;
+  setStep: (newState: LauncherStep) => void;
+  step: LauncherStep;
   readyToGoNext: boolean;
 }
 export const SessionLauncherBreadcrumbNavbar = ({
   setStep,
   step,
   readyToGoNext,
 }: SessionLauncherBreadcrumbNavbarProps) => {
-  const handleStepChange = (newStep: LauncherType) => {
+  const handleStepChange = (newStep: LauncherStep) => {
     if (newStep === "launcherDetails" && !readyToGoNext) return;
     setStep(newStep);
   };
 
   const breadcrumbItems = [
     {
       label: "1. Define Environment",
-      stepKey: "environment",
+      stepKey: LauncherStep.Environment,
       isActive: step === "environment",
     },
     {
       label: "2. Define Launcher Details",
-      stepKey: "launcherDetails",
+      stepKey: LauncherStep.LauncherDetails,
       isActive: step === "launcherDetails",
       disabled: !readyToGoNext,
     },
@@ -61,7 +61,7 @@ export const SessionLauncherBreadcrumbNavbar = ({
               isActive && ["text-decoration-none", "fw-bold"]
             )}
             color="link"
-            onClick={() => handleStepChange(stepKey as LauncherType)}
+            onClick={() => handleStepChange(stepKey)}
             disabled={disabled}
           >
             {label}

diff --git a/client/src/features/sessionsV2/components/SessionModals/NewSessionLauncherModal.tsx b/client/src/features/sessionsV2/components/SessionModals/NewSessionLauncherModal.tsx
@@ -20,19 +20,14 @@ import { skipToken } from "@reduxjs/toolkit/query";
 import cx from "classnames";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { ArrowRight, CheckLg, XLg } from "react-bootstrap-icons";
-import { useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import { useParams } from "react-router-dom-v5-compat";
-import {
-  Button,
-  Form,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-} from "reactstrap";
+import { Button, Form, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
+
 import { SuccessAlert } from "../../../../components/Alert";
 import { RtkErrorAlert } from "../../../../components/errors/RtkErrorAlert";
 import { Loader } from "../../../../components/Loader";
+import ScrollableModal from "../../../../components/modal/ScrollableModal";
 import { useGetNamespacesByNamespaceProjectsAndSlugQuery } from "../../../projectsV2/api/projectV2.enhanced-api";
 import { DEFAULT_PORT, DEFAULT_URL } from "../../session.constants";
 import { getFormattedEnvironmentValues } from "../../session.utils";
@@ -44,7 +39,7 @@ import { SessionLauncherForm } from "../../sessionsV2.types";
 import { EnvironmentFields } from "../SessionForm/EnvironmentField";
 import { LauncherDetailsFields } from "../SessionForm/LauncherDetailsFields";
 import {
-  LauncherType,
+  LauncherStep,
   SessionLauncherBreadcrumbNavbar,
 } from "../SessionForm/SessionLauncherBreadcrumbNavbar";
 
@@ -57,7 +52,7 @@ export default function NewSessionLauncherModal({
   isOpen,
   toggle,
 }: NewSessionLauncherModalProps) {
-  const [step, setStep] = useState<LauncherType>(LauncherType.Environment);
+  const [step, setStep] = useState<LauncherStep>(LauncherStep.Environment);
   const { namespace, slug } = useParams<{ namespace: string; slug: string }>();
   const { data: environments } = useGetSessionEnvironmentsQuery();
   const [addSessionLauncher, result] = useAddSessionLauncherMutation();
@@ -66,15 +61,7 @@ export default function NewSessionLauncherModal({
   );
   const projectId = project?.id;
 
-  const {
-    control,
-    formState: { errors, isDirty, touchedFields, isValid },
-    handleSubmit,
-    reset,
-    setValue,
-    watch,
-    trigger,
-  } = useForm<SessionLauncherForm>({
+  const useFormResult = useForm<SessionLauncherForm>({
     defaultValues: {
       name: "",
       environment_kind: "GLOBAL",
@@ -84,6 +71,15 @@ export default function NewSessionLauncherModal({
       port: DEFAULT_PORT,
     },
   });
+  const {
+    control,
+    formState: { errors, isDirty, touchedFields, isValid },
+    handleSubmit,
+    reset,
+    setValue,
+    watch,
+    trigger,
+  } = useFormResult;
 
   const watchEnvironmentId = watch("environment_id");
   const watchEnvironmentCustomImage = watch("container_image");
@@ -101,11 +97,11 @@ export default function NewSessionLauncherModal({
     trigger(["environment_id", "container_image", "command", "args"]);
 
     if (isDirty && isEnvironmentDefined && isValid)
-      setStep(LauncherType.LauncherDetails);
+      setStep(LauncherStep.LauncherDetails);
   }, [isDirty, setStep, trigger, isEnvironmentDefined, isValid]);
 
   const onCancel = useCallback(() => {
-    setStep(LauncherType.Environment);
+    setStep(LauncherStep.Environment);
     reset();
     toggle();
   }, [reset, toggle, setStep]);
@@ -155,24 +151,26 @@ export default function NewSessionLauncherModal({
 
   useEffect(() => {
     if (!isOpen) {
-      setStep(LauncherType.Environment);
+      setStep(LauncherStep.Environment);
       reset();
       result.reset();
     }
   }, [isOpen, reset, result, setStep]);
 
   return (
-    <Modal
+    <ScrollableModal
       backdrop="static"
       centered
       fullscreen="lg"
       isOpen={isOpen}
       size="lg"
       toggle={toggle}
-      scrollable
+      // scrollable
     >
       <ModalHeader toggle={toggle}>Add session launcher</ModalHeader>
-      <ModalBody style={{ height: result.isSuccess ? "auto" : "600px" }}>
+      <ModalBody
+      // style={{ height: result.isSuccess ? "auto" : "600px" }}
+      >
         {result.isSuccess ? (
           <ConfirmationCreate />
         ) : (
@@ -185,21 +183,23 @@ export default function NewSessionLauncherModal({
                 </p>
               </>
             )}
-            <Form noValidate onSubmit={handleSubmit(onSubmit)}>
-              {result.error && <RtkErrorAlert error={result.error} />}
-              {step === "environment" && (
-                <EnvironmentFields
-                  errors={errors}
-                  touchedFields={touchedFields}
-                  control={control}
-                  watch={watch}
-                  setValue={setValue}
-                />
-              )}
-              {step === "launcherDetails" && (
-                <LauncherDetailsFields control={control} />
-              )}
-            </Form>
+            <FormProvider {...useFormResult}>
+              <Form noValidate onSubmit={handleSubmit(onSubmit)}>
+                {result.error && <RtkErrorAlert error={result.error} />}
+                {step === "environment" && (
+                  <EnvironmentFields
+                    errors={errors}
+                    touchedFields={touchedFields}
+                    control={control}
+                    watch={watch}
+                    setValue={setValue}
+                  />
+                )}
+                {step === "launcherDetails" && (
+                  <LauncherDetailsFields control={control} />
+                )}
+              </Form>
+            </FormProvider>
           </div>
         )}
       </ModalBody>
@@ -209,7 +209,7 @@ export default function NewSessionLauncherModal({
             <SessionLauncherBreadcrumbNavbar
               step={step}
               setStep={setStep}
-              readyToGoNext={!!isEnvironmentDefined}
+              readyToGoNext={isEnvironmentDefined}
             />
           </div>
         )}
@@ -228,7 +228,8 @@ export default function NewSessionLauncherModal({
             onClick={onNext}
             type="submit"
           >
-            Next <ArrowRight />
+            Next
+            <ArrowRight className={cx("bi", "ms-1")} />
           </Button>
         )}
         {!result.isSuccess && step === "launcherDetails" && (
@@ -248,7 +249,7 @@ export default function NewSessionLauncherModal({
           </Button>
         )}
       </ModalFooter>
-    </Modal>
+    </ScrollableModal>
   );
 }
 

diff --git a/client/src/features/sessionsV2/sessionsV2.types.ts b/client/src/features/sessionsV2/sessionsV2.types.ts
@@ -49,7 +49,7 @@ export type SessionLauncher = {
   environment: SessionLauncherEnvironment;
 };
 
-export type EnvironmentKind = "GLOBAL" | "CUSTOM";
+export type EnvironmentKind = "GLOBAL" | "CUSTOM" | "BUILDER";
 
 export type SessionLauncherEnvironment = {
   id?: string;