refactor(env-header): 🎉 update env-header

robolaunch · Jan 4, 2024 · cb70bae · cb70bae
1 parent afb653a
commit cb70bae
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 124 deletions.
diff --git a/package.json b/package.json
@@ -72,6 +72,7 @@
     "react-helmet": "^6.1.0",
     "react-icons": "^4.7.1",
     "react-joystick-component": "^6.2.0",
+    "react-loading-skeleton": "^3.3.1",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.7.0",
     "react-scripts": "5.0.1",

diff --git a/public/css/style.css b/public/css/style.css
@@ -985,6 +985,10 @@ video {
   height: 7rem !important;
 }
 
+.\!h-60 {
+  height: 15rem !important;
+}
+
 .\!h-8 {
   height: 2rem !important;
 }
@@ -1149,14 +1153,6 @@ video {
   height: 100vh;
 }
 
-.\!h-40 {
-  height: 10rem !important;
-}
-
-.\!h-60 {
-  height: 15rem !important;
-}
-
 .max-h-\[40rem\] {
   max-height: 40rem;
 }
@@ -1173,6 +1169,10 @@ video {
   width: 6rem !important;
 }
 
+.\!w-28 {
+  width: 7rem !important;
+}
+
 .\!w-32 {
   width: 8rem !important;
 }
@@ -1370,14 +1370,6 @@ video {
   width: max-content;
 }
 
-.\!w-20 {
-  width: 5rem !important;
-}
-
-.\!w-28 {
-  width: 7rem !important;
-}
-
 .min-w-\[12rem\] {
   min-width: 12rem;
 }
@@ -1397,6 +1389,14 @@ video {
   min-width: max-content;
 }
 
+.min-w-40 {
+  min-width: 10rem;
+}
+
+.min-w-32 {
+  min-width: 8rem;
+}
+
 .max-w-fit {
   max-width: -webkit-fit-content;
   max-width: -moz-fit-content;
@@ -1511,34 +1511,6 @@ 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-50 {
-  --tw-scale-x: .5;
-  --tw-scale-y: .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));
-}
-
-.scale-\[0\.60\] {
-  --tw-scale-x: 0.60;
-  --tw-scale-y: 0.60;
-  -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-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));
-}
-
 .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));
@@ -2428,10 +2400,6 @@ video {
   padding-top: 2rem;
 }
 
-.pr-4 {
-  padding-right: 1rem;
-}
-
 .text-center {
   text-align: center;
 }

diff --git a/src/components/Connections/Connections.tsx b/src/components/Connections/Connections.tsx
@@ -1,10 +1,10 @@
 import ConnectionLabel from "../ConnectionLabel/ConnectionLabel";
 import StateCell from "../TableInformationCells/StateCell";
 import { envApplication } from "../../helpers/envProvider";
+import useCreateRobot from "../../hooks/useCreateRobot";
 import { useKeycloak } from "@react-keycloak/web";
 import useRobot from "../../hooks/useRobot";
 import { ReactElement } from "react";
-import useCreateRobot from "../../hooks/useCreateRobot";
 
 export default function Connections(): ReactElement {
   const { responseRobot, connectionsReducer } = useRobot();

diff --git a/src/components/EnvironmentLabels/EnvironmentLabels.tsx b/src/components/EnvironmentLabels/EnvironmentLabels.tsx
@@ -1,31 +1,35 @@
 import EnvironmentObjectLabel from "../EnvironmentObjectLabel/EnvironmentObjectLabel";
 import EnvironmentNameLabel from "../EnvironmentNameLabel/EnvironmentNameLabel";
 import { envApplication } from "../../helpers/envProvider";
-import { useParams } from "react-router-dom";
+import useMain from "../../hooks/useMain";
 import { ReactElement } from "react";
+import { orgNameViewer } from "../../functions/GeneralFunctions";
 
 export default function EnvironmentLabels(): ReactElement {
-  const url = useParams();
+  const { selectedState } = useMain();
 
   return (
     <div className="flex items-center gap-7">
       <EnvironmentNameLabel />
       <div className="flex items-center gap-3.5">
         <EnvironmentObjectLabel
           icon="organization"
-          text={`Organization: ${url?.organizationName}`}
+          text={`Organization: ${orgNameViewer(
+            selectedState?.organization?.organizationName!,
+          )}`}
         />
         <EnvironmentObjectLabel
           icon="region"
-          text={`Region: ${url?.roboticsCloudName}`}
+          text={`Region: ${selectedState?.instance?.region}`}
         />
         <EnvironmentObjectLabel
           icon="instance"
-          text={`Instance: ${url?.instanceName}`}
+          text={`Instance: ${selectedState?.instance?.name}`}
         />
         <EnvironmentObjectLabel
           icon="fleet"
-          text={`${envApplication ? "Namespace" : "Fleet"}: ${url?.fleetName}`}
+          text={`${envApplication ? "Namespace" : "Fleet"}: ${selectedState
+            ?.fleet?.name}`}
         />
       </div>
     </div>

diff --git a/src/components/EnvironmentNameLabel/EnvironmentNameLabel.tsx b/src/components/EnvironmentNameLabel/EnvironmentNameLabel.tsx
@@ -1,13 +1,17 @@
 import ColorLabel from "../ColorLabel/ColorLabel";
-import { useParams } from "react-router-dom";
 import { ReactElement } from "react";
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+import useCreateRobot from "../../hooks/useCreateRobot";
 
 export default function EnvironmentNameLabel(): ReactElement {
-  const url = useParams();
+  const { robotData } = useCreateRobot();
 
   return (
-    <span className="flex items-center gap-2">
-      <span className="text-lg font-medium">{url?.robotName}</span>
+    <span className="flex min-w-40 items-center gap-2">
+      <span className="min-w-32 text-lg font-medium">
+        {robotData?.step1?.robotName || <Skeleton />}
+      </span>
       <ColorLabel />
     </span>
   );

diff --git a/src/controllers/DataScienceTableData.tsx b/src/controllers/DataScienceTableData.tsx
@@ -1,13 +1,13 @@
+import StartStopCell from "../components/TableInformationCells/StartStopCell";
+import DataScienceLogs from "../components/DataScienceLogs/DataScienceLogs";
 import StateCell from "../components/TableInformationCells/StateCell";
-import { Fragment, useEffect, useMemo, useState } from "react";
-import useFunctions from "../hooks/useFunctions";
-import { useParams } from "react-router-dom";
-import InfoCell from "../components/TableInformationCells/InfoCell";
 import { IDataScienceApp } from "../interfaces/environmentInterfaces";
 import BasicCell from "../components/TableInformationCells/BasicCell";
-import DataScienceLogs from "../components/DataScienceLogs/DataScienceLogs";
+import InfoCell from "../components/TableInformationCells/InfoCell";
 import URLCell from "../components/TableInformationCells/URLCell";
-import StartStopCell from "../components/TableInformationCells/StartStopCell";
+import { Fragment, useEffect, useMemo, useState } from "react";
+import useFunctions from "../hooks/useFunctions";
+import { useParams } from "react-router-dom";
 
 export function DataScienceTableData() {
   const [responseApps, setResponseApps] = useState<
@@ -127,52 +127,6 @@ export function DataScienceTableData() {
         body: (rowData: any) => {
           console.log(rowData);
           return (
-            // <ToggleCell
-            //   isChecked={(() => {
-            //     switch (rowData?.toggleState?.status) {
-            //       case "Ready":
-            //         return true;
-            //       default:
-            //         return false;
-            //     }
-            //   })()}
-            //   loading={(() => {
-            //     switch (rowData?.toggleState?.status) {
-            //       case "Not Deployed":
-            //         return false;
-            //       case "Ready":
-            //         return false;
-            //       default:
-            //         return true;
-            //     }
-            //   })()}
-            //   disabled={(() => {
-            //     switch (rowData?.status) {
-            //       case "Not Deployed":
-            //         return false;
-            //       case "Ready":
-            //         return false;
-            //       default:
-            //         return true;
-            //     }
-            //   })()}
-            //   onOpenHandle={() => {
-            //     createDataScienceApp({
-            //       applicationName: rowData?.toggleState?.name,
-            //     });
-            //     setTimeout(() => {
-            //       handleReload();
-            //     }, 1000);
-            //   }}
-            //   onCloseHandle={() => {
-            //     deleteDataScienceApp({
-            //       applicationName: rowData?.toggleState?.name,
-            //     });
-            //     setTimeout(() => {
-            //       handleReload();
-            //     }, 1000);
-            //   }}
-            // />
             <StartStopCell
               isRunning={(() => {
                 switch (rowData?.status) {
@@ -208,16 +162,14 @@ export function DataScienceTableData() {
                     return true;
                 }
               })()}
-              modalText={
-                (() => {
-                  switch (rowData?.status) {
-                    case "Ready":
-                      return "Are you sure you want to stop this application?";
-                    default:
-                      return "Are you sure you want to start this application?";
-                  }
-                })() || ""
-              }
+              modalText={(() => {
+                switch (rowData?.status) {
+                  case "Ready":
+                    return "Are you sure you want to stop this application?";
+                  default:
+                    return "Are you sure you want to start this application?";
+                }
+              })()}
             />
           );
         },

diff --git a/src/functions/GeneralFunctions.ts b/src/functions/GeneralFunctions.ts
@@ -51,6 +51,19 @@ export function handleSplitOrganizationName(organizationName: string) {
   return organizationName?.split("_")[1];
 }
 
+export function orgNameViewer(
+  orgname: string,
+  capitalization: boolean = false,
+) {
+  if (capitalization) {
+    return stringCapitalization({
+      str: orgname?.split("_")[1],
+    });
+  }
+
+  return orgname?.split("_")[1];
+}
+
 export function handleLogout() {
   [
     "tokens",

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { BrowserRouter } from "react-router-dom";
 import ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
@@ -14,15 +13,16 @@ import "@fontsource/inter/800.css";
 import "@fontsource/inter/900.css";
 import App from "./App";
 import "animate.css";
+import "react-loading-skeleton/dist/skeleton.css";
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
+  document.getElementById("root") as HTMLElement,
 );
 
 root.render(
   <Provider store={store}>
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </Provider>
+  </Provider>,
 );