1 files changed, 14 insertions, 16 deletions
diff --git a/app/assets/javascripts/notes/components/note_header.vue b/app/assets/javascripts/notes/components/note_header.vue
index 17a995018d3..6932af61c69 100644
--- a/app/assets/javascripts/notes/components/note_header.vue
+++ b/app/assets/javascripts/notes/components/note_header.vue
@@ -1,9 +1,9 @@
 <script>
 /* eslint-disable vue/no-v-html */
+import { GlIcon, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import { mapActions } from 'vuex';
-import { GlIcon, GlLoadingIcon, GlTooltipDirective, GlSprintf } from '@gitlab/ui';
-import { isUserBusy } from '~/set_status_modal/utils';
 import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import UserNameWithStatus from '../../sidebar/components/assignees/user_name_with_status.vue';
 
 export default {
   components: {
@@ -12,7 +12,7 @@ export default {
       import('ee_component/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue'),
     GlIcon,
     GlLoadingIcon,
-    GlSprintf,
+    UserNameWithStatus,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -90,10 +90,6 @@ export default {
       }
       return false;
     },
-    authorIsBusy() {
-      const { status } = this.author;
-      return status?.availability && isUserBusy(status.availability);
-    },
     emojiElement() {
       return this.$refs?.authorStatus?.querySelector('gl-emoji');
     },
@@ -133,6 +129,9 @@ export default {
       this.$refs.authorNameLink.dispatchEvent(new Event('mouseleave'));
       this.isUsernameLinkHovered = false;
     },
+    userAvailability(selectedAuthor) {
+      return selectedAuthor?.availability || '';
+    },
   },
 };
 </script>
@@ -158,12 +157,11 @@ export default {
         :data-username="author.username"
       >
         <slot name="note-header-info"></slot>
-        <span class="note-header-author-name gl-font-weight-bold">
-          <gl-sprintf v-if="authorIsBusy" :message="s__('UserAvailability|%{author} (Busy)')">
-            <template #author>{{ authorName }}</template>
-          </gl-sprintf>
-          <template v-else>{{ authorName }}</template>
-        </span>
+        <user-name-with-status
+          :name="authorName"
+          :availability="userAvailability(author)"
+          container-classes="note-header-author-name gl-font-weight-bold"
+        />
       </a>
       <span
         v-if="authorStatus"
@@ -210,9 +208,9 @@ export default {
         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-700 align-middle"
+        :size="16"
+        :title="s__('Notes|This comment is confidential and only visible to project members')"
+        class="gl-ml-1 gl-text-orange-700 align-middle"
       />
       <slot name="extra-controls"></slot>
       <gl-loading-icon