refactor(robot-header): 🎉 update robot header with services component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.12.5",
+  "version": "0.12.6",
   "private": true,
   "dependencies": {
     "@emotion/css": "^11.10.6",

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;
 }

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]"

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}

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>
+  );
+}

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>
   );
 }

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;

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}

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"
+                      );
                   }}
                 />
               );

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: {