Add custom settings UI elements

frontend/src/WirevizSettings.tsx

@@ -0,0 +1,30 @@
+import { Alert, MantineProvider, Stack, Text } from '@mantine/core';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+
+function WirevizSettings({context}: {context: any}) {
+
+    console.log("settings context:", context);
+
+    return (
+        <Stack gap="xs">
+            <Alert color="green" title="Hello World">
+                <Text>Check it out - custom settings code!!</Text>
+            </Alert>
+        </Stack>
+    );
+}
+
+
+export function renderPluginSettings(target: HTMLElement | null, context: any) {
+
+    createRoot(target!).render(
+        <StrictMode>
+            <MantineProvider>
+                <WirevizSettings context={context} />
+            </MantineProvider>
+        </StrictMode>
+    );
+}
+

frontend/vite.config.ts

@@ -10,7 +10,8 @@ export default defineConfig({
     rollupOptions: {
       preserveEntrySignatures: "exports-only",
       input: [
-        './src/WirevizPanel.tsx'
+        './src/WirevizPanel.tsx',
+        './src/WirevizSettings.tsx',
       ],
       output: {
         dir: '../inventree_wireviz/static',

inventree_wireviz/wireviz.py

@@ -44,6 +44,9 @@ class WirevizPlugin(PanelMixin, ReportMixin, SettingsMixin, UrlsMixin, UserInter
     SLUG = "wireviz"
     TITLE = "Wireviz Plugin"
 
+    # Javascript file which renders custom plugin settings
+    ADMIN_PANEL_JS_FILE = "WirevizSettings.js"
+
     # Filenames and key constants
     HARNESS_SVG_FILE = "wireviz_harness.svg"