refactor(forms): 🎉 update forms and buttons

robolaunch · Dec 1, 2023 · e346aa8 · e346aa8
1 parent a93f418
commit e346aa8
Show file tree

Hide file tree

Showing 24 changed files with 564 additions and 542 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -2405,6 +2405,10 @@ video {
   padding-top: 2rem;
 }
 
+.pl-4 {
+  padding-left: 1rem;
+}
+
 .text-center {
   text-align: center;
 }

diff --git a/src/components/CFAddWorkspaceButton/CFAddWorkspaceButton.tsx b/src/components/CFAddWorkspaceButton/CFAddWorkspaceButton.tsx
@@ -1,22 +1,25 @@
 import React, { ReactElement } from "react";
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
 import useCreateRobot from "../../hooks/useCreateRobot";
-import { IRobotWorkspaces } from "../../interfaces/robotInterfaces";
+import { IWorkspaces } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
 
 interface ICFAddWorkspaceButton {
-  formik: FormikProps<IRobotWorkspaces>;
+  formik: FormikProps<IWorkspaces>;
+  disabled?: boolean;
 }
 
 export default function CFAddWorkspaceButton({
   formik,
+  disabled,
 }: ICFAddWorkspaceButton): ReactElement {
   const { handleAddWorkspaceStep } = useCreateRobot();
 
   return (
     <div data-tut="create-robot-step2-workspace-add-button">
       <CreateRobotFormAddButton
         onClick={() => handleAddWorkspaceStep(formik)}
+        disabled={disabled}
       />
     </div>
   );

diff --git a/src/components/CFGrantDirTags/CFGrantDirTags.tsx b/src/components/CFGrantDirTags/CFGrantDirTags.tsx
@@ -1,9 +1,9 @@
-import React, { ReactElement, useEffect, useState } from "react";
 import { IDetails } from "../../interfaces/robotInterfaces";
+import { ReactElement, useEffect, useState } from "react";
 import useCreateRobot from "../../hooks/useCreateRobot";
 import { TagsInput } from "react-tag-input-component";
 import { FormikProps } from "formik/dist/types";
-import InfoTip from "../InfoTip/InfoTip";
+import CFInfoBar from "../CFInfoBar/CFInfoBar";
 import { toast } from "sonner";
 
 interface ICFGrantDirTag {
@@ -37,38 +37,35 @@ export default function CFGrantDirTag({
   }, [selected]);
 
   return (
-    <div>
-      <div className="flex min-w-fit gap-1 pb-3 text-xs font-medium text-layer-light-700">
-        Granted Directories:
-        <InfoTip content="Here you can specify the directories that the user needs to access." />
-      </div>
-
-      <div>
-        <TagsInput
-          value={selected}
-          onChange={setSelected}
-          name="Granted directories"
-          classNames={{
-            input: "!text-xs disabled:cursor-not-allowed",
-            tag: "!text-xs !bg-layer-light-50 border border-layer-light-200",
-          }}
-          placeHolder="enter a path"
-          beforeAddValidate={(tag) => {
-            if (tag.charAt(0) !== "/") {
-              toast.error("Path must start with '/'");
-              return false;
-            }
-            return true;
-          }}
-          onRemoved={(tag) => {
-            if (tag === "/home/robolaunch") {
-              toast.error("Cannot remove this path");
-              return false;
-            }
-          }}
-          disabled={disabled}
-        />
-      </div>
-    </div>
+    <CFInfoBar
+      label="Granted Directories:"
+      tip="Here you can specify the directories that the user needs to access."
+      vertical
+    >
+      <TagsInput
+        value={selected}
+        onChange={setSelected}
+        name="Granted directories"
+        classNames={{
+          input: "!text-xs disabled:cursor-not-allowed",
+          tag: "!text-xs !bg-layer-light-50 border border-layer-light-200",
+        }}
+        placeHolder="enter a path"
+        beforeAddValidate={(tag) => {
+          if (tag.charAt(0) !== "/") {
+            toast.error("Path must start with '/'");
+            return false;
+          }
+          return true;
+        }}
+        onRemoved={(tag) => {
+          if (tag === "/home/robolaunch") {
+            toast.error("Cannot remove this path");
+            return false;
+          }
+        }}
+        disabled={disabled}
+      />
+    </CFInfoBar>
   );
 }
diff --git a/src/components/CFHostDirectories/CFHostDirectories.tsx b/src/components/CFHostDirectories/CFHostDirectories.tsx
@@ -1,9 +1,9 @@
-import { ReactElement } from "react";
-import CFInfoBar from "../CFInfoBar/CFInfoBar";
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
-import { FormikProps } from "formik/dist/types";
-import { IDetails } from "../../interfaces/robotInterfaces";
 import CFHostDirectoriesInput from "../CFHostDirectoriesInput/CFHostDirectoriesInput";
+import { IDetails } from "../../interfaces/robotInterfaces";
+import { FormikProps } from "formik/dist/types";
+import CFInfoBar from "../CFInfoBar/CFInfoBar";
+import { ReactElement } from "react";
 
 interface ICFHostDirectories {
   formik: FormikProps<IDetails>;
@@ -46,6 +46,7 @@ export default function CFHostDirectories({
           ]);
         }}
         className="!mt-1"
+        disabled={disabled}
       />
     </div>
   );

diff --git a/src/components/CFInfoBar/CFInfoBar.tsx b/src/components/CFInfoBar/CFInfoBar.tsx
@@ -1,6 +1,6 @@
 import InputError from "../InputError/InputError";
-import React, { ReactElement } from "react";
 import InfoTip from "../InfoTip/InfoTip";
+import { ReactElement } from "react";
 
 interface ICFInfoBar {
   label: string;
@@ -27,14 +27,14 @@ export default function CFInfoBar({
 }: ICFInfoBar): ReactElement {
   return (
     <div className={`${classNameContainer} transition-300`} data-tut={dataTut}>
-      <div className={`flex ${vertical && "flex-col"} `}>
-        <div className="flex min-w-fit gap-1 pb-3 text-xs font-medium text-layer-light-700">
+      <div className={`flex ${vertical && "flex-col gap-2"}`}>
+        <div className="flex min-w-fit gap-1 text-xs font-medium text-layer-light-700">
           {label}
           <InfoTip content={tip} rightTip={rightTip} />
         </div>
         {children}
       </div>
-      <InputError error={error} touched={touched} />
+      {error && touched && <InputError error={error} />}
     </div>
   );
 }
diff --git a/src/components/CFInputToggle/CFInputToggle.tsx b/src/components/CFInputToggle/CFInputToggle.tsx
@@ -20,7 +20,7 @@ export default function CFInputToggle({
   checked,
 }: ICFInputToggle): ReactElement {
   return (
-    <div data-tut={dataTut} className="flex items-center gap-1 pb-3">
+    <div data-tut={dataTut} className="flex items-center gap-1">
       <div className="flex min-w-fit gap-1 text-xs font-medium text-layer-light-700">
         {labelName}
         <InfoTip content={labelInfoTip} />

diff --git a/src/components/CFPersistDirTags/CFPersistDirTags.tsx b/src/components/CFPersistDirTags/CFPersistDirTags.tsx
@@ -1,5 +1,5 @@
-import React, { ReactElement, useEffect, useState } from "react";
 import { IDetails } from "../../interfaces/robotInterfaces";
+import { ReactElement, useEffect, useState } from "react";
 import useCreateRobot from "../../hooks/useCreateRobot";
 import { TagsInput } from "react-tag-input-component";
 import { FormikProps } from "formik/dist/types";

diff --git a/src/components/CFRobotButtons/CFRobotButtons.tsx b/src/components/CFRobotButtons/CFRobotButtons.tsx
@@ -0,0 +1,86 @@
+import CFCancelButton from "../CFCancelButton/CFCancelButton";
+import useCreateRobot from "../../hooks/useCreateRobot";
+import { envApplication } from "../../helpers/envProvider";
+import { useParams } from "react-router-dom";
+import Button from "../Button/Button";
+import { ReactElement } from "react";
+
+interface ICFRobotButtons {
+  step: 1 | 2 | 3 | 4;
+  formik: any;
+  isImportRobot?: boolean;
+}
+
+export default function CFRobotButtons({
+  step,
+  formik,
+  isImportRobot,
+}: ICFRobotButtons): ReactElement {
+  const url = useParams();
+
+  const { robotData } = useCreateRobot();
+
+  function handleDisabled(): boolean {
+    switch (step) {
+      case 1:
+        return (
+          !formik.isValid ||
+          formik.isSubmitting ||
+          JSON.stringify(formik.initialValues) === JSON.stringify(formik.values)
+        );
+
+      case 2:
+        return !!(
+          !formik?.isValid ||
+          formik.isSubmitting ||
+          JSON.stringify(formik.initialValues) ===
+            JSON.stringify(formik.values) ||
+          (envApplication && url?.robotName)
+        );
+
+      case 3:
+        return (
+          !formik?.isValid ||
+          formik.isSubmitting ||
+          JSON.stringify(formik.initialValues) === JSON.stringify(formik.values)
+        );
+      case 4:
+        return !formik?.isValid || formik.isSubmitting;
+    }
+  }
+
+  function handleText(): string {
+    switch (step) {
+      case 1:
+        return isImportRobot ? "Update Robot" : `Next Step`;
+
+      case 2:
+        return isImportRobot
+          ? "Update Robot"
+          : robotData?.step1?.isDevelopmentMode
+          ? envApplication
+            ? "Create Application with Workspaces"
+            : "Create Robot"
+          : "Next Step";
+
+      case 3:
+        return isImportRobot ? `Update Build Configration` : `Next Step`;
+
+      case 4:
+        return url?.robotName ? `Add Launch Step` : `Create Robot`;
+    }
+  }
+
+  return (
+    <div className="mt-10 flex gap-2">
+      {!isImportRobot && <CFCancelButton disabled={formik?.isSubmitting} />}
+      <Button
+        type="submit"
+        className="!h-11 text-xs"
+        disabled={handleDisabled()}
+        loading={formik?.isSubmitting}
+        text={handleText()}
+      />
+    </div>
+  );
+}
diff --git a/src/components/CFSection/CFSection.tsx b/src/components/CFSection/CFSection.tsx
@@ -7,7 +7,7 @@ interface ICFSection {
 
 export default function CFSection({
   children,
-  gap = 1,
+  gap = 4,
 }: ICFSection): ReactElement {
   return <div className={`flex w-full flex-col gap-${gap}`}>{children}</div>;
 }
diff --git a/src/components/CFStorageRange/CFStorageRange.tsx b/src/components/CFStorageRange/CFStorageRange.tsx
@@ -1,7 +1,7 @@
-import { ReactElement } from "react";
-import { FormikProps } from "formik/dist/types";
-import { IDetails } from "../../interfaces/robotInterfaces";
 import FormInputRange from "../FormInputRange/FormInputRange";
+import { IDetails } from "../../interfaces/robotInterfaces";
+import { FormikProps } from "formik/dist/types";
+import { ReactElement } from "react";
 
 interface ICFStorageRange {
   formik: FormikProps<IDetails>;
@@ -21,6 +21,8 @@ export default function CFStorageRange({
       min={20}
       max={100}
       disabled={formik.isSubmitting || disabled}
+      error={formik.errors.robotStorage}
+      touched={formik.touched.robotStorage}
     />
   );
 }
diff --git a/src/components/CFVDICount/CFVDICount.tsx b/src/components/CFVDICount/CFVDICount.tsx
@@ -1,7 +1,7 @@
-import { IDetails } from "../../interfaces/robotInterfaces";
 import FormInputRange from "../FormInputRange/FormInputRange";
+import { IDetails } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
-import React, { ReactElement, useEffect } from "react";
+import { ReactElement, useEffect } from "react";
 
 interface ICFVDICount {
   formik: FormikProps<IDetails>;