refactor(objects-create-flow): 🎉 update sidebar-content with sub comp…

…onents
robolaunch · Aug 22, 2023 · 75dfe3f · 75dfe3f
1 parent c3209fc
commit 75dfe3f
Show file tree

Hide file tree

Showing 30 changed files with 272 additions and 197 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -1507,6 +1507,27 @@ video {
           animation: spin 1s linear infinite;
 }
 
+@-webkit-keyframes ping {
+  75%, 100% {
+    -webkit-transform: scale(2);
+            transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes ping {
+  75%, 100% {
+    -webkit-transform: scale(2);
+            transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.animate-ping {
+  -webkit-animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+          animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
 .\!cursor-not-allowed {
   cursor: not-allowed !important;
 }
@@ -3201,6 +3222,20 @@ td {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.hover\:scale-\[0\.98\.5\]:hover {
+  --tw-scale-x: 0.98.5;
+  --tw-scale-y: 0.98.5;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hover\:scale-\[0\.985\]:hover {
+  --tw-scale-x: 0.985;
+  --tw-scale-y: 0.985;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:cursor-not-allowed:hover {
   cursor: not-allowed;
 }
@@ -3394,6 +3429,22 @@ td {
   .md\:w-\[40rem\] {
     width: 40rem;
   }
+
+  .md\:w-\[30rem\] {
+    width: 30rem;
+  }
+
+  .md\:w-\[34rem\] {
+    width: 34rem;
+  }
+
+  .md\:w-\[36rem\] {
+    width: 36rem;
+  }
+
+  .md\:w-\[38rem\] {
+    width: 38rem;
+  }
 }
 
 @media (min-width: 1024px) {

diff --git a/src/components/CloudInstancesListItemDesc/CloudInstancesListItemDesc.tsx b/src/components/CloudInstancesListItemDesc/CloudInstancesListItemDesc.tsx
@@ -0,0 +1,23 @@
+import React, { ReactElement } from "react";
+import StateCell from "../Cells/StateCell";
+
+interface ICloudInstancesListItemDesc {
+  instance: any;
+}
+
+export default function CloudInstancesListItemDesc({
+  instance,
+}: ICloudInstancesListItemDesc): ReactElement {
+  return (
+    <div className="flex gap-2">
+      <div className="flex gap-1.5">
+        <span className="font-medium">RS:</span>
+        <StateCell state={instance?.instanceCloudState} isRobolaunchState />
+      </div>
+      <div className="flex gap-1.5">
+        <span className="font-medium">PS:</span>
+        <StateCell state={instance?.instanceState} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/CountWidget/CountWidget.tsx b/src/components/CountWidget/CountWidget.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import Widget from "../../layouts/WidgetLayout";
-import { GoGraph } from "react-icons/go";
 import ReactApexChart from "react-apexcharts";
+import { GoGraph } from "react-icons/go";
 
 interface ICountWidget {
   data: any[] | undefined;

diff --git a/src/components/CreateForms/ConnectPhysicalInstanceForm.tsx b/src/components/CreateForms/ConnectPhysicalInstanceForm.tsx
@@ -1,15 +1,15 @@
-import { useFormik } from "formik";
 import React, { ReactElement } from "react";
+import { addPhysicalInstance } from "../../toolkit/InstanceSlice";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { useAppDispatch } from "../../hooks/redux";
+import { useKeycloak } from "@react-keycloak/web";
 import InputError from "../InputError/InputError";
 import InputText from "../InputText/InputText";
-import Button from "../Button/Button";
-import useMain from "../../hooks/useMain";
-import { useAppDispatch } from "../../hooks/redux";
-import { addPhysicalInstance } from "../../toolkit/InstanceSlice";
 import { Editor } from "@monaco-editor/react";
-import { CopyToClipboard } from "react-copy-to-clipboard";
+import useMain from "../../hooks/useMain";
+import Button from "../Button/Button";
+import { useFormik } from "formik";
 import { toast } from "sonner";
-import { useKeycloak } from "@react-keycloak/web";
 
 export default function ConnectPhysicalInstanceForm(): ReactElement {
   const [code, setCode] = React.useState<string>("");

diff --git a/src/components/CreateForms/CreateRobotFormStep1.tsx b/src/components/CreateForms/CreateRobotFormStep1.tsx
@@ -46,10 +46,10 @@ export default function CreateRobotFormStep1({
   function handleGetRobot() {
     getRobot(
       {
-        organizationId: selectedState?.organization?.organizationId,
-        roboticsCloudName: selectedState?.roboticsCloud?.name,
+        organizationId: selectedState?.organization?.organizationId as string,
+        roboticsCloudName: selectedState?.roboticsCloud?.name as string,
         instanceId: selectedState?.instance?.instanceId,
-        region: selectedState?.roboticsCloud?.region,
+        region: selectedState?.roboticsCloud?.region as string,
         fleetName: selectedState?.fleet?.name,
         robotName: robotData?.step1?.robotName || url?.robotName,
       },
@@ -64,10 +64,10 @@ export default function CreateRobotFormStep1({
   function handleGetEnvironment() {
     getEnvironment(
       {
-        organizationId: selectedState?.organization?.organizationId,
-        roboticsCloudName: selectedState?.roboticsCloud?.name,
+        organizationId: selectedState?.organization?.organizationId as string,
+        roboticsCloudName: selectedState?.roboticsCloud?.name as string,
         instanceId: selectedState?.instance?.instanceId,
-        region: selectedState?.roboticsCloud?.region,
+        region: selectedState?.roboticsCloud?.region as string,
         fleetName: selectedState?.fleet?.name,
         environmentName: url?.robotName as string,
       },
@@ -88,10 +88,10 @@ export default function CreateRobotFormStep1({
       if (isImportRobot) {
         await dispatch(
           createRobot({
-            organizationId: selectedState?.organization?.organizationId,
-            roboticsCloudName: selectedState?.roboticsCloud?.name,
+            organizationId: selectedState?.organization?.organizationId!,
+            roboticsCloudName: selectedState?.roboticsCloud?.name!,
             instanceId: selectedState?.instance?.instanceId,
-            region: selectedState?.roboticsCloud?.region,
+            region: selectedState?.roboticsCloud?.region!,
             fleetName: selectedState?.fleet?.name,
             robotName: formik.values?.robotName,
             physicalInstanceName: robotData?.step1?.isVirtualRobot
@@ -268,9 +268,7 @@ export default function CreateRobotFormStep1({
               </div>
               {/* Robot Services */}
 
-              {/* Seperator */}
               <Seperator />
-              {/* Seperator */}
 
               {/* GPU Resource */}
               <div className="flex items-center gap-1">
@@ -288,9 +286,7 @@ export default function CreateRobotFormStep1({
               </div>
               {/* GPU Resource */}
 
-              {/* Seperator */}
               <Seperator />
-              {/* Seperator */}
 
               {/* Development Mode */}
               {!isImportRobot && (

diff --git a/src/components/CreateForms/CreateRobotFormStep2.tsx b/src/components/CreateForms/CreateRobotFormStep2.tsx
@@ -50,9 +50,9 @@ export default function CreateRobotFormStep2({
       if (envOnPremiseRobot) {
         dispatch(
           createEnvironment({
-            organizationId: selectedState?.organization?.organizationId,
-            roboticsCloudName: selectedState?.roboticsCloud?.name,
-            region: selectedState?.roboticsCloud?.region,
+            organizationId: selectedState?.organization?.organizationId!,
+            roboticsCloudName: selectedState?.roboticsCloud?.name!,
+            region: selectedState?.roboticsCloud?.region!,
             instanceId: selectedState?.instance?.instanceId,
             fleetName: selectedState?.fleet?.name,
             environmentName: robotData?.step1?.robotName,
@@ -72,10 +72,10 @@ export default function CreateRobotFormStep2({
       } else {
         dispatch(
           createRobot({
-            organizationId: selectedState?.organization?.organizationId,
-            roboticsCloudName: selectedState?.roboticsCloud?.name,
+            organizationId: selectedState?.organization?.organizationId!,
+            roboticsCloudName: selectedState?.roboticsCloud?.name!,
             instanceId: selectedState?.instance?.instanceId,
-            region: selectedState?.roboticsCloud?.region,
+            region: selectedState?.roboticsCloud?.region!,
             robotName: robotData?.step1?.robotName,
             fleetName: selectedState?.fleet?.name,
             workspaceUpdated: isImportRobot ? true : false,
@@ -158,8 +158,8 @@ export default function CreateRobotFormStep2({
   function handleGetRobot() {
     getRobot(
       {
-        organizationId: selectedState?.organization?.organizationId,
-        roboticsCloudName: selectedState?.roboticsCloud?.name,
+        organizationId: selectedState?.organization?.organizationId!,
+        roboticsCloudName: selectedState?.roboticsCloud?.name!,
         instanceId: selectedState?.instance?.instanceId,
         region: selectedState?.instance?.region,
         fleetName: selectedState?.fleet?.name,
@@ -175,10 +175,10 @@ export default function CreateRobotFormStep2({
   function handleGetEnvironment() {
     getEnvironment(
       {
-        organizationId: selectedState?.organization?.organizationId,
-        roboticsCloudName: selectedState?.roboticsCloud?.name,
+        organizationId: selectedState?.organization?.organizationId!,
+        roboticsCloudName: selectedState?.roboticsCloud?.name!,
         instanceId: selectedState?.instance?.instanceId,
-        region: selectedState?.roboticsCloud?.region,
+        region: selectedState?.roboticsCloud?.region!,
         fleetName: selectedState?.fleet?.name,
         environmentName: url?.robotName as string,
       },
@@ -193,8 +193,8 @@ export default function CreateRobotFormStep2({
   function handleGetFleet() {
     getFleet(
       {
-        organizationId: selectedState?.organization?.organizationId,
-        roboticsCloudName: selectedState?.roboticsCloud?.name,
+        organizationId: selectedState?.organization?.organizationId!,
+        roboticsCloudName: selectedState?.roboticsCloud?.name!,
         instanceId: selectedState?.instance?.instanceId,
         region: selectedState?.instance?.region,
         fleetName: selectedState?.fleet?.name,
@@ -209,8 +209,8 @@ export default function CreateRobotFormStep2({
   function handleGetNamespace() {
     getNamespace(
       {
-        organizationId: selectedState?.organization?.organizationId,
-        roboticsCloudName: selectedState?.roboticsCloud?.name,
+        organizationId: selectedState?.organization?.organizationId!,
+        roboticsCloudName: selectedState?.roboticsCloud?.name!,
         instanceId: selectedState?.instance?.instanceId,
         region: selectedState?.instance?.region,
         namespaceName: selectedState?.fleet?.name,

diff --git a/src/components/CreateForms/CreateRobotFormStep3.tsx b/src/components/CreateForms/CreateRobotFormStep3.tsx
@@ -72,10 +72,10 @@ export default function CreateRobotFormStep3({
   function handleGetRobot() {
     getRobot(
       {
-        organizationId: selectedState?.organization?.organizationId,
-        roboticsCloudName: selectedState?.roboticsCloud?.name,
+        organizationId: selectedState?.organization?.organizationId!,
+        roboticsCloudName: selectedState?.roboticsCloud?.name!,
         instanceId: selectedState?.instance?.instanceId,
-        region: selectedState?.roboticsCloud?.region,
+        region: selectedState?.roboticsCloud?.region!,
         fleetName: selectedState?.fleet?.name,
         robotName: robotData?.step1?.robotName,
       },
@@ -90,8 +90,8 @@ export default function CreateRobotFormStep3({
   function handleGetBuildManager() {
     getBuildManager(
       {
-        organizationId: selectedState?.organization?.organizationId,
-        roboticsCloudName: selectedState?.roboticsCloud?.name,
+        organizationId: selectedState?.organization?.organizationId!,
+        roboticsCloudName: selectedState?.roboticsCloud?.name!,
         instanceId: selectedState?.instance?.instanceId,
         region: selectedState?.instance?.region,
         fleetName: selectedState?.fleet?.name,
@@ -143,8 +143,8 @@ export default function CreateRobotFormStep3({
       formik.setSubmitting(true);
       await dispatch(
         createBuildManager({
-          organizationId: selectedState?.organization?.organizationId,
-          roboticsCloudName: selectedState?.roboticsCloud?.name,
+          organizationId: selectedState?.organization?.organizationId!,
+          roboticsCloudName: selectedState?.roboticsCloud?.name!,
           instanceId: selectedState?.instance?.instanceId,
           region: selectedState?.instance?.region,
           robotName: robotData?.step1?.robotName,

diff --git a/src/components/CreateForms/CreateRobotFormStep4.tsx b/src/components/CreateForms/CreateRobotFormStep4.tsx
@@ -68,8 +68,8 @@ export default function CreateRobotFormStep4({
 
       await dispatch(
         createLaunchManager({
-          organizationId: selectedState?.organization?.organizationId,
-          roboticsCloudName: selectedState?.roboticsCloud?.name,
+          organizationId: selectedState?.organization?.organizationId!,
+          roboticsCloudName: selectedState?.roboticsCloud?.name!,
           instanceId: selectedState?.instance?.instanceId,
           region: selectedState?.instance?.region,
           physicalInstanceName: robotData?.step1?.physicalInstanceName,
@@ -92,7 +92,7 @@ export default function CreateRobotFormStep4({
 
       setTimeout(() => {
         window.location.href = `/${organizationNameViewer({
-          organizationName: selectedState?.organization?.organizationName,
+          organizationName: selectedState?.organization?.organizationName!,
           capitalization: false,
         })}/${selectedState?.roboticsCloud?.name}/${
           selectedState?.instance?.name
@@ -157,8 +157,8 @@ export default function CreateRobotFormStep4({
   function handleGetBuildManager() {
     getBuildManager(
       {
-        organizationId: selectedState?.organization?.organizationId,
-        roboticsCloudName: selectedState?.roboticsCloud?.name,
+        organizationId: selectedState?.organization?.organizationId!,
+        roboticsCloudName: selectedState?.roboticsCloud?.name!,
         instanceId: selectedState?.instance?.instanceId,
         region: selectedState?.instance?.region,
         fleetName: selectedState?.fleet?.name,

diff --git a/src/components/FleetsListItemDesc/FleetsListItemDesc.tsx b/src/components/FleetsListItemDesc/FleetsListItemDesc.tsx
@@ -0,0 +1,35 @@
+import React, { ReactElement } from "react";
+import StateCell from "../Cells/StateCell";
+
+interface IFleetsListItemDesc {
+  fleet: any;
+  responseFleets: any;
+}
+
+export default function FleetsListItemDesc({
+  fleet,
+  responseFleets,
+}: IFleetsListItemDesc): ReactElement {
+  return (
+    <div className="flex gap-2">
+      <div className="flex gap-1.5">
+        <span className="font-medium">VI:</span>
+        <StateCell state={fleet?.fleetStatus} />
+      </div>
+      {responseFleets?.filter(
+        (pFleet: any) => fleet?.name === pFleet?.fleetName
+      ).length > 0 && (
+        <div className="flex gap-1.5">
+          <span className="font-medium">PI:</span>
+          <StateCell
+            state={
+              responseFleets?.filter(
+                (pFleet: any) => fleet?.name === pFleet?.fleetName
+              )[0]?.fleetStatus
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/HeaderDropdownMenu/HeaderDropdownMenu.tsx b/src/components/HeaderDropdownMenu/HeaderDropdownMenu.tsx
@@ -1,9 +1,9 @@
 import React, { Fragment, ReactElement, useState } from "react";
+import { handleLogout } from "../../functions/GeneralFunctions";
 import useOnclickOutside from "react-cool-onclickoutside";
-import { Link } from "react-router-dom";
 import { useKeycloak } from "@react-keycloak/web";
+import { Link } from "react-router-dom";
 import Gravatar from "react-gravatar";
-import { handleLogout } from "../../functions/GeneralFunctions";
 
 export default function HeaderDropdownMenu(): ReactElement {
   const [isOpen, setIsOpen] = useState<boolean>(false);

diff --git a/src/components/PrivateSidebar/PrivateSidebar.tsx b/src/components/PrivateSidebar/PrivateSidebar.tsx
@@ -1,12 +1,12 @@
 import React, { Fragment, ReactElement, useEffect, useState } from "react";
-import SidebarStaticItem from "../SidebarStaticItem/SidebarStaticItem";
-import SideBarMenuItem from "../SidebarMenuItem/SideBarMenuItem";
-import useMain from "../../hooks/useMain";
-import { useParams } from "react-router-dom";
 import {
   envOnPremiseFleet,
   envOnPremiseRobot,
 } from "../../helpers/envProvider";
+import SidebarStaticItem from "../SidebarStaticItem/SidebarStaticItem";
+import SideBarMenuItem from "../SidebarMenuItem/SideBarMenuItem";
+import { useParams } from "react-router-dom";
+import useMain from "../../hooks/useMain";
 
 export default function PrivateSidebar(): ReactElement {
   const [isLoading, setIsLoading] = useState<boolean>(true);