Skip to content

Move commit description styles to a page-specific bundle

What does this MR do and why?

This moves the .commit-description and .commit-row-description style definitions to a page-specific CSS bundle imported in the relevant areas.

It also updates the app/assets/stylesheets/page_bundles/commits.scss page bundle to leverage CSS variables instead of SASS ones. This should ensure we are using proper dark theme overrides.

Finally, this moves app/assets/stylesheets/page_bundles/commits.scss out of the feature flag check. This page bundle was created in !144337 (merged) so we've had some time to verify that it did not cause regressions over the last few days, it should therefore be safe to finalize the move to a page-bundle there.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

6fbf009f

Preview
Add or remove previously merged commits Screenshot_2024-02-21_at_4.16.01_PM
Add or remove previously merged commits Screenshot_2024-02-21_at_8.29.34_AM

How to set up and validate locally

  1. In a merge request, navigate to the Commits tab, click on Add previously merged commits, then click in the search input. You're looking for the <yyyy-mm-dd> text hint.
  2. In a project commits list, scroll down a few times to load more commits, then run document.querySelector('.commits-row + .commits-row') in the console and inspect the found element, its borders should be consistent with the rest of the page.

114be841

Preview
Commit details page Screenshot_2024-02-21_at_8.02.56_AM
Commits page Screenshot_2024-02-21_at_8.03.23_AM
Wiki diff page Screenshot_2024-02-21_at_8.03.38_AM
Merge request commits tab Screenshot_2024-02-21_at_8.03.55_AM
Project overview page Screenshot_2024-02-21_at_8.04.13_AM
AI commit message MR widget (I couldn't get this to work in my GDK) N/A

How to set up and validate locally

Note: In all cases, this migration affects multiline commit messages, so you will want to ensure you have such commits to test the changes against.

  1. In rails console enable the page_specific_styles feature flag.
    Feature.enable(: page_specific_styles)
  2. Visit a commit details page (http://gdk.test:3000/flightjs/Flight/-/commit/8749d49930866a4871fa086adbd7d2057fcc3ebb).
  3. Visit a project commits page (http://gdk.test:3000/flightjs/Flight/-/commits/master?ref_type=heads).
  4. Visit a Wiki diff page (http://gdk.test:3000/flightjs/Flight/-/wikis/home/diff?version_id=<commit_sha>).
  5. In a merge request, navigate to the Commits tab.
  6. Navigate to a project overview page.

Related to #239804

Edited by Paul Gascou-Vaillancourt

Merge request reports