Add row context (right click) additionally to actions in tables (#8013)

* Add row context

* fix lockfile

* fix type

* fix styling

* formatting fixes

src/frontend/package.json

@@ -54,6 +54,7 @@
         "embla-carousel-react": "^8.3.0",
         "fuse.js": "^7.0.0",
         "html5-qrcode": "^2.3.8",
+        "mantine-contextmenu": "^7.11.3",
         "mantine-datatable": "^7.12.4",
         "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';
@@ -40,20 +41,22 @@ export function ThemeContext({
 
   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.css';
 import 'mantine-datatable/styles.css';
 import React from 'react';
 import ReactDOM from 'react-dom/client';

src/frontend/src/tables/InvenTreeTable.tsx

@@ -1,6 +1,7 @@
 import { t } from '@lingui/macro';
 import { Box, Stack } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
+import { useContextMenu } from 'mantine-contextmenu';
 import {
   DataTable,
   type DataTableCellClickHandler,
@@ -87,6 +88,7 @@ export type InvenTreeTableProps<T = any> = {
   modelType?: ModelType;
   rowStyle?: (record: T, index: number) => any;
   modelField?: string;
+  onRowContextMenu?: (record: T, event: any) => void;
   minHeight?: number;
   noHeader?: boolean;
 };
@@ -137,6 +139,7 @@ export function InvenTreeTable<T extends Record<string, 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(() => {
@@ -565,6 +568,31 @@ export function InvenTreeTable<T extends Record<string, 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 empty = () => {};
+      const items = props.rowActions(record).map((action) => ({
+        key: action.title ?? '',
+        title: action.title ?? '',
+        color: action.color,
+        icon: action.icon,
+        onClick: action.onClick ?? empty,
+        hidden: action.hidden,
+        disabled: action.disabled
+      }));
+      return showContextMenu(items)(event);
+    }
+  };
+
   // pagination refresth table if pageSize changes
   function updatePageSize(newData: number) {
     tableState.setPageSize(newData);
@@ -663,6 +691,7 @@ export function InvenTreeTable<T extends Record<string, any>>({
                   overflow: 'hidden'
                 })
               }}
+              onRowContextMenu={handleRowContextMenu}
               {...optionalParams}
             />
           </Box>

src/frontend/yarn.lock

@@ -3389,6 +3389,11 @@ make-dir@^4.0.0:
   dependencies:
     semver "^7.5.3"
 
+mantine-contextmenu@^7.11.3:
+  version "7.12.2"
+  resolved "https://registry.yarnpkg.com/mantine-contextmenu/-/mantine-contextmenu-7.12.2.tgz#60eb6b1aade5136737e894c1c2f3fa8dad22b1c0"
+  integrity sha512-HD/xrGTGkq51WIVOh97gG1C0Z+PgV6gBPzALrPmv14R4t8iBUEJEY1A9CUvnV/yNjxBas+AA+2flXMAc0wyBxw==
+
 mantine-datatable@^7.12.4:
   version "7.12.4"
   resolved "https://registry.yarnpkg.com/mantine-datatable/-/mantine-datatable-7.12.4.tgz#68e5b0ab4dc7e32b505139bf2b4d05fbb1922c0f"