refactor(create-form): 🎉 update form fields disabled states

robolaunch · Jan 9, 2024 · 7002ed1 · 7002ed1
1 parent 4111a88
commit 7002ed1
Show file tree

Hide file tree

Showing 15 changed files with 147 additions and 163 deletions.
diff --git a/src/components/CFAddWorkspaceButton/CFAddWorkspaceButton.tsx b/src/components/CFAddWorkspaceButton/CFAddWorkspaceButton.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
 import useCreateRobot from "../../hooks/useCreateRobot";
 import { IWorkspaces } from "../../interfaces/robotInterfaces";
@@ -19,7 +19,7 @@ export default function CFAddWorkspaceButton({
     <div data-tut="create-robot-step2-workspace-add-button">
       <CreateRobotFormAddButton
         onClick={() => handleAddWorkspaceStep(formik)}
-        disabled={disabled}
+        disabled={formik.isSubmitting}
       />
     </div>
   );

diff --git a/src/components/CFAdvancedSettings/CFAdvancedSettings.tsx b/src/components/CFAdvancedSettings/CFAdvancedSettings.tsx
@@ -4,12 +4,12 @@ import CFPersistDirTags from "../CFPersistDirTags/CFPersistDirTags";
 import CFGrantDirTags from "../CFGrantDirTags/CFGrantDirTags";
 import { IDetails } from "../../interfaces/robotInterfaces";
 import CFPortSetter from "../CFPortSetter/CFPortSetter";
+import useCreateRobot from "../../hooks/useCreateRobot";
 import Accordion from "../Accordion/AccordionV2";
 import { FormikProps } from "formik/dist/types";
 import { ReactElement, useState } from "react";
 import CFSection from "../CFSection/CFSection";
 import Seperator from "../Seperator/Seperator";
-import useCreateRobot from "../../hooks/useCreateRobot";
 
 interface ICFAdvancedSettings {
   formik: FormikProps<IDetails>;
@@ -56,22 +56,18 @@ export default function CFAdvancedSettings({
 
         {robotData.step1.services.jupyterNotebook.isEnabled && (
           <CFSection gap={4}>
-            <CFPortSetter
-              formik={formik}
-              isImportRobot={disabled}
-              type="jupyter-notebook"
-            />
+            <CFPortSetter formik={formik} type="jupyterNotebook" />
             <Seperator />
           </CFSection>
         )}
 
         <CFSection gap={4}>
-          <CFPortSetter formik={formik} isImportRobot={disabled} type="ide" />
+          <CFPortSetter formik={formik} type="ide" />
           <Seperator />
         </CFSection>
 
         <CFSection>
-          <CFPortSetter formik={formik} isImportRobot={disabled} type="vdi" />
+          <CFPortSetter formik={formik} type="vdi" />
         </CFSection>
       </div>
     </Accordion>

diff --git a/src/components/CFPortInput/CFPortInput.tsx b/src/components/CFPortInput/CFPortInput.tsx
@@ -9,7 +9,7 @@ interface ICFPortInput {
   formik: FormikProps<IDetails>;
   portIndex: number;
   disabled?: boolean;
-  type: "ide" | "vdi" | "jupyter-notebook";
+  type: "ide" | "vdi" | "jupyterNotebook";
 }
 
 export default function CFPortInput({
@@ -26,7 +26,7 @@ export default function CFPortInput({
         labelInfoTip="Type a port name."
         inputProps={(() => {
           switch (type) {
-            case "jupyter-notebook":
+            case "jupyterNotebook":
               return formik.getFieldProps(
                 `services.jupyterNotebook.customPorts.[${portIndex}].name`,
               );
@@ -38,7 +38,7 @@ export default function CFPortInput({
         })()}
         inputError={(() => {
           switch (type) {
-            case "jupyter-notebook":
+            case "jupyterNotebook":
               return formik.errors?.services?.jupyterNotebook?.customPorts?.[
                 portIndex
                 // @ts-ignore
@@ -52,7 +52,7 @@ export default function CFPortInput({
         })()}
         inputTouched={(() => {
           switch (type) {
-            case "jupyter-notebook":
+            case "jupyterNotebook":
               return (
                 // @ts-ignore
                 formik.touched?.services?.jupyterNotebook?.customPorts?.[
@@ -75,7 +75,7 @@ export default function CFPortInput({
         labelInfoTip="Is the port that the application is listening on."
         inputProps={(() => {
           switch (type) {
-            case "jupyter-notebook":
+            case "jupyterNotebook":
               return formik.getFieldProps(
                 `services.jupyterNotebook.customPorts[${portIndex}].port`,
               );
@@ -87,7 +87,7 @@ export default function CFPortInput({
         })()}
         inputError={(() => {
           switch (type) {
-            case "jupyter-notebook":
+            case "jupyterNotebook":
               return formik.errors?.services?.jupyterNotebook?.customPorts?.[
                 portIndex
                 // @ts-ignore
@@ -101,7 +101,7 @@ export default function CFPortInput({
         })()}
         inputTouched={(() => {
           switch (type) {
-            case "jupyter-notebook":
+            case "jupyterNotebook":
               return (
                 // @ts-ignore
                 formik.touched?.services?.jupyterNotebook?.customPorts?.[
@@ -131,7 +131,7 @@ export default function CFPortInput({
           :
           {(() => {
             switch (type) {
-              case "jupyter-notebook":
+              case "jupyterNotebook":
                 return formik.values?.services.jupyterNotebook?.customPorts?.[
                   portIndex
                 ]?.backendPort;
@@ -147,7 +147,7 @@ export default function CFPortInput({
         <CFDellButton
           onClick={() => {
             switch (type) {
-              case "jupyter-notebook":
+              case "jupyterNotebook":
                 formik.setFieldValue(
                   `services.jupyterNotebook.customPorts`,
                   // @ts-ignore

diff --git a/src/components/CFPortSetter/CFPortSetter.tsx b/src/components/CFPortSetter/CFPortSetter.tsx
@@ -1,24 +1,22 @@
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
 import { getPort as getFreePort } from "../../toolkit/PortSlice";
+import { IDetails } from "../../interfaces/robotInterfaces";
 import CFPortInput from "../CFPortInput/CFPortInput";
 import { useAppDispatch } from "../../hooks/redux";
 import CFInfoBar from "../CFInfoBar/CFInfoBar";
 import useMain from "../../hooks/useMain";
 import { ReactElement } from "react";
 import { toast } from "sonner";
 import { FormikProps } from "formik";
-import { IDetails } from "../../interfaces/robotInterfaces";
 
 interface ICFPortSetter {
   formik: FormikProps<IDetails>;
-  type: "ide" | "vdi" | "jupyter-notebook";
-  isImportRobot?: boolean;
+  type: "ide" | "vdi" | "jupyterNotebook";
 }
 
 export default function CFPortSetter({
   formik,
   type,
-  isImportRobot,
 }: ICFPortSetter): ReactElement {
   const { selectedState } = useMain();
 
@@ -61,7 +59,7 @@ export default function CFPortSetter({
         return "IDE";
       case "vdi":
         return "VDI";
-      case "jupyter-notebook":
+      case "jupyterNotebook":
         return "Jupyter Notebook";
       default:
         return "";
@@ -78,7 +76,7 @@ export default function CFPortSetter({
         <div className="flex flex-col gap-2">
           {(() => {
             switch (type) {
-              case "jupyter-notebook":
+              case "jupyterNotebook":
                 return formik.values?.services.jupyterNotebook?.customPorts?.map(
                   (_: any, index: number) => {
                     return (
@@ -87,7 +85,7 @@ export default function CFPortSetter({
                         formik={formik}
                         portIndex={index}
                         type={type}
-                        disabled={isImportRobot}
+                        disabled={formik.isSubmitting}
                       />
                     );
                   },
@@ -102,7 +100,7 @@ export default function CFPortSetter({
                         formik={formik}
                         portIndex={index}
                         type={type}
-                        disabled={isImportRobot}
+                        disabled={formik.isSubmitting}
                       />
                     );
                   },
@@ -113,27 +111,15 @@ export default function CFPortSetter({
       </CFInfoBar>
 
       <CreateRobotFormAddButton
-        disabled={isImportRobot}
         onClick={async () => {
-          if (type === "ide" || type === "vdi") {
-            await formik.setFieldValue(
-              `services.${type}.customPorts`,
-              formik.values?.services?.[`${type}`]?.customPorts?.concat({
-                name: "",
-                port: undefined,
-                backendPort: await getPort(),
-              }),
-            );
-          } else if (type === "jupyter-notebook") {
-            await formik.setFieldValue(
-              `services.jupyterNotebook.customPorts`,
-              formik.values?.services.jupyterNotebook.customPorts?.concat({
-                name: "",
-                port: undefined,
-                backendPort: await getPort(),
-              }),
-            );
-          }
+          await formik.setFieldValue(
+            `services.${type}.customPorts`,
+            formik.values?.services?.[`${type}`]?.customPorts?.concat({
+              name: "",
+              port: undefined,
+              backendPort: await getPort(),
+            }),
+          );
         }}
         className="!mt-1"
       />

diff --git a/src/components/CFRobotButtons/CFRobotButtons.tsx b/src/components/CFRobotButtons/CFRobotButtons.tsx
@@ -1,9 +1,9 @@
 import CFCancelButton from "../CFCancelButton/CFCancelButton";
 import useCreateRobot from "../../hooks/useCreateRobot";
+import { useAppSelector } from "../../hooks/redux";
 import { useParams } from "react-router-dom";
 import Button from "../Button/Button";
 import { ReactElement } from "react";
-import { useAppSelector } from "../../hooks/redux";
 
 interface ICFRobotButtons {
   step: 1 | 2 | 3 | 4;

diff --git a/src/components/CFWorkspaceDistro/CFWorkspaceDistro.tsx b/src/components/CFWorkspaceDistro/CFWorkspaceDistro.tsx
@@ -23,7 +23,7 @@ export default function CFWorkspaceDistro({
       dataTut="create-robot-step2-workspace-distro"
       labelName="Workspace Distro:"
       tip="Select a workspace ROS2 distro."
-      disabled={disabled}
+      disabled={formik.isSubmitting}
       classNameContainer="w-60"
       inputProps={formik.getFieldProps(
         `workspaces.${workspaceIndex}.workspaceDistro`,
@@ -40,7 +40,7 @@ export default function CFWorkspaceDistro({
           {!formik?.values?.workspaces[workspaceIndex]?.workspaceDistro && (
             <option value=""></option>
           )}
-          {robotData.step1.rosDistros?.map(
+          {robotData.step1.services.ros.rosDistros?.map(
             (rosDistro: string, index: number) => {
               return (
                 <option key={index} value={rosDistro} className="capitalize">

diff --git a/src/components/CFWorkspaceName/CFWorkspaceName.tsx b/src/components/CFWorkspaceName/CFWorkspaceName.tsx
@@ -23,7 +23,7 @@ export default function CFWorkspaceName({
 "
       inputProps={formik.getFieldProps(`workspaces.${workspaceIndex}.name`)}
       classNameContainer="w-full"
-      disabled={disabled}
+      disabled={formik.isSubmitting}
       inputError={
         // @ts-ignore
         formik?.errors?.workspaces?.[workspaceIndex]?.name