Add row context

src/frontend/package.json

@@ -46,12 +46,13 @@
         "@uiw/react-split": "^5.9.3",
         "@vanilla-extract/css": "^1.15.5",
         "axios": "^1.7.5",
-        "clsx": "^2.1.0",
+        "clsx": "^2.1.1",
         "codemirror": ">=6.0.0",
         "dayjs": "^1.11.13",
         "embla-carousel-react": "^8.2.0",
         "fuse.js": "^7.0.0",
         "html5-qrcode": "^2.3.8",
+        "mantine-contextmenu": "^7.11.3",
         "mantine-datatable": "^7.11.3",
         "qrcode": "^1.5.4",
         "react": "^18.3.1",

src/frontend/src/contexts/ThemeContext.tsx

@@ -2,6 +2,7 @@ import { t } from '@lingui/macro';
 import { MantineProvider, createTheme } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
 import { Notifications } from '@mantine/notifications';
+import { ContextMenuProvider } from 'mantine-contextmenu';
 
 import { AboutInvenTreeModal } from '../components/modals/AboutInvenTreeModal';
 import { LicenseModal } from '../components/modals/LicenseModal';
@@ -38,20 +39,22 @@ export function ThemeContext({ children }: { children: JSX.Element }) {
 
   return (
     <MantineProvider theme={myTheme} colorSchemeManager={colorSchema}>
-      <LanguageContext>
-        <ModalsProvider
-          labels={{ confirm: t`Submit`, cancel: t`Cancel` }}
-          modals={{
-            qr: QrCodeModal,
-            info: ServerInfoModal,
-            about: AboutInvenTreeModal,
-            license: LicenseModal
-          }}
-        >
-          <Notifications />
-          {children}
-        </ModalsProvider>
-      </LanguageContext>
+      <ContextMenuProvider>
+        <LanguageContext>
+          <ModalsProvider
+            labels={{ confirm: t`Submit`, cancel: t`Cancel` }}
+            modals={{
+              qr: QrCodeModal,
+              info: ServerInfoModal,
+              about: AboutInvenTreeModal,
+              license: LicenseModal
+            }}
+          >
+            <Notifications />
+            {children}
+          </ModalsProvider>
+        </LanguageContext>
+      </ContextMenuProvider>
     </MantineProvider>
   );
 }

src/frontend/src/main.tsx

@@ -5,6 +5,7 @@ import '@mantine/dates/styles.css';
 import '@mantine/notifications/styles.css';
 import '@mantine/spotlight/styles.css';
 import * as Sentry from '@sentry/react';
+import 'mantine-contextmenu/styles.layer.css';
 import 'mantine-datatable/styles.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';

src/frontend/src/tables/InvenTreeTable.tsx

@@ -12,11 +12,18 @@ import {
 } from '@mantine/core';
 import {
   IconBarcode,
+  IconEdit,
+  IconEye,
   IconFilter,
   IconRefresh,
   IconTrash
 } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
+import {
+  ContextMenuContent,
+  ContextMenuItemOptions,
+  useContextMenu
+} from 'mantine-contextmenu';
 import {
   DataTable,
   DataTableCellClickHandler,
@@ -112,6 +119,7 @@ export type InvenTreeTableProps<T = any> = {
   modelType?: ModelType;
   rowStyle?: (record: T, index: number) => any;
   modelField?: string;
+  onRowContextMenu?: (record: T, event: any) => void;
 };
 
 /**
@@ -158,6 +166,7 @@ export function InvenTreeTable<T = any>({
   const [fieldNames, setFieldNames] = useState<Record<string, string>>({});
 
   const navigate = useNavigate();
+  const { showContextMenu } = useContextMenu();
 
   // Construct table filters - note that we can introspect filter labels from column names
   const filters: TableFilter[] = useMemo(() => {
@@ -587,6 +596,28 @@ export function InvenTreeTable<T = any>({
     [props.onRowClick, props.onCellClick]
   );
 
+  // Callback when a row is right-clicked
+  const handleRowContextMenu = ({
+    record,
+    event
+  }: {
+    record: any;
+    event: any;
+  }) => {
+    if (props.onRowContextMenu) {
+      return props.onRowContextMenu(record, event);
+    } else if (props.rowActions) {
+      const rowActions = props.rowActions(record);
+      return showContextMenu(
+        rowActions.map((action) => ({
+          key: action.title ?? '',
+          icon: action.icon,
+          onClick: action.onClick
+        }))
+      )(event);
+    }
+  };
+
   // pagination refresth table if pageSize changes
   function updatePageSize(newData: number) {
     tableState.setPageSize(newData);
@@ -741,6 +772,7 @@ export function InvenTreeTable<T = any>({
               }}
               recordsPerPageOptions={PAGE_SIZES}
               onRecordsPerPageChange={updatePageSize}
+              onRowContextMenu={handleRowContextMenu}
             />
           </Box>
         </Stack>

src/frontend/yarn.lock

@@ -3260,7 +3260,7 @@ clsx@^1.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
-clsx@^2.0.0, clsx@^2.1.0, clsx@^2.1.1:
+clsx@^2.0.0, clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
@@ -4533,6 +4533,11 @@ make-dir@^4.0.0:
   dependencies:
     semver "^7.5.3"
 
+mantine-contextmenu@^7.11.3:
+  version "7.11.3"
+  resolved "https://registry.yarnpkg.com/mantine-contextmenu/-/mantine-contextmenu-7.11.3.tgz#ce2243dd5069aa3acc6aae4fb8e169e90b3af5bf"
+  integrity sha512-E2YfK5AggpxBCAMRn6T/XDeq4fArJqNWmT78azrJSvB1ox/8v+oBznOxh4A2bgHJabp908M5puw+pnjGZ/AC5A==
+
 mantine-datatable@^7.11.3:
   version "7.11.3"
   resolved "https://registry.yarnpkg.com/mantine-datatable/-/mantine-datatable-7.11.3.tgz#e36a52db3b91420ab3c7fab75abf028c83b782aa"