passbolt-styleguide 3.5.3 → 3.6.0-beta1

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

@@ -20,11 +20,11 @@ import {withDialog} from "../../../contexts/DialogContext";
 import DialogWrapper from "../../Common/Dialog/DialogWrapper/DialogWrapper";
 import FormSubmitButton from "../../Common/Inputs/FormSubmitButton/FormSubmitButton";
 import FormCancelButton from "../../Common/Inputs/FormSubmitButton/FormCancelButton";
-import Icon from "../../Common/Icons/Icon";
 import {withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
 import ImportResourcesResult from "./ImportResourcesResult";
 import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 import {Trans, withTranslation} from "react-i18next";
+import Password from "../../../../shared/components/Password/Password";
 
 /**
  * This component is the second step of the import dialog when the file to import is KDB(X) file
@@ -49,7 +49,7 @@ class ImportResourcesKeyUnlock extends Component {
       // Dialog states
       processing: false,
 
-      showPassword: false, // True if the password should be textually displayed
+      password: '', // The current password
       keyFile: null, // The optional key file
       errors: {} // The import errors
     };
@@ -61,7 +61,7 @@ class ImportResourcesKeyUnlock extends Component {
   bindHandlers() {
     this.handleSelectFile = this.handleSelectFile.bind(this);
     this.handleFileSelected = this.handleFileSelected.bind(this);
-    this.handlePasswordViewToggled = this.handlePasswordViewToggled.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
     this.handleCancel = this.handleCancel.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
@@ -88,13 +88,6 @@ class ImportResourcesKeyUnlock extends Component {
     return this.props.resourceWorkspaceContext.resourceFileToImport;
   }
 
-  /**
-   * Handle the password view mode toggle
-   */
-  async handlePasswordViewToggled() {
-    await this.setState({showPassword: !this.state.showPassword});
-  }
-
   /**
    * Handle the selection of a file by file explorer
    */
@@ -111,6 +104,20 @@ class ImportResourcesKeyUnlock extends Component {
     await this.setState({keyFile});
   }
 
+  /**
+   * Handle input change
+   * @param event
+   */
+  handleInputChange(event) {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+
+    this.setState({
+      [name]: value
+    });
+  }
+
   /**
    * Handle the cancellation of the import
    */
@@ -162,7 +169,7 @@ class ImportResourcesKeyUnlock extends Component {
     const resourceFileToImport = this.fileToImport;
     const b64FileContent = resourceFileToImport.b64FileContent;
     const fileType = resourceFileToImport.fileType;
-    const password = this.passwordInputRef.current.value;
+    const password = this.state.password;
     const keyfile = await this.readFile();
     const options = Object.assign({}, resourceFileToImport.options, {credentials: {password, keyfile}});
 
@@ -198,7 +205,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 +215,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);
     }
   }
 
@@ -268,63 +273,57 @@ class ImportResourcesKeyUnlock extends Component {
 
           <div className="form-content">
 
-            <div className="input-password-wrapper">
+            <div className="input-password-wrapper input">
               <label htmlFor="import-password-dialog-password"><Trans>Keepass password</Trans></label>
-              <div className="input password">
-                <input
-                  id="import-password-dialog-password"
-                  type={this.state.showPassword ? "text" : "password"}
-                  disabled={this.hasAllInputDisabled()}
-                  placeholder={this.translate('Passphrase')}
-                  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>
+              <Password
+                id="import-password-dialog-password"
+                name="password"
+                autoComplete="off"
+                value={this.state.password}
+                onChange={this.handleInputChange}
+                disabled={this.hasAllInputDisabled()}
+                placeholder={this.translate('Passphrase')}
+                preview={true}
+                inputRef={this.passwordInputRef}/>
             </div>
 
-            <div className="input-file-chooser-wrapper">
+            <div className={`input file ${this.hasAllInputDisabled() ? "disabled" : ""}`}>
               <input
                 type="file"
+                id="dialog-import-passwords"
                 ref={this.fileUploaderRef}
                 onChange={this.handleFileSelected}/>
-              <div className="input text">
-                <label><Trans>Keepass key file (optional)</Trans></label>
-                <div className="input-file-inline">
-                  <input
-                    type="text"
-                    placeholder={this.translate('No key file selected')}
-                    disabled
-                    value={this.selectedFilename}/>
-                  <a
-                    className={`button primary ${this.hasAllInputDisabled() ? "disabled" : ""}`}
-                    onClick={this.handleSelectFile}>
-                    <Icon name="upload-a"/>
-                    <span><Trans>Choose a file</Trans></span>
-                  </a>
-                </div>
+              <label htmlFor="dialog-import-passwords"><Trans>Keepass key file (optional)</Trans></label>
+              <div className="input-file-inline">
+                <input
+                  type="text"
+                  placeholder={this.translate('No key file selected')}
+                  disabled
+                  value={this.selectedFilename}/>
+                <button
+                  className="button primary"
+                  type="button"
+                  disabled={this.hasAllInputDisabled()}
+                  onClick={this.handleSelectFile}>
+                  <span><Trans>Choose a file</Trans></span>
+                </button>
               </div>
+              {isInvalidPasswordOrKeyFile &&
+                <div className="error-message">
+                  <Trans>Cannot decrypt the file, invalid credentials.</Trans>
+                </div>
+              }
             </div>
-
-            {isInvalidPasswordOrKeyFile &&
-            <div className="message ready error">
-              <Trans>Cannot decrypt the file, invalid credentials.</Trans>
-            </div>
-            }
           </div>
 
           <div className="submit-wrapper clearfix">
+            <FormCancelButton
+              disabled={this.hasAllInputDisabled()}
+              onClick={this.handleCancel}/>
             <FormSubmitButton
               value={this.translate("Continue import")}
               disabled={this.hasAllInputDisabled()}
               processing={this.state.processing}/>
-            <FormCancelButton
-              disabled={this.hasAllInputDisabled()}
-              onClick={this.handleCancel}/>
           </div>
         </form>
       </DialogWrapper>

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'});
@@ -82,7 +83,7 @@ describe("As LU I should see the password unlock Keypass dialog", () => {
 
       // API calls are made on submit, wait they are resolved.
       await waitFor(() => {
-        expect(page.importFile.className).toBe("button primary disabled");
+        expect(page.importFile.getAttribute("disabled")).not.toBeNull();
         expect(page.password.getAttribute("disabled")).not.toBeNull();
         expect(page.continueImportButton.getAttribute("disabled")).not.toBeNull();
         expect(page.continueImportButton.className).toBe("button primary disabled processing");
@@ -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.page.js

@@ -68,14 +68,14 @@ export default class ImportResourcesKeyUnlockPage {
    * Returns the import folder input element
    */
   get importFile() {
-    return this._page.container.querySelector('.input.text a.button.primary');
+    return this._page.container.querySelector('.input.file button.button.primary');
   }
 
   /**
    * Returns the error mesage input element
    */
   get errorMessage() {
-    return this._page.container.querySelector('.message.ready.error').textContent;
+    return this._page.container.querySelector('.error-message').textContent;
   }
 
   /**
@@ -96,7 +96,7 @@ export default class ImportResourcesKeyUnlockPage {
    * Returns the save button element
    */
   get continueImportButton() {
-    return this._page.container.querySelector('.submit-wrapper input[type=\"submit\"]');
+    return this._page.container.querySelector('.submit-wrapper button[type=\"submit\"]');
   }
 
   /**

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

@@ -20,7 +20,7 @@ import {ResourceWorkspaceFilterTypes, withResourceWorkspace} from "../../../cont
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import DialogWrapper from "../../Common/Dialog/DialogWrapper/DialogWrapper";
 import FormSubmitButton from "../../Common/Inputs/FormSubmitButton/FormSubmitButton";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import {Trans, withTranslation} from "react-i18next";
 
 /**
@@ -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>
@@ -317,7 +319,7 @@ class ImportResourcesResult extends Component {
               <div className="accordion-header">
                 <a onClick={this.handleErrorDetailsToggle}>
                   <Trans>Error details</Trans>
-                  <Icon baseline={true} name={this.state.showErrorDetails ? "caret-up" : "caret-down"}/>
+                  <Icon name={this.state.showErrorDetails ? "caret-up" : "caret-down"}/>
                 </a>
               </div>
               {this.state.showErrorDetails &&

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

@@ -99,7 +99,7 @@ export default class ImportResourcesResultPage {
    * Returns the save button element
    */
   get saveButton() {
-    return this._page.container.querySelector('.submit-wrapper input[type=\"submit\"]');
+    return this._page.container.querySelector('.submit-wrapper button[type=\"submit\"]');
   }
 
   /**

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.js

@@ -230,13 +230,6 @@ class AddResourceComment extends React.Component {
                 <span className="modified"><Trans>right now</Trans></span>
               </div>
               <div className="actions">
-                <button
-                  className="button comment-submit"
-                  type="submit"
-                  onClick={this.handleSubmitEvent}
-                  disabled={this.state.actions.processing}>
-                  <Trans>Save</Trans>
-                </button>
                 {
                   this.props.cancellable &&
                   <button
@@ -248,6 +241,13 @@ class AddResourceComment extends React.Component {
                     <span><Trans>Cancel</Trans></span>
                   </button>
                 }
+                <button
+                  className="button primary comment-submit"
+                  type="submit"
+                  onClick={this.handleSubmitEvent}
+                  disabled={this.state.actions.processing}>
+                  <Trans>Save</Trans>
+                </button>
               </div>
             </div>
           </div>

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.js

@@ -132,14 +132,14 @@ class ConfirmDeleteDialog extends Component {
               <p><Trans>Warning: Once the comment is deleted, it’ll be removed permanently and will not be recoverable.</Trans></p>
             </div>
             <div className="submit-wrapper clearfix">
+              <FormCancelButton
+                disabled={this.state.actions.processing}
+                onClick={this.handleClose} />
               <FormSubmitButton
                 disabled={this.state.actions.processing}
                 processing={this.state.processing}
                 value={this.translate("Delete")}
                 warning={true}/>
-              <FormCancelButton
-                disabled={this.state.actions.processing}
-                onClick={this.handleClose} />
             </div>
           </form>
         </DialogWrapper>

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/DeleteResourceComment/DeleteComment.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import {withAppContext} from "../../../contexts/AppContext";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import PropTypes from "prop-types";
 import {withDialog} from "../../../contexts/DialogContext";
 import ConfirmResourceCommentDeletion from "../ConfirmResourceCommentDeletion/ConfirmResourceCommentDeletion";
@@ -49,7 +49,7 @@ class DeleteComment extends React.Component {
 
   render() {
     return (
-      <a className="delete-comment" onClick={this.delete}>
+      <a className="delete-comment button button-transparent" onClick={this.delete}>
         <span className="svg-icon">
           <Icon name="trash"/>
         </span>

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

@@ -19,6 +19,7 @@ import UserAvatar from "../../Common/Avatar/UserAvatar";
 import DeleteComment from "../DeleteResourceComment/DeleteComment";
 import {Trans, withTranslation} from "react-i18next";
 import {DateTime} from "luxon";
+import Icon from "../../../../shared/components/Icons/Icon";
 
 class DisplayResourceCommentList extends React.Component {
   /**
@@ -186,6 +187,7 @@ class DisplayResourceCommentList extends React.Component {
         }
         {this.state.actions.loading &&
         <div className="processing-wrapper">
+          <Icon name="spinner"/>
           <span className="processing-text"><Trans>Retrieving comments</Trans></span>
         </div>
         }

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: () => {}
 };