Merge branch 'ph/diffDiscussionPlaceholderNoteAvatarSize' into 'master'

Fixed placeholder note avatar size

See merge request gitlab-org/gitlab!76559

app/assets/javascripts/vue_shared/components/notes/placeholder_note.vue

@@ -39,6 +39,11 @@ export default {
       required: false,
       default: null,
     },
+    isOverviewTab: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     ...mapGetters(['getUserData']),
@@ -46,9 +51,10 @@ export default {
       return renderMarkdown(this.note.body);
     },
     avatarSize() {
-      if (this.line) {
-        return 16;
+      if (this.line && !this.isOverviewTab) {
+        return 24;
       }
+
       return 40;
     },
   },

spec/frontend/vue_shared/components/notes/placeholder_note_spec.js

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import IssuePlaceholderNote from '~/vue_shared/components/notes/placeholder_note.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { userDataMock } from '../../../notes/mock_data';
 
 Vue.use(Vuex);
@@ -15,7 +16,7 @@ describe('Issue placeholder note component', () => {
 
   const findNote = () => wrapper.find({ ref: 'note' });
 
-  const createComponent = (isIndividual = false) => {
+  const createComponent = (isIndividual = false, propsData = {}) => {
     wrapper = shallowMount(IssuePlaceholderNote, {
       store: new Vuex.Store({
         getters,
@@ -25,6 +26,7 @@ describe('Issue placeholder note component', () => {
           body: 'Foo',
           individual_note: isIndividual,
         },
+        ...propsData,
       },
     });
   };
@@ -51,4 +53,17 @@ describe('Issue placeholder note component', () => {
 
     expect(findNote().classes()).toContain('discussion');
   });
+
+  describe('avatar size', () => {
+    it.each`
+      size  | line                    | isOverviewTab
+      ${40} | ${null}                 | ${false}
+      ${24} | ${{ line_code: '123' }} | ${false}
+      ${40} | ${{ line_code: '123' }} | ${true}
+    `('renders avatar $size for $line and $isOverviewTab', ({ size, line, isOverviewTab }) => {
+      createComponent(false, { line, isOverviewTab });
+
+      expect(wrapper.findComponent(UserAvatarLink).props('imgSize')).toBe(size);
+    });
+  });
 });