passbolt-styleguide 3.5.2 → 3.6.0-alpha2

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

@@ -313,11 +313,9 @@ class ImportResources extends Component {
     } else {
       // If an unexpected error occurred.
       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/Resource/ImportResources/ImportResources.test.js

@@ -43,6 +43,7 @@ describe("As LU I should see the password import dialog", () => {
     });
 
     it('As LU I see a success dialog after importing a file with success', async() => {
+      expect.assertions(9);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe("Import passwords");
       const file = new File(['test'], 'import.csv', {type: 'csv'});
@@ -96,6 +97,7 @@ describe("As LU I should see the password import dialog", () => {
     });
 
     it('As LU I shouldn’t be able to submit the form if there is an error', async() => {
+      expect.assertions(1);
       const file = new File(['test'], 'import.csv', {type: 'csv'});
       // check fields in the form
       await page.selectImportFile(file);
@@ -114,6 +116,7 @@ describe("As LU I should see the password import dialog", () => {
     });
 
     it('As LU I shouldn’t be able to submit the form if there is an error in kdbx file', async() => {
+      expect.assertions(2);
       const file = new File(['test'], 'import.kdbx', {type: 'kdbx'});
       // check fields in the form
       await page.selectImportFile(file);
@@ -141,34 +144,39 @@ describe("As LU I should see the password import dialog", () => {
     });
 
     it('As LU I can stop importing passwords by clicking on the cancel button', async() => {
+      expect.assertions(1);
       await page.cancelImport();
       expect(props.onClose).toBeCalled();
     });
 
     it('As LU I can stop importing passwords by closing the dialog', async() => {
+      expect.assertions(1);
       await page.closeDialog();
       expect(props.onClose).toBeCalled();
     });
 
     it('As LU I can stop importing passwords with the keyboard (escape)', async() => {
+      expect.assertions(1);
       await page.escapeKey();
       expect(props.onClose).toBeCalled();
     });
 
     it('As LU I should see an error dialog if the submit operation fails for an unexpected reason', async() => {
+      expect.assertions(1);
       const file = new File(['test'], 'import.csv', {type: 'csv'});
       // check fields in the form
       await page.selectImportFile(file);
       // Mock the request function to make it return an error.
+      const error = new PassboltApiFetchError("Jest simulate API error.");
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => {
-        throw new PassboltApiFetchError("Jest simulate API error.");
+        throw error;
       });
 
       await page.submitImport();
       await waitFor(() => {});
 
       // Throw dialog general error message
-      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError);
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error: error});
     });
   });
 });

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

@@ -198,7 +198,7 @@ class ImportResourcesKeyUnlock extends Component {
    * Handle the failure of the KDBX import
    * @param error The import error
    */
-  async handleImportError(error) {
+  handleImportError(error) {
     const userAbortsOperation = error.name === "UserAbortsOperationError";
     const isInvalidPasswordOrKeyFile = error.code === "InvalidKey" || error.code === "InvalidArg";
 
@@ -208,15 +208,13 @@ class ImportResourcesKeyUnlock extends Component {
       // If the user aborts the operation, then do nothing. It happens when the users close the passphrase dialog
     } else if (isInvalidPasswordOrKeyFile) {
       // If the credentials are invalid.
-      await this.setState({errors: {invalidPasswordOrKeyfile: true}});
+      this.setState({errors: {invalidPasswordOrKeyfile: true}});
     } else {
       // If an unexpected error occurred.
       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/Resource/ImportResources/ImportResourcesKeyUnlock.test.js

@@ -42,6 +42,7 @@ describe("As LU I should see the password unlock Keypass dialog", () => {
     });
 
     it('As LU I see a success dialog after unlocking keypass file with success', async() => {
+      expect.assertions(8);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe("Enter the password and/or key file");
       const file = new File(['test'], 'keyfile.txt', {type: 'txt'});
@@ -92,6 +93,7 @@ describe("As LU I should see the password unlock Keypass dialog", () => {
     });
 
     it('As LU I shouldn’t be able to submit the form if there is an error in kdbx file', async() => {
+      expect.assertions(1);
       const file = new File(['test'], 'keyfile.txt', {type: 'txt'});
       await page.fillPassword("test");
       await page.selectUnlockKeypassFile(file);
@@ -110,34 +112,39 @@ describe("As LU I should see the password unlock Keypass dialog", () => {
     });
 
     it('As LU I can stop importing passwords by clicking on the cancel button', async() => {
+      expect.assertions(1);
       await page.cancelUnlockKeypass();
       expect(props.onClose).toBeCalled();
     });
 
     it('As LU I can stop importing passwords by closing the dialog', async() => {
+      expect.assertions(1);
       await page.closeDialog();
       expect(props.onClose).toBeCalled();
     });
 
     it('As LU I can stop importing passwords with the keyboard (escape)', async() => {
+      expect.assertions(1);
       await page.escapeKey();
       expect(props.onClose).toBeCalled();
     });
 
     it('As LU I should see an error dialog if the submit operation fails for an unexpected reason', async() => {
+      expect.assertions(1);
       const file = new File(['test'], 'keyfile.txt', {type: 'txt'});
       await page.fillPassword("test");
       await page.selectUnlockKeypassFile(file);
       // Mock the request function to make it return an error.
+      const error = new PassboltApiFetchError("Jest simulate API error.");
       jest.spyOn(context.port, 'request').mockImplementationOnce(() => {
-        throw new PassboltApiFetchError("Jest simulate API error.");
+        throw error;
       });
 
       await page.selectContinueImport();
       await waitFor(() => {});
 
       // Throw dialog general error message
-      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError);
+      expect(props.dialogContext.open).toHaveBeenCalledWith(NotifyError, {error: error});
     });
   });
 });

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

@@ -12,7 +12,8 @@ export default {
 const context = {
   siteSettings: {
     canIUse: () => true
-  }
+  },
+  setContext: () => {}
 };
 
 
@@ -25,3 +26,10 @@ const Template = args =>
 
 
 export const Initial = Template.bind({});
+Initial.args = {
+  onClose: () => {},
+  resourceWorkspaceContext: {
+    onResourceFileToImport: () => {},
+    resourceFileToImport: "test"
+  }
+};

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

@@ -262,6 +262,8 @@ class ImportResourcesResult extends Component {
    * Render the component
    */
   render() {
+    const createAndErrorResourcesCount = this.resultCreatedResourcesCount + this.resultErrorsResources.length;
+    const createAndErrorFoldersCount = this.resultCreatedFoldersCount + this.resultErrorsFolders.length;
     return (
       <DialogWrapper
         title={this.resultHasErrors ? this.translate("Something went wrong!") : this.translate("Import success!")}
@@ -277,7 +279,7 @@ class ImportResourcesResult extends Component {
             <>
               <p className="error inline-error"><Trans>There was an issue while importing passwords:</Trans></p>
               <p>
-                <Trans count={this.resultCreatedResourcesCount + this.resultErrorsResources.length}>
+                <Trans count={createAndErrorResourcesCount}>
                   <strong>{{numberResourceSuccess: this.resultCreatedResourcesCount}} out of {{count: this.resultCreatedResourcesCount + this.resultErrorsResources.length}}</strong> password has been imported.
                 </Trans>
               </p>
@@ -292,7 +294,7 @@ class ImportResourcesResult extends Component {
             <>
               <p className="error inline-error"><Trans>There was an issue while importing folders:</Trans></p>
               <p>
-                <Trans count={this.resultCreatedFoldersCount + this.resultErrorsFolders.length}>
+                <Trans count={createAndErrorFoldersCount}>
                   <strong>{{numberFolderSuccess: this.resultCreatedFoldersCount}} out of {{count: this.resultCreatedFoldersCount + this.resultErrorsFolders.length}}</strong> folder has been imported.
                 </Trans>
               </p>

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

@@ -33,5 +33,23 @@ Initial.args = {
         resourcesCount: 15
       }
     }
-  }
+  },
+  onClose: () => {}
+};
+
+export const ImportWithErrors = Template.bind({});
+ImportWithErrors.args = {
+  resourceWorkspaceContext: {
+    resourceFileImportResult: {
+      created: {
+        foldersCount: 10,
+        resourcesCount: 15
+      },
+      errors: {
+        resources: ["Example of resource import error", "Example of resource import error"],
+        folders: ["Example of folder import error", "Example of folder import error"]
+      }
+    }
+  },
+  onClose: () => {}
 };

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

@@ -1,6 +1,7 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
 import AppContext from "../../../contexts/AppContext";
+import MockPort from "../../../test/mock/MockPort";
 import AddResourceComment from "./AddResourceComment";
 
 
@@ -14,15 +15,19 @@ const context = {
     canIUse: () => true,
     settings: {
       app: {
-        url: 'some url'
+        url: (new URL(window.location.href)).origin
       }
     }
-  }
+  },
+  loggedInUser: {
+
+  },
+  port: new MockPort()
 };
 
 
 const Template = args =>
-  <AppContext.Provider value={context}>
+  <AppContext.Provider value={args.context}>
     <MemoryRouter initialEntries={['/']}>
       <div className="panel aside">
         <div className="comments">
@@ -34,3 +39,10 @@ const Template = args =>
 
 
 export const Initial = Template.bind({});
+Initial.args = {
+  context: context,
+  resource: {
+    id: "test"
+  },
+  onAdd: () => {}
+};

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

@@ -14,15 +14,16 @@ const context = {
     canIUse: () => true,
     settings: {
       app: {
-        url: 'some url'
+        url: (new URL(window.location.href)).origin
       }
     }
-  }
+  },
+  setContext: () => {},
 };
 
 
 const Template = args =>
-  <AppContext.Provider value={context}>
+  <AppContext.Provider value={args.context}>
     <MemoryRouter initialEntries={['/']}>
       <Route component={routerProps => <ConfirmResourceCommentDeletion {...args} {...routerProps}/>}></Route>
     </MemoryRouter>
@@ -30,3 +31,7 @@ const Template = args =>
 
 
 export const Initial = Template.bind({});
+Initial.args = {
+  context: context,
+  onClose: () => {},
+};

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

@@ -14,7 +14,7 @@ const context = {
     canIUse: () => true,
     settings: {
       app: {
-        url: 'some url'
+        url: (new URL(window.location.href)).origin
       }
     },
   },
@@ -45,17 +45,17 @@ const context = {
       foreign_key: "f302754f-f290-42a6-9ea3-7049c6d4dbe3",
       foreign_model: "Resource",
       id: "9e56b21f-36f1-44a7-a363-1c6ccbbf09e2",
-      modified: "2020-09-01T13:13:19+00:00",
+      modified: "2020-09-02T13:13:19+00:00",
       modified_by: "5247399c-6c8a-47f0-8880-aa854e01e554",
       parent_id: null,
       user_id: "5247399c-6c8a-47f0-8880-aa854e01e554",
     }, {
       children: [],
       content: "This is another comment",
-      created: "2020-09-01T13:13:19+00:00",
-      created_by: "5247399c-6c8a-47f0-8880-aa854e01e554",
+      created: "2021-09-01T13:13:19+00:00",
+      created_by: "5247399c-6c8a-47f0-8880-aa854e01e555",
       creator: {
-        id: "5247399c-6c8a-47f0-8880-aa854e01e554",
+        id: "5247399c-6c8a-47f0-8880-aa854e01e555",
         role_id: "c4870358-e32f-41ce-999b-8f80c9b0d17f",
         active: true,
         deleted: false,
@@ -83,9 +83,9 @@ const context = {
       children: [],
       content: "This is a third comment",
       created: "2020-08-25T13:13:19+00:00",
-      created_by: "5247399c-6c8a-47f0-8880-aa854e01e554",
+      created_by: "5247399c-6c8a-47f0-8880-aa854e01e556",
       creator: {
-        id: "5247399c-6c8a-47f0-8880-aa854e01e554",
+        id: "5247399c-6c8a-47f0-8880-aa854e01e556",
         role_id: "c4870358-e32f-41ce-999b-8f80c9b0d17f",
         active: true,
         deleted: false,
@@ -113,7 +113,8 @@ const context = {
   },
   loggedInUser: {
     id: "5247399c-6c8a-47f0-8880-aa854e01e554"
-  }
+  },
+  setContext: () => {}
 };
 
 

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

@@ -6,6 +6,7 @@ import SiteSettings from "../../../../shared/lib/Settings/SiteSettings";
 import siteSettingsFixture from "../../../test/fixture/Settings/siteSettings";
 import ResourceTypesSettings from "../../../../shared/lib/Settings/ResourceTypesSettings";
 import resourceTypesFixture from "../../../test/fixture/ResourceTypes/resourceTypes";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -21,11 +22,12 @@ const context = {
     canIUse: () => true,
     settings: {
       app: {
-        url: 'some url'
+        url: (new URL(window.location.href)).origin
       }
     }
   },
-  resourceTypesSettings
+  resourceTypesSettings,
+  port: new MockPort()
 };
 
 
@@ -45,5 +47,6 @@ export const Initial = Template.bind({});
 Initial.args = {
   resource: {
     "resource_type_id": "669f8c64-242a-59fb-92fc-81f660975fd3"
-  }
+  },
+  onClose: () => {}
 };

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

@@ -37,7 +37,7 @@ const Template = args =>
   <TranslationProvider loadingPath="/data/locales/{{lng}}/{{ns}}.json">
     <AppContext.Provider value={context}>
       <MemoryRouter initialEntries={['/']}>
-        <div className="panel">
+        <div className="panel aside">
           <Route component={routerProps => <DisplayResourceDetailsActivity {...args} {...routerProps}/>}></Route>
         </div>
       </MemoryRouter>

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

@@ -26,7 +26,7 @@ const Template = args =>
   <TranslationProvider loadingPath="/data/locales/{{lng}}/{{ns}}.json">
     <AppContext.Provider value={context}>
       <MemoryRouter initialEntries={['/']}>
-        <div className="panel">
+        <div className="panel aside">
           <Route component={routerProps => <DisplayResourceDetailsDescription {...args} {...routerProps}/>}></Route>
         </div>
       </MemoryRouter>

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

@@ -1,6 +1,7 @@
 import SiteSettings from "../../../../shared/lib/Settings/SiteSettings";
 import siteSettingsFixture from "../../../test/fixture/Settings/siteSettings";
 import MockPort from "../../../test/mock/MockPort";
+import {DateTime} from "luxon";
 
 /**
  * Returns the default app context for the unit test
@@ -16,6 +17,16 @@ export function defaultAppContext(appContext) {
   return Object.assign(defaultAppContext, appContext || {});
 }
 
+/**
+ * Format date in time ago
+ * @param {string} date The date to format
+ * @return {string}
+ */
+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();
+}
 
 /**
  * Default props

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

@@ -47,10 +47,9 @@ describe("See information", () => {
     it('I should see the information of a resource', async() => {
       page = new DisplayResourceDetailsInformationPage(context, props);
       await waitFor(() => {});
+      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() => {
@@ -59,6 +58,7 @@ describe("See information", () => {
 
       const modificationDate = DateTime.fromISO(props.resourceWorkspaceContext.details.resource.modified).toRelative();
       const creationDate = DateTime.fromISO(props.resourceWorkspaceContext.details.resource.created).toRelative();
+      expect.assertions(16);
       expect(page.displayInformationList.usernameLabel).toBe('Username');
       expect(page.displayInformationList.username.textContent).toBe(props.resourceWorkspaceContext.details.resource.username);
       expect(page.displayInformationList.passwordLabel).toBe('Password');
@@ -75,7 +75,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(" root");
-      await page.displayInformationList.click(page.displayInformationList.location);
     });
 
     it('AS LU, I should be able to copy the username of a resource to clipboard', async() => {
@@ -85,6 +84,8 @@ describe("See information", () => {
       jest.spyOn(ActionFeedbackContext._currentValue, 'displaySuccess').mockImplementation(() => {});
 
       await page.displayInformationList.click(page.displayInformationList.username);
+
+      expect.assertions(2);
       expect(context.port.request).toHaveBeenCalledWith("passbolt.clipboard.copy", props.resourceWorkspaceContext.details.resource.username);
       expect(ActionFeedbackContext._currentValue.displaySuccess).toHaveBeenCalledWith("The username has been copied to clipboard");
     });
@@ -96,6 +97,8 @@ describe("See information", () => {
       jest.spyOn(ActionFeedbackContext._currentValue, 'displaySuccess').mockImplementation(() => {});
 
       await page.displayInformationList.click(page.displayInformationList.password);
+
+      expect.assertions(2);
       expect(context.port.request).toHaveBeenCalledWith("passbolt.secret.decrypt", props.resourceWorkspaceContext.details.resource.id, {"showProgress": true});
       expect(ActionFeedbackContext._currentValue.displaySuccess).toHaveBeenCalledWith("The secret has been copied to clipboard");
     });
@@ -105,6 +108,8 @@ describe("See information", () => {
       await waitFor(() => {});
       mockContextRequest(() => 'secret-copy');
       jest.spyOn(ActionFeedbackContext._currentValue, 'displaySuccess').mockImplementationOnce(() => {});
+
+      expect.assertions(3);
       await page.displayInformationList.click(page.displayInformationList.viewPassword);
       expect(page.displayInformationList.password.textContent).toBe('secret-copy');
       expect(context.port.request).toHaveBeenCalledWith('passbolt.secret.decrypt', props.resourceWorkspaceContext.details.resource.id, {showProgress: true});
@@ -121,7 +126,9 @@ describe("See information", () => {
       };
       page = new DisplayResourceDetailsInformationPage(defaultAppContext(appContext), props);
       await waitFor(() => {});
-      await expect(page.displayInformationList.isViewPasswordExist).toBeFalsy();
+
+      expect.assertions(1);
+      expect(page.displayInformationList.isViewPasswordExist).toBeFalsy();
     });
   });
 });

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

@@ -5,6 +5,7 @@ import UserSettings from "../../../../shared/lib/Settings/UserSettings";
 import userSettingsFixture from "../../../test/fixture/Settings/userSettings";
 import DisplayResourceDetailsTag from "./DisplayResourceDetailsTag";
 import TranslationProvider from "../../Common/Internationalisation/TranslationProvider";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -12,21 +13,26 @@ export default {
   component: DisplayResourceDetailsTag
 };
 
+const tags = [{
+  id: 1,
+  slug: 'apache'
+}];
+const mockedPort = new MockPort();
+mockedPort.addRequestListener("passbolt.tags.find-all", () => tags);
+
 const context = {
   siteSettings: {
     getServerTimezone: () => new Date().toDateString()
   },
   userSettings: new UserSettings(userSettingsFixture),
-  port: {
-    request: () => "A resource description"
-  }
+  port: mockedPort
 };
 
 const Template = args =>
   <TranslationProvider loadingPath="/data/locales/{{lng}}/{{ns}}.json">
     <AppContext.Provider value={context}>
       <MemoryRouter initialEntries={['/']}>
-        <div className="panel">
+        <div className="panel aside">
           <Route component={routerProps => <DisplayResourceDetailsTag {...args} {...routerProps}/>}></Route>
         </div>
       </MemoryRouter>
@@ -41,12 +47,7 @@ DecryptedDescription.args = {
         permission: {
           type: 15
         },
-        tags: [
-          {
-            id: 1,
-            slug: 'apache'
-          }
-        ]
+        tags: tags
       }
     }
   }

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

@@ -171,11 +171,9 @@ class CreateResourceFolder 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);
   }
 
   /**