Create a dedicated editing experience for gitlab-ci.yml file - Pipeline Editor

Problem

The experience for creating or editing a pipeline configuration is disjointed from the overall CI experience. Currently our users today can edit their pipeline using the single file editor or the web-ide.

🖼 Design Proposal

🔗 Designs on Figma

A dedicated Pipeline Editor will make it easy to edit the pipeline configuration thanks to added capabilities like configuration validation, visualization, templates, and more. The goal is to provide a tailored experience for both novice and advance users alike.

An MVC of this solution can be similar to the single file editor experience, with adjustments tailored to the pipeline authoring experience.

☝ We should decide which improvements can be made in the first iteration and which should come as a follow-up.

Editing experience

• The editor shows the file in the edit mode by default.
• If user has unsaved changes and somehow navigates off the page, we should show a modal that says something like: "The pipeline configuration has unsaved changes. Are you sure you want to close the editor? - Yes, No". We'll need to get technical writers' help to define the optimal copy for the message.

Linking CI files in the Pipeline Editor page

• User can link any files as related to their configuration in the Pipeline Editor to make them easy to access. Clicking on any of the linked files opens that file in the Pipeline Editor.
• If user pastes a broken link when linking a config file, we show a validation error like we here.
• We should show a tooltip when hovering over the "?" in the files section.
• Once there's at least one config file, we should make it possible to collapse and expand the files section.

➡ 3-minute walkthrough of the files section design

Validation and troubleshooting

• We're going to offer static validation in #263145 (closed) and port the linting functionality in #263147 (comment 438334964).
• "Validate configuration" runs the linter in the editor.
• "CI Docs" links to CI documentation and opens it in a new tab.

1st time CI experience

• Show a welcome alert that provides helpful information and links to CI documentation, as well as links a feedback issue.
• In #269755 (closed) we're working on a default Getting started CI template that will be applied to Pipeline Editor when there's no configuration defined yet.

✨ Gathering feedback on the new Pipeline Editor

To gather feedback on the Pipeline Editor, we should:

• Highlight the feature in the main nav using the hotspot highlight.
• For users with no CI configuration, show a Welcome alert with a link to the feedback issue.
• For users with an existing CI configuration, show an alert explaining the feature and requesting feedback in the feedback issue.

Once we gather some feedback in the feedback issue, we should follow up with solution validation interviews to gather more data.

🔧 Iteration breakdown

TBD