Design: Add `include:` file links to the pipeline editor (file tree MVC)
🧩 Problem
Complex CI/CD configuration can contain multiple pipelines added to the main config using the include
keyword. When editing or troubleshooting your config it's difficult to navigate between the .gitlab-ci-yml
and the included files.
Additionally, a complex pipeline configuration might contain separate files for downstream pipelines and other files.
Engineers who author pipelines would like to edit all of their pipelines files in one place and take advantage of the pipeline editor features like pipeline visualization, linting, etc.
🎨 Proposal
As an MVC, we will surface a list of links to the pipeline files added to the config with the include:
keyword.
Feature acceptance criteria:
- A collapsible files section will contain a list of the includes which will open in a new tab (the file will open in file view in the repo).
- The
.gitlab-ci.yml
would be highlighted as the currently open file (it won't be clickable as it's already open in the pipeline editor). - The other pipeline files will show an external link icon on hover.
- The file names should be truncated after a certain number of characters, like we do in the MRs file tree. When a file name is truncated, we should show the full file name in a system tooltip on hover (same behavior as in the MRs file tree).
- When the list of files is long, it should be scrollable.
- The file tree will open using the "file tree" icon button placed above the file tree.
- When project has a simple one-file pipeline, we'll show a permanently dismissable notification inside the files section explaining that pipeline files will appear here.
- When project doesn't have a pipeline file yet (for example, when you haven't committed the
.gitlab-ci.yml
yet), we won't show the file tree section and the file tree button. We will show the button and the file tree once you commit the file.❓ - For feature discovery, we'll show a new feature popover next to the file tree button for projects with at least one pipeline.
🔗 Figma prototype
🔗 Figma specs
⬇
See the mock-ups attached below Open questions
- The BE issue will define which files we'll be able to surface in the files section.
Next iterations
- Add a search bar for files like in the MRs
- Add a file path hierarchy for files like in the MRs
Relevant links
Edited by Nadia Sotnikova