Template Editor Improvements (#9434)

* add unmount hook and context to report editor ui feature

* Fix tests

* Update pui_printing.spec.ts

* Update pui_printing.spec.ts

* try fix tests

* retrigger ci

* remove debug messages

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

@@ -175,7 +175,7 @@ class SampleUserInterfacePlugin(SettingsMixin, UserInterfaceMixin, InvenTreePlug
                 {
                     'key': 'sample-template-editor',
                     'title': 'Sample Template Editor',
-                    'icon': 'keywords',
+                    'icon': 'ti:tags:outline',
                     'source': self.plugin_static_file(
                         'sample_template.js:getTemplateEditor'
                     ),
@@ -190,7 +190,7 @@ class SampleUserInterfacePlugin(SettingsMixin, UserInterfaceMixin, InvenTreePlug
             {
                 'key': 'sample-template-preview',
                 'title': 'Sample Template Preview',
-                'icon': 'category',
+                'icon': 'ti:category:outline',
                 'source': self.plugin_static_file(
                     'sample_preview.js:getTemplatePreview'
                 ),

src/backend/InvenTree/plugin/samples/static/plugins/sampleui/sample_preview.js

@@ -4,7 +4,7 @@ export function getTemplatePreview({ featureContext, pluginContext }) {
 
     featureContext.registerHandlers({
       updatePreview: (...args) => {
-        console.log("updatePreview", args);
+        console.log("updatePreview", args[0]);
       }
     });
 

src/frontend/src/components/editors/TemplateEditor/CodeEditor/index.tsx

@@ -7,6 +7,6 @@ import { CodeEditorComponent } from './CodeEditor';
 export const CodeEditor: Editor = {
   key: 'code',
   name: t`Code`,
-  icon: IconCode,
+  icon: <IconCode size={18} />,
   component: CodeEditorComponent
 };

src/frontend/src/components/editors/TemplateEditor/PdfPreview/index.tsx

@@ -7,6 +7,6 @@ import { PdfPreviewComponent } from './PdfPreview';
 export const PdfPreview: PreviewArea = {
   key: 'pdf-preview',
   name: t`PDF Preview`,
-  icon: IconFileTypePdf,
+  icon: <IconFileTypePdf size={18} />,
   component: PdfPreviewComponent
 };

src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx

@@ -26,7 +26,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { api } from '../../../App';
 import { ModelType } from '../../../enums/ModelType';
-import type { TablerIconType } from '../../../functions/icons';
 import { apiUrl } from '../../../states/ApiState';
 import type { TemplateI } from '../../../tables/settings/TemplateTable';
 import { Boundary } from '../../Boundary';
@@ -50,7 +49,7 @@ export type EditorComponent = React.ForwardRefExoticComponent<
 export type Editor = {
   key: string;
   name: string;
-  icon?: TablerIconType;
+  icon?: React.ReactNode;
   component: EditorComponent;
 };
 
@@ -72,7 +71,7 @@ export type PreviewAreaComponent = React.ForwardRefExoticComponent<
 export type PreviewArea = {
   key: string;
   name: string;
-  icon: TablerIconType;
+  icon: React.ReactNode;
   component: PreviewAreaComponent;
 };
 
@@ -272,7 +271,7 @@ export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
                   <Tabs.Tab
                     key={Editor.key}
                     value={Editor.key}
-                    leftSection={Editor.icon && <Editor.icon size='0.8rem' />}
+                    leftSection={Editor.icon}
                   >
                     {Editor.name}
                   </Tabs.Tab>
@@ -336,9 +335,7 @@ export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
                 <Tabs.Tab
                   key={PreviewArea.key}
                   value={PreviewArea.key}
-                  leftSection={
+                  leftSection={PreviewArea.icon}
-                    PreviewArea.icon && <PreviewArea.icon size='0.8rem' />
-                  }
                 >
                   {PreviewArea.name}
                 </Tabs.Tab>

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

@@ -82,9 +82,10 @@ export const getPluginTemplateEditor = (
     }));
 
     useEffect(() => {
+      let unmountHandler: (() => void) | undefined;
       (async () => {
         try {
-          func({
+          unmountHandler = await func({
             ref: elRef.current!,
             registerHandlers: ({ getCode, setCode }) => {
               setCodeRef.current = setCode;
@@ -101,6 +102,12 @@ export const getPluginTemplateEditor = (
           console.error(error);
         }
       })();
+
+      return () => {
+        if (typeof unmountHandler === 'function') {
+          unmountHandler();
+        }
+      };
     }, []);
 
     return (

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

@@ -14,9 +14,13 @@ export type BaseUIFeature = {
   featureReturnType: any;
 };
 
-export type PluginUIGetFeatureType<T extends BaseUIFeature> = (params: {
+export type PluginUIGetFeatureType<
+  T extends BaseUIFeature,
+  ServerContext extends Record<string, unknown>
+> = (params: {
   featureContext: T['featureContext'];
   inventreeContext: InvenTreeContext;
+  serverContext: ServerContext;
 }) => T['featureReturnType'];
 
 export type PluginUIFuncWithoutInvenTreeContextType<T extends BaseUIFeature> = (
@@ -25,9 +29,8 @@ export type PluginUIFuncWithoutInvenTreeContextType<T extends BaseUIFeature> = (
 
 export type PluginUIFeatureAPIResponse<T extends BaseUIFeature> = {
   feature_type: T['featureType'];
-  options: T['responseOptions'];
   source: string;
-};
+} & T['responseOptions'];
 
 // #region Types
 export type TemplateEditorUIFeature = {
@@ -45,7 +48,7 @@ export type TemplateEditorUIFeature = {
     }) => void;
     template: TemplateI;
   };
-  featureReturnType: undefined;
+  featureReturnType: (() => void) | undefined;
 };
 
 export type TemplatePreviewUIFeature = {

src/frontend/src/hooks/UsePluginUIFeature.tsx

@@ -84,7 +84,8 @@ export function usePluginUIFeature<UIFeatureT extends BaseUIFeature>({
 
             return func({
               featureContext,
-              inventreeContext
+              inventreeContext,
+              serverContext: feature.context
             });
           }) as PluginUIFuncWithoutInvenTreeContextType<UIFeatureT>
         };

src/frontend/src/tables/settings/TemplateTable.tsx

@@ -16,6 +16,7 @@ import type {
   PreviewArea
 } from '../../components/editors/TemplateEditor/TemplateEditor';
 import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import { ApiIcon } from '../../components/items/ApiIcon';
 import { AttachmentLink } from '../../components/items/AttachmentLink';
 import { DetailDrawer } from '../../components/nav/DetailDrawer';
 import {
@@ -29,7 +30,6 @@ import type {
 import type { ApiEndpoints } from '../../enums/ApiEndpoints';
 import type { ModelType } from '../../enums/ModelType';
 import { identifierString } from '../../functions/conversion';
-import { GetIcon } from '../../functions/icons';
 import { notYetImplemented } from '../../functions/notifications';
 import { useFilters } from '../../hooks/UseFilter';
 import {
@@ -115,7 +115,7 @@ export function TemplateDrawer({
             `${editor.options.plugin_name}-${editor.options.key}`
           ),
           name: editor.options.title,
-          icon: GetIcon(editor.options.icon || 'plugin'),
+          icon: <ApiIcon name={editor.options.icon || 'plugin'} size={18} />,
           component: getPluginTemplateEditor(editor.func, template)
         } as Editor;
       }) || [])
@@ -143,7 +143,7 @@ export function TemplateDrawer({
           ({
             key: preview.options.key,
             name: preview.options.title,
-            icon: GetIcon(preview.options.icon || 'plugin'),
+            icon: <ApiIcon name={preview.options.icon || 'plugin'} size={18} />,
             component: getPluginTemplatePreview(preview.func, template)
           }) as PreviewArea
       ) || [])

src/frontend/tests/pui_printing.spec.ts

@@ -138,7 +138,7 @@ test('Report Editing', async ({ browser, request }) => {
     .click();
   const msg = (await consoleLogPromise).args();
   expect(await msg[0].jsonValue()).toBe('updatePreview');
-  expect((await msg[1].jsonValue())[0]).toBe(newTextareaValue);
+  expect(await msg[1].jsonValue()).toBe(newTextareaValue);
 
   // deactivate the sample plugin again after the test
   await setPluginState({