passbolt-styleguide 3.5.2 → 3.6.0-alpha2

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

@@ -36,6 +36,7 @@ describe("Create Folder", () => {
 
   describe('As LU I should create a folder', () => {
     it('As System I should send a create request', async() => {
+      expect.assertions(1);
       const expectedParameters =  ["passbolt.folders.create", {folder_parent_id: "some folder parent id", name: "My super folder"}];
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       await page.create({name: 'My super folder'});
@@ -43,6 +44,7 @@ describe("Create Folder", () => {
     });
 
     it('As LU I should see a success message when I successfully created a folder', async() => {
+      expect.assertions(1);
       const expectedMessage = "The folder has been added successfully";
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       jest.spyOn(props.actionFeedbackContext, 'displaySuccess').mockImplementationOnce(jest.fn());
@@ -51,6 +53,7 @@ describe("Create Folder", () => {
     });
 
     it('As LU I should see the newly created folder as selected and scrolled', async() => {
+      expect.assertions(1);
       const folderId = 'some folder id';
       const expectedParameters = ["passbolt.folders.select-and-scroll-to", folderId];
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: folderId}));
@@ -60,6 +63,7 @@ describe("Create Folder", () => {
     });
 
     it('As LU I should see the close of the dialog', async() => {
+      expect.assertions(1);
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       jest.spyOn(props, 'onClose').mockImplementationOnce(jest.fn());
       await page.create({name: 'My super folder'});
@@ -69,11 +73,13 @@ describe("Create Folder", () => {
 
   describe('As LU I should input appropriate data to create a folder', () => {
     it('AS LU I should not fill an empty folder name', async() => {
+      expect.assertions(1);
       await page.create({name: ''});
       expect(page.hasInvalidName).toBeTruthy();
     });
 
     it('AS LU I should not fill a folder name longer than 64 characters', async() => {
+      expect.assertions(1);
       await page.create({name: '1111111111 1111111111 1111111111 1111111111 1111111111 1111111111 1111'});
       expect(page.hasInvalidName).toBeTruthy();
     });
@@ -81,6 +87,7 @@ describe("Create Folder", () => {
 
   describe('As LU I should be informed when the folder creation failed', () => {
     it('AS LU I should stays on the dialog if the user have not input the passphrase', async() => {
+      expect.assertions(1);
       const error = {name: "UserAbortsOperationError"};
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => Promise.reject(error));
       jest.spyOn(props.actionFeedbackContext, 'displaySuccess').mockImplementationOnce(jest.fn());
@@ -89,25 +96,25 @@ describe("Create Folder", () => {
     });
 
     it('AS LU I should see the error message when the folder creation failed', async() => {
-      const error = {message: "Some error message"};
-      const dialogErrorProps = {errorDialogProps: {title: "There was an unexpected error...", message: error.message}};
+      expect.assertions(1);
+      const error = new Error("Some error message");
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => Promise.reject(error));
-      jest.spyOn(context, 'setContext').mockImplementationOnce(jest.fn());
       jest.spyOn(props.dialogContext, 'open').mockImplementationOnce(jest.fn());
       await page.create({name: 'My super folder'});
-      expect(context.setContext).toHaveBeenCalledWith(dialogErrorProps);
-      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError);
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error: error});
     });
   });
 
   describe('AS LU I should cancel the operation', () => {
     it('AS LU I should cancel the operation by closing the dialog', async() => {
+      expect.assertions(1);
       jest.spyOn(props, 'onClose').mockImplementationOnce(jest.fn());
       await page.close();
       expect(props.onClose).toHaveBeenCalled();
     });
 
     it('AS LU I should cancel the operation by explicitely cancelling', async() => {
+      expect.assertions(1);
       jest.spyOn(props, 'onClose').mockImplementationOnce(jest.fn());
       await page.cancel();
       expect(props.onClose).toHaveBeenCalled();
@@ -116,6 +123,7 @@ describe("Create Folder", () => {
 
   describe('AS LU I should not perform actions during the folder creation', () => {
     it('AS LU I should not cancel during the folder creation', async() => {
+      expect.assertions(1);
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       const inProgressFn = () => {
         expect(page.canCancel).toBeFalsy();
@@ -124,6 +132,7 @@ describe("Create Folder", () => {
     });
 
     it('AS LU I should not close during the folder creation', async() => {
+      expect.assertions(1);
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       const inProgressFn = () => {
         expect(page.canClose).toBeFalsy();
@@ -132,6 +141,7 @@ describe("Create Folder", () => {
     });
 
     it('AS LU I should not change data during the folder creation', async() => {
+      expect.assertions(1);
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       const inProgressFn = () => {
         expect(page.canChangeData).toBeFalsy();
@@ -140,6 +150,7 @@ describe("Create Folder", () => {
     });
 
     it('AS LU I should not re-submit during the folder creation', async() => {
+      expect.assertions(1);
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       const inProgressFn = () => {
         expect(page.canSubmit).toBeFalsy();

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

@@ -1,5 +1,6 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
+import MockPort from "../../../test/mock/MockPort";
 import CreateResourceFolder from "./CreateResourceFolder";
 
 
@@ -13,4 +14,16 @@ const Template = args =>
     <Route component={routerProps => <CreateResourceFolder {...args} {...routerProps}/>}></Route>
   </MemoryRouter>;
 
+const mockedPort = new MockPort();
+mockedPort.addRequestListener("passbolt.folders.create", data => data);
+
 export const Initial = Template.bind({});
+Initial.args = {
+  onClose: () => {},
+  context: {
+    folderCreateDialogProps: {
+      folderParentId: "test"
+    },
+    port: mockedPort
+  }
+};

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

@@ -153,11 +153,9 @@ class DefineResourceFolderMoveStrategy extends Component {
    */
   handleError(error) {
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
-      message: error.message
+      error: error
     };
-    this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**
@@ -285,20 +283,20 @@ class DefineResourceFolderMoveStrategy extends Component {
           <div className="form-content">
             <p>{this.getIntroMessage()}</p>
             <div className="radiolist-alt">
-              <div className="input radio">
+              <div className={`input radio ${this.state.moveOption === "change" ? 'checked' : ''}`}>
                 <input name="moveOption" value="change" id="moveOptionChange" type="radio"
                   onChange={this.handleInputChange} ref={this.moveOptionChangeRef} checked={this.state.moveOption === 'change'} />
                 <label htmlFor="moveOptionChange">
-                  <span className="strategy-name"><Trans>Change permissions</Trans></span>
-                  <span className="strategy-info"><Trans>Remove old inherited permissions and apply the new destination folder permissions recursively.</Trans></span>
+                  <span className="name"><Trans>Change permissions</Trans></span>
+                  <span className="info"><Trans>Remove old inherited permissions and apply the new destination folder permissions recursively.</Trans></span>
                 </label>
               </div>
-              <div className="input radio last">
+              <div className={`input radio last ${this.state.moveOption === "keep" ? 'checked' : ''}`}>
                 <input name="moveOption" value="keep" id="moveOptionKeep" type="radio"
                   onChange={this.handleInputChange} ref={this.moveOptionKeepRef}  checked={this.state.moveOption === 'keep'}/>
                 <label htmlFor="moveOptionKeep">
-                  <span className="strategy-name"><Trans>Keep existing permissions</Trans></span>
-                  <span className="strategy-info"><Trans>Keep the original permissions, do not apply the destination folder permissions.</Trans></span>
+                  <span className="name"><Trans>Keep existing permissions</Trans></span>
+                  <span className="info"><Trans>Keep the original permissions, do not apply the destination folder permissions.</Trans></span>
                 </label>
               </div>
             </div>

package/src/react-extension/components/ResourceFolder/DefineResourceFolderMoveStrategy/DefineResourceFolderMoveStrategy.test.js

@@ -36,6 +36,7 @@ describe("Move Folder", () => {
 
   describe('As LU I should move a folder', () => {
     it('As System I should send a move request with the change permission option by default', async() => {
+      expect.assertions(1);
       const expectedParameters =  ["some request id", "SUCCESS", {moveOption: "change"}];
       jest.spyOn(context.port, 'emit').mockImplementationOnce(() => {});
       await page.move('change');
@@ -43,6 +44,7 @@ describe("Move Folder", () => {
     });
 
     it('As System I should send a move request with the keep permissions option', async() => {
+      expect.assertions(1);
       const expectedParameters =  ["some request id", "SUCCESS", {moveOption: "keep"}];
       jest.spyOn(context.port, 'emit').mockImplementationOnce(() => {});
       await page.move('keep');
@@ -50,6 +52,7 @@ describe("Move Folder", () => {
     });
 
     it('As LU I should see the close of the dialog', async() => {
+      expect.assertions(1);
       jest.spyOn(context.port, 'emit').mockImplementationOnce(() => {});
       jest.spyOn(props, 'onClose').mockImplementationOnce(jest.fn());
       await page.move('change');
@@ -59,25 +62,25 @@ describe("Move Folder", () => {
 
   describe('As LU I should be informed when the folder move failed', () => {
     it('AS LU I should see the error message when the folder move failed', async() => {
-      const error = {message: "Some error message"};
-      const dialogErrorProps = {errorDialogProps: {title: "There was an unexpected error...", message: error.message}};
+      expect.assertions(1);
+      const error = new Error("Some error message");
       jest.spyOn(context.port, 'emit').mockImplementationOnce(() => Promise.reject(error));
-      jest.spyOn(context, 'setContext').mockImplementationOnce(jest.fn());
       jest.spyOn(props.dialogContext, 'open').mockImplementationOnce(jest.fn());
       await page.move('change');
-      expect(context.setContext).toHaveBeenCalledWith(dialogErrorProps);
-      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError);
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error: error});
     });
   });
 
   describe('AS LU I should cancel the operation', () => {
     it('AS LU I should cancel the operation by closing the dialog', async() => {
+      expect.assertions(1);
       jest.spyOn(props, 'onClose').mockImplementationOnce(jest.fn());
       await page.close();
       expect(props.onClose).toHaveBeenCalled();
     });
 
     it('AS LU I should cancel the operation by explicitely cancelling', async() => {
+      expect.assertions(1);
       jest.spyOn(props, 'onClose').mockImplementationOnce(jest.fn());
       await page.cancel();
       expect(props.onClose).toHaveBeenCalled();
@@ -86,6 +89,7 @@ describe("Move Folder", () => {
 
   describe('AS LU I should not perform actions during the folder creation', () => {
     it('AS LU I should not cancel during the folder move', async() => {
+      expect.assertions(1);
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       const inProgressFn = () => {
         expect(page.canCancel).toBeFalsy();
@@ -94,6 +98,7 @@ describe("Move Folder", () => {
     });
 
     it('AS LU I should not close during the folder move', async() => {
+      expect.assertions(1);
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       const inProgressFn = () => {
         expect(page.canClose).toBeFalsy();
@@ -102,6 +107,7 @@ describe("Move Folder", () => {
     });
 
     it('AS LU I should not change data during the folder move', async() => {
+      expect.assertions(1);
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       const inProgressFn = () => {
         expect(page.canChangeData).toBeFalsy();
@@ -110,6 +116,7 @@ describe("Move Folder", () => {
     });
 
     it('AS LU I should not re-submit during the folder move', async() => {
+      expect.assertions(1);
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       const inProgressFn = () => {
         expect(page.canSubmit).toBeFalsy();

package/src/react-extension/components/ResourceFolder/DefineResourceFolderMoveStrategy/DefineResourceFolderMoveStrategy.test.stories.js

@@ -3,6 +3,7 @@ import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DefineResourceFolderMoveStrategy from "./DefineResourceFolderMoveStrategy";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -19,6 +20,7 @@ const defaultContext = {
       {id: 1}
     ]
   },
+  port: new MockPort(),
   setContext: () => {}
 };
 
@@ -35,7 +37,8 @@ Template.propTypes = {
 
 export const Initial = Template.bind({});
 Initial.args = {
-  context: defaultContext
+  context: defaultContext,
+  onClose: () => {}
 };
 
 

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

@@ -151,11 +151,9 @@ class DeleteResourceFolder extends Component {
    */
   handleError(error) {
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
-      message: error.message
+      error: error
     };
-    this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**

package/src/react-extension/components/ResourceFolder/DeleteResourceFolder/DeleteResourceFolder.test.js

@@ -75,14 +75,11 @@ describe("Delete Folder", () => {
     });
 
     it('AS LU I should see the error message when the folder deletion failed', async() => {
-      const error = {message: "Some error message"};
-      const dialogErrorProps = {errorDialogProps: {title: "There was an unexpected error...", message: error.message}};
+      const error = new Error("Some error message");
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => Promise.reject(error));
-      jest.spyOn(context, 'setContext').mockImplementationOnce(jest.fn());
       jest.spyOn(props.dialogContext, 'open').mockImplementationOnce(jest.fn());
       await page.delete(false);
-      expect(context.setContext).toHaveBeenCalledWith(dialogErrorProps);
-      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError);
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error: error});
     });
   });
 

package/src/react-extension/components/ResourceFolder/DeleteResourceFolder/DeleteResourceFolder.test.stories.js

@@ -3,6 +3,7 @@ import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import DeleteResourceFolder from "./DeleteResourceFolder";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -14,7 +15,9 @@ const defaultContext = {
   folders: [
     {id: 1, name: "My folder"}
   ],
-  folder: {id: 1}
+  folder: {id: 1},
+  port: new MockPort(),
+  setContext: () => {}
 };
 
 const Template = ({context, ...args}) =>
@@ -31,7 +34,8 @@ Template.propTypes = {
 
 export const Initial = Template.bind({});
 Initial.args = {
-  context: defaultContext
+  context: defaultContext,
+  onClose: () => {}
 };
 
 Initial.argTypes = {

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

@@ -201,11 +201,9 @@ class RenameResourceFolder extends Component {
    */
   handleError(error) {
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
-      message: error.message
+      error: error
     };
-    this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**

package/src/react-extension/components/ResourceFolder/RenameResourceFolder/RenameResourceFolder.test.js

@@ -36,6 +36,7 @@ describe("Rename Folder", () => {
 
   describe('As LU I should rename a folder', () => {
     it('As System I should send a rename request', async() => {
+      expect.assertions(1);
       const expectedParameters =  ["passbolt.folders.update", {id: "some folder id", name: "My super folder"}];
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       await page.rename({name: 'My super folder'});
@@ -43,6 +44,7 @@ describe("Rename Folder", () => {
     });
 
     it('As LU I should see a success message when I successfully renamed a folder', async() => {
+      expect.assertions(1);
       const expectedMessage = "The folder was renamed successfully";
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       jest.spyOn(props.actionFeedbackContext, 'displaySuccess').mockImplementationOnce(jest.fn());
@@ -51,6 +53,7 @@ describe("Rename Folder", () => {
     });
 
     it('As LU I should see the renamed folder as selected and scrolled', async() => {
+      expect.assertions(1);
       const folderId = 'some folder id';
       const expectedParameters = ["passbolt.folders.select-and-scroll-to", folderId];
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: folderId}));
@@ -60,6 +63,7 @@ describe("Rename Folder", () => {
     });
 
     it('As LU I should see the close of the dialog', async() => {
+      expect.assertions(1);
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       jest.spyOn(props, 'onClose').mockImplementationOnce(jest.fn());
       await page.rename({name: 'My super folder'});
@@ -69,11 +73,13 @@ describe("Rename Folder", () => {
 
   describe('As LU I should input appropriate data to rename a folder', () => {
     it('AS LU I should not fill an empty folder name', async() => {
+      expect.assertions(1);
       await page.rename({name: ''});
       expect(page.hasInvalidName).toBeTruthy();
     });
 
     it('AS LU I should not fill a folder name longer than 64 characters', async() => {
+      expect.assertions(1);
       await page.rename({name: '1111111111 1111111111 1111111111 1111111111 1111111111 1111111111 1111'});
       expect(page.hasInvalidName).toBeTruthy();
     });
@@ -81,6 +87,7 @@ describe("Rename Folder", () => {
 
   describe('As LU I should be informed when the folder rename failed', () => {
     it('AS LU I should stays on the dialog if the user have not input the passphrase', async() => {
+      expect.assertions(1);
       const error = {name: "UserAbortsOperationError"};
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => Promise.reject(error));
       jest.spyOn(props.actionFeedbackContext, 'displaySuccess').mockImplementationOnce(jest.fn());
@@ -89,25 +96,25 @@ describe("Rename Folder", () => {
     });
 
     it('AS LU I should see the error message when the folder rename failed', async() => {
+      expect.assertions(1);
       const error = {message: "Some error message"};
-      const dialogErrorProps = {errorDialogProps: {title: "There was an unexpected error...", message: error.message}};
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => Promise.reject(error));
-      jest.spyOn(context, 'setContext').mockImplementationOnce(jest.fn());
       jest.spyOn(props.dialogContext, 'open').mockImplementationOnce(jest.fn());
       await page.rename({name: 'My super folder'});
-      expect(context.setContext).toHaveBeenCalledWith(dialogErrorProps);
-      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError);
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error: error});
     });
   });
 
   describe('AS LU I should cancel the operation', () => {
     it('AS LU I should cancel the operation by closing the dialog', async() => {
+      expect.assertions(1);
       jest.spyOn(props, 'onClose').mockImplementationOnce(jest.fn());
       await page.close();
       expect(props.onClose).toHaveBeenCalled();
     });
 
     it('AS LU I should cancel the operation by explicitely cancelling', async() => {
+      expect.assertions(1);
       jest.spyOn(props, 'onClose').mockImplementationOnce(jest.fn());
       await page.cancel();
       expect(props.onClose).toHaveBeenCalled();
@@ -116,6 +123,7 @@ describe("Rename Folder", () => {
 
   describe('AS LU I should not perform actions during the folder rename', () => {
     it('AS LU I should not cancel during the folder rename', async() => {
+      expect.assertions(1);
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       const inProgressFn = () => {
         expect(page.canCancel).toBeFalsy();
@@ -124,6 +132,7 @@ describe("Rename Folder", () => {
     });
 
     it('AS LU I should not close during the folder rename', async() => {
+      expect.assertions(1);
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       const inProgressFn = () => {
         expect(page.canClose).toBeFalsy();
@@ -132,6 +141,7 @@ describe("Rename Folder", () => {
     });
 
     it('AS LU I should not change data during the folder rename', async() => {
+      expect.assertions(1);
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       const inProgressFn = () => {
         expect(page.canChangeData).toBeFalsy();
@@ -140,6 +150,7 @@ describe("Rename Folder", () => {
     });
 
     it('AS LU I should not re-submit during the folder rename', async() => {
+      expect.assertions(1);
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => ({id: 'some folder id'}));
       const inProgressFn = () => {
         expect(page.canSubmit).toBeFalsy();

package/src/react-extension/components/ResourceFolder/RenameResourceFolder/RenameResourceFolder.test.stories.js

@@ -3,6 +3,7 @@ import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
 import RenameResourceFolder from "./RenameResourceFolder";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -10,11 +11,16 @@ export default {
   component: RenameResourceFolder
 };
 
+const mockedPort = new MockPort();
+mockedPort.addRequestListener("passbolt.folders.update", data => data);
+
 const defaultContext = {
   folders: [
     {id: 1, name: "My folder"}
   ],
-  folder: {id: 1}
+  folder: {id: 1},
+  setContext: () => {},
+  port: mockedPort
 };
 
 const Template = ({context, ...args}) =>
@@ -26,12 +32,14 @@ const Template = ({context, ...args}) =>
 
 Template.propTypes = {
   context: PropTypes.object,
+  onClose: () => {}
 };
 
 
 export const Initial = Template.bind({});
 Initial.args = {
-  context: defaultContext
+  context: defaultContext,
+  onClose: () => {}
 };
 
 Initial.argTypes = {

package/src/react-extension/components/ResourceFolderDetails/DisplayResourceFolderDetails/DisplayResourceFolderDetailsActivity.test.stories.js

@@ -35,7 +35,9 @@ const context = {
 const Template = args =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <DisplayResourceFolderDetailsActivity {...args} {...routerProps}/>}></Route>
+      <div className="panel aside">
+        <Route component={routerProps => <DisplayResourceFolderDetailsActivity {...args} {...routerProps}/>}></Route>
+      </div>
     </MemoryRouter>
   </AppContext.Provider>;
 
@@ -43,7 +45,7 @@ export const Initial = Template.bind({});
 Initial.args = {
   resourceWorkspaceContext: {
     details: {
-      resource: {
+      folder: {
         "id": "9e03fd73-04c0-5514-95fa-1a6cf2c7c093",
         "name": "Accounting",
         "created": "2020-02-01T00:00:00+00:00",

package/src/react-extension/components/ResourceFolderDetails/DisplayResourceFolderDetails/DisplayResourceFolderDetailsInformation.test.js

@@ -49,16 +49,16 @@ describe("See information", () => {
     });
 
     it('I should see the information of a resource', async() => {
+      expect.assertions(2);
       expect(page.title.hyperlink.textContent).toBe("Information");
-
       expect(page.displayInformationList.exists()).toBeTruthy();
-      await page.title.click();
     });
 
     it('I should be able to identify each information name', async() => {
       mockContextRequest(copyClipboardMockImpl);
       jest.spyOn(ActionFeedbackContext._currentValue, 'displaySuccess').mockImplementation(() => {});
 
+      expect.assertions(12);
       expect(page.displayInformationList.usernameLabel).toBe('Name');
       expect(page.displayInformationList.username.textContent).toBe(props.resourceWorkspaceContext.details.folder.name);
       expect(page.displayInformationList.modifiedLabel(1)).toBe('Modified');
@@ -71,7 +71,6 @@ describe("See information", () => {
       expect(page.displayInformationList.modifiedBy(2).textContent).toBe('ada@passbolt.com');
       expect(page.displayInformationList.locationLabel).toBe('Location');
       expect(page.displayInformationList.location.textContent).toBe(" /");
-      await page.displayInformationList.click(page.displayInformationList.location);
     });
   });
 });

package/src/react-extension/components/ResourceFolderDetails/DisplayResourceFolderDetails/DisplayResourceFolderDetailsInformation.test.stories.js

@@ -18,7 +18,9 @@ const context = {
 const Template = args =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <DisplayResourceFolderDetailsInformation {...args} {...routerProps}/>}></Route>
+      <div className="panel aside">
+        <Route component={routerProps => <DisplayResourceFolderDetailsInformation {...args} {...routerProps}/>}></Route>
+      </div>
     </MemoryRouter>
   </AppContext.Provider>;
 

package/src/react-extension/components/ResourceFolderDetails/DisplayResourceFolderDetails/DisplayResourceFolderDetailsPermissions.test.stories.js

@@ -40,7 +40,9 @@ const context = {
 const Template = args =>
   <AppContext.Provider value={context}>
     <MemoryRouter initialEntries={['/']}>
-      <Route component={routerProps => <DisplayResourceFolderDetailsPermissions {...args} {...routerProps}/>}></Route>
+      <div className="panel aside">
+        <Route component={routerProps => <DisplayResourceFolderDetailsPermissions {...args} {...routerProps}/>}></Route>
+      </div>
     </MemoryRouter>
   </AppContext.Provider>;
 

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/ConfigurePassphraseGenerator.test.stories.js

@@ -26,5 +26,6 @@ Initial.args = {
       max_word: 40,
       separator: " "
     },
-  }
+  },
+  onChanged: () => {}
 };

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/ConfigurePasswordGenerator.js

@@ -153,7 +153,7 @@ class ConfigurePasswordGenerator extends React.Component {
               this.masks.map(mask => (
                 <button
                   key={mask.name}
-                  className={`button button-toggle ${(mask.active ? 'selected' : '')}`}
+                  className={`button button-toggle ${(mask.active || mask.required ? 'selected' : '')}`}
                   onClick={event => this.handleMaskToggled(mask.name, event)}>
                   {mask.label}
                 </button>

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/ConfigurePasswordGenerator.test.stories.js

@@ -49,13 +49,12 @@ Initial.args = {
       {
         "name": "lower",
         "label": "a-z",
-        "characters": "abcdefghijklmnopqrstuvwxyz",
+        "characters": "abcdefghijklmnopqrstuvwxyz"
       },
       {
         "name": "digit",
         "label": "0-9",
-        "characters": "0123456789",
-        "required": true,
+        "characters": "0123456789"
       },
       {
         "name": "parenthesis",