Frontend: Pass down and format properly the content for `include:` file links
This is a frontend issue for the original proposal based on the original epic.
Release notes
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. In this release we've added to the pipeline editor, the ability to locate and view the file configuration which are been included in your pipeline.
🧩 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.
Implementation
The breakdown for this feature is as follows:
| Work Type | Description | Issue Link |
|---|---|---|
| backend | Expose includes link | #344937 (closed) |
| frontend | Change the pipeline editor fixed layout to full-width | #346331 (closed) |
| frontend | Introduce the feature flag and the empty drawer. | #350721 (closed) |
| frontend | Pass down the content to the drawer and format it properly |
|
| frontend | Remember the open/closed state in local storage | #350723 (closed) |
| frontend | Add feature discovery popover | #360111 (closed) |
| frontend | Roll out feature flag | #357219 (closed) |
| frontend | Store the pipeline editor popovers state in the database | #360635 |
| backend | Add messaging when files can't be fetched due to invalid CI configuration | #360431 |
The frontend implementation is explained in detail in #344940 (comment 790001555).
Some implementation notes for this step:
- Drawer gets a list of included files which will open in a new tab (the file will open in file view in the repo).
- The
.gitlab-ci.ymlwould 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 project has a simple one-file pipeline, we'll show a 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.ymlyet), 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. - Tests filename are shown and that links are correct