Commit 4b261773 authored by Tom Quirk's avatar Tom Quirk Committed by Frédéric Caplette

Create add_namespace_button component

In preparation for a layout re-organisation, this commit
abstracts the "Add namespace" button into its
own Vue component. Relevant tests have been
updated.

There are no user-facing changes in this MR.
parent 97ee889c
<script>
import { GlButton, GlModalDirective } from '@gitlab/ui';
import { ADD_NAMESPACE_MODAL_ID } from '../constants';
import AddNamespaceModal from './add_namespace_modal/add_namespace_modal.vue';
export default {
components: {
GlButton,
AddNamespaceModal,
},
directives: {
GlModal: GlModalDirective,
},
ADD_NAMESPACE_MODAL_ID,
};
</script>
<template>
<div>
<gl-button v-gl-modal="$options.ADD_NAMESPACE_MODAL_ID" category="primary" variant="info">
{{ s__('Integrations|Add namespace') }}
</gl-button>
<add-namespace-modal />
</div>
</template>
<script>
import { GlModal } from '@gitlab/ui';
import { __, s__ } from '~/locale';
import { ADD_NAMESPACE_MODAL_ID } from '../../constants';
import GroupsList from './groups_list.vue';
export default {
components: { GlModal, GroupsList },
modal: {
id: ADD_NAMESPACE_MODAL_ID,
title: s__('Integrations|Link namespaces'),
cancelProps: {
text: __('Cancel'),
},
},
};
</script>
<template>
<gl-modal
:modal-id="$options.modal.id"
:title="$options.modal.title"
:action-cancel="$options.modal.cancelProps"
>
<groups-list />
</gl-modal>
</template>
......@@ -4,7 +4,7 @@ import { helpPagePath } from '~/helpers/help_page_helper';
import { addSubscription } from '~/jira_connect/subscriptions/api';
import { persistAlert, reloadPage } from '~/jira_connect/subscriptions/utils';
import { s__ } from '~/locale';
import GroupItemName from './group_item_name.vue';
import GroupItemName from '../group_item_name.vue';
export default {
components: {
......
<script>
import { GlAlert, GlButton, GlLink, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
import { GlAlert, GlButton, GlLink, GlSprintf } from '@gitlab/ui';
import { mapState, mapMutations } from 'vuex';
import { retrieveAlert, getLocation } from '~/jira_connect/subscriptions/utils';
import { __ } from '~/locale';
import { SET_ALERT } from '../store/mutation_types';
import GroupsList from './groups_list.vue';
import SubscriptionsList from './subscriptions_list.vue';
import AddNamespaceButton from './add_namespace_button.vue';
export default {
name: 'JiraConnectApp',
......@@ -13,13 +12,9 @@ export default {
GlAlert,
GlButton,
GlLink,
GlModal,
GlSprintf,
GroupsList,
SubscriptionsList,
},
directives: {
GlModalDirective,
AddNamespaceButton,
},
inject: {
usersPath: {
......@@ -44,11 +39,6 @@ export default {
return Boolean(this.alert?.message);
},
},
modal: {
cancelProps: {
text: __('Cancel'),
},
},
created() {
this.setInitialAlert();
this.setLocation();
......@@ -101,22 +91,7 @@ export default {
target="_blank"
>{{ s__('Integrations|Sign in to add namespaces') }}</gl-button
>
<template v-else>
<gl-button
v-gl-modal-directive="'add-namespace-modal'"
category="primary"
variant="info"
class="gl-align-self-center"
>{{ s__('Integrations|Add namespace') }}</gl-button
>
<gl-modal
modal-id="add-namespace-modal"
:title="s__('Integrations|Link namespaces')"
:action-cancel="$options.modal.cancelProps"
>
<groups-list />
</gl-modal>
</template>
<add-namespace-button v-else />
</div>
<subscriptions-list />
......
export const DEFAULT_GROUPS_PER_PAGE = 10;
export const ALERT_LOCALSTORAGE_KEY = 'gitlab_alert';
export const MINIMUM_SEARCH_TERM_LENGTH = 3;
export const ADD_NAMESPACE_MODAL_ID = 'add-namespace-modal';
import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import AddNamespaceButton from '~/jira_connect/subscriptions/components/add_namespace_button.vue';
import AddNamespaceModal from '~/jira_connect/subscriptions/components/add_namespace_modal/add_namespace_modal.vue';
import { ADD_NAMESPACE_MODAL_ID } from '~/jira_connect/subscriptions/constants';
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
describe('AddNamespaceButton', () => {
let wrapper;
const createComponent = () => {
wrapper = shallowMount(AddNamespaceButton, {
directives: {
glModal: createMockDirective(),
},
});
};
const findButton = () => wrapper.findComponent(GlButton);
const findModal = () => wrapper.findComponent(AddNamespaceModal);
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('displays a button', () => {
expect(findButton().exists()).toBe(true);
});
it('contains a modal', () => {
expect(findModal().exists()).toBe(true);
});
it('button is bound to the modal', () => {
const { value } = getBinding(findButton().element, 'gl-modal');
expect(value).toBeTruthy();
expect(value).toBe(ADD_NAMESPACE_MODAL_ID);
});
});
import { shallowMount } from '@vue/test-utils';
import AddNamespaceModal from '~/jira_connect/subscriptions/components/add_namespace_modal/add_namespace_modal.vue';
import GroupsList from '~/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue';
import { ADD_NAMESPACE_MODAL_ID } from '~/jira_connect/subscriptions/constants';
describe('AddNamespaceModal', () => {
let wrapper;
const createComponent = () => {
wrapper = shallowMount(AddNamespaceModal);
};
const findModal = () => wrapper.findComponent(AddNamespaceModal);
const findGroupsList = () => wrapper.findComponent(GroupsList);
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('displays modal with correct props', () => {
const modal = findModal();
expect(modal.exists()).toBe(true);
expect(modal.attributes()).toMatchObject({
modalid: ADD_NAMESPACE_MODAL_ID,
title: AddNamespaceModal.modal.title,
});
});
it('displays GroupList', () => {
expect(findGroupsList().exists()).toBe(true);
});
});
......@@ -4,9 +4,9 @@ import waitForPromises from 'helpers/wait_for_promises';
import * as JiraConnectApi from '~/jira_connect/subscriptions/api';
import GroupItemName from '~/jira_connect/subscriptions/components/group_item_name.vue';
import GroupsListItem from '~/jira_connect/subscriptions/components/groups_list_item.vue';
import GroupsListItem from '~/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item.vue';
import { persistAlert, reloadPage } from '~/jira_connect/subscriptions/utils';
import { mockGroup1 } from '../mock_data';
import { mockGroup1 } from '../../mock_data';
jest.mock('~/jira_connect/subscriptions/utils');
......
......@@ -3,10 +3,10 @@ import { shallowMount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import waitForPromises from 'helpers/wait_for_promises';
import { fetchGroups } from '~/jira_connect/subscriptions/api';
import GroupsList from '~/jira_connect/subscriptions/components/groups_list.vue';
import GroupsListItem from '~/jira_connect/subscriptions/components/groups_list_item.vue';
import GroupsList from '~/jira_connect/subscriptions/components/add_namespace_modal/groups_list.vue';
import GroupsListItem from '~/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item.vue';
import { DEFAULT_GROUPS_PER_PAGE } from '~/jira_connect/subscriptions/constants';
import { mockGroup1, mockGroup2 } from '../mock_data';
import { mockGroup1, mockGroup2 } from '../../mock_data';
const createMockGroup = (groupId) => {
return {
......
import { GlAlert, GlButton, GlModal, GlLink } from '@gitlab/ui';
import { GlAlert, GlButton, GlLink } from '@gitlab/ui';
import { mount, shallowMount } from '@vue/test-utils';
import JiraConnectApp from '~/jira_connect/subscriptions/components/app.vue';
import AddNamespaceButton from '~/jira_connect/subscriptions/components/add_namespace_button.vue';
import createStore from '~/jira_connect/subscriptions/store';
import { SET_ALERT } from '~/jira_connect/subscriptions/store/mutation_types';
import { __ } from '~/locale';
......@@ -18,7 +19,7 @@ describe('JiraConnectApp', () => {
const findAlert = () => wrapper.findComponent(GlAlert);
const findAlertLink = () => findAlert().findComponent(GlLink);
const findGlButton = () => wrapper.findComponent(GlButton);
const findGlModal = () => wrapper.findComponent(GlModal);
const findAddNamespaceButton = () => wrapper.findComponent(AddNamespaceButton);
const createComponent = ({ provide, mountFn = shallowMount } = {}) => {
store = createStore();
......@@ -45,7 +46,7 @@ describe('JiraConnectApp', () => {
it('renders "Sign in" button', () => {
expect(findGlButton().text()).toBe('Sign in to add namespaces');
expect(findGlModal().exists()).toBe(false);
expect(findAddNamespaceButton().exists()).toBe(false);
});
});
......@@ -54,9 +55,8 @@ describe('JiraConnectApp', () => {
createComponent();
});
it('renders "Add" button and modal', () => {
expect(findGlButton().text()).toBe('Add namespace');
expect(findGlModal().exists()).toBe(true);
it('renders "Add namespace" button ', () => {
expect(findAddNamespaceButton().exists()).toBe(true);
});
});
......
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