passbolt-styleguide 3.5.3 → 3.6.0-beta1

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();
@@ -113,8 +126,15 @@ describe("Display Users", () => {
 
     it('As LU, I should sort the users by mfa enabled', async() => {
       jest.spyOn(props.userWorkspaceContext, 'onSorterChanged').mockImplementationOnce(() => {});
-      await page.sortByFullname();
-      expect(props.userWorkspaceContext.onSorterChanged).toHaveBeenCalledWith('name');
+      await page.sortByMFAEnabled();
+      expect(props.userWorkspaceContext.onSorterChanged).toHaveBeenCalledWith('is_mfa_enabled');
+    });
+
+
+    it('As LU, I should sort the users by account recovery status', async() => {
+      jest.spyOn(props.userWorkspaceContext, 'onSorterChanged').mockImplementationOnce(() => {});
+      await page.sortByAccountRecoveryStatus();
+      expect(props.userWorkspaceContext.onSorterChanged).toHaveBeenCalledWith('account_recovery_user_setting.status');
     });
   });
 });

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,17 @@ 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(() => {});
+  }
+
+  /**
+   * Sort the users by their account recovery status
+   */
+  async sortByAccountRecoveryStatus() {
+    const element = this._page.container.querySelectorAll('thead th a')[7];
     const leftClick = {button: 0};
     fireEvent.click(element, leftClick);
     await waitFor(() => {});

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

@@ -0,0 +1,38 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) Passbolt SARL (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) Passbolt SARL (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.4.0
+ */
+import {MemoryRouter, Route} from "react-router-dom";
+import React from "react";
+import DisplayUsers from "./DisplayUsers";
+import {defaultContext, defaultProps, propsWithFirstUserAttentionRequired} from "./DisplayUsers.test.data";
+
+
+export default {
+  title: 'Passbolt/User/DisplayUsers',
+  component: DisplayUsers
+};
+
+const Template = args =>
+  <MemoryRouter initialEntries={['/']}>
+    <div className="page">
+      <div className="panel">
+        <Route component={routerProps => <DisplayUsers {...args} {...routerProps}/>}></Route>
+      </div>
+    </div>
+  </MemoryRouter>;
+
+export const Initial = Template.bind({});
+Initial.args = Object.assign(defaultProps(), {context: defaultContext()});
+
+export const AccountRecoveryPending = Template.bind({});
+AccountRecoveryPending.args = Object.assign(propsWithFirstUserAttentionRequired(), {context: defaultContext()});

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

@@ -23,6 +23,9 @@ import DeleteUserWithConflicts from "../DeleteUser/DeleteUserWithConflicts";
 import DeleteUser from "../DeleteUser/DeleteUser";
 import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 import {Trans, withTranslation} from "react-i18next";
+import {withWorkflow} from "../../../contexts/WorkflowContext";
+import HandleReviewAccountRecoveryRequestWorkflow
+  from "../../AccountRecovery/HandleReviewAccountRecoveryRequestWorkflow/HandleReviewAccountRecoveryRequestWorkflow";
 
 class DisplayUsersContextualMenu extends React.Component {
   /**
@@ -45,6 +48,7 @@ class DisplayUsersContextualMenu extends React.Component {
     this.handleResendInviteClickEvent = this.handleResendInviteClickEvent.bind(this);
     this.handleDeleteClickEvent = this.handleDeleteClickEvent.bind(this);
     this.handleDisableMfaEvent = this.handleDisableMfaEvent.bind(this);
+    this.handleReviewRecoveryRequestClickEvent = this.handleReviewRecoveryRequestClickEvent.bind(this);
   }
 
   /**
@@ -109,7 +113,7 @@ class DisplayUsersContextualMenu extends React.Component {
    */
   async handlePublicKeyCopy() {
     const gpgkeyInfo = await this.props.context.port.request('passbolt.keyring.get-public-key-info-by-user', this.user.id);
-    await this.props.context.port.request("passbolt.clipboard.copy", gpgkeyInfo.key);
+    await this.props.context.port.request("passbolt.clipboard.copy", gpgkeyInfo.armored_key);
     this.props.actionFeedbackContext.displaySuccess(this.translate("The public key has been copied to clipboard"));
     this.props.hide();
   }
@@ -180,17 +184,24 @@ class DisplayUsersContextualMenu extends React.Component {
     this.props.dialogContext.open(DeleteUserWithConflicts);
   }
 
+  /**
+   * Handle review recovery request click event
+   */
+  handleReviewRecoveryRequestClickEvent() {
+    const accountRecoveryRequestId = this.user.pending_account_recovery_request.id;
+    this.props.workflowContext.start(HandleReviewAccountRecoveryRequestWorkflow, {accountRecoveryRequestId});
+    this.props.hide();
+  }
+
   /**
    * Display error dialog
    * @param error
    */
   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);
   }
 
   /**
@@ -209,6 +220,13 @@ class DisplayUsersContextualMenu extends React.Component {
     return this.isLoggedInUserAdmin();
   }
 
+  /**
+   * Check if the user can use the review recovery request capability.
+   */
+  canIReviewAccountRecoveryRequest() {
+    return this.props.context.siteSettings.canIUse("accountRecovery") && this.isLoggedInUserAdmin();
+  }
+
   /**
    * Can delete the user. A user cannot deleted its own account.
    * @returns {boolean}
@@ -217,6 +235,14 @@ class DisplayUsersContextualMenu extends React.Component {
     return this.props.context.loggedInUser.id !== this.user.id;
   }
 
+  /**
+   * Has a pending account recovery for the user.
+   * @returns {boolean}
+   */
+  hasPendingAccountRecoveryRequest() {
+    return this.user && Boolean(this.user.pending_account_recovery_request);
+  }
+
   /**
    * Can update the resource
    * @returns {boolean}
@@ -256,12 +282,10 @@ class DisplayUsersContextualMenu extends React.Component {
    */
   onResendInviteFailure(error) {
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
-      message: error.message
+      error: error
     };
     this.props.hide();
-    this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**
@@ -372,6 +396,17 @@ class DisplayUsersContextualMenu 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.handleReviewRecoveryRequestClickEvent} className={`${!this.hasPendingAccountRecoveryRequest() ? "disabled" : ""}`}><span><Trans>Review recovery request</Trans></span></a>
+              </div>
+            </div>
+          </div>
+        </li>
+        }
       </ContextualMenuWrapper>
     );
   }
@@ -382,11 +417,12 @@ DisplayUsersContextualMenu.propTypes = {
   hide: PropTypes.func, // Hide the contextual menu
   left: PropTypes.number, // left position in px of the page
   top: PropTypes.number, // top position in px of the page
+  workflowContext: PropTypes.any, // the workflow context
   dialogContext: PropTypes.any, // the dialog context
   user: PropTypes.object, // user selected
   actionFeedbackContext: PropTypes.any, // The action feedback context
   t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withDialog(withActionFeedback(withTranslation('common')(DisplayUsersContextualMenu))));
+export default withAppContext(withWorkflow(withDialog(withActionFeedback(withTranslation('common')(DisplayUsersContextualMenu)))));
 

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

@@ -12,7 +12,7 @@ export function defaultAppContext(appContext) {
       canIUse: () => true
     },
     userSettings: {
-      getTrustedDomain: () => 'some url'
+      getTrustedDomain: () => (new URL(window.location.href)).origin
     },
     loggedInUser: {
       role: {
@@ -73,6 +73,9 @@ export function defaultProps() {
       open: jest.fn()
     },
     hide: jest.fn(),
+    workflowContext: {
+      start: jest.fn()
+    },
     user: {
       "id": "640ebc06-5ec1-5322-a1ae-6120ed2f3a74",
       "role_id": "a58de6d3-f52c-5080-b79b-a601a647ac85",
@@ -117,7 +120,19 @@ export function defaultProps() {
       },
       "__placeholder_last_logged_in__": "",
       "last_logged_in": "",
-      is_mfa_enabled: false
+      "is_mfa_enabled": false,
+      pending_account_recovery_request: {
+        id: "54c6278e-f824-5fda-91ff-3e946b18d997"
+      },
     }
   };
 }
+
+/**
+ * Props with temporary pending account recovery user
+ */
+export function propsWithUserTemporaryHasPendingAccountRecovery() {
+  const props = defaultProps();
+  props.user.pending_account_recovery_request = true;
+  return props;
+}

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

@@ -29,6 +29,7 @@ import EditUser from "../EditUser/EditUser";
 import ConfirmDisableUserMFA from "../ConfirmDisableUserMFA/ConfirmDisableUserMFA";
 import DeleteUser from "../DeleteUser/DeleteUser";
 import NotifyError from "../../Common/Error/NotifyError/NotifyError";
+import HandleReviewAccountRecoveryWorkflow from "../../AccountRecovery/HandleReviewAccountRecoveryRequestWorkflow/HandleReviewAccountRecoveryRequestWorkflow";
 
 beforeEach(() => {
   jest.resetModules();
@@ -38,8 +39,10 @@ describe("Display Users Contextual Menu", () => {
   let page; // The page to test against
   const context = defaultAppContext(); // The applicative context
   const props = defaultProps(); // The props to pass
+  props.hide = jest.fn();
 
   it("As LU I should copy an user permalink", async() => {
+    expect.assertions(3);
     page = new DisplayUsersContextualMenuPage(context, props);
     await waitFor(() => {});
 
@@ -47,17 +50,18 @@ describe("Display Users Contextual Menu", () => {
     jest.spyOn(props.actionFeedbackContext, 'displaySuccess').mockImplementationOnce(() => {});
     jest.spyOn(props, 'hide').mockImplementationOnce(() => {});
     await page.copyPermalink();
-    expect(context.port.request).toHaveBeenCalledWith("passbolt.clipboard.copy", "some url/app/users/view/640ebc06-5ec1-5322-a1ae-6120ed2f3a74");
+    expect(context.port.request).toHaveBeenCalledWith("passbolt.clipboard.copy", `${context.userSettings.getTrustedDomain()}/app/users/view/640ebc06-5ec1-5322-a1ae-6120ed2f3a74`);
     expect(props.actionFeedbackContext.displaySuccess).toHaveBeenCalled();
     expect(props.hide).toHaveBeenCalled();
   });
 
   it("As LU I should copy an user public key", async() => {
+    expect.assertions(3);
     page = new DisplayUsersContextualMenuPage(context, props);
     await waitFor(() => {});
 
     const gpgKey = "some key";
-    jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({key: gpgKey}));
+    jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({armored_key: gpgKey}));
     jest.spyOn(props.actionFeedbackContext, 'displaySuccess').mockImplementationOnce(() => {});
     jest.spyOn(props, 'hide').mockImplementationOnce(() => {});
     await page.copyPublicKey();
@@ -67,6 +71,7 @@ describe("Display Users Contextual Menu", () => {
   });
 
   it("As LU I should copy an user email address", async() => {
+    expect.assertions(3);
     page = new DisplayUsersContextualMenuPage(context, props);
     await waitFor(() => {});
 
@@ -80,12 +85,14 @@ describe("Display Users Contextual Menu", () => {
   });
 
   it("As LU I should not edit an user if I don't have the capability to do it", async() => {
+    expect.assertions(1);
     page = new DisplayUsersContextualMenuPage(contextWithoutEdit(), props);
     await waitFor(() => {});
     expect(page.canEdit).toBeFalsy();
   });
 
   it("As LU I should edit an user if I have the capability to do it", async() => {
+    expect.assertions(4);
     page = new DisplayUsersContextualMenuPage(context, props);
     await waitFor(() => {});
 
@@ -104,12 +111,14 @@ describe("Display Users Contextual Menu", () => {
   });
 
   it("As LU I should not resend an invite to an user if I don't have the capability to do it", async() => {
+    expect.assertions(1);
     page = new DisplayUsersContextualMenuPage(contextWithoutEdit(), props);
     await waitFor(() => {});
     expect(page.canResendInvite).toBeFalsy();
   });
 
   it("As LU I should resend an invite to an user if I have the capability to do it", async() => {
+    expect.assertions(2);
     page = new DisplayUsersContextualMenuPage(context, props);
     await waitFor(() => {});
 
@@ -123,6 +132,7 @@ describe("Display Users Contextual Menu", () => {
   });
 
   it("As LU I should not disable an user MFA if I don't have the capability to do it", async() => {
+    expect.assertions(1);
     page = new DisplayUsersContextualMenuPage(contextWithoutDisableMFA(), props);
     await waitFor(() => {});
 
@@ -130,6 +140,7 @@ describe("Display Users Contextual Menu", () => {
   });
 
   it("As LU I should disable an user MFA if I have the capability to do it", async() => {
+    expect.assertions(3);
     page = new DisplayUsersContextualMenuPage(context, props);
     await waitFor(() => {});
 
@@ -145,12 +156,14 @@ describe("Display Users Contextual Menu", () => {
   });
 
   it("As LU I should not  delete an user if I don't have the capability to do it", async() => {
+    expect.assertions(1);
     page = new DisplayUsersContextualMenuPage(contextWithoutDelete(), props);
     await waitFor(() => {});
     expect(page.canDelete).toBeFalsy();
   });
 
   it("As LU I should delete an user if I have the capability to do it", async() => {
+    expect.assertions(5);
     page = new DisplayUsersContextualMenuPage(context, props);
     await waitFor(() => {});
 
@@ -170,21 +183,22 @@ describe("Display Users Contextual Menu", () => {
   });
 
   it('As LU I should see an error message if the delete went wrong', async() => {
+    expect.assertions(2);
     page = new DisplayUsersContextualMenuPage(context, props);
     await waitFor(() => {});
 
     const error = {message: 'some error'};
-    const errorDialogProps = {title: "There was an unexpected error...", message: error.message};
+    const errorDialogProps = {error: error};
     jest.spyOn(context.port, 'request').mockImplementationOnce(() => Promise.reject({message: error.message}));
 
     await page.delete();
 
     expect(context.port.request).toHaveBeenLastCalledWith("passbolt.users.delete-dry-run", "640ebc06-5ec1-5322-a1ae-6120ed2f3a74");
-    expect(context.setContext).toHaveBeenLastCalledWith({errorDialogProps});
-    expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError);
+    expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, errorDialogProps);
   });
 
   it('As LU I should see an delete dry error message if the delete request has a delete dry error', async() => {
+    expect.assertions(2);
     page = new DisplayUsersContextualMenuPage(context, props);
     await waitFor(() => {});
 
@@ -196,4 +210,23 @@ describe("Display Users Contextual Menu", () => {
     expect(context.port.request).toHaveBeenLastCalledWith("passbolt.users.delete-dry-run", "640ebc06-5ec1-5322-a1ae-6120ed2f3a74");
     expect(props.dialogContext.open).toHaveBeenCalled();
   });
+
+  it("As LU I should review an account recovery of a user if I have the capability to do it", async() => {
+    expect.assertions(3);
+    page = new DisplayUsersContextualMenuPage(context, props);
+    await waitFor(() => {});
+
+    // The logged user is admin
+    expect(page.canEdit).toBeTruthy();
+
+    jest.spyOn(context, 'setContext').mockImplementationOnce(() => {});
+    jest.spyOn(props.dialogContext, 'open').mockImplementationOnce(() => {});
+    jest.spyOn(props, 'hide').mockImplementationOnce(() => {});
+
+    await page.reviewRecovery();
+
+    const accountRecoveryRequestId = props.user.pending_account_recovery_request.id;
+    expect(props.workflowContext.start).toHaveBeenCalledWith(HandleReviewAccountRecoveryWorkflow, {accountRecoveryRequestId});
+    expect(props.hide).toHaveBeenCalled();
+  });
 });

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

@@ -139,4 +139,14 @@ export default class DisplayUsersContextualMenuPage {
     fireEvent.click(element, leftClick);
     await waitFor(() => {});
   }
+
+  /**
+   * Call to review an account recovery of a user
+   */
+  async reviewRecovery() {
+    const element = this._page.container.querySelectorAll('li a')[7];
+    const leftClick = {button: 0};
+    fireEvent.click(element, leftClick);
+    await waitFor(() => {});
+  }
 }

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

@@ -0,0 +1,53 @@
+/**
+ * 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 DisplayUsersContextualMenu from "./DisplayUsersContextualMenu";
+import {
+  defaultAppContext,
+  defaultProps,
+  propsWithUserTemporaryHasPendingAccountRecovery
+} from "./DisplayUsersContextualMenu.test.data";
+
+
+export default {
+  title: 'Passbolt/User/DisplayUsersContextualMenu',
+  component: DisplayUsersContextualMenu
+};
+
+
+const Template = args =>
+  <MockTranslationProvider>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DisplayUsersContextualMenu {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </MockTranslationProvider>;
+
+export const AdminWithoutReviewRecovery = Template.bind({});
+AdminWithoutReviewRecovery.args = Object.assign(defaultProps(), {context: defaultAppContext()});
+
+export const AdminWithReviewRecovery = Template.bind({});
+AdminWithReviewRecovery.args = Object.assign(propsWithUserTemporaryHasPendingAccountRecovery(), {context: defaultAppContext()});
+
+export const User = Template.bind({});
+const userRole = {
+  loggedInUser: {
+    role: {
+      name: 'user'
+    }
+  },
+};
+User.args = Object.assign(defaultProps(), {context: defaultAppContext(userRole)});

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

@@ -213,11 +213,9 @@ class EditUser 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);
   }
 
   /**
@@ -376,9 +374,9 @@ class EditUser extends Component {
                 autoComplete='off' autoFocus={true}
               />
             </div>
-            <div className="input checkbox">
-              <label htmlFor="is_admin"><Trans>Role</Trans></label>
-              <div id="is_admin">
+            <div className="input checkbox-wrapper">
+              <label htmlFor="is_admin_checkbox"><Trans>Role</Trans></label>
+              <div className="input checkbox">
                 <input
                   id="is_admin_checkbox"
                   name="is_admin"
@@ -394,8 +392,8 @@ class EditUser extends Component {
             </div>
           </div>
           <div className="submit-wrapper clearfix">
-            <FormSubmitButton disabled={this.hasAllInputDisabled()} processing={this.state.processing} value={this.translate("Save")}/>
             <FormCancelButton disabled={this.hasAllInputDisabled()} onClick={this.handleClose}/>
+            <FormSubmitButton disabled={this.hasAllInputDisabled()} processing={this.state.processing} value={this.translate("Save")}/>
           </div>
         </form>
       </DialogWrapper>

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

@@ -154,14 +154,14 @@ class EditUserPageObject {
    * Returns the save button element
    */
   get saveButton() {
-    return this._container.querySelector('.submit-wrapper input[type=\"submit\"]');
+    return this._container.querySelector('.submit-wrapper button[type=\"submit\"]');
   }
 
   /**
    * Returns the save button processing element
    */
   get saveButtonProcessing() {
-    return this._container.querySelector('.submit-wrapper input[type=\"submit\"].processing');
+    return this._container.querySelector('.submit-wrapper button[type=\"submit\"].processing');
   }
 
   /**

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

@@ -3,6 +3,7 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import EditUser from "./EditUser";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -34,7 +35,9 @@ const context = {
   ],
   editUserDialogProps: {
     id: "8e3874ae-4b40-590b-968a-418f704b9d9a"
-  }
+  },
+  setContext: () => {},
+  port: new MockPort()
 };
 
 
@@ -50,6 +53,10 @@ Template.propTypes = {
 };
 
 export const Initial = Template.bind({});
+Initial.args = {
+  context: context,
+  onClose: () => {}
+};
 Initial.parameters = {
   css: "api_main"
 };