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.

app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_button.vue

+<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>

app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/add_namespace_modal.vue

+<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>

app/assets/javascripts/jira_connect/subscriptions/components/groups_list_item.vue → app/assets/javascripts/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item.vue

@@ -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: {

app/assets/javascripts/jira_connect/subscriptions/components/app.vue

 <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 />

app/assets/javascripts/jira_connect/subscriptions/constants.js

 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';

spec/frontend/jira_connect/subscriptions/components/add_namespace_button_spec.js

+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);
+  });
+});

spec/frontend/jira_connect/subscriptions/components/add_namespace_modal/add_namespace_modal_spec.js

+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);
+  });
+});

spec/frontend/jira_connect/subscriptions/components/groups_list_item_spec.js → spec/frontend/jira_connect/subscriptions/components/add_namespace_modal/groups_list_item_spec.js

@@ -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');
 

spec/frontend/jira_connect/subscriptions/components/groups_list_spec.js → spec/frontend/jira_connect/subscriptions/components/add_namespace_modal/groups_list_spec.js

@@ -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 {

spec/frontend/jira_connect/subscriptions/components/app_spec.js

-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);
       });
     });