Consider visual configuration editor

[kadamwhite]

Looking at #21, managing nested JSON configuring multiple environments is somewhat error-prone. Long-term it could be interesting to provide a visual configuration editor similar to how VS Code has evolved the interface for user and workspace settings: At minimum directing people to make config changes through an editor would give us a place to validate the shape of the config at the time it is being edited or saved, which would reduce the lag between "make edit" and "see error" which might be experienced if you configure a bunch of things then try to run the site and see an error.

[roborourke]

I'd also wondered about defining a schema for the config using JSON schema, however that's a little tricky given the flexibility of it, however if we want to add validation that's going to be necessary anyway and probably the first step towards a visual tool like this.

[rmccue]

I've had a play around with this, using monaco-editor (the editor used in VS Code). Here's where I got to:

There's a bug in the Monaco editor (https://github.com/microsoft/monaco-editor/issues/1294) which means that the autocompletion doesn't currently work, but it will.

This is pretty good bang-for-buck, as we get inline validation, completion, and hinting just by producing a JSON Schema.

We can also use some of the underlying tools (node-jsonc-parser) to manipulate the JSON data, so e.g. to change the default theme:

const path = [ 'extra', 'altis', 'modules', 'cms', 'default-theme' ];
const newValue = 'twentynineteen';

const edits = modify( source, path, newValue, { formattingOptions: {} } );
const newSource = applyEdits( source, edits );

I don't think we need to go the full pref UI route, but we could provide helpers. For example, here's what Sourcegraph does:

The buttons at the top are used for some common actions in the editor.

[rmccue]

Monaco is unfortunately pretty buggy, but I discovered react-jsonschema-form by Mozilla which looks promising.

Key to all of these is codifying what our configuration looks like, which is best done via JSON Schema I think. We'll likely need to change the signature of module registration (https://github.com/humanmade/platform-dev/issues/367) to do this nicely.

[rmccue]

Experimenting with react-jsonschema-form:

~Per-site configuration may not be supported here, as there's no real way to describe this via JSON Schema, and react-jsonschema-form doesn't support additionalItems. We may be able to do this by calling get_sites() and providing a key for each site, but it's too early.~ Possibly an extra option or callback to provide uiSchema might be useful too.

Edit: I was wrong, additionalItems is supported.

[roborourke]

With regards to changing the register_module() function this would just mean replacing the $default_settings parameter with the $schema as that will be the place to define defaults.

[rmccue]

Closing this out; not worth the effort for now, but we might want to reconsider in the future once we have a configuration framework in place.