Merge pull request #754 from getmaxun/new-ui-fix

feat: pages ui revamp

src/components/robot/pages/RobotConfigPage.tsx

@@ -9,6 +9,7 @@ import {
 } from '@mui/material';
 import { ArrowBack } from '@mui/icons-material';
 import { useNavigate, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
 interface RobotConfigPageProps {
   title: string;
@@ -23,6 +24,7 @@ interface RobotConfigPageProps {
   icon?: React.ReactNode;
   onBackToSelection?: () => void;
   backToSelectionText?: string;
+  onArrowBack?: () => void; // Optional prop for custom back action
 }
 
 export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
@@ -30,50 +32,72 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
   children,
   onSave,
   onCancel,
-  saveButtonText = "Save",
+  saveButtonText,
-  cancelButtonText = "Cancel",
+  cancelButtonText,
   showSaveButton = true,
   showCancelButton = true,
   isLoading = false,
   icon,
   onBackToSelection,
-  backToSelectionText = "← Back"
+  backToSelectionText,
+  onArrowBack,
 }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
   const theme = useTheme();
+  const { t } = useTranslation();
 
   const handleBack = () => {
     if (onCancel) {
       onCancel();
+    } else {
+      // Try to determine the correct path based on current URL
+      const currentPath = location.pathname;
+      const basePath = currentPath.includes('/prebuilt-robots') ? '/prebuilt-robots' : '/robots';
+      navigate(basePath);
     }
   };
 
   return (
     <Box sx={{
       maxWidth: 1000,
-      margin: 'auto', 
+      margin: '50px auto',
-      px: 4,
+      maxHeight: '100vh',
-      py: 3,
-      minHeight: '80vh',
       display: 'flex',
       flexDirection: 'column',
       width: '1000px',
+      height: '100%',
+      overflowY: 'auto', // Allow scrolling if content exceeds height
     }}>
+      {/* Header Section - Fixed Position */}
       <Box sx={{
         display: 'flex',
         alignItems: 'center',
-        minHeight: '64px',
+        maxHeight: '64px',
         mb: 2,
         flexShrink: 0
       }}>
         <IconButton
-          onClick={handleBack}
+          onClick={onArrowBack ? onArrowBack : handleBack}
           sx={{
-            mr: 2,
+            ml: -1,
+            mr: 1,
             color: theme.palette.text.primary,
+            backgroundColor: 'transparent !important',
             '&:hover': {
-              bgcolor: theme.palette.action.hover
+              backgroundColor: 'transparent !important',
-            }
+            },
+            '&:active': {
+              backgroundColor: 'transparent !important',
+            },
+            '&:focus': {
+              backgroundColor: 'transparent !important',
+            },
+            '&:focus-visible': {
+              backgroundColor: 'transparent !important',
+            },
           }}
+          disableRipple
         >
           <ArrowBack />
         </IconButton>
@@ -95,29 +119,32 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
       </Box>
       <Divider sx={{ mb: 4, flexShrink: 0 }} />
 
+      {/* Content Section */}
       <Box sx={{
         flex: 1,
         display: 'flex',
         flexDirection: 'column',
-        minHeight: 0
+        minHeight: 0,
+        mt: 2,
+        mb: 3,
       }}>
         {children}
       </Box>
 
+      {/* Action Buttons */}
       {(showSaveButton || showCancelButton || onBackToSelection) && (
         <Box
           sx={{
             display: 'flex',
-            justifyContent: onBackToSelection ? 'space-between' : 'flex-end',
+            justifyContent: onBackToSelection ? 'space-between' : 'flex-start',
             gap: 2,
-            pt: 3,
+            pt: 3, // Reduce padding top to minimize space above
-            mt: 2,
             borderTop: `1px solid ${theme.palette.divider}`,
             flexShrink: 0,
             width: '100%',
-            px: 3
           }}
         >
+          {/* Left side - Back to Selection button */}
           {onBackToSelection && (
             <Button
               variant="outlined"
@@ -128,10 +155,11 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
                 borderColor: '#ff00c3 !important',
                 backgroundColor: 'white !important',
               }} >
-              {backToSelectionText}
+              {backToSelectionText || t("buttons.back_arrow")}
             </Button>
           )}
 
+          {/* Right side - Save/Cancel buttons */}
           <Box sx={{ display: 'flex', gap: 2 }}>
             {showCancelButton && (
               <Button
@@ -143,7 +171,7 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
                   borderColor: '#ff00c3 !important',
                   backgroundColor: 'white !important',
                 }} >
-              {cancelButtonText}
+                {cancelButtonText || t("buttons.cancel")}
               </Button>
             )}
             {showSaveButton && onSave && (
@@ -163,7 +191,7 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
                   boxShadow: 'none',
                 }}
               >
-              {isLoading ? 'Saving...' : saveButtonText}
+                {isLoading ? t("buttons.saving") : (saveButtonText || t("buttons.save"))}
               </Button>
             )}
           </Box>

src/components/robot/pages/RobotDuplicatePage.tsx

@@ -19,10 +19,17 @@ import { useNavigate, useLocation } from "react-router-dom";
 interface RobotMeta {
   name: string;
   id: string;
+  prebuiltId?: string;
   createdAt: string;
   pairs: number;
   updatedAt: string;
   params: any[];
+  type?: string;
+  description?: string;
+  usedByUsers?: number[];
+  subscriptionLevel?: number;
+  access?: string;
+  sample?: any[];
   url?: string;
 }
 
@@ -132,7 +139,10 @@ export const RobotDuplicatePage = ({ handleStart }: RobotSettingsProps) => {
           t("robot_duplication.notifications.duplicate_success")
         );
         handleStart(robot);
-        navigate("/robots");
+        const basePath = location.pathname.includes("/prebuilt-robots")
+          ? "/prebuilt-robots"
+          : "/robots";
+        navigate(basePath);
       } else {
         notify("error", t("robot_duplication.notifications.duplicate_error"));
       }
@@ -145,7 +155,10 @@ export const RobotDuplicatePage = ({ handleStart }: RobotSettingsProps) => {
   };
 
   const handleCancel = () => {
-    navigate("/robots");
+    const basePath = location.pathname.includes("/prebuilt-robots")
+      ? "/prebuilt-robots"
+      : "/robots";
+    navigate(basePath);
   };
 
   return (
@@ -156,6 +169,7 @@ export const RobotDuplicatePage = ({ handleStart }: RobotSettingsProps) => {
       saveButtonText={t("robot_duplication.buttons.duplicate")}
       cancelButtonText={t("robot_duplication.buttons.cancel")}
       isLoading={isLoading}
+      showCancelButton={false}
     >
       <>
         <Box style={{ display: "flex", flexDirection: "column" }}>

src/components/robot/pages/RobotEditPage.tsx

@@ -18,10 +18,17 @@ import { useNavigate, useLocation } from "react-router-dom";
 interface RobotMeta {
   name: string;
   id: string;
+  prebuiltId?: string;
   createdAt: string;
   pairs: number;
   updatedAt: string;
   params: any[];
+  type?: string;
+  description?: string;
+  usedByUsers?: number[];
+  subscriptionLevel?: number;
+  access?: string;
+  sample?: any[];
   url?: string;
 }
 
@@ -173,6 +180,7 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
           action.args &&
           action.args.length > 0
         ) {
+          // Check if first argument has a limit property
           const arg = action.args[0];
           if (arg && typeof arg === "object" && "limit" in arg) {
             limits.push({
@@ -214,6 +222,7 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
 
         const selector = action.args[0];
 
+        // Handle full word type actions first
         if (
           action.action === "type" &&
           action.args?.length >= 2 &&
@@ -230,6 +239,7 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
           continue;
         }
 
+        // Handle character-by-character sequences (both type and press)
         if (
           (action.action === "type" || action.action === "press") &&
           action.args?.length >= 2 &&
@@ -582,7 +592,8 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
         setRerenderRobots(true);
         notify("success", t("robot_edit.notifications.update_success"));
         handleStart(robot);
-        navigate("/robots");
+        const basePath = "/robots";
+        navigate(basePath);
       } else {
         notify("error", t("robot_edit.notifications.update_failed"));
       }
@@ -595,7 +606,8 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
   };
 
   const handleCancel = () => {
-    navigate("/robots");
+    const basePath = "/robots";
+    navigate(basePath);
   };
 
   const lastPair =
@@ -610,6 +622,7 @@ export const RobotEditPage = ({ handleStart }: RobotSettingsProps) => {
       onCancel={handleCancel}
       saveButtonText={t("robot_edit.save")}
       cancelButtonText={t("robot_edit.cancel")}
+      showCancelButton={false}
       isLoading={isLoading}
     >
       <>

src/components/robot/pages/RobotIntegrationPage.tsx

@@ -612,7 +612,7 @@ export const RobotIntegrationPage = ({
       case "webhook":
         return "Webhook Integration";
       default:
-        return "Integration Settings";
+        return "Integration";
     }
   };
 
@@ -677,13 +677,58 @@ export const RobotIntegrationPage = ({
     else return date.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
   };
 
+  const handleBack = () => {
+    if (!recordingId) {
+      console.error("Cannot navigate: recordingId is null");
+      return;
+    }
+
+    setSelectedIntegrationType(null);
+    setSettings({ ...settings, integrationType: "airtable" });
+    const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
+    navigate(`${basePath}/${recordingId}/integrate`);
+  };
+
   // --- MAIN RENDER ---
   if (!selectedIntegrationType && !integrationType) {
     return (
-      <RobotConfigPage title="Integration Settings" onCancel={handleCancel} cancelButtonText={t("robot_edit.cancel")} showSaveButton={false} backToSelectionText={"← " + t("right_panel.buttons.back")} onBackToSelection={() => navigate(`/${robotPath}/${recordingId}/integrate`)}>
+      <RobotConfigPage
-        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", position: "relative", minHeight: "400px" }}>
+        title={getIntegrationTitle()}
-          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", padding: "20px", width: "100%" }}>
+        // onCancel={handleCancel}
-            <div style={{ display: "flex", gap: "20px" }}>
+        cancelButtonText={t("buttons.cancel")}
+        showSaveButton={false}
+        // onBackToSelection={handleBack}
+        onArrowBack={handleBack}
+        showCancelButton={false}
+        backToSelectionText={t("buttons.back_arrow")}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            position: "relative",
+            minHeight: "400px",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-start",
+              width: "100%",
+            }}
+          >
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(4, minmax(160px, 1fr))",
+                gap: "20px",
+                justifyContent: "start",
+                maxWidth: "900px",
+                width: "100%",
+              }}
+            >
               <Button variant="outlined" onClick={() => {
                 if (!recordingId) return;
                 setSelectedIntegrationType("googleSheets");
@@ -725,15 +770,17 @@ export const RobotIntegrationPage = ({
     );
   }
 
-  const handleBack = () => {
-    if (!recordingId) return;
-    setSelectedIntegrationType(null);
-    const basePath = robotPath === "prebuilt-robots" ? "/prebuilt-robots" : "/robots";
-    navigate(`${basePath}/${recordingId}/integrate`);
-  };
-
   return (
-    <RobotConfigPage title={getIntegrationTitle()} onCancel={handleCancel} cancelButtonText={t("robot_edit.cancel")} showSaveButton={false} onBackToSelection={handleBack} backToSelectionText={"← " + t("right_panel.buttons.back")}>
+    <RobotConfigPage
+      title={getIntegrationTitle()}
+      // onCancel={handleCancel}
+      cancelButtonText={t("buttons.cancel")}
+      showSaveButton={false}
+      // onBackToSelection={handleBack}
+      onArrowBack={handleBack}
+      showCancelButton={false}
+      backToSelectionText={t("buttons.back_arrow")}
+    >
       <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", position: "relative", minHeight: "400px" }}>
         <div style={{ width: "100%" }}>
           {(selectedIntegrationType === "googleSheets" || integrationType === "googleSheets") && (

src/components/robot/pages/RobotSettingsPage.tsx

@@ -128,6 +128,7 @@ export const RobotSettingsPage = ({ handleStart }: RobotSettingsProps) => {
       onCancel={handleCancel}
       cancelButtonText={t("robot_settings.buttons.close")}
       showSaveButton={false}
+      showCancelButton={false}
     >
       <>
         <Box style={{ display: "flex", flexDirection: "column" }}>