passbolt-styleguide 3.5.2 → 3.6.0-alpha2

package/src/react-extension/components/AuthenticationRecover/RecoverAuthentication/RecoverAuthentication.js

@@ -1,105 +1,113 @@
+/**
+ * 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.0.0
+ */
 import React, {Component} from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import {withAppContext} from "../../../contexts/AppContext";
 import {
-  AuthenticationContextState,
-  withAuthenticationContext
-} from "../../../contexts/AuthenticationContext";
-import ImportGpgKey from "../../Authentication/ImportGpgKey/ImportGpgKey";
-import CheckPassphrase from "../../Authentication/CheckPassphrase/CheckPassphrase";
+  AuthenticationRecoverWorkflowStates,
+  withAuthenticationRecoverContext
+} from "../../../contexts/Authentication/AuthenticationRecoverContext";
+import ImportGpgKey, {ImportGpgKeyVariations} from "../../Authentication/ImportGpgKey/ImportGpgKey";
+import CheckPassphrase, {CheckPassphraseVariations} from "../../Authentication/CheckPassphrase/CheckPassphrase";
 import ChooseSecurityToken from "../../Authentication/ChooseSecurityToken/ChooseSecurityToken";
-import AskForAuthenticationHelp from "../../Authentication/AskForAuthenticationHelp/AskForAuthenticationHelp";
+import AskForAuthenticationHelpCredentialLost, {AskForAuthenticationHelpCredentialLostVariations} from "../../Authentication/AskForAuthenticationHelpCredentialLost/AskForAuthenticationHelpCredentialLost";
 import LoadingSpinner from "../../Common/Loading/LoadingSpinner/LoadingSpinner";
-import PropTypes from "prop-types";
-import HelpOnPrivateKeyLostSecondaryAction from "../../Authentication/CheckPassphrase/HelpOnPrivateKeyLostSecondaryAction";
-import HelpOnPassphraseLostSecondaryAction
-  from "../../Authentication/CheckPassphrase/HelpOnPassphraseLostSecondaryAction";
 import DisplayUnexpectedError from "../../Authentication/DisplayUnexpectedError/DisplayUnexpectedError";
-import DisplayLoginInProgress from "../../AuthenticationLogin/DisplayLoginInProgress/DisplayLoginInProgress";
-import {withTranslation} from "react-i18next";
-import IntroduceSetupExtension from "../../Authentication/IntroduceSetupExtension/IntroduceSetupExtension";
+import IntroduceExtension from "../../Authentication/IntroduceExtension/IntroduceExtension";
+import RequestAccountRecovery, {RequestAccountRecoveryVariations} from "../../Authentication/RequestAccountRecovery/RequestAccountRecovery";
+import CreateGpgKey, {CreateGpgKeyVariation} from "../../Authentication/CreateGpgKey/CreateGpgKey";
+import CheckAccountRecoveryEmail from "../../Authentication/CheckAccountRecoveryEmail/CheckAccountRecoveryEmail";
+import CheckMailBox from "../../Authentication/CheckMailBox/CheckMailBox";
 
 /**
  * The component orchestrates the recover authentication process
  */
 class RecoverAuthentication extends Component {
-  /**
-   * Whenever the component is mounted
-   */
-  componentDidMount() {
-    this.initializeRecover();
-  }
-
-  /**
-   * Whenever the component is updated
-   */
-  componentDidUpdate() {
-    this.handleSecurityTokenSaved();
-  }
-
-  /**
-   * Can the user use the remember until I logout option
-   * @return {boolean}
-   */
-  get canRememberMe() {
-    return this.props.siteSettings.hasRememberMeUntilILogoutOption;
-  }
-
-
-  /**
-   * Whenever the security token has been saved
-   */
-  handleSecurityTokenSaved() {
-    if (this.props.authenticationContext.state === AuthenticationContextState.SECURITY_TOKEN_SAVED) {
-      this.props.authenticationContext.onCompleteRecoverRequested();
-    }
-  }
-
-  /**
-   * Initialize the authentication recover process
-   */
-  initializeRecover() {
-    this.props.authenticationContext.onInitializeRecoverRequested();
-  }
-
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    */
   render() {
-    switch (this.props.authenticationContext.state)  {
-      case AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_INITIALIZED:
-        return <IntroduceSetupExtension/>;
-      case AuthenticationContextState.RECOVER_INITIALIZED:
-      case AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_COMPLETED:
+    switch (this.props.authenticationRecoverContext.state) {
+      case AuthenticationRecoverWorkflowStates.INTRODUCE_EXTENSION:
+        return <IntroduceExtension
+          onComplete={this.props.authenticationRecoverContext.goToImportGpgKey.bind(this)}
+        />;
+      case AuthenticationRecoverWorkflowStates.IMPORT_GPG_KEY:
         return <ImportGpgKey
-          title={this.translate("Welcome back, please enter your private key to begin the recovery process.")}
-          secondaryAction={<HelpOnPrivateKeyLostSecondaryAction/>}/>;
-      case AuthenticationContextState.GPG_KEY_VALIDATED:
-        return <CheckPassphrase canRememberMe={this.canRememberMe} secondaryAction={<HelpOnPassphraseLostSecondaryAction/>}/>;
-      case AuthenticationContextState.GPG_KEY_IMPORTED:
-        return <ChooseSecurityToken/>;
-      case AuthenticationContextState.PASSPHRASE_LOST:
-        return <AskForAuthenticationHelp/>;
-      case  AuthenticationContextState.RECOVER_COMPLETED:
-        return <DisplayLoginInProgress/>;
-      case AuthenticationContextState.UNEXPECTED_ERROR:
-        return <DisplayUnexpectedError error={this.props.authenticationContext.error}/>;
-      default:
+          displayAs={ImportGpgKeyVariations.RECOVER}
+          onComplete={this.props.authenticationRecoverContext.importGpgKey.bind(this)}
+          onSecondaryActionClick={this.props.authenticationRecoverContext.needHelpCredentialsLost.bind(this)}
+          validatePrivateGpgKey={this.props.authenticationRecoverContext.validatePrivateKey.bind(this)}
+        />;
+      case AuthenticationRecoverWorkflowStates.VALIDATE_PASSPHRASE:
+        return <CheckPassphrase
+          displayAs={CheckPassphraseVariations.RECOVER}
+          canRememberMe={this.props.context.siteSettings.hasRememberMeUntilILogoutOption}
+          onComplete={this.props.authenticationRecoverContext.checkPassphrase.bind(this)}
+          onSecondaryActionClick={this.props.authenticationRecoverContext.needHelpCredentialsLost.bind(this)}
+        />;
+      case AuthenticationRecoverWorkflowStates.CHOOSE_SECURITY_TOKEN:
+        return <ChooseSecurityToken
+          onComplete={this.props.authenticationRecoverContext.chooseSecurityToken.bind(this)}
+        />;
+      case  AuthenticationRecoverWorkflowStates.SIGNING_IN:
+        return <LoadingSpinner
+          title={<Trans>Signing in, please wait...</Trans>}
+        />;
+      case AuthenticationRecoverWorkflowStates.HELP_CREDENTIALS_LOST:
+        return <AskForAuthenticationHelpCredentialLost
+          displayAs={AskForAuthenticationHelpCredentialLostVariations.RECOVER}
+          onPrimaryActionClick={this.props.authenticationRecoverContext.requestHelpCredentialsLost.bind(this)}
+          onSecondaryActionClick={this.props.authenticationRecoverContext.goToImportGpgKey.bind(this)}
+        />;
+      case AuthenticationRecoverWorkflowStates.INITIATE_ACCOUNT_RECOVERY:
+        return <RequestAccountRecovery
+          displayAs={RequestAccountRecoveryVariations.RECOVER}
+          onPrimaryActionClick={this.props.authenticationRecoverContext.initiateAccountRecovery.bind(this)}
+          onSecondaryActionClick={this.props.authenticationRecoverContext.goToImportGpgKey.bind(this)}
+        />;
+      case AuthenticationRecoverWorkflowStates.GENERATE_ACCOUNT_RECOVERY_GPG_KEY:
+        return <CreateGpgKey
+          displayAs={CreateGpgKeyVariation.GENERATE_ACCOUNT_RECOVERY_GPG_KEY}
+          onComplete={this.props.authenticationRecoverContext.generateAccountRecoveryGpgKey.bind(this)}
+        />;
+      case AuthenticationRecoverWorkflowStates.CHOOSE_ACCOUNT_RECOVERY_SECURITY_TOKEN:
+        return <ChooseSecurityToken
+          onComplete={this.props.authenticationRecoverContext.chooseAccountRecoverySecurityToken.bind(this)}
+        />;
+      case AuthenticationRecoverWorkflowStates.REQUESTING_ACCOUNT_RECOVERY:
+        return <LoadingSpinner
+          title={<Trans>Requesting administrator approval. Please wait...</Trans>}
+        />;
+      case AuthenticationRecoverWorkflowStates.CHECK_ACCOUNT_RECOVERY_EMAIL:
+        return <CheckAccountRecoveryEmail/>;
+      case AuthenticationRecoverWorkflowStates.CHECK_MAILBOX:
+        return <CheckMailBox/>;
+      case AuthenticationRecoverWorkflowStates.UNEXPECTED_ERROR:
+        return <DisplayUnexpectedError
+          error={this.props.authenticationRecoverContext.error}
+        />;
+      case AuthenticationRecoverWorkflowStates.LOADING:
         return <LoadingSpinner/>;
     }
   }
 }
 
 RecoverAuthentication.propTypes = {
-  authenticationContext: PropTypes.any, // The authentication context
-  siteSettings: PropTypes.object, // The site settings
-  t: PropTypes.func, // The translation function
+  context: PropTypes.any, // The application context
+  authenticationRecoverContext: PropTypes.any.isRequired, // The authentication recover context
 };
 
-export default withAuthenticationContext(withTranslation('common')(RecoverAuthentication));
+export default withAppContext(withAuthenticationRecoverContext(withTranslation('common')(RecoverAuthentication)));

package/src/react-extension/components/AuthenticationSetup/SetupAuthentication/SetupAuthentication.js

@@ -1,108 +1,101 @@
+/**
+ * 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.0.0
+ */
 import React, {Component} from "react";
-import CreateGpgKey from "../../Authentication/CreateGpgKey/CreateGpgKey";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import {withAppContext} from "../../../contexts/AppContext";
 import {
-  AuthenticationContextState,
-  withAuthenticationContext
-} from "../../../contexts/AuthenticationContext";
-import DownloadRecoveryKit from "../../Authentication/DownloadRecoveryKit/DownloadRecoveryKit";
+  AuthenticationSetupWorkflowStates,
+  withAuthenticationSetupContext
+} from "../../../contexts/Authentication/AuthenticationSetupContext";
+import CheckPassphrase, {CheckPassphraseVariations} from "../../Authentication/CheckPassphrase/CheckPassphrase";
+import ChooseAccountRecoveryPreference
+  from "../../Authentication/ChooseAccountRecoveryPreference/ChooseAccountRecoveryPreference";
 import ChooseSecurityToken from "../../Authentication/ChooseSecurityToken/ChooseSecurityToken";
-import ImportGpgKey from "../../Authentication/ImportGpgKey/ImportGpgKey";
-import CheckPassphrase from "../../Authentication/CheckPassphrase/CheckPassphrase";
-import LoadingSpinner from "../../Common/Loading/LoadingSpinner/LoadingSpinner";
-import PropTypes from "prop-types";
-import GenerateKeyOnPassphraseLostSecondaryAction
-  from "../../Authentication/CheckPassphrase/GenerateKeyOnPassphraseLostSecondaryAction";
-import GenerateKeySecondaryAction
-  from "../../Authentication/ImportGpgKey/GenerateKeySecondaryAction";
+import CreateGpgKey, {CreateGpgKeyVariation} from "../../Authentication/CreateGpgKey/CreateGpgKey";
 import DisplayUnexpectedError from "../../Authentication/DisplayUnexpectedError/DisplayUnexpectedError";
-import DisplayLoginInProgress from "../../AuthenticationLogin/DisplayLoginInProgress/DisplayLoginInProgress";
-import {withTranslation} from "react-i18next";
-import IntroduceSetupExtension from "../../Authentication/IntroduceSetupExtension/IntroduceSetupExtension";
+import DownloadRecoveryKit from "../../Authentication/DownloadRecoveryKit/DownloadRecoveryKit";
+import ImportGpgKey, {ImportGpgKeyVariations} from "../../Authentication/ImportGpgKey/ImportGpgKey";
+import IntroduceExtension from "../../Authentication/IntroduceExtension/IntroduceExtension";
+import LoadingSpinner from "../../Common/Loading/LoadingSpinner/LoadingSpinner";
 
 /**
  * The component orchestrates the setup authentication process
  */
 class SetupAuthentication extends Component {
-  /**
-   * Whenever the component is mounted
-   */
-  componentDidMount() {
-    this.initializeSetup();
-  }
-
-  /**
-   * Whenever the component is updated
-   */
-  componentDidUpdate() {
-    this.handleSecurityTokenSaved();
-  }
-
-  /**
-   * Can the user use the remember until I logout option
-   * @return {boolean}
-   */
-  get canRememberMe() {
-    return this.props.siteSettings.hasRememberMeUntilILogoutOption;
-  }
-
-  /**
-   * Whenever the security token has been saved
-   */
-  handleSecurityTokenSaved() {
-    if (this.props.authenticationContext.state === AuthenticationContextState.SECURITY_TOKEN_SAVED) {
-      this.props.authenticationContext.onCompleteSetupRequested();
-    }
-  }
-
-  /**
-   * Initialize the authentication setup process
-   */
-  initializeSetup() {
-    this.props.authenticationContext.onInitializeSetupRequested();
-  }
-
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    */
   render() {
-    switch (this.props.authenticationContext.state)  {
-      case AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_INITIALIZED:
-        return <IntroduceSetupExtension/>;
-      case AuthenticationContextState.SETUP_INITIALIZED:
-      case AuthenticationContextState.INTRODUCE_SETUP_EXTENSION_COMPLETED:
-        return <CreateGpgKey/>;
-      case AuthenticationContextState.GPG_KEY_GENERATED:
-        return <DownloadRecoveryKit/>;
-      case AuthenticationContextState.RECOVERY_KIT_DOWNLOADED:
-      case AuthenticationContextState.GPG_KEY_IMPORTED:
-        return <ChooseSecurityToken/>;
-      case AuthenticationContextState.GPG_KEY_TO_IMPORT_REQUESTED:
+    switch (this.props.authenticationSetupContext.state)  {
+      case AuthenticationSetupWorkflowStates.INTRODUCE_EXTENSION:
+        return <IntroduceExtension
+          onComplete={this.props.authenticationSetupContext.goToGenerateGpgKey}
+        />;
+      case AuthenticationSetupWorkflowStates.GENERATE_GPG_KEY:
+        return <CreateGpgKey
+          displayAs={CreateGpgKeyVariation.SETUP}
+          onComplete={this.props.authenticationSetupContext.generateGpgKey}
+          onSecondaryActionClick={this.props.authenticationSetupContext.goToImportGpgKey}
+        />;
+      case AuthenticationSetupWorkflowStates.DOWNLOAD_RECOVERY_KIT:
+        return <DownloadRecoveryKit
+          onDownload={this.props.authenticationSetupContext.downloadRecoveryKit}
+          onComplete={this.props.authenticationSetupContext.handleRecoveryKitDownloaded}
+        />;
+      case AuthenticationSetupWorkflowStates.IMPORT_GPG_KEY:
         return <ImportGpgKey
-          title={this.translate("Welcome, please enter your private key to continue.")}
-          secondaryAction={<GenerateKeySecondaryAction/>}/>;
-      case AuthenticationContextState.GPG_KEY_VALIDATED:
-        return <CheckPassphrase canRememberMe={this.canRememberMe} secondaryAction={<GenerateKeyOnPassphraseLostSecondaryAction/>}/>;
-      case  AuthenticationContextState.SETUP_COMPLETED:
-        return <DisplayLoginInProgress/>;
-      case AuthenticationContextState.UNEXPECTED_ERROR:
-        return <DisplayUnexpectedError error={this.props.authenticationContext.error}/>;
-      default:
+          displayAs={ImportGpgKeyVariations.SETUP}
+          onComplete={this.props.authenticationSetupContext.importGpgKey}
+          onSecondaryActionClick={this.props.authenticationSetupContext.goToGenerateGpgKey}
+          validatePrivateGpgKey={this.props.authenticationSetupContext.validatePrivateKey}
+        />;
+      case AuthenticationSetupWorkflowStates.VALIDATE_PASSPHRASE:
+        return <CheckPassphrase
+          displayAs={CheckPassphraseVariations.SETUP}
+          canRememberMe={this.props.context.siteSettings.hasRememberMeUntilILogoutOption}
+          onComplete={this.props.authenticationSetupContext.checkPassphrase}
+          onSecondaryActionClick={this.props.authenticationSetupContext.goToGenerateGpgKey}
+        />;
+      case AuthenticationSetupWorkflowStates.CHOOSE_ACCOUNT_RECOVERY_PREFERENCE:
+        return <ChooseAccountRecoveryPreference
+          policy={this.props.authenticationSetupContext.accountRecoveryOrganizationPolicy?.policy}
+          onComplete={this.props.authenticationSetupContext.chooseAccountRecoveryPreference}
+          canGenerateNewKeyInstead={!this.props.authenticationSetupContext.gpgKeyGenerated}
+          onGenerateNewKeyInstead={this.props.authenticationSetupContext.goToGenerateGpgKey}
+        />;
+      case AuthenticationSetupWorkflowStates.CHOOSE_SECURITY_TOKEN:
+        return <ChooseSecurityToken
+          onComplete={this.props.authenticationSetupContext.chooseSecurityToken}
+        />;
+      case AuthenticationSetupWorkflowStates.SIGNING_IN:
+        return <LoadingSpinner
+          title={<Trans>Signing in, please wait...</Trans>}
+        />;
+      case AuthenticationSetupWorkflowStates.UNEXPECTED_ERROR:
+        return <DisplayUnexpectedError
+          error={this.props.authenticationSetupContext.error}
+        />;
+      case AuthenticationSetupWorkflowStates.LOADING:
         return <LoadingSpinner/>;
     }
   }
 }
 
 SetupAuthentication.propTypes = {
-  authenticationContext: PropTypes.any, // The authentication context
-  siteSettings: PropTypes.object, // The site settings
-  t: PropTypes.func, // The translation function
+  context: PropTypes.any, // The application context
+  authenticationSetupContext: PropTypes.any.isRequired, // The authentication setup context
 };
-export default withAuthenticationContext(withTranslation('common')(SetupAuthentication));
+
+export default withAppContext(withAuthenticationSetupContext(withTranslation('common')(SetupAuthentication)));

package/src/react-extension/components/Common/ActionFeedback/DisplayActionFeedbacks.test.js

@@ -44,6 +44,7 @@ describe("Share Action Feedbacks", () => {
       });
 
       it('I should see “Success: The comment has been added successfully"', () => {
+        expect.assertions(1);
         expect(page.message(1)).toBe('Success: The comment has been added successfully');
       });
     });
@@ -60,6 +61,7 @@ describe("Share Action Feedbacks", () => {
       });
 
       it('I should see “Error: An error occurred during the operation”', () => {
+        expect.assertions(1);
         expect(page.message(1)).toBe('Error: An error occurred during the operation');
       });
     });
@@ -77,10 +79,11 @@ describe("Share Action Feedbacks", () => {
 
       it('I should not see the feedback message after 5 seconds', () => {
         jest.spyOn(propsForDisplayTime.actionFeedbackContext, 'remove').mockImplementation(() => {});
-        const oneSecondAfterExpectedRemoval = 6000;
+        const sixSecondAfterExpectedRemoval = 6000;
+        expect.assertions(1);
         setTimeout(() => {
           expect(propsForDisplayTime.actionFeedbackContext.remove).toHaveBeenCalled();
-        }, oneSecondAfterExpectedRemoval);
+        }, sixSecondAfterExpectedRemoval);
         jest.runAllTimers();
       });
     });
@@ -102,6 +105,7 @@ describe("Share Action Feedbacks", () => {
         await page.persist(1);
 
         const oneSecondAfterExpectedRemoval = 1000;
+        expect.assertions(2);
         setTimeout(() => {
           expect(propsForDisplayTime.actionFeedbackContext.remove).not.toHaveBeenCalled();
           expect(page.message(1)).toBe('Success: The comment has been added successfully');
@@ -125,7 +129,8 @@ describe("Share Action Feedbacks", () => {
       it('I should not see the feedback message anymore', async() => {
         jest.spyOn(propsForDisplayTime.actionFeedbackContext, 'remove').mockImplementation(() => {}).mockClear();
 
-        const twoSecondsAfterExpectedRemoval = 500;
+        const twoSecondsAfterExpectedRemoval = 2000;
+        expect.assertions(1);
         setTimeout(() => {
           const firstFeedback = propsWithOneSuccessMessage.actionFeedbackContext.feedbacks[0];
           expect(propsForDisplayTime.actionFeedbackContext.remove).toHaveBeenCalledWith(firstFeedback);

package/src/react-extension/components/Common/Avatar/UserAvatar.js

@@ -13,6 +13,7 @@
  */
 import React, {Component} from "react";
 import PropTypes from "prop-types";
+import Icon from "../Icons/Icon";
 
 class UserAvatar extends Component {
   /**
@@ -124,13 +125,16 @@ class UserAvatar extends Component {
    */
   render() {
     return (
-      <div className={this.props.className}>
+      <div className={`${this.props.className} ${this.props.attentionRequired ? 'attention-required' : ''}`}>
         {!this.state.error &&
         <img src={this.getAvatarSrc()} onError={this.handleError} alt={this.getAltText()}/>
         }
         {this.state.error &&
         <img src={this.getDefaultAvatarUrl()} alt={this.getAltText()}/>
         }
+        {this.props.attentionRequired &&
+        <Icon name="exclamation"/>
+        }
       </div>
     );
   }
@@ -143,6 +147,7 @@ UserAvatar.defaultProps = {
 UserAvatar.propTypes = {
   baseUrl: PropTypes.string,
   user: PropTypes.object,
+  attentionRequired: PropTypes.bool,
   className: PropTypes.string
 };
 

package/src/react-extension/components/Common/Avatar/UserAvatar.test.data.js

@@ -0,0 +1,27 @@
+/**
+ * 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
+ */
+
+/**
+ * Default props
+ * @returns {{baseUrl: string, user: {last_name: string, first_name: string}}}
+ */
+export function defaultProps() {
+  return {
+    user: {
+      "first_name": "Dame Steve",
+      "last_name": "Shirley",
+    },
+    baseUrl: "https://passbolt.local",
+  };
+}

package/src/react-extension/components/Common/Avatar/UserAvatar.test.stories.js

@@ -0,0 +1,47 @@
+/**
+ * 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
+ */
+
+/**
+ * Storybook tests on UserAvatar in regard of specifications
+ */
+import {MemoryRouter, Route} from "react-router-dom";
+import React from "react";
+import UserAvatar from "./UserAvatar";
+import {defaultProps} from "./UserAvatar.test.data";
+
+export default {
+  title: 'Passbolt/Common/UserAvatar',
+  component: UserAvatar
+};
+
+
+
+const Template = args =>
+  <div className="panel aside ready">
+    <div className="sidebar user">
+      <div className="sidebar-header">
+        <div className={`teaser-image  ${args.attentionRequired ? "attention-required" : ""}`}>
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <UserAvatar {...args} {...routerProps}/>}></Route>
+          </MemoryRouter>
+        </div>
+      </div>
+    </div>
+  </div>;
+
+export const Initial = Template.bind({});
+Initial.args = defaultProps();
+
+export const AttentionRequired = Template.bind({});
+AttentionRequired.args = Object.assign(defaultProps(), {attentionRequired: true});

package/src/react-extension/components/Common/Dialog/ManageDialogs/ManageDialogs.js

@@ -41,6 +41,11 @@ class ManageDialogs extends React.Component {
    * Removes the index-th dialog
    */
   async close(index) {
+    const dialog = this.props.dialogContext.dialogs.find(({key}) => key === index);
+    // If a dialog callback was given as dialog props, execute it.
+    if (dialog?.DialogProps?.onClose) {
+      dialog.DialogProps.onClose();
+    }
     this.props.dialogContext.close(index);
   }
 
@@ -55,8 +60,8 @@ class ManageDialogs extends React.Component {
           this.props.dialogContext.dialogs.map(({key, Dialog, DialogProps}) =>
             <Dialog
               key={key}
-              onClose={ () => this.close(key)}
-              {...DialogProps} />)
+              {...DialogProps}
+              onClose={ () => this.close(key)} />)
         }
         {this.props.children}
       </>

package/src/react-extension/components/Common/Error/HandleErrorEvents/HandleErrorEvents.js

@@ -42,9 +42,8 @@ class HandleErrorEvents extends React.Component {
    * @param message The error message
    */
   handleErrorDialogOpenEvent(title, message) {
-    const errorDialogProps = {title: title, message: message};
-    this.props.dialogContext.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    const errorDialogProps = {title: title, error: new Error(message)};
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**