-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🪟 🎉 Add yaml validation to Connector Builder and disable buttons when invalid #19001
Conversation
This reverts commit decf6d6.
setYamlIsValid(false); | ||
const mark = err.mark; | ||
if (yamlEditorModel) { | ||
monaco.editor.setModelMarkers(yamlEditorModel, errOwner, [ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One small issue with this is that the error display doesn't really match the current editor theme (it is grey instead of blue). I'm not exactly sure how to customize the theme of those error windows
useEffect(() => { | ||
if (monaco && yamlEditorRef.current && yamlValue) { | ||
const errOwner = "yaml"; | ||
console.log(yamlValue); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are we planning to keep the console.log
in production on purpose or is this a leftover?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry that was a leftover, I will remove!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code LGTM. Smoke tested UI in Chrome Linux. Seems to work fine.
… invalid (#19001) * change splitter to be single bar, and rename props * add logs viewer to testing panel * make log display height 100% * remove comment * clean up some styling, and add record count to tab title * cleanup + only render paginator and slice selector when necessary * move selected slice/page state into context and fix bug with state between streams * fix tab keys * pull LogsDisplay out into its own component to simplify ResultDisplay * simplify ResultDisplay prop * add yaml validation and error marking logic to yaml editor * generify YamlEditor * Revert "generify YamlEditor" This reverts commit decf6d6. * disable download and test buttons while yaml is invalid * remove console log and add comments
What
Resolves #18918
This PR adds logic to detect when the content of the yaml editor in the Connector Builder is invalid, and if so disables the Download and Test buttons.
Screenshot of what this looks like:
How
This PR achieves the above by making a few changes:
Recommended reading order
YamlEditor.tsx
- most of the new yaml validation / error marking logic borrowed from here🚨 User Impact 🚨
Users will now have a better understanding of why their yaml is invalid in the connector builder, and will be unable to perform actions that wouldn't make sense to do anyway when invalid.