feat(form-input-text): 🎉 add form input-text component and update for…

…m steps
robolaunch · Aug 29, 2023 · b7489b2 · b7489b2
1 parent 126ff62
commit b7489b2
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 42 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -845,6 +845,10 @@ video {
   margin: 16rem;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;

diff --git a/src/components/CreateForms/CreateRobotFormStep1.tsx b/src/components/CreateForms/CreateRobotFormStep1.tsx
@@ -21,6 +21,7 @@ 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;
@@ -167,26 +168,19 @@ export default function CreateRobotFormStep1({
             className="flex flex-col gap-3 animate__animated animate__fadeIn relative"
           >
             {/* 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>
+            <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}
+            />
             {/* 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 { FormikProps } from "formik/dist/types";
-import InputText from "../InputText/InputText";
-import InputError from "../InputError/InputError";
-import InputSelect from "../InputSelect/InputSelect";
+import CreateRobotWorkspaceItemAccordionHeader from "../CreateRobotWorkspaceItemAccordionHeader/CreateRobotWorkspaceItemAccordionHeader";
 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 InfoTip from "../InfoTip/InfoTip";
+import { stringCapitalization } from "../../functions/GeneralFunctions";
 import { envOnPremiseRobot } from "../../helpers/envProvider";
-import CreateRobotWorkspaceItemAccordionHeader from "../CreateRobotWorkspaceItemAccordionHeader/CreateRobotWorkspaceItemAccordionHeader";
+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";
 
 interface ICreateRobotFormWorkspaceItem {
   formik: FormikProps<IRobotWorkspaces>;

diff --git a/src/components/CreateRobotRosDistrobutions/CreateRobotRosDistrobutions.tsx b/src/components/CreateRobotRosDistrobutions/CreateRobotRosDistrobutions.tsx
@@ -37,7 +37,7 @@ export default function CreateRobotRosDistrobutions({
   }
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className="flex flex-col gap-2">
       <div className="min-w-fit flex gap-1 text-xs font-medium text-layer-light-700">
         Ros Distrobutions:
         <InfoTip

diff --git a/src/components/CreateRobotTypes/CreateRobotTypes.tsx b/src/components/CreateRobotTypes/CreateRobotTypes.tsx
@@ -32,7 +32,6 @@ export default function CreateRobotTypes({
           region: selectedState?.instance?.region,
         })
       ).then((response: any) => {
-        console.log(response);
         setResponsePhysicalInstances(
           response?.payload?.data[0]?.roboticsClouds[0]?.cloudInstances[0]?.robolaunchPhysicalInstances?.filter(
             (instance: any) =>
@@ -54,7 +53,7 @@ export default function CreateRobotTypes({
 
   return (
     <Fragment>
-      <div className="flex flex-col gap-1.5">
+      <div className="flex flex-col gap-2">
         <div className="min-w-fit flex gap-1 text-xs font-medium text-layer-light-700">
           Robot Type:
           <InfoTip content="Select the type of robot you want to create." />
@@ -110,7 +109,7 @@ export default function CreateRobotTypes({
       {!formik.values?.isVirtualRobot &&
       Array.isArray(responsePhysicalInstances) ? (
         responsePhysicalInstances?.length > 0 ? (
-          <div className="flex flex-col gap-1.5 pt-1">
+          <div className="flex flex-col gap-2 pt-1">
             <div className="min-w-fit flex gap-1 text-xs font-medium text-layer-light-700">
               Physical Instances:
               <InfoTip content="Select the physical instance you want to hybrid robot to be deployed on." />
@@ -153,7 +152,7 @@ export default function CreateRobotTypes({
             />
           </div>
         ) : (
-          <div className="relative h-8">
+          <div className="relative h-8 m-2">
             <SidebarInfo text="You need to create a physical instance first" />
           </div>
         )

diff --git a/src/components/FormInputText/FormInputText.tsx b/src/components/FormInputText/FormInputText.tsx
@@ -0,0 +1,40 @@
+import React, { ReactElement } from "react";
+import InputError from "../InputError/InputError";
+import InputText from "../InputText/InputText";
+import InfoTip from "../InfoTip/InfoTip";
+
+interface IFormInputText {
+  labelText: string;
+  InfoTipText: string;
+  formikProps: any;
+  disabled?: boolean;
+  inputHoverText?: string;
+  validationError?: any;
+  validationTouched?: any;
+}
+
+export default function FormInputText({
+  labelText,
+  InfoTipText,
+  formikProps,
+  disabled,
+  inputHoverText,
+  validationError,
+  validationTouched,
+}: IFormInputText): 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>
+      <InputText
+        {...formikProps}
+        className="!text-sm"
+        disabled={disabled}
+        inputHoverText={inputHoverText}
+      />
+      <InputError error={validationError} touched={validationTouched} />
+    </div>
+  );
+}
diff --git a/src/components/SidebarLists/CloudInstancesList.tsx b/src/components/SidebarLists/CloudInstancesList.tsx
@@ -1,16 +1,16 @@
 import React, { Fragment, ReactElement, useEffect, useState } from "react";
+import {
+  envOnPremiseFleet,
+  envOnPremiseRobot,
+} from "../../helpers/envProvider";
+import CloudInstancesListItemDesc from "../CloudInstancesListItemDesc/CloudInstancesListItemDesc";
 import SidebarInstancesTabs from "../SidebarInstancesTabs/SidebarInstancesTabs";
 import { organizationNameViewer } from "../../functions/GeneralFunctions";
+import SidebarListLoader from "../SidebarListLoader/SidebarListLoader";
 import SidebarInfo from "../SidebarInfo/SidebarInfo";
 import useFunctions from "../../hooks/useFunctions";
 import SidebarListItem from "./SidebarListItem";
 import useMain from "../../hooks/useMain";
-import SidebarListLoader from "../SidebarListLoader/SidebarListLoader";
-import CloudInstancesListItemDesc from "../CloudInstancesListItemDesc/CloudInstancesListItemDesc";
-import {
-  envOnPremiseFleet,
-  envOnPremiseRobot,
-} from "../../helpers/envProvider";
 
 interface ICloudInstancesList {
   reload: boolean;

diff --git a/src/components/SidebarMenuItem/SideBarMenuItem.tsx b/src/components/SidebarMenuItem/SideBarMenuItem.tsx
@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
-import useMain from "../../hooks/useMain";
-import useTheme from "../../hooks/useTheme";
-import { useNavigate, useParams } from "react-router-dom";
 import SidebarMenuItemToolTip from "../SidebarMenuItemToolTip/SidebarMenuItemToolTip";
 import { envOnPremiseRobot } from "../../helpers/envProvider";
+import { useNavigate, useParams } from "react-router-dom";
 import { isDesktop } from "react-device-detect";
+import useTheme from "../../hooks/useTheme";
+import useMain from "../../hooks/useMain";
 
 interface ISideBarMenuItem {
   type: string;