In the editor page, see parent task T356622, administrators and other privileged users are presented a form for updating community configuration settings from a specific provider. The current editor MVP requests the full configuration data for a provider and sends back an updated version of the full config data. The data is validated then in the server using the JSON validator associated to the provider schema.

Schemas can contain different constraints applied to different data types. eg:

"MyConfigOption": {
   "type": "string",
   "minLength": 1
}

To facilitate the completion of the form by users several actions can be taken. Setting appropriate default values, providing per-option help text and showing validation errors on fields that do not meet the constraints set by the JSON schema. This task is to work on the validation hints the editor form should show to users to help them complete the form in a way that produces valid data.

Context

A straight forward mechanism to solve the stated problem would be to use some sort of client side validator, eg: ajv in the client. The llibrary would handle the validation of a given JSON blob against a given JSON schema, then mapping the "JSON errors" to the form fields representing them should be fairly simple. However Community configuration has the JSON schema validation built in the back-end by design. That is to allow consumers of the extension to get validation benefits without necessarily use the extension front-end modules. Using a different validator on each end could pose inconsistency problems and increases the dependency maintenance burden.

In addition to this, conceptually, given the JSON schema for a set of configurations describes their data constraints it should be possible to generate an HTML form that enforces the same constraints, or at least, a fair amount of typical use cases. The next section describes a solution based on these assumptions.

Proposed solution

Make usage of the HTML capabilities around validation (MDN Form validation) to generate a form that prevents submission of wrong values in the input data and shows contextual (per-field) error messages for fields that violate constraints. A simple example of usage of built-in form validation is the required attribute (MDN required)

User story:

Given I am an interface administrator, navigate to the Community Configuration Editing form page for a given provider,
If I input wrong data in the form, such as emptying a required field,
Then the form highlights the problematic field and gives me rich information about what's wrong.

Acceptance criteria:

• TBD

Open questions:

• How should we provide the text keys for validation? In the same way for built-in and custom controls?
• ...

Figma designs
TBD