1st time experience for Pipeline Editor

This issue contains a proposal for how the 1st time CI experience should work in the new Pipeline Editor. It outlines the improvements the Pipeline Authoring team would like to work on over the next few milestones.

Related issues that came out of this exploration are in the Pipeline Authoring 1st time experience epic.

Problem

CI 1st time experience provides no guidance on what is GitLab CI, how it works and how to set it up. A blank file is intimidating for those who don't know how CI works and how to write the yaml configuration. Most 1st time users find the experience for setting up CI difficult, which is slowing down CI adoption. Users tend to adopt other GitLab stages once they adopt Verify, so we need to prioritize the CI 1st time experience. 📈

image

More Details

The pipeline authoring team is working on the new dedicated Pipeline Editor for GitLab CI. Creating a dedicated space for authoring a CI configuration gives us an opportunity to create a truly helpful and welcoming 1st time CI experience even for novice users.

This issue explores the improvements to the CI 1st time experience that reduce the time and effort necessary to understand GitLab CI and get started.

Proposal

CI Landing page

  • When a first time CI user clicks on CI/CD in the main nav or clicks on "Set up CI" from the repo page, she is taken directly to the Pipeline Editor page.
  • The Pipeline Editor will be the landing page for CI, that way we don't need to put an empty state between experiencing the product and its value and the developer. You see how it works right away. All you need to do is make a commit to run the pipeline.
  • All other CI pages will have empty states like the one we have for the Pipelines Page, and the CTA would take you to the Pipeline Editor.
  • For users with an existing CI configuration, the landing page when clicking on CI/CD in the nav should remain the Pipelines page since it'll be the most used page at that point. Currently, the Pipelines page is the landing page for CI/CD in the navigation.

Follow-up issues: Providing a guided experience

  • Once you land on the Pipeline Editor page you see an editor with a basic CI template preloaded right away. The template has lots of helpful tips and hints commented out in yaml to make customization of the template easier and explain the syntax in the context of the syntax as much as possible. 🔗 Issue link
  • Above the editor, to provide guidance we can show a permanently dismissable alert with a welcome message, a few words about what's CI and how GitLab CI works, any requirements, next steps, links to docs. 🔗 Issue link
  • The relevant documentation should be available from the Pipeline Editor page in some shape or form. As an MVC we could at least add a link to the docs. 🔗 Issue link
  • We should make the templates more discoverable. Maybe guiding the user to explore the templates could be nice, some kind of popover to explain that we have templates for different types of projects. 🔗 Issue link
Edited by Nadia Sotnikova