Add confidential and locked discussion vue components for issue header

app/assets/javascripts/issue_show/components/issuable_header_warnings.vue

+<script>
+import { mapState } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  computed: {
+    ...mapState({
+      confidential: ({ noteableData }) => noteableData.confidential,
+      dicussionLocked: ({ noteableData }) => noteableData.discussion_locked,
+    }),
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-inline-block">
+    <div v-if="confidential" class="issuable-warning-icon inline">
+      <icon class="icon" name="eye-slash" data-testid="confidential" />
+    </div>
+
+    <div v-if="dicussionLocked" class="issuable-warning-icon inline">
+      <icon class="icon" name="lock" data-testid="locked" />
+    </div>
+  </div>
+</template>

app/assets/javascripts/issue_show/index.js

 import Vue from 'vue';
 import issuableApp from './components/app.vue';
+import IssuableHeaderWarnings from './components/issuable_header_warnings.vue';
 import { parseIssuableData } from './utils/parse_data';
+import { store } from '~/notes/stores';
 
 export default function initIssueableApp() {
   return new Vue({
@@ -15,3 +17,13 @@ export default function initIssueableApp() {
     },
   });
 }
+
+export function issuableHeaderWarnings() {
+  return new Vue({
+    el: document.getElementById('js-issuable-header-warnings'),
+    store,
+    render(createElement) {
+      return createElement(IssuableHeaderWarnings);
+    },
+  });
+}

app/assets/javascripts/notes/stores/modules/index.js

@@ -26,6 +26,7 @@ export default () => ({
     },
     userData: {},
     noteableData: {
+      discussion_locked: false,
       confidential: false, // TODO: Move data like this to Issue Store, should not be apart of notes.
       current_user: {},
       preview_note_path: 'path/to/preview',

app/assets/javascripts/pages/projects/issues/show.js

@@ -3,7 +3,7 @@ import Issue from '~/issue';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
 import ZenMode from '~/zen_mode';
 import '~/notes/index';
-import initIssueableApp from '~/issue_show';
+import initIssueableApp, { issuableHeaderWarnings } from '~/issue_show';
 import initSentryErrorStackTraceApp from '~/sentry_error_stack_trace';
 import initRelatedMergeRequestsApp from '~/related_merge_requests';
 import initVueIssuableSidebarApp from '~/issuable_sidebar/sidebar_bundle';
@@ -12,6 +12,7 @@ export default function() {
   initIssueableApp();
   initSentryErrorStackTraceApp();
   initRelatedMergeRequestsApp();
+  issuableHeaderWarnings();
 
   import(/* webpackChunkName: 'design_management' */ '~/design_management')
     .then(module => module.default())

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

@@ -24,10 +24,7 @@
       %span.d-none.d-sm-block Open
 
     .issuable-meta
-      - if @issue.confidential
-        .issuable-warning-icon.inline= sprite_icon('eye-slash', size: 16, css_class: 'icon')
-      - if @issue.discussion_locked?
-        .issuable-warning-icon.inline= sprite_icon('lock', size: 16, css_class: 'icon')
+      #js-issuable-header-warnings
       = issuable_meta(@issue, @project, "Issue")
 
     %a.btn.btn-default.float-right.d-block.d-sm-none.gutter-toggle.issuable-gutter-toggle.js-sidebar-toggle{ href: "#" }

spec/frontend/issue_show/components/issuable_header_warnings_spec.js

+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import IssuableHeaderWarnings from '~/issue_show/components/issuable_header_warnings.vue';
+import createStore from '~/notes/stores';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('IssuableHeaderWarnings', () => {
+  let wrapper;
+  let store;
+
+  const findConfidential = () => wrapper.find('[data-testid="confidential"]');
+  const findLocked = () => wrapper.find('[data-testid="locked"]');
+  const confidentialIconName = () => findConfidential().attributes('name');
+  const lockedIconName = () => findLocked().attributes('name');
+
+  const createComponent = () => {
+    wrapper = shallowMount(IssuableHeaderWarnings, { store, localVue });
+  };
+
+  beforeEach(() => {
+    store = createStore();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+    store = null;
+  });
+
+  describe('when confidential is on', () => {
+    beforeEach(() => {
+      store.state.noteableData.confidential = true;
+
+      createComponent();
+    });
+
+    it('renders the confidential icon', () => {
+      expect(confidentialIconName()).toBe('eye-slash');
+    });
+  });
+
+  describe('when confidential is off', () => {
+    beforeEach(() => {
+      store.state.noteableData.confidential = false;
+
+      createComponent();
+    });
+
+    it('does not find the component', () => {
+      expect(findConfidential().exists()).toBe(false);
+    });
+  });
+
+  describe('when discussion locked is on', () => {
+    beforeEach(() => {
+      store.state.noteableData.discussion_locked = true;
+
+      createComponent();
+    });
+
+    it('renders the locked icon', () => {
+      expect(lockedIconName()).toBe('lock');
+    });
+  });
+
+  describe('when discussion locked is off', () => {
+    beforeEach(() => {
+      store.state.noteableData.discussion_locked = false;
+
+      createComponent();
+    });
+
+    it('does not find the component', () => {
+      expect(findLocked().exists()).toBe(false);
+    });
+  });
+});