feat(version): release 0.19.2 version

robolaunch · Nov 9, 2023 · 68e2907 · 68e2907
1 parent 0a595d2
commit 68e2907
Show file tree

Hide file tree

Showing 19 changed files with 143 additions and 136 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
       <img src="https://img.shields.io/badge/nodejs-18.18.2-dgreen" alt="node">
     </a>
     <a href="https://github.com/robolaunch/ui/releases">
-      <img src="https://img.shields.io/badge/release-v0.19.1-red" alt="release">
+      <img src="https://img.shields.io/badge/release-v0.19.2-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.19.1",
+  "version": "0.19.2",
   "private": true,
   "scripts": {
     "dev": "react-scripts start",

diff --git a/public/css/style.css b/public/css/style.css
@@ -753,6 +753,10 @@ video {
   top: 3.6rem;
 }
 
+.bottom-1 {
+  bottom: 0.25rem;
+}
+
 .-z-10 {
   z-index: -10;
 }
@@ -849,6 +853,10 @@ video {
   margin: 16rem;
 }
 
+.m-1 {
+  margin: 0.25rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1343,6 +1351,14 @@ video {
   width: max-content;
 }
 
+.w-1\/4 {
+  width: 25%;
+}
+
+.w-1\/3 {
+  width: 33.333333%;
+}
+
 .min-w-\[12rem\] {
   min-width: 12rem;
 }
@@ -1472,6 +1488,27 @@ video {
           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));
 }
 
+.scale-90 {
+  --tw-scale-x: .9;
+  --tw-scale-y: .9;
+  -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));
+}
+
+.scale-\[0\.8\] {
+  --tw-scale-x: 0.8;
+  --tw-scale-y: 0.8;
+  -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));
+}
+
+.scale-\[0\.88\] {
+  --tw-scale-x: 0.88;
+  --tw-scale-y: 0.88;
+  -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));
+}
+
 .transform {
   -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));
@@ -2387,6 +2424,10 @@ video {
   padding-top: 2rem;
 }
 
+.pb-1\.5 {
+  padding-bottom: 0.375rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -2468,6 +2509,10 @@ video {
   line-height: 1rem;
 }
 
+.text-\[0\.62rem\] {
+  font-size: 0.62rem;
+}
+
 .\!font-semibold {
   font-weight: 600 !important;
 }

diff --git a/src/components/CFDellButton/CFDellButton.tsx b/src/components/CFDellButton/CFDellButton.tsx
@@ -11,7 +11,11 @@ export default function CFDellButton({
   onClick,
 }: ICFDellButton): ReactElement {
   return (
-    <button disabled={disabled} onClick={onClick}>
+    <button
+      disabled={disabled}
+      onClick={onClick}
+      className="transition-300 hover:scale-90"
+    >
       <IoTrashBinOutline color={disabled ? "gray" : "red"} size={18} />
     </button>
   );

diff --git a/src/components/CFGpuCore/CFGpuCore.tsx b/src/components/CFGpuCore/CFGpuCore.tsx
@@ -23,8 +23,7 @@ export default function CFGpuCore({
   return (
     <FormInputRange
       label={`GPU Core Count (${formik.values.ideGpuResource} Core):`}
-      tip="GPU Core Count is the number of GPU cores that will be allocated to the IDE. The GPU cores are used to accelerate the rendering of the IDE. The GPU cores are allocated from the GPU resource pool that is available on the robot. The GPU cores are allocated from the GPU resource pool that."
-      dataTut="create-environment-ide-gpu-core"
+      tip="GPU Core Count is the number of GPU cores that will be allocated to the application. The GPU cores are used to accelerate the rendering of the application. The GPU cores are allocated from the GPU resource pool that is available on the instance. The GPU cores are allocated from the GPU resource pool that."
       InputProps={formik.getFieldProps("ideGpuResource")}
       min={0}
       max={robotData.step1.ideGpuResourceMaxCore || 0}

diff --git a/src/components/CFPortInput/CFPortInput.tsx b/src/components/CFPortInput/CFPortInput.tsx
@@ -1,9 +1,9 @@
-import CreateRobotFormDeleteButton from "../CreateRobotFormDeleteButton/CreateRobotFormDeleteButton";
 import { IDetails } from "../../interfaces/robotInterfaces";
 import FormInputText from "../FormInputText/FormInputText";
 import { FormikProps } from "formik/dist/types";
 import CFInfoBar from "../CFInfoBar/CFInfoBar";
 import { ReactElement } from "react";
+import CFDellButton from "../CFDellButton/CFDellButton";
 
 interface ICFPortInput {
   formik: FormikProps<IDetails>;
@@ -19,63 +19,63 @@ export default function CFPortInput({
   type,
 }: ICFPortInput): ReactElement {
   return (
-    <div className="flex w-full flex-col rounded-md border border-layer-light-100 p-4">
-      <div className="flex gap-4 ">
-        <FormInputText
-          disabled={disabled}
-          labelName="Port Name:"
-          labelInfoTip="Type a port name."
-          inputProps={formik.getFieldProps(
-            `${type}CustomPorts[${portIndex}].name`,
-          )}
-          inputError={
-            // @ts-ignore
-            formik.errors?.[`${type}CustomPorts`]?.[portIndex]?.name
-          }
-          inputTouched={
-            // @ts-ignore
-            formik.touched?.[`${type}CustomPorts`]?.[portIndex]?.name
-          }
-        />
+    <div className="flex w-full gap-3 rounded-md border border-layer-light-100 p-4">
+      <FormInputText
+        disabled={disabled}
+        labelName="Port Name:"
+        labelInfoTip="Type a port name."
+        inputProps={formik.getFieldProps(
+          `${type}CustomPorts[${portIndex}].name`,
+        )}
+        inputError={
+          // @ts-ignore
+          formik.errors?.[`${type}CustomPorts`]?.[portIndex]?.name
+        }
+        inputTouched={
+          // @ts-ignore
+          formik.touched?.[`${type}CustomPorts`]?.[portIndex]?.name
+        }
+        classNameContainer="w-1/3"
+      />
 
-        <FormInputText
-          disabled={disabled}
-          labelName="App Port:"
-          labelInfoTip="Is the port that the application is listening on."
-          inputProps={formik.getFieldProps(
-            `${type}CustomPorts[${portIndex}].port`,
-          )}
-          inputError={
-            // @ts-ignore
-            formik.errors?.[`${type}CustomPorts`]?.[portIndex]?.port
-          }
-          inputTouched={
+      <FormInputText
+        disabled={disabled}
+        labelName="App Port:"
+        labelInfoTip="Is the port that the application is listening on."
+        inputProps={formik.getFieldProps(
+          `${type}CustomPorts[${portIndex}].port`,
+        )}
+        inputError={
+          // @ts-ignore
+          formik.errors?.[`${type}CustomPorts`]?.[portIndex]?.port
+        }
+        inputTouched={
+          // @ts-ignore
+          formik.touched?.[`${type}CustomPorts`]?.[portIndex]?.port
+        }
+        type="number"
+        rightTip
+        classNameContainer="w-1/3"
+      />
+
+      <CFInfoBar
+        label="Node Port:"
+        tip="Type a node port."
+        vertical
+        classNameContainer="w-1/3"
+        rightTip
+      >
+        <div className="pt-2.5 text-sm text-layer-light-800">
+          :
+          {
             // @ts-ignore
-            formik.touched?.[`${type}CustomPorts`]?.[portIndex]?.port
+            formik.values?.[`${type}CustomPorts`]?.[portIndex]?.backendPort
           }
-          type="number"
-          rightTip
-        />
+        </div>
+      </CFInfoBar>
 
-        <CFInfoBar
-          label="Node Port:"
-          tip="Type a node port."
-          vertical
-          classNameContainer="w-32"
-          rightTip
-        >
-          <div className="pt-2.5 text-sm text-layer-light-800">
-            :
-            {
-              // @ts-ignore
-              formik.values?.[`${type}CustomPorts`]?.[portIndex]?.backendPort
-            }
-          </div>
-        </CFInfoBar>
-      </div>
-      <div className="flex items-center justify-center text-sm text-layer-light-800">
-        <CreateRobotFormDeleteButton
-          text="Delete"
+      <div className="flex items-center justify-center pt-2.5 text-sm text-layer-light-800">
+        <CFDellButton
           onClick={() => {
             formik.setFieldValue(
               `${type}CustomPorts`,

diff --git a/src/components/CodeEditor/CodeEditor.tsx b/src/components/CodeEditor/CodeEditor.tsx
@@ -99,7 +99,7 @@ export default function CodeEditor(): ReactElement {
             }}
           />
 
-          <div className="absolute bottom-3 right-6 flex flex-col gap-4">
+          <div className="absolute bottom-1 right-4 flex scale-[0.88] flex-col gap-4">
             <RestartService type="ide" />
             <FullScreenButton
               isFullScreen={handleFullScreen.active}

diff --git a/src/components/CreateForms/CFAppStep1.tsx b/src/components/CreateForms/CFAppStep1.tsx
@@ -28,7 +28,8 @@ export default function CFAppStep1({
 }: ICFAppStep1): ReactElement {
   const [responseRobot, setResponseRobot] = useState<any>(undefined);
 
-  const { selectedState, handleCreateRobotNextStep } = useMain();
+  const { selectedState, handleCreateRobotNextStep, setSidebarState } =
+    useMain();
   const { getEnvironment, createEnvironment } = useFunctions();
   const { robotData, setRobotData } = useCreateRobot();
   const url = useParams();
@@ -40,7 +41,13 @@ export default function CFAppStep1({
       formik.setSubmitting(true);
 
       if (!formik.values.configureWorkspace) {
-        await createEnvironment(true);
+        await createEnvironment(true).then(async () => {
+          setSidebarState((prevState) => ({
+            ...prevState,
+            isCreateMode: false,
+            page: "robot",
+          }));
+        });
       } else {
         formik.setSubmitting(false);
         handleCreateRobotNextStep();

diff --git a/src/components/CreateForms/CFStep2.tsx b/src/components/CreateForms/CFStep2.tsx
@@ -3,11 +3,10 @@ import {
   envOnPremiseRobot,
 } from "../../helpers/envProvider";
 import CFAddWorkspaceButton from "../CFAddWorkspaceButton/CFAddWorkspaceButton";
-import { CFRobotStep2Validations } from "../../validations/RobotsValidations";
 import CFWorkspacesMapper from "../CFWorkspacesMapper/CFWorkspacesMapper";
+import { CFRobotStep2Validations } from "../../validations/RobotsValidations";
 import { CFAppStep2Validations } from "../../validations/AppsValidations";
 import { Fragment, ReactElement, useEffect, useState } from "react";
-import { createEnvironment } from "../../toolkit/EnvironmentSlice";
 import { IWorkspaces } from "../../interfaces/robotInterfaces";
 import CFCancelButton from "../CFCancelButton/CFCancelButton";
 import useCreateRobot from "../../hooks/useCreateRobot";
@@ -34,7 +33,13 @@ export default function CFStep2({ isImportRobot }: ICFStep2): ReactElement {
   const { robotData, setRobotData } = useCreateRobot();
   const [isLoadingImportRobot, setIsLoadingImportRobot] =
     useState<boolean>(true);
-  const { getRobot, getFleet, getEnvironment, getNamespace } = useFunctions();
+  const {
+    getRobot,
+    getFleet,
+    getEnvironment,
+    getNamespace,
+    createEnvironment,
+  } = useFunctions();
   const url = useParams();
   const dispatch = useAppDispatch();
 
@@ -47,53 +52,7 @@ export default function CFStep2({ isImportRobot }: ICFStep2): ReactElement {
       formik.setSubmitting(true);
 
       if (envOnPremiseRobot) {
-        dispatch(
-          createEnvironment({
-            organizationId: selectedState?.organization?.organizationId!,
-            roboticsCloudName: selectedState?.roboticsCloud?.name!,
-            region: selectedState?.roboticsCloud?.region!,
-            instanceId: selectedState?.instance?.instanceId!,
-            fleetName: selectedState?.fleet?.name,
-            environmentName: robotData?.step1?.robotName,
-            domainName: robotData?.step1?.domainName,
-            storageAmount: robotData?.step1?.robotStorage,
-            ideGpuResource: robotData?.step1?.ideGpuResource,
-            ideGpuResourceType: robotData?.step1?.ideGpuResourceType,
-            vdiSessionCount: robotData?.step1?.remoteDesktop?.sessionCount,
-            applicationName: robotData?.step1?.application?.name,
-            applicationVersion: robotData?.step1?.application?.version,
-            devspaceUbuntuDistro: robotData?.step1?.devspace?.ubuntuDistro,
-            devspaceDesktop: robotData?.step1?.devspace?.desktop,
-            devspaceVersion: robotData?.step1?.devspace?.version,
-            permittedDirectories: robotData?.step1?.permittedDirectories,
-            persistentDirectories: robotData?.step1?.persistentDirectories,
-            workspaces: robotData?.step2.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 () => {
+        createEnvironment(false).then(async () => {
           await handleSubmit();
         });
       } else {

diff --git a/src/components/FullScreenButton/FullScreenButton.tsx b/src/components/FullScreenButton/FullScreenButton.tsx
@@ -15,11 +15,11 @@ export default function FullScreenButton({
       onClick={handleFullScreen}
     >
       {isFullScreen ? (
-        <BsFullscreenExit size={24} />
+        <BsFullscreenExit size={20} />
       ) : (
-        <BsFullscreen size={24} />
+        <BsFullscreen size={20} />
       )}
-      <p className="text-[0.66rem]">Full Screen</p>
+      <p className="text-[0.60rem]">Full Screen</p>
     </button>
   );
 }
diff --git a/src/components/InformationWidget/InformationWidget.tsx b/src/components/InformationWidget/InformationWidget.tsx
@@ -16,7 +16,7 @@ export default function InformationWidget({
   return (
     <div
       data-tut="information-widget"
-      className={`animate__animated animate__fadeIn flex h-[21rem] w-full flex-col justify-around rounded-lg border border-layer-light-200 bg-layer-light-50 p-8 shadow-lg ${className}`}
+      className={`animate__animated animate__fadeIn flex h-[21rem] w-full flex-col justify-around rounded-lg border border-layer-light-200 bg-layer-light-50 p-8 shadow-md ${className}`}
       style={{
         backgroundImage: `url("/images/abstract-white.jpg")`,
         backgroundRepeat: "no-repeat",