Connect confidential component to notes store

app/assets/javascripts/notes/index.js

@@ -2,11 +2,9 @@ import Vue from 'vue';
 import notesApp from './components/notes_app.vue';
 import initDiscussionFilters from './discussion_filters';
 import initSortDiscussions from './sort_discussions';
-import createStore from './stores';
+import { store } from './stores';
 
 document.addEventListener('DOMContentLoaded', () => {
-  const store = createStore();
-
   // eslint-disable-next-line no-new
   new Vue({
     el: '#js-vue-notes',

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

@@ -4,4 +4,8 @@ import notesModule from './modules';
 
 Vue.use(Vuex);
 
-export default () => new Vuex.Store(notesModule());
+// NOTE: Giving the option to either use a singleton or new instance of notes.
+const notesStore = () => new Vuex.Store(notesModule());
+
+export default notesStore;
+export const store = notesStore();

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

@@ -25,6 +25,7 @@ export default () => ({
     },
     userData: {},
     noteableData: {
+      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/sidebar/components/confidential/confidential_issue_sidebar.vue

 <script>
+import { mapState } from 'vuex';
 import { __ } from '~/locale';
 import Flash from '~/flash';
 import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '~/sidebar/event_hub';
-import editForm from './edit_form.vue';
+import EditForm from './edit_form.vue';
 import recaptchaModalImplementor from '~/vue_shared/mixins/recaptcha_modal_implementor';
 
 export default {
   components: {
-    editForm,
+    EditForm,
     Icon,
   },
   directives: {
@@ -17,10 +18,6 @@ export default {
   },
   mixins: [recaptchaModalImplementor],
   props: {
-    isConfidential: {
-      required: true,
-      type: Boolean,
-    },
     isEditable: {
       required: true,
       type: Boolean,
@@ -36,11 +33,12 @@ export default {
     };
   },
   computed: {
+    ...mapState({ confidential: ({ noteableData }) => noteableData.confidential }),
     confidentialityIcon() {
-      return this.isConfidential ? 'eye-slash' : 'eye';
+      return this.confidential ? 'eye-slash' : 'eye';
     },
     tooltipLabel() {
-      return this.isConfidential ? __('Confidential') : __('Not confidential');
+      return this.confidential ? __('Confidential') : __('Not confidential');
     },
   },
   created() {
@@ -95,17 +93,16 @@ export default {
         data-track-label="right_sidebar"
         data-track-property="confidentiality"
         @click.prevent="toggleForm"
+        >{{ __('Edit') }}</a
       >
-        {{ __('Edit') }}
-      </a>
     </div>
     <div class="value sidebar-item-value hide-collapsed">
-      <editForm
+      <edit-form
         v-if="edit"
-        :is-confidential="isConfidential"
+        :is-confidential="confidential"
         :update-confidential-attribute="updateConfidentialAttribute"
       />
-      <div v-if="!isConfidential" class="no-value sidebar-item-value">
+      <div v-if="!confidential" class="no-value sidebar-item-value">
         <icon :size="16" name="eye" aria-hidden="true" class="sidebar-item-icon inline" />
         {{ __('Not confidential') }}
       </div>

app/assets/javascripts/sidebar/mount_sidebar.js

@@ -10,6 +10,7 @@ import sidebarParticipants from './components/participants/sidebar_participants.
 import sidebarSubscriptions from './components/subscriptions/sidebar_subscriptions.vue';
 import Translate from '../vue_shared/translate';
 import createDefaultClient from '~/lib/graphql';
+import { store } from '~/notes/stores';
 
 Vue.use(Translate);
 Vue.use(VueApollo);
@@ -59,8 +60,8 @@ function mountConfidentialComponent(mediator) {
   const ConfidentialComp = Vue.extend(ConfidentialIssueSidebar);
 
   new ConfidentialComp({
+    store,
     propsData: {
-      isConfidential: initialData.is_confidential,
       isEditable: initialData.is_editable,
       service: mediator.service,
     },

spec/frontend/sidebar/__snapshots__/confidential_issue_sidebar_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Confidential Issue Sidebar Block renders for isConfidential = false and isEditable = false 1`] = `
+exports[`Confidential Issue Sidebar Block renders for confidential = false and isEditable = false 1`] = `
 <div
   class="block issuable-sidebar-item confidentiality"
 >
@@ -52,7 +52,7 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
 </div>
 `;
 
-exports[`Confidential Issue Sidebar Block renders for isConfidential = false and isEditable = true 1`] = `
+exports[`Confidential Issue Sidebar Block renders for confidential = false and isEditable = true 1`] = `
 <div
   class="block issuable-sidebar-item confidentiality"
 >
@@ -84,9 +84,7 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
       data-track-property="confidentiality"
       href="#"
     >
-      
       Edit
-    
     </a>
   </div>
    
@@ -114,7 +112,7 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
 </div>
 `;
 
-exports[`Confidential Issue Sidebar Block renders for isConfidential = true and isEditable = false 1`] = `
+exports[`Confidential Issue Sidebar Block renders for confidential = true and isEditable = false 1`] = `
 <div
   class="block issuable-sidebar-item confidentiality"
 >
@@ -166,7 +164,7 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
 </div>
 `;
 
-exports[`Confidential Issue Sidebar Block renders for isConfidential = true and isEditable = true 1`] = `
+exports[`Confidential Issue Sidebar Block renders for confidential = true and isEditable = true 1`] = `
 <div
   class="block issuable-sidebar-item confidentiality"
 >
@@ -198,9 +196,7 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
       data-track-property="confidentiality"
       href="#"
     >
-      
       Edit
-    
     </a>
   </div>
    

spec/frontend/sidebar/confidential_issue_sidebar_spec.js

@@ -5,6 +5,7 @@ import EditForm from '~/sidebar/components/confidential/edit_form.vue';
 import SidebarService from '~/sidebar/services/sidebar_service';
 import createFlash from '~/flash';
 import RecaptchaModal from '~/vue_shared/components/recaptcha_modal.vue';
+import createStore from '~/notes/stores';
 
 jest.mock('~/flash');
 jest.mock('~/sidebar/services/sidebar_service');
@@ -31,8 +32,10 @@ describe('Confidential Issue Sidebar Block', () => {
   };
 
   const createComponent = propsData => {
+    const store = createStore();
     const service = new SidebarService();
     wrapper = shallowMount(ConfidentialIssueSidebar, {
+      store,
       propsData: {
         service,
         ...propsData,
@@ -49,29 +52,31 @@ describe('Confidential Issue Sidebar Block', () => {
   });
 
   it.each`
-    isConfidential | isEditable
-    ${false}       | ${false}
-    ${false}       | ${true}
-    ${true}        | ${false}
-    ${true}        | ${true}
+    confidential | isEditable
+    ${false}     | ${false}
+    ${false}     | ${true}
+    ${true}      | ${false}
+    ${true}      | ${true}
   `(
-    'renders for isConfidential = $isConfidential and isEditable = $isEditable',
-    ({ isConfidential, isEditable }) => {
+    'renders for confidential = $confidential and isEditable = $isEditable',
+    ({ confidential, isEditable }) => {
       createComponent({
-        isConfidential,
         isEditable,
       });
+      wrapper.vm.$store.state.noteableData.confidential = confidential;
 
-      expect(wrapper.element).toMatchSnapshot();
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.element).toMatchSnapshot();
+      });
     },
   );
 
   describe('if editable', () => {
     beforeEach(() => {
       createComponent({
-        isConfidential: true,
         isEditable: true,
       });
+      wrapper.vm.$store.state.noteableData.confidential = true;
     });
 
     it('displays the edit form when editable', () => {