Launch preview drawer directly from tables

src/frontend/src/states/PreviewDrawerState.tsx

@@ -4,9 +4,13 @@ import { create } from 'zustand';
 interface PreviewDrawerStateProps {
   isOpen: boolean;
   modelType?: ModelType;
-  id?: number;
+  id?: number | string;
   instance?: any;
-  openPreview: (modelType: ModelType, id: number, instance?: any) => void;
+  openPreview: (
+    modelType: ModelType,
+    id: number | string,
+    instance?: any
+  ) => void;
   closePreview: () => void;
 }
 
@@ -17,7 +21,11 @@ export const usePreviewDrawerState = create<PreviewDrawerStateProps>()(
     id: undefined,
     instance: undefined,
 
-    openPreview: (modelType: ModelType, id: number, instance?: any) => {
+    openPreview: (
+      modelType: ModelType,
+      id: number | string,
+      instance?: any
+    ) => {
       set({ modelType, id, instance, isOpen: true });
     },
 

src/frontend/src/tables/InvenTreeTable.tsx

@@ -5,7 +5,7 @@ import { ModelInformationDict } from '@lib/enums/ModelInformation';
 import { resolveItem } from '@lib/functions/Conversion';
 import { cancelEvent } from '@lib/functions/Events';
 import { mapFields } from '@lib/functions/Forms';
-import { getDetailUrl } from '@lib/functions/Navigation';
+import { eventModified, getDetailUrl } from '@lib/functions/Navigation';
 import { navigateToLink } from '@lib/functions/Navigation';
 import { useStoredTableState } from '@lib/states/StoredTableState';
 import type { TableFilter } from '@lib/types/Filters';
@@ -37,6 +37,7 @@ import { useApi } from '../contexts/ApiContext';
 import { extractAvailableFields } from '../functions/forms';
 import { showApiErrorMessage } from '../functions/notifications';
 import { useLocalState } from '../states/LocalState';
+import { usePreviewDrawerState } from '../states/PreviewDrawerState';
 import { useUserSettingsState } from '../states/SettingsStates';
 import { ColumnFilterPopover } from './FilterSelectDrawer';
 import InvenTreeTableHeader from './InvenTreeTableHeader';
@@ -700,6 +701,18 @@ export function InvenTreeTableInternal<T extends Record<string, any>>({
     tableState.setRecords(tableData ?? apiData ?? []);
   }, [tableData, apiData]);
 
+  const previewDrawer = usePreviewDrawerState();
+
+  // Callback to display "preview" view for a row (if available)
+  const showRowPreview = useCallback(
+    (pk: string | number) => {
+      if (tableProps.modelType && pk) {
+        previewDrawer.openPreview(tableProps.modelType, Number(pk));
+      }
+    },
+    [tableProps.modelType]
+  );
+
   // Callback when a cell is clicked
   const handleCellClick = useCallback(
     ({
@@ -732,7 +745,12 @@ export function InvenTreeTableInternal<T extends Record<string, any>>({
           cancelEvent(event);
           // If a model type is provided, navigate to the detail view for that model
           const url = getDetailUrl(tableProps.modelType, pk);
-          navigateToLink(url, navigate, event);
+
+          if (eventModified(event as any)) {
+            navigateToLink(url, navigate, event);
+          } else {
+            showRowPreview(pk);
+          }
         }
       }
     },
@@ -796,7 +814,11 @@ export function InvenTreeTableInternal<T extends Record<string, any>>({
         icon: <IconArrowRight />,
         onClick: (event: any) => {
           cancelEvent(event);
-          navigateToLink(url, navigate, event);
+          if (eventModified(event as any)) {
+            navigateToLink(url, navigate, event);
+          } else {
+            showRowPreview(pk);
+          }
         }
       });
     }