refactor(services and flows): 🎉 update services and flows

robolaunch · Oct 20, 2023 · 0bb49c7 · 0bb49c7
1 parent bab970a
commit 0bb49c7
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
       <img src="https://img.shields.io/badge/nodejs-18.17.1-dgreen" alt="node">
     </a>
     <a href="https://github.com/robolaunch/ui/releases">
-      <img src="https://img.shields.io/badge/release-v0.16.5-red" alt="release">
+      <img src="https://img.shields.io/badge/release-v0.16.6-red" alt="release">
     </a>
         <a href="#">
       <img src="https://img.shields.io/badge/language-typescript-blue" alt="language">

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.16.5",
+  "version": "0.16.6",
   "private": true,
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/css/style.css b/public/css/style.css
@@ -641,6 +641,10 @@ video {
   bottom: 0px;
 }
 
+.bottom-12 {
+  bottom: 3rem;
+}
+
 .bottom-2 {
   bottom: 0.5rem;
 }
@@ -753,22 +757,6 @@ video {
   top: 3.6rem;
 }
 
-.bottom-6 {
-  bottom: 1.5rem;
-}
-
-.right-6 {
-  right: 1.5rem;
-}
-
-.bottom-12 {
-  bottom: 3rem;
-}
-
-.bottom-16 {
-  bottom: 4rem;
-}
-
 .-z-10 {
   z-index: -10;
 }
@@ -870,6 +858,10 @@ video {
   margin-right: auto;
 }
 
+.\!mt-1 {
+  margin-top: 0.25rem !important;
+}
+
 .-mb-1 {
   margin-bottom: -0.25rem;
 }
@@ -954,18 +946,6 @@ video {
   margin-top: 0.1rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
-.\!mt-2 {
-  margin-top: 0.5rem !important;
-}
-
-.\!mt-1 {
-  margin-top: 0.25rem !important;
-}
-
 .block {
   display: block;
 }
@@ -1820,6 +1800,11 @@ video {
   border-color: rgb(163 163 163 / var(--tw-border-opacity)) !important;
 }
 
+.\!border-layer-light-100 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(235 235 235 / var(--tw-border-opacity)) !important;
+}
+
 .\!border-layer-light-600 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(133 133 133 / var(--tw-border-opacity)) !important;
@@ -1939,16 +1924,6 @@ video {
   border-color: rgb(234 179 8 / var(--tw-border-opacity));
 }
 
-.\!border-layer-light-100 {
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(235 235 235 / var(--tw-border-opacity)) !important;
-}
-
-.\!bg-layer-light-100 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(235 235 235 / var(--tw-bg-opacity)) !important;
-}
-
 .\!bg-layer-light-50 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
@@ -2334,6 +2309,10 @@ video {
   padding-bottom: 1.5rem;
 }
 
+.pb-7 {
+  padding-bottom: 1.75rem;
+}
+
 .pb-8 {
   padding-bottom: 2rem;
 }
@@ -2386,14 +2365,6 @@ video {
   padding-top: 2rem;
 }
 
-.pb-5 {
-  padding-bottom: 1.25rem;
-}
-
-.pb-7 {
-  padding-bottom: 1.75rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -3407,11 +3378,6 @@ td {
   color: rgb(6 85 134 / var(--tw-text-opacity));
 }
 
-.hover\:text-yellow-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(202 138 4 / var(--tw-text-opacity));
-}
-
 .hover\:text-yellow-700:hover {
   --tw-text-opacity: 1;
   color: rgb(161 98 7 / var(--tw-text-opacity));

diff --git a/src/components/CreateForms/CreateEnvironmentFormStep1.tsx b/src/components/CreateForms/CreateEnvironmentFormStep1.tsx
@@ -279,7 +279,10 @@ export default function CreateEnvironmentFormStep1({
               </div>
             </div>
 
-            <CreateRobotFormAdvancedSettings formik={formik} />
+            <CreateRobotFormAdvancedSettings
+              formik={formik}
+              isImportRobot={isImportRobot}
+            />
 
             {!url.robotName && (
               <div className="mt-10 flex gap-2 ">

diff --git a/src/components/CreateRobotFormAdvancedSettings/CreateRobotFormAdvancedSettings.tsx b/src/components/CreateRobotFormAdvancedSettings/CreateRobotFormAdvancedSettings.tsx
@@ -1,15 +1,17 @@
-import { ReactElement, useState } from "react";
-import Accordion from "../Accordion/AccordionV2";
 import PersistedDirectoriesInputTag from "../CreateRobotFormPersistedDirectoriesInputTag/CreateRobotFormPersistedDirectoriesInputTag";
 import CreateRobotFormGrantedDirectoriesInputTag from "../CreateRobotFormGrantedDirectoriesInputTag/CreateRobotFormGrantedDirectoriesInputTag";
 import PortSetter from "../CreateRobotFormPortSetter/CreateRobotFormPortSetter";
+import Accordion from "../Accordion/AccordionV2";
+import { ReactElement, useState } from "react";
 
 interface ICreateRobotFormAdvancedSettings {
   formik: any;
+  isImportRobot?: boolean;
 }
 
 export default function CreateRobotFormAdvancedSettings({
   formik,
+  isImportRobot,
 }: ICreateRobotFormAdvancedSettings): ReactElement {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
@@ -31,7 +33,11 @@ export default function CreateRobotFormAdvancedSettings({
 
           <CreateRobotFormGrantedDirectoriesInputTag />
 
-          <PortSetter formik={formik} type="ide" />
+          <PortSetter
+            isImportRobot={isImportRobot}
+            formik={formik}
+            type="ide"
+          />
 
           <PortSetter formik={formik} type="vdi" />
         </div>

diff --git a/...s/CreateRobotFormGrantedDirectoriesInputTag/CreateRobotFormGrantedDirectoriesInputTag.tsx b/...s/CreateRobotFormGrantedDirectoriesInputTag/CreateRobotFormGrantedDirectoriesInputTag.tsx
@@ -38,7 +38,7 @@ export default function GrantedDirectoriesInputTag(): ReactElement {
     <div>
       <div className="flex min-w-fit gap-1 pb-3 text-xs font-medium text-layer-light-700">
         Granted Directories:
-        <InfoTip content="Type a Granted directories." />
+        <InfoTip content="Type a granted directories." />
       </div>
 
       <div>

diff --git a/src/components/CreateRobotFormPortSetter/CreateRobotFormPortSetter.tsx b/src/components/CreateRobotFormPortSetter/CreateRobotFormPortSetter.tsx
@@ -9,11 +9,13 @@ import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFor
 interface ICreateRobotFormPortSetter {
   formik: any;
   type: string;
+  isImportRobot?: boolean;
 }
 
 export default function PortSetter({
   formik,
   type,
+  isImportRobot,
 }: ICreateRobotFormPortSetter): ReactElement {
   const { selectedState } = useMain();
 
@@ -50,7 +52,7 @@ export default function PortSetter({
       <div>
         <div className="flex min-w-fit gap-1 pb-3 text-xs font-medium text-layer-light-700">
           {type === "ide" ? "IDE" : "VDI"} Ports:
-          <InfoTip content="Type a ports." />
+          <InfoTip content="Type a ports with name." />
         </div>
         <div className="flex flex-col">
           {formik.values?.[`${type}CustomPorts`].map(
@@ -69,6 +71,7 @@ export default function PortSetter({
       </div>
 
       <CreateRobotFormAddButton
+        disabled={isImportRobot}
         onClick={async () => {
           await formik.setFieldValue(
             `${type}CustomPorts`,

diff --git a/src/components/RemoteDesktopController/RemoteDesktopController.tsx b/src/components/RemoteDesktopController/RemoteDesktopController.tsx
@@ -3,8 +3,8 @@ import { BsFullscreen, BsFullscreenExit } from "react-icons/bs";
 import { IoIosArrowUp, IoIosArrowDown } from "react-icons/io";
 import VolumeControl from "../VolumeControl/VolumeControl";
 import { useKeycloak } from "@react-keycloak/web";
-import { TfiReload } from "react-icons/tfi";
-import useVDI from "../../hooks/useVDI";
+// import { TfiReload } from "react-icons/tfi";
+// import useVDI from "../../hooks/useVDI";
 import Button from "../Button/Button";
 import RestartService from "../RestartService/RestartService";
 
@@ -25,7 +25,7 @@ export default function RemoteDesktopController({
 }: IRemoteDesktopController): ReactElement {
   const [isControllerOpen, setIsControllerOpen] = useState<boolean>(false);
 
-  const { setScreenResolution } = useVDI();
+  // const { setScreenResolution } = useVDI();
 
   const { keycloak } = useKeycloak();
 
@@ -78,7 +78,7 @@ export default function RemoteDesktopController({
               />
             </button>
           )}
-          <TfiReload size={20} onClick={() => setScreenResolution()} />
+          {/* <TfiReload size={20} onClick={() => setScreenResolution()} /> */}
 
           <RestartService type="vdi" />
 

diff --git a/src/components/RestartService/RestartService.tsx b/src/components/RestartService/RestartService.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import RestartServiceModal from "../../modals/RestartServiceModal";
-import { PiWarningLight } from "react-icons/pi";
+import { IoReloadOutline } from "react-icons/io5";
 
 interface IRestartService {
   type: string;
@@ -11,9 +11,9 @@ export default function RestartService({ type }: IRestartService) {
 
   return (
     <>
-      <PiWarningLight
+      <IoReloadOutline
         size={26}
-        className="transition-300 cursor-pointer text-yellow-600 hover:text-yellow-700"
+        className="cursor-pointer text-layer-light-700 transition-all duration-200 hover:scale-90 hover:text-layer-primary-400"
         onClick={() => setIsOpenedModal(true)}
       />
 

diff --git a/src/modals/RestartServiceModal.tsx b/src/modals/RestartServiceModal.tsx
@@ -1,9 +1,9 @@
 import { Dialog } from "primereact/dialog";
 import React, { ReactElement, useState } from "react";
 import Button from "../components/Button/Button";
-import useRobot from "../hooks/useRobot";
 import { useAppDispatch } from "../hooks/redux";
 import { restartService } from "../toolkit/ServiceSlice";
+import useRobot from "../hooks/useRobot";
 import useMain from "../hooks/useMain";
 
 interface IDeleteRobotModalModal {
@@ -20,8 +20,6 @@ export default function RestartServiceModal({
   const { responseRobot } = useRobot();
   const { selectedState } = useMain();
 
-  console.log(responseRobot);
-
   const dispatch = useAppDispatch();
 
   async function handleRestartService() {
@@ -31,13 +29,13 @@ export default function RestartServiceModal({
         organizationId: selectedState.organization?.organizationId!,
         roboticsCloudName: selectedState.roboticsCloud?.name!,
         region: selectedState.roboticsCloud?.region as string,
-        fleetName: selectedState.fleet?.fleetName,
+        fleetName: selectedState.fleet?.name,
         instanceId: selectedState.instance?.instanceId,
         environmentName: responseRobot.name,
         podName:
           type === "vdi"
             ? responseRobot?.vdiPodName
-            : responseRobot?.robotPodName,
+            : responseRobot?.idePodName,
       }),
     );
     await setIsLoading(false);

diff --git a/src/toolkit/PortSlice.ts b/src/toolkit/PortSlice.ts
@@ -2,15 +2,15 @@ import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { kubernetesApi } from "../api/api";
 
 export const getPort = createAsyncThunk(
-  "robot/getPort",
+  "port/getFreeNodePort",
   async (values: {
     organizationId: string;
     roboticsCloudName: string;
     instanceId: string;
     region: string;
   }) => {
     const response = await kubernetesApi.getFreeNodePort({
-      name: "robot/getPort",
+      name: "port/getFreeNodePort",
       organizationId: values?.organizationId,
       roboticsClouds: [
         {