Merge branch '355864-gl-avatar-design-note' into 'master'

Use GlAvatar in design note

See merge request gitlab-org/gitlab!84033

app/assets/javascripts/design_management/components/design_notes/design_note.vue

 <script>
-import { GlTooltipDirective, GlIcon, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
+import {
+  GlTooltipDirective,
+  GlIcon,
+  GlLink,
+  GlSafeHtmlDirective,
+  GlAvatar,
+  GlAvatarLink,
+} from '@gitlab/ui';
 import { ApolloMutation } from 'vue-apollo';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { __ } from '~/locale';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import updateNoteMutation from '../../graphql/mutations/update_note.mutation.graphql';
 import { hasErrors } from '../../utils/cache_update';
 import { findNoteId, extractDesignNoteId } from '../../utils/design_management_utils';
@@ -16,7 +22,8 @@ export default {
     editCommentLabel: __('Edit comment'),
   },
   components: {
-    UserAvatarLink,
+    GlAvatar,
+    GlAvatarLink,
     TimelineEntryItem,
     TimeAgoTooltip,
     DesignReplyForm,
@@ -86,18 +93,17 @@ export default {
 
 <template>
   <timeline-entry-item :id="`note_${noteAnchorId}`" class="design-note note-form">
-    <user-avatar-link
-      :link-href="author.webUrl"
-      :img-src="author.avatarUrl"
-      :img-alt="author.username"
-      :img-size="40"
-    />
+    <gl-avatar-link :href="author.webUrl" class="gl-float-left gl-mr-3">
+      <gl-avatar :size="32" :src="author.avatarUrl" :entity-name="author.username" />
+    </gl-avatar-link>
+
     <div class="gl-display-flex gl-justify-content-space-between">
       <div>
         <gl-link
           v-once
           :href="author.webUrl"
           class="js-user-link"
+          data-testid="user-link"
           :data-user-id="authorId"
           :data-username="author.username"
         >
@@ -123,7 +129,8 @@ export default {
           type="button"
           :title="$options.i18n.editCommentLabel"
           :aria-label="$options.i18n.editCommentLabel"
-          class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button"
+          class="note-action-button btn btn-transparent qa-note-edit-button"
+          data-testid="note-edit"
           @click="isEditing = true"
         >
           <gl-icon name="pencil" class="link-highlight" />
@@ -133,8 +140,9 @@ export default {
     <template v-if="!isEditing">
       <div
         v-safe-html="note.bodyHtml"
-        class="note-text js-note-text md"
+        class="note-text md"
         data-qa-selector="note_content"
+        data-testid="note-text"
       ></div>
       <slot name="resolved-status"></slot>
     </template>

spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap

@@ -5,16 +5,19 @@ exports[`Design note component should match the snapshot 1`] = `
   class="design-note note-form"
   id="note_123"
 >
-  <user-avatar-link-stub
-    imgalt="foo-bar"
-    imgcssclasses=""
-    imgsize="40"
-    imgsrc=""
-    linkhref=""
-    tooltipplacement="top"
-    tooltiptext=""
-    username=""
-  />
+  <gl-avatar-link-stub
+    class="gl-float-left gl-mr-3"
+    href="https://gitlab.com/user"
+  >
+    <gl-avatar-stub
+      alt="avatar"
+      entityid="0"
+      entityname="foo-bar"
+      shape="circle"
+      size="32"
+      src="https://gitlab.com/avatar"
+    />
+  </gl-avatar-link-stub>
    
   <div
     class="gl-display-flex gl-justify-content-space-between"
@@ -22,8 +25,10 @@ exports[`Design note component should match the snapshot 1`] = `
     <div>
       <gl-link-stub
         class="js-user-link"
+        data-testid="user-link"
         data-user-id="1"
         data-username="foo-bar"
+        href="https://gitlab.com/user"
       >
         <span
           class="note-header-author-name gl-font-weight-bold"
@@ -69,8 +74,9 @@ exports[`Design note component should match the snapshot 1`] = `
   </div>
    
   <div
-    class="note-text js-note-text md"
+    class="note-text md"
     data-qa-selector="note_content"
+    data-testid="note-text"
   />
    
 </timeline-entry-item-stub>

spec/frontend/design_management/components/design_notes/design_note_spec.js

-import { shallowMount } from '@vue/test-utils';
 import { ApolloMutation } from 'vue-apollo';
 import { nextTick } from 'vue';
+import { GlAvatar, GlAvatarLink } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import DesignNote from '~/design_management/components/design_notes/design_note.vue';
 import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 
 const scrollIntoViewMock = jest.fn();
 const note = {
@@ -12,6 +12,8 @@ const note = {
   author: {
     id: 'gid://gitlab/User/1',
     username: 'foo-bar',
+    avatarUrl: 'https://gitlab.com/avatar',
+    webUrl: 'https://gitlab.com/user',
   },
   body: 'test',
   userPermissions: {
@@ -30,14 +32,15 @@ const mutate = jest.fn().mockResolvedValue({ data: { updateNote: {} } });
 describe('Design note component', () => {
   let wrapper;
 
-  const findUserAvatar = () => wrapper.find(UserAvatarLink);
-  const findUserLink = () => wrapper.find('.js-user-link');
-  const findReplyForm = () => wrapper.find(DesignReplyForm);
-  const findEditButton = () => wrapper.find('.js-note-edit');
-  const findNoteContent = () => wrapper.find('.js-note-text');
+  const findUserAvatar = () => wrapper.findComponent(GlAvatar);
+  const findUserAvatarLink = () => wrapper.findComponent(GlAvatarLink);
+  const findUserLink = () => wrapper.findByTestId('user-link');
+  const findReplyForm = () => wrapper.findComponent(DesignReplyForm);
+  const findEditButton = () => wrapper.findByTestId('note-edit');
+  const findNoteContent = () => wrapper.findByTestId('note-text');
 
   function createComponent(props = {}, data = { isEditing: false }) {
-    wrapper = shallowMount(DesignNote, {
+    wrapper = shallowMountExtended(DesignNote, {
       propsData: {
         note: {},
         ...props,
@@ -71,12 +74,24 @@ describe('Design note component', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('should render an author', () => {
+  it('should render avatar with correct props', () => {
+    createComponent({
+      note,
+    });
+
+    expect(findUserAvatar().props()).toMatchObject({
+      src: note.author.avatarUrl,
+      entityName: note.author.username,
+    });
+
+    expect(findUserAvatarLink().attributes('href')).toBe(note.author.webUrl);
+  });
+
+  it('should render author details', () => {
     createComponent({
       note,
     });
 
-    expect(findUserAvatar().exists()).toBe(true);
     expect(findUserLink().exists()).toBe(true);
   });
 

spec/frontend/shortcuts_spec.js

@@ -41,7 +41,7 @@ describe('Shortcuts', () => {
       ).toHaveBeenCalled();
     });
 
-    it('focues preview button inside edit comment form', () => {
+    it('focuses preview button inside edit comment form', () => {
       document.querySelector('.js-note-edit').click();
 
       Shortcuts.toggleMarkdownPreview(