passbolt-styleguide 3.6.2 → 3.7.0-alpha1

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

@@ -16,7 +16,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import {ResourceWorkspaceFilterTypes, withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
 import {withRouter} from "react-router-dom";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 /**
  * This component allows to select shortcut filters applied on resources
@@ -71,7 +71,7 @@ class FilterResourcesByShortcuts extends React.Component {
   }
 
   /**
-   * Returns true if the Recently Modified shortcut is currently selected
+   * Returns true if the Recently modified shortcut is currently selected
    */
   get isRecentlyModifiedSelected() {
     return this.props.resourceWorkspaceContext.filter.type === ResourceWorkspaceFilterTypes.RECENTLY_MODIFIED;
@@ -117,14 +117,6 @@ class FilterResourcesByShortcuts extends React.Component {
     this.props.history.push({pathname: '/app/passwords', state: {filter}});
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   render() {
     return (
       <div className="navigation-secondary navigation-shortcuts">
@@ -156,7 +148,7 @@ class FilterResourcesByShortcuts extends React.Component {
               <div className="main-cell-wrapper">
                 <div className="main-cell">
                   <a>
-                    <span><Trans>Recently Modified</Trans></span>
+                    <span><Trans>Recently modified</Trans></span>
                   </a>
                 </div>
               </div>
@@ -193,7 +185,6 @@ class FilterResourcesByShortcuts extends React.Component {
 FilterResourcesByShortcuts.propTypes = {
   history: PropTypes.object,
   resourceWorkspaceContext: PropTypes.object,
-  t: PropTypes.func, // The translation function
 };
 
-export default withRouter(withResourceWorkspace(withTranslation('common')(FilterResourcesByShortcuts)));
+export default withRouter(withResourceWorkspace(FilterResourcesByShortcuts));

package/src/react-extension/components/Resource/FilterResourcesByShortcuts/FilterResourcesByShortcuts.test.js

@@ -89,7 +89,7 @@ describe("See Resource FilterResourcesByShortcuts", () => {
       const props = defaultProps(ResourceWorkspaceFilterTypes.RECENTLY_MODIFIED); // The props
       page = new FilterResourcesByShortcutsPage(context, props);
       await page.selectItem(3);
-      expect(page.itemSelected).toBe("Recently Modified");
+      expect(page.itemSelected).toBe("Recently modified");
       const pathname = '/app/passwords';
       const state = {
         filter: {

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

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

package/src/react-extension/components/Resource/FilterResourcesByTags/FilterResourcesByTags.test.js

@@ -102,7 +102,7 @@ describe("See tags", () => {
       expect(page.sidebarTagFilterSection.errorDialogExist).toBeTruthy();
     });
 
-    it.only('As LU I filter the tags in the resources workspace primary sidebar by personal tag', async() => {
+    it('As LU I filter the tags in the resources workspace primary sidebar by personal tag', async() => {
       await page.title.click(page.title.filterButton);
       expect(page.sidebarTagFilterSectionsContextualMenu.personalTagMenu.textContent).toBe("My tags");
       await page.sidebarTagFilterSectionsContextualMenu.click(page.sidebarTagFilterSectionsContextualMenu.personalTagMenu);

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

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

package/src/react-extension/components/Resource/FilterResourcesByTags/FilterResourcesByTagsContextualMenu.js

@@ -15,7 +15,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import ContextualMenuWrapper from "../../Common/ContextualMenu/ContextualMenuWrapper";
 import {filterByTagsOptions} from "./FilterResourcesByTagsList";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class FilterResourcesByTagsContextualMenu extends React.Component {
   /**
@@ -54,14 +54,6 @@ class FilterResourcesByTagsContextualMenu 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 @@ FilterResourcesByTagsContextualMenu.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')(FilterResourcesByTagsContextualMenu);
+export default FilterResourcesByTagsContextualMenu;

package/src/react-extension/components/Resource/FilterResourcesByTags/FilterResourcesByTagsList.js

@@ -18,7 +18,7 @@ import {ResourceWorkspaceFilterTypes, withResourceWorkspace} from "../../../cont
 import {withContextualMenu} from "../../../contexts/ContextualMenuContext";
 import {withRouter} from "react-router-dom";
 import Icon from "../../../../shared/components/Icons/Icon";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import {withDrag} from "../../../contexts/DragContext";
 import {withDialog} from "../../../contexts/DialogContext";
 import {withAppContext} from "../../../contexts/AppContext";
@@ -297,14 +297,6 @@ class FilterResourcesByTagsList 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}
@@ -363,10 +355,9 @@ FilterResourcesByTagsList.propTypes = {
   history: PropTypes.any,
   dialogContext: PropTypes.any, // The dialog context
   dragContext: PropTypes.any, // The drag and drop context
-  t: PropTypes.func, // The translation function
 };
 
-export default withRouter(withAppContext(withDialog(withResourceWorkspace(withContextualMenu(withDrag(withTranslation('common')(FilterResourcesByTagsList)))))));
+export default withRouter(withAppContext(withDialog(withResourceWorkspace(withContextualMenu(withDrag(FilterResourcesByTagsList))))));
 
 export const filterByTagsOptions = {
   all: "all",

package/src/react-extension/components/Resource/FilterResourcesByTags/FilterResourcesByTagsListContextualMenu.js

@@ -18,7 +18,7 @@ import EditResourceTag from "../../ResourceTag/EditResourceTag/EditResourceTag";
 import DeleteResourceTag from "../../ResourceTag/DeleteResourceTag/DeleteResourceTag";
 import {withDialog} from "../../../contexts/DialogContext";
 import ContextualMenuWrapper from "../../Common/ContextualMenu/ContextualMenuWrapper";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class FilterResourcesByTagsListContextualMenu extends React.Component {
   /**
@@ -67,14 +67,6 @@ class FilterResourcesByTagsListContextualMenu extends React.Component {
     this.props.hide();
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component.
    * @returns {JSX}
@@ -90,7 +82,7 @@ class FilterResourcesByTagsListContextualMenu extends React.Component {
           <div className="row">
             <div className="main-cell-wrapper">
               <div className="main-cell">
-                <a id="edit-tag" onClick={this.handleEditClickEvent}><span><Trans>Edit Tag</Trans></span></a>
+                <a id="edit-tag" onClick={this.handleEditClickEvent}><span><Trans>Edit tag</Trans></span></a>
               </div>
             </div>
           </div>
@@ -118,7 +110,6 @@ FilterResourcesByTagsListContextualMenu.propTypes = {
   selectedTag: PropTypes.object,
   className: PropTypes.string, // Class name to add
   dialogContext: PropTypes.any,
-  t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withDialog(withTranslation('common')(FilterResourcesByTagsListContextualMenu)));
+export default withAppContext(withDialog(FilterResourcesByTagsListContextualMenu));

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

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

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

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

package/src/react-extension/components/Resource/ImportResources/ImportResourcesKeyUnlock.js

@@ -273,7 +273,7 @@ class ImportResourcesKeyUnlock extends Component {
 
           <div className="form-content">
 
-            <div className="input-password-wrapper input">
+            <div className={`input-password-wrapper input ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
               <label htmlFor="import-password-dialog-password"><Trans>Keepass password</Trans></label>
               <Password
                 id="import-password-dialog-password"

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

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

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

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

package/src/react-extension/components/ResourceComment/AddResourceComment/AddResourceComment.test.stories.js

@@ -6,7 +6,7 @@ import AddResourceComment from "./AddResourceComment";
 
 
 export default {
-  title: 'Passbolt/ResourceComment/AddComment',
+  title: 'Passbolt Component/ResourceComment/AddComment',
   component: AddResourceComment
 };
 
@@ -30,8 +30,10 @@ const Template = args =>
   <AppContext.Provider value={args.context}>
     <MemoryRouter initialEntries={['/']}>
       <div className="panel aside">
-        <div className="comments">
-          <Route component={routerProps => <AddResourceComment {...args} {...routerProps}/>}></Route>
+        <div className="comments accordion sidebar-section">
+          <div className="accordion-content">
+            <Route component={routerProps => <AddResourceComment {...args} {...routerProps}/>}></Route>
+          </div>
         </div>
       </div>
     </MemoryRouter>

package/src/react-extension/components/ResourceComment/ConfirmResourceCommentDeletion/ConfirmResourceCommentDeletion.js

@@ -129,7 +129,7 @@ class ConfirmDeleteDialog extends Component {
             noValidate>
             <div className="form-content">
               <p><Trans>Are you sure you want to delete the comment?</Trans></p>
-              <p><Trans>Warning: Once the comment is deleted, it’ll be removed permanently and will not be recoverable.</Trans></p>
+              <p><Trans>Once the comment is deleted, it’ll be removed permanently and will not be recoverable.</Trans></p>
             </div>
             <div className="submit-wrapper clearfix">
               <FormCancelButton

package/src/react-extension/components/ResourceComment/ConfirmResourceCommentDeletion/ConfirmResourceCommentDeletion.test.stories.js

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

package/src/react-extension/components/ResourceComment/DeleteResourceComment/DeleteComment.js

@@ -13,6 +13,7 @@
  */
 
 import React from "react";
+import {Trans} from "react-i18next";
 import {withAppContext} from "../../../contexts/AppContext";
 import Icon from "../../../../shared/components/Icons/Icon";
 import PropTypes from "prop-types";
@@ -53,7 +54,7 @@ class DeleteComment extends React.Component {
         <span className="svg-icon">
           <Icon name="trash"/>
         </span>
-        <span className="visuallyhidden">delete</span>
+        <span className="visuallyhidden"><Trans>Delete</Trans></span>
       </a>
     );
   }

package/src/react-extension/components/ResourceComment/DisplayResourceCommentList/DisplayResourceCommentList.js

@@ -117,15 +117,7 @@ class DisplayResourceCommentList 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/ResourceComment/DisplayResourceCommentList/DisplayResourceCommentList.test.stories.js

@@ -5,7 +5,7 @@ import DisplayResourceCommentList from "./DisplayResourceCommentList";
 
 
 export default {
-  title: 'Passbolt/ResourceComment/DisplayResourceCommentList',
+  title: 'Passbolt Component/ResourceComment/DisplayResourceCommentList',
   component: DisplayResourceCommentList
 };
 
@@ -122,8 +122,10 @@ const Template = args =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
       <div className="panel aside">
-        <div className="comments">
-          <Route component={routerProps => <DisplayResourceCommentList {...args} {...routerProps}/>}></Route>
+        <div className="comments accordion sidebar-section">
+          <div className="accordion-content">
+            <Route component={routerProps => <DisplayResourceCommentList {...args} {...routerProps}/>}></Route>
+          </div>
         </div>
       </div>
     </MemoryRouter>

package/src/react-extension/components/ResourceDescription/EditResourceDescription/EditResourceDescription.js

@@ -237,14 +237,14 @@ class EditResourceDescription extends React.Component {
    * Remove listener for outside description editor clicks that aims to closes the editor
    */
   removeOutsideEditorClickEvent() {
-    document.removeEventListener('click', this.handleEditorClickEvent);
+    document.removeEventListener('click', this.handleEditorClickEvent, {capture: true});
   }
 
   /**
    * handle a click outside of the editor
    */
   handleOutsideEditorClickEvent() {
-    document.addEventListener('click', this.handleEditorClickEvent);
+    document.addEventListener('click', this.handleEditorClickEvent, {capture: true});
   }
 
   /*

package/src/react-extension/components/ResourceDescription/EditResourceDescription/EditResourceDescription.test.stories.js

@@ -10,7 +10,7 @@ import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
-  title: 'Passbolt/ResourceDescription/EditResourceDescription',
+  title: 'Passbolt Component/ResourceDescription/EditResourceDescription',
   component: EditResourceDescription
 };
 
@@ -35,8 +35,10 @@ const Template = args =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
       <div className="panel aside">
-        <div className="comments">
-          <Route component={routerProps => <EditResourceDescription {...args} {...routerProps}/>}></Route>
+        <div className="accordion sidebar-section">
+          <div className="accordion-content">
+            <Route component={routerProps => <EditResourceDescription {...args} {...routerProps}/>}></Route>
+          </div>
         </div>
       </div>
     </MemoryRouter>

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetails.js

@@ -23,7 +23,7 @@ import DisplayResourceDetailsPermission from "./DisplayResourceDetailsPermission
 import {withAppContext} from "../../../contexts/AppContext";
 import DisplayResourceDetailsActivity from "./DisplayResourceDetailsActivity";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
-import {withTranslation} from "react-i18next";
+import {withTranslation, Trans} from "react-i18next";
 
 class DisplayResourceDetails extends React.Component {
   /**
@@ -112,14 +112,14 @@ class DisplayResourceDetails extends React.Component {
                 <span className="name">{this.props.resourceWorkspaceContext.details.resource.name}</span>
                 <a className="title-link" title={this.translate("Copy the link to this password")} onClick={this.handlePermalinkClick}>
                   <Icon name="link"/>
-                  <span className="visuallyhidden">Copy the link to this password</span>
+                  <span className="visuallyhidden"><Trans>Copy the link to this password</Trans></span>
                 </a>
               </div>
               <span className="subtitle">{this.subtitle}</span>
             </h3>
             <a className="dialog-close button button-transparent" onClick={this.handleCloseClick}>
               <Icon name="close"/>
-              <span className="visuallyhidden">Close</span>
+              <span className="visuallyhidden"><Trans>Close</Trans></span>
             </a>
           </div>
           <DisplayResourceDetailsInformation/>

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsActivity.test.stories.js

@@ -8,7 +8,7 @@ import TranslationProvider from "../../Common/Internationalisation/TranslationPr
 
 
 export default {
-  title: 'Passbolt/ResourceDetails/DisplayResourceDetailsActivity',
+  title: 'Passbolt Component/ResourceDetails/DisplayResourceDetailsActivity',
   component: DisplayResourceDetailsActivity
 };
 
@@ -49,7 +49,7 @@ Initial.args = {
   resourceWorkspaceContext: {
     details: {
       resource: {
-
+        name: "resource"
       }
     }
   }

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsComment.js

@@ -19,7 +19,7 @@ import PropTypes from "prop-types";
 import DisplayResourceCommentList from "../../ResourceComment/DisplayResourceCommentList/DisplayResourceCommentList";
 import {withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
 import Icon from "../../../../shared/components/Icons/Icon";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class DisplayResourceDetailsComment extends React.Component {
   /**
@@ -129,14 +129,6 @@ class DisplayResourceDetailsComment extends React.Component {
     return this.props.resourceWorkspaceContext.details.resource;
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -190,7 +182,6 @@ class DisplayResourceDetailsComment extends React.Component {
 
 DisplayResourceDetailsComment.propTypes = {
   resourceWorkspaceContext: PropTypes.any, // The resource context
-  t: PropTypes.func, // The translation function
 };
 
-export default withResourceWorkspace(withTranslation('common')(DisplayResourceDetailsComment));
+export default withResourceWorkspace(DisplayResourceDetailsComment);

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsDescription.js

@@ -138,7 +138,7 @@ class DisplayResourceDetailsDescription extends React.Component {
         description: undefined,
         isSecretDecrypting: false,
         error: true,
-        errorMsg: this.translate("Decryption failed, click here to retry") + (error.message || '')
+        errorMsg: this.props.t("Decryption failed, click here to retry") + (error.message || '')
       });
 
       return false;
@@ -272,14 +272,6 @@ class DisplayResourceDetailsDescription extends React.Component {
     return !this.state.error && !this.state.isSecretDecrypting && !this.hasNoDescription() && !this.state.showDescriptionEditor;
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -304,7 +296,7 @@ class DisplayResourceDetailsDescription extends React.Component {
           {this.canEdit() &&
           <a className="section-action button button-transparent" onClick={this.handleEditClickEvent}>
             <Icon name="edit"/>
-            <span className="visuallyhidden"><Trans>edit</Trans></span>
+            <span className="visuallyhidden"><Trans>Edit</Trans></span>
           </a>
           }
           {this.state.isSecretDecrypting &&

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsDescription.test.stories.js

@@ -8,7 +8,7 @@ import TranslationProvider from "../../Common/Internationalisation/TranslationPr
 
 
 export default {
-  title: 'Passbolt/ResourceDetails/DisplayResourceDetailsDescription',
+  title: 'Passbolt Component/ResourceDetails/DisplayResourceDetailsDescription',
   component: DisplayResourceDetailsDescription
 };
 

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsInformation.js

@@ -373,7 +373,7 @@ class DisplayResourceDetailsInformation extends React.Component {
               <a onClick={this.handleViewPasswordButtonClick}
                 className="password-view button button-transparent">
                 <Icon name={isPasswordPreviewed ? 'eye-close' : 'eye-open'}/>
-                <span className="visually-hidden">view</span>
+                <span className="visually-hidden"><Trans>View</Trans></span>
               </a>
               }
             </div>

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsInformation.test.data.js

@@ -25,7 +25,7 @@ export function defaultAppContext(appContext) {
 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();
 }
 
 /**

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsPermission.js

@@ -184,14 +184,6 @@ class DisplayResourceDetailsPermission extends React.Component {
     return this.resource.permission && this.resource.permission.type === 15;
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -216,7 +208,7 @@ class DisplayResourceDetailsPermission extends React.Component {
           {this.canShare() &&
           <a onClick={this.handlePermissionsEditClickEvent} className="section-action button button-transparent">
             <Icon name="edit"/>
-            <span className="visuallyhidden">modify</span>
+            <span className="visuallyhidden"><Trans>modify</Trans></span>
           </a>
           }
           {this.isLoading() &&
@@ -232,7 +224,7 @@ class DisplayResourceDetailsPermission extends React.Component {
                 <div className="content-wrapper">
                   <div className="content">
                     <div className="name">{this.getPermissionAroName(permission)}</div>
-                    <div className="subinfo">{this.translate(PERMISSIONS_LABEL[permission.type])}</div>
+                    <div className="subinfo">{this.props.t(PERMISSIONS_LABEL[permission.type])}</div>
                   </div>
                 </div>
                 {permission.user &&

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsTag.js

@@ -17,7 +17,7 @@ import EditResourceTagsItemViewer from "../../ResourceTag/EditResourceTags/EditR
 import EditResourceTags from "../../ResourceTag/EditResourceTags/EditResourceTags";
 import Icon from "../../../../shared/components/Icons/Icon";
 import {withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class DisplayResourceDetailsTag extends React.Component {
   /**
@@ -72,14 +72,6 @@ class DisplayResourceDetailsTag extends React.Component {
     this.setState({showTagEditor});
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @returns {JSX}
@@ -107,7 +99,7 @@ class DisplayResourceDetailsTag extends React.Component {
         <div className="accordion-content">
           <a className="section-action button button-transparent" onClick={this.toggleInputTagEditor}>
             <Icon name="edit"/>
-            <span className="visuallyhidden">edit</span>
+            <span className="visuallyhidden"><Trans>Edit</Trans></span>
           </a>
 
           {!this.state.showTagEditor &&
@@ -133,7 +125,6 @@ class DisplayResourceDetailsTag extends React.Component {
 DisplayResourceDetailsTag.propTypes = {
   history: PropTypes.any,
   resourceWorkspaceContext: PropTypes.any,
-  t: PropTypes.func, // The translation function
 };
 
-export default withResourceWorkspace(withTranslation('common')(DisplayResourceDetailsTag));
+export default withResourceWorkspace(DisplayResourceDetailsTag);

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsTag.test.stories.js

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

package/src/react-extension/components/ResourceFolder/CreateResourceFolder/CreateResourceFolder.js

@@ -288,7 +288,7 @@ class CreateResourceFolder extends Component {
         onClose={this.handleClose} disabled={this.hasAllInputDisabled()}>
         <form className="folder-create-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="folder-name-input"><Trans>Name</Trans></label>
               <input id="folder-name-input" name="name"
                 ref={this.nameRef}