passbolt-styleguide 3.6.2 → 3.7.0-alpha1

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 {
   /**
@@ -58,15 +58,15 @@ class DisplayUserBadgeMenu extends 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});
   }
 
   /**
@@ -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}
@@ -256,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

@@ -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.test.stories.js

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

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

@@ -342,10 +342,10 @@ class EditUser extends Component {
         onClose={this.handleClose} disabled={this.hasAllInputDisabled()}>
         <form className="user-edit-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")}
+                ref={this.firstNameRef} type="text" value={this.state.first_name} placeholder={this.translate("First name")}
                 required="required" disabled={this.hasAllInputDisabled()}
                 onKeyUp={this.handleFirstNameInputOnKeyUp} onChange={this.handleInputChange}
                 autoComplete='off' autoFocus={true}
@@ -354,10 +354,10 @@ class EditUser 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")}
+                ref={this.lastNameRef} 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}
@@ -366,15 +366,15 @@ class EditUser extends Component {
               <div className="last_name error-message">{this.state.last_nameError}</div>
               }
             </div>
-            <div className="input text required">
+            <div className="input text required disabled">
               <label htmlFor="user-username-input"><Trans>Username / Email</Trans></label>
               <input id="user-username-input" name="username"
-                type="text" value={this.state.username} placeholder="username"
+                type="text" value={this.state.username} placeholder={this.translate("Username")}
                 required="required" disabled={true}
                 autoComplete='off' autoFocus={true}
               />
             </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

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

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

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

@@ -7,7 +7,7 @@ import {UserWorkspaceFilterTypes} from "../../../contexts/UserWorkspaceContext";
 
 
 export default {
-  title: 'Passbolt/User/FilterUsersByBreadcrumb',
+  title: 'Passbolt Component/User/FilterUsersByBreadcrumb',
   component: FilterUsersByBreadcrumb
 };
 

package/src/react-extension/components/User/FilterUsersByGroups/DisplayGroupContextualMenu.js

@@ -21,7 +21,7 @@ import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 import DeleteUserGroup from "../../UserGroup/DeleteUserGroup/DeleteUserGroup";
 import EditUserGroup from "../../UserGroup/EditUserGroup/EditUserGroup";
 import {withUserWorkspace} from "../../../contexts/UserWorkspaceContext";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class DisplayGroupContextualMenu extends React.Component {
   /**
@@ -129,14 +129,6 @@ class DisplayGroupContextualMenu extends React.Component {
     this.props.hide();
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component.
    * @returns {JSX}
@@ -191,7 +183,6 @@ DisplayGroupContextualMenu.propTypes = {
   className: PropTypes.string, // Class name to add
   dialogContext: PropTypes.any, // The dialog context
   userWorkspaceContext: PropTypes.object, // The user workspace context
-  t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withUserWorkspace(withDialog(withTranslation('common')(DisplayGroupContextualMenu))));
+export default withAppContext(withUserWorkspace(withDialog(DisplayGroupContextualMenu)));

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

@@ -6,7 +6,7 @@ import {UserWorkspaceFilterTypes} from "../../../contexts/UserWorkspaceContext";
 
 
 export default {
-  title: 'Passbolt/User/FilterUsersByGroup',
+  title: 'Passbolt Component/User/FilterUsersByGroup',
   component: FilterUsersByGroup
 };
 

package/src/react-extension/components/User/FilterUsersByGroups/FilterUsersByGroupContextualMenu.js

@@ -15,7 +15,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import ContextualMenuWrapper from "../../Common/ContextualMenu/ContextualMenuWrapper";
 import {filterByGroupsOptions} from "./FilterUsersByGroup";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class FilterUsersByGroupContextualMenu extends React.Component {
   /**
@@ -54,14 +54,6 @@ class FilterUsersByGroupContextualMenu extends React.Component {
     this.props.hide();
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component.
    * @returns {JSX}
@@ -112,7 +104,6 @@ FilterUsersByGroupContextualMenu.propTypes = {
   onBeforeHide: PropTypes.func, // On before hide callBack
   top: PropTypes.number, // top position in px of the menu
   className: PropTypes.string, // Class name to add
-  t: PropTypes.func, // The translation function
 };
 
-export default withTranslation('common')(FilterUsersByGroupContextualMenu);
+export default FilterUsersByGroupContextualMenu;

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

@@ -16,7 +16,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import {withRouter} from "react-router-dom";
 import {UserWorkspaceFilterTypes, withUserWorkspace} from "../../../contexts/UserWorkspaceContext";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 /**
  * This component allows to select shortcut filters applied on users
@@ -69,14 +69,6 @@ class FilterUsersByShortcut extends React.Component {
     this.props.history.push({pathname: '/app/users', state: {filter}});
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   render() {
     return (
       <div className="navigation-secondary navigation-shortcuts">
@@ -97,7 +89,7 @@ class FilterUsersByShortcut extends React.Component {
               <div className="main-cell-wrapper">
                 <div className="main-cell">
                   <a id="recently-modified">
-                    <span><Trans>Recently Modified</Trans></span>
+                    <span><Trans>Recently modified</Trans></span>
                   </a>
                 </div>
               </div>
@@ -112,7 +104,6 @@ class FilterUsersByShortcut extends React.Component {
 FilterUsersByShortcut.propTypes = {
   history: PropTypes.object,
   userWorkspaceContext: PropTypes.object,
-  t: PropTypes.func, // The translation function
 };
 
-export default withRouter(withUserWorkspace(withTranslation('common')(FilterUsersByShortcut)));
+export default withRouter(withUserWorkspace(FilterUsersByShortcut));

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

@@ -5,7 +5,7 @@ import FilterUsersByShortcut from "./FilterUsersByShortcut";
 
 
 export default {
-  title: 'Passbolt/User/FilterUsersByShortcut',
+  title: 'Passbolt Component/User/FilterUsersByShortcut',
   component: FilterUsersByShortcut
 };
 

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

@@ -97,14 +97,6 @@ class FilterUsersByText extends Component {
     this.setState({debounceTimeoutId, text});
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @return {JSX}
@@ -114,7 +106,7 @@ class FilterUsersByText extends Component {
       <SearchBar
         disabled={this.props.disabled}
         onSearch={this.handleSearchEvent}
-        placeholder={this.translate("Search users")}
+        placeholder={this.props.t("Search users")}
         value={this.state.text} />
     );
   }

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

@@ -4,7 +4,7 @@ import FilterUsersByText from "./FilterUsersByText";
 
 
 export default {
-  title: 'Passbolt/User/FilterUsersByText',
+  title: 'Passbolt Component/User/FilterUsersByText',
   component: FilterUsersByText
 };
 

package/src/react-extension/components/UserDetails/DisplayUserDetails/DisplayUserDetails.js

@@ -22,7 +22,7 @@ import DisplayUserDetailsInformation from "../DisplayUserDetailsInformation/Disp
 import DisplayUserDetailsGroups from "../DisplayUserDetailsGroups/DisplayUserDetailsGroups";
 import DisplayUserDetailsPublicKey from "../DisplayUserDetailsPublicKey/DisplayUserDetailsPublicKey";
 import UserAvatar from "../../Common/Avatar/UserAvatar";
-import {withTranslation} from "react-i18next";
+import {withTranslation, Trans} from "react-i18next";
 import DisplayUserDetailsAccountRecovery from "../DisplayUserDetailsAccountRecovery/DisplayUserDetailsAccountRecovery";
 
 class DisplayUserDetails extends React.Component {
@@ -130,14 +130,14 @@ class DisplayUserDetails extends React.Component {
                 <span className="name">{`${this.user.profile.first_name} ${this.user.profile.last_name}`}</span>
                 <a className="title-link" title={this.translate("Copy the link to this user")} onClick={this.handlePermalinkClick}>
                   <Icon name="link"/>
-                  <span className="visuallyhidden">Copy the link to this user</span>
+                  <span className="visuallyhidden"><Trans>Copy the link to this user</Trans></span>
                 </a>
               </div>
               <span className="subtitle">{this.user.username}</span>
             </h3>
             <a className="dialog-close" onClick={this.handleCloseClick}>
               <Icon name="close"/>
-              <span className="visuallyhidden">Close</span>
+              <span className="visuallyhidden"><Trans>Close</Trans></span>
             </a>
           </div>
           <DisplayUserDetailsInformation/>

package/src/react-extension/components/UserDetails/DisplayUserDetailsAccountRecovery/DisplayUserDetailsAccountRecovery.js

@@ -136,15 +136,7 @@ class DisplayUserDetailsAccountRecovery extends React.Component {
   formatDateTimeAgo(date) {
     const dateTime = DateTime.fromISO(date);
     const duration = dateTime.diffNow().toMillis();
-    return duration > -1000 && duration < 0 ? this.translate('Just now') : dateTime.toRelative({locale: this.props.context.locale});
-  }
-
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
+    return duration > -1000 && duration < 0 ? this.props.t('Just now') : dateTime.toRelative({locale: this.props.context.locale});
   }
 
   /**

package/src/react-extension/components/UserDetails/DisplayUserDetailsAccountRecovery/DisplayUserDetailsAccountRecovery.test.data.js

@@ -47,7 +47,7 @@ export function defaultProps(props = {}) {
 export function formatDateTimeAgo(date) {
   const dateTime = DateTime.fromISO(date);
   const duration = dateTime.diffNow().toMillis();
-  return duration > -1000 && duration < 0 ? this.translate('Just now') : dateTime.toRelative();
+  return duration > -1000 && duration < 0 ? 'Just now' : dateTime.toRelative();
 }
 
 export const oneUserAccountRequestsPending = [{

package/src/react-extension/components/UserDetails/DisplayUserDetailsAccountRecovery/DisplayUserDetailsAccountRecovery.test.stories.js

@@ -23,7 +23,7 @@ import {
 } from "./DisplayUserDetailsAccountRecovery.test.data";
 
 export default {
-  title: 'Passbolt/UserDetails/DisplayUserDetailsAccountRecovery',
+  title: 'Passbolt Component/UserDetails/DisplayUserDetailsAccountRecovery',
   component: DisplayUserDetailsAccountRecovery
 };
 

package/src/react-extension/components/UserDetails/DisplayUserDetailsActivity/DisplayUserDetailsActivity.js

@@ -161,7 +161,7 @@ class DisplayUserDetailsActivity extends React.Component {
   formatDateTimeAgo(date) {
     const dateTime = DateTime.fromISO(date);
     const duration = dateTime.diffNow().toMillis();
-    return duration > -1000 && duration < 0 ? this.translate('Just now') : dateTime.toRelative({locale: this.props.context.locale});
+    return duration > -1000 && duration < 0 ? this.props.t('Just now') : dateTime.toRelative({locale: this.props.context.locale});
   }
 
   /**
@@ -404,14 +404,6 @@ class DisplayUserDetailsActivity extends React.Component {
     return this.props.userWorkspaceContext.details.user;
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}

package/src/react-extension/components/UserDetails/DisplayUserDetailsActivity/DisplayUserDetailsActivity.test.stories.js

@@ -20,7 +20,7 @@ import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
 import DisplayUserDetailsActivity from "./DisplayUserDetailsActivity";
 
 export default {
-  title: 'Passbolt/UserDetails/DisplayUserDetailsActivity',
+  title: 'Passbolt Component/UserDetails/DisplayUserDetailsActivity',
   component: DisplayUserDetailsActivity
 };
 

package/src/react-extension/components/UserDetails/DisplayUserDetailsGroups/DisplayUserDetailsGroups.test.stories.js

@@ -7,7 +7,7 @@ import DisplayUserDetailsGroups from "./DisplayUserDetailsGroups";
 
 
 export default {
-  title: 'Passbolt/UserDetails/DisplayUserDetailsGroups',
+  title: 'Passbolt Component/UserDetails/DisplayUserDetailsGroups',
   component: DisplayUserDetailsGroups
 };
 

package/src/react-extension/components/UserDetails/DisplayUserDetailsInformation/DisplayUserDetailsInformation.js

@@ -93,7 +93,7 @@ class DisplayUserDetailsInformation extends React.Component {
   formatDateTimeAgo(date) {
     const dateTime = DateTime.fromISO(date);
     const duration = dateTime.diffNow().toMillis();
-    return duration < 1000 && duration > 0 < 1000 ? this.translate('Just now') : dateTime.toRelative({locale: this.props.context.locale});
+    return duration > -1000 && duration < 0 ? this.translate('Just now') : dateTime.toRelative({locale: this.props.context.locale});
   }
 
   /**