feat: add page components for config actions

src/components/robot/Recordings.tsx

@@ -2,11 +2,14 @@ import React, { useEffect, useState } from "react";
 import { RecordingsTable } from "./RecordingsTable";
 import { Grid } from "@mui/material";
 import { RunSettings, RunSettingsModal } from "../run/RunSettings";
-import { ScheduleSettings, ScheduleSettingsModal } from "./ScheduleSettings";
-import { IntegrationSettingsModal } from "../integration/IntegrationSettings";
-import { RobotSettingsModal } from "./RobotSettings";
-import { RobotEditModal } from "./RobotEdit";
-import { RobotDuplicationModal } from "./RobotDuplicate";
+import {
+  ScheduleSettings,
+  ScheduleSettingsPage,
+} from "./pages/ScheduleSettingsPage";
+import { RobotIntegrationPage } from "./pages/RobotIntegrationPage";
+import { RobotSettingsPage } from "./pages/RobotSettingsPage";
+import { RobotEditPage } from "./pages/RobotEditPage";
+import { RobotDuplicatePage } from "./pages/RobotDuplicatePage";
 import { useNavigate, useLocation, useParams } from "react-router-dom";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { useTranslation } from "react-i18next";
@@ -26,12 +29,16 @@ export const Recordings = ({
 }: RecordingsProps) => {
   const navigate = useNavigate();
   const location = useLocation();
-  const { selectedRecordingId } = useParams();
   const [params, setParams] = useState<string[]>([]);
   const { notify } = useGlobalInfoStore();
   const { t } = useTranslation();
 
-  const handleNavigate = (path: string, id: string, name: string, params: string[]) => {
+  const handleNavigate = (
+    path: string,
+    id: string,
+    name: string,
+    params: string[]
+  ) => {
     setParams(params);
     setRecordingInfo(id, name);
     navigate(path);
@@ -47,35 +54,36 @@ export const Recordings = ({
     // Helper function to get and clear a cookie
     const getAndClearCookie = (name: string) => {
       const value = document.cookie
-        .split('; ')
-        .find(row => row.startsWith(`${name}=`))
-        ?.split('=')[1];
-      
+        .split("; ")
+        .find((row) => row.startsWith(`${name}=`))
+        ?.split("=")[1];
+
       if (value) {
         document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
       }
-      
+
       return value;
     };
 
-    const authStatus = getAndClearCookie('robot_auth_status');
-    const airtableAuthStatus = getAndClearCookie('airtable_auth_status');
-    const robotId = getAndClearCookie('robot_auth_robotId');
+    const authStatus = getAndClearCookie("robot_auth_status");
+    const airtableAuthStatus = getAndClearCookie("airtable_auth_status");
+    const robotId = getAndClearCookie("robot_auth_robotId");
 
-    if (airtableAuthStatus === 'success' && robotId) {
+    if (airtableAuthStatus === "success" && robotId) {
       console.log("Airtable Auth Status:", airtableAuthStatus);
-      notify(airtableAuthStatus, t("recordingtable.notifications.auth_success"));
+      notify(
+        airtableAuthStatus,
+        t("recordingtable.notifications.auth_success")
+      );
       handleNavigate(`/robots/${robotId}/integrate/airtable`, robotId, "", []);
-    } 
-    else if (authStatus === 'success' && robotId) {
+    } else if (authStatus === "success" && robotId) {
       console.log("Google Auth Status:", authStatus);
       notify(authStatus, t("recordingtable.notifications.auth_success"));
       handleNavigate(`/robots/${robotId}/integrate/google`, robotId, "", []);
     }
   }, []);
 
-  // Determine which modal to open based on the current route
-  const getCurrentModal = () => {
+  const getCurrentPageComponent = () => {
     const currentPath = location.pathname;
 
     if (currentPath.endsWith("/run")) {
@@ -89,79 +97,36 @@ export const Recordings = ({
         />
       );
     } else if (currentPath.endsWith("/schedule")) {
+      return <ScheduleSettingsPage handleStart={handleScheduleRecording} />;
+    } else if (currentPath.includes("/integrate")) {
       return (
-        <ScheduleSettingsModal
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={handleScheduleRecording}
-        />
-      );
-    } else if (currentPath.endsWith("/integrate/google")) {
-      return (
-        <IntegrationSettingsModal
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={() => {}}
-          preSelectedIntegrationType="googleSheets"
-        />
-      );
-    } else if (currentPath.endsWith("/integrate/airtable")) {
-      return (
-        <IntegrationSettingsModal
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={() => {}}
-          preSelectedIntegrationType="airtable"
-        />
-      );
-    } else if (currentPath.endsWith("/integrate/webhook")) {
-      return (
-        <IntegrationSettingsModal
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={() => {}}
-          preSelectedIntegrationType="webhook"
-        />
-      );
-    } else if (currentPath.endsWith("/integrate")) {
-      return (
-        <IntegrationSettingsModal
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={() => {}}
-        />
+        <RobotIntegrationPage handleStart={() => {}} robotPath={"robots"} />
       );
     } else if (currentPath.endsWith("/settings")) {
-      return (
-        <RobotSettingsModal
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={() => {}}
-        />
-      );
+      return <RobotSettingsPage handleStart={() => {}} />;
     } else if (currentPath.endsWith("/edit")) {
-      return (
-        <RobotEditModal
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={() => {}}
-        />
-      );
+      return <RobotEditPage handleStart={() => {}} />;
     } else if (currentPath.endsWith("/duplicate")) {
-      return (
-        <RobotDuplicationModal
-          isOpen={true}
-          handleClose={handleClose}
-          handleStart={() => {}}
-        />
-      );
+      return <RobotDuplicatePage handleStart={() => {}} />;
     }
     return null;
   };
 
+  const currentPath = location.pathname;
+  const isConfigPage =
+    currentPath.includes("/schedule") ||
+    currentPath.includes("/integrate") ||
+    currentPath.includes("/settings") ||
+    currentPath.includes("/edit") ||
+    currentPath.includes("/duplicate") ||
+    currentPath.includes("/run");
+
+  if (isConfigPage) {
+    return getCurrentPageComponent();
+  }
+
   return (
     <React.Fragment>
-      {getCurrentModal()}
       <Grid container direction="column" sx={{ padding: "30px" }}>
         <Grid item xs>
           <RecordingsTable