refactor(create-forms): 🎉 update create forms

robolaunch · Nov 2, 2023 · 92e9758 · 92e9758
1 parent 255cdc7
commit 92e9758
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 42 deletions.
diff --git a/src/components/CFEnvCategories/CFEnvCategories.tsx b/src/components/CFEnvCategories/CFEnvCategories.tsx
@@ -42,8 +42,8 @@ export default function CFEnvCategories({
   return (
     <Fragment>
       <CFInfoBar
-        label="Categories"
-        tip="Select a category."
+        label="Image Categories"
+        tip="Select a image category."
         dataTut="create-application-step1-environment-selector"
         error={formik.errors.application?.name}
         touched={true}

diff --git a/src/components/CFPortSetter/CFPortSetter.tsx b/src/components/CFPortSetter/CFPortSetter.tsx
@@ -1,10 +1,11 @@
-import React, { ReactElement } from "react";
+import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
+import { getPort as getFreePort } from "../../toolkit/PortSlice";
 import CFPortInput from "../CFPortInput/CFPortInput";
 import { useAppDispatch } from "../../hooks/redux";
-import { getPort as getFreePort } from "../../toolkit/PortSlice";
-import useMain from "../../hooks/useMain";
-import CreateRobotFormAddButton from "../CreateRobotFormAddButton/CreateRobotFormAddButton";
 import CFInfoBar from "../CFInfoBar/CFInfoBar";
+import useMain from "../../hooks/useMain";
+import { ReactElement } from "react";
+import { toast } from "sonner";
 
 interface ICFPortSetter {
   formik: any;
@@ -44,13 +45,15 @@ export default function CFPortSetter({
       }
 
       return result.payload;
-    } catch (error) {}
+    } catch (error) {
+      toast.error("Error getting port. Please remove a port and try again.");
+    }
   }
 
   return (
     <div>
       <CFInfoBar
-        label={`${type === "ide" ? "IDE" : "VDI"} Ports:`}
+        label={`Custom Port Exposure From ${type === "ide" ? "IDE" : "VDI"}:`}
         tip="Type a ports with name."
         vertical
       >

diff --git a/src/components/CFWorkspaceDistro/CFWorkspaceDistro.tsx b/src/components/CFWorkspaceDistro/CFWorkspaceDistro.tsx
@@ -1,12 +1,12 @@
 import React, { Fragment, ReactElement } from "react";
 import FormInputSelect from "../FormInputSelect/FormInputSelect";
-import { IRobotWorkspaces } from "../../interfaces/robotInterfaces";
+import { IWorkspaces } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
 import { stringCapitalization } from "../../functions/GeneralFunctions";
 import useCreateRobot from "../../hooks/useCreateRobot";
 
 interface ICFWorkspaceDistro {
-  formik: FormikProps<IRobotWorkspaces>;
+  formik: FormikProps<IWorkspaces>;
   workspaceIndex: number;
   disabled?: boolean;
 }
@@ -22,7 +22,7 @@ export default function CFWorkspaceDistro({
     <FormInputSelect
       dataTut="create-robot-step2-workspace-distro"
       labelName="Workspace Distro:"
-      labelInfoTip="Select a workspace ROS2 distro."
+      tip="Select a workspace ROS2 distro."
       disabled={disabled}
       classNameContainer="w-60"
       inputProps={formik.getFieldProps(

diff --git a/src/pages/DashboardsPage/CloudInstancesDashboardPage/CloudInstanceDashboardPage.tsx b/src/pages/DashboardsPage/CloudInstancesDashboardPage/CloudInstanceDashboardPage.tsx
@@ -1,32 +1,26 @@
-import React, {
-  Fragment,
-  ReactElement,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
 import {
   envOnPremiseFleet,
   envOnPremiseRobot,
 } from "../../../helpers/envProvider";
-import InformationWidget from "../../../components/InformationWidget/InformationWidget";
 import NamespaceActionCells from "../../../components/TableActionCells/NamespaceActionCells";
-import ResourcesWidget from "../../../components/ResourcesWidget/ResourcesWidget";
+import InformationWidget from "../../../components/InformationWidget/InformationWidget";
 import FleetActionCells from "../../../components/TableActionCells/FleetActionCells";
+import ResourcesWidget from "../../../components/ResourcesWidget/ResourcesWidget";
+import StateCell from "../../../components/TableInformationCells/StateCell";
+import BasicCell from "../../../components/TableInformationCells/BasicCell";
+import { Fragment, ReactElement, useEffect, useMemo, useState } from "react";
+import InfoCell from "../../../components/TableInformationCells/InfoCell";
 import UsagesWidget from "../../../components/UsagesWidget/UsagesWidget";
 import GeneralTable from "../../../components/Table/GeneralTable";
+import TourGuide from "../../../components/TourGuide/TourGuide";
 import DashboardLayout from "../../../layouts/DashboardLayout";
+import { getGuideItem } from "../../../functions/handleGuide";
 import { FaLinux, FaServer, FaUbuntu } from "react-icons/fa";
-import BasicCell from "../../../components/TableInformationCells/BasicCell";
-import StateCell from "../../../components/TableInformationCells/StateCell";
-import InfoCell from "../../../components/TableInformationCells/InfoCell";
 import useFunctions from "../../../hooks/useFunctions";
 import { SiKubernetes } from "react-icons/si";
 import { useParams } from "react-router-dom";
 import useMain from "../../../hooks/useMain";
 import { RiCpuLine } from "react-icons/ri";
-import TourGuide from "../../../components/TourGuide/TourGuide";
-import { getGuideItem } from "../../../functions/handleGuide";
 import { BsGpuCard } from "react-icons/bs";
 
 export default function CloudInstanceDashboardPage(): ReactElement {
@@ -302,23 +296,23 @@ export default function CloudInstanceDashboardPage(): ReactElement {
               percentage:
                 pagesState?.instance?.cloudInstanceResource?.memoryUsage || -1,
             },
-            {
-              title: `Storage (${
-                pagesState?.instance?.cloudInstanceResource?.storageTotal || 0
-              } GB)`,
-              percentage:
-                Number(
-                  (
-                    (pagesState?.instance?.cloudInstanceResource
-                      ?.storageTotal! /
-                      100) *
-                    (pagesState?.instance?.cloudInstanceResource
-                      ?.storageTotal! -
-                      pagesState?.instance?.cloudInstanceResource
-                        ?.storageUsage!)
-                  ).toFixed(),
-                ) || -1,
-            },
+            // {
+            //   title: `Storage (${
+            //     pagesState?.instance?.cloudInstanceResource?.storageTotal || 0
+            //   } GB)`,
+            //   percentage:
+            //     Number(
+            //       (
+            //         (pagesState?.instance?.cloudInstanceResource
+            //           ?.storageTotal! /
+            //           100) *
+            //         (pagesState?.instance?.cloudInstanceResource
+            //           ?.storageTotal! -
+            //           pagesState?.instance?.cloudInstanceResource
+            //             ?.storageUsage!)
+            //       ).toFixed(),
+            //     ) || -1,
+            // },
             {
               title: `In Network (${pagesState.instance?.cloudInstanceResource?.networkUsage?.[0]?.interfaceName})`,
               percentage:
@@ -338,6 +332,7 @@ export default function CloudInstanceDashboardPage(): ReactElement {
               content:
                 pagesState.instance?.cloudInstanceResource?.networkUsage?.[0]
                   ?.trafficOut,
+              size: 20,
             },
           ]}
         />