passbolt-styleguide 3.3.3 → 3.4.0-alpha2

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

@@ -68,14 +68,7 @@ describe("See the Edit Resource", () => {
       expect(passwordInputStyle.color).toBe("");
 
       // Complexity label exists but is not yet defined.
-      expect(page.passwordEdit.complexityText.textContent).toBe("complexity: n/a");
-
-      // Security token element exists.
-      expect(page.passwordEdit.securityToken.textContent).toBe("TST");
-      // And the default style is applied.
-      const securityTokenStyle = window.getComputedStyle(page.passwordEdit.securityToken);
-      expect(securityTokenStyle.background).toBe("rgb(0, 0, 0)");
-      expect(securityTokenStyle.color).toBe("rgb(255, 255, 255)");
+      expect(page.passwordEdit.complexityText.textContent).toBe("Complexity: n/aEntropy: 0.0 bits");
 
       // Password view button exists.
       expect(page.passwordEdit.passwordViewButton).not.toBeNull();
@@ -94,34 +87,6 @@ describe("See the Edit Resource", () => {
       expect(page.passwordEdit.cancelButton.textContent).toBe("Cancel");
     });
 
-    it('changes the style of its security token when the password input get or lose focus when the password is already decrypted', async() => {
-      /*
-       * Password input got focus.
-       * Assert style change.
-       */
-      page.passwordEdit.focusInput(page.passwordEdit.password);
-      await waitFor(() => {
-        expect(page.passwordEdit.password.classList).toContain("decrypted");
-      });
-      let securityTokenStyle = window.getComputedStyle(page.passwordEdit.securityToken);
-      let passwordInputStyle = window.getComputedStyle(page.passwordEdit.password);
-      expect(passwordInputStyle.background).toBe("rgb(0, 0, 0)");
-      expect(passwordInputStyle.color).toBe("rgb(255, 255, 255)");
-      expect(securityTokenStyle.background).toBe("rgb(255, 255, 255)");
-      expect(securityTokenStyle.color).toBe("rgb(0, 0, 0)");
-
-      /*
-       * Password input lost focus.
-       * Assert style
-       */
-      page.passwordEdit.blurInput(page.passwordEdit.password);
-      securityTokenStyle = window.getComputedStyle(page.passwordEdit.securityToken);
-      passwordInputStyle = window.getComputedStyle(page.passwordEdit.password);
-      expect(passwordInputStyle.background).toBe("white");
-      expect(passwordInputStyle.color).toBe("");
-      expect(securityTokenStyle.background).toBe("rgb(0, 0, 0)");
-      expect(securityTokenStyle.color).toBe("rgb(255, 255, 255)");
-    });
 
     it('generates password when clicking on the generate button.', async() => {
       page.passwordEdit.focusInput(page.passwordEdit.password);
@@ -129,7 +94,7 @@ describe("See the Edit Resource", () => {
         expect(page.passwordEdit.password.classList).toContain("decrypted");
       });
       await page.passwordEdit.click(page.passwordEdit.passwordGenerateButton);
-      expect(page.passwordEdit.complexityText.textContent).not.toBe("complexity: n/a");
+      expect(page.passwordEdit.complexityText.textContent).not.toBe("Complexity: n/aEntropy: NaN bits");
       expect(page.passwordEdit.progressBar.classList.contains("not_available")).toBe(false);
     });
 
@@ -173,7 +138,7 @@ describe("See the Edit Resource", () => {
       });
       page.passwordEdit.fillInput(page.passwordEdit.password, resourceMeta.password);
       page.passwordEdit.blurInput(page.passwordEdit.password);
-      expect(page.passwordEdit.complexityText.textContent).not.toBe("complexity: n/a");
+      expect(page.passwordEdit.complexityText.textContent).not.toBe("Complexity: n/aEntropy: NaN bits");
       expect(page.passwordEdit.progressBar.classList.contains("not_available")).toBe(false);
       page.passwordEdit.fillInput(page.passwordEdit.description, resourceMeta.description);
 
@@ -218,7 +183,7 @@ describe("See the Edit Resource", () => {
       });
       page.passwordEdit.fillInput(page.passwordEdit.password, resourceMeta.password);
       page.passwordEdit.blurInput(page.passwordEdit.password);
-      expect(page.passwordEdit.complexityText.textContent).not.toBe("complexity: n/a");
+      expect(page.passwordEdit.complexityText.textContent).not.toBe("Complexity: n/aEntropy: NaN bits");
       expect(page.passwordEdit.progressBar.classList.contains("not_available")).toBe(false);
       page.passwordEdit.fillInput(page.passwordEdit.description, resourceMeta.description);
       await page.passwordEdit.click(page.passwordEdit.descriptionEncryptedLock);
@@ -333,5 +298,11 @@ describe("See the Edit Resource", () => {
         updateResolve();
       });
     });
+
+    it('As LU I should access to the password generator dialog', async() => {
+      jest.spyOn(props.dialogContext, 'open').mockImplementationOnce(jest.fn);
+      await page.passwordEdit.openPasswordGenerator();
+      expect(props.dialogContext.open).toBeCalled();
+    });
   });
 });

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

@@ -14,9 +14,10 @@
 import {fireEvent, render, waitFor} from "@testing-library/react";
 import React from "react";
 import DialogContextProvider from "../../../contexts/DialogContext";
-import {MemoryRouter, Route} from "react-router-dom";
+import {MemoryRouter} from "react-router-dom";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import EditResource from "./EditResource";
+import ManageDialogs from "../../Common/Dialog/ManageDialogs/ManageDialogs";
 
 
 /**
@@ -26,8 +27,10 @@ export const EditResourcePageTemplate = props =>
   <MockTranslationProvider>
     <DialogContextProvider>
       <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <EditResource {...props} {...routerProps}/>}/>
+        <ManageDialogs/>
+        <EditResource {...props}/>
       </MemoryRouter>
+      <ManageDialogs/>
     </DialogContextProvider>
   </MockTranslationProvider>;
 
@@ -65,6 +68,13 @@ export default class EditResourcePage {
   get passwordEdit() {
     return this._passwordEdit;
   }
+
+  /**
+   * REturns the password generator dialog element
+   */
+  get passwordGeneratorDialog() {
+    return this._page.container.querySelector('.password-generator-dialog');
+  }
 }
 
 /**
@@ -127,7 +137,7 @@ class PasswordEditPageObject {
    * Returns the name error mesage input element
    */
   get nameErrorMessage() {
-    return this._container.querySelector('.name.error.message');
+    return this._container.querySelector('.name.error-message');
   }
 
   /**
@@ -155,7 +165,7 @@ class PasswordEditPageObject {
    * Returns the password error mesage input element
    */
   get passwordErrorMessage() {
-    return this._container.querySelector('.password.error.message');
+    return this._container.querySelector('.password.error-message');
   }
 
   /**
@@ -165,13 +175,6 @@ class PasswordEditPageObject {
     return this._container.querySelector('.complexity-text');
   }
 
-  /**
-   * Returns the security token input element
-   */
-  get securityToken() {
-    return this._container.querySelector('.security-token');
-  }
-
   /**
    * Returns the description input element
    */
@@ -207,6 +210,13 @@ class PasswordEditPageObject {
     return this._container.querySelector('.password-generate');
   }
 
+  /**
+   * Returns the password generator button element
+   */
+  get passwordGeneratorButton() {
+    return this._container.querySelector('.password-generator');
+  }
+
   /**
    * Returns the save button element
    */
@@ -271,4 +281,9 @@ class PasswordEditPageObject {
   blurInput(element)  {
     fireEvent.blur(element);
   }
+
+  /** Open the password generator*/
+  async openPasswordGenerator() {
+    await this.clickWithoutWaitFor(this.passwordGeneratorButton);
+  }
 }

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

@@ -297,7 +297,7 @@ class ExportResources extends React.Component {
 
           <div className="form-content">
 
-            <div className="input text required">
+            <div className="input select required">
               <label htmlFor="export-format"><Trans>Choose the export format (csv and kdbx are supported)</Trans></label>
               <select
                 id="export-format"

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

@@ -1,8 +1,6 @@
 import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
-import "../../../../css/themes/default/ext_app.css";
 import AppContext from "../../../contexts/AppContext";
-import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import ExportResources from "./ExportResources";
 
 
@@ -59,14 +57,11 @@ const context = {
 
 
 const Template = args =>
-  <MockTranslationProvider>
-    <AppContext.Provider value={context}>
-      <MemoryRouter initialEntries={['/']}>
-        <Route component={routerProps => <ExportResources {...args} {...routerProps}/>}></Route>
-      </MemoryRouter>
-    </AppContext.Provider>
-  </MockTranslationProvider>;
-
+  <AppContext.Provider value={context}>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <ExportResources {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>
+  </AppContext.Provider>;
 
 
 export const Initial = Template.bind({});
@@ -78,4 +73,3 @@ Initial.args = {
     onResourcesToExport: () => {}
   }
 };
-

package/src/react-extension/components/Resource/ExportResources/ExportResourcesCredentials.js

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

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

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

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

@@ -38,7 +38,7 @@ class FilterResourcesByBreadcrumb extends Component {
       case ResourceWorkspaceFilterTypes.TEXT: {
         const isEmptySearchText = !this.props.resourceWorkspaceContext.filter.payload;
         const filterText = this.props.resourceWorkspaceContext.filter.payload;
-        return isEmptySearchText ? items : [...items, this.getLastBreadcrumb(this.translate("Search: {{filterText}}", {filterText}))];
+        return isEmptySearchText ? items : [...items, this.getLastBreadcrumb(`${this.translate("Search:")} ${filterText}`)];
       }
       case ResourceWorkspaceFilterTypes.FAVORITE:
         return [...items, this.getLastBreadcrumb(this.translate("Favorite"))];
@@ -50,7 +50,7 @@ class FilterResourcesByBreadcrumb extends Component {
         return [...items, this.getLastBreadcrumb(this.translate("Items I own"))];
       case ResourceWorkspaceFilterTypes.TAG: {
         const filteredTagName = this.props.resourceWorkspaceContext.filter.payload.tag.slug;
-        return [...items, this.getLastBreadcrumb(this.translate("{{filteredTagName}} (tag)", {filteredTagName}))];
+        return [...items, this.getLastBreadcrumb(`${filteredTagName} ${this.translate("(tag)")}`)];
       }
       case ResourceWorkspaceFilterTypes.ROOT_FOLDER: {
         return [...items, this.getLastBreadcrumb(this.translate("root (folder)"))];
@@ -58,12 +58,12 @@ class FilterResourcesByBreadcrumb extends Component {
       case ResourceWorkspaceFilterTypes.FOLDER: {
         const folder = this.props.resourceWorkspaceContext.filter.payload.folder;
         const currentFolderName = (folder && folder.name) || this.translate("N/A");
-        return [...items, this.getLastBreadcrumb(this.translate("{{currentFolderName}} (folder)", {currentFolderName}))];
+        return [...items, this.getLastBreadcrumb(`${currentFolderName} ${this.translate("(folder)")}`)];
       }
       case ResourceWorkspaceFilterTypes.GROUP: {
         const group = this.props.resourceWorkspaceContext.filter.payload.group;
         const currentGroupName = (group && group.name) || this.translate("N/A");
-        return [...items, this.getLastBreadcrumb(this.translate("{{currentGroupName}} (group)", {currentGroupName}))];
+        return [...items, this.getLastBreadcrumb(`${currentGroupName} ${this.translate("(group)")}`)];
       }
     }
 

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

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

package/src/react-extension/components/Resource/FilterResourcesByFolders/DisplayDragFolderItem.js

@@ -0,0 +1,109 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.4.0
+ */
+import React from "react";
+import PropTypes from "prop-types";
+import AppContext, {withAppContext} from "../../../contexts/AppContext";
+import {withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
+import Icon from "../../../components/Common/Icons/Icon";
+import {withDrag} from "../../../contexts/DragContext";
+
+class DisplayDragFolderItem extends React.Component {
+  /**
+   * Check if the user is currently dragging content.
+   * @returns {number}
+   */
+  isDragging() {
+    return this.props.dragContext.dragging;
+  }
+
+  /**
+   * return dragged items
+   * @returns {*}
+   */
+  get draggedItems() {
+    return this.props.dragContext.draggedItems;
+  }
+
+  /**
+   * Check if the user can drag all the items they are currently dragging.
+   * @param {array} draggedItems The list of dragged items.
+   * @returns {boolean}
+   */
+  canDragItems(draggedItems) {
+    const draggedFolders = draggedItems.folders;
+    let canDragItems = draggedFolders.reduce((accumulator, folder) => accumulator && this.canDragItem(folder), true);
+
+    const draggedResources = draggedItems.resources;
+    canDragItems = canDragItems && draggedResources.reduce((accumulator, folder) => accumulator && this.canDragItem(folder), true);
+
+    return canDragItems;
+  }
+
+  /**
+   * Check if the user can drag an item.
+   * @param {object} item The target item
+   */
+  canDragItem(item) {
+    // The user can always drag an element located at their root.
+    if (item.folder_parent_id === null) {
+      return true;
+    }
+
+    const folderParent = this.props.context.folders.find(folder => folder.id === item.folder_parent_id);
+
+    // The user can always drag content from a personal folder.
+    if (folderParent.personal) {
+      return true;
+    }
+
+    // The user cannot drag an element if the parent folder is in READ.
+    if (folderParent.permission.type < 7) {
+      return false;
+    }
+
+    // The user cannot move folder in READ ONLY from a shared folder.
+    if (item.permission.type < 7) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Render the component.
+   * @returns {JSX}
+   */
+  render() {
+    const canDrag = this.canDragItems(this.draggedItems);
+    const dragFeedbackText = canDrag ? this.draggedItems.folders[0].name : "You are not allowed to move this content";
+    return (
+      <div className="drag-and-drop">
+        {!canDrag &&
+        <Icon name="ban"/>
+        }
+        <span className={`message ${!canDrag ? "not-allowed" : ""}`}>{dragFeedbackText}</span>
+      </div>
+    );
+  }
+}
+
+DisplayDragFolderItem.contextType = AppContext;
+
+DisplayDragFolderItem.propTypes = {
+  context: PropTypes.any, // The app context
+  resourceWorkspaceContext: PropTypes.any,
+  dragContext: PropTypes.any,
+};
+
+export default withAppContext(withResourceWorkspace(withDrag(DisplayDragFolderItem)));