Migrate groups Bootstrap utils to Tailwind
What does this MR do and why?
We are working on migrating the Bootstrap CSS utils to Tailwind CSS so we can reduce the amount of CSS we ship to the customer. https://bootstrap-to-tailwind-css-migration-tracker-cf87ab.gitlab.io/#/ is where we are tracking this. This MR migrates the code in app/assets/javascripts/groups
Reviewer notes
- The spacing scale is different between Bootstrap CSS utils and Tailwind CSS utils. We figured out all the Tailwind equivalents in https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/bin/lib/bootstrap_tailwind_equivalents.json?ref_type=heads and use that for migration.
- Almost all Bootstrap CSS utils have
!importantset. This can make things tricky because a lot of the time it is not needed. In this MR I have removed the!importantfrom the utils that it was not necessary for because I was able to easily test locally.
MR acceptance checklist
Desktop
| Before | After |
|---|---|
 |
 |
Mobile
| Before | After |
|---|---|
 |
 |
How to set up and validate locally
- Checkout this branch
- Go to a group that has subgroups and projects
Merge request reports
Activity
changed milestone to %17.5
added frontend grouptenant scale maintenancerefactor typemaintenance labels
assigned to @peterhegman
added pipelinetier-1 label
added devopsdata stores sectioncore platform labels
Reviewer roulette
Category Reviewer Maintainer frontend @dftian(UTC-10, 3 hours behind author)
@psimyn(UTC+11, 18 hours ahead of author)
Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.
If needed, you can retry the
danger-reviewjob that generated this comment.Generated by
Edited by Ghost UserBundle size analysis [beta]
This compares changes in bundle size for entry points between the commits 5afde560 and d064d725
Entrypoint / Name Size before Size after Diff Diff in percent average 4.38 MB 4.38 MB - 0.0 % mainChunk 3.31 MB 3.31 MB - 0.0 %
Note: We do not have exact data for 5afde560. So we have used data from: b239610e.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.Please look at the full report for more details
Read more about how this report works.
Generated by
- Resolved by Simon Knox
@vanessaotto can you help review this when you have time?
- Last reply by Vanessa Otto
requested review from @vanessaotto
requested review from @psimyn
added pipeline:mr-approved label
added pipelinetier-2 label and removed pipelinetier-1 label
Before you set this MR to auto-merge
This merge request will progress on pipeline tiers until it reaches the last tier: pipelinetier-3. We will trigger a new pipeline for each transition to a higher tier.
Before you set this MR to auto-merge, please check the following:
- You are the last maintainer of this merge request
- The latest pipeline for this merge request is pipelinetier-3 (You can find which tier it is in the pipeline name)
- This pipeline is recent enough (created in the last 8 hours)
If all the criteria above apply, please set auto-merge for this merge request.
See pipeline tiers and merging a merge request for more details.
E2E Test Result Summary
allure-report-publishergenerated test report!e2e-test-on-gdk:
expand test summary
+------------------------------------------------------------------+ | suites summary | +-------------+--------+--------+---------+-------+-------+--------+ | | passed | failed | skipped | flaky | total | result | +-------------+--------+--------+---------+-------+-------+--------+ | Plan | 76 | 0 | 0 | 0 | 76 | ✅ | | Govern | 73 | 0 | 0 | 0 | 73 | ✅ | | Verify | 45 | 0 | 2 | 0 | 47 | ✅ | | Release | 5 | 0 | 0 | 0 | 5 | ✅ | | Data Stores | 33 | 0 | 1 | 0 | 34 | ✅ | | Create | 128 | 0 | 18 | 0 | 146 | ✅ | | Package | 24 | 0 | 11 | 0 | 35 | ✅ | | Monitor | 8 | 0 | 0 | 0 | 8 | ✅ | | Analytics | 2 | 0 | 0 | 0 | 2 | ✅ | | Fulfillment | 2 | 0 | 0 | 0 | 2 | ✅ | | Manage | 1 | 0 | 1 | 0 | 2 | ✅ | | Secure | 4 | 0 | 0 | 0 | 4 | ✅ | +-------------+--------+--------+---------+-------+-------+--------+ | Total | 401 | 0 | 33 | 0 | 434 | ✅ | +-------------+--------+--------+---------+-------+-------+--------+e2e-test-on-omnibus:
expand test summary
+---------------------------------------------------------------------+ | suites summary | +----------------+--------+--------+---------+-------+-------+--------+ | | passed | failed | skipped | flaky | total | result | +----------------+--------+--------+---------+-------+-------+--------+ | Package | 32 | 0 | 13 | 0 | 45 | ✅ | | Govern | 108 | 0 | 6 | 0 | 114 | ✅ | | Systems | 6 | 0 | 1 | 0 | 7 | ✅ | | GitLab Metrics | 2 | 0 | 1 | 0 | 3 | ✅ | | Ai-powered | 1 | 0 | 2 | 0 | 3 | ✅ | | Monitor | 12 | 0 | 13 | 0 | 25 | ✅ | | Create | 559 | 0 | 80 | 1 | 639 | ✅ | | Secure | 5 | 0 | 2 | 0 | 7 | ✅ | | Plan | 83 | 0 | 8 | 0 | 91 | ✅ | | Fulfillment | 4 | 0 | 7 | 0 | 11 | ✅ | | Manage | 25 | 2 | 18 | 5 | 45 | ❌ | | Data Stores | 46 | 0 | 11 | 0 | 57 | ✅ | | Verify | 50 | 0 | 15 | 1 | 65 | ✅ | | Analytics | 3 | 0 | 0 | 0 | 3 | ✅ | | Configure | 1 | 0 | 3 | 0 | 4 | ✅ | | Release | 5 | 0 | 1 | 0 | 6 | ✅ | | ModelOps | 0 | 0 | 1 | 0 | 1 | ➖ | | Growth | 0 | 0 | 2 | 0 | 2 | ➖ | +----------------+--------+--------+---------+-------+-------+--------+ | Total | 942 | 2 | 184 | 7 | 1128 | ❌ | +----------------+--------+--------+---------+-------+-------+--------+Edited by Ghost User
