passbolt-styleguide 3.5.2 → 3.6.0-alpha2

package/src/react-extension/components/User/DisplayUserBadgeMenu/DisplayUserBadgeMenu.test.stories.js

@@ -1,6 +1,5 @@
 import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
-import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DisplayUserBadgeMenu from "./DisplayUserBadgeMenu";
 
@@ -10,15 +9,10 @@ export default {
   component: DisplayUserBadgeMenu
 };
 
-const context = {};
-
-
 const Template = args =>
-  <AppContext.Provider value={context}>
-    <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <DisplayUserBadgeMenu {...args} {...routerProps}/>}></Route>
-    </MemoryRouter>
-  </AppContext.Provider>;
+  <MemoryRouter initialEntries={['/']}>
+    <Route component={routerProps => <DisplayUserBadgeMenu {...args} {...routerProps}/>}></Route>
+  </MemoryRouter>;
 
 Template.propTypes = {
   context: PropTypes.object,
@@ -26,6 +20,7 @@ Template.propTypes = {
 
 export const Initial = Template.bind({});
 Initial.args = {
+  baseUrl: (new URL(window.location.href)).origin,
   user: {
     "id": "8e3874ae-4b40-590b-968a-418f704b9d9a",
     "role_id": "a58de6d3-f52c-5080-b79b-a601a647ac85",
@@ -63,5 +58,8 @@ Initial.args = {
     },
     "__placeholder_last_logged_in__": "",
     "last_logged_in": ""
+  },
+  context: {
+    onLogoutRequested: () => {}
   }
 };

package/src/react-extension/components/User/DisplayUserWorkspace/DisplayUserWorkspace.js

@@ -16,7 +16,7 @@
 import React from 'react';
 import DisplayUsers from "../DisplayUsers/DisplayUsers";
 import {withUserWorkspace} from "../../../contexts/UserWorkspaceContext";
-import {withRouter} from "react-router-dom";
+import {Route, withRouter} from "react-router-dom";
 import PropTypes from "prop-types";
 import DisplayUserDetails from "../../UserDetails/DisplayUserDetails/DisplayUserDetails";
 import DisplayUserWorkspaceActions from "../DisplayUserWorkspaceActions/DisplayUserWorkspaceActions";
@@ -29,6 +29,7 @@ import FilterUsersByText from "../FilterUsersByText/FilterUsersByText";
 import DisplayUserGroupDetails from "../../UserGroup/DisplayUserGroupDetails/DisplayUserGroupDetails";
 import DisplayUserWorkspaceMainActions from "../DisplayUserWorkspaceMainActions/DisplayUserWorkspaceMainActions";
 import FilterUsersByBreadcrumb from "../FilterUsersByBreadcrumb/FilterUsersByBreadcrumb";
+import HandleReviewAccountRecoveryRequestRoute from "../HandleReviewAccountRecoveryRequestRoute/HandleReviewAccountRecoveryRequestRoute";
 
 /**
  * This component is a container for all the user workspace features
@@ -57,6 +58,9 @@ class DisplayUserWorkspace extends React.Component {
   render() {
     return (
       <div>
+        {this.props.context.users &&
+        <Route path="/app/account-recovery/requests/review/:accountRecoveryRequestId" component={HandleReviewAccountRecoveryRequestRoute}/>
+        }
         <div className="header second">
           <Logo/>
           <FilterUsersByText/>

package/src/react-extension/components/User/DisplayUserWorkspace/DisplayUserWorkspace.test.data.js

@@ -1,18 +1,27 @@
-import MockPort from "../../../test/mock/MockPort";
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         2.11.0
+ */
+
+import {defaultAppContext} from "../../../contexts/ExtAppContext.test.data";
 
 /**
  * Returns the default app context for the unit test
  * @param appContext An existing app context
  * @returns {any | ({userSettings: UserSettings, siteSettings: SiteSettings, port: MockPort} & {})}
  */
-export function defaultAppContext(appContext) {
-  const defaultAppContext = {
-    port: new MockPort(),
-    userSettings: {
-      getTrustedDomain: () => 'some url'
-    },
-  };
-  return Object.assign(defaultAppContext, appContext || {});
+export function defaultContext(data = {}) {
+  const defaultData = defaultAppContext();
+  return Object.assign(defaultData, data);
 }
 
 /**

package/src/react-extension/components/User/DisplayUserWorkspace/DisplayUserWorkspace.test.js

@@ -17,7 +17,7 @@
  */
 import React from 'react';
 import {
-  defaultAppContext,
+  defaultContext,
   propsWithGroupDetails,
   propsWithoutLock,
   propsWithUserDetails
@@ -42,7 +42,7 @@ beforeEach(() => {
 
 describe("Display User Workspace", () => {
   let page; // The page to test against
-  const context = defaultAppContext(); // The applicative context
+  const context = defaultContext(); // The applicative context
 
   it('As LU, I should see the user details area if the area is locked and the details is on an user', async() => {
     page = new DisplayUserWorkspacePage(context, propsWithUserDetails());

package/src/react-extension/components/User/DisplayUserWorkspaceActions/DisplayUserWorkspaceActions.js

@@ -25,6 +25,9 @@ import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import ConfirmDisableUserMFA from "../ConfirmDisableUserMFA/ConfirmDisableUserMFA";
 import {Trans, withTranslation} from "react-i18next";
+import HandleReviewAccountRecoveryRequestWorkflow
+  from "../../AccountRecovery/HandleReviewAccountRecoveryRequestWorkflow/HandleReviewAccountRecoveryRequestWorkflow";
+import {withWorkflow} from "../../../contexts/WorkflowContext";
 
 /**
  * This component is a container of multiple actions applicable on user
@@ -62,6 +65,7 @@ class DisplayUserWorkspaceActions extends React.Component {
     this.handleDisableMfaEvent = this.handleDisableMfaEvent.bind(this);
     this.handleCopyPermalinkEvent = this.handleCopyPermalinkEvent.bind(this);
     this.handleResendInviteClickEvent = this.handleResendInviteClickEvent.bind(this);
+    this.handleReviewRecoveryRequestEvent = this.handleReviewRecoveryRequestEvent.bind(this);
   }
 
   /**
@@ -179,7 +183,6 @@ class DisplayUserWorkspaceActions extends React.Component {
    */
   handleError(error) {
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
       message: error.message
     };
     this.props.context.setContext({errorDialogProps});
@@ -212,6 +215,15 @@ class DisplayUserWorkspaceActions extends React.Component {
     this.closeMoreMenu();
   }
 
+  /**
+   * Handle review recovery request click event
+   */
+  handleReviewRecoveryRequestEvent() {
+    this.closeMoreMenu();
+    const accountRecoveryRequestId = this.selectedUser.pending_account_recovery_request.id;
+    this.props.workflowContext.start(HandleReviewAccountRecoveryRequestWorkflow, {accountRecoveryRequestId});
+  }
+
   /**
    * Get selected user
    * @returns {user|null}
@@ -262,6 +274,21 @@ class DisplayUserWorkspaceActions extends React.Component {
     return this.selectedUser && !this.selectedUser.active;
   }
 
+  /**
+   * Check if the user can use the review recovery request capability.
+   */
+  canIReviewAccountRecoveryRequest() {
+    return this.props.context.siteSettings.canIUse("accountRecovery") && this.isLoggedInUserAdmin();
+  }
+
+  /**
+   * Has a pending account recovery for the user.
+   * @returns {boolean}
+   */
+  hasPendingAccountRecoveryRequest() {
+    return this.selectedUser && Boolean(this.selectedUser.pending_account_recovery_request);
+  }
+
   /**
    * Check if the users workspace has one user selected.
    * @return {boolean}
@@ -344,12 +371,10 @@ class DisplayUserWorkspaceActions extends React.Component {
    */
   onResendInviteFailure(error) {
     const errorDialogProps = {
-      title: "There was an unexpected error...",
-      message: error.message
+      error: error
     };
     this.toggleMoreMenu();
-    this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**
@@ -433,6 +458,22 @@ class DisplayUserWorkspaceActions extends React.Component {
                   </div>
                 </li>
                 }
+                {this.canIReviewAccountRecoveryRequest() &&
+                <li key="review-recovery-user" className="ready">
+                  <div className="row">
+                    <div className="main-cell-wrapper">
+                      <div className="main-cell">
+                        <a
+                          id="review-recovery"
+                          onClick={this.handleReviewRecoveryRequestEvent}
+                          className={`${!this.hasPendingAccountRecoveryRequest() ? "disabled" : ""}`}>
+                          <span><Trans>Review recovery request</Trans></span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                }
               </ul>
             </div>
           </ul>
@@ -458,9 +499,10 @@ class DisplayUserWorkspaceActions extends React.Component {
 DisplayUserWorkspaceActions.propTypes = {
   context: PropTypes.any, // The application context
   userWorkspaceContext: PropTypes.any, // the user workspace context
+  workflowContext: PropTypes.any, // the workflow context
   dialogContext: PropTypes.any, // the dialog context
   actionFeedbackContext: PropTypes.object, // the action feeedback context
   t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withActionFeedback(withDialog(withUserWorkspace(withTranslation('common')(DisplayUserWorkspaceActions)))));
+export default withAppContext(withActionFeedback(withWorkflow(withDialog(withUserWorkspace(withTranslation('common')(DisplayUserWorkspaceActions))))));

package/src/react-extension/components/User/DisplayUserWorkspaceActions/DisplayUserWorkspaceActions.test.data.js

@@ -11,6 +11,9 @@ export function defaultAppContext(appContext) {
     siteSettings: {
       canIUse: () => true
     },
+    userSettings: {
+      getTrustedDomain: () => 'https://passbolt.local'
+    },
     loggedInUser: {
       id: "220ebc06-5ec1-5322-a1ae-6120ed2f3a74",
       role: {
@@ -76,7 +79,10 @@ export function propsWithSelectedUser() {
           },
           "__placeholder_last_logged_in__": "",
           "last_logged_in": "",
-          is_mfa_enabled: true
+          is_mfa_enabled: true,
+          pending_account_recovery_request: {
+            id: "54c6278e-f824-5fda-91ff-3e946b18d997"
+          },
         }
       ]
     }
@@ -136,3 +142,12 @@ export function propsWithSelectedMFADisabledUser() {
   props.userWorkspaceContext.selectedUsers[0].is_mfa_enabled = false;
   return props;
 }
+
+/**
+ * Props with temporary pending account recovery selected user
+ */
+export function propsWithSelectedUserTemporaryHasPendingAccountRecovery() {
+  const props = propsWithSelectedUser();
+  props.userWorkspaceContext.selectedUsers[0].pending_account_recovery_request = true;
+  return props;
+}

package/src/react-extension/components/User/DisplayUserWorkspaceActions/DisplayUserWorkspaceActions.test.js

@@ -132,6 +132,20 @@ describe("Display User Workspace Actions", () => {
     await page.lockDetails();
     expect(props.userWorkspaceContext.onDetailsLocked).toHaveBeenCalled();
   });
+
+  it('As AD I should not disable a review account recovery request if a user is selected', async() => {
+    page = new DisplayUserWorkspaceActionsPage(context, propsWithSelectedUser());
+    await waitFor(() => {});
+    await page.moreActions();
+    expect(page.canReviewAccountRecovery).toBeTruthy();
+  });
+
+  it('As AD I should not disable a review account recovery request if no user is selected', async() => {
+    page = new DisplayUserWorkspaceActionsPage(context, propsWithoutSelectedUser());
+    await waitFor(() => {});
+    await page.moreActions();
+    expect(page.canReviewAccountRecovery).toBeFalsy();
+  });
 });
 
 

package/src/react-extension/components/User/DisplayUserWorkspaceActions/DisplayUserWorkspaceActions.test.page.js

@@ -82,6 +82,14 @@ export default class DisplayUserWorkspaceActionsPage {
     return Boolean(element) && !element.classList.contains('disabled');
   }
 
+  /**
+   * Returns true if one can review account recovery of a user
+   */
+  get canReviewAccountRecovery() {
+    const element = this._page.container.querySelectorAll('li a')[5];
+    return Boolean(element) && !element.classList.contains('disabled');
+  }
+
   /**
    * Asks for more actions through the dropdown
    */

package/src/react-extension/components/User/DisplayUserWorkspaceActions/DisplayUserWorkspaceActions.test.stories.js

@@ -0,0 +1,55 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.6.0
+ */
+
+import {MemoryRouter, Route} from "react-router-dom";
+import React from "react";
+import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import DisplayUserWorkspaceActions from "./DisplayUserWorkspaceActions";
+import {
+  defaultAppContext,
+  propsWithSelectedUser,
+  propsWithSelectedUserTemporaryHasPendingAccountRecovery
+} from "./DisplayUserWorkspaceActions.test.data";
+
+
+export default {
+  title: 'Passbolt/User/DisplayUserWorkspaceActions',
+  component: DisplayUserWorkspaceActions
+};
+
+
+const Template = args =>
+  <MockTranslationProvider>
+    <div className="header third">
+      <MemoryRouter initialEntries={['/']}>
+        <Route component={routerProps => <DisplayUserWorkspaceActions {...args} {...routerProps}/>}></Route>
+      </MemoryRouter>
+    </div>
+  </MockTranslationProvider>;
+
+export const AdminWithoutReviewRecovery = Template.bind({});
+AdminWithoutReviewRecovery.args = Object.assign(propsWithSelectedUser(), {context: defaultAppContext()});
+
+export const AdminWithReviewRecovery =  Template.bind({});
+AdminWithReviewRecovery.args = Object.assign(propsWithSelectedUserTemporaryHasPendingAccountRecovery(), {context: defaultAppContext()});
+
+export const User = Template.bind({});
+const userRole = {
+  loggedInUser: {
+    role: {
+      name: 'user'
+    }
+  },
+};
+User.args = Object.assign(propsWithSelectedUser, {context: defaultAppContext(userRole)});

package/src/react-extension/components/User/DisplayUsers/DisplayUsers.js

@@ -247,6 +247,14 @@ class DisplayUsers extends React.Component {
     return this.props.context.loggedInUser && this.props.context.loggedInUser.role.name === 'admin';
   }
 
+  /**
+   * Returns true if the accountRecovery feature is enabled and if the logged in user is an admin.
+   * @returns {boolean}
+   */
+  hasAttentionRequiredColumn() {
+    return this.props.context.siteSettings.canIUse("accountRecovery") && this.isLoggedInUserAdmin();
+  }
+
   /**
    * Format date in time ago
    * @param {string} date The date to format
@@ -266,6 +274,7 @@ class DisplayUsers extends React.Component {
     const roleName = this.props.userWorkspaceContext.getTranslatedRoleName(user.role_id);
     const mfa = user.is_mfa_enabled ? this.translate("Enabled") : this.translate("Disabled");
     const rowClassName = `${isSelected ? "selected" : ""} ${user.active ? "" : "inactive"}`;
+    const hasUserAttentionRequired = Boolean(user.pending_account_recovery_request);
 
     return (
       <tr
@@ -285,6 +294,13 @@ class DisplayUsers extends React.Component {
             </div>
           </div>
         </td>
+        {this.hasAttentionRequiredColumn() &&
+          <td className="s-cell attention-required">
+            {hasUserAttentionRequired &&
+            <Icon name="exclamation" baseline={true}/>
+            }
+          </td>
+        }
         <td className="cell-name l-cell">
           <div title={`${user.profile.first_name} ${user.profile.last_name}`}>
             {`${user.profile.first_name} ${user.profile.last_name}`}
@@ -368,6 +384,25 @@ class DisplayUsers extends React.Component {
                         </label>
                       </div>
                     </th>
+                    {this.hasAttentionRequiredColumn() &&
+                    <th className="s-cell attention-required">
+                      <a onClick={ev => this.handleSortByColumnClick(ev, "attentionRequired")}>
+                        <div className="cell-header">
+                          <span className="cell-header-text">
+                            <Icon name="exclamation" baseline={true}/>
+                          </span>
+                          <span className="cell-header-icon-sort">
+                            {this.isSortedColumn("attentionRequired") && this.isSortedAsc() &&
+                            <Icon baseline={true} name="caret-up"/>
+                            }
+                            {this.isSortedColumn("attentionRequired") && !this.isSortedAsc() &&
+                            <Icon baseline={true} name="caret-down"/>
+                            }
+                          </span>
+                        </div>
+                      </a>
+                    </th>
+                    }
                     <th className="cell-name l-cell sortable">
                       <a onClick={ev => this.handleSortByColumnClick(ev, "name")}>
                         <div className="cell-header">

package/src/react-extension/components/User/DisplayUsers/DisplayUsers.test.data.js

@@ -1,24 +1,34 @@
-import MockPort from "../../../test/mock/MockPort";
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         2.11.0
+ */
+
 import {UserWorkspaceFilterTypes} from "../../../contexts/UserWorkspaceContext";
+import {defaultAppContext} from "../../../contexts/ExtAppContext.test.data";
 
 /**
  * Returns the default app context for the unit test
  * @param appContext An existing app context
  * @returns {any | ({userSettings: UserSettings, siteSettings: SiteSettings, port: MockPort} & {})}
  */
-export function defaultAppContext(appContext) {
-  const defaultAppContext = {
-    port: new MockPort(),
-    siteSettings: {
-      getServerTimezone: () => ''
-    },
+export function defaultContext(data = {}) {
+  const defaultData = defaultAppContext({
     loggedInUser: {
       role: {
         name: 'admin'
       }
     }
-  };
-  return Object.assign(defaultAppContext, appContext || {});
+  });
+  return Object.assign(defaultData, data);
 }
 
 
@@ -29,7 +39,7 @@ export function defaultAppContext(appContext) {
 export function defaultProps() {
   return {
     userWorkspaceContext: {
-      onUserScrolled: jest.fn(),
+      onUserScrolled: () => {},
       scrollTo: {
         user: {
           "id": "54c6278e-f824-5fda-91ff-3e946b18d994",
@@ -78,9 +88,9 @@ export function defaultProps() {
           is_mfa_enabled: false
         }
       },
-      onSorterChanged: jest.fn(),
+      onSorterChanged: () => {},
       onUserSelected: {
-        single: jest.fn()
+        single: () => {}
       },
       sorter: {
         propertyName: 'modified'
@@ -181,7 +191,7 @@ export function defaultProps() {
       filter: {
         type: UserWorkspaceFilterTypes.ALL
       },
-      getTranslatedRoleName: jest.fn(name => name),
+      getTranslatedRoleName: name => name,
     }
   };
 }
@@ -215,3 +225,13 @@ export function propsWithNoUsersWithTextSearch() {
     }
   };
 }
+
+/**
+ * Props with no users using the text search
+ * @returns {any}
+ */
+export function propsWithFirstUserAttentionRequired() {
+  const props = defaultProps();
+  props.userWorkspaceContext.filteredUsers[0].pending_account_recovery_request = true;
+  return props;
+}

package/src/react-extension/components/User/DisplayUsers/DisplayUsers.test.js

@@ -17,8 +17,8 @@
  */
 
 import {
-  defaultAppContext,
-  defaultProps,
+  defaultContext,
+  defaultProps, propsWithFirstUserAttentionRequired,
   propsWithNoUsersWithTextSearch,
   propsWithNullUsers
 } from "./DisplayUsers.test.data";
@@ -31,7 +31,7 @@ beforeEach(() => {
 
 describe("Display Users", () => {
   let page; // The page to test against
-  const context = defaultAppContext(); // The applicative context
+  const context = defaultContext(); // The applicative context
   const props = defaultProps(); // The props to pass
 
   describe("As LU, I should see the appropriate list of users", () => {
@@ -54,6 +54,13 @@ describe("Display Users", () => {
       expect(page.user(1).username).toBe('carol@passbolt.com');
       expect(page.user(2).username).toBe('dame@passbolt.com');
     });
+
+    it('AS LU, I should see the appropriate filtered list of users with a user attention required', async() => {
+      page = new DisplayUsersPage(context, propsWithFirstUserAttentionRequired());
+      await waitFor(() => {});
+      expect(page.usersCount).toBe(2);
+      expect(page.user(1).attentionRequired).toBeTruthy();
+    });
   });
 
   describe('As LU, I should select users', () => {
@@ -81,6 +88,12 @@ describe("Display Users", () => {
       page = new DisplayUsersPage(context, props);
     });
 
+    it('As AD, I should sort the users by attention required', async() => {
+      jest.spyOn(props.userWorkspaceContext, 'onSorterChanged').mockImplementationOnce(() => {});
+      await page.sortByAttentionRequired();
+      expect(props.userWorkspaceContext.onSorterChanged).toHaveBeenCalledWith('attentionRequired');
+    });
+
     it('As LU, I should sort the users by fullname', async() => {
       jest.spyOn(props.userWorkspaceContext, 'onSorterChanged').mockImplementationOnce(() => {});
       await page.sortByFullname();

package/src/react-extension/components/User/DisplayUsers/DisplayUsers.test.page.js

@@ -76,6 +76,9 @@ export default class DisplayUsersPage {
       get username() {
         return element.querySelector('.username div').textContent;
       },
+      get attentionRequired() {
+        return Boolean(element.querySelector('.attention-required .exclamation'));
+      },
       async select() {
         const leftClick = {button: 0};
         fireEvent.click(element, leftClick);
@@ -87,18 +90,28 @@ export default class DisplayUsersPage {
   /**
    * Sort the users by their full name
    */
-  async sortByFullname() {
+  async sortByAttentionRequired() {
     const element = this._page.container.querySelectorAll('thead th a')[0];
     const leftClick = {button: 0};
     fireEvent.click(element, leftClick);
     await waitFor(() => {});
   }
 
+  /**
+   * Sort the users by their full name
+   */
+  async sortByFullname() {
+    const element = this._page.container.querySelectorAll('thead th a')[1];
+    const leftClick = {button: 0};
+    fireEvent.click(element, leftClick);
+    await waitFor(() => {});
+  }
+
   /**
    * Sort the users by their username
    */
   async sortByUsername() {
-    const element = this._page.container.querySelectorAll('thead th a')[1];
+    const element = this._page.container.querySelectorAll('thead th a')[2];
     const leftClick = {button: 0};
     fireEvent.click(element, leftClick);
     await waitFor(() => {});
@@ -108,7 +121,7 @@ export default class DisplayUsersPage {
    * Sort the users by role
    */
   async sortByRole() {
-    const element = this._page.container.querySelectorAll('thead th a')[2];
+    const element = this._page.container.querySelectorAll('thead th a')[3];
     const leftClick = {button: 0};
     fireEvent.click(element, leftClick);
     await waitFor(() => {});
@@ -118,7 +131,7 @@ export default class DisplayUsersPage {
    * Sort the users by their last date of modification
    */
   async sortByModified() {
-    const element = this._page.container.querySelectorAll('thead th a')[3];
+    const element = this._page.container.querySelectorAll('thead th a')[4];
     const leftClick = {button: 0};
     fireEvent.click(element, leftClick);
     await waitFor(() => {});
@@ -128,7 +141,7 @@ export default class DisplayUsersPage {
    * Sort the users by their last date of login
    */
   async sortByLastLoggedIn() {
-    const element = this._page.container.querySelectorAll('thead th a')[4];
+    const element = this._page.container.querySelectorAll('thead th a')[5];
     const leftClick = {button: 0};
     fireEvent.click(element, leftClick);
     await waitFor(() => {});
@@ -138,7 +151,7 @@ export default class DisplayUsersPage {
    * Sort the users by their mfa enable status
    */
   async sortByMFAEnabled() {
-    const element = this._page.container.querySelectorAll('thead th a')[5];
+    const element = this._page.container.querySelectorAll('thead th a')[6];
     const leftClick = {button: 0};
     fireEvent.click(element, leftClick);
     await waitFor(() => {});