Merge pull request #197 from getmaxun/proxy-docs

feat: ui enhancements

src/components/molecules/IntegrationSettings.tsx

@@ -177,12 +177,12 @@ export const IntegrationSettingsModal = ({
       >
         <Typography variant="h6">
           Integrate with Google Sheet{" "}
-          <Chip label="beta" color="primary" variant="outlined" />
+          {/* <Chip label="beta" color="primary" variant="outlined" /> */}
         </Typography>
 
         {recording && recording.google_sheet_id ? (
           <>
-            <Alert severity="info">
+            <Alert severity="info" sx={{ marginTop: '10px', border: '1px solid #ff00c3' }}>
               <AlertTitle>Google Sheet Integrated Successfully.</AlertTitle>
               Every time this robot creates a successful run, its captured data
               is appended to your {recording.google_sheet_name} Google Sheet.

src/components/molecules/NavBar.tsx

@@ -3,7 +3,7 @@ import axios from 'axios';
 import styled from "styled-components";
 import { stopRecording } from "../../api/recording";
 import { useGlobalInfoStore } from "../../context/globalInfo";
-import { IconButton, Menu, MenuItem, Typography, Avatar } from "@mui/material";
+import { IconButton, Menu, MenuItem, Typography, Avatar, Chip, } from "@mui/material";
 import { AccountCircle, Logout, Clear } from "@mui/icons-material";
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../context/auth';
@@ -58,6 +58,7 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
       }}>
         <img src={MaxunLogo} width={45} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 15px' }} />
         <div style={{ padding: '11px' }}><ProjectName>Maxun</ProjectName></div>
+        <Chip label="beta" color="primary" variant="outlined" sx={{ marginTop: '10px' }} />
       </div>
       {
         user ? (

src/components/molecules/RecordingsTable.tsx

@@ -9,13 +9,9 @@ import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
 import { useEffect } from "react";
 import { WorkflowFile } from "maxun-core";
-
-
 import SearchIcon from '@mui/icons-material/Search';
 import { IconButton, Button, Box, Typography, TextField, MenuItem, Menu, ListItemIcon, ListItemText } from "@mui/material";
-import { Schedule, DeleteForever, Edit, PlayCircle, Settings, Power, ContentCopy, } from "@mui/icons-material";
+import { Schedule, DeleteForever, Edit, PlayCircle, Settings, Power, ContentCopy, MoreHoriz } from "@mui/icons-material";
-
-import LinkIcon from '@mui/icons-material/Link';
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { checkRunsForRecording, deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage";
 import { Add } from "@mui/icons-material";
@@ -23,14 +19,8 @@ import { useNavigate } from 'react-router-dom';
 import { stopRecording } from "../../api/recording";
 import { GenericModal } from '../atoms/GenericModal';
 
-import axios from 'axios';
-import { apiUrl } from '../../apiConfig';
-import { Menu as MenuIcon } from '@mui/icons-material';
-
-
 /** TODO:
  *  1. allow editing existing robot after persisting browser steps
- *  2. show robot settings: id, url, etc. 
 */
 
 interface Column {
@@ -161,7 +151,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
     row.name.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
-   
+
 
 
   return (
@@ -254,33 +244,33 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
                                 <IntegrateButton handleIntegrate={() => handleIntegrateRecording(row.id, row.name, row.params || [])} />
                               </TableCell>
                             );
-                            case 'options':
+                          case 'options':
-                              return (
+                            return (
-                                <TableCell key={column.id} align={column.align}>
+                              <TableCell key={column.id} align={column.align}>
-                                  <OptionsButton
+                                <OptionsButton
-                                    handleEdit={() => handleEditRobot(row.id, row.name, row.params || [])}
+                                  handleEdit={() => handleEditRobot(row.id, row.name, row.params || [])}
-                                    handleDelete={() => {
+                                  handleDelete={() => {
 
-                                      checkRunsForRecording(row.id).then((result: boolean) => {
+                                    checkRunsForRecording(row.id).then((result: boolean) => {
-                                        if (result) {
+                                      if (result) {
-                                          notify('warning', 'Cannot delete recording as it has active runs');
+                                        notify('warning', 'Cannot delete recording as it has active runs');
-                                        }
+                                      }
-                                      })
+                                    })
 
-                                      deleteRecordingFromStorage(row.id).then((result: boolean) => {
+                                    deleteRecordingFromStorage(row.id).then((result: boolean) => {
-                                        if (result) {
+                                      if (result) {
-                                          setRows([]);
+                                        setRows([]);
-                                          notify('success', 'Recording deleted successfully');
+                                        notify('success', 'Recording deleted successfully');
-                                          fetchRecordings();
+                                        fetchRecordings();
-                                        }
+                                      }
-                                      })
+                                    })
-                                    }}
+                                  }}
-                                    handleDuplicate={() => {
+                                  handleDuplicate={() => {
-                                      handleDuplicateRobot(row.id, row.name, row.params || []);
+                                    handleDuplicateRobot(row.id, row.name, row.params || []);
-                                    }}
+                                  }}
-                                  />
+                                />
-                                </TableCell>
+                              </TableCell>
-                              );
+                            );
                           case 'settings':
                             return (
                               <TableCell key={column.id} align={column.align}>
@@ -417,7 +407,7 @@ const OptionsButton = ({ handleEdit, handleDelete, handleDuplicate }: OptionsBut
         size="small"
         onClick={handleClick}
       >
-        <MenuIcon />
+        <MoreHoriz />
       </IconButton>
       <Menu
         anchorEl={anchorEl}

src/components/molecules/RobotEdit.tsx

@@ -58,7 +58,6 @@ interface RobotSettingsProps {
 }
 
 export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
-    console.log("robot edit");
     const [robot, setRobot] = useState<RobotSettings | null>(null);
     const { recordingId, notify } = useGlobalInfoStore();