passbolt-styleguide 3.5.2 → 3.6.0-alpha2

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

@@ -14,7 +14,8 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
 import DialogCloseButton from "../../Dialog/DialogCloseButton/DialogCloseButton";
-import {withAppContext} from "../../../../contexts/AppContext";
+import {withTranslation, Trans} from "react-i18next";
+import Icon from "../../../Common/Icons/Icon";
 
 class NotifyError extends Component {
   /**
@@ -23,15 +24,23 @@ class NotifyError extends Component {
    */
   constructor(props) {
     super(props);
+    this.state = this.defaultState;
     this.bindCallbacks();
   }
 
+  get defaultState() {
+    return {
+      showErrorDetails: false
+    };
+  }
+
   /**
    * Bind callbacks methods
    * @return {void}
    */
   bindCallbacks() {
     this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleErrorDetailsToggle = this.handleErrorDetailsToggle.bind(this);
   }
 
   /**
@@ -57,8 +66,9 @@ class NotifyError extends Component {
    * @returns {String|string} return default if string is empty
    */
   getTitle() {
-    const contextTitle = this.props.context.errorDialogProps && this.props.context.errorDialogProps.title;
-    return contextTitle || this.props.title ||  NotifyError.defaultProps.title;
+    return this.props.title
+      ? this.props.title
+      : this.translate("There was an unexpected error...");
   }
 
   /**
@@ -66,8 +76,7 @@ class NotifyError extends Component {
    * @returns {String|string} return default if string is empty
    */
   getMessage() {
-    const contextMessage = this.props.context.errorDialogProps && this.props.context.errorDialogProps.message;
-    return contextMessage || this.props.message ||  NotifyError.defaultProps.message;
+    return this.props.error.message;
   }
 
   /**
@@ -83,6 +92,40 @@ class NotifyError extends Component {
     }
   }
 
+  /**
+   * Handle toggling display of error details.
+   */
+  handleErrorDetailsToggle() {
+    this.setState({
+      showErrorDetails: !this.state.showErrorDetails
+    });
+  }
+
+  /**
+   * Returns true if the error embed some details to be displayed.
+   * It is the case when the field `details` is set or if there is a field `data` with an non-empty `body` property.
+   */
+  get hasErrorDetails() {
+    return Boolean(this.props.error.data?.body) || Boolean(this.props.error.details);
+  }
+
+  /**
+   * Get the translate function
+   * @returns {function(...[*]=)}
+   */
+  get translate() {
+    return this.props.t;
+  }
+
+  /**
+   * Format the error details as a string.
+   * @returns {string}
+   */
+  formatErrors() {
+    const errorMessage = this.props.error?.details || this.props.error?.data;
+    return JSON.stringify(errorMessage, null, 4);
+  }
+
   /**
    * Render the component
    * @return {JSX}
@@ -98,6 +141,31 @@ class NotifyError extends Component {
           <div className="dialog-content">
             <div className="form-content">
               <p>{this.getMessage()}</p>
+              {this.hasErrorDetails &&
+                <div className="accordion error-details">
+                  <div className="accordion-header">
+                    <a onClick={this.handleErrorDetailsToggle}>
+                      <Trans>Error details</Trans>
+                      <Icon baseline={true} name={this.state.showErrorDetails ? "caret-up" : "caret-down"} />
+                    </a>
+                  </div>
+                  {this.state.showErrorDetails &&
+                    <div className="accordion-content">
+                      <div className="input text">
+                        <label
+                          htmlFor="js_field_debug"
+                          className="visuallyhidden">
+                          <Trans>Error details</Trans>
+                        </label>
+                        <textarea
+                          id="js_field_debug"
+                          defaultValue={this.formatErrors()}
+                          readOnly />
+                      </div>
+                    </div>
+                  }
+                </div>
+              }
             </div>
             <div className="submit-wrapper clearfix">
               <a className="button primary warning" onClick={this.props.onClose}>Ok</a>
@@ -109,16 +177,11 @@ class NotifyError extends Component {
   }
 }
 
-NotifyError.defaultProps = {
-  title: "Oops something went wrong.",
-  message: "An internal error occurred, please try again later."
-};
-
 NotifyError.propTypes = {
-  context: PropTypes.any, // The application context
-  title: PropTypes.string,
-  message: PropTypes.string,
-  onClose: PropTypes.func
+  title: PropTypes.string, // The title to display in the header
+  error: PropTypes.object.isRequired, // The error object to handle in the dialog
+  onClose: PropTypes.func, // The close callback
+  t: PropTypes.func // the translation function
 };
 
-export default withAppContext(NotifyError);
+export default withTranslation("common")(NotifyError);

package/src/react-extension/components/Common/Icons/Icon.js

@@ -127,6 +127,13 @@ class Icon extends Component {
         <svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
           <path fill="currentColor" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"></path>        </svg>
         }
+        {this.props.name === 'exclamation' &&
+        <svg width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
+          <path d="M6.83979 0.680176C5.62146 0.680176 4.43043 1.04145 3.41743 1.71832C2.40442 2.39519 1.61486 3.35726 1.14863 4.48285C0.682391 5.60844 0.560356 6.84701 0.798041 8.04193C1.03573 9.23685 1.62258 10.3345 2.48408 11.196C3.34557 12.0575 4.44296 12.6442 5.63788 12.8818C6.83281 13.1195 8.07162 12.9975 9.19721 12.5312C10.3228 12.065 11.2847 11.2755 11.9616 10.2625C12.6385 9.24951 12.9997 8.05848 12.9997 6.84015C12.9997 5.20642 12.3507 3.6396 11.1955 2.48438C10.0403 1.32915 8.47352 0.680176 6.83979 0.680176Z" fill="currentColor"/>
+          <path d="M6.8398 2.95996C6.96762 2.96106 7.09393 2.98819 7.2109 3.03974C7.32786 3.09129 7.43293 3.16617 7.51998 3.25977C7.60703 3.35337 7.67406 3.46372 7.717 3.58411C7.75994 3.7045 7.7779 3.83241 7.76974 3.95996L7.56978 7.34992C7.56978 7.54353 7.49282 7.72925 7.35592 7.86615C7.21902 8.00306 7.03341 8.07996 6.8398 8.07996C6.6462 8.07996 6.46059 8.00306 6.32369 7.86615C6.18679 7.72925 6.10982 7.54353 6.10982 7.34992L5.90987 3.95996C5.90022 3.83208 5.91704 3.70356 5.95943 3.58252C6.00183 3.46148 6.06887 3.35051 6.15621 3.2566C6.24355 3.16268 6.34935 3.08786 6.467 3.03681C6.58465 2.98576 6.71155 2.9596 6.8398 2.95996Z" fill="white"/>
+          <path d="M6.83978 10.71C6.642 10.71 6.44856 10.6513 6.28411 10.5414C6.11966 10.4315 5.99164 10.2754 5.91595 10.0926C5.84026 9.9099 5.82048 9.70885 5.85906 9.51487C5.89765 9.32089 5.99289 9.1427 6.13275 9.00285C6.2726 8.86299 6.45073 8.76775 6.64471 8.72917C6.83869 8.69058 7.03962 8.71042 7.22235 8.78611C7.40507 8.8618 7.56144 8.98995 7.67132 9.1544C7.7812 9.31885 7.83978 9.51222 7.83978 9.71C7.83978 9.97522 7.73434 10.2296 7.54681 10.4171C7.35927 10.6046 7.10499 10.71 6.83978 10.71Z" fill="white"/>
+        </svg>
+        }
         {this.props.name === 'eye-open' &&
         <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
           <path d="M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-121 61-225-229 117-381 353 133 205 333.5 326.5t434.5 121.5 434.5-121.5 333.5-326.5zm-720-384q0-20-14-34t-34-14q-125 0-214.5 89.5t-89.5 214.5q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5t-499.5 138.5-499.5-139-376.5-368q-20-35-20-69t20-69q140-229 376.5-368t499.5-139 499.5 139 376.5 368q20 35 20 69z"/>

package/src/react-extension/components/Common/Internationalisation/TranslationProvider.js

@@ -75,6 +75,7 @@ class TranslationProvider extends Component {
         keySeparator: false, // don't use the dot for separator of nested json object
         nsSeparator: false, // allowed ':' in key to avoid namespace separator
         debug: false,
+        compatibilityJSON: "v3"
       });
     this.setState({ready: true});
   }

package/src/react-extension/components/Common/Loading/LoadingSpinner/LoadingSpinner.js

@@ -12,6 +12,7 @@
  * @since         2.13.0
  */
 import React from "react";
+import PropTypes from "prop-types";
 import {Trans} from "react-i18next";
 
 /**
@@ -24,15 +25,27 @@ class LoadingSpinner extends React.Component {
   render() {
     return (
       <div className="login-processing">
+        <h1>{this.props.title}</h1>
         <div className="processing-wrapper">
-          <div  className="processing">
+          <div className="processing">
           </div>
         </div>
-        <h1><Trans>Please wait...</Trans></h1>
       </div>
     );
   }
 }
 
+LoadingSpinner.propTypes = {
+  title: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.string,
+  ])
+};
+
+LoadingSpinner.defaultProps = {
+  title: <Trans>Please wait...</Trans>
+};
+
 export default LoadingSpinner;
 

package/src/react-extension/components/Common/Loading/LoadingSpinner/LoadingSpinner.test.stories.js

@@ -0,0 +1,49 @@
+/**
+ * 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 React from "react";
+import {MemoryRouter, Route} from "react-router-dom";
+import MockTranslationProvider from "../../../../test/mock/components/Internationalisation/MockTranslationProvider";
+import LoadingSpinner from "./LoadingSpinner";
+
+export default {
+  title: 'Passbolt/Common/LoadingSpinner',
+  component: LoadingSpinner
+};
+
+const Template = args =>
+  <MockTranslationProvider>
+    <div id="container" className="container page login">
+      <div className="content">
+        <div className="login-form">
+          <MemoryRouter initialEntries={['/']}>
+            <Route component={routerProps => <LoadingSpinner {...args} {...routerProps}/>}/>
+          </MemoryRouter>
+        </div>
+      </div>
+    </div>
+  </MockTranslationProvider>;
+
+const defaultParameters = {
+  css: "ext_authentication"
+};
+
+export const PleaseWait = Template.bind({});
+PleaseWait.parameters = defaultParameters;
+
+export const RequestAccountRecovery = Template.bind({});
+RequestAccountRecovery.args = {
+  title: "Requesting administrator approval. Please wait."
+};
+RequestAccountRecovery.parameters = defaultParameters;

package/src/react-extension/components/Common/Route/HandleApplicationFirstLoadRoute.js

@@ -0,0 +1,77 @@
+/**
+ * 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 React, {Component} from "react";
+import {Redirect, withRouter} from "react-router-dom";
+import PropTypes from "prop-types";
+
+// The default path to redirect the users to.
+const DEFAULT_PATH_NAME = "/app/passwords";
+
+/**
+ * Handle the application first load route.
+ * When the iframe is loaded the url is pointing to the html document and the path the user is aiming is provided in
+ * the url query parameters (pathname). Parse the url, and redirect the user to the right place.
+ */
+class HandleApplicationFirstLoadRoute extends Component {
+  /**
+   * Get the pathname from the url parameter.
+   * By instance ?pathname=/app/users
+   * @returns {string} If the pathname does not validate return an empty string.
+   */
+  getPathnameFromUrlParameter() {
+    const pathname = new URLSearchParams(this.props.location.search).get("pathname");
+
+    if (!this.validatePathname(pathname)) {
+      return "";
+    }
+
+    return pathname;
+  }
+
+  /**
+   * Validate a pathname.
+   * A valid pathname contains only alphabetical, numerical, / and - characters
+   * @param {string} pathname The pathname to test
+   * @returns {boolean}
+   */
+  validatePathname(pathname) {
+    return /^[A-Za-z0-9\-\/]*$/.test(pathname);
+  }
+
+  /**
+   * The first uri to redirect too.
+   * @returns {string}
+   */
+  get pathnameToRedirectTo() {
+    const pathname = this.getPathnameFromUrlParameter();
+    if (!pathname) {
+      return DEFAULT_PATH_NAME;
+    }
+    return pathname;
+  }
+
+  /**
+   * Render the component
+   * @return {JSX}
+   */
+  render() {
+    return <Redirect to={this.pathnameToRedirectTo}/>;
+  }
+}
+
+HandleApplicationFirstLoadRoute.propTypes = {
+  location: PropTypes.object // From router HOC
+};
+
+export default withRouter(HandleApplicationFirstLoadRoute);

package/src/react-extension/components/Common/Route/HandleRouteFallback.js

@@ -13,60 +13,28 @@
  */
 import React, {Component} from "react";
 import {Redirect, withRouter} from "react-router-dom";
-import PropTypes from "prop-types";
 
-class HandleRouteFallback extends Component {
-  /**
-   * Get the pathname from the url parameter.
-   * By instance ?pathname=/app/users
-   *
-   * @returns {string}
-   */
-  getPathnameFromUrlParameter() {
-    const pathname = new URLSearchParams(this.props.location.search).get("pathname");
-
-    if (!this.validatePathname(pathname)) {
-      return "";
-    }
-
-    return pathname;
-  }
-
-  /**
-   * Validate a pathname.
-   * A valid pathname contains only alphabetical, numerical, / and - characters
-   * @param {string} pathname
-   * @returns {boolean}
-   */
-  validatePathname(pathname) {
-    return /^[A-Za-z0-9\-\/]*$/.test(pathname);
-  }
+// The default path to redirect the users to.
+const DEFAULT_PATH_NAME = "/app/passwords";
 
+/**
+ * Handle the route fallback.
+ *
+ * @todo 404 management
+ *
+ * Historically this component was handling the application first load route, the logic has been moved in the HandleApplicationFirstLoad component.
+ *
+ * This component was by default redirecting the user to passwords workspace, to not introduce a side effect that we don't
+ * measure, keep the previous default behavior. Later this behavior should be replaced by a 404.
+ */
+class HandleRouteFallback extends Component {
   /**
    * Render the component
    * @return {JSX}
    */
   render() {
-    const pathname = this.getPathnameFromUrlParameter();
-
-    return (
-      <>
-        {pathname &&
-        <Redirect to={pathname}/>
-        }
-        {!pathname &&
-        <Redirect to="/app/passwords"/>
-        }
-      </>
-    );
+    return <Redirect to={DEFAULT_PATH_NAME}/>;
   }
 }
 
-HandleRouteFallback.propTypes = {
-  // Match, location and history props are injected by the withRouter decoration call.
-  match: PropTypes.object,
-  location: PropTypes.object,
-  history: PropTypes.object
-};
-
 export default withRouter(HandleRouteFallback);

package/src/react-extension/components/Common/Tab/Tabs.js

@@ -53,7 +53,9 @@ class Tabs extends React.Component {
    */
   handleTabClick(tabItem) {
     this.setState({activeTabName: tabItem.name});
-    tabItem.onClick();
+    if (typeof tabItem.onClick == 'function') {
+      tabItem.onClick();
+    }
   }
 
   render() {

package/src/react-extension/components/Common/Workflow/ManageWorkflows/ManageWorkflows.js

@@ -0,0 +1,72 @@
+/**
+ * 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 React from "react";
+import {withWorkflow} from "../../../../contexts/WorkflowContext";
+import PropTypes from "prop-types";
+
+
+/**
+ * This component acts as an anchor for the different project workflows.
+ */
+class ManageWorkflows extends React.Component {
+  /**
+   * Default constructor
+   * @param props The component props
+   */
+  constructor(props) {
+    super(props);
+    this.bindCallback();
+  }
+
+  /**
+   * Bind class methods callback
+   */
+  bindCallback() {
+    this.stop = this.stop.bind(this);
+  }
+
+  /**
+   * Removes the index-th workflow
+   */
+  async stop(index) {
+    this.props.workflowContext.stop(index);
+  }
+
+  /**
+   * Renders the component
+   * @returns {JSX.Element}
+   */
+  render() {
+    return (
+      <>
+        {
+          this.props.workflowContext.workflows.map(({key, Workflow, workflowProps}) =>
+            <Workflow
+              key={key}
+              onStop={ () => this.stop(key)}
+              {...workflowProps} />)
+        }
+        {this.props.children}
+      </>
+    );
+  }
+}
+
+ManageWorkflows.propTypes = {
+  workflowContext: PropTypes.any,
+  children: PropTypes.any
+};
+
+export default withWorkflow(ManageWorkflows);

package/src/react-extension/components/InsertAppIframe.js

@@ -34,20 +34,27 @@ class InsertAppIframe extends Component {
    * @returns {void}
    */
   loadAppIframe() {
-    const contentScriptPathname = this.getPagePathname();
-    const iframeUrl = `${this.props.browserExtensionUrl}data/passbolt-iframe-app.html?passbolt=passbolt-iframe-app&pathname=${contentScriptPathname}`;
-    this.iframeRef.current.contentWindow.location = iframeUrl;
+    const url = new URL(`${this.props.browserExtensionUrl}data/passbolt-iframe-app.html`);
+    url.searchParams.append("passbolt", "passbolt-iframe-app");
+
+    // If the user aims to a location, extract it and add it as parameter of the iframe url.
+    const pathname = this.getPagePathname();
+    if (pathname && pathname !== "/") {
+      url.searchParams.append("pathname", pathname);
+    }
+
+    this.iframeRef.current.contentWindow.location = url.toString();
   }
 
   /**
    * Get the pathname from url.
    * By instance ?pathname=/app/users
    *
-   * @returns {string}
+   * @returns {string|null} Return null if the pathname doesn't validate
    */
   getPagePathname() {
     if (!this.validatePagePathname()) {
-      return "";
+      return null;
     }
 
     return this.props.location.pathname;
@@ -56,7 +63,6 @@ class InsertAppIframe extends Component {
   /**
    * Validate a pathname.
    * A valid pathname contains only alphabetical, numerical, / and - characters
-   * @param {string} pathname
    * @returns {boolean}
    */
   validatePagePathname() {

package/src/react-extension/components/Resource/CreateResource/CreateResource.js

@@ -373,11 +373,9 @@ class CreateResource extends Component {
    */
   handleError(error) {
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
-      message: error.message
+      error: error
     };
-    this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**

package/src/react-extension/components/Resource/CreateResource/CreateResource.test.data.js

@@ -112,9 +112,9 @@ export function defaultProps() {
         ]
       }
     },
-    onClose: jest.fn(),
+    onClose: () => {},
     dialogContext: {
-      open: jest.fn()
+      open: () => {},
     }
   };
 }

package/src/react-extension/components/Resource/CreateResource/CreateResource.test.js

@@ -31,6 +31,8 @@ describe("See the Create Resource", () => {
   let page; // The page to test against
   const context = defaultAppContext(); // The applicative context
   const props = defaultProps(); // The props to pass
+  props.onClose = jest.fn();
+  props.dialogContext.open = jest.fn();
   const resourceCreateDialogProps = {
     folderParentId: null
   };
@@ -47,6 +49,7 @@ describe("See the Create Resource", () => {
     });
 
     it('matches the styleguide', () => {
+      expect.assertions(18);
       // Dialog title exists and correct
       expect(page.passwordCreate.exists()).toBeTruthy();
       expect(page.title.header.textContent).toBe("Create a password");
@@ -89,6 +92,7 @@ describe("See the Create Resource", () => {
     });
 
     it('generates password when clicking on the generate button.', async() => {
+      expect.assertions(2);
       page.passwordCreate.focusInput(page.passwordCreate.password);
       await page.passwordCreate.click(page.passwordCreate.passwordGenerateButton);
       expect(page.passwordCreate.complexityText.textContent).not.toBe("Complexity: n/aEntropy: NaN bits");
@@ -96,6 +100,7 @@ describe("See the Create Resource", () => {
     });
 
     it('views password when clicking on the view button.', async() => {
+      expect.assertions(6);
       const passwordValue = "secret-decrypted";
       page.passwordCreate.fillInput(page.passwordCreate.password, passwordValue);
       // View password
@@ -114,6 +119,7 @@ describe("See the Create Resource", () => {
     });
 
     it('requests the addon to create a resource with encrypted description when clicking on the submit button.', async() => {
+      expect.assertions(7);
       expect(page.passwordCreate.exists()).toBeTruthy();
       const createdResourceId = "f2b4047d-ab6d-4430-a1e2-3ab04a2f4fb9";
       // create password
@@ -156,6 +162,7 @@ describe("See the Create Resource", () => {
     });
 
     it('requests the addon to create a resource with non encrypted description when clicking on the submit button.', async() => {
+      expect.assertions(7);
       expect(page.passwordCreate.exists()).toBeTruthy();
       const createdResourceId = "f2b4047d-ab6d-4430-a1e2-3ab04a2f4fb9";
       // create password
@@ -201,6 +208,7 @@ describe("See the Create Resource", () => {
     });
 
     it('As LU I shouldn’t be able to submit the form if there is an invalid field', async() => {
+      expect.assertions(3);
       expect(page.passwordCreate.exists()).toBeTruthy();
       await page.passwordCreate.click(page.passwordCreate.saveButton);
 
@@ -210,6 +218,7 @@ describe("See the Create Resource", () => {
     });
 
     it('As LU I can stop createing a password by clicking on the cancel button', async() => {
+      expect.assertions(2);
       expect(page.passwordCreate.exists()).toBeTruthy();
       await page.passwordCreate.click(page.passwordCreate.cancelButton);
       expect(props.onClose).toBeCalled();
@@ -242,40 +251,46 @@ describe("See the Create Resource", () => {
     });
 
     it('As LU I can stop createing a password by closing the dialog', async() => {
+      expect.assertions(2);
       expect(page.passwordCreate.exists()).toBeTruthy();
       await page.passwordCreate.click(page.passwordCreate.dialogClose);
       expect(props.onClose).toBeCalled();
     });
 
     it('As LU I can stop adding a password with the keyboard (escape)', async() => {
+      expect.assertions(2);
       expect(page.passwordCreate.exists()).toBeTruthy();
       await page.passwordCreate.escapeKey(page.passwordCreate.dialogClose);
       expect(props.onClose).toBeCalled();
     });
 
     it('As LU I should see an error dialog if the submit operation fails for an unexpected reason', async() => {
+      expect.assertions(1);
       // Mock the request function to make it return an error.
       page.passwordCreate.fillInput(page.passwordCreate.name, "name");
       page.passwordCreate.fillInput(page.passwordCreate.password, "password");
 
+      const error = new PassboltApiFetchError("Jest simulate API error.");
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => {
-        throw new PassboltApiFetchError("Jest simulate API error.");
+        throw error;
       });
       jest.spyOn(props.dialogContext, 'open').mockImplementationOnce(jest.fn);
 
       await page.passwordCreate.click(page.passwordCreate.saveButton);
 
       // Throw general error message
-      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError);
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error: error});
     });
 
     it('As LU I should access to the password generator dialog', async() => {
+      expect.assertions(1);
       jest.spyOn(props.dialogContext, 'open').mockImplementationOnce(jest.fn);
       await page.passwordCreate.openPasswordGenerator();
       expect(props.dialogContext.open).toBeCalled();
     });
 
     it('As LU I should access to the password generator dialog', async() => {
+      expect.assertions(1);
       await page.passwordCreate.openPasswordGenerator();
       expect(page.passwordCreate.passwordGeneratorDialog).not.toBeNull();
     });