fix issue requested in pr

src/components/Table/ContextMenu/MenuContent.tsx

@@ -1,11 +1,12 @@
-import { Menu } from "@mui/material";
-import MenuRow, { IMenuRow } from "./MenuRow";
+import { Menu, MenuList } from "@mui/material";
+import { default as MenuItem } from "./MenuItem";
+import { IContextMenuItem } from "./MenuItem";
 
 interface IMenuContents {
   anchorEl: HTMLElement;
   open: boolean;
   handleClose: () => void;
-  items: IMenuRow[];
+  items: IContextMenuItem[];
 }
 
 export function MenuContents({
@@ -30,13 +31,21 @@ export function MenuContents({
         vertical: "top",
         horizontal: "left",
       }}
-      sx={{ "& .MuiMenu-paper": { backgroundColor: "background.default" } }}
+      sx={{
+        "& .MuiMenu-paper": {
+          backgroundColor: "background.default",
+          width: 200,
+          maxWidth: "100%",
+        },
+      }}
       MenuListProps={{ disablePadding: true }}
       onContextMenu={handleContext}
     >
-      {items.map((item, indx: number) => (
-        <MenuRow key={indx} {...item} />
-      ))}
+      <MenuList dense>
+        {items.map((item, indx: number) => (
+          <MenuItem key={indx} {...item} />
+        ))}
+      </MenuList>
     </Menu>
   );
 }

src/components/Table/ContextMenu/MenuItem.tsx

@@ -0,0 +1,34 @@
+import {
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  Typography,
+} from "@mui/material";
+
+export interface IContextMenuItem {
+  onClick: () => void;
+  icon: JSX.Element;
+  label: string;
+  disabled?: boolean;
+  hotkeyLabel?: string;
+}
+
+export default function ContextMenuItem({
+  onClick,
+  icon,
+  label,
+  disabled,
+  hotkeyLabel,
+}: IContextMenuItem) {
+  return (
+    <MenuItem disabled={disabled} onClick={onClick}>
+      <ListItemIcon>{icon} </ListItemIcon>
+      <ListItemText> {label} </ListItemText>
+      {hotkeyLabel && (
+        <Typography variant="body2" color="text.secondary">
+          {hotkeyLabel}
+        </Typography>
+      )}
+    </MenuItem>
+  );
+}

src/components/Table/ContextMenu/MenuRow.tsx

@@ -1,17 +0,0 @@
-import { ListItemIcon, ListItemText, MenuItem } from "@mui/material";
-
-export interface IMenuRow {
-  onClick: () => void;
-  icon: JSX.Element;
-  label: string;
-  disabled?: boolean;
-}
-
-export default function MenuRow({ onClick, icon, label, disabled }: IMenuRow) {
-  return (
-    <MenuItem disabled={disabled} onClick={onClick}>
-      <ListItemIcon>{icon} </ListItemIcon>
-      <ListItemText> {label} </ListItemText>
-    </MenuItem>
-  );
-}

src/components/Table/index.tsx

@@ -265,7 +265,6 @@ export default function Table() {
                 }
               }}
               onSelectedCellChange={({ rowIdx, idx }) => {
-                console.log("firing");
                 contextMenuRef?.current?.setSelectedCell({
                   rowIndex: rowIdx,
                   colIndex: idx,

src/components/fields/_BasicCell/BasicCellContextMenuActions.tsx

@@ -3,10 +3,18 @@ import CopyCells from "@src/assets/icons/CopyCells";
 import Cut from "@src/assets/icons/Cut";
 import Paste from "@src/assets/icons/Paste";
 import { useProjectContext } from "@src/contexts/ProjectContext";
+import { useSnackbar } from "notistack";
 
-export default function BasicContextMenuActions() {
+export interface IContextMenuActions {
+  label: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+}
+
+export default function BasicContextMenuActions(): IContextMenuActions[] {
   const { contextMenuRef, tableState, deleteCell, updateCell } =
     useProjectContext();
+  const { enqueueSnackbar } = useSnackbar();
   const columns = tableState?.columns;
   const rows = tableState?.rows;
   const selectedRowIndex = contextMenuRef?.current?.selectedCell
@@ -22,8 +30,10 @@ export default function BasicContextMenuActions() {
 
   const handleCopy = () => {
     const cell = selectedRow?.[selectedCol.key];
-    const onFail = () => console.log("Fail to copy");
-    const onSuccess = () => console.log("Save to clipboard successful");
+    const onFail = () =>
+      enqueueSnackbar("Failed to copy", { variant: "error" });
+    const onSuccess = () =>
+      enqueueSnackbar("Copied to clipboard", { variant: "success" });
     const copy = navigator.clipboard.writeText(JSON.stringify(cell));
     copy.then(onSuccess, onFail);
 
@@ -40,16 +50,13 @@ export default function BasicContextMenuActions() {
   };
 
   const handlePaste = () => {
-    console.log("home", rows);
     const paste = navigator.clipboard.readText();
     paste.then(async (clipText) => {
       try {
         const paste = await JSON.parse(clipText);
         updateCell?.(selectedRow?.ref, selectedCol.key, paste);
       } catch (error) {
-        //TODO check the coding style guide about error message
-        //Add breadcrumb handler her
-        console.log(error);
+        enqueueSnackbar(`${error}`, { variant: "error" });
       }
     });
 
@@ -61,10 +68,11 @@ export default function BasicContextMenuActions() {
   //     return typeof cell === "undefined" ? true : false;
   // };
 
-  const cellMenuAction = [
+  const contextMenuActions = [
     { label: "Cut", icon: <Cut />, onClick: handleCut },
     { label: "Copy", icon: <CopyCells />, onClick: handleCopy },
     { label: "Paste", icon: <Paste />, onClick: handlePaste },
   ];
-  return cellMenuAction;
+
+  return contextMenuActions;
 }

src/components/fields/types.ts

@@ -3,6 +3,7 @@ import { FieldType } from "@src/constants/fields";
 import { FormatterProps, EditorProps } from "react-data-grid";
 import { Control, UseFormReturn } from "react-hook-form";
 import { PopoverProps } from "@mui/material";
+import { IContextMenuActions } from "./_BasicCell/BasicCellContextMenuActions";
 
 export { FieldType };
 
@@ -17,7 +18,7 @@ export interface IFieldConfig {
   icon?: React.ReactNode;
   description?: string;
   setupGuideLink?: string;
-  contextMenuActions?: () => void;
+  contextMenuActions?: () => IContextMenuActions[];
   TableCell: React.ComponentType<FormatterProps<any>>;
   TableEditor: React.ComponentType<EditorProps<any, any>>;
   SideDrawerField: React.ComponentType<ISideDrawerFieldProps>;