passbolt-styleguide 3.5.2 → 3.6.0-alpha2

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/GenerateResourcePassword.test.stories.js

@@ -16,6 +16,7 @@ import AppContext from "../../../contexts/AppContext";
 import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import GenerateResourcePassword from "./GenerateResourcePassword";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -55,13 +56,12 @@ Initial.args = {
             {
               "name": "lower",
               "label": "a-z",
-              "characters": "abcdefghijklmnopqrstuvwxyz",
+              "characters": "abcdefghijklmnopqrstuvwxyz"
             },
             {
               "name": "digit",
               "label": "0-9",
-              "characters": "0123456789",
-              "required": true,
+              "characters": "0123456789"
             },
             {
               "name": "parenthesis",
@@ -108,5 +108,9 @@ Initial.args = {
         }
       ]
     }
+  },
+  onClose: () => {},
+  context: {
+    port: new MockPort()
   }
 };

package/src/react-extension/components/ResourceTag/DeleteResourceTag/DeleteResourceTag.js

@@ -94,11 +94,9 @@ class DeleteResourceTag 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/ResourceTag/DeleteResourceTag/DeleteResourceTag.test.stories.js

@@ -3,6 +3,7 @@ import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DeleteResourceTag from "./DeleteResourceTag";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -14,7 +15,9 @@ const defaultContext = {
   tagToDelete: {
     id: 1,
     slug: "apache"
-  }
+  },
+  port: new MockPort(),
+  setContext: () => {}
 };
 
 
@@ -40,5 +43,6 @@ Initial.argTypes = {
     control: {
       type: 'object'
     }
-  }
+  },
+  onClose: () => {}
 };

package/src/react-extension/components/ResourceTag/EditResourceTag/EditResourceTag.js

@@ -191,11 +191,9 @@ class EditResourceTag extends Component {
       // Unexpected error occurred.
       console.error(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/ResourceTag/EditResourceTag/EditResourceTag.test.stories.js

@@ -3,6 +3,7 @@ import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import EditResourceTag from "./EditResourceTag";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -14,7 +15,9 @@ const defaultContext = {
   tagToEdit: {
     id: 1,
     slug: "apache"
-  }
+  },
+  setContext: () => {},
+  port: new MockPort()
 };
 
 
@@ -32,7 +35,8 @@ Template.propTypes = {
 
 export const Initial = Template.bind({});
 Initial.args = {
-  context: defaultContext
+  context: defaultContext,
+  onClose: () => {}
 };
 
 Initial.argTypes = {

package/src/react-extension/components/Share/ShareDialog.js

@@ -184,11 +184,9 @@ class ShareDialog 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/Share/ShareDialog.test.js

@@ -48,6 +48,7 @@ describe("As Lu I should see the share dialog", () => {
     });
 
     it('As LU I see a success toaster message after sharing resources to users and groups with success', async() => {
+      expect.assertions(19);
       expect(context.port.request).toHaveBeenCalledWith('passbolt.share.get-resources', shareDialogProps.resourcesIds);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe('Share 3 resources');
@@ -89,6 +90,7 @@ describe("As Lu I should see the share dialog", () => {
     });
 
     it('As LU I can remove a permission', async() => {
+      expect.assertions(2);
       expect(page.count).toBe(11);
       await page.selectRemovePermission(1);
       expect(page.count).toBe(10);
@@ -123,30 +125,35 @@ describe("As Lu I should see the share dialog", () => {
     });
 
     it('As LU I shouldn’t be able to submit the form if there is no owner', async() => {
+      expect.assertions(2);
       await page.selectCanReadRights(1);
       expect(page.errorMessage).toBe('Please make sure there is at least one owner.');
       expect(page.saveButton.getAttribute("disabled")).not.toBeNull();
     });
 
     it('As LU I can stop sharing resources by clicking on the cancel button', async() => {
+      expect.assertions(2);
       expect(page.exists()).toBeTruthy();
       await page.click(page.cancelButton);
       expect(props.onClose).toBeCalled();
     });
 
     it('As LU I can stop sharing resources by closing the dialog', async() => {
+      expect.assertions(2);
       expect(page.exists()).toBeTruthy();
       await page.click(page.dialogClose);
       expect(props.onClose).toBeCalled();
     });
 
     it('As LU I can stop sharing resources with the keyboard (escape)', async() => {
+      expect.assertions(2);
       expect(page.exists()).toBeTruthy();
       await page.escapeKey(page.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(2);
       const requestAutocompleteResultMockImpl = jest.fn(() => autocompleteResult);
       mockContextRequest(requestAutocompleteResultMockImpl);
       await page.searchName("adm");
@@ -154,14 +161,15 @@ describe("As Lu I should see the share dialog", () => {
       await page.selectUserOrGroup(1);
 
       // Mock the request function to make it return an error.
+      const error = new PassboltApiFetchError("Jest simulate API error.");
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => {
-        throw new PassboltApiFetchError("Jest simulate API error.");
+        throw error;
       });
 
       await page.savePermissions();
 
       // Throw general error message
-      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError);
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error: error});
     });
   });
 
@@ -180,6 +188,7 @@ describe("As Lu I should see the share dialog", () => {
     });
 
     it('As LU I see a success toaster message after sharing one resource to users and groups with success', async() => {
+      expect.assertions(13);
       expect(context.port.request).toHaveBeenCalledWith('passbolt.share.get-resources', shareDialogProps.resourcesIds);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe('Share resource');
@@ -229,6 +238,7 @@ describe("As Lu I should see the share dialog", () => {
     });
 
     it('As LU I see a success toaster message after sharing one folder to users and groups with success', async() => {
+      expect.assertions(13);
       expect(context.port.request).toHaveBeenCalledWith('passbolt.share.get-folders', shareDialogProps.foldersIds);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe('Share folder');
@@ -276,6 +286,7 @@ describe("As Lu I should see the share dialog", () => {
     });
 
     it('As LU I see a error dialog message after try to sharing folders and resources at the same time', async() => {
+      expect.assertions(4);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe('Share 2 items');
 
@@ -287,7 +298,7 @@ describe("As Lu I should see the share dialog", () => {
 
       await page.savePermissions();
       // Throw general error message
-      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError);
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error: new Error("Multi resource and folder share is not implemented.")});
     });
   });
 });

package/src/react-extension/components/Share/ShareDialog.test.stories.js

@@ -12,7 +12,7 @@ export default {
 
 const context = {
   userSettings: {
-    getTrustedDomain: () => "some url"
+    getTrustedDomain: () => (new URL(window.location.href)).origin
   },
   shareDialogProps: {
     resourcesIds: resources.map(resource => resource.id)
@@ -26,7 +26,8 @@ const context = {
           return autocompleteResult;
       }
     }
-  }
+  },
+  setContext: () => {}
 };
 
 
@@ -40,7 +41,8 @@ const Template = args =>
 
 export const Initial = Template.bind({});
 Initial.args = {
-  context: context
+  context: context,
+  onClose: () => {}
 };
 
 export const Loading = Template.bind({});

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

@@ -112,14 +112,12 @@ class ConfirmDisableUserMFA extends Component {
   /**
    * Whenever the user MFA has been disabled with failure
    */
-  async onDisableMFAFailure(error) {
-    await this.setState({actions: {processing: false}});
+  onDisableMFAFailure(error) {
+    this.setState({actions: {processing: false}});
     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/User/ConfirmDisableUserMFA/ConfirmDisableUserMFA.test.js

@@ -38,6 +38,7 @@ describe("See the Create Dialog User", () => {
     });
 
     it('As AD I should see a success toaster message after disabling a user MFA with success', async() => {
+      expect.assertions(2);
       mockContextRequest(context, () => Promise.resolve());
       jest.spyOn(ActionFeedbackContext._currentValue, 'displaySuccess').mockImplementation(() => {});
       await page.confirm();
@@ -62,15 +63,18 @@ describe("See the Create Dialog User", () => {
     });
 
     it('As AD I should cancel the operation', async() => {
+      expect.assertions(1);
       await page.cancel();
       expect(props.onClose).toBeCalled();
     });
 
     it('As AD I should see an error message if the user MFA disabling goes wrong', async() => {
-      mockContextRequest(context, () => Promise.reject("Some error"));
+      expect.assertions(1);
+      const error = new Error("Some error");
+      mockContextRequest(context, () => Promise.reject(error));
       jest.spyOn(props.dialogContext, 'open').mockImplementation(() => {});
       await page.confirm();
-      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError);
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error: error});
     });
   });
 });

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

@@ -3,6 +3,7 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import ConfirmDisableUserMFA from "./ConfirmDisableUserMFA";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -73,5 +74,9 @@ Initial.args = {
       "last_logged_in": "",
       is_mfa_enabled: false
     }]
+  },
+  onClose: () => {},
+  context: {
+    port: new MockPort()
   }
 };

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

@@ -225,11 +225,9 @@ class CreateUser 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/User/CreateUser/CreateUser.test.stories.js

@@ -3,6 +3,7 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import CreateUser from "./CreateUser";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -10,10 +11,16 @@ export default {
   component: CreateUser
 };
 
-const context = {};
-
+const context = {
+  setContext: () => {},
+  roles: [
+    {name: "admin"},
+    {name: "user"}
+  ],
+  port: new MockPort()
+};
 
-const Template = args =>
+const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
       <Route component={routerProps => <CreateUser {...args} {...routerProps}/>}></Route>
@@ -25,6 +32,10 @@ Template.propTypes = {
 };
 
 export const Initial = Template.bind({});
+Initial.args = {
+  context: context,
+  onClose: () => {}
+};
 Initial.parameters = {
   css: "api_main"
 };

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

@@ -93,11 +93,9 @@ class DeleteUser 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/User/DeleteUser/DeleteUser.test.stories.js

@@ -3,6 +3,7 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DeleteUser from "./DeleteUser";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -50,11 +51,13 @@ const context = {
       "__placeholder_last_logged_in__": "",
       "last_logged_in": ""
     }
-  }
+  },
+  setContext: () => {},
+  port: new MockPort()
 };
 
 
-const Template = args =>
+const Template = ({context, ...args}) =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
       <Route component={routerProps => <DeleteUser {...args} {...routerProps}/>}></Route>
@@ -66,3 +69,7 @@ Template.propTypes = {
 };
 
 export const Initial = Template.bind({});
+Initial.args = {
+  context: context,
+  onClose: () => {}
+};

package/src/react-extension/components/User/DeleteUser/DeleteUserWithConflicts.js

@@ -369,11 +369,9 @@ class DeleteUserWithConflicts 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/User/DeleteUser/DeleteUserWithConflicts.test.stories.js

@@ -3,6 +3,7 @@ import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DeleteUserWithConflicts from "./DeleteUserWithConflicts";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -250,7 +251,9 @@ const context = {
         ]
       }
     }
-  }
+  },
+  setContext: () => {},
+  port: new MockPort()
 };
 
 
@@ -266,3 +269,6 @@ Template.propTypes = {
 };
 
 export const Initial = Template.bind({});
+Initial.args = {
+  onClose: () => {}
+};

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

@@ -0,0 +1,79 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 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) 2021 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.4.0
+ */
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import DialogWrapper from "../../Common/Dialog/DialogWrapper/DialogWrapper";
+
+/**
+ * The component displays expired account recovery
+ */
+class DisplayExpiredAccountRecovery extends Component {
+  constructor(props) {
+    super(props);
+    this.bindCallbacks();
+  }
+
+  /**
+   * Bind callbacks methods
+   */
+  bindCallbacks() {
+    this.handleClose = this.handleClose.bind(this);
+  }
+
+  /**
+   * Handle close button click.
+   * @returns {void}
+   */
+  handleClose() {
+    this.props.onClose();
+  }
+
+  /**
+   * Get the translate function
+   * @returns {function(...[*]=)}
+   */
+  get translate() {
+    return this.props.t;
+  }
+
+  /**
+   * Render the component
+   * @returns {JSX}
+   */
+  render() {
+    return (
+      <DialogWrapper className="expired-account-recover-dialog" title={this.translate("Account recovery error")}
+        onClose={this.handleClose}>
+        <div className="form-content">
+          <p>
+            <Trans>Sorry, this account recovery request has expired and cannot be updated, or was already handled by another administrator.</Trans>
+            &nbsp;<Trans>Please double check with the user in case they still need some help to log in.</Trans>
+          </p>
+        </div>
+        <div className="submit-wrapper clearfix">
+          <a className="button primary" role="button" onClick={this.handleClose}>
+            <Trans>Ok</Trans>
+          </a>
+        </div>
+      </DialogWrapper>
+    );
+  }
+}
+
+DisplayExpiredAccountRecovery.propTypes = {
+  onClose: PropTypes.func,
+  t: PropTypes.func, // The translation function
+};
+export default withTranslation("common")(DisplayExpiredAccountRecovery);

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

@@ -0,0 +1,32 @@
+/**
+ * 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 DisplayExpiredAccountRecovery from "./DisplayExpiredAccountRecovery";
+
+export default {
+  title: 'Passbolt/User/DisplayExpiredAccountRecovery',
+  component: DisplayExpiredAccountRecovery
+};
+
+const Template = args =>
+  <MockTranslationProvider>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DisplayExpiredAccountRecovery {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </MockTranslationProvider>;
+
+export const Initial = Template.bind({});

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

@@ -15,6 +15,7 @@ import React, {Component} from "react";
 import PropTypes from "prop-types";
 import {withAppContext} from "../../../contexts/AppContext";
 import {withNavigationContext} from "../../../contexts/NavigationContext";
+import {withAccountRecovery} from "../../../contexts/AccountRecoveryUserContext";
 import UserAvatar from "../../Common/Avatar/UserAvatar";
 import Icon from "../../Common/Icons/Icon";
 import {Trans, withTranslation} from "react-i18next";
@@ -179,6 +180,14 @@ class DisplayUserBadgeMenu extends Component {
     this.closeUserBadgeMenu();
   }
 
+  /**
+   * Returns true if the account recovery needs to be configured.
+   * @return {bool}
+   */
+  get attentionRequired() {
+    return this.props.accountRecoveryContext.isAccountRecoveryChoiceRequired();
+  }
+
   /**
    * Get the translate function
    * @returns {function(...[*]=)}
@@ -202,7 +211,7 @@ class DisplayUserBadgeMenu extends Component {
                 <span className="email">{this.getUserUsername()}</span>
               </div>
             </div>
-            <UserAvatar user={this.props.user} className="picture left-cell" baseUrl={this.props.baseUrl}/>
+            <UserAvatar user={this.props.user} className="picture left-cell" baseUrl={this.props.baseUrl} attentionRequired={this.attentionRequired}/>
             <div className="more right-cell">
               <a role="button">
                 <Icon name="caret-down"/>
@@ -215,7 +224,7 @@ class DisplayUserBadgeMenu extends Component {
             <li key="profile">
               <div className="row">
                 <a role="button" tabIndex="1" onClick={this.handleProfileClick}>
-                  <span><Trans>Profile</Trans></span>
+                  <span><Trans>Profile</Trans></span>{this.attentionRequired && <Icon name="exclamation"/>}
                 </a>
               </div>
             </li>
@@ -246,9 +255,10 @@ class DisplayUserBadgeMenu extends Component {
 DisplayUserBadgeMenu.propTypes = {
   context: PropTypes.object, // The application context
   navigationContext: PropTypes.any, // The application navigation context
+  accountRecoveryContext: PropTypes.object, // The account recovery context
   baseUrl: PropTypes.string,
   user: PropTypes.object,
   t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withNavigationContext(withTranslation('common')(DisplayUserBadgeMenu)));
+export default withAppContext(withNavigationContext(withAccountRecovery(withTranslation('common')(DisplayUserBadgeMenu))));