Merge branch '335936-design-discussion-user-popovers-do-not-work' into 'master'

Fix user popovers in design management discussions

See merge request gitlab-org/gitlab!66027

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

 <script>
 import { GlTooltipDirective, GlIcon, GlLink, GlSafeHtmlDirective } 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';
@@ -48,6 +49,9 @@ export default {
     author() {
       return this.note.author;
     },
+    authorId() {
+      return getIdFromGraphQLId(this.author.id);
+    },
     noteAnchorId() {
       return findNoteId(this.note.id);
     },
@@ -94,7 +98,7 @@ export default {
           v-once
           :href="author.webUrl"
           class="js-user-link"
-          :data-user-id="author.id"
+          :data-user-id="authorId"
           :data-username="author.username"
         >
           <span class="note-header-author-name gl-font-weight-bold">{{ author.name }}</span>

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

@@ -6,7 +6,7 @@ exports[`Design note component should match the snapshot 1`] = `
   id="note_123"
 >
   <user-avatar-link-stub
-    imgalt=""
+    imgalt="foo-bar"
     imgcssclasses=""
     imgsize="40"
     imgsrc=""
@@ -22,7 +22,8 @@ exports[`Design note component should match the snapshot 1`] = `
     <div>
       <gl-link-stub
         class="js-user-link"
-        data-user-id="author-id"
+        data-user-id="1"
+        data-username="foo-bar"
       >
         <span
           class="note-header-author-name gl-font-weight-bold"
@@ -35,7 +36,7 @@ exports[`Design note component should match the snapshot 1`] = `
         <span
           class="note-headline-light"
         >
-          @
+          @foo-bar
         </span>
       </gl-link-stub>
        

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

@@ -9,7 +9,8 @@ const scrollIntoViewMock = jest.fn();
 const note = {
   id: 'gid://gitlab/DiffNote/123',
   author: {
-    id: 'author-id',
+    id: 'gid://gitlab/User/1',
+    username: 'foo-bar',
   },
   body: 'test',
   userPermissions: {