feat(24318): Create a compact editable table for attribute/value editor

[vanch3d]

See https://hivemq.kanbanize.com/ctrl_board/57/cards/24318/details/

The PR creates a custom renderer for JSONSchema array of properties, intended for usage with limited object properties such as the User Properties

The default rendering is similar to every array of properties, a flat verbose list of input fields with their own management (title, descriptions, error messages, etc.).

The PR reorganises the templates for the different parts of the schema to deliver a more compact, table-based editor

Design

• As with custom renderer, the editor is activated through the uiSchema configuration, by adding 'ui:field': 'compactTable' to the relevant property , e.g.

  "subscriptions": {
    "items": {
      "userProperties": {
        "ui:field": "compactTable"
      }
    }

Out-of-scope

• There is no control over the number of items in the property being rendered with the grid, i.e. the number of columns in the grid. It is assumed to be a (very) limited number of items. Safeguards will be added in a subsequent ticket.

Before

After

[oli-hivemq]

should we document somewhere that uiOptions.title takes precedence over title?

[vanch3d]

It's the expected behaviour of the RJSF library: the (JSON)schema provides the bulk of the information (e.g. title, description, validation rules, ...) unless they are overridden by the optional uiSchema

[oli-hivemq]

same question as above regarding description

[oli-hivemq]

Are strings made of spaces only valid?
Would you want to trim the input somewhere to avoid bad surprises?

[Florian-Limpoeck]

i think spaces can be valid. it should be capable of any UTF-8 Character, so I would not recommend trimming

[vanch3d]

I'm also merely replicating the code from the component I'm overriding, in order to maintain consistency

[oli-hivemq]

Added a few comments but approving anyway 🦣