passbolt-styleguide 3.7.3 → 3.7.4-alpha1

package/src/react-extension/components/Authentication/DisplayBrowserNotSupported/DisplayBrowserNotSupported.test.page.js

@@ -12,7 +12,7 @@
  * @since         2.11.0
  */
 
-import {render} from "@testing-library/react";
+import {fireEvent, render, waitFor} from "@testing-library/react";
 import React from "react";
 import DisplayBrowserNotSupported from "./DisplayBrowserNotSupported";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
@@ -47,24 +47,27 @@ export default class DisplayBrowserNotSupportedPage {
   }
 
   /**
-   * Returns the download firefox button
+   * Returns the download button
    */
-  get downloadFirefox() {
-    return this._page.container.querySelectorAll('.browser-not-supported .form-actions .button.primary.big')[0].textContent;
+  get downloadButton() {
+    return this._page.container.querySelector('.browser-not-supported .form-actions .button.primary.big').textContent;
   }
 
   /**
-   * Returns the download firefox button
+   * Returns the current link on the download button
    */
-  get downloadChrome() {
-    return this._page.container.querySelectorAll('.browser-not-supported .form-actions a')[1].textContent;
+  get downloadLink() {
+    return this._page.container.querySelector('.browser-not-supported .form-actions .button.primary.big').getAttribute('href');
   }
 
   /**
-   * Returns the link why browser not supported
+   * Simulate a click on the desired button from the browser button list.
+   * @param {number} buttonIndex
    */
-  get link() {
-    return this._page.container.querySelectorAll('.browser-not-supported .form-actions a')[2].textContent;
+  async clickOnBrowserButton(buttonIndex) {
+    const button = this._page.container.querySelectorAll('.browser-not-supported .browser-button-list button')[buttonIndex];
+    fireEvent.click(button, {button: 0});
+    await waitFor(() => {});
   }
 
   /**

package/src/react-extension/components/AuthenticationLogin/AcceptLoginServerKeyChange/AcceptLoginServerKeyChange.js

@@ -157,9 +157,6 @@ class AcceptLoginServerKeyChange extends Component {
             <label htmlFor="accept-new-key">
               <Trans>Yes I checked and it is all fine.</Trans>
             </label>
-            {this.state.hasBeenValidated && this.state.errors.hasNotAccepted &&
-            <div className="has-not-accepted error-message"><Trans>You must accept the new server key</Trans></div>
-            }
           </div>
           <div className="form-actions">
             <button

package/src/react-extension/components/AuthenticationLogin/AcceptLoginServerKeyChange/AcceptLoginServerKeyChange.test.js

@@ -47,6 +47,6 @@ describe("AcceptLoginServerKeyChange", () => {
     expect.assertions(2);
     await page.accept();
     expect(props.onAccept).not.toHaveBeenCalled();
-    expect(page.checkedInputErrorMessage).toBe("You must accept the new server key");
+    expect(page.inputContainer.className).toBe("input checkbox error");
   });
 });

package/src/react-extension/components/AuthenticationLogin/AcceptLoginServerKeyChange/AcceptLoginServerKeyChange.test.page.js

@@ -41,17 +41,17 @@ export default class AcceptLoginServerKeyChangePage {
   }
 
   /**
-   * Returns the check input
+   * Returns the input container
    */
-  get checkedInput() {
-    return this._page.container.querySelector('#accept-new-key');
+  get inputContainer() {
+    return this._page.container.querySelector('.input.checkbox');
   }
 
   /**
-   * Returns the checked input error message
+   * Returns the check input
    */
-  get checkedInputErrorMessage() {
-    return this._page.container.querySelector(".has-not-accepted.error-message")?.textContent;
+  get checkedInput() {
+    return this._page.container.querySelector('#accept-new-key');
   }
 
   /**

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

@@ -536,7 +536,9 @@ class DisplayResourcesList extends React.Component {
 
     return (
       <tr id={`resource_${resource.id}`} key={key} draggable="true" className={isSelected ? "selected" : ""}
+        /* eslint-disable react/no-unknown-property */
         unselectable={this.state.selectStrategy === "range" ? "on" : ""}
+        /* eslint-enable react/no-unknown-property */
         onClick={ev => this.handleResourceSelected(ev, resource)}
         onContextMenu={ev => this.handleResourceRightClick(ev, resource)}
         onDragStart={event => this.handleDragStartEvent(event, resource)}

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

@@ -387,7 +387,7 @@ class DisplayResourceDetailsInformation extends React.Component {
           </li>
           <li className="modified">
             <span className="label"><Trans>Modified</Trans></span>
-            <span className="value">{modifiedDateTimeAgo}</span>
+            <span className="value" title={this.resource.modified}>{modifiedDateTimeAgo}</span>
           </li>
           <li className="modified-by">
             <span className="label"><Trans>Modified by</Trans></span>
@@ -395,7 +395,7 @@ class DisplayResourceDetailsInformation extends React.Component {
           </li>
           <li className="modified">
             <span className="label"><Trans>Created</Trans></span>
-            <span className="value">{createdDateTimeAgo}</span>
+            <span className="value" title={this.resource.created}>{createdDateTimeAgo}</span>
           </li>
           <li className="modified-by">
             <span className="label"><Trans>Created by</Trans></span>

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

@@ -56,9 +56,11 @@ describe("See information", () => {
       page = new DisplayResourceDetailsInformationPage(context, props);
       await waitFor(() => {});
 
-      const modificationDate = DateTime.fromISO(props.resourceWorkspaceContext.details.resource.modified).toRelative();
-      const creationDate = DateTime.fromISO(props.resourceWorkspaceContext.details.resource.created).toRelative();
-      expect.assertions(16);
+      const absoluteModificationDate = props.resourceWorkspaceContext.details.resource.modified;
+      const modificationDate = DateTime.fromISO(absoluteModificationDate).toRelative();
+      const absoluteCreationDate = props.resourceWorkspaceContext.details.resource.created;
+      const creationDate = DateTime.fromISO(absoluteCreationDate).toRelative();
+      expect.assertions(18);
       expect(page.displayInformationList.usernameLabel).toBe('Username');
       expect(page.displayInformationList.username.textContent).toBe(props.resourceWorkspaceContext.details.resource.username);
       expect(page.displayInformationList.passwordLabel).toBe('Password');
@@ -67,10 +69,12 @@ describe("See information", () => {
       expect(page.displayInformationList.uri.textContent).toBe(props.resourceWorkspaceContext.details.resource.uri);
       expect(page.displayInformationList.modifiedLabel(1)).toBe('Modified');
       expect(page.displayInformationList.modified(1).textContent).toBe(modificationDate);
+      expect(page.displayInformationList.modified(1).getAttribute("title")).toBe(absoluteModificationDate);
       expect(page.displayInformationList.modifiedByLabel(1)).toBe('Modified by');
       expect(page.displayInformationList.modifiedBy(1).textContent).toBe('ada@passbolt.com');
       expect(page.displayInformationList.modifiedLabel(2)).toBe('Created');
       expect(page.displayInformationList.modified(2).textContent).toBe(creationDate);
+      expect(page.displayInformationList.modified(2).getAttribute("title")).toBe(absoluteCreationDate);
       expect(page.displayInformationList.modifiedByLabel(2)).toBe('Created by');
       expect(page.displayInformationList.modifiedBy(2).textContent).toBe('ada@passbolt.com');
       expect(page.displayInformationList.locationLabel).toBe('Location');

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

@@ -246,8 +246,8 @@ class CreateResourceFolder extends Component {
     if (!name.length) {
       nameError = this.translate("A name is required.");
     }
-    if (name.length > 64) {
-      nameError = this.translate("A name can not be more than 64 char in length.");
+    if (name.length > 256) {
+      nameError = this.translate("A name can not be more than 256 char in length.");
     }
     return new Promise(resolve => {
       this.setState({nameError: nameError}, resolve);
@@ -293,7 +293,7 @@ class CreateResourceFolder extends Component {
               <input id="folder-name-input" name="name"
                 ref={this.nameRef}
                 type="text" value={this.state.name} placeholder={this.translate("Untitled folder")}
-                maxLength="64" required="required"
+                maxLength="256" required="required"
                 disabled={this.hasAllInputDisabled()}
                 onChange={this.handleInputChange}
                 autoComplete='off' autoFocus={true}

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

@@ -78,9 +78,9 @@ describe("Create Folder", () => {
       expect(page.hasInvalidName).toBeTruthy();
     });
 
-    it('AS LU I should not fill a folder name longer than 64 characters', async() => {
+    it('AS LU I should not fill a folder name longer than 256 characters', async() => {
       expect.assertions(1);
-      await page.create({name: '1111111111 1111111111 1111111111 1111111111 1111111111 1111111111 1111'});
+      await page.create({name: '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111'});
       expect(page.hasInvalidName).toBeTruthy();
     });
   });

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

@@ -276,8 +276,8 @@ class RenameResourceFolder extends Component {
     if (!name.length) {
       nameError = this.translate("A name is required.");
     }
-    if (name.length > 64) {
-      nameError = this.translate("A name can not be more than 64 char in length.");
+    if (name.length > 256) {
+      nameError = this.translate("A name can not be more than 256 char in length.");
     }
     return new Promise(resolve => {
       this.setState({nameError: nameError}, resolve);
@@ -323,7 +323,7 @@ class RenameResourceFolder extends Component {
               <input id="folder-name-input" name="name"
                 ref={this.nameRef}
                 type="text" value={this.state.name} placeholder={this.translate("Untitled folder")}
-                maxLength="64" required="required"
+                maxLength="256" required="required"
                 onChange={this.handleInputChange}
                 disabled={this.hasAllInputDisabled()}
                 autoComplete="off" autoFocus={true}

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

@@ -78,9 +78,9 @@ describe("Rename Folder", () => {
       expect(page.hasInvalidName).toBeTruthy();
     });
 
-    it('AS LU I should not fill a folder name longer than 64 characters', async() => {
+    it('AS LU I should not fill a folder name longer than 256 characters', async() => {
       expect.assertions(1);
-      await page.rename({name: '1111111111 1111111111 1111111111 1111111111 1111111111 1111111111 1111'});
+      await page.rename({name: '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111'});
       expect(page.hasInvalidName).toBeTruthy();
     });
   });

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

@@ -155,7 +155,7 @@ class DisplayResourceFolderDetailsInformation extends React.Component {
             </li>
             <li className="modified">
               <span className="label"><Trans>Modified</Trans></span>
-              <span className="value">{modifiedDateTimeAgo}</span>
+              <span className="value" title={this.folder.modified}>{modifiedDateTimeAgo}</span>
             </li>
             <li className="modified-by">
               <span className="label"><Trans>Modified by</Trans></span>
@@ -163,7 +163,7 @@ class DisplayResourceFolderDetailsInformation extends React.Component {
             </li>
             <li className="modified">
               <span className="label"><Trans>Created</Trans></span>
-              <span className="value">{createdDateTimeAgo}</span>
+              <span className="value" title={this.folder.created}>{createdDateTimeAgo}</span>
             </li>
             <li className="modified-by">
               <span className="label"><Trans>Created by</Trans></span>

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

@@ -57,16 +57,17 @@ describe("See information", () => {
     it('I should be able to identify each information name', async() => {
       mockContextRequest(copyClipboardMockImpl);
       jest.spyOn(ActionFeedbackContext._currentValue, 'displaySuccess').mockImplementation(() => {});
-
-      expect.assertions(12);
+      expect.assertions(14);
       expect(page.displayInformationList.usernameLabel).toBe('Name');
       expect(page.displayInformationList.username.textContent).toBe(props.resourceWorkspaceContext.details.folder.name);
       expect(page.displayInformationList.modifiedLabel(1)).toBe('Modified');
       expect(page.displayInformationList.modified(1).textContent).toContain('ago');
+      expect(page.displayInformationList.modified(1).getAttribute("title")).toBe('2020-02-01T00:00:00+00:00');
       expect(page.displayInformationList.modifiedByLabel(1)).toBe('Modified by');
       expect(page.displayInformationList.modifiedBy(1).textContent).toBe('ada@passbolt.com');
       expect(page.displayInformationList.modifiedLabel(2)).toBe('Created');
       expect(page.displayInformationList.modified(2).textContent).toContain('ago');
+      expect(page.displayInformationList.modified(2).getAttribute("title")).toBe('2020-02-01T00:00:00+00:00');
       expect(page.displayInformationList.modifiedByLabel(2)).toBe('Created by');
       expect(page.displayInformationList.modifiedBy(2).textContent).toBe('ada@passbolt.com');
       expect(page.displayInformationList.locationLabel).toBe('Location');

package/src/react-extension/components/UserDetails/DisplayUserDetailsInformation/DisplayUserDetailsInformation.js

@@ -158,7 +158,7 @@ class DisplayUserDetailsInformation extends React.Component {
             </li>
             <li className="modified">
               <span className="label"><Trans>Modified</Trans></span>
-              <span className="value">{modified}</span>
+              <span className="value" title={this.user.modified}>{modified}</span>
             </li>
             <li className="status">
               <span className="label"><Trans>Status</Trans></span>

package/src/react-extension/components/UserGroup/DisplayUserGroupDetailsInformation/DisplayUserGroupDetailsInformation.js

@@ -107,11 +107,11 @@ class DisplayUserGroupDetailsInformation extends React.Component {
           <ul>
             <li className="created">
               <span className="label"><Trans>Created</Trans></span>
-              <span className="value">{created}</span>
+              <span className="value" title={this.group.created}>{created}</span>
             </li>
             <li className="modified">
               <span className="label"><Trans>Modified</Trans></span>
-              <span className="value">{modified}</span>
+              <span className="value" title={this.group.modified}>{modified}</span>
             </li>
             <li className="modified-by">
               <span className="label"><Trans>Modified by</Trans></span>

package/src/react-extension/components/UserSetting/ChangeUserPassphrase/EnterNewPassphrase.js

@@ -274,6 +274,7 @@ class EnterNewPassphrase extends React.Component {
   }
 
   render() {
+    const entropy = this.state.hintClassNames.notInDictionary === "error" ? 0 : this.state.passphraseEntropy;
     return (
       <div className="grid grid-responsive-12 profile-passphrase">
         <div className="row">
@@ -291,7 +292,7 @@ class EnterNewPassphrase extends React.Component {
                     securityToken={this.props.context.userSettings.getSecurityToken()}
                     onChange={this.handlePassphraseChange}
                     disabled={!this.areActionsAllowed}/>
-                  <PasswordComplexity entropy={this.state.passphraseEntropy}/>
+                  <PasswordComplexity entropy={entropy}/>
                 </div>
                 <div className="password-hints">
                   <ul>

package/src/react-extension/components/UserSetting/DisplayUserAccountRecovery/DisplayAccountRecoveryUserSettings.test.stories.js

@@ -42,21 +42,18 @@ const getTemplateArgs = () => ({
   accountRecoveryContext: {
     status: "approved",
     loadAccountRecoveryPolicy: () => {},
-    getPolicy: () => {
-      return {
-        policy: "opt-out",
-      };
-    },
-    getRequestor: () => {
-      return {
-        profile: {
-          first_name: "Ada",
-          last_name: "Lovelace"
-        },
-        gpgkey: {
-          fingerprint: "848E95CC7493129AD862583129B81CA8936023DD"
-        }};
-    },
+    getPolicy: () => ({
+      policy: "opt-out",
+    }),
+    getRequestor: () => ({
+      profile: {
+        first_name: "Ada",
+        last_name: "Lovelace"
+      },
+      gpgkey: {
+        fingerprint: "848E95CC7493129AD862583129B81CA8936023DD"
+      }
+    }),
     getRequestedDate: () => "2021-05-25T09:08:34.123"
   }
 });