YAML editor - Side by side

Author: Joy Jean | Last edit: July 14, 2023 | Design type: | Product area: ACM

Why side-by-side YAML editor?

The side-by-side YAML editor provides a convenient way to compare and edit form parameters and the underlying YAML file simultaneously. 

It was developed for ACM by John Swanke. 
There are feedback around the YAML editor (done while at IBM, 1 usability study and numerous customer visits), around it being useful for those who are learning to use ACM, specifically understanding how the form fields translate into YAML files. The contextual understanding improves comprehension of what the user is doing and with troubleshooting. 

Designs

Toggle

There is a toggle to turn the YAML editor on or off. 

YAML: Off

YAML: On

Actions

Reset: Return the form and YAML file to its default

Undo: Return to last step

Redo: Return to the step you clicked Undo  

Find: Search within the YAML file

Show secrets: Secrets are hidden as asterisks by default. Click show secrets to see the characters for secrets. 

Copy: Copy the YAML file to clipboard

Highlight changes in YAML

Changes made in a form will instantly be reflected in the YAML editor upon selection. When selected, the change is reflected in the YAML file with a light blue bar. 

In this example, I selected "Git", and the Application YAML highlighted all the parts of the YAML file that it changed upon selection (lines 18-26, 28-beyond).

Multiple configuration files

If the form has multiple YAML files, you are able to switch between tabs to access different YAML files.