Skip to content
Snippets Groups Projects

Fix leading of CiIcon text and make sure it is vertically centered

Merged Chad Lavimoniere requested to merge 20240906-clavimoniere-ciicon-text into master
All threads resolved!

What does this MR do and why?

Prevent the text in a CiIcon component from inheriting line height from a parent element, and make sure that it is vertically centered.

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.

Screenshots or screen recordings

Usage Before After
MR Pipelines page
(No change)
image image
Job page
(No change)
image image
Job artifact page
(Fixed)
image image

How to set up and validate locally

  1. Check out this branch
  2. In the GDK, ensure you have a pipeline job that creates artifacts
  3. Make that job run
  4. Visit the artifacts browse page for the job
  5. The CiIcon with the job status in the page header will not be malformed.

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • Chad Lavimoniere resolved all threads

    resolved all threads

  • cc @markrian and @seggenberger

    Sascha I know you're hesitant about fixing this this way, but I feel pretty confident that this approach should work as intended for the status text on all CiIcons (vue and haml).

  • A deleted user added backend frontend labels

    added backend frontend labels

  • 3 Warnings
    :warning: There were no new or modified feature flag YAML files detected in this MR.

    If the changes here are already controlled under an existing feature flag, please add
    the feature flagexists. Otherwise, if you think the changes here don't need
    to be under a feature flag, please add the label feature flagskipped, and
    add a short comment about why we skipped the feature flag.

    For guidance on when to use a feature flag, please see the documentation.

    :warning: This merge request contains lines with testid selectors. Please ensure e2e:test-on-omnibus job is run.
    :warning: You've made some app changes, but didn't add any tests.
    That's OK as long as you're refactoring existing code,
    but please consider adding any of the maintenancepipelines, maintenancerefactor, maintenanceworkflow, documentation, QA labels.

    testid selectors

    The following changed lines in this MR contain testid selectors:

    app/helpers/ci/status_helper.rb

    -          content_tag(:span, ci_icon_for_status(status), { class: icon_wrapper_class }) + content_tag(:span, status.label, { class: 'gl-mx-2 gl-whitespace-nowrap', data: { testid: 'ci-icon-text' } })
    +          content_tag(:span, ci_icon_for_status(status), { class: icon_wrapper_class }) + content_tag(:span, status.label, { class: 'gl-mx-2 gl-whitespace-nowrap gl-leading-1 gl-self-center', data: { testid: 'ci-icon-text' } })

    If the e2e:test-on-omnibus job in the qa stage has run automatically, please ensure the tests are passing. If the job has not run, please start the manual:e2e-test-pipeline-generate job in the prepare stage and ensure the tests in follow-up:e2e:test-on-omnibus-ee pipeline are passing.

    For the list of known failures please refer to the latest pipeline triage issue.

    If your changes are under a feature flag, please check our Testing with feature flags documentation for instructions.

    Reviewer roulette

    Category Reviewer Maintainer
    backend @bauerdominic profile link current availability (UTC+2, 6 hours ahead of author) @reprazent profile link current availability (UTC+2, 6 hours ahead of author)
    frontend @cwoolley-gitlab profile link current availability (UTC-7, 3 hours behind author) @xanf profile link current availability (UTC+3, 7 hours ahead of author)
    ~"Verify" Reviewer review is optional for ~"Verify" @stanhu profile link current availability (UTC-7, 3 hours behind 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 :repeat: danger-review job that generated this comment.

    Generated by :no_entry_sign: Danger

  • Bundle size analysis [beta]

    This compares changes in bundle size for entry points between the commits aa67ec0f and 3da1daec

    :sparkles: Special assets

    Entrypoint / Name Size before Size after Diff Diff in percent
    average 4.35 MB 4.35 MB - 0.0 %
    mainChunk 3.29 MB 3.29 MB - 0.0 %

    Please look at the full report for more details


    Read more about how this report works.

    Generated by :no_entry_sign: Danger

  • Chad Lavimoniere requested review from @markrian

    requested review from @markrian

  • requested review from @seggenberger

    • Resolved by Max Fan

      @clavimoniere This change looks okay to me in principle, but:

      • It looks like this component is used in lots of places (rightly so!), and I'm not sure the three screenshots capture all the places it's used.
      • I'm not so familiar with all the places it's used.

      So, I'd feel more comfortable passing this on to a domain expert.

      @mrincon Do you have capacity to review this? At least, I know you've spotted lots of CI icon regressions in the past :sweat_smile:

  • Mark Florian requested review from @mrincon and removed review request for @markrian and @seggenberger

    requested review from @mrincon and removed review request for @markrian and @seggenberger

  • Mark Florian
  • Illya Klymov requested review from @xanf and removed review request for @mrincon

    requested review from @xanf and removed review request for @mrincon

  • Illya Klymov approved this merge request

    approved this merge request

  • Illya Klymov resolved all threads

    resolved all threads

  • 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.

  • Illya Klymov enabled automatic add to merge train when checks pass

    enabled automatic add to merge train when checks pass

  • Chad Lavimoniere requested review from @jivanvl

    requested review from @jivanvl

  • requested review from @mfanGitLab

  • Jose Ivan Vargas removed review request for @jivanvl

    removed review request for @jivanvl

  • E2E Test Result Summary

    allure-report-publisher generated test report!

    e2e-test-on-gdk: :white_check_mark: test report for 3da1daec

    expand test summary
    +------------------------------------------------------------------+
    |                          suites summary                          |
    +-------------+--------+--------+---------+-------+-------+--------+
    |             | passed | failed | skipped | flaky | total | result |
    +-------------+--------+--------+---------+-------+-------+--------+
    | Create      | 128    | 0      | 16      | 0     | 144   | ✅     |
    | Verify      | 44     | 0      | 2       | 0     | 46    | ✅     |
    | Monitor     | 8      | 0      | 0       | 0     | 8     | ✅     |
    | Govern      | 72     | 0      | 0       | 0     | 72    | ✅     |
    | Plan        | 74     | 0      | 1       | 0     | 75    | ✅     |
    | Data Stores | 31     | 0      | 1       | 0     | 32    | ✅     |
    | Package     | 20     | 0      | 12      | 0     | 32    | ✅     |
    | Release     | 5      | 0      | 0       | 0     | 5     | ✅     |
    | Analytics   | 2      | 0      | 0       | 0     | 2     | ✅     |
    | Manage      | 1      | 0      | 1       | 0     | 2     | ✅     |
    | Fulfillment | 2      | 0      | 0       | 0     | 2     | ✅     |
    | Secure      | 4      | 0      | 0       | 0     | 4     | ✅     |
    +-------------+--------+--------+---------+-------+-------+--------+
    | Total       | 391    | 0      | 33      | 0     | 424   | ✅     |
    +-------------+--------+--------+---------+-------+-------+--------+

    e2e-test-on-omnibus: :white_check_mark: test report for 3da1daec

    expand test summary
    +-------------------------------------------------------------+
    |                       suites summary                        |
    +--------+--------+--------+---------+-------+-------+--------+
    |        | passed | failed | skipped | flaky | total | result |
    +--------+--------+--------+---------+-------+-------+--------+
    | Verify | 51     | 0      | 15      | 4     | 66    | ✅     |
    | Create | 405    | 0      | 54      | 0     | 459   | ✅     |
    +--------+--------+--------+---------+-------+-------+--------+
    | Total  | 456    | 0      | 69      | 4     | 525   | ✅     |
    +--------+--------+--------+---------+-------+-------+--------+
  • Max Fan approved this merge request

    approved this merge request

  • Max Fan resolved all threads

    resolved all threads

  • merged

  • Illya Klymov mentioned in commit 2238cf7a

    mentioned in commit 2238cf7a

  • Please register or sign in to reply
    Loading