Merge branch...

Merge branch '207471-expose-note-confidential-attribute-in-apis-and-display-on-frontend' into 'master'

Add confidential status support for new comments

See merge request gitlab-org/gitlab!30570

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

@@ -3,7 +3,15 @@ import $ from 'jquery';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import { isEmpty } from 'lodash';
 import Autosize from 'autosize';
-import { GlAlert, GlIntersperse, GlLink, GlSprintf } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlFormCheckbox,
+  GlIcon,
+  GlIntersperse,
+  GlLink,
+  GlSprintf,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import Flash from '../../flash';
@@ -24,6 +32,7 @@ import loadingButton from '../../vue_shared/components/loading_button.vue';
 import noteSignedOutWidget from './note_signed_out_widget.vue';
 import discussionLockedWidget from './discussion_locked_widget.vue';
 import issuableStateMixin from '../mixins/issuable_state';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   name: 'CommentForm',
@@ -36,11 +45,16 @@ export default {
     loadingButton,
     TimelineEntryItem,
     GlAlert,
+    GlFormCheckbox,
+    GlIcon,
     GlIntersperse,
     GlLink,
     GlSprintf,
   },
-  mixins: [issuableStateMixin],
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  mixins: [issuableStateMixin, glFeatureFlagsMixin()],
   props: {
     noteableType: {
       type: String,
@@ -51,6 +65,7 @@ export default {
     return {
       note: '',
       noteType: constants.COMMENT,
+      noteIsConfidential: false,
       isSubmitting: false,
       isSubmitButtonDisabled: true,
     };
@@ -138,6 +153,9 @@ export default {
     trackingLabel() {
       return slugifyWithUnderscore(`${this.commentButtonTitle} button`);
     },
+    confidentialNotesEnabled() {
+      return Boolean(this.glFeatures.confidentialNotes);
+    },
   },
   watch: {
     note(newNote) {
@@ -185,6 +203,7 @@ export default {
             note: {
               noteable_type: this.noteableType,
               noteable_id: this.getNoteableData.id,
+              confidential: this.noteIsConfidential,
               note: this.note,
             },
             merge_request_diff_head_sha: this.getNoteableData.diff_head_sha,
@@ -285,6 +304,7 @@ export default {
 
       if (shouldClear) {
         this.note = '';
+        this.noteIsConfidential = false;
         this.resizeTextarea();
         this.$refs.markdownField.previewMarkdown = false;
       }
@@ -411,6 +431,19 @@ js-gfm-input js-autosize markdown-area js-vue-textarea qa-comment-input"
               </p>
             </gl-alert>
             <div class="note-form-actions">
+              <div v-if="confidentialNotesEnabled" class="js-confidential-note-toggle mb-4">
+                <gl-form-checkbox v-model="noteIsConfidential">
+                  <gl-icon name="eye-slash" :size="12" />
+                  {{ __('Mark this comment as private') }}
+                  <gl-icon
+                    v-gl-tooltip:tooltipcontainer.bottom
+                    name="question"
+                    :size="12"
+                    :title="__('Private comments are accessible by internal staff only')"
+                    class="gl-text-gray-800"
+                  />
+                </gl-form-checkbox>
+              </div>
               <div
                 class="float-left btn-group
 append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"

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;

app/controllers/projects/issues_controller.rb

@@ -52,6 +52,7 @@ class Projects::IssuesController < Projects::ApplicationController
 
   before_action only: :show do
     push_frontend_feature_flag(:real_time_issue_sidebar, @project)
+    push_frontend_feature_flag(:confidential_notes, @project)
   end
 
   around_action :allow_gitaly_ref_name_caching, only: [:discussions]

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

locale/gitlab.pot

@@ -12794,6 +12794,9 @@ msgstr ""
 msgid "Mark comment as resolved"
 msgstr ""
 
+msgid "Mark this comment as private"
+msgstr ""
+
 msgid "Mark this issue as a duplicate of another issue"
 msgstr ""
 
@@ -15586,6 +15589,9 @@ msgstr ""
 msgid "Private - The group and its projects can only be viewed by members."
 msgstr ""
 
+msgid "Private comments are accessible by internal staff only"
+msgstr ""
+
 msgid "Private group(s)"
 msgstr ""
 

spec/frontend/notes/components/comment_form_spec.js

@@ -24,6 +24,7 @@ describe('issue_comment_form component', () => {
   let store;
   let wrapper;
   let axiosMock;
+  let features = {};
 
   const setupStore = (userData, noteableData) => {
     store.dispatch('setUserData', userData);
@@ -37,12 +38,16 @@ describe('issue_comment_form component', () => {
         noteableType,
       },
       store,
+      provide: {
+        glFeatures: features,
+      },
     });
   };
 
   beforeEach(() => {
     axiosMock = new MockAdapter(axios);
     store = createStore();
+    features = {};
   });
 
   afterEach(() => {
@@ -298,6 +303,32 @@ describe('issue_comment_form component', () => {
           });
         });
       });
+
+      describe('when note can be confidential', () => {
+        it('appends confidential status to note payload when saving', () => {
+          jest.spyOn(wrapper.vm, 'saveNote').mockReturnValue(new Promise(() => {}));
+
+          wrapper.vm.note = 'confidential note';
+
+          return wrapper.vm.$nextTick().then(() => {
+            wrapper.find('.js-comment-submit-button').trigger('click');
+
+            const [providedData] = wrapper.vm.saveNote.mock.calls[0];
+
+            expect(providedData.data.note.confidential).toBe(false);
+          });
+        });
+
+        it('should render confidential toggle as false', () => {
+          features = { confidentialNotes: true };
+          mountComponent();
+
+          const input = wrapper.find('.js-confidential-note-toggle .form-check-input');
+
+          expect(input.exists()).toBe(true);
+          expect(input.attributes('checked')).toBeFalsy();
+        });
+      });
     });
 
     describe('issue is confidential', () => {

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);
+    });
+  });
 });