wip: add builder type for session launchers

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";
@@ -36,7 +35,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 {
@@ -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()}
 

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 {
@@ -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

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 function EnvironmentKindField({
+export default function EnvironmentKindField({
   control,
-  setValue,
 }: EnvironmentKindField) {
   return (
     <Controller
@@ -35,30 +33,56 @@ export 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>
       )}

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}

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>
   );
 }