feat(delete launch-manager modal): 🎉 add delete launch manager modal …

…and update workspace component
robolaunch · Aug 8, 2023 · fb5f023 · fb5f023
1 parent d6d2ddb
commit fb5f023
Show file tree

Hide file tree

Showing 10 changed files with 236 additions and 113 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "private": true,
   "dependencies": {
     "@emotion/css": "^11.10.6",

diff --git a/src/components/CreateForms/CreateRobotFormStep4.tsx b/src/components/CreateForms/CreateRobotFormStep4.tsx
@@ -9,10 +9,7 @@ import InputText from "../InputText/InputText";
 import InputError from "../InputError/InputError";
 import { useAppDispatch } from "../../hooks/redux";
 import useMain from "../../hooks/useMain";
-import {
-  createLaunchManager,
-  deleteLaunchManager,
-} from "../../toolkit/RobotSlice";
+import { createLaunchManager } from "../../toolkit/RobotSlice";
 import Button from "../Button/Button";
 import { toast } from "sonner";
 import useFunctions from "../../hooks/useFunctions";
@@ -23,10 +20,10 @@ import CreateRobotFormCodeScope from "../CreateRobotFormCodeScope/CreateRobotFor
 import CreateRobotFormEnvItem from "../CreateRobotFormEnvItem/CreateRobotFormEnvItem";
 import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
 import { organizationNameViewer } from "../../functions/GeneralFunctions";
-import CreateRobotFormDeleteButton from "../CreateRobotFormDeleteButton/CreateRobotFormDeleteButton";
 import { useParams } from "react-router-dom";
 import InfoTip from "../InfoTip/InfoTip";
 import * as Yup from "yup";
+import RobotDeleteLaunchManagerButton from "../RobotDeleteLaunchManagerButton/RobotDeleteLaunchManagerButton";
 
 interface ICreateRobotFormStep4 {
   isImportRobot?: boolean;
@@ -351,35 +348,17 @@ export default function CreateRobotFormStep4({
           />
         </div>
 
-        {isImportRobot ? (
-          <CreateRobotFormDeleteButton
-            onClick={async () => {
-              await dispatch(
-                deleteLaunchManager({
-                  organizationId: selectedState?.organization?.organizationId,
-                  roboticsCloudName: selectedState?.roboticsCloud?.name,
-                  instanceId: selectedState?.instance?.instanceId,
-                  region: selectedState?.instance?.region,
-                  robotName: robotData?.step1?.robotName,
-                  fleetName: selectedState?.fleet?.name,
-                  physicalInstanceName: robotData?.step1?.physicalInstanceName,
-                  launchManagerName: formik.values?.name,
-                })
-              );
-
-              setTimeout(() => {
-                window.location.reload();
-              }, 1000);
-            }}
-            text="Delete Launch Step"
-          />
-        ) : (
+        {!isImportRobot ? (
           <Button
             type="submit"
             disabled={!formik?.isValid || formik.isSubmitting}
             className="w-full !h-11 text-xs"
             text={url?.robotName ? `Add Launch Step` : `Create Robot`}
           />
+        ) : (
+          <RobotDeleteLaunchManagerButton
+            launchManagerName={formik.values?.name}
+          />
         )}
       </form>
     </CreateRobotFormLoader>

diff --git a/src/components/CreateRobotFormWorkspaceItem/CreateRobotFormWorkspaceItem.tsx b/src/components/CreateRobotFormWorkspaceItem/CreateRobotFormWorkspaceItem.tsx
@@ -63,7 +63,7 @@ export default function CreateRobotFormWorkspaceItem({
                   title={`Launch State of Cloud Instance`}
                   className="font-medium"
                 >
-                  CI:
+                  V:
                 </span>
                 <StateCell state={workspaceState?.[0]} />
               </div>
@@ -74,7 +74,7 @@ export default function CreateRobotFormWorkspaceItem({
                   title={`Launch State of Physical Instance`}
                   className="font-medium"
                 >
-                  PI:
+                  P:
                 </span>
                 <StateCell state={workspaceState?.[1]} />
               </div>

diff --git a/src/components/DeployApplicationSelector/DeployApplicationSelector.tsx b/src/components/DeployApplicationSelector/DeployApplicationSelector.tsx
@@ -230,6 +230,8 @@ export default function DeployApplicationSelector({
     });
   }
 
+  const { setSidebarState } = useMain();
+
   return (
     <form
       onSubmit={formik.handleSubmit}
@@ -245,7 +247,20 @@ export default function DeployApplicationSelector({
           />
           <span className="capitalize text-xs">Organization</span>
         </div>
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-3">
+          {!formik?.values?.organization && (
+            <span
+              onClick={() => {
+                handleCloseModal();
+                setSidebarState((prev: any) => {
+                  return { ...prev, isOpen: true, page: "organization" };
+                });
+              }}
+              className="text-xs text-layer-light-700 cursor-pointer hover:underline "
+            >
+              Create
+            </span>
+          )}
           <InputSelect
             className="min-w-[12rem]"
             {...formik.getFieldProps(`organization`)}
@@ -286,7 +301,20 @@ export default function DeployApplicationSelector({
           />
           <span className="capitalize text-xs">Robotics Cloud</span>
         </div>
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-3">
+          {!formik?.values?.roboticscloud && (
+            <span
+              onClick={() => {
+                handleCloseModal();
+                setSidebarState((prev: any) => {
+                  return { ...prev, isOpen: true, page: "roboticscloud" };
+                });
+              }}
+              className="text-xs text-layer-light-700 cursor-pointer hover:underline "
+            >
+              Create
+            </span>
+          )}
           <InputSelect
             className="min-w-[12rem]"
             {...formik.getFieldProps(`roboticscloud`)}
@@ -327,7 +355,20 @@ export default function DeployApplicationSelector({
           />
           <span className="capitalize text-xs">Cloud Instance</span>
         </div>
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-3">
+          {!formik?.values?.instance && (
+            <span
+              onClick={() => {
+                handleCloseModal();
+                setSidebarState((prev: any) => {
+                  return { ...prev, isOpen: true, page: "instance" };
+                });
+              }}
+              className="text-xs text-layer-light-700 cursor-pointer hover:underline "
+            >
+              Create
+            </span>
+          )}
           <InputSelect
             className="min-w-[12rem]"
             {...formik.getFieldProps(`instance`)}
@@ -373,7 +414,20 @@ export default function DeployApplicationSelector({
           />
           <span className="capitalize text-xs">Fleet</span>
         </div>
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-3">
+          {!formik?.values?.fleet && (
+            <span
+              onClick={() => {
+                handleCloseModal();
+                setSidebarState((prev: any) => {
+                  return { ...prev, isOpen: true, page: "fleet" };
+                });
+              }}
+              className="text-xs text-layer-light-700 cursor-pointer hover:underline "
+            >
+              Create
+            </span>
+          )}
           <InputSelect
             className="min-w-[12rem]"
             {...formik.getFieldProps(`fleet`)}

diff --git a/src/components/RobotDeleteLaunchManagerButton/RobotDeleteLaunchManagerButton.tsx b/src/components/RobotDeleteLaunchManagerButton/RobotDeleteLaunchManagerButton.tsx
@@ -0,0 +1,29 @@
+import React, { Fragment, ReactElement, useState } from "react";
+import Button from "../Button/Button";
+import DeleteLaunchManagerModal from "../../modals/DeleteLaunchManagerModal";
+
+interface IRobotDeleteLaunchManagerButton {
+  launchManagerName: string;
+}
+
+export default function RobotDeleteLaunchManagerButton({
+  launchManagerName,
+}: IRobotDeleteLaunchManagerButton): ReactElement {
+  const [isShowDeleteModal, setIsShowDeleteModal] = useState<boolean>(false);
+
+  return (
+    <Fragment>
+      <Button
+        className="text-xs w-full !h-11 !bg-transparent hover:!bg-red-100 !text-red-500 !border !border-red-500 focus:!ring-red-300"
+        onClick={() => setIsShowDeleteModal(true)}
+        text="Delete Launch Step"
+      />
+      {isShowDeleteModal && (
+        <DeleteLaunchManagerModal
+          handleCloseModal={() => setIsShowDeleteModal(false)}
+          launchManagerName={launchManagerName}
+        />
+      )}
+    </Fragment>
+  );
+}
diff --git a/src/components/UpdateRobotLaunchsForm/UpdateRobotLaunchsForm.tsx b/src/components/UpdateRobotLaunchsForm/UpdateRobotLaunchsForm.tsx
@@ -16,7 +16,7 @@ export default function UpdateRobotLaunchsForm(): ReactElement {
     useState<any>(undefined);
   const { getLaunchManagers } = useFunctions();
   const url = useParams();
-  const { robotData, setRobotData } = useRobot();
+  const { robotData, handleAddLaunchManager } = useRobot();
   const { selectedState } = useMain();
 
   useEffect(() => {
@@ -74,29 +74,7 @@ export default function UpdateRobotLaunchsForm(): ReactElement {
               ) : (
                 <CreateRobotFormAddButton
                   onClick={() => {
-                    setRobotData((prev: any) => {
-                      return {
-                        ...prev,
-                        step4: {
-                          ...prev.step4,
-                          robotLaunchSteps: [
-                            ...prev.step4.robotLaunchSteps,
-                            {
-                              workspace: "",
-                              entryPointType: "custom",
-                              entryPointCmd: "",
-                              instancesName: [],
-                              robotLmEnvs: [
-                                // {
-                                //   name: "",
-                                //   value: "",
-                                // },
-                              ],
-                            },
-                          ],
-                        },
-                      };
-                    });
+                    handleAddLaunchManager();
                     setIsAddedForm(true);
                   }}
                 />
@@ -127,7 +105,7 @@ export default function UpdateRobotLaunchsForm(): ReactElement {
                           title={`Launch State of Cloud Instance`}
                           className="font-medium"
                         >
-                          CI:
+                          Virtual:
                         </span>
                         <StateCell
                           state={
@@ -142,7 +120,7 @@ export default function UpdateRobotLaunchsForm(): ReactElement {
                             title={`Launch State of Physical Instance`}
                             className="font-medium"
                           >
-                            PI:
+                            Physical:
                           </span>
                           <StateCell
                             state={
@@ -187,29 +165,7 @@ export default function UpdateRobotLaunchsForm(): ReactElement {
           ) : (
             <CreateRobotFormAddButton
               onClick={() => {
-                setRobotData((prev: any) => {
-                  return {
-                    ...prev,
-                    step4: {
-                      ...prev.step4,
-                      robotLaunchSteps: [
-                        ...prev.step4.robotLaunchSteps,
-                        {
-                          workspace: "",
-                          entryPointType: "custom",
-                          entryPointCmd: "",
-                          instancesName: [],
-                          robotLmEnvs: [
-                            {
-                              name: "",
-                              value: "",
-                            },
-                          ],
-                        },
-                      ],
-                    },
-                  };
-                });
+                handleAddLaunchManager();
                 setIsAddedForm(true);
               }}
             />

diff --git a/src/contexts/FunctionsContext.tsx b/src/contexts/FunctionsContext.tsx
@@ -737,9 +737,9 @@ export default ({ children }: any) => {
               ...prevState,
               step3: {
                 buildManagerName:
-                  responseRobotBuildManager?.payload?.data[0]?.roboticsClouds[0]
-                    ?.cloudInstances[0]?.robolaunchFederatedRobots[0]
-                    ?.buildManagerName,
+                  responseRobotBuildManager?.payload?.data[0]?.roboticsClouds[0]?.cloudInstances[0]?.robolaunchFederatedRobots[0]?.buildManagerName?.split(
+                    "-"
+                  )[0],
                 robotBuildSteps:
                   responseRobotBuildManager?.payload?.data[0]?.roboticsClouds[0]
                     ?.cloudInstances[0]?.robolaunchFederatedRobots[0]