feat(file-manager): 🎉 add file manager

robolaunch · Nov 23, 2023 · 23e592f · 23e592f
1 parent f1c480b
commit 23e592f
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 112 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -1343,10 +1343,6 @@ video {
   width: max-content;
 }
 
-.w-\[4as0vw\] {
-  width: 4as0vw;
-}
-
 .min-w-\[12rem\] {
   min-width: 12rem;
 }

diff --git a/src/components/FileManager/FileManager.tsx b/src/components/FileManager/FileManager.tsx
@@ -0,0 +1,46 @@
+import React, { ReactElement } from "react";
+import CardLayout from "../../layouts/CardLayout";
+import { FullScreen, useFullScreenHandle } from "react-full-screen";
+import { useAppSelector } from "../../hooks/redux";
+import useRobot from "../../hooks/useRobot";
+import RestartService from "../RestartServiceButton/RestartServiceButton";
+import FullScreenButton from "../FullScreenButton/FullScreenButton";
+import ServiceLogsButton from "../ServiceLogs/ServiceLogs";
+
+export default function CodeEditor(): ReactElement {
+  const handleFullScreen = useFullScreenHandle();
+
+  const { responseRobot } = useRobot();
+
+  const { urls } = useAppSelector((state) => state.robot);
+
+  return (
+    <div className="animate__animated animate__fadeIn grid h-full">
+      <CardLayout loading={true}>
+        <FullScreen className="relative" handle={handleFullScreen}>
+          <iframe
+            allow="clipboard-read"
+            className={`animate__animated animate__fadeIn w-full ${
+              handleFullScreen?.active ? "h-screen" : "h-[45.4rem]"
+            }`}
+            src={urls?.ide || responseRobot?.ideIngressEndpoint}
+            title="Code Editor"
+          />
+
+          <div className="absolute bottom-1 right-4 flex scale-[0.88] flex-col gap-4">
+            <ServiceLogsButton type="ide" />
+            <RestartService type="ide" />
+            <FullScreenButton
+              isFullScreen={handleFullScreen.active}
+              handleFullScreen={
+                handleFullScreen.active
+                  ? handleFullScreen.exit
+                  : handleFullScreen.enter
+              }
+            />
+          </div>
+        </FullScreen>
+      </CardLayout>
+    </div>
+  );
+}
diff --git a/src/components/RobotHeaderTab/RobotHeaderTab.tsx b/src/components/RobotHeaderTab/RobotHeaderTab.tsx
@@ -0,0 +1,56 @@
+import { stringSlugify } from "../../functions/GeneralFunctions";
+import { IrobotTab } from "../../interfaces/robotInterfaces";
+import ContentLoader from "react-content-loader";
+import { Fragment, ReactElement } from "react";
+import useRobot from "../../hooks/useRobot";
+interface RobotHeaderTabProps {
+  tab: IrobotTab;
+}
+
+export default function RobotHeaderTab({
+  tab,
+}: RobotHeaderTabProps): ReactElement {
+  const { activeTab, setActiveTab, isRobotReady } = useRobot();
+  const isActiveTab = tab.name === activeTab;
+
+  const handleClick = () =>
+    !tab?.isLoading && !tab?.isHidden && setActiveTab(tab.name);
+
+  return (
+    <li
+      data-tut={`robot-header-tab-${stringSlugify(tab?.name)}`}
+      className={`flex cursor-pointer flex-col gap-3 ${
+        tab?.isHidden && "!hidden"
+      }`}
+      onClick={handleClick}
+    >
+      <div
+        className={`flex min-w-max items-center gap-1 px-2 text-xs font-medium transition-all duration-500 ${
+          isActiveTab ? "text-layer-primary-500" : "text-layer-light-500"
+        }`}
+      >
+        {tab?.isLoading || !isRobotReady ? (
+          <ContentLoader
+            speed={1}
+            width={108}
+            height={16}
+            backgroundColor="#f6f6ef"
+            foregroundColor="#e8e8e3"
+          >
+            <rect width="108" height="12" />
+          </ContentLoader>
+        ) : (
+          <Fragment>
+            {tab?.icon}
+            <span>{tab.name}</span>
+          </Fragment>
+        )}
+      </div>
+      <div
+        className={`h-[2px] w-full transition-all duration-500 ${
+          isActiveTab ? "bg-layer-primary-500" : "bg-layer-light-100"
+        }`}
+      />
+    </li>
+  );
+}
diff --git a/src/components/RobotHeaderTabs/RobotHeaderTabs.tsx b/src/components/RobotHeaderTabs/RobotHeaderTabs.tsx
@@ -1,32 +1,27 @@
-import { stringSlugify } from "../../functions/GeneralFunctions";
 import { MdDashboard, MdMap, MdScreenShare } from "react-icons/md";
+import RobotHeaderTab from "../RobotHeaderTab/RobotHeaderTab";
+import { IrobotTab } from "../../interfaces/robotInterfaces";
 import { envApplication } from "../../helpers/envProvider";
 import { BsCameraVideoFill } from "react-icons/bs";
 import { BiJoystickButton } from "react-icons/bi";
-import ContentLoader from "react-content-loader";
-import { Fragment, ReactElement } from "react";
+import { BiSolidFolder } from "react-icons/bi";
 import { AiFillCode } from "react-icons/ai";
 import useRobot from "../../hooks/useRobot";
+import { ReactElement } from "react";
 
 export default function RobotHeaderTabs(): ReactElement {
-  const {
-    responseRobot,
-    activeTab,
-    isSettedCookie,
-    setActiveTab,
-    isRobotReady,
-  } = useRobot();
+  const { responseRobot, isSettedCookie, isRobotReady } = useRobot();
 
-  const tabs = [
+  const tabs: IrobotTab[] = [
     {
       name: "Overview",
-      icon: <MdDashboard size={14} />,
+      icon: <MdDashboard size={16} />,
       isLoading: false,
       isHidden: false,
     },
     {
       name: "Task Management",
-      icon: <MdMap size={14} />,
+      icon: <MdMap size={16} />,
       isLoading:
         !responseRobot ||
         !(
@@ -39,7 +34,7 @@ export default function RobotHeaderTabs(): ReactElement {
     },
     {
       name: "Teleoperation",
-      icon: <BiJoystickButton size={14} />,
+      icon: <BiJoystickButton size={16} />,
       isLoading:
         !responseRobot ||
         !(
@@ -52,7 +47,7 @@ export default function RobotHeaderTabs(): ReactElement {
     },
     {
       name: "Visualization",
-      icon: <BsCameraVideoFill size={14} />,
+      icon: <BsCameraVideoFill size={16} />,
       isLoading:
         !responseRobot ||
         !(
@@ -65,7 +60,7 @@ export default function RobotHeaderTabs(): ReactElement {
     },
     {
       name: "Code Editor",
-      icon: <AiFillCode size={14} />,
+      icon: <AiFillCode size={16} />,
       isLoading:
         !responseRobot ||
         !(
@@ -77,7 +72,7 @@ export default function RobotHeaderTabs(): ReactElement {
     },
     {
       name: "Development Suite",
-      icon: <AiFillCode size={14} />,
+      icon: <AiFillCode size={16} />,
       isLoading:
         !responseRobot ||
         !(
@@ -93,7 +88,7 @@ export default function RobotHeaderTabs(): ReactElement {
     },
     {
       name: "Remote Desktop",
-      icon: <MdScreenShare size={14} />,
+      icon: <MdScreenShare size={16} />,
       isLoading:
         !responseRobot ||
         !(
@@ -103,6 +98,18 @@ export default function RobotHeaderTabs(): ReactElement {
         ),
       isHidden: false,
     },
+    {
+      name: "File Manager",
+      icon: <BiSolidFolder size={16} />,
+      isLoading:
+        !responseRobot ||
+        !(
+          responseRobot?.ideEnabled &&
+          responseRobot?.ideIngressEndpoint &&
+          isSettedCookie
+        ),
+      isHidden: false,
+    },
   ];
 
   return (
@@ -111,53 +118,9 @@ export default function RobotHeaderTabs(): ReactElement {
       className="flex items-end gap-6 overflow-x-auto px-6 pt-4"
     >
       {tabs
-        ?.filter((tab: any) => tab && tab)
-        .map((tab: any, index: number) => {
-          return (
-            <li
-              data-tut={`robot-header-tab-${stringSlugify(tab?.name)}`}
-              className={`flex cursor-pointer flex-col gap-3 ${
-                tab?.isHidden && "!hidden"
-              }`}
-              onClick={() =>
-                !tab?.isLoading && !tab?.isHidden && setActiveTab(tab.name)
-              }
-              key={index}
-            >
-              <div
-                className={`flex min-w-max items-center gap-1 px-2 text-xs font-medium transition-all duration-500  ${
-                  tab.name === activeTab
-                    ? "text-layer-primary-500"
-                    : "text-layer-light-500"
-                }`}
-              >
-                {tab?.isLoading || !isRobotReady ? (
-                  <ContentLoader
-                    speed={1}
-                    width={108}
-                    height={12}
-                    backgroundColor="#f6f6ef"
-                    foregroundColor="#e8e8e3"
-                  >
-                    <rect width="108" height="12" />
-                  </ContentLoader>
-                ) : (
-                  <Fragment>
-                    {tab?.icon}
-                    <span>{tab.name}</span>
-                  </Fragment>
-                )}
-              </div>
-              <div
-                className={`h-[2px] w-full transition-all duration-500 
-                  ${
-                    tab.name === activeTab
-                      ? "bg-layer-primary-500"
-                      : "bg-layer-light-100"
-                  } `}
-              />
-            </li>
-          );
+        ?.filter((tab: IrobotTab) => tab && tab)
+        .map((tab: IrobotTab, index: number) => {
+          return <RobotHeaderTab tab={tab} key={index} />;
         })}
     </ul>
   );

diff --git a/src/contexts/RobotContext.tsx b/src/contexts/RobotContext.tsx
@@ -1,6 +1,6 @@
-import { envApplication } from "../helpers/envProvider";
 import { useEffect, createContext, useState } from "react";
-import { IrobotPages } from "../interfaces/generalInterfaces";
+import { IrobotTab } from "../interfaces/robotInterfaces";
+import { envApplication } from "../helpers/envProvider";
 import useFunctions from "../hooks/useFunctions";
 import { useParams } from "react-router-dom";
 import useMain from "../hooks/useMain";
@@ -23,8 +23,7 @@ export default ({ children }: any) => {
 
   const { pagesState, sidebarState } = useMain();
 
-  const [activeTab, setActiveTab] =
-    useState<IrobotPages["activeTab"]>("Overview");
+  const [activeTab, setActiveTab] = useState<IrobotTab["name"]>("Overview");
 
   const [responseRobot, setResponseRobot] = useState<any>(undefined);
   const [responseBuildManager, setResponseBuildManager] =
@@ -143,7 +142,6 @@ export default ({ children }: any) => {
         })
         ?.filter((status: any) => status !== "Running")?.length
     ) {
-      return setIsRobotReady(false);
     }
     return setIsRobotReady(true);
   }, [responseRobot, responseBuildManager, responseLaunchManagers]);
@@ -299,20 +297,8 @@ export default ({ children }: any) => {
     );
   }
 
-  function handleForceUpdate(
-    page:
-      | "Overview"
-      | "Teleoperation"
-      | "Task Management"
-      | "Visualization"
-      | "Loading"
-      | "Settings"
-      | "Remote Desktop"
-      | "Development Suite"
-      | "Code Editor",
-  ) {
+  function handleForceUpdate(page: IrobotTab["name"]) {
     setActiveTab("Loading");
-
     setTimeout(() => {
       setActiveTab(page);
     }, 500);

diff --git a/src/interfaces/generalInterfaces.ts b/src/interfaces/generalInterfaces.ts
diff --git a/src/interfaces/robotInterfaces.ts b/src/interfaces/robotInterfaces.ts
@@ -1,3 +1,5 @@
+import { ReactElement } from "react";
+
 export interface IcreateRobotRequest {
   organizationId: string;
   roboticsCloudName: string;
@@ -229,6 +231,23 @@ export interface ILaunchENV {
   value: string;
 }
 
+export type IrobotTab = {
+  name:
+    | "Overview"
+    | "Teleoperation"
+    | "Task Management"
+    | "Visualization"
+    | "Loading"
+    | "Settings"
+    | "Remote Desktop"
+    | "Development Suite"
+    | "Code Editor"
+    | "File Manager";
+  icon: ReactElement;
+  isLoading: boolean;
+  isHidden: boolean;
+};
+
 export interface IuseCreateRobot {
   robotData: IRobotData;
   setRobotData: React.Dispatch<React.SetStateAction<IRobotData>>;

diff --git a/src/layouts/DashboardLayout.tsx b/src/layouts/DashboardLayout.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/iframe-has-title */
 import { ReactElement } from "react";
 
 interface IDashboardLayout {