YAML Editor Polishing

[andreaskienle]

We made some great achievements with the new YAML editor (IntelliSense ✨🤩)

Let’s polish it a bit, from UX/UI as well as from a technical perspective.

So far, this is a list to collect various items/suggestions, up for discussion

UI/UX changes

• Remove double toolbars for editable YAML and integrate the Apply Changes button in the main toolbar
  

• Apply Changes button should be disabled when there are no changes

• In another scenario, move the Edit button there and restore the YAML heading on the left
  

• Add a Show Diff toggle button to toggle between diff and edit mode (disabled when there are no changes)
  

• Remove the “Are you sure…” step when applying the changes and open a dialog instead (showing the diff)
  

• (We could skip this dialog if the user has the Diff mode already open and apply the changes immediately)

• Validate YAML errors on every keystroke instead of when applying changes (might be a good idea to debounce this)

• Enable white-space: 'pre-wrap’ so newlines (\n) in error messages are rendered correctly

  NEW:

  OLD:

Technical changes

• Both, <YamlViewer> and <YamlDiff> only appear to be wrappers around other components (<YamlEditor>/<YamlDiffEditor>) without adding any special functionality. Can we remove them and move the CSS to the upper/lower component?
• Make <YamlEditor> a controlled component (yaml, onChangeYaml) and move validation logic and diff/apply logic further up?
• We still have commented out coding because of the download button. Can we remove this?
• If we want to keep the download button: We have the filename as prop for the whole component chain but it's mostly always filename={${item.kind}_${item.metadata.name}} Can we calculate this further down instead of passing it through?