feat(ui): Schema-driven dynamic forms for source/reaction configuration

[danielgerlag]

Summary

Replaces the flat YAML editor in the Drasi UI with schema-driven dynamic forms using RJSF (React JSON Schema Form). Forms are auto-generated from each plugin's JSON Schema with support for x-ui:* extension hints.

Key Changes

New files

• rjsf-theme/widgets.tsx — 7 custom RJSF widgets (Text, Password, Textarea, Select, Checkbox, Range, Number) matching Drasi's Tailwind design
• rjsf-theme/templates.tsx — FieldTemplate (x-ui:condition + humanizeLabel), ObjectFieldTemplate (collapsible x-ui:group sections), ArrayFieldTemplate, ErrorListTemplate
• rjsf-theme/index.ts — Theme export
• uiSchemaMapper.ts — Extracts x-ui:* extensions from JSON Schema → RJSF uiSchema + field groups

Modified files

• ConfigEditor.tsx — Complete rewrite with Form/YAML toggle and bidirectional sync
• SchemaConfigForm.tsx — Uses Drasi theme, uiSchema, formContext
• SourceForms.tsx / ReactionForms.tsx — Deletion-aware onChange handlers
• schemaResolver.ts — Preserve x-ui:* annotations during $ref resolution; build ref lookup to resolve utoipa short names (e.g. CallSpecDto) to fully-qualified definition keys (e.g. reaction.http.CallSpec)

Features

• Form/YAML toggle — Switch between structured form and raw YAML editing
• Grouped fields — Plugin-defined groups rendered as collapsible sections
• Widget hints — Password fields, textareas, placeholders from x-ui annotations
• humanizeLabel — camelCase field names → "Title Case" labels
• Ref resolution — Handles utoipa Dto-suffixed short names and fully-qualified module paths

Companion PR

Requires drasi-project/drasi-core#421 for the plugin-side x-ui schema annotations.

[Copilot]

Pull request overview

This PR replaces the flat YAML configuration editor in the UI with schema-driven dynamic forms powered by RJSF, using plugin-provided JSON Schemas (including x-ui:* extension hints) while retaining a YAML fallback editor.

Changes:

• Added an x-ui:* → RJSF uiSchema mapper (including grouping/order/conditions).
• Introduced a Drasi-tailored RJSF theme (custom widgets + templates for grouping/collapsing and inline errors).
• Reworked config editing to support Form/YAML toggle, improved $ref rewriting, and deletion-aware config updates in source/reaction forms.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
ui/src/utils/uiSchemaMapper.ts	New utility to extract x-ui:* annotations into an RJSF uiSchema (order/groups/conditions).
ui/src/utils/schemaResolver.ts	Enhances $ref rewriting (short-name lookup, preserves siblings for known refs/ConfigValue).
ui/src/components/create/rjsf-theme/widgets.tsx	Adds Tailwind-styled RJSF widgets (text/password/textarea/select/checkbox/range/number).
ui/src/components/create/rjsf-theme/templates.tsx	Adds templates for conditional visibility, grouped/collapsible object sections, arrays, and hides default error list.
ui/src/components/create/rjsf-theme/index.ts	Exports the Drasi RJSF theme (widgets + templates).
ui/src/components/create/SchemaConfigForm.tsx	Wires the Drasi theme into RJSF and passes formContext for conditions.
ui/src/components/create/ConfigEditor.tsx	Main rewrite: Form/YAML toggle, schema rewriting for query-keyed maps, YAML/template syncing, uiSchema extraction.
ui/src/components/create/SourceForms.tsx	Makes config updates deletion-aware (“atomic replacement”).
ui/src/components/create/ReactionForms.tsx	Same deletion-aware behavior + passes selected queries for per-query config expansion.

Comments suppressed due to low confidence (1)

ui/src/components/create/ReactionForms.tsx:104

• This handler filters reserved keys (id, autoStart, kind, queries) when clearing old config, but when applying new keys it doesn’t exclude kind. If a user adds kind manually in YAML mode, it will be written into the parent state. Consider applying the same reserved-key filter in the second loop too.

          for (const [key, val] of Object.entries(data)) {
            if (key !== "id" && key !== "autoStart" && key !== "queries") {
              onChange(key, val);
            }
          }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.