Frontend: Introduce feature flag and empty drawer for `include:` file links
This is a frontend issue for the original proposal based on the original epic.
🧩 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. |
|
| frontend | Pass down the content to the drawer and format it properly | #350722 (closed) |
| 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) |
| backend | Backend: Add toggle flag to UserCalloutFeatureNameEnum to allow for popover dismissal | #365347 |
| 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 can be expanded and closed
- The icon is present to toggle it
- Tests are written for the feature flag and the expand/close state