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>

ui/src/plugin/OutlinedRenderers.jsx

@@ -0,0 +1,257 @@
+/* eslint-disable react-refresh/only-export-components */
+import React, { useState } from 'react'
+import {
+  rankWith,
+  isStringControl,
+  isIntegerControl,
+  isNumberControl,
+  isEnumControl,
+  isOneOfEnumControl,
+  and,
+  not,
+  or,
+  optionIs,
+  isDescriptionHidden,
+} from '@jsonforms/core'
+import {
+  withJsonFormsControlProps,
+  withJsonFormsEnumProps,
+  withJsonFormsOneOfEnumProps,
+} from '@jsonforms/react'
+import {
+  TextField,
+  FormControl,
+  FormHelperText,
+  InputLabel,
+  Select,
+  MenuItem,
+} from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import merge from 'lodash/merge'
+
+const useStyles = makeStyles(
+  (theme) => ({
+    control: {
+      marginBottom: theme.spacing(2),
+    },
+  }),
+  { name: 'NDOutlinedRenderers' },
+)
+
+/**
+ * Hook for common control state (focus, validation, description visibility)
+ * Tracks "touched" state to only show errors after the user has interacted with the field
+ */
+const useControlState = (props) => {
+  const { config, uischema, description, visible, errors } = props
+  const [isFocused, setIsFocused] = useState(false)
+  const [isTouched, setIsTouched] = useState(false)
+
+  const appliedUiSchemaOptions = merge({}, config, uischema?.options)
+  // errors is a string when there are validation errors, empty/undefined when valid
+  const hasErrors = errors && errors.length > 0
+  // Only show as invalid after the field has been touched (blurred)
+  const showError = isTouched && hasErrors
+
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    isFocused,
+    appliedUiSchemaOptions.showUnfocusedDescription,
+  )
+
+  const helperText = showError ? errors : showDescription ? description : ''
+
+  const handleFocus = () => setIsFocused(true)
+  const handleBlur = () => {
+    setIsFocused(false)
+    setIsTouched(true)
+  }
+
+  return {
+    isFocused,
+    appliedUiSchemaOptions,
+    showError,
+    helperText,
+    handleFocus,
+    handleBlur,
+  }
+}
+
+/**
+ * Base outlined control component that uses TextField with outlined variant
+ * instead of the default Input component used by JSONForms 2.x
+ */
+const OutlinedControl = (props) => {
+  const classes = useStyles()
+  const {
+    data,
+    id,
+    enabled,
+    label,
+    visible,
+    type = 'text',
+    inputProps: extraInputProps = {},
+    onChange,
+  } = props
+
+  const {
+    appliedUiSchemaOptions,
+    showError,
+    helperText,
+    handleFocus,
+    handleBlur,
+  } = useControlState(props)
+
+  if (!visible) {
+    return null
+  }
+
+  return (
+    <TextField
+      id={id}
+      label={label}
+      type={type}
+      value={data ?? ''}
+      onChange={onChange}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      disabled={!enabled}
+      autoFocus={appliedUiSchemaOptions.focus}
+      multiline={type === 'text' && appliedUiSchemaOptions.multi}
+      rows={appliedUiSchemaOptions.multi ? 3 : undefined}
+      variant="outlined"
+      fullWidth
+      size="small"
+      error={showError}
+      helperText={helperText}
+      inputProps={extraInputProps}
+      className={classes.control}
+    />
+  )
+}
+
+// Text control wrapper
+const OutlinedTextControl = (props) => {
+  const { path, handleChange, schema, config, uischema } = props
+  const appliedUiSchemaOptions = merge({}, config, uischema?.options)
+
+  const inputProps = {}
+  if (appliedUiSchemaOptions.restrict && schema?.maxLength) {
+    inputProps.maxLength = schema.maxLength
+  }
+
+  return (
+    <OutlinedControl
+      {...props}
+      type={appliedUiSchemaOptions.format === 'password' ? 'password' : 'text'}
+      inputProps={inputProps}
+      onChange={(ev) => handleChange(path, ev.target.value)}
+    />
+  )
+}
+
+// Number control wrapper
+const OutlinedNumberControl = (props) => {
+  const { path, handleChange, schema } = props
+  const { minimum, maximum } = schema || {}
+
+  const inputProps = {}
+  if (minimum !== undefined) inputProps.min = minimum
+  if (maximum !== undefined) inputProps.max = maximum
+
+  const handleNumberChange = (ev) => {
+    const value = ev.target.value
+    if (value === '') {
+      handleChange(path, undefined)
+    } else {
+      const numValue = Number(value)
+      if (!isNaN(numValue)) {
+        handleChange(path, numValue)
+      }
+    }
+  }
+
+  return (
+    <OutlinedControl
+      {...props}
+      type="number"
+      inputProps={inputProps}
+      onChange={handleNumberChange}
+    />
+  )
+}
+
+// Enum/Select control wrapper
+const OutlinedEnumControl = (props) => {
+  const classes = useStyles()
+  const { data, id, enabled, path, handleChange, options, label, visible } =
+    props
+  const {
+    appliedUiSchemaOptions,
+    showError,
+    helperText,
+    handleFocus,
+    handleBlur,
+  } = useControlState(props)
+
+  if (!visible) {
+    return null
+  }
+
+  return (
+    <FormControl
+      fullWidth
+      variant="outlined"
+      size="small"
+      error={showError}
+      className={classes.control}
+    >
+      <InputLabel id={`${id}-label`}>{label}</InputLabel>
+      <Select
+        labelId={`${id}-label`}
+        id={id}
+        value={data ?? ''}
+        onChange={(ev) => handleChange(path, ev.target.value)}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        disabled={!enabled}
+        autoFocus={appliedUiSchemaOptions.focus}
+        label={label}
+        fullWidth
+      >
+        <MenuItem value="">
+          <em>None</em>
+        </MenuItem>
+        {options?.map((option) => (
+          <MenuItem key={option.value} value={option.value}>
+            {option.label}
+          </MenuItem>
+        ))}
+      </Select>
+      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  )
+}
+
+// Testers - higher rank than default to override default renderers
+// Enum renderers have highest rank since isStringControl also matches enum fields
+export const OutlinedEnumRenderer = {
+  tester: rankWith(5, isEnumControl),
+  renderer: withJsonFormsEnumProps(OutlinedEnumControl),
+}
+
+export const OutlinedOneOfEnumRenderer = {
+  tester: rankWith(5, isOneOfEnumControl),
+  renderer: withJsonFormsOneOfEnumProps(OutlinedEnumControl),
+}
+
+export const OutlinedTextRenderer = {
+  tester: rankWith(3, and(isStringControl, not(optionIs('format', 'radio')))),
+  renderer: withJsonFormsControlProps(OutlinedTextControl),
+}
+
+export const OutlinedNumberRenderer = {
+  tester: rankWith(3, or(isIntegerControl, isNumberControl)),
+  renderer: withJsonFormsControlProps(OutlinedNumberControl),
+}