Merge branch '219242-fix-confidentiality-note-on-epic-s-comment-field' into 'master'

Resolve "Fix confidentiality note on epic's comment field"

See merge request gitlab-org/gitlab!33486

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

@@ -29,6 +29,7 @@ export default {
   name: 'CommentForm',
   components: {
     issueWarning,
+    epicWarning: () => import('ee_component/vue_shared/components/epic/epic_warning.vue'),
     noteSignedOutWidget,
     discussionLockedWidget,
     markdownField,
@@ -60,6 +61,7 @@ export default {
       'getCurrentUserLastNote',
       'getUserData',
       'getNoteableData',
+      'getNoteableDataByProp',
       'getNotesData',
       'openState',
       'getBlockedByIssues',
@@ -135,6 +137,9 @@ export default {
         ? __('merge request')
         : __('issue');
     },
+    isIssueType() {
+      return this.noteableDisplayName === constants.ISSUE_NOTEABLE_TYPE;
+    },
     trackingLabel() {
       return slugifyWithUnderscore(`${this.commentButtonTitle} button`);
     },
@@ -346,13 +351,13 @@ export default {
             <div class="error-alert"></div>
 
             <issue-warning
-              v-if="hasWarning(getNoteableData)"
+              v-if="hasWarning(getNoteableData) && isIssueType"
               :is-locked="isLocked(getNoteableData)"
               :is-confidential="isConfidential(getNoteableData)"
               :locked-issue-docs-path="lockedIssueDocsPath"
               :confidential-issue-docs-path="confidentialIssueDocsPath"
             />
-
+            <epic-warning :is-confidential="isConfidential(getNoteableData)" />
             <markdown-field
               ref="markdownField"
               :is-submitting="isSubmitting"

ee/app/assets/javascripts/vue_shared/components/epic/epic_warning.vue

+<script>
+import { mapGetters } from 'vuex';
+import { GlIcon, GlLink } from '@gitlab/ui';
+import * as constants from '~/notes/constants';
+
+export default {
+  components: {
+    GlIcon,
+    GlLink,
+  },
+  props: {
+    isConfidential: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  computed: {
+    ...mapGetters(['getNoteableDataByProp']),
+    isNoteableTypeEpic() {
+      return this.getNoteableDataByProp('noteableType') === constants.EPIC_NOTEABLE_TYPE;
+    },
+    confidentialEpicDocsPath() {
+      return this.getNoteableDataByProp('confidential_epics_docs_path');
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-if="isNoteableTypeEpic && isConfidential" ref="epicWarning" class="issuable-note-warning">
+    <gl-icon name="eye-slash" :size="16" class="icon" />
+    <span ref="confidential">
+      {{ __('This is a confidential epic.') }}
+      {{ __('People without permission will never get a notification.') }}
+      <gl-link :href="confidentialEpicDocsPath" target="_blank">
+        {{ __('Learn more') }}
+      </gl-link>
+    </span>
+  </div>
+</template>

ee/app/serializers/epic_entity.rb

@@ -43,4 +43,8 @@ class EpicEntity < IssuableEntity
   expose :preview_note_path do |epic|
     preview_markdown_path(epic.group, target_type: 'Epic', target_id: epic.iid)
   end
+
+  expose :confidential_epics_docs_path, if: -> (epic) { epic.confidential? } do |epic|
+    help_page_path('user/group/epics/manage_epics.md', anchor: 'make-an-epic-confidential')
+  end
 end

ee/changelogs/unreleased/219242-fix-confidentiality-note-on-epic-s-comment-field.yml

+---
+title: Fix confidentiality note on epic's comment field to display the correct warning
+  text
+merge_request: 33486
+author:
+type: fixed

ee/spec/frontend/vue_shared/components/epic/__snapshots__/epic_warning_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Epic Warning Component when noteable type is epic epic is confidential renders information about confidential epic 1`] = `
+<span>
+  
+    This is a confidential epic.
+    People without permission will never get a notification.
+    
+  <gl-link-stub
+    target="_blank"
+  >
+    
+      Learn more
+    
+  </gl-link-stub>
+</span>
+`;

ee/spec/frontend/vue_shared/components/epic/epic_warning_spec.js

+import { shallowMount } from '@vue/test-utils';
+import EpicWarning from 'ee/vue_shared/components/epic/epic_warning.vue';
+import { store } from '~/notes/stores';
+import { GlIcon } from '@gitlab/ui';
+
+describe('Epic Warning Component', () => {
+  let wrapper;
+
+  const findIcon = () => wrapper.find(GlIcon);
+  const findConfidentialBlock = () => wrapper.find({ ref: 'confidential' });
+  const findEpicWarning = () => wrapper.find({ ref: 'epicWarning' });
+
+  const createComponent = (props, isNoteableEpic = true) => {
+    wrapper = shallowMount(EpicWarning, {
+      store,
+      propsData: {
+        ...props,
+      },
+      computed: {
+        isNoteableTypeEpic() {
+          return isNoteableEpic;
+        },
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when noteable type is epic', () => {
+    describe('epic is not confidential', () => {
+      beforeEach(() => {
+        createComponent({ isConfidential: false });
+      });
+
+      it('does not render warning icon', () => {
+        expect(findIcon().exists()).toBe(false);
+      });
+
+      it('does not render information about epic issue', () => {
+        expect(findConfidentialBlock().exists()).toBe(false);
+      });
+    });
+
+    describe('epic is confidential', () => {
+      beforeEach(() => {
+        createComponent({ isConfidential: true });
+      });
+
+      it('renders information about confidential epic', () => {
+        expect(findConfidentialBlock().exists()).toBe(true);
+        expect(findConfidentialBlock().element).toMatchSnapshot();
+      });
+
+      it('renders warning icon', () => {
+        expect(findIcon().exists()).toBe(true);
+      });
+    });
+  });
+
+  describe('when noteable type is not epic', () => {
+    beforeEach(() => {
+      createComponent({ isConfidential: true }, false);
+    });
+
+    it('does not render itself', () => {
+      expect(findEpicWarning().exists()).toBe(false);
+    });
+  });
+});

locale/gitlab.pot

@@ -22783,6 +22783,9 @@ msgstr ""
 msgid "This is a Work in Progress"
 msgstr ""
 
+msgid "This is a confidential epic."
+msgstr ""
+
 msgid "This is a confidential issue."
 msgstr ""