Add clear button to YML Flow Editor

Vanessa Ottorequested to merge
578228-show-yaml-editor-for-dap-flows--frontend-5 into master

What does this MR do and why?

Add clear button to YML Flow Editor. When hitting the clear button, the focus is set immediately on the editor enter. It is possible to use CMD+Z to undo the action.

References

In !211232 (merged) we will replace the "Flow Nodes" UI with a YML Editor. Here's an overview about the progress. In !211607 I want to add default values for both, DAP flows and Third-party Flows, so users have more guidance on what to enter as @tvanderhelm suggested in this note. I thought it could generally be nice to give the user a Clear button to refresh the state of the editor. They could e.g. use is if they do not want to work with the prefilled default value. Or any other time.

Screenshots or screen recordings

Final icon Screenshot

Screenshot_2025-11-05_at_18.53.32

Screenrecording

Screen_Recording_2025-11-05_at_15.08.57

How to set up and validate locally

  1. Prerequisite: You have a Duo workflow-enabled project.
  2. Enable the feature flags for the global_ai_catalog and third party flows (Product decisions)
  3. If needed, add some seed data: Setting up GDK for Workflow Catalog Development
  4. Visit http://gdk.test:3000/explore/ai-catalog/flows
  5. Create or edit a flow
  6. Clear the editor field

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #578228

Edited by Vanessa Otto

Merge request reports