Add latest changes from gitlab-org/gitlab@master

4 files changed, 124 insertions, 3 deletions

diff --git a/spec/frontend/members/components/table/members_table_spec.js b/spec/frontend/members/components/table/members_table_spec.js
index 5cf1f40a8f4..5308d7651a3 100644
--- a/spec/frontend/members/components/table/members_table_spec.js
+++ b/spec/frontend/members/components/table/members_table_spec.js
@@ -1,4 +1,4 @@
-import { GlBadge, GlTable } from '@gitlab/ui';
+import { GlBadge, GlPagination, GlTable } from '@gitlab/ui';
 import {
   getByText as getByTextHelper,
   getByTestId as getByTestIdHelper,
@@ -6,6 +6,7 @@ import {
 } from '@testing-library/dom';
 import { mount, createLocalVue, createWrapper } from '@vue/test-utils';
 import Vuex from 'vuex';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import CreatedAt from '~/members/components/table/created_at.vue';
 import ExpirationDatepicker from '~/members/components/table/expiration_datepicker.vue';
 import ExpiresAt from '~/members/components/table/expires_at.vue';
@@ -16,7 +17,13 @@ import MembersTable from '~/members/components/table/members_table.vue';
 import RoleDropdown from '~/members/components/table/role_dropdown.vue';
 import { MEMBER_TYPES } from '~/members/constants';
 import * as initUserPopovers from '~/user_popovers';
-import { member as memberMock, directMember, invite, accessRequest } from '../../mock_data';
+import {
+  member as memberMock,
+  directMember,
+  invite,
+  accessRequest,
+  pagination,
+} from '../../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -36,6 +43,7 @@ describe('MembersTable', () => {
               table: { 'data-qa-selector': 'members_list' },
               tr: { 'data-qa-selector': 'member_row' },
             },
+            pagination,
             ...state,
           },
         },
@@ -66,6 +74,8 @@ describe('MembersTable', () => {
     });
   };
 
+  const url = 'https://localhost/foo-bar/-/project_members';
+
   const getByText = (text, options) =>
     createWrapper(getByTextHelper(wrapper.element, text, options));
 
@@ -78,6 +88,14 @@ describe('MembersTable', () => {
       `[data-label="${tableCellLabel}"][role="cell"]`,
     );
 
+  const findPagination = () => extendedWrapper(wrapper.find(GlPagination));
+
+  const expectCorrectLinkToPage2 = () => {
+    expect(findPagination().findByText('2', { selector: 'a' }).attributes('href')).toBe(
+      `${url}?page=2`,
+    );
+  };
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -219,4 +237,80 @@ describe('MembersTable', () => {
 
     expect(findTable().find('tbody tr').attributes('data-qa-selector')).toBe('member_row');
   });
+
+  describe('when required pagination data is provided', () => {
+    beforeEach(() => {
+      delete window.location;
+    });
+
+    it('renders `gl-pagination` component with correct props', () => {
+      window.location = new URL(url);
+
+      createComponent();
+
+      const glPagination = findPagination();
+
+      expect(glPagination.exists()).toBe(true);
+      expect(glPagination.props()).toMatchObject({
+        value: pagination.currentPage,
+        perPage: pagination.perPage,
+        totalItems: pagination.totalItems,
+        prevText: 'Prev',
+        nextText: 'Next',
+        labelNextPage: 'Go to next page',
+        labelPrevPage: 'Go to previous page',
+        align: 'center',
+      });
+    });
+
+    it('uses `pagination.paramName` to generate the pagination links', () => {
+      window.location = new URL(url);
+
+      createComponent({
+        pagination: {
+          currentPage: 1,
+          perPage: 5,
+          totalItems: 10,
+          paramName: 'page',
+        },
+      });
+
+      expectCorrectLinkToPage2();
+    });
+
+    it('removes any url params defined as `null` in the `params` attribute', () => {
+      window.location = new URL(`${url}?search_groups=foo`);
+
+      createComponent({
+        pagination: {
+          currentPage: 1,
+          perPage: 5,
+          totalItems: 10,
+          paramName: 'page',
+          params: { search_groups: null },
+        },
+      });
+
+      expectCorrectLinkToPage2();
+    });
+  });
+
+  describe.each`
+    attribute        | value
+    ${'paramName'}   | ${null}
+    ${'currentPage'} | ${null}
+    ${'perPage'}     | ${null}
+    ${'totalItems'}  | ${0}
+  `('when pagination.$attribute is $value', ({ attribute, value }) => {
+    it('does not render `gl-pagination`', () => {
+      createComponent({
+        pagination: {
+          ...pagination,
+          [attribute]: value,
+        },
+      });
+
+      expect(findPagination().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/members/index_spec.js b/spec/frontend/members/index_spec.js
index 8b645d9b059..751c4674a60 100644
--- a/spec/frontend/members/index_spec.js
+++ b/spec/frontend/members/index_spec.js
@@ -2,7 +2,7 @@ import { createWrapper } from '@vue/test-utils';
 import MembersApp from '~/members/components/app.vue';
 import { MEMBER_TYPES } from '~/members/constants';
 import { initMembersApp } from '~/members/index';
-import { membersJsonString, members } from './mock_data';
+import { membersJsonString, members, paginationJsonString, pagination } from './mock_data';
 
 describe('initMembersApp', () => {
   let el;
@@ -24,6 +24,7 @@ describe('initMembersApp', () => {
   beforeEach(() => {
     el = document.createElement('div');
     el.setAttribute('data-members', membersJsonString);
+    el.setAttribute('data-pagination', paginationJsonString);
     el.setAttribute('data-source-id', '234');
     el.setAttribute('data-can-manage-members', 'true');
     el.setAttribute('data-member-path', '/groups/foo-bar/-/group_members/:id');
@@ -50,6 +51,12 @@ describe('initMembersApp', () => {
     expect(vm.$store.state[MEMBER_TYPES.user].members).toEqual(members);
   });
 
+  it('parses and sets `pagination` in Vuex store', () => {
+    setup();
+
+    expect(vm.$store.state[MEMBER_TYPES.user].pagination).toEqual(pagination);
+  });
+
   it('sets `tableFields` in Vuex store', () => {
     setup();
 
diff --git a/spec/frontend/members/mock_data.js b/spec/frontend/members/mock_data.js
index a47b7ab2118..6e1ee979839 100644
--- a/spec/frontend/members/mock_data.js
+++ b/spec/frontend/members/mock_data.js
@@ -79,3 +79,19 @@ export const directMember = { ...member, isDirectMember: true };
 export const inheritedMember = { ...member, isDirectMember: false };
 
 export const member2faEnabled = { ...member, user: { ...member.user, twoFactorEnabled: true } };
+
+export const paginationJsonString = JSON.stringify({
+  current_page: 1,
+  per_page: 5,
+  total_items: 10,
+  param_name: 'page',
+  params: { search_groups: null },
+});
+
+export const pagination = {
+  currentPage: 1,
+  perPage: 5,
+  totalItems: 10,
+  paramName: 'page',
+  params: { search_groups: null },
+};
diff --git a/spec/frontend/members/utils_spec.js b/spec/frontend/members/utils_spec.js
index bfb5a4bc7d3..91e99876238 100644
--- a/spec/frontend/members/utils_spec.js
+++ b/spec/frontend/members/utils_spec.js
@@ -22,6 +22,8 @@ import {
   invite,
   membersJsonString,
   members,
+  paginationJsonString,
+  pagination,
 } from './mock_data';
 
 const IS_CURRENT_USER_ID = 123;
@@ -259,6 +261,7 @@ describe('Members Utils', () => {
     beforeEach(() => {
       el = document.createElement('div');
       el.setAttribute('data-members', membersJsonString);
+      el.setAttribute('data-pagination', paginationJsonString);
       el.setAttribute('data-source-id', '234');
       el.setAttribute('data-can-manage-members', 'true');
     });
@@ -270,6 +273,7 @@ describe('Members Utils', () => {
     it('correctly parses the data attributes', () => {
       expect(parseDataAttributes(el)).toEqual({
         members,
+        pagination,
         sourceId: 234,
         canManageMembers: true,
       });