From ba703cf58aff042744570d61f0677a8dcbdbff12 Mon Sep 17 00:00:00 2001 From: Lukas <76838159+wolflu05@users.noreply.github.com> Date: Wed, 2 Apr 2025 00:01:12 +0200 Subject: [PATCH] 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 --- .../samples/integration/user_interface_sample.py | 4 ++-- .../samples/static/plugins/sampleui/sample_preview.js | 2 +- .../editors/TemplateEditor/CodeEditor/index.tsx | 2 +- .../editors/TemplateEditor/PdfPreview/index.tsx | 2 +- .../editors/TemplateEditor/TemplateEditor.tsx | 11 ++++------- .../src/components/plugins/PluginUIFeature.tsx | 9 ++++++++- .../src/components/plugins/PluginUIFeatureTypes.ts | 11 +++++++---- src/frontend/src/hooks/UsePluginUIFeature.tsx | 3 ++- src/frontend/src/tables/settings/TemplateTable.tsx | 6 +++--- src/frontend/tests/pui_printing.spec.ts | 2 +- 10 files changed, 30 insertions(+), 22 deletions(-) diff --git a/src/backend/InvenTree/plugin/samples/integration/user_interface_sample.py b/src/backend/InvenTree/plugin/samples/integration/user_interface_sample.py index a31606b374..c475a68f5a 100644 --- a/src/backend/InvenTree/plugin/samples/integration/user_interface_sample.py +++ b/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' ), diff --git a/src/backend/InvenTree/plugin/samples/static/plugins/sampleui/sample_preview.js b/src/backend/InvenTree/plugin/samples/static/plugins/sampleui/sample_preview.js index 1cf763f38f..e3bdec118f 100644 --- a/src/backend/InvenTree/plugin/samples/static/plugins/sampleui/sample_preview.js +++ b/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]); } }); diff --git a/src/frontend/src/components/editors/TemplateEditor/CodeEditor/index.tsx b/src/frontend/src/components/editors/TemplateEditor/CodeEditor/index.tsx index c2cc6f6b43..6827fb3685 100644 --- a/src/frontend/src/components/editors/TemplateEditor/CodeEditor/index.tsx +++ b/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: , component: CodeEditorComponent }; diff --git a/src/frontend/src/components/editors/TemplateEditor/PdfPreview/index.tsx b/src/frontend/src/components/editors/TemplateEditor/PdfPreview/index.tsx index dd3a22a2bf..991f507ad4 100644 --- a/src/frontend/src/components/editors/TemplateEditor/PdfPreview/index.tsx +++ b/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: , component: PdfPreviewComponent }; diff --git a/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx b/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx index f1f5a604e6..218f8b5ee7 100644 --- a/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx +++ b/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) { } + leftSection={Editor.icon} > {Editor.name} @@ -336,9 +335,7 @@ export function TemplateEditor(props: Readonly) { - } + leftSection={PreviewArea.icon} > {PreviewArea.name} diff --git a/src/frontend/src/components/plugins/PluginUIFeature.tsx b/src/frontend/src/components/plugins/PluginUIFeature.tsx index 280d682713..21d3185bc7 100644 --- a/src/frontend/src/components/plugins/PluginUIFeature.tsx +++ b/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 ( diff --git a/src/frontend/src/components/plugins/PluginUIFeatureTypes.ts b/src/frontend/src/components/plugins/PluginUIFeatureTypes.ts index ba1eedf499..98c658061b 100644 --- a/src/frontend/src/components/plugins/PluginUIFeatureTypes.ts +++ b/src/frontend/src/components/plugins/PluginUIFeatureTypes.ts @@ -14,9 +14,13 @@ export type BaseUIFeature = { featureReturnType: any; }; -export type PluginUIGetFeatureType = (params: { +export type PluginUIGetFeatureType< + T extends BaseUIFeature, + ServerContext extends Record +> = (params: { featureContext: T['featureContext']; inventreeContext: InvenTreeContext; + serverContext: ServerContext; }) => T['featureReturnType']; export type PluginUIFuncWithoutInvenTreeContextType = ( @@ -25,9 +29,8 @@ export type PluginUIFuncWithoutInvenTreeContextType = ( export type PluginUIFeatureAPIResponse = { 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 = { diff --git a/src/frontend/src/hooks/UsePluginUIFeature.tsx b/src/frontend/src/hooks/UsePluginUIFeature.tsx index 3504652677..f5fe533d02 100644 --- a/src/frontend/src/hooks/UsePluginUIFeature.tsx +++ b/src/frontend/src/hooks/UsePluginUIFeature.tsx @@ -84,7 +84,8 @@ export function usePluginUIFeature({ return func({ featureContext, - inventreeContext + inventreeContext, + serverContext: feature.context }); }) as PluginUIFuncWithoutInvenTreeContextType }; diff --git a/src/frontend/src/tables/settings/TemplateTable.tsx b/src/frontend/src/tables/settings/TemplateTable.tsx index 8400961352..69089d98ba 100644 --- a/src/frontend/src/tables/settings/TemplateTable.tsx +++ b/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: , 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: , component: getPluginTemplatePreview(preview.func, template) }) as PreviewArea ) || []) diff --git a/src/frontend/tests/pui_printing.spec.ts b/src/frontend/tests/pui_printing.spec.ts index 1d1f987c74..a2f5a546d6 100644 --- a/src/frontend/tests/pui_printing.spec.ts +++ b/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({