refactor(create-forms): 🎉 update form fields

robolaunch · Aug 29, 2023 · b276f8f · b276f8f
1 parent 54938b0
commit b276f8f
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 22 deletions.
diff --git a/src/components/CreateForms/CreateRobotFormStep1.tsx b/src/components/CreateForms/CreateRobotFormStep1.tsx
@@ -12,14 +12,15 @@ import { createRobot } from "../../toolkit/RobotSlice";
 import InputToggle from "../InputToggle/InputToggle";
 import useFunctions from "../../hooks/useFunctions";
 import { useAppDispatch } from "../../hooks/redux";
+import InputError from "../InputError/InputError";
+import InputText from "../InputText/InputText";
 import Seperator from "../Seperator/Seperator";
 import { useParams } from "react-router-dom";
 import useMain from "../../hooks/useMain";
 import InfoTip from "../InfoTip/InfoTip";
 import Button from "../Button/Button";
 import { useFormik } from "formik";
 import { toast } from "sonner";
-import FormInputText from "../FormInputText/FormInputText";
 
 interface ICreateRobotFormStep1 {
   isImportRobot?: boolean;
@@ -166,19 +167,26 @@ export default function CreateRobotFormStep1({
             className="flex flex-col gap-3 animate__animated animate__fadeIn relative"
           >
             {/* RobotName */}
-            <FormInputText
-              labelText="Robot Name:"
-              InfoTipText="Type a new robot name."
-              formikProps={{ ...formik.getFieldProps("robotName") }}
-              disabled={formik.isSubmitting || isImportRobot}
-              inputHoverText={
-                formik.isSubmitting || isImportRobot
-                  ? "You can't change robot name because this robot is created before."
-                  : ""
-              }
-              validationError={formik.errors.robotName}
-              validationTouched={formik.touched.robotName}
-            />
+            <div>
+              <div className="min-w-fit flex gap-1 text-xs font-medium text-layer-light-700 pb-3">
+                Robot Name:
+                <InfoTip content="Type a new robot name." />
+              </div>
+              <InputText
+                {...formik.getFieldProps("robotName")}
+                className="!text-sm"
+                disabled={formik.isSubmitting || isImportRobot}
+                inputHoverText={
+                  formik.isSubmitting || isImportRobot
+                    ? "You can't change robot name because this robot is created before."
+                    : ""
+                }
+              />
+              <InputError
+                error={formik.errors.robotName}
+                touched={formik.touched.robotName}
+              />
+            </div>
             {/* RobotName */}
 
             <Seperator />

diff --git a/src/components/CreateRobotFormWorkspaceItem/CreateRobotFormWorkspaceItem.tsx b/src/components/CreateRobotFormWorkspaceItem/CreateRobotFormWorkspaceItem.tsx
@@ -4,18 +4,18 @@ import {
   IRobotWorkspace,
   IRobotWorkspaces,
 } from "../../interfaces/robotInterfaces";
-import CreateRobotWorkspaceItemAccordionHeader from "../CreateRobotWorkspaceItemAccordionHeader/CreateRobotWorkspaceItemAccordionHeader";
+import { FormikProps } from "formik/dist/types";
+import InputText from "../InputText/InputText";
+import InputError from "../InputError/InputError";
+import InputSelect from "../InputSelect/InputSelect";
 import CreateRobotFormRepositoryItem from "../CreateRobotFormRepositoryItem/CreateRobotFormRepositoryItem";
+import useCreateRobot from "../../hooks/useCreateRobot";
+import { stringCapitalization } from "../../functions/GeneralFunctions";
 import CreateRobotFormDeleteButton from "../CreateRobotFormDeleteButton/CreateRobotFormDeleteButton";
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
-import { stringCapitalization } from "../../functions/GeneralFunctions";
-import { envOnPremiseRobot } from "../../helpers/envProvider";
-import useCreateRobot from "../../hooks/useCreateRobot";
-import InputSelect from "../InputSelect/InputSelect";
-import InputError from "../InputError/InputError";
-import { FormikProps } from "formik/dist/types";
-import InputText from "../InputText/InputText";
 import InfoTip from "../InfoTip/InfoTip";
+import { envOnPremiseRobot } from "../../helpers/envProvider";
+import CreateRobotWorkspaceItemAccordionHeader from "../CreateRobotWorkspaceItemAccordionHeader/CreateRobotWorkspaceItemAccordionHeader";
 
 interface ICreateRobotFormWorkspaceItem {
   formik: FormikProps<IRobotWorkspaces>;

diff --git a/src/components/FormInputSelect/FormInputSelect.tsx b/src/components/FormInputSelect/FormInputSelect.tsx
@@ -0,0 +1,37 @@
+import React, { ReactElement } from "react";
+import InputSelect from "../InputSelect/InputSelect";
+import InputError from "../InputError/InputError";
+import InfoTip from "../InfoTip/InfoTip";
+
+interface IFormInputSelect {
+  labelText: string;
+  InfoTipText: string;
+  formikProps: any;
+  disabled?: boolean;
+  validationError?: any;
+  validationTouched?: any;
+  children?: ReactElement | ReactElement[];
+}
+
+export default function FormInputSelect({
+  labelText,
+  InfoTipText,
+  formikProps,
+  disabled,
+  validationError,
+  validationTouched,
+  children,
+}: IFormInputSelect): ReactElement {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex gap-1 min-w-fit text-xs font-medium text-layer-light-700">
+        {labelText}
+        <InfoTip content={InfoTipText} />
+      </div>
+      <InputSelect {...formikProps} disabled={disabled}>
+        {children}
+      </InputSelect>
+      <InputError error={validationError} touched={validationTouched} />
+    </div>
+  );
+}