passbolt-styleguide 3.6.0 → 3.7.0-alpha1

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

@@ -39,6 +39,17 @@ class SharePermissionItem extends Component {
     this.bindEventHandlers();
   }
 
+  /**
+   * Component did mount
+   * @returns {Promise<void>}
+   */
+  async componentDidMount() {
+    if (this.isUser()) {
+      const gpgKey = await this.findUserGpgKey(this.props.aro.profile.user_id);
+      this.setState({gpgKey});
+    }
+  }
+
   /**
    *  Invoked immediately after updating occurs. This method is not called for the initial render.
    * @param prevProps
@@ -54,6 +65,15 @@ class SharePermissionItem extends Component {
     this.handleDelete = this.handleDelete.bind(this);
   }
 
+  /**
+   * Find a user gpg key
+   * @param {string} userId
+   * @returns {Promise<object>}
+   */
+  async findUserGpgKey(userId) {
+    return await this.props.context.port.request('passbolt.keyring.get-public-key-info-by-user', userId);
+  }
+
   /**
    * R
    * @returns {string} Group or User name
@@ -86,6 +106,27 @@ class SharePermissionItem extends Component {
     }
   }
 
+  /**
+   * Get the tooltip message
+   * @returns {JSX.Element}
+   */
+  get tooltipMessage() {
+    return <>
+      <div className="email"><strong>{this.props.aro.username}</strong></div>
+      <div className="fingerprint">{this.formatFingerprint(this.state.gpgKey.fingerprint)}</div>
+    </>;
+  }
+
+  /**
+   * Format fingerprint
+   * @param {string} fingerprint An user finger print
+   * @returns {JSX.Element}
+   */
+  formatFingerprint(fingerprint) {
+    const result = fingerprint.toUpperCase().replace(/.{4}/g, '$& ');
+    return <>{result.substr(0, 24)}<br/>{result.substr(25)}</>;
+  }
+
   /**
    * Return true if aro in props is a user
    * @returns {boolean}
@@ -102,6 +143,14 @@ class SharePermissionItem extends Component {
     return !(this.props.aro && this.props.aro.profile);
   }
 
+  /**
+   * Has a gpg key fingerprint
+   * @returns {*}
+   */
+  hasGpgKey() {
+    return this.state.gpgKey && this.state.gpgKey.fingerprint;
+  }
+
   getClassName() {
     let className = 'row';
     if (this.props.updated) {
@@ -156,6 +205,11 @@ class SharePermissionItem extends Component {
         <div className="aro">
           <div className="aro-name">
             <span className="ellipsis">{this.getAroName()}</span>
+            {this.hasGpgKey() &&
+              <Tooltip message={this.tooltipMessage}>
+                <Icon name="info-circle"/>
+              </Tooltip>
+            }
           </div>
           <div className="aro-details">
             <span className="ellipsis">{this.getAroDetails()}</span>
@@ -175,6 +229,7 @@ class SharePermissionItem extends Component {
             value={this.state.permissionType.toString()}
             disabled={this.isInputDisabled()}
             onChange={this.handleUpdate}
+            direction={this.props.isLastItemDisplayed ? "top" : "bottom"}
           />
         </div>
 
@@ -196,6 +251,7 @@ SharePermissionItem.propTypes = {
   onUpdate: PropTypes.func,
   onDelete: PropTypes.func,
   permissionType: PropTypes.number,
+  isLastItemDisplayed: PropTypes.bool,
   t: PropTypes.func, // The translation function
 };
 

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

@@ -13,17 +13,9 @@
  */
 import React, {Component} from "react";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class ShareVariesDetails extends Component {
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   render() {
     return (
       <span className="share-varies-details">
@@ -46,7 +38,6 @@ class ShareVariesDetails extends Component {
 
 ShareVariesDetails.propTypes = {
   variesDetails: PropTypes.object,
-  t: PropTypes.func, // The translation function
 };
 
-export default withTranslation('common')(ShareVariesDetails);
+export default ShareVariesDetails;

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

@@ -156,7 +156,7 @@ class ConfirmDisableUserMFA extends Component {
                 You are about to disable second-factor authentication (MFA) for the user <strong>{{name}} ({{username}})</strong>.
               </Trans>
             </p>
-            <p><Trans>Warning: Existing settings will be lost. This action cannot be undone.</Trans></p>
+            <p><Trans>Existing settings will be lost. This action cannot be undone.</Trans></p>
           </div>
 
           <div className="submit-wrapper clearfix">

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

@@ -7,7 +7,7 @@ import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
-  title: 'Passbolt/User/ConfirmDisableUserMFA',
+  title: 'Passbolt Component/User/ConfirmDisableUserMFA',
   component: ConfirmDisableUserMFA
 };
 

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

@@ -370,11 +370,11 @@ class CreateUser extends Component {
         onClose={this.handleClose} disabled={this.hasAllInputDisabled()}>
         <form className="user-create-form" onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
-            <div className={`input text required ${this.state.first_nameError ? "error" : ""}`}>
-              <label htmlFor="user-first-name-input"><Trans>First Name</Trans></label>
+            <div className={`input text required ${this.state.first_nameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
+              <label htmlFor="user-first-name-input"><Trans>First name</Trans></label>
               <input id="user-first-name-input" name="first_name"
                 ref={this.firstNameRef}
-                type="text" value={this.state.first_name} placeholder={this.translate("first name")}
+                type="text" value={this.state.first_name} placeholder={this.translate("First name")}
                 required="required" disabled={this.hasAllInputDisabled()}
                 onKeyUp={this.handleFirstNameInputKeyUp} onChange={this.handleInputChange}
                 autoComplete='off' autoFocus={true}
@@ -383,11 +383,11 @@ class CreateUser extends Component {
               <div className="first_name error-message">{this.state.first_nameError}</div>
               }
             </div>
-            <div className={`input text required ${this.state.last_nameError ? "error" : ""}`}>
-              <label htmlFor="user-last-name-input"><Trans>Last Name</Trans></label>
+            <div className={`input text required ${this.state.last_nameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
+              <label htmlFor="user-last-name-input"><Trans>Last name</Trans></label>
               <input id="user-last-name-input" name="last_name"
                 ref={this.lastNameRef}
-                type="text" value={this.state.last_name} placeholder={this.translate("last name")}
+                type="text" value={this.state.last_name} placeholder={this.translate("Last name")}
                 required="required" disabled={this.hasAllInputDisabled()}
                 onKeyUp={this.handleLastNameInputOnKeyUp} onChange={this.handleInputChange}
                 autoComplete='off' autoFocus={true}
@@ -396,10 +396,10 @@ class CreateUser extends Component {
               <div className="last_name error-message">{this.state.last_nameError}</div>
               }
             </div>
-            <div className={`input text required ${this.state.usernameError ? "error" : ""}`}>
+            <div className={`input text required ${this.state.usernameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="user-username-input"><Trans>Username / Email</Trans></label>
               <input id="user-username-input" name="username"
-                ref={this.usernameRef} type="text" value={this.state.username} placeholder={this.translate("email")}
+                ref={this.usernameRef} type="text" value={this.state.username} placeholder={this.translate("Email")}
                 required="required" disabled={this.hasAllInputDisabled()}
                 onKeyUp={this.handleUsernameInputOnKeyUp} onChange={this.handleInputChange}
                 autoComplete='off' autoFocus={true}
@@ -408,7 +408,7 @@ class CreateUser extends Component {
               <div className="username error-message">{this.state.usernameError}</div>
               }
             </div>
-            <div className="input checkbox-wrapper">
+            <div className={`input checkbox-wrapper ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="is_admin_checkbox"><Trans>Role</Trans></label>
               <div className="input checkbox">
                 <input id="is_admin_checkbox" name="is_admin" onChange={this.handleCheckboxClick}
@@ -416,7 +416,7 @@ class CreateUser extends Component {
                 <label htmlFor="is_admin_checkbox"> <Trans>This user is an administrator</Trans></label>
               </div>
               <div className="help-message">
-                <Trans>Note: Administrators can add and delete users; They can also create groups and assign group managers; Admin can not see all passwords.</Trans>
+                <Trans>Note: Administrators can add and delete users; They can also create groups and assign group managers; By default they can not see all passwords.</Trans>
               </div>
             </div>
           </div>

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

@@ -7,7 +7,7 @@ import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
-  title: 'Passbolt/User/CreateUser',
+  title: 'Passbolt Component/User/CreateUser',
   component: CreateUser
 };
 

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

@@ -140,7 +140,7 @@ class DeleteUser extends Component {
                 Are you sure you want to delete <strong>{{user: this.getUser()}}</strong>?
               </Trans>
             </p>
-            <p><Trans>Warning: This action can’t be undone. All the data associated with this user will be permanently deleted.</Trans></p>
+            <p><Trans>This action can’t be undone. All the data associated with this user will be permanently deleted.</Trans></p>
           </div>
           <div className="submit-wrapper clearfix">
             <FormCancelButton disabled={this.hasAllInputDisabled()} onClick={this.handleCloseClick}/>

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

@@ -7,7 +7,7 @@ import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
-  title: 'Passbolt/User/DeleteUser',
+  title: 'Passbolt Component/User/DeleteUser',
   component: DeleteUser
 };
 

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

@@ -513,7 +513,7 @@ class DeleteUserWithConflicts extends Component {
               <ul className="ownership-transfer-items">
                 {this.foldersErrors.map(folderError =>
                   <li key={folderError.id}>
-                    <div className="select-wrapper input required">
+                    <div className={`select-wrapper input required ${this.state.processing ? 'disabled' : ''}`}>
                       <label htmlFor="transfer_folder_owner">{folderError.name} (<Trans>Folder</Trans>) <Trans>new owner</Trans>:</label>
                       <Select className="form-element" value={this.state.owners[folderError.id]} items={this.getAcoPermissionsList(folderError.id)} onChange={event => this.handleOnChangeOwner(event, folderError.id)}/>
                     </div>
@@ -528,7 +528,7 @@ class DeleteUserWithConflicts extends Component {
               <ul className="ownership-transfer-items">
                 {this.resourcesErrors.map(resourceError =>
                   <li key={resourceError.id}>
-                    <div className="select-wrapper input required">
+                    <div className={`select-wrapper input required ${this.state.processing ? 'disabled' : ''}`}>
                       <label htmlFor="transfer_resource_owner">{resourceError.name} (<Trans>Password</Trans>) <Trans>new owner</Trans>:</label>
                       <Select className="form-element" value={this.state.owners[resourceError.id]} items={this.getAcoPermissionsList(resourceError.id)} onChange={event => this.handleOnChangeOwner(event, resourceError.id)}/>
                     </div>
@@ -543,7 +543,7 @@ class DeleteUserWithConflicts extends Component {
               <ul className="ownership-transfer-items">
                 {this.groupsErrors.map(groupError =>
                   <li key={groupError.id}>
-                    <div className="select-wrapper input required">
+                    <div className={`select-wrapper input required ${this.state.processing ? 'disabled' : ''}`}>
                       <label htmlFor="transfer_group_manager">{groupError.name} (<Trans>Group</Trans>) <Trans>new manager</Trans>:</label>
                       <Select className="form-element" value={this.state.managers[groupError.id]} items={this.getGroupUsersList(groupError.id)} onChange={event => this.handleOnChangeManager(event, groupError.id)}/>
                     </div>

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

@@ -7,7 +7,7 @@ import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
-  title: 'Passbolt/User/DeleteUserWithConflicts',
+  title: 'Passbolt Component/User/DeleteUserWithConflicts',
   component: DeleteUserWithConflicts
 };
 

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

@@ -40,21 +40,13 @@ class DisplayExpiredAccountRecovery extends Component {
     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")}
+      <DialogWrapper className="expired-account-recover-dialog" title={this.props.t("Account recovery error")}
         onClose={this.handleClose}>
         <div className="form-content">
           <p>

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

@@ -18,7 +18,7 @@ import MockTranslationProvider from "../../../test/mock/components/International
 import DisplayExpiredAccountRecovery from "./DisplayExpiredAccountRecovery";
 
 export default {
-  title: 'Passbolt/User/DisplayExpiredAccountRecovery',
+  title: 'Passbolt Component/User/DisplayExpiredAccountRecovery',
   component: DisplayExpiredAccountRecovery
 };
 

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

@@ -18,7 +18,7 @@ import {withNavigationContext} from "../../../contexts/NavigationContext";
 import {withAccountRecovery} from "../../../contexts/AccountRecoveryUserContext";
 import UserAvatar from "../../Common/Avatar/UserAvatar";
 import Icon from "../../../../shared/components/Icons/Icon";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class DisplayUserBadgeMenu extends Component {
   /**
@@ -54,19 +54,19 @@ class DisplayUserBadgeMenu extends Component {
     this.handleToggleMenuClick = this.handleToggleMenuClick.bind(this);
     this.handleProfileClick = this.handleProfileClick.bind(this);
     this.handleThemeClick = this.handleThemeClick.bind(this);
-    this.handleLogoutClick = this.handleLogoutClick.bind(this);
+    this.handleMobileAppsClick = this.handleMobileAppsClick.bind(this);
   }
 
   componentDidMount() {
-    document.addEventListener('click', this.handleDocumentClickEvent);
-    document.addEventListener('contextmenu', this.handleDocumentContextualMenuEvent);
-    document.addEventListener('dragstart', this.handleDocumentDragStartEvent);
+    document.addEventListener('click', this.handleDocumentClickEvent, {capture: true});
+    document.addEventListener('contextmenu', this.handleDocumentContextualMenuEvent, {capture: true});
+    document.addEventListener('dragstart', this.handleDocumentDragStartEvent, {capture: true});
   }
 
   componentWillUnmount() {
-    document.removeEventListener('click', this.handleDocumentClickEvent);
-    document.removeEventListener('contextmenu', this.handleDocumentContextualMenuEvent);
-    document.removeEventListener('dragstart', this.handleDocumentDragStartEvent);
+    document.removeEventListener('click', this.handleDocumentClickEvent, {capture: true});
+    document.removeEventListener('contextmenu', this.handleDocumentContextualMenuEvent, {capture: true});
+    document.removeEventListener('dragstart', this.handleDocumentDragStartEvent, {capture: true});
   }
 
   /**
@@ -172,11 +172,11 @@ class DisplayUserBadgeMenu extends Component {
   }
 
   /**
-   * Handle logout click
+   * Handle mobile apps click
    * @return {void}
    */
-  handleLogoutClick() {
-    this.props.context.onLogoutRequested();
+  handleMobileAppsClick() {
+    this.props.navigationContext.onGoToUserSettingsMobileRequested();
     this.closeUserBadgeMenu();
   }
 
@@ -188,14 +188,6 @@ class DisplayUserBadgeMenu extends Component {
     return this.props.accountRecoveryContext.isAccountRecoveryChoiceRequired();
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @return {JSX}
@@ -221,7 +213,7 @@ class DisplayUserBadgeMenu extends Component {
             <li key="profile">
               <div className="row">
                 <a role="button" tabIndex="1" onClick={this.handleProfileClick}>
-                  <span><Trans>Profile</Trans></span>{this.attentionRequired && <Icon name="exclamation"/>}
+                  <span><Trans>Profile</Trans></span>{this.attentionRequired && <Icon name="exclamation" baseline={true}/>}
                 </a>
               </div>
             </li>
@@ -236,8 +228,9 @@ class DisplayUserBadgeMenu extends Component {
             }
             <li key="logout">
               <div className="row">
-                <a role="button" tabIndex="3" onClick={this.handleLogoutClick}>
-                  <span><Trans>Sign out</Trans></span>
+                <a role="button" tabIndex="3" onClick={this.handleMobileAppsClick}>
+                  <span><Trans>Mobile Apps</Trans></span>
+                  <span className="chips new">new</span>
                 </a>
               </div>
             </li>
@@ -255,7 +248,6 @@ DisplayUserBadgeMenu.propTypes = {
   accountRecoveryContext: PropTypes.object, // The account recovery context
   baseUrl: PropTypes.string,
   user: PropTypes.object,
-  t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withNavigationContext(withAccountRecovery(withTranslation('common')(DisplayUserBadgeMenu))));
+export default withAppContext(withNavigationContext(withAccountRecovery(DisplayUserBadgeMenu)));

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

@@ -6,7 +6,7 @@ import {defaultProps} from "./DisplayUserBadgeMenu.test.data";
 
 
 export default {
-  title: 'Passbolt/User/DisplayUserBadgeMenu',
+  title: 'Passbolt Component/User/DisplayUserBadgeMenu',
   component: DisplayUserBadgeMenu
 };
 

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

@@ -79,14 +79,14 @@ class DisplayUserWorkspaceActions extends React.Component {
    * Whenever the component is mounted
    */
   componentDidMount() {
-    document.addEventListener('click', this.handleDocumentClickEvent);
+    document.addEventListener('click', this.handleDocumentClickEvent, {capture: true});
   }
 
   /**
    * Whenever the component will unmount
    */
   componentWillUnmount() {
-    document.removeEventListener('click', this.handleDocumentClickEvent);
+    document.removeEventListener('click', this.handleDocumentClickEvent, {capture: true});
   }
 
   /**
@@ -486,7 +486,7 @@ class DisplayUserWorkspaceActions extends React.Component {
                 className={`button button-toggle info ${this.hasDetailsLocked() ? "selected" : ""}`}
                 onClick={this.handleDetailsLockedEvent}>
                 <Icon name="info-circle" big={true}/>
-                <span className="visuallyhidden">View detail</span>
+                <span className="visuallyhidden"><Trans>View detail</Trans></span>
               </a>
             </li>
           </ul>

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

@@ -24,7 +24,7 @@ import {
 
 
 export default {
-  title: 'Passbolt/User/DisplayUserWorkspaceActions',
+  title: 'Passbolt Component/User/DisplayUserWorkspaceActions',
   component: DisplayUserWorkspaceActions
 };
 

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

@@ -19,7 +19,7 @@ import Icon from "../../../../shared/components/Icons/Icon";
 import CreateUser from "../CreateUser/CreateUser";
 import {withDialog} from "../../../contexts/DialogContext";
 import CreateUserGroup from "../../UserGroup/CreateUserGroup/CreateUserGroup";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 /**
  * This component is a container of multiple actions applicable on user
@@ -59,15 +59,15 @@ class DisplayUserWorkspaceMainActions extends React.Component {
   }
 
   componentDidMount() {
-    document.addEventListener('click', this.handleDocumentClickEvent);
-    document.addEventListener('contextmenu', this.handleDocumentContextualMenuEvent);
-    document.addEventListener('dragstart', this.handleDocumentDragStartEvent);
+    document.addEventListener('click', this.handleDocumentClickEvent, {capture: true});
+    document.addEventListener('contextmenu', this.handleDocumentContextualMenuEvent, {capture: true});
+    document.addEventListener('dragstart', this.handleDocumentDragStartEvent, {capture: true});
   }
 
   componentWillUnmount() {
-    document.removeEventListener('click', this.handleDocumentClickEvent);
-    document.removeEventListener('contextmenu', this.handleDocumentContextualMenuEvent);
-    document.removeEventListener('dragstart', this.handleDocumentDragStartEvent);
+    document.removeEventListener('click', this.handleDocumentClickEvent, {capture: true});
+    document.removeEventListener('contextmenu', this.handleDocumentContextualMenuEvent, {capture: true});
+    document.removeEventListener('dragstart', this.handleDocumentDragStartEvent, {capture: true});
   }
 
   /**
@@ -169,14 +169,6 @@ class DisplayUserWorkspaceMainActions extends React.Component {
     return this.props.context.loggedInUser && this.props.context.loggedInUser.role.name === 'admin';
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -224,7 +216,6 @@ class DisplayUserWorkspaceMainActions extends React.Component {
 DisplayUserWorkspaceMainActions.propTypes = {
   context: PropTypes.any, // The application context
   dialogContext: PropTypes.any, // the dialog context
-  t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withDialog(withTranslation('common')(DisplayUserWorkspaceMainActions)));
+export default withAppContext(withDialog(DisplayUserWorkspaceMainActions));

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

@@ -49,17 +49,17 @@ describe("See Workspace Main Menu", () => {
       page = new DisplayUserWorkspaceMainActionsTestPage(context, props);
     });
 
-    it('As AD I can adding a user via the create menu', () => {
+    it('As AD I can adding a user via the create menu', async() => {
       expect(page.displayUserWorkspaceMainActions.exists()).toBeTruthy();
       expect(page.displayUserWorkspaceMainActions.createMenu).not.toBeNull();
-      page.displayUserWorkspaceMainActions.clickOnMenu(page.displayUserWorkspaceMainActions.createMenu);
+      await page.displayUserWorkspaceMainActions.clickOnMenu(page.displayUserWorkspaceMainActions.createMenu);
       expect(page.displayUserWorkspaceMainActions.newUserMenu).not.toBeNull();
     });
 
-    it('As AD I can adding a group via the create menu', () => {
+    it('As AD I can adding a group via the create menu', async() => {
       expect(page.displayUserWorkspaceMainActions.exists()).toBeTruthy();
       expect(page.displayUserWorkspaceMainActions.createMenu).not.toBeNull();
-      page.displayUserWorkspaceMainActions.clickOnMenu(page.displayUserWorkspaceMainActions.createMenu);
+      await page.displayUserWorkspaceMainActions.clickOnMenu(page.displayUserWorkspaceMainActions.createMenu);
       expect(page.displayUserWorkspaceMainActions.newGroupMenu).not.toBeNull();
     });
   });

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

@@ -72,7 +72,7 @@ class DisplayUsers extends React.Component {
    * @return {void}
    */
   componentDidMount() {
-    this.props.accountRecoveryContext.findAccountRecoveryPolicy();
+    this.props.accountRecoveryContext.loadAccountRecoveryPolicy();
   }
 
   /**
@@ -407,7 +407,7 @@ class DisplayUsers extends React.Component {
                     <th className="cell-multiple-select selections s-cell">
                       <div className="input checkbox">
                         <input type="checkbox" name="select all" checked={false} readOnly={true}/>
-                        <span className="visually-hidden">select all</span>
+                        <span className="visually-hidden"><Trans>Select all</Trans></span>
                       </div>
                     </th>
                     {this.hasAttentionRequiredColumn() &&

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

@@ -18,7 +18,7 @@ import {defaultContext, defaultProps, propsWithFirstUserAttentionRequired} from
 
 
 export default {
-  title: 'Passbolt/User/DisplayUsers',
+  title: 'Passbolt Component/User/DisplayUsers',
   component: DisplayUsers
 };
 

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

@@ -235,6 +235,15 @@ class DisplayUsersContextualMenu extends React.Component {
     return this.props.context.loggedInUser.id !== this.user.id;
   }
 
+  /**
+   * Check if the public key of the user could be copied.
+   * It's not the case if users are inactive as they don't have public key at this stage.
+   * @return {boolean}
+   */
+  canCopyPublicKey() {
+    return this.user.active;
+  }
+
   /**
    * Has a pending account recovery for the user.
    * @returns {boolean}
@@ -325,7 +334,9 @@ class DisplayUsersContextualMenu extends React.Component {
           <div className="row">
             <div className="main-cell-wrapper">
               <div className="main-cell">
-                <a onClick={this.handlePublicKeyCopy}>
+                <a
+                  onClick={this.handlePublicKeyCopy}
+                  className={this.canCopyPublicKey() ? '' : 'disabled'}>
                   <span><Trans>Copy public key</Trans></span>
                 </a>
               </div>

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

@@ -24,7 +24,7 @@ import {
 
 
 export default {
-  title: 'Passbolt/User/DisplayUsersContextualMenu',
+  title: 'Passbolt Component/User/DisplayUsersContextualMenu',
   component: DisplayUsersContextualMenu
 };