Edit YAML

In-page YAML Editor

• A YAML tab should be added on all object-detail pages that currently have the Edit YAML option in the actions menu.
  • This includes object types such as Deployments, Services, Pods, Stateful Sets, Routes, Builds, Pipelines, Images, Config Maps, Secrets, Storage, and any others which are visible with the Edit YAML action.
• The Edit YAML option can be removed from the actions menu.
• Users can navigate to the YAML tab to edit contents directly in the editor.
• Save and Reload buttons should be added to the bottom left of the page below the editor.
  • Save should be on the left with Reload on the right.
  • Reload should be disabled until changes are made and it becomes active as an option to cancel the changes and refresh the code back to where it started.
  • Save should be disabled until changes are made and it becomes as a primary action.

Actions

• Add an action bar of links above the top right corner of the editor.
• Display an icon to the left of the action labels.

Download

• Download action should be the left most and should use the fa-download icon.
• Clicking the link would download the YAML as a text file as the logs do today.

Expand and Collapse

• Expand or Collapse action should be the right most and should use the fa-expand-alt icon when in the default state.
• In the expanded state, this action should say Collapse and should use the fa-compress-alt icon.
• Clicking Expand will expand the editor to take up the entire page, in the current window. Expand will not open a new browser.
• Note Expand should use the Native API functionality for full-screen mode.

Errors

• Code errors should be indicated above the top left corner of the editor.
• The pficon-error-circle-o icon is displayed to the left of an Errors link in these cases.

Resource Changes

• When a resource changes in the background as a user is actively editing, conflicts may arise.
• In this case we should show the warning that the resource changed and disable the save button.
• Current Implementation can be seen here.
• Note: we would like to improve this experience in the future. See “Future Changes and Impacted Pages” section for details.

Modal - Import YAML Editor

• The modal editor case should follow the design provided for the in-page YAML editor.
• Actions for download and expand should be available in the top right, with errors shown in the top left.
• Clicking expand will open ONLY the editor section to a full-screen state for easier manipulation. Clicking collapse would revert back to the small editor inside the modal, allowing a user to complete the wizard.

Future Changes and Impacted Pages

• The goal is for all (1)Logs Pages (2)Terminal Pages (3)YAML Pages and (4)YAML Modals to match the design detailed above for YAML tabs.
  • The Expand/ Collapse functionality should match for all three, using the native API, expanding in the same window, not in a new browser.
  • The actions bar should change on the Logs pages to match the YAML tab as follows:
    • The current Save link above the logs should change to Download.
    • The current icon used for Expand should be replaced by the fa-expand-alt icon.
  • The Errors link should move from the top right to the top left.
• Note: In the future we would like to provide a better experience when resource conflicts arise.
  • Ideally, we would like to merge changes automatically and give the user a way to merge manually if there are conflicts the system cannot resolve.
  • A notification could display to explain the conflicts while providing a link to manually resolve.