refactor(robot-page): 🎉 update robot-page layout

src/components/CodeEditorSwitcher/CodeEditorSwitcher.tsx

@@ -3,10 +3,8 @@ import Card from "../Card/Card";
 
 interface ICodeEditorSwitcher {
   codeEditorTabs: any;
-  activeTabCodeEditor: string;
-  setActiveTabCodeEditor: Dispatch<
-    SetStateAction<"Cloud IDE" | "Physical IDE">
-  >;
+  activeTabCodeEditor: number;
+  setActiveTabCodeEditor: Dispatch<SetStateAction<1 | 2>>;
 }
 
 export default function CodeEditorSwitcher({
@@ -21,7 +19,7 @@ export default function CodeEditorSwitcher({
           return (
             <li
               className="flex w-full cursor-pointer flex-col items-center gap-3"
-              onClick={() => setActiveTabCodeEditor(tab.name)}
+              onClick={() => setActiveTabCodeEditor(tab.index + 1)}
               key={index}
             >
               <div

src/components/Connections/Connections.tsx

@@ -1,9 +1,9 @@
 import ConnectionLabel from "../ConnectionLabel/ConnectionLabel";
 import StateCell from "../TableInformationCells/StateCell";
+import { envApplication } from "../../helpers/envProvider";
 import { useKeycloak } from "@react-keycloak/web";
 import useRobot from "../../hooks/useRobot";
 import { ReactElement } from "react";
-import { envApplication } from "../../helpers/envProvider";
 
 export default function Connections(): ReactElement {
   const { responseRobot, isSettedCookie } = useRobot();

src/components/HiddenFrame/HiddenFrame.tsx

@@ -1,41 +1,27 @@
-import React, { Fragment, ReactElement, useEffect, useState } from "react";
 import useRobot from "../../hooks/useRobot";
-import { useAppSelector } from "../../hooks/redux";
+import { ReactElement } from "react";
 
 export default function HiddenFrame(): ReactElement {
-  const [iframeKey, setIframeKey] = useState<number>(0);
-  const { responseRobot, setIsSettedCookie, isSettedCookie } = useRobot();
-  const { urls } = useAppSelector((state) => state.robot);
-
-  useEffect(() => {
-    const timer = setInterval(
-      () => {
-        setIframeKey(iframeKey + 1);
-      },
-      5 * 60 * 1000,
-    ); // 5 minutes
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, [iframeKey]);
+  const {
+    responseRobot,
+    isRobotReady,
+    setIsSettedCookie,
+    isSettedCookie,
+    iFrameId,
+  } = useRobot();
 
   return (
-    <Fragment>
-      {responseRobot?.ideIngressEndpoint && (
-        <iframe
-          key={iframeKey}
-          title="iframe"
-          allow="clipboard-read"
-          className="absolute -top-[9999px]"
-          src={urls?.ide || responseRobot?.ideIngressEndpoint}
-          onLoad={() => {
-            setTimeout(() => {
-              !isSettedCookie && setIsSettedCookie(true);
-            }, 2500);
-          }}
-        />
-      )}
-    </Fragment>
+    <iframe
+      key={iFrameId}
+      title={String(iFrameId)}
+      allow="clipboard-read"
+      className="absolute -top-[9999px]"
+      src={responseRobot?.ideIngressEndpoint}
+      onLoad={() => {
+        setTimeout(() => {
+          isRobotReady && !isSettedCookie && setIsSettedCookie(true);
+        }, 2500);
+      }}
+    />
   );
 }

src/contexts/RobotContext.tsx

@@ -38,6 +38,8 @@ export default ({ children }: any) => {
 
   const [isRobotReady, setIsRobotReady] = useState<boolean>(false);
 
+  const [iFrameId, setIFrameId] = useState<number>(0);
+
   const [isSettedCookie, setIsSettedCookie] = useState<boolean | undefined>(
     undefined,
   );
@@ -125,13 +127,21 @@ export default ({ children }: any) => {
 
   // isRobotReady
   useEffect(() => {
-    if (
+    const isWorkspaceReady =
       responseRobot?.robotClusters?.filter(
         (robot: any) => robot?.robotStatus !== "EnvironmentReady",
-      )?.length ||
+      )?.length === 0
+        ? true
+        : false;
+
+    const isBuildManagerReady =
       responseBuildManager?.robotClusters?.filter(
         (robot: any) => robot?.buildManagerStatus !== "Ready",
-      )?.length ||
+      )?.length === 0
+        ? true
+        : false;
+
+    const isLaunchManagerReady =
       responseLaunchManagers
         ?.map((launchStep: any) => {
           return launchStep?.robotClusters;
@@ -140,13 +150,42 @@ export default ({ children }: any) => {
         ?.map((cluster: any) => {
           return cluster?.launchManagerStatus;
         })
-        ?.filter((status: any) => status !== "Running")?.length
-    ) {
+        ?.filter((status: any) => status !== "Running")?.length === 0
+        ? true
+        : false;
+
+    console.log("isWorkspaceReady", isWorkspaceReady);
+
+    if (isWorkspaceReady || isBuildManagerReady || isLaunchManagerReady) {
+      setIsRobotReady(true);
+    } else {
+      setIFrameId((prevState) => prevState + 1);
+      setIsRobotReady(false);
     }
-    return setIsRobotReady(true);
   }, [responseRobot, responseBuildManager, responseLaunchManagers]);
   // isRobotReady
 
+  // Cookies Reloader
+  useEffect(() => {
+    const timer = setInterval(
+      () => {
+        setIFrameId((prevState) => prevState + 1);
+      },
+      5 * 60 * 1000,
+    ); // 5 minutes
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [
+    isRobotReady,
+    responseRobot,
+    responseBuildManager,
+    responseLaunchManagers,
+    iFrameId,
+  ]);
+  // Cookies Reloader
+
   function handleGetOrganization() {
     getOrganization(
       {
@@ -324,6 +363,7 @@ export default ({ children }: any) => {
         responseBuildManager,
         responseLaunchManagers,
         isRobotReady,
+        iFrameId,
         ros,
         setRos,
         topicList,

src/hooks/useRobot.tsx

@@ -1,5 +1,5 @@
-import { useContext } from "react";
 import { RobotContext } from "../contexts/RobotContext";
+import { useContext } from "react";
 
 interface IuseRobot {
   activeTab: string;
@@ -8,6 +8,7 @@ interface IuseRobot {
   responseBuildManager: any;
   responseLaunchManagers: any;
   isRobotReady: boolean;
+  iFrameId: number;
   ros: any;
   setRos: any;
   topicList: any;

src/interfaces/mainInterfaces.ts

@@ -1,6 +1,6 @@
-import { IRegion } from "./regionInterfaces";
 import { IOrganization } from "./organizationInterfaces";
 import { IInstance } from "./instanceInferfaces";
+import { IRegion } from "./regionInterfaces";
 
 export interface ISidebarState {
   isOpen: boolean;

src/pages/EnvironmentPage/CodeEditor/CodeEditor.tsx

@@ -1,6 +1,6 @@
 import RestartService from "../../../components/RestartServiceButton/RestartServiceButton";
 import { FullScreen, useFullScreenHandle } from "react-full-screen";
-import { ReactElement, useEffect, useState } from "react";
+import { Fragment, ReactElement, useState } from "react";
 import ServiceLogs from "../../../components/ServiceLogs/ServiceLogs";
 import ServiceJobs from "../../../components/ServiceJobs/ServiceJobs";
 import FileBrowser from "../../../components/FileBrowser/FileBrowser";
@@ -10,14 +10,11 @@ import CodeEditorSwitcher from "../../../components/CodeEditorSwitcher/CodeEdito
 import FullScreenService from "../../../components/FullScreenService/FullScreenService";
 
 export default function CodeEditor(): ReactElement {
-  const [ideKey, setIdeKey] = useState<number>(0);
-  const [activeTabCodeEditor, setActiveTabCodeEditor] = useState<
-    "Cloud IDE" | "Physical IDE"
-  >("Cloud IDE");
+  const [activeTabCodeEditor, setActiveTabCodeEditor] = useState<1 | 2>(1);
 
   const handleFullScreen = useFullScreenHandle();
 
-  const { activeTab, responseRobot, setIsSettedCookie } = useRobot();
+  const { activeTab, responseRobot, isRobotReady, isSettedCookie } = useRobot();
 
   const codeEditorTabs = [
     {
@@ -28,15 +25,8 @@ export default function CodeEditor(): ReactElement {
     },
   ];
 
-  useEffect(() => {
-    setIsSettedCookie(undefined);
-    setIdeKey((prev) => prev + 1);
-  }, [responseRobot?.robotClusters, setIsSettedCookie]);
-
   return (
     <div
-      key={ideKey}
-      id={`CODE_EDITOR_${ideKey}`}
       className={
         activeTab === "Code Editor"
           ? "animate__animated animate__fadeIn flex h-full flex-col gap-6"
@@ -51,34 +41,31 @@ export default function CodeEditor(): ReactElement {
         />
       )}
       <Card loading className="relative">
-        <FullScreen className="h-full w-full" handle={handleFullScreen}>
-          <iframe
-            allow="clipboard-read"
-            className={`animate__animated animate__fadeIn w-full ${
-              handleFullScreen?.active ? "h-screen" : "h-full"
-            }`}
-            src={
-              activeTabCodeEditor === "Cloud IDE"
-                ? responseRobot?.ideIngressEndpoint
-                : responseRobot?.physicalIdeIngressEndpoint
-            }
-            title="Code Editor"
-            onLoad={async () => {
-              if (await responseRobot) {
-                await setTimeout(() => {
-                  setIsSettedCookie(true);
-                }, 2500);
-              }
-            }}
-          />
-          <div className="absolute bottom-4 right-4 flex flex-col gap-5">
-            <FileBrowser type="ide" />
-            <ServiceJobs type="ide" />
-            <ServiceLogs type="ide" />
-            <RestartService type="ide" />
-            <FullScreenService handleFullScreen={handleFullScreen} />
-          </div>
-        </FullScreen>
+        <Fragment>
+          {isRobotReady && isSettedCookie && (
+            <FullScreen className="h-full w-full" handle={handleFullScreen}>
+              <iframe
+                title="Code Editor"
+                allow="clipboard-read"
+                className={`animate__animated animate__fadeIn w-full ${
+                  handleFullScreen?.active ? "h-screen" : "h-full"
+                }`}
+                src={
+                  activeTabCodeEditor === 1
+                    ? responseRobot?.ideIngressEndpoint
+                    : responseRobot?.physicalIdeIngressEndpoint
+                }
+              />
+              <div className="absolute bottom-4 right-4 flex flex-col gap-5">
+                <FileBrowser type="ide" />
+                <ServiceJobs type="ide" />
+                <ServiceLogs type="ide" />
+                <RestartService type="ide" />
+                <FullScreenService handleFullScreen={handleFullScreen} />
+              </div>
+            </FullScreen>
+          )}
+        </Fragment>
       </Card>
     </div>
   );