From 5ae2f828afbc5293535c7fd2481407af1aaeb56e Mon Sep 17 00:00:00 2001
From: gokhangunduz <mail@gokhangunduz.com.tr>
Date: Wed, 16 Aug 2023 17:34:43 +0300
Subject: [PATCH] refactor(robot-header): :tada: update robot header with
 services component

---
 package.json                                  |  2 +-
 src/components/Button/Button.tsx              |  2 +-
 src/components/Cells/StateCell.tsx            |  1 +
 src/components/RobotHeader/RobotHeader.tsx    | 34 +-------------
 .../RobotServiceButtons.tsx                   | 44 +++++++++++++++++++
 .../VersionViewer/VersionViewer.tsx           | 25 ++++++-----
 src/helpers/envProvider.ts                    |  5 +++
 src/pages/RobotPage/Overview/Overview.tsx     | 20 +++++++++
 src/pages/RobotPage/RobotPage.tsx             |  9 ++--
 src/toolkit/RobotSlice.ts                     |  7 +--
 10 files changed, 96 insertions(+), 53 deletions(-)
 create mode 100644 src/components/RobotServiceButtons/RobotServiceButtons.tsx

diff --git a/package.json b/package.json
index 4749805c..ae852f55 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.12.5",
+  "version": "0.12.6",
   "private": true,
   "dependencies": {
     "@emotion/css": "^11.10.6",
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 1b8a8a6e..d90297b6 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -4,7 +4,7 @@ interface ButtonProps {
   type?: "button" | "submit" | "reset";
   text: any;
   onClick?: () => void;
-  loading?: boolean;
+  loading?: boolean | null;
   disabled?: boolean;
   className?: string;
 }
diff --git a/src/components/Cells/StateCell.tsx b/src/components/Cells/StateCell.tsx
index 18ed1a7d..7a16b7a9 100644
--- a/src/components/Cells/StateCell.tsx
+++ b/src/components/Cells/StateCell.tsx
@@ -85,6 +85,7 @@ export default function StateCell({ state, isRobolaunchState }: IStateCell) {
         state === "WaitingForCredentials" ||
         state === "ConfiguringEnvironment" ||
         state === "CreatingDevelopmentSuite" ||
+        state === "ConfiguringWorkspaces" ||
         state === "BuildingRobot" ? (
         <img
           className="w-2.5 h-2.5 scale-[3.4]"
diff --git a/src/components/RobotHeader/RobotHeader.tsx b/src/components/RobotHeader/RobotHeader.tsx
index d02b1a53..aeba47a9 100644
--- a/src/components/RobotHeader/RobotHeader.tsx
+++ b/src/components/RobotHeader/RobotHeader.tsx
@@ -4,12 +4,12 @@ import { IoLocationOutline } from "react-icons/io5";
 import { AiOutlineTeam } from "react-icons/ai";
 import CardLayout from "../../layouts/CardLayout";
 import ContentLoader from "react-content-loader";
-import Button from "../Button/Button";
 import RobotResource from "../RobotResource/RobotResource";
 import RobotConnectionsViewer from "../RobotConnectionsViewer/RobotConnectionsViewer";
 import { envOnPremise } from "../../helpers/envProvider";
 import RobotHeaderTabs from "../RobotHeaderTabs/RobotHeaderTabs";
 import useRobot from "../../hooks/useRobot";
+import RobotServiceButtons from "../RobotServiceButtons/RobotServiceButtons";
 
 interface IRobotHeader {
   handleChangeActiveTab: any;
@@ -29,7 +29,6 @@ export default function RobotHeader({
           <div className="h-full flex flex-col justify-around">
             <div className="flex gap-2 items-center">
               <span className="text-lg font-medium">{url?.robotName}</span>
-
               <div
                 className={`text-[0.64rem] capitalize font-medium px-3 py-1 rounded-lg w-fit text-layer-primary-500 bg-layer-primary-100`}
               >
@@ -55,43 +54,14 @@ export default function RobotHeader({
                 {url?.organizationName} Organization
               </span>
             </span>
-
             <span className="flex gap-2 items-center">
               <IoLocationOutline size={16} />
               <span className="text-xs font-light">Ankara, Turkiye</span>
             </span>
           </div>
-
           <div className="hidden md:flex text-xs font-medium text-layer-dark-400 gap-8">
             <div className="h-full flex flex-col items-end gap-4">
-              <div className="flex gap-2">
-                <div className="flex  items-center rounded-lg">
-                  <a
-                    target="_blank"
-                    rel="noreferrer"
-                    href={responseRobot?.ideIngressEndpoint}
-                  >
-                    <Button
-                      text={"Code Editor"}
-                      className="!h-9 text-xs px-4"
-                    />
-                  </a>
-                </div>
-                <div className="flex items-center rounded-lg p-2">
-                  <a
-                    target="_blank"
-                    rel="noreferrer"
-                    href={`https://${
-                      responseRobot?.vdiIngressEndpoint?.split("//")[1]
-                    }`}
-                  >
-                    <Button
-                      text={"Remote Desktop"}
-                      className="!h-9 text-xs px-4"
-                    />
-                  </a>
-                </div>
-              </div>
+              <RobotServiceButtons />
               <RobotConnectionsViewer
                 ide={isSettedCookie}
                 vdiURL={responseRobot?.vdiIngressEndpoint}
diff --git a/src/components/RobotServiceButtons/RobotServiceButtons.tsx b/src/components/RobotServiceButtons/RobotServiceButtons.tsx
new file mode 100644
index 00000000..feac09da
--- /dev/null
+++ b/src/components/RobotServiceButtons/RobotServiceButtons.tsx
@@ -0,0 +1,44 @@
+import React, { ReactElement } from "react";
+import useRobot from "../../hooks/useRobot";
+import Button from "../Button/Button";
+
+export default function RobotServiceButtons(): ReactElement {
+  const { responseRobot, isSettedCookie } = useRobot();
+
+  return (
+    <div className="flex gap-2">
+      <div className="flex  items-center rounded-lg">
+        <a
+          target="_blank"
+          rel="noreferrer"
+          href={responseRobot?.ideIngressEndpoint || "#"}
+        >
+          <Button
+            disabled={!isSettedCookie}
+            loading={!isSettedCookie}
+            text={"Code Editor"}
+            className="!h-9 text-xs px-4"
+          />
+        </a>
+      </div>
+      <div className="flex items-center rounded-lg p-2">
+        <a
+          target="_blank"
+          rel="noreferrer"
+          href={
+            responseRobot?.vdiIngressEndpoint
+              ? `https://${responseRobot?.vdiIngressEndpoint?.split("//")[1]}`
+              : "#"
+          }
+        >
+          <Button
+            disabled={!isSettedCookie}
+            loading={!isSettedCookie}
+            text={"Remote Desktop"}
+            className="!h-9 text-xs px-4"
+          />
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/VersionViewer/VersionViewer.tsx b/src/components/VersionViewer/VersionViewer.tsx
index 199f0117..b3454624 100644
--- a/src/components/VersionViewer/VersionViewer.tsx
+++ b/src/components/VersionViewer/VersionViewer.tsx
@@ -1,23 +1,24 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import packageJSON from "../../../package.json";
+import { envFrontendUrl, isProduction } from "../../helpers/envProvider";
+
+export default function VersionViewer(): ReactElement {
+  const developmentURL = `http://localhost:3000${
+    window.location.href?.split("robolaunch.cloud")[1] || ""
+  }`;
+
+  const productionURL = `${envFrontendUrl}${
+    window.location.href?.split("3000")[1] || ""
+  }`;
 
-export default function VersionViewer() {
   return (
     <div
       onClick={() => {
-        if (process.env.NODE_ENV === "development") {
-          window.location.href = `${process.env.REACT_APP_FRONTEND_URL}${
-            window.location.href?.split("3000")[1] || ""
-          }`;
-        } else if (process.env.NODE_ENV === "production") {
-          window.location.href = `http://localhost:3000${
-            window.location.href?.split("robolaunch.cloud")[1] || ""
-          }`;
-        }
+        window.location.href = isProduction ? developmentURL : productionURL;
       }}
       className="fixed bottom-0 right-1 z-50 text-[0.64rem] text-layer-light-700 cursor-crosshair"
     >
-      {process.env.NODE_ENV === "production" ? "P" : "D"} {packageJSON?.version}
+      {isProduction ? "P" : "D"} {packageJSON?.version}
     </div>
   );
 }
diff --git a/src/helpers/envProvider.ts b/src/helpers/envProvider.ts
index 7ad728ac..84a84368 100644
--- a/src/helpers/envProvider.ts
+++ b/src/helpers/envProvider.ts
@@ -1,2 +1,7 @@
 export const envOnPremise: boolean =
   process.env.REACT_APP_ON_PREMISE === "true" ? true : false;
+
+export const envFrontendUrl: string = process.env.REACT_APP_FRONTEND_URL || "";
+
+export const isProduction: boolean =
+  process.env.NODE_ENV === "production" ? true : false;
diff --git a/src/pages/RobotPage/Overview/Overview.tsx b/src/pages/RobotPage/Overview/Overview.tsx
index 2805defe..3e0d86d5 100644
--- a/src/pages/RobotPage/Overview/Overview.tsx
+++ b/src/pages/RobotPage/Overview/Overview.tsx
@@ -35,12 +35,32 @@ export default function Overview({
           component={
             envOnPremise ? (
               <Button
+                disabled={
+                  responseRobot?.robotClusters?.filter(
+                    (robot: any) => robot?.robotStatus !== "EnvironmentReady"
+                  )?.length
+                }
+                loading={
+                  responseRobot?.robotClusters?.filter(
+                    (robot: any) => robot?.robotStatus !== "EnvironmentReady"
+                  )?.length
+                }
                 text="Development Suite"
                 className="!w-44 !h-10 !text-xs"
                 onClick={informationWidgetAction}
               />
             ) : (
               <Button
+                disabled={
+                  responseRobot?.robotClusters?.filter(
+                    (robot: any) => robot?.robotStatus !== "EnvironmentReady"
+                  )?.length
+                }
+                loading={
+                  responseRobot?.robotClusters?.filter(
+                    (robot: any) => robot?.robotStatus !== "EnvironmentReady"
+                  )?.length
+                }
                 text="Teleoperation of Robot"
                 className="!w-44 !h-10 !text-xs"
                 onClick={informationWidgetAction}
diff --git a/src/pages/RobotPage/RobotPage.tsx b/src/pages/RobotPage/RobotPage.tsx
index 92927adb..05bb7f95 100644
--- a/src/pages/RobotPage/RobotPage.tsx
+++ b/src/pages/RobotPage/RobotPage.tsx
@@ -17,7 +17,7 @@ import Overview from "./Overview/Overview";
 import HiddenFrame from "../../components/HiddenFrame/HiddenFrame";
 
 export default function RobotPage(): ReactElement {
-  const { activeTab, setActiveTab, responseRobot } = useRobot();
+  const { activeTab, setActiveTab, responseRobot, isSettedCookie } = useRobot();
 
   const { urls } = useAppSelector((state) => state.robot);
 
@@ -38,9 +38,10 @@ export default function RobotPage(): ReactElement {
               return (
                 <Overview
                   informationWidgetAction={() => {
-                    setActiveTab(
-                      envOnPremise ? "Development Suite" : "Teleoperation"
-                    );
+                    isSettedCookie &&
+                      setActiveTab(
+                        envOnPremise ? "Development Suite" : "Teleoperation"
+                      );
                   }}
                 />
               );
diff --git a/src/toolkit/RobotSlice.ts b/src/toolkit/RobotSlice.ts
index 0fb512c8..6e355042 100644
--- a/src/toolkit/RobotSlice.ts
+++ b/src/toolkit/RobotSlice.ts
@@ -19,6 +19,7 @@ import {
   IdeleteLaunchManagerRequest,
   IdeleteRobotRequest,
 } from "../interfaces/robotInterfaces";
+import { isProduction } from "../helpers/envProvider";
 
 export const createRobot = createAsyncThunk(
   "robot/createFederatedRobot",
@@ -371,9 +372,9 @@ export const RobotSlice = createSlice({
   name: "robot",
   initialState: {
     urls: {
-      vdi: process.env.NODE_ENV === "production" ? "" : "",
-      ide: process.env.NODE_ENV === "production" ? "" : "",
-      ros: process.env.NODE_ENV === "production" ? "" : "",
+      vdi: isProduction ? "" : "",
+      ide: isProduction ? "" : "",
+      ros: isProduction ? "" : "",
     },
   },
   reducers: {