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';
 import GitlabTeamMemberBadge from '~/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue';
 
@@ -7,6 +8,10 @@ export default {
   components: {
     timeAgoTooltip,
     GitlabTeamMemberBadge,
+    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 {
@@ -160,7 +170,7 @@ export default {
       </span>
     </template>
     <span v-else>{{ __('A deleted user') }}</span>
-    <span class="note-headline-light note-headline-meta">
+    <span class="note-headline-light note-headline-meta d-inline-flex align-items-center">
       <span class="system-note-message"> <slot></slot> </span>
       <template v-if="createdAt">
         <span ref="actionText" class="system-note-separator">
@@ -177,6 +187,15 @@ export default {
         </a>
         <time-ago-tooltip v-else ref="noteTimestamp" :time="createdAt" tooltip-placement="bottom" />
       </template>
+      <gl-icon
+        v-if="isConfidential"
+        ref="confidentialIndicator"
+        v-gl-tooltip:tooltipcontainer.bottom
+        name="eye-slash"
+        :size="14"
+        :title="__('Private comments are accessible by internal staff only')"
+        class="ml-1 gl-text-gray-800"
+      />
       <slot name="extra-controls"></slot>
       <i
         v-if="showSpinner"

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

@@ -255,10 +255,16 @@ 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 class="d-none d-sm-inline">&middot;</span>
+          <span v-else class="d-none d-sm-inline mr-1">&middot;</span>
         </note-header>
         <note-actions
           :author-id="author.id"

app/assets/stylesheets/pages/notes.scss

@@ -660,10 +660,6 @@ $note-form-margin-left: 72px;
   padding-bottom: 0;
 }
 
-.note-headline-light {
-  display: inline;
-}
-
 .note-headline-light,
 .discussion-headline-light {
   color: $gl-text-color-secondary;

changelogs/unreleased/207471-expose-note-confidential-attribute-in-apis-and-display-on-frontend.yml

+---
+title: Add confidential status support for new comments
+merge_request: 30570
+author:
+type: added

spec/frontend/notes/components/note_header_spec.js

@@ -19,6 +19,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({ ref: 'confidentialIndicator' });
   const findSpinner = () => wrapper.find({ ref: 'spinner' });
 
   const author = {
@@ -246,4 +247,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);
+    });
+  });
 });