feat(plugins): add JSONForms-based plugin configuration UI (#4911)

* feat(plugins): add JSONForms schema for plugin configuration Signed-off-by: Deluan <deluan@navidrome.org> * feat: enhance error handling by formatting validation errors with field names Signed-off-by: Deluan <deluan@navidrome.org> * feat: enforce required fields in config validation and improve error handling Signed-off-by: Deluan <deluan@navidrome.org> * format JS code Signed-off-by: Deluan <deluan@navidrome.org> * feat: add config schema validation and enhance manifest structure Signed-off-by: Deluan <deluan@navidrome.org> * feat: refactor plugin config parsing and add unit tests Signed-off-by: Deluan <deluan@navidrome.org> * feat: add config validation error message in Portuguese * feat: enhance AlwaysExpandedArrayLayout with description support and improve array control testing Signed-off-by: Deluan <deluan@navidrome.org> * feat: update Discord Rust plugin configuration to use JSONForm for user tokens and enhance schema validation Signed-off-by: Deluan <deluan@navidrome.org> * fix: resolve React Hooks linting issues in plugin UI components * Apply suggestions from code review Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> * format code Signed-off-by: Deluan <deluan@navidrome.org> * feat: migrate schema validation to use santhosh-tekuri/jsonschema and improve error formatting Signed-off-by: Deluan <deluan@navidrome.org> * address PR comments Signed-off-by: Deluan <deluan@navidrome.org> * fix flaky test Signed-off-by: Deluan <deluan@navidrome.org> * feat: enhance array layout and configuration handling with AJV defaults Signed-off-by: Deluan <deluan@navidrome.org> * feat: implement custom tester to exclude enum arrays from AlwaysExpandedArrayLayout Signed-off-by: Deluan <deluan@navidrome.org> * feat: add error boundary for schema rendering and improve error messages Signed-off-by: Deluan <deluan@navidrome.org> * feat: refine non-enum array control logic by utilizing JSONForms schema resolution Signed-off-by: Deluan <deluan@navidrome.org> * feat: add error styling to ToggleEnabledSwitch for disabled state Signed-off-by: Deluan <deluan@navidrome.org> * feat: adjust label positioning and styling in SchemaConfigEditor for improved layout Signed-off-by: Deluan <deluan@navidrome.org> * feat: implement outlined input controls renderers to replace custom fragile CSS Signed-off-by: Deluan <deluan@navidrome.org> * feat: remove margin from last form control inside array items for better spacing Signed-off-by: Deluan <deluan@navidrome.org> * feat: enhance AJV error handling to transform required errors for field-level validation Signed-off-by: Deluan <deluan@navidrome.org> * feat: set default value for User Tokens in manifest.json to improve user experience Signed-off-by: Deluan <deluan@navidrome.org> * format Signed-off-by: Deluan <deluan@navidrome.org> * feat: add margin to outlined input controls for improved spacing Signed-off-by: Deluan <deluan@navidrome.org> * feat: remove redundant margin rule for last form control in array items Signed-off-by: Deluan <deluan@navidrome.org> * feat: adjust font size of label elements in SchemaConfigEditor for improved readability Signed-off-by: Deluan <deluan@navidrome.org> --------- Signed-off-by: Deluan <deluan@navidrome.org> Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
2026-10-25 02:37:22 +02:00 · 2026-01-19 20:51:00 -05:00 · 2026-01-19 20:51:00 -05:00 · f1e75c40dc
commit f1e75c40dc
parent 66474fc9f4
40 changed files with 5418 additions and 1995 deletions
--- a/ui/src/plugin/SchemaConfigEditor.test.jsx
+++ b/ui/src/plugin/SchemaConfigEditor.test.jsx
@ -0,0 +1,86 @@
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import { render } from '@testing-library/react'
+import { ThemeProvider, createTheme } from '@material-ui/core/styles'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import { SchemaConfigEditor } from './SchemaConfigEditor'
+
+const theme = createTheme()
+
+// JSONForms requires Redux
+const mockStore = createStore(() => ({}))
+
+const renderWithProviders = (component) => {
+  return render(
+    <Provider store={mockStore}>
+      <ThemeProvider theme={theme}>{component}</ThemeProvider>
+    </Provider>,
+  )
+}
+
+describe('SchemaConfigEditor', () => {
+  const basicSchema = {
+    type: 'object',
+    properties: {
+      name: {
+        type: 'string',
+        title: 'Name',
+      },
+      enabled: {
+        type: 'boolean',
+        title: 'Enabled',
+      },
+    },
+  }
+
+  it('renders nothing when schema is null', () => {
+    const { container } = renderWithProviders(
+      <SchemaConfigEditor schema={null} data={{}} onChange={vi.fn()} />,
+    )
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders the component wrapper with valid schema', () => {
+    const { container } = renderWithProviders(
+      <SchemaConfigEditor schema={basicSchema} data={{}} onChange={vi.fn()} />,
+    )
+    // Check that the wrapper div is rendered (class name is generated)
+    expect(
+      container.querySelector('[class*="NDSchemaConfigEditor-root"]'),
+    ).toBeTruthy()
+  })
+
+  it('calls onChange on initial render', () => {
+    const onChange = vi.fn()
+    renderWithProviders(
+      <SchemaConfigEditor
+        schema={basicSchema}
+        data={{ name: 'Test' }}
+        onChange={onChange}
+      />,
+    )
+
+    // JSONForms calls onChange on initial render with initial state
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('passes data and errors to onChange callback', () => {
+    const onChange = vi.fn()
+    const initialData = { name: 'Test Value' }
+
+    renderWithProviders(
+      <SchemaConfigEditor
+        schema={basicSchema}
+        data={initialData}
+        onChange={onChange}
+      />,
+    )
+
+    // Check that onChange was called with data and errors
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ name: 'Test Value' }),
+      expect.any(Array),
+    )
+  })
+})