Skip to content
Snippets Groups Projects

Avatar: Refactor to use gl-avatar

Merged Sascha Eggenberger requested to merge refactor-avatars into master

What does this MR do and why?

Avatar: Refactor to use gl-avatar

Replaces instances of .avatar with .gl-avatar and removes old CSS.

  • Replaces old .avatar instances with GlAvatar or .gl-avatar
  • Removes non compliant 40px sizes with 32px
  • Removes unused CSS

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

Before After
Visual changes
assignee_before assignee_after
mr_commits_before mr_commits_after
board_before board_after
files_before files_after
No visual changes
group_before group_after
project_before project_after
issue_before issue_after
mr_before mr_after
billing_before billing_after
profile_before profile_after
job_before job_after

How to set up and validate locally

  1. Group: http://gdk.test:3000/flightjs
  2. Project: http://gdk.test:3000/flightjs/Flight
  3. Issue: http://gdk.test:3000/flightjs/Flight/-/issues/38
  4. MR: http://gdk.test:3000/flightjs/Flight/-/merge_requests/4
  5. MR Commits: http://gdk.test:3000/flightjs/Flight/-/merge_requests/4/commits
  6. Billing: http://gdk.test:3000/-/profile/billings
  7. Issue boards: http://gdk.test:3000/groups/flightjs/-/boards/3?assignee_username=arie.wyman
  8. User profile: http://gdk.test:3000/users/root/activity
  9. Commit: http://gdk.test:3000/flightjs/Flight/-/commit/6e399a0205f2446b6702d36d61ad3ff7e2bff3ee
  10. Job: http://gdk.test:3000/flightjs/Flight/-/jobs/863

Related to #469616 (closed)

Edited by Sascha Eggenberger

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
  • Ghost User
  • A deleted user added backend label

    added backend label

  • 3 Warnings
    :warning: This MR changes code in ee/, but its Changelog commit is missing the EE: true trailer. Consider adding it to your Changelog commits.
    :warning: This merge request changed files with disabled eslint rules. Please consider fixing them.
    :warning:

    This merge request changed undocumented Vue components in vue_shared/. Please consider creating Stories for these components:

    • app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue
    1 Message
    :book: This merge request includes changes to Vue files that have both CE and EE versions.

    Vue <template> in CE and EE

    Some Vue files in CE have a counterpart in EE. (For example, path/to/file.vue and ee/path/to/file.vue.)

    When run in the context of CE, the <template> of the CE Vue file is used. When run in the context of EE, the <template> of the EE Vue file is used.

    It's easy to accidentally make a change to a CE <template> that should appear in both CE and EE without making the change in both places. When this happens, the change only takes effect in CE.

    The following Vue files were changed as part of this merge request that include both a CE and EE version of the file:

    • app/assets/javascripts/boards/components/board_list_header.vue

    If you made a change to the <template> of any of these Vue files that should be visible in both CE and EE, please ensure you have made your change to both versions of the file.

    A better alternative

    An even better alternative is to refactor this component to only use a single template for both CE and EE. More info on this approach here: https://docs.gitlab.com/ee/development/ee_features.html#template-tag

    Disabled eslint rules

    The following files have disabled eslint rules. Please consider fixing them:

    • app/assets/javascripts/diffs/components/commit_item.vue
    • app/assets/javascripts/users_select/index.js
    • spec/frontend/gfm_auto_complete_spec.js

    Run the following command for more details

    node_modules/.bin/eslint --report-unused-disable-directives --no-inline-config \
      'app/assets/javascripts/diffs/components/commit_item.vue' \
      'app/assets/javascripts/users_select/index.js' \
      'spec/frontend/gfm_auto_complete_spec.js'

    Reviewer roulette

    Category Reviewer Maintainer
    backend @ivaneG profile link current availability (UTC+1, 1 hour behind author) @a_akgun profile link current availability (UTC+3, 1 hour ahead of author)
    frontend @jachapman profile link current availability (UTC+1, 1 hour behind author) @ntepluhina profile link current availability (UTC+2, same timezone as author)
    UX @paintedbicycle-gitlab profile link current availability (UTC+0, 2 hours behind author) Maintainer review is optional for UX
    Application Security Reviewer review is optional for Application Security @ngeorge1 profile link current availability (UTC+1, 1 hour 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.

    Tailwind CSS

    Interpolated utils

    The following files might contain interpolated utils:

    • app/helpers/avatars_helper.rb
    • app/helpers/projects_helper.rb
    • spec/helpers/avatars_helper_spec.rb

    If you are leveraging CSS utilities, make sure they are written in full and not built via string interpolation as that would prevent Tailwind CSS from generating them.

    If needed, you can retry the :repeat: danger-review job that generated this comment.

    Generated by :no_entry_sign: Danger

  • Sascha Eggenberger changed the description

    changed the description

  • removed backend label

  • added 1 commit

    • 55904ae3 - Avatar: Refactor to use gl-avatar

    Compare with previous version

  • Ghost User
  • A deleted user added backend label

    added backend label

  • requested review from @annabeldunstone

  • added 61 commits

    Compare with previous version

  • Ghost User
  • Bundle size analysis [beta]

    This compares changes in bundle size for entry points between the commits b0104d8f and b1067154

    :sparkles: Special assets

    Entrypoint / Name Size before Size after Diff Diff in percent
    average 4.33 MB 4.33 MB - 0.0 %
    mainChunk 3.27 MB 3.27 MB - 0.0 %

    Note: We do not have exact data for b0104d8f. So we have used data from: 2249c6cd.
    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 :no_entry_sign: Danger

  • requested changes

  • added 1 commit

    • 8d2e02b9 - Avatar: Refactor to use gl-avatar

    Compare with previous version

  • requested review from @annabeldunstone

  • Ghost User
  • added 1 commit

    • 045d4d89 - Avatar: Refactor to use gl-avatar

    Compare with previous version

  • Ghost User
  • Annabel Dunstone Gray approved this merge request

    approved this merge request

  • removed review request for @annabeldunstone

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

  • Ghost User
  • added 52 commits

    Compare with previous version

  • Ghost User
  • :tools: Generated by gitlab_quality-test_tooling.


    :snail: Slow tests detected in this merge request. These slow tests might be related to this merge request's changes.

    Click to expand
    Job File Name Duration Expected duration
    #7668431864 spec/features/admin/users/users_spec.rb#L177 Admin::Users GET /admin/users when blocking/unblocking a user shows confirmation and allows blocking and unblocking 66.3 s < 50.13 s
    #7718374550 spec/features/admin/users/users_spec.rb#L177 Admin::Users GET /admin/users when blocking/unblocking a user shows confirmation and allows blocking and unblocking 66.59 s < 50.13 s
    #7718828442 spec/features/admin/users/users_spec.rb#L177 Admin::Users GET /admin/users when blocking/unblocking a user shows confirmation and allows blocking and unblocking 65.73 s < 50.13 s
    #7720021656 spec/features/admin/users/users_spec.rb#L177 Admin::Users GET /admin/users when blocking/unblocking a user shows confirmation and allows blocking and unblocking 65.85 s < 50.13 s
    #7721762080 spec/features/admin/users/users_spec.rb#L177 Admin::Users GET /admin/users when blocking/unblocking a user shows confirmation and allows blocking and unblocking 66.56 s < 50.13 s
    #7725880290 spec/features/admin/users/users_spec.rb#L177 Admin::Users GET /admin/users when blocking/unblocking a user shows confirmation and allows blocking and unblocking 65.4 s < 50.13 s
    #7727032338 spec/features/admin/users/users_spec.rb#L177 Admin::Users GET /admin/users when blocking/unblocking a user shows confirmation and allows blocking and unblocking 65.69 s < 50.13 s
    #7729181372 spec/features/admin/users/users_spec.rb#L177 Admin::Users GET /admin/users when blocking/unblocking a user shows confirmation and allows blocking and unblocking 66.03 s < 50.13 s
    #7742334507 spec/features/admin/users/users_spec.rb#L177 Admin::Users GET /admin/users when blocking/unblocking a user shows confirmation and allows blocking and unblocking 66.07 s < 50.13 s
    #7744062595 spec/features/admin/users/users_spec.rb#L177 Admin::Users GET /admin/users when blocking/unblocking a user shows confirmation and allows blocking and unblocking 65.89 s < 50.13 s
    #7745693559 spec/features/admin/users/users_spec.rb#L177 Admin::Users GET /admin/users when blocking/unblocking a user shows confirmation and allows blocking and unblocking 65.7 s < 50.13 s
    #7745904547 spec/features/admin/users/users_spec.rb#L177 Admin::Users GET /admin/users when blocking/unblocking a user shows confirmation and allows blocking and unblocking 66.25 s < 50.13 s
  • A deleted user added rspec:slow test detected label
  • E2E Test Result Summary

    allure-report-publisher generated test report!

    e2e-test-on-gdk: :white_check_mark: test report for b1067154

    expand test summary
    +------------------------------------------------------------------+
    |                          suites summary                          |
    +-------------+--------+--------+---------+-------+-------+--------+
    |             | passed | failed | skipped | flaky | total | result |
    +-------------+--------+--------+---------+-------+-------+--------+
    | Govern      | 72     | 0      | 0       | 0     | 72    | ✅     |
    | Secure      | 3      | 0      | 0       | 0     | 3     | ✅     |
    | Plan        | 73     | 0      | 0       | 0     | 73    | ✅     |
    | Create      | 128    | 0      | 16      | 0     | 144   | ✅     |
    | Package     | 19     | 0      | 13      | 0     | 32    | ✅     |
    | Data Stores | 31     | 0      | 1       | 0     | 32    | ✅     |
    | Verify      | 44     | 0      | 2       | 0     | 46    | ✅     |
    | Fulfillment | 2      | 0      | 0       | 0     | 2     | ✅     |
    | Manage      | 1      | 0      | 1       | 0     | 2     | ✅     |
    | Release     | 5      | 0      | 0       | 0     | 5     | ✅     |
    | Monitor     | 8      | 0      | 0       | 0     | 8     | ✅     |
    | Analytics   | 2      | 0      | 0       | 0     | 2     | ✅     |
    +-------------+--------+--------+---------+-------+-------+--------+
    | Total       | 388    | 0      | 33      | 0     | 421   | ✅     |
    +-------------+--------+--------+---------+-------+-------+--------+
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Please register or sign in to reply
    Loading