Migrate remaining CI pages to container queries (the big one)
What does this MR do and why?
Migrate remaining CI pages to containers
This change migrates CI-related Vue components and SCSS files to use container queries.
The changes include:
- Updating various CI Vue components to use
gl-*classes - Adjusting
pipeline_editor.scssto use container queries - Migrating several verify HAML files to use
gl-*
Technical details
This change migrates most devopsverify files, including JS HAML and CSS.
The migrations were done using this migration script
scripts/frontend/migrate_to_container_queries.mjs $(find app/assets/javascripts/ci/ -type f) # JS
scripts/frontend/migrate_to_container_queries.mjs $(find ee/app/assets/javascripts/ci/ -type f) # EE JS
scripts/frontend/migrate_to_container_queries.mjs $(find app/views/projects/artifacts/ -type f) # HAML
scripts/frontend/migrate_to_container_queries.mjs $(find app/views/projects/pipelines/ -type f) # HAML
scripts/frontend/migrate_to_container_queries.mjs $(find app/views/projects/ci/ -type f) # HAML
scripts/frontend/migrate_to_container_queries.mjs $(find ee/app/views/projects/settings/ci_cd/ -type f) # HAML
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/page_bundles/ci_status.scss
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/page_bundles/build.scss
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/page_bundles/pipeline.scss
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/page_bundles/pipelines.scss
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/page_bundles/pipeline_editor.scss
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/pages/pipelines.scss
scripts/frontend/migrate_to_container_queries.mjs ee/app/assets/stylesheets/page_bundles/runners.scss
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/page_bundles/log_viewer.scss
scripts/frontend/migrate_to_container_queries.mjs app/assets/stylesheets/page_bundles/xterm.scss
yarn run prettier --write $(git diff --name-only)References
Screenshots or screen recordings
The are changes in a few pages of the application, I did some smoke testing here:
| https://gdk.test:3000/my-group/my-project/-/artifacts | https://gdk.test:3000/explore/catalog | https://gdk.test:3000/my-group/my-components/-/ci/editor?branch_name=master |
|---|---|---|
| Project > Build > Artifacts | Explore > CI/CD Catalog | Project > Build > Pipeline Editor |
 |
 |
 
|
| The delete checkbox is repositioned in smaller sizes | The tabs reflow and some project info is realigned | The file list flows to the top of the editor, buttons on top of the editor flow correctly. Lint CI/CD sample flows to the left of the screen in small sizes. |
| https://gdk.test:3000/groups/my-group/-/settings/ci_cd#ci-variables | https://gdk.test:3000/my-group/my-project/-/jobs/?kind=BUILD | https://gdk.test:3000/groups/my-group/-/runners/dashboard |
|---|---|---|
| Group > CI/CD Settings > Variables | Project > Build > Jobs | Group > Build > Runners |
 |
 
|
 |
| Table of variables flows correctly | Jobs table flows correctly | Runners header and table elements flow correctly |
How to set up and validate locally
You can switch between the new UI and the normal UI with:
- Off:
echo "Feature.disable(:tailwind_container_queries) && Feature.disable(:global_topbar) && Feature.disable(:paneled_view)" | bundle exec rails c - On:
echo "Feature.enable(:tailwind_container_queries) && Feature.enable(:global_topbar) && Feature.enable(:paneled_view)" | bundle exec rails c
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Related to #567314
Edited by Miguel Rincon