Use ProjectAvatar in `frequent_items_list_item.vue`

https://gitlab.com/gitlab-org/gitlab/-/issues/335362

Changelog: fixed

app/assets/javascripts/frequent_items/components/frequent_items_list_item.vue

@@ -5,14 +5,14 @@ import highlight from '~/lib/utils/highlight';
 import { truncateNamespace } from '~/lib/utils/text_utility';
 import { mapVuexModuleState } from '~/lib/utils/vuex_module_mappers';
 import Tracking from '~/tracking';
-import Identicon from '~/vue_shared/components/identicon.vue';
+import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 
 const trackingMixin = Tracking.mixin();
 
 export default {
   components: {
-    Identicon,
     GlButton,
+    ProjectAvatar,
   },
   mixins: [trackingMixin],
   inject: ['vuexModule'],
@@ -64,19 +64,12 @@ export default {
       class="gl-text-left gl-justify-content-start!"
       @click="track('click_link', { label: `${dropdownType}_dropdown_frequent_items_list_item` })"
     >
-      <div
-        ref="frequentItemsItemAvatarContainer"
-        class="frequent-items-item-avatar-container avatar-container rect-avatar s32"
-      >
-        <img v-if="avatarUrl" ref="frequentItemsItemAvatar" :src="avatarUrl" class="avatar s32" />
-        <identicon
-          v-else
-          :entity-id="itemId"
-          :entity-name="itemName"
-          size-class="s32"
-          class="rect-avatar"
+      <project-avatar
+        class="gl-float-left gl-mr-3"
+        :project-avatar-url="avatarUrl"
+        :project-name="itemName"
+        aria-hidden="true"
       />
-      </div>
       <div ref="frequentItemsItemMetadataContainer" class="frequent-items-item-metadata-container">
         <div
           ref="frequentItemsItemTitle"

app/assets/stylesheets/framework/dropdowns.scss

@@ -933,13 +933,9 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
 }
 
 .frequent-items-list-item-container {
-  .frequent-items-item-avatar-container,
-  .frequent-items-item-metadata-container {
-    flex-shrink: 0;
-  }
-
   .frequent-items-item-metadata-container {
     display: flex;
+    flex-shrink: 0;
     flex-direction: column;
     justify-content: center;
   }
@@ -951,12 +947,6 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     white-space: nowrap;
   }
 
-  &:hover {
-    .frequent-items-item-avatar-container .avatar {
-      border-color: $gray-50;
-    }
-  }
-
   .frequent-items-item-title {
     font-size: $gl-font-size;
     font-weight: 400;

spec/frontend/frequent_items/components/frequent_items_list_item_spec.js

@@ -5,6 +5,7 @@ import { trimText } from 'helpers/text_helper';
 import { mockTracking, unmockTracking } from 'helpers/tracking_helper';
 import frequentItemsListItemComponent from '~/frequent_items/components/frequent_items_list_item.vue';
 import { createStore } from '~/frequent_items/store';
+import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 import { mockProject } from '../mock_data';
 
 const localVue = createLocalVue();
@@ -16,12 +17,12 @@ describe('FrequentItemsListItemComponent', () => {
   let store;
 
   const findTitle = () => wrapper.find({ ref: 'frequentItemsItemTitle' });
-  const findAvatar = () => wrapper.find({ ref: 'frequentItemsItemAvatar' });
+  const findAvatar = () => wrapper.findComponent(ProjectAvatar);
   const findAllTitles = () => wrapper.findAll({ ref: 'frequentItemsItemTitle' });
   const findNamespace = () => wrapper.find({ ref: 'frequentItemsItemNamespace' });
   const findAllButtons = () => wrapper.findAllComponents(GlButton);
   const findAllNamespace = () => wrapper.findAll({ ref: 'frequentItemsItemNamespace' });
-  const findAvatarContainer = () => wrapper.findAll({ ref: 'frequentItemsItemAvatarContainer' });
+  const findAllAvatars = () => wrapper.findAllComponents(ProjectAvatar);
   const findAllMetadataContainers = () =>
     wrapper.findAll({ ref: 'frequentItemsItemMetadataContainer' });
 
@@ -92,17 +93,9 @@ describe('FrequentItemsListItemComponent', () => {
       createComponent();
     });
 
-    it('should render avatar if avatarUrl is present', () => {
-      wrapper.setProps({ avatarUrl: 'path/to/avatar.png' });
-
-      return wrapper.vm.$nextTick(() => {
+    it('renders avatar', () => {
       expect(findAvatar().exists()).toBe(true);
     });
-    });
-
-    it('should not render avatar if avatarUrl is not present', () => {
-      expect(findAvatar().exists()).toBe(false);
-    });
 
     it('renders root element with the right classes', () => {
       expect(wrapper.classes('frequent-items-list-item-container')).toBe(true);
@@ -111,7 +104,7 @@ describe('FrequentItemsListItemComponent', () => {
     it.each`
       name                    | selector                     | expected
       ${'button'}             | ${findAllButtons}            | ${1}
-      ${'avatar container'}   | ${findAvatarContainer}       | ${1}
+      ${'avatar container'}   | ${findAllAvatars}            | ${1}
       ${'metadata container'} | ${findAllMetadataContainers} | ${1}
       ${'title'}              | ${findAllTitles}             | ${1}
       ${'namespace'}          | ${findAllNamespace}          | ${1}