Commit 00388158 authored by Andrew Fontaine's avatar Andrew Fontaine

Merge branch 'ss/share-vuex-state-confidential' into 'master'

Connect confidential component to notes store

See merge request gitlab-org/gitlab!31032
parents 7c4295a1 b42cae52
......@@ -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',
......
......@@ -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();
......@@ -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',
},
......
<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>
......
......@@ -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,
},
......
// 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>
......
......@@ -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', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment