passbolt-styleguide 3.5.3 → 3.6.0-beta1

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

@@ -15,7 +15,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {withAppContext} from "../../../contexts/AppContext";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import {withUserWorkspace} from "../../../contexts/UserWorkspaceContext";
 import EditUser from "../EditUser/EditUser";
 import {withDialog} from "../../../contexts/DialogContext";
@@ -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);
   }
 
   /**
@@ -369,27 +394,27 @@ class DisplayUserWorkspaceActions extends React.Component {
       <div className="col2_3 actions-wrapper">
         <div className="actions">
           {this.isLoggedInUserAdmin() &&
-          <ul className="ready">
+          <ul>
             <li>
-              <a className={`button ready ${this.isButtonDisabled() ? "disabled" : ""}`} onClick={this.handleEditClickEvent}>
+              <a className={`button ${this.isButtonDisabled() ? "disabled" : ""}`} onClick={this.handleEditClickEvent}>
                 <Icon name="edit"/>
                 <span><Trans>Edit</Trans></span>
               </a>
             </li>
             <li>
-              <a className={`button ready ${!this.canDelete ? "disabled" : ""}`} onClick={this.handleDeleteClickEvent}>
+              <a className={`button ${!this.canDelete ? "disabled" : ""}`} onClick={this.handleDeleteClickEvent}>
                 <Icon name="trash"/>
                 <span><Trans>Delete</Trans></span>
               </a>
             </li>
             <div className="dropdown" ref={this.moreMenuRef}>
               <a
-                className={`button ready ${this.hasMoreActionAllowed ? "" : "disabled"}`}
+                className={`button more ${this.state.moreMenuOpen ? "open" : ""} ${this.hasMoreActionAllowed ? "" : "disabled"}`}
                 onClick={this.handleMoreClickEvent}>
                 <span><Trans>More</Trans></span>
                 <Icon name="caret-down"/>
               </a>
-              <ul className={`dropdown-content menu ready ${this.state.moreMenuOpen ? "visible" : ""}`}>
+              <ul className={`dropdown-content menu right ${this.state.moreMenuOpen ? "visible" : ""}`}>
                 <li id="copy-user-permalink" className="separator-after">
                   <div className="row">
                     <div className="main-cell-wrapper">
@@ -433,13 +458,29 @@ class DisplayUserWorkspaceActions extends React.Component {
                   </div>
                 </li>
                 }
+                {this.canIReviewAccountRecoveryRequest() &&
+                <li key="review-recovery-user">
+                  <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>
           }
         </div>
         <div className="actions secondary">
-          <ul className="ready">
+          <ul>
             <li>
               <a
                 className={`button button-toggle info ${this.hasDetailsLocked() ? "selected" : ""}`}
@@ -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/DisplayUserWorkspaceMainActions/DisplayUserWorkspaceMainActions.js

@@ -15,7 +15,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {withAppContext} from "../../../contexts/AppContext";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import CreateUser from "../CreateUser/CreateUser";
 import {withDialog} from "../../../contexts/DialogContext";
 import CreateUserGroup from "../../UserGroup/CreateUserGroup/CreateUserGroup";
@@ -186,11 +186,11 @@ class DisplayUserWorkspaceMainActions extends React.Component {
       <div className="col1 main-action-wrapper">
         {this.canIUseCreate() &&
         <div className="dropdown" ref={this.createMenuRef}>
-          <a className="button create primary ready" onClick={this.handleCreateClickEvent}>
-            <Icon name="plus-circle"/>
+          <a className={`button create primary ${this.state.createMenuOpen ? "open" : ""}`} onClick={this.handleCreateClickEvent}>
+            <Icon name="add"/>
             <span><Trans>Create</Trans></span>
           </a>
-          <ul className={`dropdown-content menu ready ${this.state.createMenuOpen ? "visible" : ""}`}>
+          <ul className={`dropdown-content menu right ${this.state.createMenuOpen ? "visible" : ""}`}>
             <li id="user_action">
               <div className="row">
                 <div className="main-cell-wrapper">

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

@@ -82,7 +82,7 @@ class DisplayUserWorkspaceMainActionsPageObject {
    * Returns the create menu elements
    */
   get createMenu() {
-    return this._container.querySelector('.dropdown .button.create.primary.ready');
+    return this._container.querySelector('.dropdown .button.create.primary');
   }
 
   /**

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

@@ -15,7 +15,7 @@ import PropTypes from "prop-types";
 import React from "react";
 import ReactList from "react-list";
 import {withAppContext} from "../../../contexts/AppContext";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {withRouter} from "react-router-dom";
 import {withContextualMenu} from "../../../contexts/ContextualMenuContext";
@@ -23,6 +23,7 @@ import {UserWorkspaceFilterTypes, withUserWorkspace} from "../../../contexts/Use
 import DisplayUsersContextualMenu from "../DisplayUsersContextualMenu/DisplayUsersContextualMenu";
 import {Trans, withTranslation} from "react-i18next";
 import {DateTime} from "luxon";
+import {withAccountRecovery} from "../../../contexts/AccountRecoveryUserContext";
 
 
 /**
@@ -65,6 +66,15 @@ class DisplayUsers extends React.Component {
     this.dragFeedbackElement = React.createRef();
   }
 
+  /**
+   * ComponentDidMount
+   * Invoked immediately after component is inserted into the tree
+   * @return {void}
+   */
+  componentDidMount() {
+    this.props.accountRecoveryContext.findAccountRecoveryPolicy();
+  }
+
   /**
    * Whenever the component has been updated
    */
@@ -113,8 +123,6 @@ class DisplayUsers extends React.Component {
    * @param user An user
    */
   handleCheckboxWrapperClick(event, user) {
-    // Prevent event fired twice due to the input + label
-    event.preventDefault();
     /*
      * We want the td to extend the clickable area of the checkbox.
      * If we propagate the event, the tr will listen to the click and select only the clicked row.
@@ -132,7 +140,6 @@ class DisplayUsers extends React.Component {
     this.props.userWorkspaceContext.onSorterChanged(sortProperty);
   }
 
-
   /**
    * Returns the current list of filtered users to display
    */
@@ -247,6 +254,32 @@ 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();
+  }
+
+  /**
+   * Returns true if the mfa feature is enabled and if the logged in user is an admin.
+   * @returns {boolean}
+   */
+  hasMfaColumn() {
+    return this.props.context.siteSettings.canIUse("multiFactorAuthentication") && this.isLoggedInUserAdmin();
+  }
+
+  /**
+   * Returns true if the accountRecovery feature is enabled and if the logged in user is an admin.
+   * @returns {boolean}
+   */
+  hasAccountRecoveryColumn() {
+    return this.props.context.siteSettings.canIUse("accountRecovery")
+      && this.isLoggedInUserAdmin()
+      && this.props.accountRecoveryContext.isPolicyEnabled();
+  }
+
   /**
    * Format date in time ago
    * @param {string} date The date to format
@@ -266,6 +299,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
@@ -273,18 +307,19 @@ class DisplayUsers extends React.Component {
         className={rowClassName}
         onClick={event => this.handleUserSelected(event, user)}
         onContextMenu={event => this.handleUserRightClick(event, user)}>
-        <td
-          className="cell-multiple-select selections s-cell"
-          onClick={ev => this.handleCheckboxWrapperClick(ev, user)}>
-          <div className="ready">
-            <div className="input checkbox">
-              <input type="checkbox" id={`checkbox_multiple_select_checkbox_${user.id}`} checked={isSelected} readOnly={true}/>
-              <label htmlFor={`checkbox_multiple_select_checkbox_${user.id}`}>
-                <span className="visually-hidden"><Trans>Select user</Trans></span>
-              </label>
-            </div>
+        <td className="cell-multiple-select selections s-cell">
+          <div className="input checkbox">
+            <input type="checkbox" id={`checkbox_multiple_select_checkbox_${user.id}`} checked={isSelected} readOnly={true} onClick={ev => this.handleCheckboxWrapperClick(ev, user)}/>
+            <span className="visually-hidden"><Trans>Select user</Trans></span>
           </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}`}
@@ -310,12 +345,23 @@ class DisplayUsers extends React.Component {
             {lastLoggedInFormatted}
           </div>
         </td>
-        {this.isLoggedInUserAdmin() &&
-          <td className="cell-is_mfa_enabled m-cell">
-            <div>
-              {mfa}
-            </div>
-          </td>
+        {this.hasMfaColumn() &&
+        <td className="cell-is_mfa_enabled m-cell">
+          <div>
+            {mfa}
+          </div>
+        </td>
+        }
+        {this.hasAccountRecoveryColumn() &&
+        <td className="cell-is_account_recovery_enabled m-cell">
+          <div>
+            {{
+              "approved": <Trans>Approved</Trans>,
+              "rejected": <Trans>Rejected</Trans>,
+              [undefined]: <Trans>Pending</Trans>,
+            }[user?.account_recovery_user_setting?.status]}
+          </div>
+        </td>
         }
       </tr>
     );
@@ -360,14 +406,29 @@ class DisplayUsers extends React.Component {
                   <tr>
                     <th className="cell-multiple-select selections s-cell">
                       <div className="input checkbox">
-                        <input
-                          type="checkbox"
-                          name="select all"/>
-                        <label htmlFor="js-passwords-select-all">
-                          <span className="visually-hidden">select all</span>
-                        </label>
+                        <input type="checkbox" name="select all" checked={false} readOnly={true}/>
+                        <span className="visually-hidden">select all</span>
                       </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">
@@ -454,7 +515,7 @@ class DisplayUsers extends React.Component {
                       </a>
 
                     </th>
-                    {this.isLoggedInUserAdmin() &&
+                    {this.hasMfaColumn() &&
                       <th className="cell-is_mfa_enabled m-cell sortable">
                         <a onClick={ev => this.handleSortByColumnClick(ev, "is_mfa_enabled")}>
                           <div className="cell-header">
@@ -473,6 +534,25 @@ class DisplayUsers extends React.Component {
                         </a>
                       </th>
                     }
+                    {this.hasAccountRecoveryColumn() &&
+                    <th className="cell-account_recovery_user_setting_status m-cell sortable">
+                      <a onClick={ev => this.handleSortByColumnClick(ev, "account_recovery_user_setting.status")}>
+                        <div className="cell-header">
+                          <span className="cell-header-text">
+                            <Trans>Account recovery</Trans>
+                          </span>
+                          <span className="cell-header-icon-sort">
+                            {this.isSortedColumn("account_recovery_user_setting.status") && this.isSortedAsc() &&
+                              <Icon baseline={true} name="caret-up"/>
+                            }
+                            {this.isSortedColumn("account_recovery_user_setting.status") && !this.isSortedAsc() &&
+                            <Icon baseline={true} name="caret-down"/>
+                            }
+                          </span>
+                        </div>
+                      </a>
+                    </th>
+                    }
                   </tr>
                 </thead>
               </table>
@@ -502,7 +582,8 @@ DisplayUsers.propTypes = {
   userWorkspaceContext: PropTypes.any, // The user workspace context
   actionFeedbackContext: PropTypes.any, // The action feedback context
   contextualMenuContext: PropTypes.any, // The contextual menu context
+  accountRecoveryContext: PropTypes.object, // The account recovery context
   t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withRouter(withActionFeedback(withContextualMenu(withUserWorkspace(withTranslation('common')(DisplayUsers))))));
+export default withAppContext(withRouter(withActionFeedback(withContextualMenu(withUserWorkspace(withAccountRecovery(withTranslation('common')(DisplayUsers)))))));

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

@@ -1,24 +1,37 @@
-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";
+import {
+  defaultAccountRecoveryUserContext,
+} from "../../../contexts/AccountRecoveryUserContext.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);
 }
 
 
@@ -28,8 +41,9 @@ export function defaultAppContext(appContext) {
  */
 export function defaultProps() {
   return {
+    accountRecoveryContext: defaultAccountRecoveryUserContext(),
     userWorkspaceContext: {
-      onUserScrolled: jest.fn(),
+      onUserScrolled: () => {},
       scrollTo: {
         user: {
           "id": "54c6278e-f824-5fda-91ff-3e946b18d994",
@@ -78,9 +92,9 @@ export function defaultProps() {
           is_mfa_enabled: false
         }
       },
-      onSorterChanged: jest.fn(),
+      onSorterChanged: () => {},
       onUserSelected: {
-        single: jest.fn()
+        single: () => {}
       },
       sorter: {
         propertyName: 'modified'
@@ -181,7 +195,7 @@ export function defaultProps() {
       filter: {
         type: UserWorkspaceFilterTypes.ALL
       },
-      getTranslatedRoleName: jest.fn(name => name),
+      getTranslatedRoleName: name => name,
     }
   };
 }
@@ -215,3 +229,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;
+}