Experiment: Pipeline Editor Walkthrough

What does this MR do and why?

Part of #334660 (closed)

This MR implements an experiment in the Pipeline Editor page. The experiment's goal is to determine which is more effective in helping users add pipelines to a project: a popover walkthrough or the existing drawer containing onboarding steps.

Control

This is the current behavior. The drawer with onboarding steps is expanded by default.

Show screenshot

Candidate

This is the new behavior for the experiment. It

• Shows popover guiding the user to commit a new CI config file
  • Popover is open by default (on page load)
  • The page scrolls to the commit form and closes the popover when CTA button is clicked
  • Popover can be closed by clicking anywhere else in the page
• The drawer is closed by default

Show screenshot

Screenshots or screen recordings

Candidate

How to set up and validate locally

Setup

1. Enable :pipeline_editor_walkthrough experiment feature flag in rails console:

   Feature.enable(:pipeline_editor_walkthrough)

2. Create a project with Auto DevOps disabled in the project settings CI/CD section (Auto DevOps will add pipelines to a MR which we don't want)

Validate

1. Go to the Pipeline Editor page of the project you just created At this point, there should be no CI config file (.gitlab-ci.yml) in the project yet. Otherwise, you will not see the popover.

   Show screenshot

   

2. Click on "Create new CI/CD pipeline" button

   Show screenshot

   

3. Validate that the popover is shown

   Show screenshot

   

4. Validate that the drawer is closed

   If the drawer is open, please check if there is a pipeline_editor_drawer_expanded key in Local Storage. (Developer tools > Application tab > In the left side, check Local Storage)

   Show screenshot

   

5. Click on the popover CTA button and validate that the page scrolls to the commit form

   If viewport is tall enough that the commit form is already visible, you might not experience the scrolling behavior

   Show GIF

   

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.