[FR] PUI - Add option for plugins to add header actions

Fixes inventree#8593

Author: matmair

src/backend/InvenTree/plugin/base/ui/mixins.py

@@ -20,6 +20,7 @@
     'template_editor',  # Custom template editor
     'template_preview',  # Custom template preview
     'navigation',  # Custom navigation items
+    'primary_action',  # Custom primary action buttons
 ]
 
 
@@ -104,6 +105,7 @@ def get_ui_features(
             'template_editor': self.get_ui_template_editors,
             'template_preview': self.get_ui_template_previews,
             'navigation': self.get_ui_navigation_items,
+            'primary_action': self.get_ui_primary_actions,
         }
 
         if feature_type in feature_map:
@@ -186,3 +188,18 @@ def get_ui_navigation_items(
         """
         # Default implementation returns an empty list
         return []
+
+    def get_ui_primary_actions(
+        self, request: Request, context: dict, **kwargs
+    ) -> list[UIFeature]:
+        """Return a list of custom primary action buttons to be injected into the UI.
+
+        Args:
+            request: HTTPRequest object (including user information)
+            context: Additional context data provided by the UI (query parameters)
+
+        Returns:
+            list: A list of custom primary action buttons to be injected into the UI
+        """
+        # Default implementation returns an empty list
+        return []

src/backend/InvenTree/plugin/base/ui/tests.py

@@ -233,3 +233,13 @@ def test_ui_navigation_items(self):
         self.assertEqual(response.data[0]['plugin_name'], 'sampleui')
         self.assertEqual(response.data[0]['key'], 'sample-nav-item')
         self.assertEqual(response.data[0]['title'], 'Sample Nav Item')
+
+    def test_ui_primary_actions(self):
+        """Test that the sample UI plugin provides custom primary actions."""
+        response = self.get(
+            reverse('api-plugin-ui-feature-list', kwargs={'feature': 'primary_action'})
+        )
+        self.assertEqual(1, len(response.data))
+        self.assertEqual(response.data[0]['plugin_name'], 'sampleui')
+        self.assertEqual(response.data[0]['key'], 'sample-primary-action')
+        self.assertEqual(response.data[0]['title'], 'Sample Primary Action')

src/backend/InvenTree/plugin/samples/integration/user_interface_sample.py

@@ -208,6 +208,17 @@ def get_ui_navigation_items(self, request, context, **kwargs):
             }
         ]
 
+    def get_ui_primary_action_buttons(self, request, context, **kwargs):
+        """Return a list of custom primary action buttons."""
+        return [
+            {
+                'key': 'sample-primary-action',
+                'title': 'Sample Primary Action',
+                'icon': 'ti:plus',
+                'options': {'url': '/sample/action/'},
+            }
+        ]
+
     def get_admin_context(self) -> dict:
         """Return custom context data which can be rendered in the admin panel."""
         return {'apple': 'banana', 'foo': 'bar', 'hello': 'world'}

src/frontend/src/components/nav/PageDetail.tsx

@@ -3,9 +3,11 @@ import { useHotkeys } from '@mantine/hooks';
 
 import { Fragment, type ReactNode, useMemo } from 'react';
 import { shortenString } from '../../functions/tables';
+import { usePluginUIFeature } from '../../hooks/UsePluginUIFeature';
 import { useUserSettingsState } from '../../states/SettingsState';
 import { ApiImage } from '../images/ApiImage';
 import { StylishText } from '../items/StylishText';
+import type { PrimaryActionUIFeature } from '../plugins/PluginUIFeatureTypes';
 import { type Breadcrumb, BreadcrumbList } from './BreadcrumbList';
 import PageTitle from './PageTitle';
 
@@ -97,6 +99,16 @@ export function PageDetail({
     }
   }, [breadcrumbs, last_crumb, userSettings]);
 
+  const extraActions = usePluginUIFeature<PrimaryActionUIFeature>({
+    featureType: 'primary_action',
+    context: {}
+  });
+
+  // action caching
+  const computedActions = useMemo(() => {
+    return [...(extraActions ?? []), ...(actions ?? [])];
+  }, [extraActions, actions]);
+
   return (
     <>
       <PageTitle title={pageTitleString} />
@@ -156,9 +168,9 @@ export function PageDetail({
                 </Group>
               )}
             </SimpleGrid>
-            {actions && (
+            {computedActions && (
               <Group gap={5} justify='right' wrap='nowrap' align='flex-start'>
-                {actions.map((action, idx) => (
+                {computedActions.map((action, idx) => (
                   <Fragment key={idx}>{action}</Fragment>
                 ))}
               </Group>

src/frontend/src/components/plugins/PluginUIFeature.tsx

@@ -29,7 +29,8 @@ export enum PluginUIFeatureType {
   panel = 'panel',
   template_editor = 'template_editor',
   template_preview = 'template_preview',
-  navigation = 'navigation'
+  navigation = 'navigation',
+  primary_action = 'primary_action'
 }
 
 /**

src/frontend/src/components/plugins/PluginUIFeatureTypes.ts

@@ -84,3 +84,11 @@ export type NavigationUIFeature = {
   featureContext: {};
   featureReturnType: undefined;
 };
+
+export type PrimaryActionUIFeature = {
+  featureType: 'primary_action';
+  requestContext: {};
+  responseOptions: PluginUIFeature;
+  featureContext: {};
+  featureReturnType: undefined;
+};