estuary / ui

A web based UI to assist in working with Estuary Flow
https://dashboard.estuary.dev/
Other
12 stars 1 forks source link

Enable schema validation for catalog editor #69

Open travjenkins opened 2 years ago

travjenkins commented 2 years ago

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 commented 2 years ago

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

travjenkins commented 1 year ago

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. image

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.(https://github.com/microsoft/vscode-json-languageservice/issues/122#issuecomment-1183359066)

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: https://github.com/microsoft/monaco-editor/issues/1816#issuecomment-584211685

[^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 commented 1 year ago

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

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 image

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.