Add help page url

Display warning for confidential epic

Create epic warning component

Create epicWarning component and
modify commentForm to conditionally display issueWarning

Add locale string for confidential epic warning

Rename to epic

Add spec for epicWarning

Rename isIssuableType to isIssueType

Refactor epicWarning

Add snapshot for epicWarning spec

Add changelog entry

Apply 1 suggestion(s) to 1 file(s)

Use GlIcon instead of Icon

Add test for when noteable is not epic

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" 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 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', () => {
+    it('does not render itself', () => {
+      createComponent({ isConfidential: true }, false);
+      expect(wrapper.find('.issuable-note-warning').exists()).toBe(false);
+    });
+  });
+});

locale/gitlab.pot

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