Skip to content

Fetch and display includes files in pipeline editor

Mireya Andres requested to merge pipeline-editor-file-tree-data into master

What does this MR do and why?

For #350722 (closed).

Requires !84279 (merged) (backend change) to be merged first.

This fetches the list of includes files used in the CI config and displays them in the file tree. By default, each item will link to the raw path of the file (see this discussion for context). If the blob path is available, we link to that instead.

No changelog trailers added since this feature is disabled behind a feature flag.

Screenshots or screen recordings

If there are no includes files, we show the tip in the file tree. The Learn More button is removed for now since we don't have the docs for them yet (I'll add it back when the docs are written up).

If there are includes files, we display them in the file tree.

file_tree

The file tree button is disabled and shows the loading icon while the app is still fetching the data.

loading

How it looks when the file tree has a long list of files:

responsive view

How to set up and validate locally

  1. Enable the feature flag.

    Feature.enable(:pipeline_editor_file_tree)
  2. Create a YAML file that we will use as a local includes file. For this example, we will name it test-include.yml. Add the following content to the file:

    long-include-job:
      stage: test
      script:
        - echo "running long-include-job"
  3. Update your CI config (.gitlab-ci.yml by default) with the following content:

    stages:
      - test
      - deploy
    
    include:
      - local: 'test-include.yml'
      - template: npm.gitlab-ci.yml
  4. Visit the pipeline editor (CI/CD > Editor)

  5. Wait for the data to load then click on the file tree button. Verify that the includes files are displayed correctly.

MR acceptance checklist

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

Edited by Mireya Andres

Merge request reports