refactor(create-forms): 🎉 update create forms

src/components/CreateEnvironmentFormStep1Tour/CreateEnvironmentFormStep1Tour.tsx

@@ -0,0 +1,21 @@
+import { ReactElement } from "react";
+import { getGuideItem } from "../../functions/handleGuide";
+import TourGuide from "../TourGuide/TourGuide";
+
+export default function CreateEnvironmentFormStep1Tour(): ReactElement {
+  return (
+    <TourGuide
+      hiddenButton
+      type="createRobotStep1"
+      tourConfig={[
+        getGuideItem("[data-tut='create-application-step1-name']"),
+        getGuideItem(
+          "[data-tut='create-application-step1-environment-selector']",
+        ),
+        getGuideItem("[data-tut='create-robot-step1-storage']"),
+        getGuideItem("[data-tut='create-environment-vdi-session-count']"),
+        getGuideItem("[data-tut='create-environment-gpu-resource']"),
+      ]}
+    />
+  );
+}

src/components/CreateFormStep2Tour/CreateFormStep2Tour.tsx

@@ -0,0 +1,74 @@
+import { ReactElement } from "react";
+import { getGuideItem } from "../../functions/handleGuide";
+import { envOnPremiseRobot } from "../../helpers/envProvider";
+import TourGuide from "../TourGuide/TourGuide";
+
+export default function CreateFormStep2Tour(): ReactElement {
+  return (
+    <TourGuide
+      hiddenButton
+      type="createRobotStep2"
+      tourConfig={
+        envOnPremiseRobot
+          ? [
+              getGuideItem("[data-tut='create-robot-step2-workspaces']"),
+              getGuideItem(
+                "[data-tut='create-robot-step2-workspace-add-button']",
+              ),
+              getGuideItem("[data-tut='create-robot-step2-workspace-name']"),
+
+              getGuideItem(
+                "[data-tut='create-robot-step2-workspace-delete-button']",
+              ),
+              getGuideItem(
+                "[data-tut='create-robot-step2-workspace-repositories']",
+              ),
+              getGuideItem(
+                "[data-tut='create-robot-step2-repository-add-button']",
+              ),
+              getGuideItem(
+                "[data-tut='create-robot-step2-workspace-repository-name']",
+              ),
+              getGuideItem(
+                "[data-tut='create-robot-step2-workspace-repository-url']",
+              ),
+              getGuideItem(
+                "[data-tut='create-robot-step2-workspace-repository-branch']",
+              ),
+              getGuideItem(
+                "[data-tut='create-robot-step2-workspace-repository-delete-button']",
+              ),
+            ]
+          : [
+              getGuideItem("[data-tut='create-robot-step2-workspaces']"),
+              getGuideItem(
+                "[data-tut='create-robot-step2-workspace-add-button']",
+              ),
+              getGuideItem("[data-tut='create-robot-step2-workspace-name']"),
+              getGuideItem("[data-tut='create-robot-step2-workspace-distro']"),
+              getGuideItem(
+                "[data-tut='create-robot-step2-workspace-delete-button']",
+              ),
+              getGuideItem(
+                "[data-tut='create-robot-step2-workspace-repositories']",
+              ),
+              getGuideItem(
+                "[data-tut='create-robot-step2-repository-add-button']",
+              ),
+              getGuideItem(
+                "[data-tut='create-robot-step2-workspace-repository-name']",
+              ),
+              getGuideItem(
+                "[data-tut='create-robot-step2-workspace-repository-url']",
+              ),
+              getGuideItem(
+                "[data-tut='create-robot-step2-workspace-repository-branch']",
+              ),
+              getGuideItem(
+                "[data-tut='create-robot-step2-workspace-repository-delete-button']",
+              ),
+            ]
+      }
+    />
+  );
+}

src/components/CreateFormStep3Tour/CreateFormStep3Tour.tsx

@@ -0,0 +1,22 @@
+import React, { ReactElement } from "react";
+import TourGuide from "../TourGuide/TourGuide";
+import { getGuideItem } from "../../functions/handleGuide";
+
+export default function CreateFormStep3Tour(): ReactElement {
+  return (
+    <TourGuide
+      hiddenButton
+      type="createRobotStep3"
+      tourConfig={[
+        getGuideItem("[data-tut='create-robot-step3-name']"),
+        getGuideItem("[data-tut='create-robot-step3-steps']"),
+        getGuideItem("[data-tut='create-robot-step3-build-add-button']"),
+        getGuideItem("[data-tut='create-robot-build-step-name']"),
+        getGuideItem("[data-tut='create-robot-build-step-workspace']"),
+        getGuideItem("[data-tut='create-robot-build-step-code-type']"),
+        getGuideItem("[data-tut='create-robot-build-step-code']"),
+        getGuideItem("[data-tut='create-robot-build-step-scope']"),
+      ]}
+    />
+  );
+}

src/components/CreateFormStep4Tour /CreateFormStep4Tour .tsx

@@ -0,0 +1,20 @@
+import { ReactElement } from "react";
+import { getGuideItem } from "../../functions/handleGuide";
+import TourGuide from "../TourGuide/TourGuide";
+
+export default function CreateFormStep4Tour(): ReactElement {
+  return (
+    <TourGuide
+      hiddenButton
+      type="createRobotStep4"
+      tourConfig={[
+        getGuideItem("[data-tut='create-robot-step4-name']"),
+        getGuideItem("[data-tut='create-robot-step4-workspace']"),
+        getGuideItem("[data-tut='create-robot-step4-code']"),
+        getGuideItem("[data-tut='create-robot-build-step-scope']"),
+        getGuideItem("[data-tut='create-robot-step4-environments']"),
+        getGuideItem("[data-tut='create-robot-step4-environments-add-button']"),
+      ]}
+    />
+  );
+}

src/components/CreateFormTourSwither/CreateFormTourSwither.tsx

@@ -0,0 +1,37 @@
+import React, { Fragment, ReactElement } from "react";
+import CreateRobotFormStep1Tour from "../CreateRobotFormStep1Tour/CreateRobotFormStep1Tour";
+import CreateEnvironmentFormStep1Tour from "../CreateEnvironmentFormStep1Tour/CreateEnvironmentFormStep1Tour";
+import CreateFormStep3Tour from "../CreateFormStep3Tour/CreateFormStep3Tour";
+import CreateFormStep2Tour from "../CreateFormStep2Tour/CreateFormStep2Tour";
+import CreateFormStep4Tour from "../CreateFormStep4Tour /CreateFormStep4Tour ";
+
+interface ICreateFormTourSwither {
+  isLoading?: boolean;
+  type: "step1-robot" | "step1-app" | "workspace" | "build" | "launch";
+}
+
+export default function CreateFormTourSwither({
+  isLoading,
+  type,
+}: ICreateFormTourSwither): ReactElement {
+  return (
+    <Fragment>
+      {(() => {
+        if (!isLoading) {
+          switch (type) {
+            case "step1-robot":
+              return <CreateRobotFormStep1Tour />;
+            case "step1-app":
+              return <CreateEnvironmentFormStep1Tour />;
+            case "workspace":
+              return <CreateFormStep2Tour />;
+            case "build":
+              return <CreateFormStep3Tour />;
+            case "launch":
+              return <CreateFormStep4Tour />;
+          }
+        }
+      })()}
+    </Fragment>
+  );
+}

src/components/CreateForms/CreateEnvironmentFormStep1.tsx

@@ -1,29 +1,27 @@
 import React, { Fragment, ReactElement, useEffect, useState } from "react";
 import CreateRobotFormVDISessionCount from "../CreateRobotFormVDISessionCount/CreateRobotFormVDISessionCount";
+import CreateRobotFormAdvancedSettings from "../CreateRobotFormAdvancedSettings/CreateRobotFormAdvancedSettings";
 import CreateRobotFormCancelButton from "../CreateRobotFormCancelButton/CreateRobotFormCancelButton";
 import { CreateEnvironmentsFormStep1Validations } from "../../validations/EnvironmentsValidations";
 import CreateRobotFormGpuResource from "../CreateRobotFormGpuResource/CreateRobotFormGpuResource";
 import CreateRobotFormLoader from "../CreateRobotFormLoader/CreateRobotFormLoader";
 import EnvironmentSelector from "../EnvironmentSelector/EnvironmentSelector";
 import CreateRobotStorage from "../CreateRobotStorage/CreateRobotStorage";
 import { createEnvironment } from "../../toolkit/EnvironmentSlice";
-import { getGuideItem } from "../../functions/handleGuide";
 import useCreateRobot from "../../hooks/useCreateRobot";
 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 Seperator from "../Seperator/Seperator";
-import TourGuide from "../TourGuide/TourGuide";
 import InputText from "../InputText/InputText";
 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 CreateRobotFormAdvancedSettings from "../CreateRobotFormAdvancedSettings/CreateRobotFormAdvancedSettings";
 
 interface ICreateEnvironmentFormStep1 {
   isImportRobot?: boolean;
@@ -196,6 +194,7 @@ export default function CreateEnvironmentFormStep1({
     <Fragment>
       {
         <CreateRobotFormLoader
+          type="step1-app"
           loadingText="Loading..."
           loadingItems={[]}
           isLoading={isImportRobot ? !responseRobot : false}
@@ -336,19 +335,6 @@ export default function CreateEnvironmentFormStep1({
           </form>
         </CreateRobotFormLoader>
       }
-      <TourGuide
-        hiddenButton
-        type="createRobotStep1"
-        tourConfig={[
-          getGuideItem("[data-tut='create-application-step1-name']"),
-          getGuideItem(
-            "[data-tut='create-application-step1-environment-selector']",
-          ),
-          getGuideItem("[data-tut='create-robot-step1-storage']"),
-          getGuideItem("[data-tut='create-environment-vdi-session-count']"),
-          getGuideItem("[data-tut='create-environment-gpu-resource']"),
-        ]}
-      />
     </Fragment>
   );
 }

src/components/CreateForms/CreateRobotFormStep1.tsx

@@ -5,13 +5,14 @@ import CreateRobotFormCancelButton from "../CreateRobotFormCancelButton/CreateRo
 import CreateRobotFormLoader from "../CreateRobotFormLoader/CreateRobotFormLoader";
 import { CreateRobotFormStep1Validations } from "../../validations/RobotsValidations";
 import CreateRobotStorage from "../CreateRobotStorage/CreateRobotStorage";
+import { addPhysicalInstanceToFleet } from "../../toolkit/InstanceSlice";
 import CreateRobotTypes from "../CreateRobotTypes/CreateRobotTypes";
-import { getGuideItem } from "../../functions/handleGuide";
 import FormInputText from "../FormInputText/FormInputText";
 import useCreateRobot from "../../hooks/useCreateRobot";
+import { createRobot } from "../../toolkit/RobotSlice";
 import InputToggle from "../InputToggle/InputToggle";
 import useFunctions from "../../hooks/useFunctions";
-import TourGuide from "../TourGuide/TourGuide";
+import { useAppDispatch } from "../../hooks/redux";
 import Seperator from "../Seperator/Seperator";
 import { useParams } from "react-router-dom";
 import useMain from "../../hooks/useMain";
@@ -30,9 +31,9 @@ export default function CreateRobotFormStep1({
   const { robotData, setRobotData } = useCreateRobot();
   const { selectedState, handleCreateRobotNextStep } = useMain();
   const [responseRobot, setResponseRobot] = useState<any>(undefined);
-  const { getRobot, getEnvironment, updateRobot, addPhysicalInstanceToFleet } =
-    useFunctions();
+  const { getRobot, getEnvironment } = useFunctions();
   const url = useParams();
+  const dispatch = useAppDispatch();
 
   useEffect(() => {
     if (!responseRobot && isImportRobot) {
@@ -84,7 +85,29 @@ export default function CreateRobotFormStep1({
       formik.setSubmitting(true);
 
       if (isImportRobot) {
-        updateRobot();
+        await dispatch(
+          createRobot({
+            organizationId: selectedState?.organization?.organizationId!,
+            roboticsCloudName: selectedState?.roboticsCloud?.name!,
+            instanceId: selectedState?.instance?.instanceId,
+            region: selectedState?.roboticsCloud?.region!,
+            robotName: robotData?.step1?.robotName,
+            fleetName: selectedState?.fleet?.name,
+            physicalInstanceName: robotData?.step1?.isVirtualRobot
+              ? undefined
+              : robotData?.step1?.physicalInstanceName,
+            distributions: robotData?.step1?.rosDistros,
+            bridgeEnabled: robotData?.step1?.isEnabledROS2Bridge,
+            vdiEnabled: robotData?.step1?.remoteDesktop?.isEnabled,
+            vdiSessionCount: robotData?.step1?.remoteDesktop?.sessionCount,
+            ideEnabled: robotData?.step1?.isEnabledIde,
+            storageAmount: robotData?.step1?.robotStorage,
+            gpuEnabledForCloudInstance:
+              robotData?.step1?.gpuEnabledForCloudInstance,
+            workspaces: robotData.step2.workspaces,
+          }),
+        );
+
         toast.success(
           "Robot updated successfully. Redirecting to fleet page...",
         );
@@ -95,11 +118,18 @@ export default function CreateRobotFormStep1({
             ?.name}/${selectedState?.fleet?.name}/${robotData?.step1
             ?.robotName}}`;
         }, 2000);
-        return;
-      }
-
-      if (!formik.values?.isVirtualRobot) {
-        addPhysicalInstanceToFleet();
+      } else if (!formik.values?.isVirtualRobot) {
+        await dispatch(
+          addPhysicalInstanceToFleet({
+            organizationId: selectedState?.organization?.organizationId,
+            roboticsCloudName: selectedState?.roboticsCloud?.name,
+            instanceId: selectedState?.instance?.instanceId,
+            region: selectedState?.roboticsCloud?.region,
+            robolaunchFederatedFleetsName: selectedState?.fleet?.name,
+            robolaunchPhysicalInstancesName:
+              robotData.step1.physicalInstanceName,
+          }),
+        );
       }
 
       formik.setSubmitting(false);
@@ -127,6 +157,7 @@ export default function CreateRobotFormStep1({
     <Fragment>
       {
         <CreateRobotFormLoader
+          type="step1-robot"
           loadingText="Loading..."
           loadingItems={[]}
           isLoading={isImportRobot ? !responseRobot : false}
@@ -316,20 +347,6 @@ export default function CreateRobotFormStep1({
           </form>
         </CreateRobotFormLoader>
       }
-      <TourGuide
-        hiddenButton
-        type="createRobotStep1"
-        tourConfig={[
-          getGuideItem("[data-tut='create-robot-step1-name']"),
-          getGuideItem("[data-tut='create-robot-step1-type']"),
-          getGuideItem("[data-tut='create-robot-step1-ros-distrobutions']"),
-          getGuideItem("[data-tut='create-robot-step1-storage']"),
-          getGuideItem("[data-tut='create-robot-step1-ros2-bridge']"),
-          getGuideItem("[data-tut='create-robot-step1-vdi-session-count']"),
-          getGuideItem("[data-tut='create-robot-step1-gpu-resource']"),
-          getGuideItem("[data-tut='create-robot-step1-development-mode']"),
-        ]}
-      />
     </Fragment>
   );
 }