Added background color and badge to internal notes

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

@@ -8,6 +8,7 @@ import { __ } from '~/locale';
 import '~/behaviors/markdown/render_gfm';
 import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
 import autosave from '../mixins/autosave';
+import { CONFIDENTIAL_CLASSES } from '../constants';
 import noteAttachment from './note_attachment.vue';
 import noteAwardsList from './note_awards_list.vue';
 import noteEditedText from './note_edited_text.vue';
@@ -54,6 +55,11 @@ export default {
       required: false,
       default: '',
     },
+    isConfidential: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     ...mapGetters(['getDiscussion', 'suggestionsCount', 'getSuggestionsFilePaths']),
@@ -95,6 +101,12 @@ export default {
       return escape(suggestion);
     },
+    confidentialContainerClasses() {
+      if (this.isConfidential && !this.isEditing) {
+        return CONFIDENTIAL_CLASSES;
+      }
+      return '';
+    },
   },
   mounted() {
     this.renderGFM();
@@ -160,53 +172,61 @@ export default {
 </script>
 <template>
-  <div ref="note-body" :class="{ 'js-task-list-container': canEdit }" class="note-body">
-    <suggestions
-      v-if="hasSuggestion && !isEditing"
-      :suggestions="note.suggestions"
-      :suggestions-count="suggestionsCount"
-      :batch-suggestions-info="batchSuggestionsInfo"
-      :note-html="note.note_html"
-      :line-type="lineType"
-      :help-page-path="helpPagePath"
-      :default-commit-message="commitMessage"
-      :failed-to-load-metadata="failedToLoadMetadata"
-      @apply="applySuggestion"
-      @applyBatch="applySuggestionBatch"
-      @addToBatch="addSuggestionToBatch"
-      @removeFromBatch="removeSuggestionFromBatch"
-    />
-    <div v-else v-safe-html:[$options.safeHtmlConfig]="note.note_html" class="note-text md"></div>
-    <note-form
-      v-if="isEditing"
-      ref="noteForm"
-      :note-body="noteBody"
-      :note-id="note.id"
-      :line="line"
-      :note="note"
-      :save-button-title="saveButtonTitle"
-      :help-page-path="helpPagePath"
-      :discussion="discussion"
-      :resolve-discussion="note.resolve_discussion"
-      @handleFormUpdate="handleFormUpdate"
-      @cancelForm="formCancelHandler"
-    />
-    <!-- eslint-disable vue/no-mutating-props -->
-    <textarea
-      v-if="canEdit"
-      v-model="note.note"
-      :data-update-url="note.path"
-      class="hidden js-task-list-field"
-      dir="auto"
-    ></textarea>
-    <!-- eslint-enable vue/no-mutating-props -->
-    <note-edited-text
-      v-if="note.last_edited_at"
-      :edited-at="note.last_edited_at"
-      :edited-by="note.last_edited_by"
-      action-text="Edited"
-      class="note_edited_ago"
-    />
+  <div
+    ref="note-body"
+    :class="{
+      'js-task-list-container': canEdit,
+    }"
+    class="note-body"
+  >
+    <div :class="confidentialContainerClasses" data-testid="note-confidential-container">
+      <suggestions
+        v-if="hasSuggestion && !isEditing"
+        :suggestions="note.suggestions"
+        :suggestions-count="suggestionsCount"
+        :batch-suggestions-info="batchSuggestionsInfo"
+        :note-html="note.note_html"
+        :line-type="lineType"
+        :help-page-path="helpPagePath"
+        :default-commit-message="commitMessage"
+        :failed-to-load-metadata="failedToLoadMetadata"
+        @apply="applySuggestion"
+        @applyBatch="applySuggestionBatch"
+        @addToBatch="addSuggestionToBatch"
+        @removeFromBatch="removeSuggestionFromBatch"
+      />
+      <div v-else v-safe-html:[$options.safeHtmlConfig]="note.note_html" class="note-text md"></div>
+      <note-form
+        v-if="isEditing"
+        ref="noteForm"
+        :note-body="noteBody"
+        :note-id="note.id"
+        :line="line"
+        :note="note"
+        :save-button-title="saveButtonTitle"
+        :help-page-path="helpPagePath"
+        :discussion="discussion"
+        :resolve-discussion="note.resolve_discussion"
+        @handleFormUpdate="handleFormUpdate"
+        @cancelForm="formCancelHandler"
+      />
+      <!-- eslint-disable vue/no-mutating-props -->
+      <textarea
+        v-if="canEdit"
+        v-model="note.note"
+        :data-update-url="note.path"
+        class="hidden js-task-list-field"
+        dir="auto"
+      ></textarea>
+      <!-- eslint-enable vue/no-mutating-props -->
+      <note-edited-text
+        v-if="note.last_edited_at"
+        :edited-at="note.last_edited_at"
+        :edited-by="note.last_edited_by"
+        action-text="Edited"
+        class="note_edited_ago"
+      />
+    </div>
     <note-awards-list
       v-if="note.award_emoji && note.award_emoji.length"
       :note-id="note.id"

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

@@ -236,6 +236,7 @@ export default {
         data-testid="internalNoteIndicator"
         variant="warning"
         size="sm"
+        class="gl-mb-3 gl-ml-2"
         :title="noteConfidentialityTooltip"
       >
         {{ __('Internal note') }}

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

@@ -493,9 +493,10 @@ export default {
         <note-body
           ref="noteBody"
           :note="note"
+          :can-edit="note.current_user.can_edit"
+          :is-confidential="note.confidential"
           :line="line"
           :file="diffFile"
-          :can-edit="note.current_user.can_edit"
           :is-editing="isEditing"
           :help-page-path="helpPagePath"
           @handleFormUpdate="formUpdateHandler"

app/assets/javascripts/notes/constants.js

@@ -51,3 +51,5 @@ export const toggleStateErrorMessage = {
     [REOPENED]: __('Something went wrong while closing the merge request. Please try again later.'),
   },
 };
+
+export const CONFIDENTIAL_CLASSES = ['gl-bg-orange-50', 'gl-px-4', 'gl-py-2'];

spec/features/issues/user_comments_on_issue_spec.rb

@@ -67,7 +67,7 @@
     it "edits comment" do
       add_note("# Comment with a header")
-      page.within(".note-body > .note-text") do
+      page.within(".note-body .note-text") do
         expect(page).to have_content("Comment with a header").and have_no_css("#comment-with-a-header")
       end

spec/features/merge_request/user_posts_notes_spec.rb

@@ -158,7 +158,7 @@
         page.within("#note_#{note.id}") do
           expect(find('.current-note-edit-form', visible: true)).to be_visible
           expect(find('.note-edit-form', visible: true)).to be_visible
-          expect(find(:css, '.note-body > .note-text', visible: false)).not_to be_visible
+          expect(find(:css, '.note-body .note-text', visible: false)).not_to be_visible
         end
       end

spec/frontend/notes/components/note_body_spec.js

-import { shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { suggestionCommitMessage } from '~/diffs/store/getters';
 import NoteBody from '~/notes/components/note_body.vue';
@@ -7,6 +7,7 @@ import NoteAwardsList from '~/notes/components/note_awards_list.vue';
 import NoteForm from '~/notes/components/note_form.vue';
 import createStore from '~/notes/stores';
 import notes from '~/notes/stores/modules/index';
+import { CONFIDENTIAL_CLASSES } from '~/notes/constants';
 import Suggestions from '~/vue_shared/components/markdown/suggestions.vue';
@@ -27,7 +28,7 @@ const createComponent = ({
     mockStore.dispatch('setNotesData', notesData);
   }
-  return shallowMount(NoteBody, {
+  return shallowMountExtended(NoteBody, {
     store: mockStore || store,
     propsData: {
       note,
@@ -58,6 +59,24 @@ describe('issue_note_body component', () => {
     expect(wrapper.findComponent(NoteAwardsList).exists()).toBe(true);
   });
+  it('should not have confidential classes', () => {
+    expect(wrapper.findByTestId('note-confidential-container').classes()).not.toEqual(
+      CONFIDENTIAL_CLASSES,
+    );
+  });
+
+  describe('isConfidential', () => {
+    beforeEach(() => {
+      wrapper = createComponent({ props: { isConfidential: true } });
+    });
+
+    it('should have confidential classes', () => {
+      expect(wrapper.findByTestId('note-confidential-container').classes()).toEqual(
+        CONFIDENTIAL_CLASSES,
+      );
+    });
+  });
+
   describe('isEditing', () => {
     beforeEach(() => {
       wrapper = createComponent({ props: { isEditing: true } });
@@ -86,6 +105,18 @@ describe('issue_note_body component', () => {
       // which is defined in `app/assets/javascripts/notes/mixins/autosave.js`
       expect(wrapper.vm.autosave.key).toEqual(autosaveKey);
     });
+
+    describe('isConfidential', () => {
+      beforeEach(() => {
+        wrapper.setProps({ isConfidential: true });
+      });
+
+      it('should not have confidential classes', () => {
+        expect(wrapper.findByTestId('note-confidential-container').classes()).not.toEqual(
+          CONFIDENTIAL_CLASSES,
+        );
+      });
+    });
   });
   describe('commitMessage', () => {