feat: dropdown for edit, delete, duplicate robot

src/components/molecules/RecordingsTable.tsx

@@ -9,8 +9,8 @@ import TablePagination from '@mui/material/TablePagination';
 import TableRow from '@mui/material/TableRow';
 import { useEffect } from "react";
 import { WorkflowFile } from "maxun-core";
-import { IconButton, Button, Box, Typography, TextField } from "@mui/material";
-import { Schedule, DeleteForever, Edit, PlayCircle, Settings, Power } from "@mui/icons-material";
+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 LinkIcon from '@mui/icons-material/Link';
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { deleteRecordingFromStorage, getStoredRecordings } from "../../api/storage";
@@ -18,7 +18,7 @@ import { Add } from "@mui/icons-material";
 import { useNavigate } from 'react-router-dom';
 import { stopRecording } from "../../api/recording";
 import { GenericModal } from '../atoms/GenericModal';
-
+import { Menu as MenuIcon } from '@mui/icons-material';
 
 /** TODO:
  *  1. allow editing existing robot after persisting browser steps
@@ -26,7 +26,7 @@ import { GenericModal } from '../atoms/GenericModal';
 */
 
 interface Column {
-  id: 'interpret' | 'name' | 'delete' | 'schedule' | 'integrate' | 'settings' | 'options';
+  id: 'interpret' | 'name' | 'options' | 'schedule' | 'integrate' | 'settings';
   label: string;
   minWidth?: number;
   align?: 'right';
@@ -68,11 +68,6 @@ const columns: readonly Column[] = [
     label: 'Settings',
     minWidth: 80,
   },
-  {
-    id: 'delete',
-    label: 'Delete',
-    minWidth: 80,
-  },
   {
     id: 'options',
     label: 'Options',
@@ -253,22 +248,27 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
                                 <IntegrateButton handleIntegrate={() => handleIntegrateRecording(row.id, row.name, row.params || [])} />
                               </TableCell>
                             );
-                          case 'delete':
-                            return (
-                              <TableCell key={column.id} align={column.align}>
-                                <IconButton aria-label="add" size="small" onClick={() => {
-                                  deleteRecordingFromStorage(row.id).then((result: boolean) => {
-                                    if (result) {
-                                      setRows([]);
-                                      notify('success', 'Recording deleted successfully');
-                                      fetchRecordings();
-                                    }
-                                  })
-                                }}>
-                                  <DeleteForever />
-                                </IconButton>
-                              </TableCell>
-                            );
+                            case 'options':
+                              return (
+                                <TableCell key={column.id} align={column.align}>
+                                  <OptionsButton
+                                    handleEdit={() => handleEditRecording(row.id, row.name)}
+                                    handleDelete={() => {
+                                      deleteRecordingFromStorage(row.id).then((result: boolean) => {
+                                        if (result) {
+                                          setRows([]);
+                                          notify('success', 'Recording deleted successfully');
+                                          fetchRecordings();
+                                        }
+                                      })
+                                    }}
+                                    handleDuplicate={() => {
+                                      notify('info', 'Duplicating recording...');
+                                      // Implement duplication logic here
+                                    }}
+                                  />
+                                </TableCell>
+                              );
                           case 'settings':
                             return (
                               <TableCell key={column.id} align={column.align}>
@@ -382,6 +382,60 @@ const SettingsButton = ({ handleSettings }: SettingsButtonProps) => {
   )
 }
 
+interface OptionsButtonProps {
+  handleEdit: () => void;
+  handleDelete: () => void;
+  handleDuplicate: () => void;
+}
+
+const OptionsButton = ({ handleEdit, handleDelete, handleDuplicate }: OptionsButtonProps) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <IconButton
+        aria-label="options"
+        size="small"
+        onClick={handleClick}
+      >
+        <MenuIcon />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={() => { handleEdit(); handleClose(); }}>
+          <ListItemIcon>
+            <Edit fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Edit</ListItemText>
+        </MenuItem>
+        <MenuItem onClick={() => { handleDelete(); handleClose(); }}>
+          <ListItemIcon>
+            <DeleteForever fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Delete</ListItemText>
+        </MenuItem>
+        <MenuItem onClick={() => { handleDuplicate(); handleClose(); }}>
+          <ListItemIcon>
+            <ContentCopy fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Duplicate</ListItemText>
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
+
 const modalStyle = {
   top: '50%',
   left: '50%',