Adds an indicator icon for confidential notes

This shows an slashed eye icon for private comments only. This icon has
a tooltip that explain this to the user.

app/assets/javascripts/notes/components/note_header.vue

 <script>
 import { mapActions } from 'vuex';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
@@ -7,6 +8,10 @@ export default {
     timeAgoTooltip,
     GitlabTeamMemberBadge: () =>
       import('ee_component/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue'),
+    GlIcon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     author: {
@@ -44,6 +49,11 @@ export default {
       required: false,
       default: true,
     },
+    isConfidential: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -174,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"
+      />
       <slot name="extra-controls"></slot>
       <i
         v-if="showSpinner"

app/assets/javascripts/notes/components/noteable_note.vue

@@ -255,7 +255,13 @@ export default {
     </div>
     <div class="timeline-content">
       <div class="note-header">
-        <note-header v-once :author="author" :created-at="note.created_at" :note-id="note.id">
+        <note-header
+          v-once
+          :author="author"
+          :created-at="note.created_at"
+          :note-id="note.id"
+          :is-confidential="note.confidential"
+        >
           <slot slot="note-header-info" name="note-header-info"></slot>
           <span v-if="commit" v-html="actionText"></span>
           <span v-else-if="note.created_at" class="d-none d-sm-inline">&middot;</span>

locale/gitlab.pot

@@ -14402,6 +14402,9 @@ msgstr ""
 msgid "Notes|Collapse replies"
 msgstr ""
 
+msgid "Notes|Private comments are accessible by internal staff only"
+msgstr ""
+
 msgid "Notes|Show all activity"
 msgstr ""
 

spec/frontend/notes/components/note_header_spec.js

@@ -18,6 +18,7 @@ describe('NoteHeader component', () => {
   const findActionText = () => wrapper.find({ ref: 'actionText' });
   const findTimestampLink = () => wrapper.find({ ref: 'noteTimestampLink' });
   const findTimestamp = () => wrapper.find({ ref: 'noteTimestamp' });
+  const findConfidentialIndicator = () => wrapper.find('[data-testid="confidentialIndicator"]');
   const findSpinner = () => wrapper.find({ ref: 'spinner' });
 
   const author = {
@@ -231,4 +232,15 @@ describe('NoteHeader component', () => {
       });
     });
   });
+
+  describe('with confidentiality indicator', () => {
+    it.each`
+      status   | condition
+      ${true}  | ${'shows'}
+      ${false} | ${'hides'}
+    `('$condition icon indicator when isConfidential is $status', ({ status }) => {
+      createComponent({ isConfidential: status });
+      expect(findConfidentialIndicator().exists()).toBe(status);
+    });
+  });
 });