passbolt-styleguide 3.6.2 → 3.7.0-alpha1

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

@@ -535,7 +535,7 @@ class CreateResource extends Component {
         disabled={this.state.processing} onClose={this.handleClose}>
         <form onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
-            <div className={`input text required ${this.state.nameError ? "error" : ""}`}>
+            <div className={`input text required ${this.state.nameError ? "error" : ""} ${this.state.processing ? 'disabled' : ''}`}>
               <label htmlFor="create-password-form-name"><Trans>Name</Trans></label>
               <input id="create-password-form-name" name="name" type="text" value={this.state.name}
                 onKeyUp={this.handleNameInputKeyUp} onChange={this.handleInputChange}
@@ -545,7 +545,7 @@ class CreateResource extends Component {
               <div className="name error-message">{this.state.nameError}</div>
               }
             </div>
-            <div className={`input text ${this.state.uriError ? "error" : ""}`}>
+            <div className={`input text ${this.state.uriError ? "error" : ""} ${this.state.processing ? 'disabled' : ''}`}>
               <label htmlFor="create-password-form-uri"><Trans>URI</Trans></label>
               <input id="create-password-form-uri" name="uri" className="fluid" maxLength="1024" type="text"
                 autoComplete="off" value={this.state.uri} onChange={this.handleInputChange} placeholder={this.translate("URI")}
@@ -554,7 +554,7 @@ class CreateResource extends Component {
               <div className="error-message">{this.state.uriError}</div>
               }
             </div>
-            <div className={`input text ${this.state.usernameError ? "error" : ""}`}>
+            <div className={`input text ${this.state.usernameError ? "error" : ""} ${this.state.processing ? 'disabled' : ''}`}>
               <label htmlFor="create-password-form-username"><Trans>Username</Trans></label>
               <input id="create-password-form-username" name="username" type="text" className="fluid" maxLength="255"
                 autoComplete="off" value={this.state.username} onChange={this.handleInputChange} placeholder={this.translate("Username")}
@@ -563,7 +563,7 @@ class CreateResource extends Component {
               <div className="error-message">{this.state.usernameError}</div>
               }
             </div>
-            <div className={`input-password-wrapper input required ${this.state.passwordError ? "error" : ""}`}>
+            <div className={`input-password-wrapper input required ${this.state.passwordError ? "error" : ""} ${this.state.processing ? 'disabled' : ''}`}>
               <label htmlFor="create-password-form-password">
                 <Trans>Password</Trans>
                 {this.state.passwordWarning &&
@@ -582,15 +582,15 @@ class CreateResource extends Component {
                   disabled={this.state.processing}
                   inputRef={this.passwordInputRef}/>
                 <a onClick={this.handleGeneratePasswordButtonClick}
-                  className="password-generate button-icon button">
+                  className={`password-generate button-icon button ${this.state.processing ? "disabled" : ""}`}>
                   <Icon name='dice' big={true}/>
-                  <span className="visually-hidden">generate</span>
+                  <span className="visually-hidden"><Trans>Generate</Trans></span>
                 </a>
                 {this.canUsePasswordGenerator &&
                   <a onClick={this.handleOpenGenerator}
-                    className="password-generator button-icon button">
+                    className={`password-generator button-icon button ${this.state.processing ? "disabled" : ""}`}>
                     <Icon name='settings' big={true}/>
-                    <span className="visually-hidden">open generator</span>
+                    <span className="visually-hidden"><Trans>Open generator</Trans></span>
                   </a>
                 }
               </div>
@@ -602,7 +602,7 @@ class CreateResource extends Component {
                 <div className="password warning-message"><strong><Trans>Warning:</Trans></strong> {this.state.passwordWarning}</div>
               }
             </div>
-            <div className="input textarea">
+            <div className={`input textarea ${this.state.processing ? 'disabled' : ''}`}>
               <label htmlFor="create-password-form-description"><Trans>Description</Trans>
                 {this.state.descriptionWarning &&
                   <Icon name="exclamation"/>

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

@@ -7,7 +7,7 @@ import MockPort from "../../../test/mock/MockPort";
 import {defaultProps} from "./CreateResource.test.data";
 
 export default {
-  title: 'Passbolt/Resource/CreateResource',
+  title: 'Passbolt Component/Resource/CreateResource',
   component: CreateResource,
   argTypes: {
     language: {

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

@@ -155,14 +155,14 @@ class DeleteResource extends Component {
         <form onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
             {!this.hasMultipleResources() &&
-            <div>
+            <>
               <p>
                 <Trans>
                   Are you sure you want to delete the password <strong>{{resourceName: this.resources[0].name}}</strong>?
                 </Trans>
               </p>
-              <p><Trans>Warning: Once the password is deleted, it’ll be removed permanently and will not be recoverable.</Trans></p>
-            </div>
+              <p><Trans>Once the password is deleted, it’ll be removed permanently and will not be recoverable.</Trans></p>
+            </>
             }
             {this.hasMultipleResources() &&
             <p>

package/src/react-extension/components/Resource/DeleteResource/DeleteResource.test.page.js

@@ -101,7 +101,7 @@ class DeleteResourcePageObject {
   }
 
   get resourceName() {
-    return this._container.querySelector('.form-content div p strong');
+    return this._container.querySelector('.form-content p strong');
   }
 
   get errorDialog() {

package/src/react-extension/components/Resource/DeleteResource/DeleteResource.test.stories.js

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

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

@@ -553,7 +553,7 @@ class DisplayResourcesList extends React.Component {
           <div className="ready">
             <a className={`no-text ${isFavorite ? "fav" : "unfav"}`} onClick={ev => this.handleFavoriteClick(ev, resource)}>
               <Icon name="star"/>
-              <span className="visuallyhidden">fav</span>
+              <span className="visuallyhidden"><Trans>fav</Trans></span>
             </a>
           </div>
         </td>
@@ -580,7 +580,7 @@ class DisplayResourcesList extends React.Component {
           {this.canUsePreviewPassword &&
             <a onClick={async ev => this.handlePreviewPasswordButtonClick(ev, resource.id)} className="password-view button button-transparent">
               <Icon name={this.isPasswordPreviewed(resource.id) ? 'eye-close' : 'eye-open'}/>
-              <span className="visually-hidden">view</span>
+              <span className="visually-hidden"><Trans>View</Trans></span>
             </a>
           }
         </td>
@@ -682,13 +682,13 @@ class DisplayResourcesList extends React.Component {
                           name="select all"
                           checked={selectAll}
                           onChange={this.handleSelectAllChange}/>
-                        <span className="visually-hidden">select all</span>
+                        <span className="visually-hidden"><Trans>Select all</Trans></span>
                       </div>
                     </th>
                     <th className="cell-favorite selections s-cell sortable">
                       <a onClick={ev => this.handleSortByColumnClick(ev, "favorite")} className="unfav">
                         <Icon name="star"/>
-                        <span className="visuallyhidden">fav</span>
+                        <span className="visuallyhidden"><Trans>fav</Trans></span>
                         <span className="cell-header-icon-sort">
                           {this.isSortedColumn("favorite") && this.isSortedAsc() &&
                           <Icon name="ascending"/>

package/src/react-extension/components/Resource/DisplayResourcesList/DisplayResourcesList.test.stories.js

@@ -6,7 +6,7 @@ import AppContext from "../../../contexts/AppContext";
 import MockPort from "../../../test/mock/MockPort";
 
 export default {
-  title: 'Passbolt/Resource/DisplayResourcesList',
+  title: 'Passbolt Component/Resource/DisplayResourcesList',
   component: DisplayResourcesList
 };
 

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

@@ -39,14 +39,6 @@ class Workspace extends Component {
     return this.props.resourceWorkspaceContext.lockDisplayDetail;
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @return {JSX}
@@ -60,7 +52,7 @@ class Workspace extends Component {
         <div className="header second">
           <Logo/>
           <FilterResourcesByText
-            placeholder={this.translate("Search passwords")}/>
+            placeholder={this.props.t("Search passwords")}/>
           <DisplayUserBadgeMenu baseUrl={this.props.context.userSettings.getTrustedDomain()} user={this.props.context.loggedInUser}/>
         </div>
         <div className="header third">

package/src/react-extension/components/Resource/DisplayResourcesWorkspace/DisplayResourcesWorkspaceMainMenu.js

@@ -20,7 +20,7 @@ import {withDialog} from "../../../contexts/DialogContext";
 import {ResourceWorkspaceFilterTypes, withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
 import CreateResourceFolder from "../../ResourceFolder/CreateResourceFolder/CreateResourceFolder";
 import ImportResources from "../ImportResources/ImportResources";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import CreateResource from "../CreateResource/CreateResource";
 
 /**
@@ -69,15 +69,15 @@ class DisplayResourcesWorkspaceMainMenu 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});
   }
 
   /**
@@ -212,14 +212,6 @@ class DisplayResourcesWorkspaceMainMenu extends React.Component {
     return this.folderSelected === null || this.folderSelected.permission.type >= 7;
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -274,7 +266,6 @@ DisplayResourcesWorkspaceMainMenu.propTypes = {
   context: PropTypes.any, // The application context
   dialogContext: PropTypes.any, // the dialog context
   resourceWorkspaceContext: PropTypes.any, // the resource workspace context
-  t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withDialog(withResourceWorkspace(withTranslation('common')(DisplayResourcesWorkspaceMainMenu))));
+export default withAppContext(withDialog(withResourceWorkspace(DisplayResourcesWorkspaceMainMenu)));

package/src/react-extension/components/Resource/DisplayResourcesWorkspace/DisplayResourcesWorkspaceMainMenu.test.js

@@ -104,12 +104,12 @@ describe("See Workspace Main Menu", () => {
       page = new DisplayResourcesWorkspaceMainMenuPage(contextPro, propsFolderOwned);
     });
 
-    it('As LU I cannot start adding a resource or a folder via the workspace main menu', () => {
+    it('As LU I cannot start adding a resource or a folder via the workspace main menu', async() => {
       expect(page.displayMenu.exists()).toBeTruthy();
       expect(page.displayMenu.createMenu).not.toBeNull();
       expect(page.displayMenu.createMenuDisabled).toBeNull();
 
-      page.displayMenu.clickOnMenu(page.displayMenu.createMenu);
+      await page.displayMenu.clickOnMenu(page.displayMenu.createMenu);
 
       expect(page.displayMenu.newPasswordMenu).not.toBeNull();
       expect(page.displayMenu.newFolderMenu).not.toBeNull();

package/src/react-extension/components/Resource/DisplayResourcesWorkspace/DisplayResourcesWorkspaceMainMenu.test.stories.js

@@ -10,7 +10,7 @@ import {
  * DisplayResourcesWorkspaceMainMenu stories
  */
 export default {
-  title: 'Passbolt/Resource/DisplayResourcesWorkspaceMainMenu',
+  title: 'Passbolt Component/Resource/DisplayResourcesWorkspaceMainMenu',
   component: DisplayResourcesWorkspaceMainMenu
 };
 

package/src/react-extension/components/Resource/DisplayResourcesWorkspace/DisplayResourcesWorkspaceMenu.js

@@ -76,15 +76,15 @@ class DisplayResourcesWorkspaceMenu 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});
   }
 
   /**

package/src/react-extension/components/Resource/DisplayResourcesWorkspace/DisplayResourcesWorkspaceMenu.test.stories.js

@@ -25,7 +25,7 @@ import {
  * DisplayResourcesWorkspaceMenu stories
  */
 export default {
-  title: 'Passbolt/Resource/DisplayResourcesWorkspaceMenu',
+  title: 'Passbolt Component/Resource/DisplayResourcesWorkspaceMenu',
   component: DisplayResourcesWorkspaceMenu
 };
 

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

@@ -635,7 +635,7 @@ class EditResource extends Component {
         disabled={this.hasAllInputDisabled()} onClose={this.handleClose}>
         <form onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
-            <div className={`input text required ${this.state.nameError ? "error" : ""}`}>
+            <div className={`input text required ${this.state.nameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="edit-password-form-name"><Trans>Name</Trans></label>
               <input id="edit-password-form-name" name="name" type="text" value={this.state.name}
                 onKeyUp={this.handleNameInputKeyUp} onChange={this.handleInputChange}
@@ -645,7 +645,7 @@ class EditResource extends Component {
               <div className="name error-message">{this.state.nameError}</div>
               }
             </div>
-            <div className={`input text ${this.state.uriError ? "error" : ""}`}>
+            <div className={`input text ${this.state.uriError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="edit-password-form-uri"><Trans>URI</Trans></label>
               <input id="edit-password-form-uri" name="uri" className="fluid" maxLength="1024" type="text"
                 autoComplete="off" value={this.state.uri} onChange={this.handleInputChange} placeholder={this.translate("URI")}
@@ -654,7 +654,7 @@ class EditResource extends Component {
               <div className="error-message">{this.state.uriError}</div>
               }
             </div>
-            <div className={`input text ${this.state.usernameError ? "error" : ""}`}>
+            <div className={`input text ${this.state.usernameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="edit-password-form-username"><Trans>Username</Trans></label>
               <input id="edit-password-form-username" name="username" type="text" className="fluid" maxLength="255"
                 autoComplete="off" value={this.state.username} onChange={this.handleInputChange} placeholder={this.translate("Username")}
@@ -663,7 +663,7 @@ class EditResource extends Component {
               <div className="error-message">{this.state.usernameError}</div>
               }
             </div>
-            <div className={`input-password-wrapper input required ${this.state.passwordError ? "error" : ""}`}>
+            <div className={`input-password-wrapper input required ${this.state.passwordError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="edit-password-form-password">
                 <Trans>Password</Trans>
                 {this.state.passwordWarning &&
@@ -679,13 +679,13 @@ class EditResource extends Component {
                 <a onClick={this.handleGeneratePasswordButtonClick}
                   className={`password-generate button-icon button ${this.hasAllInputDisabled() ? "disabled" : ""}`}>
                   <Icon name='dice' big={true}/>
-                  <span className="visually-hidden">generate</span>
+                  <span className="visually-hidden"><Trans>Generate</Trans></span>
                 </a>
                 {this.canUsePasswordGenerator &&
                   <a onClick={this.handleOpenGenerator}
-                    className="password-generator button-icon button">
+                    className={`password-generator button-icon button ${this.hasAllInputDisabled() ? "disabled" : ""}`}>
                     <Icon name='settings' big={true}/>
-                    <span className="visually-hidden">open generator</span>
+                    <span className="visually-hidden"><Trans>Open generator</Trans></span>
                   </a>
                 }
               </div>
@@ -697,7 +697,7 @@ class EditResource extends Component {
                 <div className="password warning-message"><strong><Trans>Warning:</Trans></strong> {this.state.passwordWarning}</div>
               }
             </div>
-            <div className="input textarea">
+            <div className={`input textarea ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="edit-password-form-description"><Trans>Description</Trans>
                 {this.state.descriptionWarning &&
                   <Icon name="exclamation"/>

package/src/react-extension/components/Resource/EditResource/EditResource.test.stories.js

@@ -9,7 +9,7 @@ import PropTypes from "prop-types";
  * EditResource stories
  */
 export default {
-  title: 'Passbolt/Resource/EditResource',
+  title: 'Passbolt Component/Resource/EditResource',
   component: EditResource
 };
 

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

@@ -296,7 +296,7 @@ class ExportResources extends React.Component {
 
           <div className="form-content">
 
-            <div className="select-wrapper input required">
+            <div className={`select-wrapper input required ${!this.areActionsAllowed ? 'disabled' : ''}`}>
               <label htmlFor="export-format"><Trans>Choose the export format (csv and kdbx are supported)</Trans></label>
               <Select
                 id="export-format"
@@ -305,17 +305,16 @@ class ExportResources extends React.Component {
                 onChange={this.handleExportFormatSelected}
                 disabled={!this.areActionsAllowed}/>
             </div>
-            <p>
-              {this.hasFoldersToExport && !this.hasResourcesToExport &&
+            {this.hasFoldersToExport &&
+              <p>
                 <em>{this.translate("{{count}} folder is going to be exported.", {count: foldersIdsToExport.length})}</em>
-              }
-              {this.hasFoldersToExport && this.hasResourcesToExport &&
-                <em>{this.translate("{{resources}} and {{folders}} are going to be exported.", {resources: this.translate("{{count}} password", {count: resourcesIdsToExport.length}), folders: this.translate("{{count}} folder", {count: foldersIdsToExport.length})})}</em>
-              }
-              {!this.hasFoldersToExport && this.hasResourcesToExport &&
+              </p>
+            }
+            {this.hasResourcesToExport &&
+              <p>
                 <em>{this.translate("{{count}} password is going to be exported.", {count: resourcesIdsToExport.length})}</em>
-              }
-            </p>
+              </p>
+            }
           </div>
 
           <div className="submit-wrapper clearfix">

package/src/react-extension/components/Resource/ExportResources/ExportResources.test.stories.js

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

package/src/react-extension/components/Resource/ExportResources/ExportResourcesCredentials.js

@@ -239,7 +239,7 @@ class ExportResourcesCredentials extends Component {
 
           <div className="form-content">
 
-            <div className="input-password-wrapper input">
+            <div className={`input-password-wrapper input ${!this.areActionsAllowed ? 'disabled' : ''}`}>
               <label htmlFor="password"><Trans>Keepass password</Trans></label>
               <Password id="password"
                 name="password"

package/src/react-extension/components/Resource/ExportResources/ExportResourcesCredentials.test.stories.js

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

package/src/react-extension/components/Resource/FilterResourcesByBreadcrumb/FilterResourcesByBreadcrumb.test.stories.js

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

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

@@ -22,7 +22,7 @@ import {withContextualMenu} from "../../../contexts/ContextualMenuContext";
 import PropTypes from "prop-types";
 import {withDialog} from "../../../contexts/DialogContext";
 import ReactList from "react-list";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import {withDrag} from "../../../contexts/DragContext";
 
 // Root virtual folder identifier.
@@ -295,14 +295,6 @@ class FilterResourcesByFolders extends React.Component {
     return this.props.dragContext.draggedItems;
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -394,7 +386,6 @@ FilterResourcesByFolders.propTypes = {
   resourceWorkspaceContext: PropTypes.object,
   dialogContext: PropTypes.any,
   dragContext: PropTypes.any,
-  t: PropTypes.func, // The translation function
 };
 
-export default withRouter(withDialog(withContextualMenu(withResourceWorkspace(withAppContext(withDrag(withTranslation('common')(FilterResourcesByFolders)))))));
+export default withRouter(withDialog(withContextualMenu(withResourceWorkspace(withAppContext(withDrag(FilterResourcesByFolders))))));

package/src/react-extension/components/Resource/FilterResourcesByFolders/FilterResourcesByFolders.test.stories.js

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

package/src/react-extension/components/Resource/FilterResourcesByFolders/FilterResourcesByFoldersItemContextualMenu.js

@@ -22,7 +22,7 @@ import DeleteResourceFolder from "../../ResourceFolder/DeleteResourceFolder/Dele
 import ShareDialog from "../../Share/ShareDialog";
 import ExportResources from "../ExportResources/ExportResources";
 import {withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class FilterResourcesByFoldersItemContextualMenu extends React.Component {
   /**
@@ -153,14 +153,6 @@ class FilterResourcesByFoldersItemContextualMenu extends React.Component {
     await this.props.dialogContext.open(ExportResources);
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component.
    * @returns {JSX}
@@ -256,7 +248,6 @@ FilterResourcesByFoldersItemContextualMenu.propTypes = {
   className: PropTypes.string, // Class name to add
   dialogContext: PropTypes.any,
   resourceWorkspaceContext: PropTypes.any, // Resource workspace context
-  t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withResourceWorkspace(withDialog(withTranslation('common')(FilterResourcesByFoldersItemContextualMenu))));
+export default withAppContext(withResourceWorkspace(withDialog(FilterResourcesByFoldersItemContextualMenu)));

package/src/react-extension/components/Resource/FilterResourcesByFolders/FilterResourcesByRootFolderContextualMenu.js

@@ -19,7 +19,7 @@ import CreateResourceFolder from "../../ResourceFolder/CreateResourceFolder/Crea
 import {withDialog} from "../../../contexts/DialogContext";
 import ExportResources from "../ExportResources/ExportResources";
 import {withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class FilterResourcesByRootFolderContextualMenu extends React.Component {
   /**
@@ -88,14 +88,6 @@ class FilterResourcesByRootFolderContextualMenu extends React.Component {
     await this.props.dialogContext.open(ExportResources);
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component.
    * @returns {JSX}
@@ -144,7 +136,6 @@ FilterResourcesByRootFolderContextualMenu.propTypes = {
   className: PropTypes.string, // Class name to add
   dialogContext: PropTypes.any, // The dialog context
   resourceWorkspaceContext: PropTypes.any, // The resource workspace context
-  t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withResourceWorkspace(withDialog(withTranslation('common')(FilterResourcesByRootFolderContextualMenu))));
+export default withAppContext(withResourceWorkspace(withDialog(FilterResourcesByRootFolderContextualMenu)));

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

@@ -17,7 +17,7 @@ import {withAppContext} from "../../../contexts/AppContext";
 import {ResourceWorkspaceFilterTypes, withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
 import PropTypes from "prop-types";
 import {withRouter} from "react-router-dom";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 /**
  * This component display groups to filter the resources
@@ -103,14 +103,6 @@ class FilterResourcesByGroups extends React.Component {
     return this.groups.sort((groupA, groupB) => groupA.name.localeCompare(groupB.name));
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -177,7 +169,6 @@ FilterResourcesByGroups.propTypes = {
   context: PropTypes.any, // The application context
   resourceWorkspaceContext: PropTypes.any,
   history: PropTypes.object,
-  t: PropTypes.func, // The translation function
 };
 
-export default withRouter(withAppContext(withResourceWorkspace(withTranslation('common')(FilterResourcesByGroups))));
+export default withRouter(withAppContext(withResourceWorkspace(FilterResourcesByGroups)));

package/src/react-extension/components/Resource/FilterResourcesByGroups/FilterResourcesByGroups.test.stories.js

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