MM-14868 Team Admin can use Next button to page through list in Manag…

…e Members (mattermost#2990)

* MM-14868 Team Admin can use Next button to page through list in Manage Members

* Fix lint warnings

components/searchable_user_list/searchable_user_list.jsx

@@ -186,6 +186,7 @@ export default class SearchableUserList extends React.Component {
  if (pageEnd < this.props.users.length) {
  nextButton = (
  <button
+ id='searchableUserListNextBtn'
  className='btn btn-link filter-control filter-control__next'
  onClick={this.nextPage}
  disabled={this.state.nextDisabled}
@@ -201,6 +202,7 @@ export default class SearchableUserList extends React.Component {
  if (this.props.page > 0) {
  previousButton = (
  <button
+ id='searchableUserListPrevBtn'
  className='btn btn-link filter-control filter-control__prev'
  onClick={this.previousPage}
  >
@@ -237,7 +239,12 @@ export default class SearchableUserList extends React.Component {
  <div className='filter-row'>
  {filterRow}
  <div className='col-sm-12'>
- <span className='member-count pull-left'>{this.renderCount(usersToDisplay)}</span>
+ <span
+ id='searchableUserListTotal'
+ className='member-count pull-left'
+ >
+ {this.renderCount(usersToDisplay)}
+ </span>
  </div>
  </div>
  <div

cypress/integration/team/teammates_pagination_spec.js

@@ -0,0 +1,61 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// ***************************************************************
+// - [#] indicates a test step (e.g. # Go to a page)
+// - [*] indicates an assertion (e.g. * Check the title)
+// - Use element ID when selecting an element. Create one if none.
+// ***************************************************************
+
+/* eslint max-nested-callbacks: ["error", 7] */
+
+describe('Teams Suite', () => {
+ it('TS14868 Team Admin can use Next button to page through list in Manage Members', () => {
+ cy.apiLogin('user-1');
+
+ // # Create new team and visit its URL
+ cy.apiCreateTeam('test-team', 'Test Team').then((createResponse) => {
+ const testTeam = createResponse.body;
+ cy.visit(`/${testTeam.name}`);
+
+ cy.apiGetUsersNotInTeam(testTeam.id).then((getResponse) => {
+ const users = getResponse.body;
+
+ const usersToAdd = users.slice(0, 59).map((user) => {
+ return {
+ team_id: testTeam.id,
+ user_id: user.id,
+ };
+ });
+
+ Cypress._.chunk(usersToAdd, 20).forEach((chunk) => {
+ cy.apiAddUsersToTeam(testTeam.id, chunk);
+ });
+ });
+ });
+
+ // # Click hamburger main menu
+ cy.get('#sidebarHeaderDropdownButton').should('be.visible').click();
+
+ // # Click Manage Members
+ cy.get('#sidebarDropdownMenu #manageMembers').should('be.visible').click();
+
+ // * Check Manage Members modal dialog
+ cy.get('#teamMemberModalLabel').should('be.visible');
+
+ // * Check teammate total
+ cy.get('#searchableUserListTotal').should('contain', '1 - 50 members of 60 total');
+
+ // # Click Next button
+ cy.get('#searchableUserListNextBtn').should('be.visible').click();
+
+ // * Check teammate list advances by one page
+ cy.get('#searchableUserListTotal').should('contain', '51 - 60 members of 60 total');
+
+ // # Click Prev button
+ cy.get('#searchableUserListPrevBtn').should('be.visible').click();
+
+ // * Check teammate list reverses by one page
+ cy.get('#searchableUserListTotal').should('contain', '1 - 50 members of 60 total');
+ });
+});

cypress/support/api_commands.js

@@ -177,6 +177,36 @@ Cypress.Commands.add('apiAddUserToTeam', (teamId, userId) => {
  });
 });
 
+/**
+ * List users that are not team members
+ * @param {String} teamId - The team GUID
+ * @param {Integer} page - The desired page of the paginated list
+ * @param {Integer} perPage - The number of users per page
+ * All parameter required
+ */
+Cypress.Commands.add('apiGetUsersNotInTeam', (teamId, page = 0, perPage = 60) => {
+ return cy.request({
+ method: 'GET',
+ url: `/api/v4/users?not_in_team=${teamId}&page=${page}&per_page=${perPage}`,
+ headers: {'X-Requested-With': 'XMLHttpRequest'},
+ });
+});
+
+/**
+ * Join teammates directly via API
+ * @param {String} teamId - The team GUID
+ * @param {Array} teamMembers - The user IDs to join
+ * All parameter required
+ */
+Cypress.Commands.add('apiAddUsersToTeam', (teamId, teamMembers) => {
+ return cy.request({
+ method: 'POST',
+ url: `/api/v4/teams/${teamId}/members/batch`,
+ headers: {'X-Requested-With': 'XMLHttpRequest'},
+ body: teamMembers,
+ });
+});
+
 // *****************************************************************************
 // Preferences
 // https://api.mattermost.com/#tag/preferences