passbolt-styleguide 3.3.3 → 3.4.0-alpha2

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

@@ -127,7 +127,7 @@ class FilterResourcesByShortcuts extends React.Component {
 
   render() {
     return (
-      <div className="navigation first shortcuts">
+      <div className="navigation-secondary navigation-shortcuts">
         <ul >
           <li>
             <div className={`row ${this.isAllItemsSelected ? "selected" : ""}`}>

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

@@ -41,7 +41,7 @@ export default class FilterResourcesByShortcutsPage {
    * Returns the filter resources by shortcuts
    */
   get filterResourcesByShortcuts() {
-    return this._page.container.querySelector('.navigation.first.shortcuts');
+    return this._page.container.querySelector('.navigation-secondary.navigation-shortcuts');
   }
 
   /**

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

@@ -1,7 +1,6 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
-import "../../../../css/themes/default/ext_app.css";
 import FilterResourcesByShortcuts from "./FilterResourcesByShortcuts";
 
 

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

@@ -175,7 +175,7 @@ class FilterResourcesByTags extends React.Component {
    */
   render() {
     return (
-      <div className="folders navigation first accordion">
+      <div className="navigation-secondary-tree navigation-secondary navigation-tags accordion">
         <ul className="accordion-header">
           <li className={`node root ${this.state.open ? "open" : "close"}`}>
             <div className="row title">

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

@@ -40,6 +40,12 @@ export function defaultProps() {
   return {
     history: {
       push: jest.fn()
+    },
+    dragContext: {
+      dragging: true,
+      draggedItems: {
+        resources: [resource]
+      }
     }
   };
 }
@@ -74,3 +80,44 @@ export const tagsMock = [
     is_shared: false
   }
 ];
+
+export const resource = {
+  "id": "8e3874ae-4b40-590b-968a-418f704b9d9a",
+  "name": "apache",
+  "username": "www-data",
+  "uri": "http:\/\/www.apache.org\/",
+  "description": "Apache is the world\u0027s most used web server software.",
+  "deleted": false,
+  "created": "2020-08-25T08:35:19+00:00",
+  "modified": "2020-08-26T08:35:19+00:00",
+  "created_by": "f848277c-5398-58f8-a82a-72397af2d450",
+  "modified_by": "f848277c-5398-58f8-a82a-72397af2d450",
+  "favorite": {
+    "id": "56216dba-b6da-592b-87cb-fb5cbbd0a424",
+    "user_id": "f848277c-5398-58f8-a82a-72397af2d450",
+    "foreign_key": "8e3874ae-4b40-590b-968a-418f704b9d9a",
+    "foreign_model": "Resource",
+    "created": "2020-08-27T08:35:21+00:00",
+    "modified": "2020-08-27T08:35:21+00:00"
+  },
+  "permission": {
+    "id": "8dfd59a7-852d-5c57-bd45-75c28bbb3f6c",
+    "aco": "Resource",
+    "aco_foreign_key": "8e3874ae-4b40-590b-968a-418f704b9d9a",
+    "aro": "User",
+    "aro_foreign_key": "f848277c-5398-58f8-a82a-72397af2d450",
+    "type": 15,
+    "created": "2020-08-27T08:35:19+00:00",
+    "modified": "2020-08-27T08:35:19+00:00"
+  },
+  "tags": [
+    {
+      "id": "1",
+      "slug": "test",
+      "is_shared": false
+    },
+  ],
+  "folder_parent_id": null,
+  "personal": false,
+  "resource_type_id": "669f8c64-242a-59fb-92fc-81f660975fd3"
+};

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

@@ -18,12 +18,13 @@
 import {
   defaultAppContext,
   defaultProps,
-  defaultResourceWorkspaceContext,
+  defaultResourceWorkspaceContext, resource,
   tagsMock
 } from "./FilterResourcesByTags.test.data";
 import FilterResourcesByTags from "./FilterResourcesByTags.test.page";
 import MockPort from "../../../test/mock/MockPort";
 import {ResourceWorkspaceFilterTypes} from "../../../contexts/ResourceWorkspaceContext";
+import PassboltApiFetchError from "../../../../shared/lib/Error/PassboltApiFetchError";
 
 beforeEach(() => {
   jest.resetModules();
@@ -47,6 +48,9 @@ describe("See tags", () => {
     };
     const context = defaultAppContext(appContext); // The applicative context
     const resourceWorkspaceContext = defaultResourceWorkspaceContext();
+    const requestMockImpl = jest.fn((message, data) => data);
+    const mockContextRequest = (context, implementation) => jest.spyOn(context.port, 'request').mockImplementation(implementation);
+    mockContextRequest(context, requestMockImpl);
     /**
      * Given an organization with 5 tags
      * Then I should see the 5 tags on the left sidebar
@@ -58,12 +62,12 @@ describe("See tags", () => {
       page = new FilterResourcesByTags(context, props, resourceWorkspaceContext);
     });
 
-    it('I should see the 5 tags made on the resource', () => {
+    it('As LU I should see the 5 tags made on the resource', () => {
       expect(page.sidebarTagFilterSection.exists()).toBeTruthy();
       expect(page.sidebarTagFilterSection.count()).toBe(5);
     });
 
-    it('I should be able to identify each tag name', () => {
+    it('As LU I should be able to identify each tag name', () => {
       expect(page.sidebarTagFilterSection.name(1)).toBe('#git');
       expect(page.sidebarTagFilterSection.name(2)).toBe('gpg');
       expect(page.sidebarTagFilterSection.name(3)).toBe('slug');
@@ -71,6 +75,33 @@ describe("See tags", () => {
       expect(page.sidebarTagFilterSection.name(5)).toBe('there’s always something to look at if you open your eyes!');
     });
 
+    it('As LU I should be able to drop a resource on tag', async() => {
+      await page.sidebarTagFilterSection.onDropTag(3);
+      expect(context.port.request).toHaveBeenCalledWith("passbolt.tags.add-resources-tag", {"resources": [resource.id],"tag": tagsMock[1]});
+    });
+
+    it('As LU I should see tags disabled if a resource is dragging', async() => {
+      await page.sidebarTagFilterSection.onDropTag(3);
+      expect(page.sidebarTagFilterSection.tagClassname(1)).toBe('row  disabled');
+      expect(page.sidebarTagFilterSection.tagClassname(2)).toBe('row');
+      expect(page.sidebarTagFilterSection.tagClassname(3)).toBe('row');
+      expect(page.sidebarTagFilterSection.tagClassname(4)).toBe('row selected');
+      expect(page.sidebarTagFilterSection.tagClassname(5)).toBe('row');
+    });
+
+    it('As LU I should see an error dialog if the drop operation fails for an unexpected reason', async() => {
+      // Mock the request function to make it return an error.
+      jest.spyOn(context.port, 'request').mockImplementationOnce(() => {
+        throw new PassboltApiFetchError("Jest simulate API error.");
+      });
+
+      await page.sidebarTagFilterSection.onDropTag(3);
+
+      // Throw general error message
+      expect(page.sidebarTagFilterSection.errorDialogExist).toBeTruthy();
+      expect(page.sidebarTagFilterSection.errorDialogExist).toBeTruthy();
+    });
+
     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");

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

@@ -25,6 +25,9 @@ import FilterResourcesByTagsListContextualMenuPageObject from "./FilterResources
 import {ResourceWorkspaceContext} from "../../../contexts/ResourceWorkspaceContext";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import FilterResourcesByTags from "./FilterResourcesByTags";
+import {DragContext} from "../../../contexts/DragContext";
+import DialogContextProvider from "../../../contexts/DialogContext";
+import ManageDialogs from "../../../components/Common/Dialog/ManageDialogs/ManageDialogs";
 
 /**
  * The FilterResourcesByTags component represented as a page
@@ -39,14 +42,19 @@ export default class FilterResourcesByTagsPage {
     this._page = render(
       <MockTranslationProvider>
         <AppContext.Provider value={appContext}>
-          <Router>
-            <ResourceWorkspaceContext.Provider value={resourceWorkspaceContext}>
-              <ContextualMenuContextProvider>
-                <ManageContextualMenu/>
-                <FilterResourcesByTags.WrappedComponent {...props}/>
-              </ContextualMenuContextProvider>
-            </ResourceWorkspaceContext.Provider>
-          </Router>
+          <DialogContextProvider>
+            <Router>
+              <ManageDialogs/>
+              <ResourceWorkspaceContext.Provider value={resourceWorkspaceContext}>
+                <ContextualMenuContextProvider>
+                  <ManageContextualMenu/>
+                  <DragContext.Provider value={props.dragContext}>
+                    <FilterResourcesByTags.WrappedComponent {...props}/>
+                  </DragContext.Provider>
+                </ContextualMenuContextProvider>
+              </ResourceWorkspaceContext.Provider>
+            </Router>
+          </DialogContextProvider>
         </AppContext.Provider>
       </MockTranslationProvider>
     );
@@ -207,12 +215,35 @@ class SidebarTagFilterSectionPageObject {
     return this.list.querySelectorAll('.tag-item')[index - 1].querySelector('.row .main-cell-wrapper .main-cell a');
   }
 
+  /**
+   * return the tag classname for the 'index' one
+   * @param index
+   */
+  tagClassname(index) {
+    return this.list.querySelectorAll('.tag-item')[index - 1].querySelector('.row').className.trim();
+  }
+
   /**
    * Returns the displayed tag name for the 'index' one
    * @param index The display rank of name's tag
    */
   name(index) {
-    return this.list.querySelectorAll('.tag-item')[index - 1].querySelector('.ellipsis').textContent;
+    return this.list.querySelectorAll('.tag-item')[index - 1].querySelector('.tag-name').textContent;
+  }
+
+  get errorDialogExist() {
+    return this._container.querySelector('.error-dialog') !== null;
+  }
+
+  get errorDialogMessageExist() {
+    return this._container.querySelector('.error-dialog .dialog .dialog-content .form-content') !== null;
+  }
+
+  /**
+   * Drop on the tag
+   */
+  onDropTag(index) {
+    return this.drop(this.tag(index));
   }
 
   /** Click on the component */
@@ -227,4 +258,10 @@ class SidebarTagFilterSectionPageObject {
     fireEvent.contextMenu(component);
     await waitFor(() => {});
   }
+
+  /** Drop on the component */
+  async drop(component)  {
+    fireEvent.drop(component);
+    await waitFor(() => {});
+  }
 }

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

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import FilterResourcesByTags from "./FilterResourcesByTags";

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

@@ -19,6 +19,10 @@ import {withContextualMenu} from "../../../contexts/ContextualMenuContext";
 import {withRouter} from "react-router-dom";
 import Icon from "../../Common/Icons/Icon";
 import {Trans, withTranslation} from "react-i18next";
+import {withDrag} from "../../../contexts/DragContext";
+import {withDialog} from "../../../contexts/DialogContext";
+import {withAppContext} from "../../../contexts/AppContext";
+import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 
 class FilterResourcesByTagsList extends React.Component {
   /**
@@ -38,7 +42,8 @@ class FilterResourcesByTagsList extends React.Component {
   getDefaultState() {
     return {
       open: true,
-      selectedTag: null, //  tag selected for the contextual menu
+      selectedTag: null, // Tag selected for the contextual menu
+      draggingOverTagId: null // The dragging over tag id
     };
   }
 
@@ -48,6 +53,9 @@ class FilterResourcesByTagsList extends React.Component {
   bindCallbacks() {
     this.handleContextualMenuEvent = this.handleContextualMenuEvent.bind(this);
     this.handleMoreClickEvent = this.handleMoreClickEvent.bind(this);
+    this.handleDropEvent = this.handleDropEvent.bind(this);
+    this.handleDragOverEvent = this.handleDragOverEvent.bind(this);
+    this.handleDragLeaveEvent = this.handleDragLeaveEvent.bind(this);
   }
 
   /**
@@ -123,6 +131,56 @@ class FilterResourcesByTagsList extends React.Component {
     }
   }
 
+  /**
+   * Handle when the user drop content on this component.
+   * @param {ReactEvent} event The event
+   * @param {Object} tag The tag
+   */
+  async handleDropEvent(event, tag) {
+    this.setState({draggingOverTagId: null});
+    try {
+      const resources = this.props.dragContext.draggedItems.resources.map(resource => resource.id);
+      this.props.context.port.request("passbolt.tags.add-resources-tag", {resources, tag});
+    } catch (error) {
+      this.onUnexpectedError(error);
+    }
+  }
+
+  /**
+   * Whenever an unexpected error occured
+   * @param {object} error The error
+   * @returns {Promise<void>}
+   */
+  onUnexpectedError(error) {
+    const errorDialogProps = {
+      title: "There was an unexpected error...",
+      message: error.message
+    };
+    this.props.context.setContext({errorDialogProps});
+    this.props.dialogContext.open(NotifyError);
+  }
+
+  /**
+   * Handle when the user is dragging over the tag.
+   * @param {ReactEvent} event The event
+   * @param {string} tagId The tag ID
+   */
+  handleDragOverEvent(event, tagId) {
+    /*
+     * If you want to allow a drop, you must prevent the default handling by cancelling both the dragenter and dragover events.
+     * see: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets
+     */
+    event.preventDefault();
+    this.setState({draggingOverTagId: tagId});
+  }
+
+  /**
+   * Handle when the user is dragging leave the tag.
+   */
+  handleDragLeaveEvent() {
+    this.setState({draggingOverTagId: null});
+  }
+
   // Zero conditional statements
   /**
    * get the filter according to the type of the filter
@@ -165,6 +223,62 @@ class FilterResourcesByTagsList extends React.Component {
     return filter.type === ResourceWorkspaceFilterTypes.TAG && filter.payload.tag.id === tagId;
   }
 
+  /**
+   * Check if the user is currently dragging content.
+   * @returns {boolean}
+   */
+  isDragging() {
+    return this.props.dragContext.dragging;
+  }
+
+  /**
+   * Check if the component is disabled.
+   * @param {Object} tag
+   * @returns {boolean}
+   */
+  isDisabled(tag) {
+    /*
+     * If the user is dragging content, disable the component if:
+     * - The user is not allowed to drop content in the shared tag.
+     * - The user is not allowed to drop dragged items except resources;
+     */
+    if (this.isDragging()) {
+      if (tag.is_shared) {
+        return true;
+      }
+      if (!this.canDropInto()) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * Show the drop focus for a tag
+   * @param tag
+   * @returns {boolean}
+   */
+  showDropFocus(tag) {
+    return tag.id === this.state.draggingOverTagId && !this.isDisabled(tag)
+  }
+
+  /**
+   * Check if the user can drag all the items they are currently dragging.
+   * @returns {boolean}
+   */
+  canDropInto() {
+    return this.draggedItems.resources.length > 0;
+  }
+
+  /**
+   * return dragged items
+   * @returns {*}
+   */
+  get draggedItems() {
+    return this.props.dragContext.draggedItems;
+  }
+
   /**
    * Get the translate function
    * @returns {function(...[*]=)}
@@ -192,11 +306,14 @@ class FilterResourcesByTagsList extends React.Component {
         <ul className="tree ready">
           {this.filteredTags.map(tag =>
             <li className="open node root tag-item" key={tag.id}>
-              <div className={`row ${this.isSelected(tag.id) ? "selected" : ""}`}>
+              <div className={`row ${this.isSelected(tag.id) ? "selected" : ""} ${this.isDisabled(tag) ? "disabled" : ""} ${this.showDropFocus(tag) ? "drop-focus" : ""}`}
+                onDrop={ event => this.handleDropEvent(event, tag)}
+                onDragOver={ event => this.handleDragOverEvent(event, tag.id)}
+                onDragLeave={this.handleDragLeaveEvent}>
                 <div className="main-cell-wrapper" onClick={() => this.handleOnClickTag(tag)}
                   onContextMenu={event => this.handleContextualMenuEvent(event, tag)}>
                   <div className="main-cell">
-                    <a title={tag.slug}><span className="ellipsis">{tag.slug}</span></a>
+                    <a title={tag.slug}><span className="ellipsis tag-name">{tag.slug}</span></a>
                   </div>
                 </div>
                 {!tag.is_shared &&
@@ -218,15 +335,18 @@ class FilterResourcesByTagsList extends React.Component {
 }
 
 FilterResourcesByTagsList.propTypes = {
+  context: PropTypes.any, // The app context
   contextualMenuContext: PropTypes.any, // The contextual menu context
   tags: PropTypes.array,
   filterType: PropTypes.string,
   resourceWorkspaceContext: PropTypes.object,
   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(withResourceWorkspace(withContextualMenu(withTranslation('common')(FilterResourcesByTagsList))));
+export default withRouter(withAppContext(withDialog(withResourceWorkspace(withContextualMenu(withDrag(withTranslation('common')(FilterResourcesByTagsList)))))));
 
 export const filterByTagsOptions = {
   all: "all",

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

@@ -1,6 +1,5 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import FilterResourcesByText from "./FilterResourcesByText";
 
 
@@ -16,5 +15,4 @@ const Template = args =>
   </MemoryRouter>;
 
 
-
 export const Initial = Template.bind({});

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

@@ -401,7 +401,8 @@ class ImportResources extends Component {
                     id="dialog-import-passwords-choose-file"
                     className={`button primary ${this.hasAllInputDisabled() ? "disabled" : ""}`}
                     onClick={this.handleSelectFile}>
-                    <Icon name="upload-a"/> <Trans>Choose a file</Trans>
+                    <Icon name="upload-a"/>
+                    <span><Trans>Choose a file</Trans></span>
                   </a>
                 </div>
                 {isInvalidCsvFile &&
@@ -418,26 +419,26 @@ class ImportResources extends Component {
             </div>
 
             {canUseTags &&
-            <div className="input text">
+            <div className="input checkbox medium">
               <input
                 id="dialog-import-passwords-import-tags"
                 type="checkbox"
                 checked={this.state.options.tags}
                 disabled={this.hasAllInputDisabled()}
                 onChange={this.handleImportOptionTagsChanged}/>
-              <label htmlFor="dialog-import-passwords-import-tags"> <Trans>Add a unique import tag to passwords</Trans></label>
+              <label htmlFor="dialog-import-passwords-import-tags"><Trans>Add a unique import tag to passwords</Trans></label>
             </div>
             }
 
             {canUseFolders &&
-            <div className="input text">
+            <div className="input checkbox medium">
               <input
                 id="dialog-import-passwords-import-folders"
                 type="checkbox"
                 checked={this.state.options.folders}
                 disabled={this.hasAllInputDisabled()}
                 onChange={this.handleImportOptionFoldersChanged}/>
-              <label htmlFor="dialog-import-passwords-import-folders"> <Trans>Import folders</Trans></label>
+              <label htmlFor="dialog-import-passwords-import-folders"><Trans>Import folders</Trans></label>
             </div>
             }
           </div>

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

@@ -276,18 +276,15 @@ class ImportResourcesKeyUnlock extends Component {
                   type={this.state.showPassword ? "text" : "password"}
                   disabled={this.hasAllInputDisabled()}
                   placeholder={this.translate('Passphrase')}
-                  ref={this.passwordInputRef}/>
+                  ref={this.passwordInputRef}
+                  autoComplete="off"/>
+                <a
+                  onClick={this.handlePasswordViewToggled}
+                  className={`password-view button button-icon toggle ${this.state.showPassword ? "selected" : ""} ${this.hasAllInputDisabled() ? "disabled" : ""}`}>
+                  <Icon name='eye-open' big={true}/>
+                  <span className="visually-hidden">view</span>
+                </a>
               </div>
-              <ul className="actions inline">
-                <li>
-                  <a
-                    onClick={this.handlePasswordViewToggled}
-                    className={`password-view button button-icon toggle ${this.state.showPassword ? "selected" : ""} ${this.hasAllInputDisabled() ? "disabled" : ""}`}>
-                    <Icon name='eye-open' big={true}/>
-                    <span className="visually-hidden">view</span>
-                  </a>
-                </li>
-              </ul>
             </div>
 
             <div className="input-file-chooser-wrapper">
@@ -306,7 +303,8 @@ class ImportResourcesKeyUnlock extends Component {
                   <a
                     className={`button primary ${this.hasAllInputDisabled() ? "disabled" : ""}`}
                     onClick={this.handleSelectFile}>
-                    <Icon name="upload-a"/> <Trans>Choose a file</Trans>
+                    <Icon name="upload-a"/>
+                    <span><Trans>Choose a file</Trans></span>
                   </a>
                 </div>
               </div>

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

@@ -1,8 +1,6 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import AppContext from "../../../contexts/AppContext";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import ImportResourcesKeyUnlock from "./ImportResourcesKeyUnlock";
 
 
@@ -19,15 +17,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <ImportResourcesKeyUnlock {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
-
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <ImportResourcesKeyUnlock {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 
 export const Initial = Template.bind({});
-

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

@@ -238,7 +238,7 @@ class ImportResourcesResult extends Component {
       result += `----------------------------\n${this.translate("Resources errors")}\n----------------------------\n${JSON.stringify(this.resultErrorsResources, null, 4)}\n\n`;
     }
     if (this.resultHasErrorsFolders) {
-      result += `----------------------------\n${this.translate("Folders errors")}\n----------------------------\n${JSON.stringify(this.resultErrorsFolders, null, 4)}`;
+      result += `----------------------------\n${this.translate("Folder errors")}\n----------------------------\n${JSON.stringify(this.resultErrorsFolders, null, 4)}`;
     }
 
     return result;
@@ -310,7 +310,7 @@ class ImportResourcesResult extends Component {
             <div className="accordion error-details">
               <div className="accordion-header">
                 <a onClick={this.handleErrorDetailsToggle}>
-                  <Trans>Errors details</Trans>
+                  <Trans>Error details</Trans>
                   <Icon baseline={true} name={this.state.showErrorDetails ? "caret-up" : "caret-down"}/>
                 </a>
               </div>
@@ -320,7 +320,7 @@ class ImportResourcesResult extends Component {
                   <label
                     htmlFor="js_field_debug"
                     className="visuallyhidden">
-                    <Trans>Errors details</Trans>
+                    <Trans>Error details</Trans>
                   </label>
                   <textarea
                     id="js_field_debug"

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

@@ -37,8 +37,8 @@ describe("As LU I should see the password import result dialog", () => {
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe("Import success!");
 
-      expect(page.result(1)).toBe("10 password has been imported successfully.");
-      expect(page.result(2)).toBe("5 folder has been imported successfully.");
+      expect(page.result(1)).toBe("10 passwords have been imported successfully.");
+      expect(page.result(2)).toBe("5 folders have been imported successfully.");
 
       await page.acceptResult();
       expect(props.onClose).toBeCalled();
@@ -58,7 +58,7 @@ describe("As LU I should see the password import result dialog", () => {
 
       const errorDebugValue = "----------------------------\nResources errors\n----------------------------\n" +
         "[\n    {\n        \"name\": \"resource1\"\n    },\n    {\n        \"name\": \"resource2\"\n    }\n" +
-        "]\n\n----------------------------\nFolders errors\n----------------------------\n[\n    {\n" +
+        "]\n\n----------------------------\nFolder errors\n----------------------------\n[\n    {\n" +
         "        \"name\": \"folder1\"\n    }\n]";
 
       expect(page.errorDebug).toBe(errorDebugValue);

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

@@ -1,9 +1,7 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import ImportResourcesResult from "./ImportResourcesResult";
 import AppContext from "../../../contexts/AppContext";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 
 
 export default {
@@ -19,14 +17,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <ImportResourcesResult {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
-
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <ImportResourcesResult {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 
 export const Initial = Template.bind({});
@@ -40,4 +35,3 @@ Initial.args = {
     }
   }
 };
-