Avatar: Refactor img to use GlAvatar

Changelog: changed

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

 <script>
 import {
+  GlAvatar,
   GlButton,
   GlButtonGroup,
   GlLabel,
@@ -39,6 +40,7 @@ export default {
     ),
   },
   components: {
+    GlAvatar,
     GlButton,
     GlButtonGroup,
     GlLabel,
@@ -366,14 +368,14 @@ export default {
           'gl-mt-5 gl-rotate-90': list.collapsed,
         }"
       >
-        <img
+        <gl-avatar
           v-gl-tooltip.hover.bottom
           :title="listAssignee"
           :alt="list.assignee.name"
           :src="list.assignee.avatarUrl"
-          class="avatar s20"
-          height="20"
-          width="20"
+          :entity-name="list.assignee.name"
+          :size="24"
+          class="gl-mr-3"
         />
       </a>
       <!-- EE end -->

app/assets/javascripts/sidebar/components/assignees/assignee_avatar.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlAvatar, GlIcon } from '@gitlab/ui';
 import { TYPE_ISSUE, TYPE_MERGE_REQUEST } from '~/issues/constants';
 import { __, sprintf } from '~/locale';
 
 export default {
   components: {
+    GlAvatar,
     GlIcon,
   },
   props: {
@@ -43,13 +44,12 @@ export default {
 </script>
 
 <template>
-  <span class="position-relative">
-    <img
-      :alt="assigneeAlt"
+  <span class="gl-relative">
+    <gl-avatar
+      :label="user.name"
       :src="avatarUrl"
-      :width="imgSize"
-      :class="`s${imgSize}`"
-      class="avatar avatar-inline m-0"
+      :size="imgSize"
+      :alt="assigneeAlt"
       data-testid="avatar-image"
     />
     <gl-icon v-if="hasMergeIcon" name="warning-solid" aria-hidden="true" class="merge-icon" />

app/assets/javascripts/sidebar/components/reviewers/reviewer_avatar.vue

 <script>
 // NOTE! For the first iteration, we are simply copying the implementation of Assignees
 // It will soon be overhauled in Issue https://gitlab.com/gitlab-org/gitlab/-/issues/233736
-import { GlIcon } from '@gitlab/ui';
+import { GlAvatar, GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 export default {
   components: {
+    GlAvatar,
     GlIcon,
   },
   props: {
@@ -33,14 +34,8 @@ export default {
 </script>
 
 <template>
-  <span class="position-relative">
-    <img
-      :alt="reviewerAlt"
-      :src="avatarUrl"
-      :width="imgSize"
-      :class="`s${imgSize}`"
-      class="avatar avatar-inline m-0"
-    />
+  <span class="gl-relative">
+    <gl-avatar :label="user.name" :src="avatarUrl" :size="imgSize" :alt="reviewerAlt" />
     <gl-icon
       v-if="hasMergeIcon"
       name="warning-solid"

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue

 <script>
-import { GlTooltipDirective, GlLink } from '@gitlab/ui';
+import { GlAvatar, GlLink, GlTooltipDirective } from '@gitlab/ui';
 
 export default {
   name: 'MrWidgetAuthor',
   components: {
+    GlAvatar,
     GlLink,
   },
   directives: {
@@ -37,9 +38,9 @@ export default {
     :title="showAuthorName ? null : author.name"
     class="mr-widget-author"
   >
-    <img :src="avatarUrl" :alt="author.name" class="avatar avatar-inline s16" /><span
+    <gl-avatar :src="avatarUrl" :size="16" :alt="author.name" /><span
       v-if="showAuthorName"
-      class="author"
+      class="author gl-ml-2"
       >{{ author.name }}</span
     >
   </gl-link>

app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue

 <script>
 import {
+  GlAvatar,
   GlIcon,
   GlDropdown,
   GlDropdownDivider,
@@ -33,6 +34,7 @@ export default {
     ASSIGNEES_BLOCK: s__('AlertManagement|Alert assignees: %{assignees}'),
   },
   components: {
+    GlAvatar,
     GlIcon,
     GlDropdown,
     GlDropdownItem,
@@ -282,7 +284,7 @@ export default {
     >
       <div v-if="userName" class="gl-mt-2 gl-inline-flex" data-testid="assigned-users">
         <span class="gl-relative gl-mr-4">
-          <img :alt="userName" :src="userImg" :width="32" class="avatar avatar-inline s32 gl-m-0" />
+          <gl-avatar :src="userImg" :size="32" :alt="userName" />
         </span>
         <span class="gl-flex gl-flex-col gl-overflow-hidden">
           <strong class="dropdown-menu-user-full-name">

app/assets/stylesheets/framework/lists.scss

@@ -164,10 +164,6 @@ ul.content-list {
   .badge-secondary {
     color: $gl-text-color-secondary;
   }
-
-  .avatar-cell {
-    align-self: flex-start;
-  }
 }
 
 ul.content-list.content-list-items-padding > li,

app/views/projects/commits/_commit.html.haml

@@ -24,8 +24,8 @@
 - add_page_specific_style 'page_bundles/commit_description'
 
 %li{ class: ["commit flex-row", ("js-toggle-container" if collapsible)], id: "commit-#{commit.short_id}" }
-  .avatar-cell.gl-my-2
-    = author_avatar(commit, size: 32, has_tooltip: false, css_class: 'gl-inline-block')
+  .gl-self-start.gl-hidden.sm:gl-block
+    = author_avatar(commit, size: 40, has_tooltip: false)
 
   .commit-detail.flex-list.gl-flex.gl-justify-between.gl-items-center.gl-grow.gl-min-w-0
     .commit-content{ data: { testid: 'commit-content' } }

spec/frontend/sidebar/components/assignees/assignee_avatar_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlAvatar } from '@gitlab/ui';
 import { TEST_HOST } from 'helpers/test_constants';
 import AssigneeAvatar from '~/sidebar/components/assignees/assignee_avatar.vue';
 import userDataMock from '../../user_data_mock';
@@ -26,7 +27,7 @@ describe('AssigneeAvatar', () => {
     window.gon = { default_avatar_url: TEST_DEFAULT_AVATAR_URL };
   });
 
-  const findImg = () => wrapper.find('img');
+  const findAvatar = () => wrapper.findComponent(GlAvatar);
 
   it('does not show warning icon if assignee can merge', () => {
     createComponent();
@@ -65,6 +66,6 @@ describe('AssigneeAvatar', () => {
       },
     });
 
-    expect(findImg().element.src).toEqual(expected);
+    expect(findAvatar().props('src')).toEqual(expected);
   });
 });

spec/frontend/sidebar/components/assignees/assignees_spec.js

-import { GlIcon } from '@gitlab/ui';
+import { GlAvatar, GlIcon } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { trimText } from 'helpers/text_helper';
 import UsersMockHelper from 'helpers/user_mock_data_helper';
@@ -79,8 +79,8 @@ describe('Assignee component', () => {
       const assignee = collapsedChildren.at(0);
 
       expect(collapsedChildren.length).toBe(1);
-      expect(assignee.find('.avatar').element.src).toBe(UsersMock.user.avatar);
-      expect(assignee.find('.avatar').attributes('alt')).toBe(`${UsersMock.user.name}'s avatar`);
+      expect(assignee.findComponent(GlAvatar).props('src')).toBe(UsersMock.user.avatar);
+      expect(assignee.findComponent(GlAvatar).props('alt')).toBe(`${UsersMock.user.name}'s avatar`);
 
       expect(trimText(assignee.find('.author').text())).toBe(UsersMock.user.name);
     });
@@ -100,15 +100,15 @@ describe('Assignee component', () => {
 
       const first = collapsedChildren.at(0);
 
-      expect(first.find('.avatar').element.src).toBe(users[0].avatar_url);
-      expect(first.find('.avatar').attributes('alt')).toBe(`${users[0].name}'s avatar`);
+      expect(first.findComponent(GlAvatar).props('src')).toBe(users[0].avatar_url);
+      expect(first.findComponent(GlAvatar).props('alt')).toBe(`${users[0].name}'s avatar`);
 
       expect(trimText(first.find('.author').text())).toBe(users[0].name);
 
       const second = collapsedChildren.at(1);
 
-      expect(second.find('.avatar').element.src).toBe(users[1].avatar_url);
-      expect(second.find('.avatar').attributes('alt')).toBe(`${users[1].name}'s avatar`);
+      expect(second.findComponent(GlAvatar).props('src')).toBe(users[1].avatar_url);
+      expect(second.findComponent(GlAvatar).props('alt')).toBe(`${users[1].name}'s avatar`);
 
       expect(trimText(second.find('.author').text())).toBe(users[1].name);
     });
@@ -126,8 +126,8 @@ describe('Assignee component', () => {
 
       const first = collapsedChildren.at(0);
 
-      expect(first.find('.avatar').element.src).toBe(users[0].avatar_url);
-      expect(first.find('.avatar').attributes('alt')).toBe(`${users[0].name}'s avatar`);
+      expect(first.findComponent(GlAvatar).props('src')).toBe(users[0].avatar_url);
+      expect(first.findComponent(GlAvatar).props('alt')).toBe(`${users[0].name}'s avatar`);
 
       expect(trimText(first.find('.author').text())).toBe(users[0].name);
 

spec/frontend/vue_merge_request_widget/components/mr_widget_author_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlAvatar } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import MrWidgetAuthor from '~/vue_merge_request_widget/components/mr_widget_author.vue';
 
@@ -37,7 +38,7 @@ describe('MrWidgetAuthor', () => {
   });
 
   it('renders image with avatar url', () => {
-    expect(wrapper.find('img').element.src).toBe(
+    expect(wrapper.findComponent(GlAvatar).props('src')).toBe(
       'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
     );
   });
@@ -52,7 +53,7 @@ describe('MrWidgetAuthor', () => {
 
     await nextTick();
 
-    expect(wrapper.find('img').element.src).toBe('no_avatar.png');
+    expect(wrapper.findComponent(GlAvatar).props('src')).toBe('no_avatar.png');
   });
 
   it('renders author name', () => {

spec/frontend/vue_shared/alert_details/sidebar/sidebar_assignees_spec.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlAvatar, GlDropdownItem } from '@gitlab/ui';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -146,7 +146,7 @@ describe('Alert Details Sidebar Assignees', () => {
         props: { alert: mockAlerts[1] },
       });
 
-      expect(findAssigned().find('img').element.src).toBe('/url');
+      expect(findAssigned().findComponent(GlAvatar).props('src')).toBe('/url');
       expect(findAssigned().find('.dropdown-menu-user-full-name').text()).toBe('root');
       expect(findAssigned().find('.dropdown-menu-user-username').text()).toBe('@root');
     });