[PUI] Plugin settings UI (#8228)

* Visual tweaks for admin pages

* Provide admin js file via API

* Backend fixes

* Tweak error detail drawer

* Refactor plugin detail panel

- Split out into separate files
- Use <Accordion />
- Display custom configuration (if available)

* Refactoring

* Add custom configuration to sample UI plugin

* Bump API version

* Add separate API endpoint for admin integration details

* Refactor plugin drawer

* Null check

* Add playwright tests for custom admin integration

* Enable plugin panels in "settings" pages

* Fix for unit test

* Hide "Plugin Settings" for plugin without "settings" mixin

* Fixes for playwright tests

* Update playwright tests

* Improved error message

src/frontend/tests/baseFixtures.ts

@@ -67,6 +67,8 @@ export const test = baseTest.extend({
           ) < 0 &&
         msg.text() !=
           'Failed to load resource: the server responded with a status of 400 (Bad Request)' &&
+        !msg.text().includes('http://localhost:8000/this/does/not/exist.js') &&
+        url != 'http://localhost:8000/this/does/not/exist.js' &&
         url != 'http://localhost:8000/api/user/me/' &&
         url != 'http://localhost:8000/api/user/token/' &&
         url != 'http://localhost:8000/api/barcode/' &&

src/frontend/tests/pui_plugins.spec.ts

@@ -52,3 +52,37 @@ test('Plugins - Panels', async ({ page, request }) => {
     state: false
   });
 });
+
+/**
+ * Unit test for custom admin integration for plugins
+ */
+test('Plugins - Custom Admin', async ({ page, request }) => {
+  await doQuickLogin(page, 'admin', 'inventree');
+
+  // Ensure that the SampleUI plugin is enabled
+  await setPluginState({
+    request,
+    plugin: 'sampleui',
+    state: true
+  });
+
+  // Navigate to the "admin" page
+  await page.goto(`${baseUrl}/settings/admin/plugin/`);
+
+  // Open the plugin drawer, and ensure that the custom admin elements are visible
+  await page.getByText('SampleUI').click();
+  await page.getByRole('button', { name: 'Plugin Information' }).click();
+  await page
+    .getByLabel('Plugin Detail')
+    .getByRole('button', { name: 'Plugin Settings' })
+    .click();
+  await page.getByRole('button', { name: 'Plugin Configuration' }).click();
+
+  // Check for expected custom elements
+  await page
+    .getByRole('heading', { name: 'Custom Plugin Configuration Content' })
+    .waitFor();
+  await page.getByText('apple: banana').waitFor();
+  await page.getByText('foo: bar').waitFor();
+  await page.getByText('hello: world').waitFor();
+});

src/frontend/tests/pui_settings.spec.ts

@@ -21,7 +21,7 @@ test('Admin', async ({ page }) => {
   await page.getByText('Inline report display').waitFor();
 
   // System Settings
-  await page.getByRole('link', { name: 'Switch to System Setting' }).click();
+  await page.locator('label').filter({ hasText: 'System Settings' }).click();
   await page.getByText('Base URL', { exact: true }).waitFor();
   await page.getByRole('tab', { name: 'Login' }).click();
   await page.getByRole('tab', { name: 'Barcodes' }).click();