Skip to content

Pipeline drawer

Release notes

Creating your first pipeline is difficult, especially for those new to CI/CD, normally you would need to switch back and forth between documentation and our product to setup your first pipeline, in this release we've added the pipeline drawer to help and guide you through your first step when writing your first pipeline

Problem to solve

Creating your first pipeline is difficult, especially for those new to CI/CD. Some of the main pain points are:

  • Yaml syntax is complex and new to those unfamiliar with GitLab CI/CD
  • CI/CD features are difficult to discover without reading through very lengthy documentation
  • Pipeline set-up is difficult to visualize without some type of chart

Overall direction

A visual (UI vs. YAML) pipeline builder would help us address the above problems, as well as provide a delightful experience for GitLab CI/CD users. According to UX research we've conducted, a visual pipeline builder would be the top attractive feature for GitLab CI/CD users.

Long-term vision has been explored in #258970 and is being refined as we validate our ideas, one iteration at a time.

Implementation breakdown

To implement this feature, we are planning the following list of MRs. This will be done behind a disabled feature flag. It was agreed that this issue would be only for the drawer, and everything related to the template is now in #300501 (comment 566915187)

Description MR link
✅ Implement the empty drawer in PA section !60856 (merged)
✅ Add the drawer content !60957 (merged)
✅ Remember collapse state in local storage !61266 (merged)
✅ MR to enable by default !61620 (merged)
Rollout issue #329806 (closed)

MVC iteration proposal

To start addressing the above problems in an MVC way we want make all the existing CI/CD onboarding resources more accessible from the Pipeline Editor UI.

A side drawer can contain information on the necessary onboarding steps, links to the docs and perhaps a simple pipeline visualization (static image) to provide an example of what a pipeline looks like.

  • The drawer should be added for all users
  • The drawer should be expanded by default, but once it's collapsed, we should remember that state, so next time the user opens the Pipeline Editor, the drawer will be collapsed.
  • The drawer should be embedded in the page and push the page content rather than overflow it (the same behavior as in the issue sidebar)
  • The basic CI/CD template proposal has been defined in #300501 (comment 551181067) (the mockups have a placeholder template)
CI/CD onboarding MVC - guided walkthrough in the drawer
image image

Design Specs

Drawer Content

Get started with GitLab CI/CD

GitLab CI/CD helps build, test and deploy your application faster by automating the execution of scripts.

The pipeline stages and jobs are defined in a .gitlab-ci.yml file which you can edit, visualize and validate using Pipeline Editor.

🚀 Run your first pipeline

A typical GitLab pipeline will consist of a Build, Test and Deploy stages with multiple jobs in each stage.

In the example below, each stage contains one job with simple execution scripts.

[pipeline illustration goes here]

Commit and run this pipeline, then navigate to the Pipeline Page to track the pipeline status.

Note: If you’re using self-hosted GitLab instance, make sure you have Runners available.

💡 Tip: Visualize and validate your pipeline

Use the Visualize and Lint tabs of the Pipeline Editor to visualize your pipeline and check for any errors or warnings before committing your changes.

⚙️ Pipeline configuration reference

Resources to help with your CI/CD configuration:

Further details

This issue is to capture the design exploration for the Pipeline Editor Visual Builder MVC based on the sketches and ideas explored in the Pipeline Authoring team sketching exercise as well as feedback received on #258970.

  • Synthesize the ideas generated in the Pipeline Authoring team sketching exercise as well as feedback received on #258970.
  • Create mockups for the main ideas
  • Gather team feedback
  • Polish the designs, get UX team feedback
  • Start implementation breakdown discussions
  • Gather feedback on the drawer content internally

Further information

Dovetail insight

Edited by Frédéric Caplette