Adds confidential issue information

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

@@ -3,13 +3,14 @@
 
   import { mapActions, mapGetters } from 'vuex';
   import _ from 'underscore';
-  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
-  import markdownField from '../../vue_shared/components/markdown/field.vue';
-  import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
-  import eventHub from '../event_hub';
-  import * as constants from '../constants';
   import '../../autosave';
   import TaskList from '../../task_list';
+  import * as constants from '../constants';
+  import eventHub from '../event_hub';
+  import confidentialIssue from '../../vue_shared/components/issue/confidential_issue_warning.vue';
+  import issueNoteSignedOutWidget from './issue_note_signed_out_widget.vue';
+  import markdownField from '../../vue_shared/components/markdown/field.vue';
+  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
 
   export default {
     name: 'issueCommentForm',
@@ -25,9 +26,10 @@
       };
     },
     components: {
-      userAvatarLink,
-      markdownField,
+      confidentialIssue,
       issueNoteSignedOutWidget,
+      markdownField,
+      userAvatarLink,
     },
     watch: {
       note(newNote) {
@@ -88,6 +90,9 @@
       endpoint() {
         return this.getIssueData.create_note_path;
       },
+      isConfidentialIssue() {
+        return this.getIssueData.confidential;
+      },
     },
     methods: {
       ...mapActions([
@@ -195,7 +200,7 @@
           fieldName: 'note',
           selector: '.notes',
         });
-      }
+      },
     },
     mounted() {
       // jQuery is needed here because it is a custom event being dispatched with jQuery.
@@ -231,11 +236,14 @@
             <form
               class="js-main-target-form timeline-content timeline-content-form common-note-form"
               @submit="handleSave(true)">
+              <confidentialIssue v-if="isConfidentialIssue" />
+
               <markdown-field
                 :markdown-preview-url="markdownPreviewUrl"
                 :markdown-docs="markdownDocsUrl"
                 :quick-actions-docs="quickActionsDocsUrl"
-                :add-spacing-classes="false">
+                :add-spacing-classes="false"
+                :is-confidential-issue="isConfidentialIssue">
                 <textarea
                   id="note-body"
                   name="note[note]"

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

 <script>
   import { mapGetters } from 'vuex';
-  import markdownField from '../../vue_shared/components/markdown/field.vue';
   import eventHub from '../event_hub';
+  import confidentialIssue from '../../vue_shared/components/issue/confidential_issue_warning.vue';
+  import markdownField from '../../vue_shared/components/markdown/field.vue';
 
   export default {
+    name: 'issueNoteForm',
     props: {
       noteBody: {
         type: String,
@@ -37,6 +39,7 @@
       };
     },
     components: {
+      confidentialIssue,
       markdownField,
     },
     computed: {
@@ -64,6 +67,9 @@
       isDisabled() {
         return !this.note.length || this.isSubmitting;
       },
+      isConfidentialIssue() {
+        return this.getIssueDataByProp('confidential');
+      },
     },
     methods: {
       handleUpdate() {
@@ -116,6 +122,7 @@
     <div class="flash-container timeline-content"></div>
     <form
       class="edit-note common-note-form">
+      <confidentialIssue v-if="isConfidentialIssue" />
       <markdown-field
         :markdown-preview-url="markdownPreviewUrl"
         :markdown-docs="markdownDocsUrl"

app/assets/javascripts/vue_shared/components/issue/confidential_issue_warning.vue

+<script>
+  export default {
+    name: 'confidentialIssueWarning',
+  };
+</script>
+<template>
+  <div class="confidential-issue-warning">
+    <i
+    aria-hidden="true"
+    class="fa fa-eye-slash">
+    </i>
+    <span>
+      This is a confidential issue. Your comment will not be visible to the public.
+    </span>
+  </div>
+</template>

app/views/projects/_md_preview.html.haml

 - referenced_users = local_assigns.fetch(:referenced_users, nil)
 
-- if defined?(@issue) && @issue.confidential?
-  %li.confidential-issue-warning
-    = confidential_icon(@issue)
-    %span This is a confidential issue. Your comment will not be visible to the public.
-- else
-  %li.confidential-issue-warning.not-confidential
-
 .md-area
   .md-header
     %ul.nav-links.clearfix

app/views/projects/issues/_discussion.html.haml

@@ -16,5 +16,3 @@
   - content_for :page_specific_javascripts do
     = webpack_bundle_tag 'common_vue'
     = webpack_bundle_tag 'notes'
-
-= render "layouts/init_auto_complete"

spec/javascripts/notes/components/issue_comment_form_spec.js

@@ -102,6 +102,16 @@ describe('issue_comment_form component', () => {
         });
       });
     });
+
+    describe('issue is confidential', () => {
+      it('shows information warning', (done) => {
+        store.dispatch('setIssueData', Object.assign(issueDataMock, { confidential: true }));
+        Vue.nextTick(() => {
+          expect(vm.$el.querySelector('.confidential-issue-warning')).toBeDefined();
+          done();
+        });
+      });
+    });
   });
 
   describe('user is not logged in', () => {

spec/javascripts/vue_shared/components/issue/confidential_issue_warning_spec.js

+import Vue from 'vue';
+import confidentialIssue from '~/vue_shared/components/issue/confidential_issue_warning.vue';
+
+describe('Confidential Issue Warning Component', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(confidentialIssue);
+    vm = new Component().$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render confidential issue warning information', () => {
+    expect(vm.$el.querySelector('i').className).toEqual('fa fa-eye-slash');
+    expect(vm.$el.querySelector('span').textContent.trim()).toEqual('This is a confidential issue. Your comment will not be visible to the public.');
+  });
+});