Commit b8aa6718 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Merge branch 'ss/confidential-header-update' into 'master'

Add confidential and locked discussion vue components for issue header

See merge request gitlab-org/gitlab!35382
parents f06309ee 4f2c0d6c
<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>
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);
},
});
}
......@@ -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',
......
......@@ -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())
......
......@@ -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: "#" }
......
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);
});
});
});
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