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'; ...@@ -2,11 +2,9 @@ import Vue from 'vue';
import notesApp from './components/notes_app.vue'; import notesApp from './components/notes_app.vue';
import initDiscussionFilters from './discussion_filters'; import initDiscussionFilters from './discussion_filters';
import initSortDiscussions from './sort_discussions'; import initSortDiscussions from './sort_discussions';
import createStore from './stores'; import { store } from './stores';
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const store = createStore();
// eslint-disable-next-line no-new // eslint-disable-next-line no-new
new Vue({ new Vue({
el: '#js-vue-notes', el: '#js-vue-notes',
......
...@@ -4,4 +4,8 @@ import notesModule from './modules'; ...@@ -4,4 +4,8 @@ import notesModule from './modules';
Vue.use(Vuex); 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 () => ({ ...@@ -25,6 +25,7 @@ export default () => ({
}, },
userData: {}, userData: {},
noteableData: { noteableData: {
confidential: false, // TODO: Move data like this to Issue Store, should not be apart of notes.
current_user: {}, current_user: {},
preview_note_path: 'path/to/preview', preview_note_path: 'path/to/preview',
}, },
......
<script> <script>
import { mapState } from 'vuex';
import { __ } from '~/locale'; import { __ } from '~/locale';
import Flash from '~/flash'; import Flash from '~/flash';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import eventHub from '~/sidebar/event_hub'; 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'; import recaptchaModalImplementor from '~/vue_shared/mixins/recaptcha_modal_implementor';
export default { export default {
components: { components: {
editForm, EditForm,
Icon, Icon,
}, },
directives: { directives: {
...@@ -17,10 +18,6 @@ export default { ...@@ -17,10 +18,6 @@ export default {
}, },
mixins: [recaptchaModalImplementor], mixins: [recaptchaModalImplementor],
props: { props: {
isConfidential: {
required: true,
type: Boolean,
},
isEditable: { isEditable: {
required: true, required: true,
type: Boolean, type: Boolean,
...@@ -36,11 +33,12 @@ export default { ...@@ -36,11 +33,12 @@ export default {
}; };
}, },
computed: { computed: {
...mapState({ confidential: ({ noteableData }) => noteableData.confidential }),
confidentialityIcon() { confidentialityIcon() {
return this.isConfidential ? 'eye-slash' : 'eye'; return this.confidential ? 'eye-slash' : 'eye';
}, },
tooltipLabel() { tooltipLabel() {
return this.isConfidential ? __('Confidential') : __('Not confidential'); return this.confidential ? __('Confidential') : __('Not confidential');
}, },
}, },
created() { created() {
...@@ -95,17 +93,16 @@ export default { ...@@ -95,17 +93,16 @@ export default {
data-track-label="right_sidebar" data-track-label="right_sidebar"
data-track-property="confidentiality" data-track-property="confidentiality"
@click.prevent="toggleForm" @click.prevent="toggleForm"
>{{ __('Edit') }}</a
> >
{{ __('Edit') }}
</a>
</div> </div>
<div class="value sidebar-item-value hide-collapsed"> <div class="value sidebar-item-value hide-collapsed">
<editForm <edit-form
v-if="edit" v-if="edit"
:is-confidential="isConfidential" :is-confidential="confidential"
:update-confidential-attribute="updateConfidentialAttribute" :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" /> <icon :size="16" name="eye" aria-hidden="true" class="sidebar-item-icon inline" />
{{ __('Not confidential') }} {{ __('Not confidential') }}
</div> </div>
......
...@@ -10,6 +10,7 @@ import sidebarParticipants from './components/participants/sidebar_participants. ...@@ -10,6 +10,7 @@ import sidebarParticipants from './components/participants/sidebar_participants.
import sidebarSubscriptions from './components/subscriptions/sidebar_subscriptions.vue'; import sidebarSubscriptions from './components/subscriptions/sidebar_subscriptions.vue';
import Translate from '../vue_shared/translate'; import Translate from '../vue_shared/translate';
import createDefaultClient from '~/lib/graphql'; import createDefaultClient from '~/lib/graphql';
import { store } from '~/notes/stores';
Vue.use(Translate); Vue.use(Translate);
Vue.use(VueApollo); Vue.use(VueApollo);
...@@ -59,8 +60,8 @@ function mountConfidentialComponent(mediator) { ...@@ -59,8 +60,8 @@ function mountConfidentialComponent(mediator) {
const ConfidentialComp = Vue.extend(ConfidentialIssueSidebar); const ConfidentialComp = Vue.extend(ConfidentialIssueSidebar);
new ConfidentialComp({ new ConfidentialComp({
store,
propsData: { propsData: {
isConfidential: initialData.is_confidential,
isEditable: initialData.is_editable, isEditable: initialData.is_editable,
service: mediator.service, service: mediator.service,
}, },
......
// Jest Snapshot v1, https://goo.gl/fbAQLP // 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 <div
class="block issuable-sidebar-item confidentiality" class="block issuable-sidebar-item confidentiality"
> >
...@@ -52,7 +52,7 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and ...@@ -52,7 +52,7 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
</div> </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 <div
class="block issuable-sidebar-item confidentiality" class="block issuable-sidebar-item confidentiality"
> >
...@@ -84,9 +84,7 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and ...@@ -84,9 +84,7 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
data-track-property="confidentiality" data-track-property="confidentiality"
href="#" href="#"
> >
Edit Edit
</a> </a>
</div> </div>
...@@ -114,7 +112,7 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and ...@@ -114,7 +112,7 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = false and
</div> </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 <div
class="block issuable-sidebar-item confidentiality" class="block issuable-sidebar-item confidentiality"
> >
...@@ -166,7 +164,7 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and ...@@ -166,7 +164,7 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
</div> </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 <div
class="block issuable-sidebar-item confidentiality" class="block issuable-sidebar-item confidentiality"
> >
...@@ -198,9 +196,7 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and ...@@ -198,9 +196,7 @@ exports[`Confidential Issue Sidebar Block renders for isConfidential = true and
data-track-property="confidentiality" data-track-property="confidentiality"
href="#" href="#"
> >
Edit Edit
</a> </a>
</div> </div>
......
...@@ -5,6 +5,7 @@ import EditForm from '~/sidebar/components/confidential/edit_form.vue'; ...@@ -5,6 +5,7 @@ import EditForm from '~/sidebar/components/confidential/edit_form.vue';
import SidebarService from '~/sidebar/services/sidebar_service'; import SidebarService from '~/sidebar/services/sidebar_service';
import createFlash from '~/flash'; import createFlash from '~/flash';
import RecaptchaModal from '~/vue_shared/components/recaptcha_modal.vue'; import RecaptchaModal from '~/vue_shared/components/recaptcha_modal.vue';
import createStore from '~/notes/stores';
jest.mock('~/flash'); jest.mock('~/flash');
jest.mock('~/sidebar/services/sidebar_service'); jest.mock('~/sidebar/services/sidebar_service');
...@@ -31,8 +32,10 @@ describe('Confidential Issue Sidebar Block', () => { ...@@ -31,8 +32,10 @@ describe('Confidential Issue Sidebar Block', () => {
}; };
const createComponent = propsData => { const createComponent = propsData => {
const store = createStore();
const service = new SidebarService(); const service = new SidebarService();
wrapper = shallowMount(ConfidentialIssueSidebar, { wrapper = shallowMount(ConfidentialIssueSidebar, {
store,
propsData: { propsData: {
service, service,
...propsData, ...propsData,
...@@ -49,29 +52,31 @@ describe('Confidential Issue Sidebar Block', () => { ...@@ -49,29 +52,31 @@ describe('Confidential Issue Sidebar Block', () => {
}); });
it.each` it.each`
isConfidential | isEditable confidential | isEditable
${false} | ${false} ${false} | ${false}
${false} | ${true} ${false} | ${true}
${true} | ${false} ${true} | ${false}
${true} | ${true} ${true} | ${true}
`( `(
'renders for isConfidential = $isConfidential and isEditable = $isEditable', 'renders for confidential = $confidential and isEditable = $isEditable',
({ isConfidential, isEditable }) => { ({ confidential, isEditable }) => {
createComponent({ createComponent({
isConfidential,
isEditable, isEditable,
}); });
wrapper.vm.$store.state.noteableData.confidential = confidential;
expect(wrapper.element).toMatchSnapshot(); return wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
});
}, },
); );
describe('if editable', () => { describe('if editable', () => {
beforeEach(() => { beforeEach(() => {
createComponent({ createComponent({
isConfidential: true,
isEditable: true, isEditable: true,
}); });
wrapper.vm.$store.state.noteableData.confidential = true;
}); });
it('displays the edit form when editable', () => { 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