Enable schema validation for catalog editor

[travjenkins]

The user can edit the catalog manually in the create flow. However, they are unable to know if their edits are valid. We need to load the Flow schema into the Monaco editor and have it validate it.

[travjenkins]

Moving to next. We did not implement this with the mvp

[travjenkins]

Looked into this and going to take a bit of work.

Got the Schema loading by hardcoding it into the application as flowSchema.json file and including it in the src/types dir. This allowed me to load it into the editor using the prop onBeforeMount [^1]

This renders fine and does something where it is clearly picking up the description for the schema.

There is a warning stating that Draft 2019-09 is not supported. This warning is displayed when the schema uses a feature that is not yet supported by Monaco editor [issue]. There is on going work to fully implement this draft.(microsoft/vscode-json-languageservice#122 (comment))

Side note
If we want to ever use markdown in our description (not sure yet if we do) then that might be an issue and we'd have to use a different property: microsoft/monaco-editor#1816 (comment)

[^1] Handler used

        beforeMount: (monaco: Monaco) => {
            console.log('handlers:beforeMount', monaco);
            monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
                validate: true,
                schemaValidation: 'error',
                schemas: [
                    {
                        uri: 'https://server/schema.json',
                        fileMatch: ['*'],
                        schema: flowSchema,
                    },
                ],
            });
        },

[travjenkins]

Luckily - we can still get some features like descriptions displaying:

However, with how the current flow schema is being brought into the UI the editor is getting confused. It does not understand our schema and does not connect that 1 is the same as 2

I think we need to get the flow schema broken up in the UI so that we can load it into the editor based on the entity being displayed.