1 files changed, 84 insertions, 9 deletions

diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index f82b3554cac..81812ee2279 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -1,12 +1,17 @@
 <script>
 import { mapActions } from 'vuex';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import GitlabTeamMemberBadge from '~/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue';
 
 export default {
   components: {
     timeAgoTooltip,
-    GitlabTeamMemberBadge,
+    GitlabTeamMemberBadge: () =>
+      import('ee_component/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue'),
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     author: {
@@ -44,6 +49,18 @@ export default {
       required: false,
       default: true,
     },
+    isConfidential: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isUsernameLinkHovered: false,
+      emojiTitle: '',
+      authorStatusHasTooltip: false,
+    };
   },
   computed: {
     toggleChevronClass() {
@@ -55,10 +72,29 @@ export default {
     hasAuthor() {
       return this.author && Object.keys(this.author).length;
     },
-    showGitlabTeamMemberBadge() {
-      return this.author?.is_gitlab_employee;
+    authorLinkClasses() {
+      return {
+        hover: this.isUsernameLinkHovered,
+        'text-underline': this.isUsernameLinkHovered,
+        'author-name-link': true,
+        'js-user-link': true,
+      };
+    },
+    authorStatus() {
+      return this.author.status_tooltip_html;
+    },
+    emojiElement() {
+      return this.$refs?.authorStatus?.querySelector('gl-emoji');
     },
   },
+  mounted() {
+    this.emojiTitle = this.emojiElement ? this.emojiElement.getAttribute('title') : '';
+
+    const authorStatusTitle = this.$refs?.authorStatus
+      ?.querySelector('.user-status-emoji')
+      ?.getAttribute('title');
+    this.authorStatusHasTooltip = authorStatusTitle && authorStatusTitle !== '';
+  },
   methods: {
     ...mapActions(['setTargetNoteHash']),
     handleToggle() {
@@ -69,6 +105,20 @@ export default {
         this.setTargetNoteHash(this.noteTimestampLink);
       }
     },
+    removeEmojiTitle() {
+      this.emojiElement.removeAttribute('title');
+    },
+    addEmojiTitle() {
+      this.emojiElement.setAttribute('title', this.emojiTitle);
+    },
+    handleUsernameMouseEnter() {
+      this.$refs.authorNameLink.dispatchEvent(new Event('mouseenter'));
+      this.isUsernameLinkHovered = true;
+    },
+    handleUsernameMouseLeave() {
+      this.$refs.authorNameLink.dispatchEvent(new Event('mouseleave'));
+      this.isUsernameLinkHovered = false;
+    },
   },
 };
 </script>
@@ -87,18 +137,34 @@ export default {
     </div>
     <template v-if="hasAuthor">
       <a
-        v-once
+        ref="authorNameLink"
         :href="author.path"
-        class="js-user-link"
+        :class="authorLinkClasses"
         :data-user-id="author.id"
         :data-username="author.username"
       >
         <slot name="note-header-info"></slot>
         <span class="note-header-author-name bold">{{ author.name }}</span>
-        <span v-if="author.status_tooltip_html" v-html="author.status_tooltip_html"></span>
-        <span class="note-headline-light">@{{ author.username }}</span>
       </a>
-      <gitlab-team-member-badge v-if="showGitlabTeamMemberBadge" />
+      <span
+        v-if="authorStatus"
+        ref="authorStatus"
+        v-on="
+          authorStatusHasTooltip ? { mouseenter: removeEmojiTitle, mouseleave: addEmojiTitle } : {}
+        "
+        v-html="authorStatus"
+      ></span>
+      <span class="text-nowrap author-username">
+        <a
+          ref="authorUsernameLink"
+          class="author-username-link"
+          :href="author.path"
+          @mouseenter="handleUsernameMouseEnter"
+          @mouseleave="handleUsernameMouseLeave"
+          ><span class="note-headline-light">@{{ author.username }}</span>
+        </a>
+        <gitlab-team-member-badge v-if="author && author.is_gitlab_employee" />
+      </span>
     </template>
     <span v-else>{{ __('A deleted user') }}</span>
     <span class="note-headline-light note-headline-meta">
@@ -118,6 +184,15 @@ export default {
         </a>
         <time-ago-tooltip v-else ref="noteTimestamp" :time="createdAt" tooltip-placement="bottom" />
       </template>
+      <gl-icon
+        v-if="isConfidential"
+        v-gl-tooltip:tooltipcontainer.bottom
+        data-testid="confidentialIndicator"
+        name="eye-slash"
+        :size="14"
+        :title="s__('Notes|Private comments are accessible by internal staff only')"
+        class="gl-ml-1 gl-text-gray-800 align-middle"
+      />
       <slot name="extra-controls"></slot>
       <i
         v-if="showSpinner"