feat(add ports and persist directories): 🎉 add persist directories an…

…d ports support
robolaunch · Oct 20, 2023 · d3ac1fb · d3ac1fb
1 parent e26de15
commit d3ac1fb
Show file tree

Hide file tree

Showing 20 changed files with 696 additions and 132 deletions.
diff --git a/package.json b/package.json
@@ -75,6 +75,7 @@
     "react-scroll-to-bottom": "^4.2.0",
     "react-simple-maps": "^3.0.0",
     "react-step-progress-bar": "^1.0.3",
+    "react-tag-input-component": "^2.0.2",
     "react-terminal": "^1.3.1",
     "react-toggle": "^4.1.3",
     "react-top-loading-bar": "^2.3.1",
@@ -94,22 +95,22 @@
     "@types/body-scroll-lock": "^3.1.0",
     "@types/file-saver": "^2.0.5",
     "@types/randomstring": "^1.1.8",
+    "@types/react": "^18.0.27",
     "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-copy-to-clipboard": "^5.0.4",
+    "@types/react-dom": "^18.0.10",
     "@types/react-edit-text": "^5.0.1",
     "@types/react-gravatar": "^2.6.10",
     "@types/react-scroll-to-bottom": "^4.2.0",
     "@types/react-simple-maps": "^3.0.0",
     "@types/react-toggle": "^4.0.3",
+    "@types/reactour": "^1.18.2",
     "@types/roslib": "^1.3.0",
     "@types/three": "^0.152.1",
     "eslint-config-react-app": "^7.0.1",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.4",
     "tailwindcss": "^3.2.4",
-    "typescript": "^4.9.4",
-    "@types/reactour": "^1.18.2",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10"
+    "typescript": "^4.9.4"
   }
 }
diff --git a/public/css/style.css b/public/css/style.css
@@ -938,6 +938,18 @@ 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;
 }
@@ -1911,6 +1923,16 @@ 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;
@@ -2348,6 +2370,14 @@ video {
   padding-top: 2rem;
 }
 
+.pb-5 {
+  padding-bottom: 1.25rem;
+}
+
+.pb-7 {
+  padding-bottom: 1.75rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -2786,6 +2816,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-none {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -3059,9 +3095,16 @@ td {
 .contents {
   display: grid;
   place-items: center;
-  transition: background-color 0.2s ease-out, -webkit-filter 0.2s ease-out;
-  transition: filter 0.2s ease-out, background-color 0.2s ease-out;
-  transition: filter 0.2s ease-out, background-color 0.2s ease-out, -webkit-filter 0.2s ease-out;
+  transition:
+    background-color 0.2s ease-out,
+    -webkit-filter 0.2s ease-out;
+  transition:
+    filter 0.2s ease-out,
+    background-color 0.2s ease-out;
+  transition:
+    filter 0.2s ease-out,
+    background-color 0.2s ease-out,
+    -webkit-filter 0.2s ease-out;
   font-size: 16px;
 }
 
@@ -3196,6 +3239,12 @@ td {
   width: -moz-fit-content;
 }
 
+.rti--input {
+  width: -webkit-fit-content !important;
+  width: -moz-fit-content !important;
+  width: fit-content !important;
+}
+
 .hover\:\!scale-90:hover {
   --tw-scale-x: .9 !important;
   --tw-scale-y: .9 !important;

diff --git a/src/components/CreateForms/CreateEnvironmentFormStep1.tsx b/src/components/CreateForms/CreateEnvironmentFormStep1.tsx
@@ -23,6 +23,7 @@ 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;
@@ -130,6 +131,7 @@ export default function CreateEnvironmentFormStep1({
 
   function handleCreateApplicationWithoutWorkspaces() {
     formik.setSubmitting(true);
+    console.log("robotdata", robotData);
     dispatch(
       createEnvironment({
         organizationId: selectedState?.organization?.organizationId!,
@@ -147,6 +149,8 @@ export default function CreateEnvironmentFormStep1({
         devspaceUbuntuDistro: robotData?.step1?.devspace?.ubuntuDistro,
         devspaceDesktop: robotData?.step1?.devspace?.desktop,
         devspaceVersion: robotData?.step1?.devspace?.version,
+        permittedDirectories: robotData?.step1?.permittedDirectories,
+        persistentDirectories: robotData?.step1?.persistentDirectories,
         workspaces: [
           {
             name: "ws1",
@@ -160,6 +164,22 @@ export default function CreateEnvironmentFormStep1({
             ],
           },
         ],
+        ideCustomPorts:
+          formik.values.ideCustomPorts
+            ?.map(
+              (port: { name: string; port: number; backendPort: number }) => {
+                return `${port.name}-${port.backendPort}:${port.port}`;
+              },
+            )
+            ?.join("/") || "",
+        vdiCustomPorts:
+          formik.values.vdiCustomPorts
+            ?.map(
+              (port: { name: string; port: number; backendPort: number }) => {
+                return `${port.name}-${port.backendPort}:${port.port}`;
+              },
+            )
+            ?.join("/") || "",
       }),
     ).then(async () => {
       setSidebarState((prevState: any) => {
@@ -259,6 +279,8 @@ export default function CreateEnvironmentFormStep1({
               </div>
             </div>
 
+            <CreateRobotFormAdvancedSettings formik={formik} />
+
             {!url.robotName && (
               <div className="mt-10 flex gap-2 ">
                 {!isImportRobot && (

diff --git a/src/components/CreateForms/CreateRobotFormStep1.tsx b/src/components/CreateForms/CreateRobotFormStep1.tsx
@@ -11,12 +11,14 @@ import CreateRobotStorage from "../CreateRobotStorage/CreateRobotStorage";
 import { addPhysicalInstanceToFleet } from "../../toolkit/InstanceSlice";
 import AdrinNetworkTypes from "../AdrinNetworkTypes/AdrinNetworkTypes";
 import CreateRobotTypes from "../CreateRobotTypes/CreateRobotTypes";
+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 TourGuide from "../TourGuide/TourGuide";
 import InputText from "../InputText/InputText";
 import Seperator from "../Seperator/Seperator";
 import { useParams } from "react-router-dom";
@@ -25,8 +27,6 @@ import InfoTip from "../InfoTip/InfoTip";
 import Button from "../Button/Button";
 import { useFormik } from "formik";
 import { toast } from "sonner";
-import TourGuide from "../TourGuide/TourGuide";
-import { getGuideItem } from "../../functions/handleGuide";
 
 interface ICreateRobotFormStep1 {
   isImportRobot?: boolean;
@@ -57,7 +57,7 @@ export default function CreateRobotFormStep1({
         instanceId: selectedState?.instance?.instanceId,
         region: selectedState?.roboticsCloud?.region!,
         fleetName: selectedState?.fleet?.name,
-        robotName: robotData?.step1?.robotName || url?.robotName,
+        robotName: robotData?.step1?.robotName || url?.robotName!,
       },
       {
         ifErrorNavigateTo404: false,
@@ -111,6 +111,7 @@ export default function CreateRobotFormStep1({
             storageAmount: formik.values?.robotStorage,
             gpuEnabledForCloudInstance:
               formik.values?.gpuEnabledForCloudInstance,
+
             workspaces: responseRobot?.robotWorkspaces,
           }),
         );
@@ -338,6 +339,8 @@ export default function CreateRobotFormStep1({
               {/* Development Mode */}
             </div>
 
+            {/* <AdvancedSettings /> */}
+
             {/* Buttons */}
             <div className="mt-10 flex gap-2 ">
               {!isImportRobot && (

diff --git a/src/components/CreateForms/CreateRobotFormStep2.tsx b/src/components/CreateForms/CreateRobotFormStep2.tsx
@@ -67,7 +67,33 @@ export default function CreateRobotFormStep2({
             devspaceUbuntuDistro: robotData?.step1?.devspace?.ubuntuDistro,
             devspaceDesktop: robotData?.step1?.devspace?.desktop,
             devspaceVersion: robotData?.step1?.devspace?.version,
+            permittedDirectories: robotData?.step1?.permittedDirectories,
+            persistentDirectories: robotData?.step1?.persistentDirectories,
             workspaces: values?.workspaces,
+            ideCustomPorts:
+              robotData.step1.ideCustomPorts
+                ?.map(
+                  (port: {
+                    name: string;
+                    port: number;
+                    backendPort: number;
+                  }) => {
+                    return `${port.name}-${port.backendPort}:${port.port}`;
+                  },
+                )
+                ?.join("/") || "",
+            vdiCustomPorts:
+              robotData.step1.vdiCustomPorts
+                ?.map(
+                  (port: {
+                    name: string;
+                    port: number;
+                    backendPort: number;
+                  }) => {
+                    return `${port.name}-${port.backendPort}:${port.port}`;
+                  },
+                )
+                ?.join("/") || "",
           }),
         ).then(async () => {
           await handleSubmit();

diff --git a/src/components/CreateRobotFormAddButton/CreateRobotFormAddButton.tsx b/src/components/CreateRobotFormAddButton/CreateRobotFormAddButton.tsx
@@ -5,12 +5,14 @@ interface ICreateRobotFormAddButton {
   onClick: () => void;
   description?: string;
   disabled?: boolean;
+  className?: string;
 }
 
 export default function CreateRobotFormAddButton({
   onClick,
   description,
   disabled,
+  className,
 }: ICreateRobotFormAddButton): ReactElement {
   return (
     <BsPlusCircle
@@ -21,7 +23,7 @@ export default function CreateRobotFormAddButton({
         disabled
           ? "text-layer-light-600 hover:cursor-not-allowed"
           : "text-layer-primary-700 hover:scale-90 hover:text-layer-primary-500"
-      }`}
+      } ${className}`}
     />
   );
 }
diff --git a/src/components/CreateRobotFormAdvancedSettings/CreateRobotFormAdvancedSettings.tsx b/src/components/CreateRobotFormAdvancedSettings/CreateRobotFormAdvancedSettings.tsx
@@ -0,0 +1,41 @@
+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";
+
+interface ICreateRobotFormAdvancedSettings {
+  formik: any;
+}
+
+export default function CreateRobotFormAdvancedSettings({
+  formik,
+}: ICreateRobotFormAdvancedSettings): ReactElement {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+    <div className="mt-4">
+      <Accordion
+        id={0}
+        header={
+          <div className="text-xs text-layer-light-900">Advanced Settings</div>
+        }
+        className="rounded-md !border-layer-light-100 shadow-none"
+        isOpen={isOpen}
+        handleOpen={() => {
+          setIsOpen(!isOpen);
+        }}
+      >
+        <div className="flex flex-col gap-5 px-4 pb-6 pt-2">
+          <PersistedDirectoriesInputTag />
+
+          <CreateRobotFormGrantedDirectoriesInputTag />
+
+          <PortSetter formik={formik} type="ide" />
+
+          <PortSetter formik={formik} type="vdi" />
+        </div>
+      </Accordion>
+    </div>
+  );
+}