Feature Request: Add visual squiggly line validation for YAML syntax errors in Resource Editor
Is your feature request related to a problem? Please describe the impact that the lack of the feature requested is creating.
Currently, when a user enters invalid YAML in the resource creation/editing dialog, the syntax error is only displayed as a text message at the bottom of the dialog (e.g., bad indentation of a mapping entry (1:9)). This makes it difficult to quickly spot the exact location of the syntax error in large YAML files, as the user has to manually cross-reference the line and column numbers mentioned in the error message with the editor.
Describe the solution you'd like
The EditorDialog component already uses the Monaco editor. We can enhance the existing integration by using Monaco's native API to display visual red squiggly lines directly under the syntax errors in the YAML code.
This can be achieved by extracting the mark properties (line, column, reason) from the js-yaml exception and passing them to monaco.editor.setModelMarkers. This will visually highlight the exact location of the error inside the editor itself, while preserving the existing single-line error message at the bottom of the dialog.
What users will benefit from this feature?
All Headlamp users will greatly benefit from this feature, especially those who frequently create, edit, or copy-paste complex Kubernetes manifests directly in the UI. It improves the developer experience for In-Cluster users and Plugin developers by providing immediate, contextual visual feedback for syntax errors.
Are you able to implement this feature?
Yes (I will propose a PR).
Additional context
By utilizing the existing Monaco editor instance in EditorDialog.tsx and adding setModelMarkers, we can seamlessly map js-yaml errors into the editor for a much better user experience.
Feature Request: Add visual squiggly line validation for YAML syntax errors in Resource Editor
Is your feature request related to a problem? Please describe the impact that the lack of the feature requested is creating.
Currently, when a user enters invalid YAML in the resource creation/editing dialog, the syntax error is only displayed as a text message at the bottom of the dialog (e.g.,
bad indentation of a mapping entry (1:9)). This makes it difficult to quickly spot the exact location of the syntax error in large YAML files, as the user has to manually cross-reference the line and column numbers mentioned in the error message with the editor.Describe the solution you'd like
The
EditorDialogcomponent already uses the Monaco editor. We can enhance the existing integration by using Monaco's native API to display visual red squiggly lines directly under the syntax errors in the YAML code.This can be achieved by extracting the
markproperties (line,column,reason) from thejs-yamlexception and passing them tomonaco.editor.setModelMarkers. This will visually highlight the exact location of the error inside the editor itself, while preserving the existing single-line error message at the bottom of the dialog.What users will benefit from this feature?
All Headlamp users will greatly benefit from this feature, especially those who frequently create, edit, or copy-paste complex Kubernetes manifests directly in the UI. It improves the developer experience for In-Cluster users and Plugin developers by providing immediate, contextual visual feedback for syntax errors.
Are you able to implement this feature?
Yes (I will propose a PR).
Additional context
By utilizing the existing Monaco editor instance in
EditorDialog.tsxand addingsetModelMarkers, we can seamlessly mapjs-yamlerrors into the editor for a much better user experience.