passbolt-styleguide 3.5.3 → 3.6.0-beta1

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

@@ -43,11 +43,12 @@ describe("As LU I should see the password export dialog", () => {
     });
 
     it('As LU I see a success toaster after exporting resources in csv with success', async() => {
+      expect.assertions(6);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe("Export passwords");
 
       // Fill the form
-      await page.selectFormat('csv-lastpass');
+      await page.selectFormat(2);
 
       const requestMockImpl = jest.fn((message, data) => data);
       mockContextRequest(requestMockImpl);
@@ -69,11 +70,11 @@ describe("As LU I should see the password export dialog", () => {
     });
 
     it('As LU I see a export resources credential dialog after exporting resources in kdbx with success', async() => {
+      expect.assertions(4);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe("Export passwords");
 
       // Fill the form
-      await page.selectFormat('kdbx');
 
       await page.submitExport();
       await waitFor(() => {});
@@ -84,7 +85,7 @@ describe("As LU I should see the password export dialog", () => {
 
     it('As LU I cannot update the form fields and I should see a processing feedback while submitting the form', async() => {
       // Fill the form
-      await page.selectFormat('csv-lastpass');
+      await page.selectFormat(1);
       // Mock the request function to make it the expected result
       let updateResolve;
       const requestMockImpl = jest.fn(() => new Promise(resolve => {
@@ -95,7 +96,7 @@ describe("As LU I should see the password export dialog", () => {
 
       // API calls are made on submit, wait they are resolved.
       await waitFor(() => {
-        expect(page.select.getAttribute("disabled")).not.toBeNull();
+        expect(page.select.className).toBe("selected-value disabled");
         expect(page.exportButton.getAttribute("disabled")).not.toBeNull();
         expect(page.exportButton.className).toBe("button primary disabled processing");
         expect(page.cancelButton.className).toBe("cancel disabled");
@@ -104,36 +105,41 @@ describe("As LU I should see the password export dialog", () => {
     });
 
     it('As LU I can stop exporting passwords by clicking on the cancel button', async() => {
+      expect.assertions(2);
       await page.cancelExport();
       expect(props.resourceWorkspaceContext.onResourcesToExport).toHaveBeenCalledWith({resourcesIds: null, foldersIds: null});
       expect(props.onClose).toBeCalled();
     });
 
     it('As LU I can stop exporting passwords by closing the dialog', async() => {
+      expect.assertions(2);
       await page.closeDialog();
       expect(props.resourceWorkspaceContext.onResourcesToExport).toHaveBeenCalledWith({resourcesIds: null, foldersIds: null});
       expect(props.onClose).toBeCalled();
     });
 
     it('As LU I can stop exporting passwords with the keyboard (escape)', async() => {
+      expect.assertions(2);
       await page.escapeKey();
       expect(props.resourceWorkspaceContext.onResourcesToExport).toHaveBeenCalledWith({resourcesIds: null, foldersIds: null});
       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);
       // Fill the form
-      await page.selectFormat('csv-lastpass');
+      await page.selectFormat(3);
       // 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.submitExport();
       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/ExportResources/ExportResources.test.page.js

@@ -62,14 +62,14 @@ export default class ExportResourcesPage {
    * Returns the input file element
    */
   get select() {
-    return this._page.container.querySelector('#export-format');
+    return this._page.container.querySelector('#export-format .selected-value');
   }
 
   /**
    * Returns the save button element
    */
   get exportButton() {
-    return this._page.container.querySelector('.submit-wrapper input[type=\"submit\"]');
+    return this._page.container.querySelector('.submit-wrapper button[type=\"submit\"]');
   }
 
   /**
@@ -86,6 +86,13 @@ export default class ExportResourcesPage {
     return this.dialog !== null;
   }
 
+  /**
+   * Returns the export format element
+   */
+  getLocaleList(index) {
+    return this._page.container.querySelectorAll('#export-format .option')[index - 1];
+  }
+
   /** Click on the element */
   async click(element)  {
     const leftClick = {button: 0};
@@ -121,10 +128,9 @@ export default class ExportResourcesPage {
     await this.click(this.dialogClose);
   }
 
-  /** Click on select */
-  async selectFormat(format) {
-    const dataInputEvent = {target: {value: format}};
-    fireEvent.change(this.select, dataInputEvent);
-    await waitFor(() => {});
+  /** Click on select item for the index one */
+  async selectFormat(index) {
+    await this.click(this.select);
+    await this.click(this.getLocaleList(index));
   }
 }

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

@@ -52,7 +52,8 @@ const context = {
     {
       id: 2
     }
-  ]
+  ],
+  setContext: () => {}
 };
 
 
@@ -71,5 +72,6 @@ Initial.args = {
       foldersIds: [1, 2]
     },
     onResourcesToExport: () => {}
-  }
+  },
+  onClose: () => {}
 };

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

@@ -20,10 +20,10 @@ 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 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 export dialog when the file to import is KDB(X) file
@@ -45,7 +45,7 @@ class ExportResourcesCredentials extends Component {
    */
   get defaultState() {
     return {
-      showPassword: false, // True if the password should be textually displayed
+      password: '', // The current password
       keyFile: null, // The optional key file
       actions: {
         processing: false // Actions flag about processing
@@ -57,9 +57,9 @@ class ExportResourcesCredentials extends Component {
    * Bind component handlers
    */
   bindHandlers() {
+    this.handleInputChange = this.handleInputChange.bind(this);
     this.handleSelectFile = this.handleSelectFile.bind(this);
     this.handleFileSelected = this.handleFileSelected.bind(this);
-    this.handlePasswordViewToggled = this.handlePasswordViewToggled.bind(this);
     this.handleCancel = this.handleCancel.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
@@ -93,13 +93,6 @@ class ExportResourcesCredentials extends Component {
     return !this.isProcessing;
   }
 
-  /**
-   * Handle the password view mode toggle
-   */
-  async handlePasswordViewToggled() {
-    await this.setState({showPassword: !this.state.showPassword});
-  }
-
   /**
    * Handle the selection of a file by file explorer
    */
@@ -116,6 +109,20 @@ class ExportResourcesCredentials 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
    */
@@ -139,7 +146,7 @@ class ExportResourcesCredentials extends Component {
    * Export the resource file
    */
   async export() {
-    const password = this.passwordInputRef.current.value;
+    const password = this.state.password;
     const keyfile = await this.readFile();
     const options = {credentials: {password, keyfile}};
     const foldersIds = this.props.resourceWorkspaceContext.resourcesToExport.foldersIds;
@@ -189,20 +196,18 @@ class ExportResourcesCredentials extends Component {
   /**
    * Whenever the export has been performed with failure
    */
-  async onExportFailure(error) {
+  onExportFailure(error) {
     const isUserAbortsOperation = error.name === "UserAbortsOperationError";
     if (isUserAbortsOperation) {
-      await this.setState({actions: {processing: false}});
+      this.setState({actions: {processing: false}});
       return;
     }
 
     const errorDialogProps = {
-      title: this.translate("There was an unexpected error..."),
-      message: error.message
+      error: error
     };
-    await this.setState({actions: {processing: false}});
-    await this.props.context.setContext({errorDialogProps});
-    this.props.dialogContext.open(NotifyError);
+    this.setState({actions: {processing: false}});
+    this.props.dialogContext.open(NotifyError, errorDialogProps);
   }
 
   /**
@@ -234,53 +239,47 @@ class ExportResourcesCredentials extends Component {
 
           <div className="form-content">
 
-            <div className="input-password-wrapper">
+            <div className="input-password-wrapper input">
               <label htmlFor="password"><Trans>Keepass password</Trans></label>
-              <div className="input text password">
-                <input id="password"
-                  type={this.state.showPassword ? "text" : "password"}
-                  placeholder={this.translate("Passphrase")}
-                  ref={this.passwordInputRef}
-                  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>
+              <Password id="password"
+                name="password"
+                value={this.state.password}
+                onChange={this.handleInputChange}
+                placeholder={this.translate("Passphrase")}
+                autoComplete="off"
+                inputRef={this.passwordInputRef}
+                preview={true}
+                disabled={!this.areActionsAllowed}/>
             </div>
 
-            <div className="input-file-chooser-wrapper">
-              <div className="input text">
-                <input type="file"
-                  ref={this.fileUploaderRef}
-                  onChange={this.handleFileSelected}/>
-                <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.areActionsAllowed ? "disabled" : ""}`}
-                    onClick={this.handleSelectFile}>
-                    <Icon name="upload-a"/>
-                    <span><Trans>Choose a file</Trans></span>
-                  </a>
-                </div>
+            <div className={`input file ${!this.areActionsAllowed ? "disabled" : ""}`}>
+              <input type="file"
+                ref={this.fileUploaderRef}
+                id="dialog-exports-passwords"
+                onChange={this.handleFileSelected}/>
+              <label htmlFor="dialog-exports-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 type='button' className="button primary"
+                  disabled={!this.areActionsAllowed}
+                  onClick={this.handleSelectFile}>
+                  <span><Trans>Choose a file</Trans></span>
+                </button>
               </div>
             </div>
           </div>
 
           <div className="submit-wrapper clearfix">
+            <FormCancelButton
+              disabled={!this.areActionsAllowed}
+              onClick={this.handleCancel}/>
             <FormSubmitButton
               disabled={!this.areActionsAllowed}
               processing={this.isProcessing}
               value={this.translate("Export")}/>
-            <FormCancelButton
-              disabled={!this.areActionsAllowed}
-              onClick={this.handleCancel}/>
           </div>
         </form>
       </DialogWrapper>

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

@@ -42,6 +42,7 @@ describe("As LU I should see the export resources credentials dialog", () => {
     });
 
     it('As LU I see a success dialog after unlocking keypass file with success', async() => {
+      expect.assertions(7);
       expect(page.exists()).toBeTruthy();
       expect(page.title).toBe("Enter the password and/or key file");
       const file = new File(['test'], 'keyfile.txt', {type: 'txt'});
@@ -85,7 +86,7 @@ describe("As LU I should see the export resources credentials 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.exportButton.getAttribute("disabled")).not.toBeNull();
         expect(page.exportButton.className).toBe("button primary disabled processing");
@@ -95,34 +96,39 @@ describe("As LU I should see the export resources credentials dialog", () => {
     });
 
     it('As LU I can stop importing passwords by clicking on the cancel button', async() => {
+      expect.assertions(1);
       await page.cancelExport();
       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.selectKeypassFile(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.selectExport();
       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/ExportResources/ExportResourcesCredentials.test.page.js

@@ -69,7 +69,7 @@ export default class ExportResourcesCredentialsPage {
    * 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');
   }
 
 
@@ -91,7 +91,7 @@ export default class ExportResourcesCredentialsPage {
    * Returns the save button element
    */
   get exportButton() {
-    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/ExportResources/ExportResourcesCredentials.test.stories.js

@@ -12,7 +12,8 @@ export default {
 const context = {
   siteSettings: {
     canIUse: () => true
-  }
+  },
+  setContext: () => {}
 };
 
 
@@ -33,5 +34,6 @@ Initial.args = {
         resourcesCount: 15
       }
     }
-  }
+  },
+  onClose: () => {}
 };

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

@@ -15,7 +15,7 @@ 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 Icon from "../../../../shared/components/Icons/Icon";
 import {withDrag} from "../../../contexts/DragContext";
 
 class DisplayDragFolderItem extends React.Component {
@@ -88,11 +88,12 @@ class DisplayDragFolderItem extends React.Component {
     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">
+      <div className="drag-and-drop item-1">
         {!canDrag &&
         <Icon name="ban"/>
         }
         <span className={`message ${!canDrag ? "not-allowed" : ""}`}>{dragFeedbackText}</span>
+        <span className="count">1</span>
       </div>
     );
   }

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

@@ -11,8 +11,8 @@
  * @link          https://www.passbolt.com Passbolt(tm)
  * @since         2.13.0
  */
-import React, {Fragment} from "react";
-import Icon from "../../Common/Icons/Icon";
+import React from "react";
+import Icon from "../../../../shared/components/Icons/Icon";
 import FilterResourcesByFoldersItem from "./FilterResourcesByFoldersItem";
 import {ResourceWorkspaceFilterTypes, withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
 import {withRouter} from "react-router-dom";
@@ -36,7 +36,6 @@ class FilterResourcesByFolders extends React.Component {
   constructor(props) {
     super(props);
     this.state = this.getDefaultState();
-    this.createElementsRef();
     this.bindCallbacks();
   }
 
@@ -49,6 +48,7 @@ class FilterResourcesByFolders extends React.Component {
       draggingOverTitle: false,
       draggingOverTitleSince: null,
       open: true,
+      moreMenuOpen: false
     };
   }
 
@@ -56,21 +56,16 @@ class FilterResourcesByFolders extends React.Component {
    * Returns true if the component should be re-rendered
    */
   shouldComponentUpdate(prevProps, prevState) {
-    return prevState !== this.state || prevProps.context.folders !== this.props.context.folders;
-  }
-
-  /**
-   * Create DOM nodes or React elements references in order to be able to access them programmatically.
-   */
-  createElementsRef() {
-    this.listElement = React.createRef();
-    this.titleElementRef = React.createRef();
+    return prevState !== this.state
+      || prevProps.context.folders !== this.props.context.folders
+      || prevProps.resourceWorkspaceContext.filter.type !== this.props.resourceWorkspaceContext.filter.type;
   }
 
   /**
    * Bind callbacks methods
    */
   bindCallbacks() {
+    this.handleCloseMoreMenu = this.handleCloseMoreMenu.bind(this);
     this.handleClickOnTitle = this.handleClickOnTitle.bind(this);
     this.handleTitleContextualMenuEvent = this.handleTitleContextualMenuEvent.bind(this);
     this.handleDragLeaveTitle = this.handleDragLeaveTitle.bind(this);
@@ -79,6 +74,13 @@ class FilterResourcesByFolders extends React.Component {
     this.handleTitleMoreClickEvent = this.handleTitleMoreClickEvent.bind(this);
   }
 
+  /**
+   * Close the create menu
+   */
+  handleCloseMoreMenu() {
+    this.setState({moreMenuOpen: false});
+  }
+
   /**
    * Handle when the user clicks on the section title.
    */
@@ -87,6 +89,13 @@ class FilterResourcesByFolders extends React.Component {
     this.props.history.push(`/app/passwords`, {filter});
   }
 
+  /**
+   * Returns true if the All Items shortcut is currently selected
+   */
+  get isSelected() {
+    return this.props.resourceWorkspaceContext.filter.type === ResourceWorkspaceFilterTypes.ROOT_FOLDER;
+  }
+
   /**
    * Handle when the user requests to display the contextual menu on the root folder.
    * @param {ReactEvent} event The event
@@ -106,10 +115,14 @@ class FilterResourcesByFolders extends React.Component {
    * @param {ReactEvent} event The event
    */
   handleTitleMoreClickEvent(event) {
-    const top = event.pageY;
-    const left = event.pageX;
-    const contextualMenuProps = {left, top};
-    this.props.contextualMenuContext.show(FilterResourcesByRootFolderContextualMenu, contextualMenuProps);
+    const moreMenuOpen = !this.state.moreMenuOpen;
+    this.setState({moreMenuOpen});
+    if (moreMenuOpen) {
+      const {left, top} = event.currentTarget.getBoundingClientRect();
+      const onBeforeHide = this.handleCloseMoreMenu;
+      const contextualMenuProps = {left, top: top + 18, className: "right", onBeforeHide};
+      this.props.contextualMenuContext.show(FilterResourcesByRootFolderContextualMenu, contextualMenuProps);
+    }
   }
 
   /**
@@ -316,35 +329,37 @@ class FilterResourcesByFolders extends React.Component {
       <div className="navigation-secondary-tree navigation-secondary navigation-folders accordion">
         <div className="accordion-header">
           <div className={`${isOpen ? "open" : "close"} node root`}>
-            <div className={`row title ${showDropFocus ? "drop-focus" : ""} ${disabled ? "disabled" : ""}`}>
+            <div className={`row title ${this.isSelected ? "selected" : ""} ${showDropFocus ? "drop-focus" : ""} ${disabled ? "disabled" : ""} ${this.state.moreMenuOpen ? "highlight" : ""}`}>
               <div className="main-cell-wrapper">
                 <div className="main-cell">
                   <h3>
                     <span className="folders-label">
-                      {!isLoading &&
-                      <Fragment>
-                        {isOpen &&
-                        <Icon name="caret-down" onClick={() => this.handleSectionTitleClickCaretEvent()}/>
-                        }
-                        {!isOpen &&
-                        <Icon name="caret-right" onClick={() => this.handleSectionTitleClickCaretEvent()}/>
-                        }
-                      </Fragment>
-                      }
-                      <span
-                        ref={this.titleElementRef}
+                      <a role="button"
                         onDragOver={this.handleDragOverTitle}
                         onDragLeave={this.handleDragLeaveTitle}
                         onDrop={this.handleDropTitle}
                         onClick={this.handleClickOnTitle}
-                        onContextMenu={this.handleTitleContextualMenuEvent}
-                      ><Trans>Folders</Trans></span>
+                        onContextMenu={this.handleTitleContextualMenuEvent}>
+                        {!isLoading &&
+                          <div className="toggle-folder" onClick={() => this.handleSectionTitleClickCaretEvent()}>
+                            {isOpen &&
+                              <Icon name="caret-down"/>
+                            }
+                            {!isOpen &&
+                              <Icon name="caret-right"/>
+                            }
+                          </div>
+                        }
+                        <Trans>Folders</Trans>
+                      </a>
                     </span>
                   </h3>
                 </div>
-                <div className="right-cell more-ctrl">
-                  <a onClick={this.handleTitleMoreClickEvent}><Icon name="plus-square"/></a>
-                </div>
+              </div>
+              <div className="dropdown right-cell more-ctrl">
+                <a className={`button ${this.state.moreMenuOpen ? "open" : ""}`} onClick={this.handleTitleMoreClickEvent}>
+                  <Icon name="3-dots-h"/>
+                </a>
               </div>
             </div>
           </div>
@@ -363,8 +378,7 @@ class FilterResourcesByFolders extends React.Component {
             length={rootFolders.length}
             pageSize={20}
             minSize={20}
-            type="simple"
-            ref={this.listElement}>
+            type="simple">
           </ReactList>
           }
         </div>

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

@@ -61,7 +61,7 @@ describe("See Folders", () => {
 
     it('As LU I should be able to open a contextual menu for root folder with the more button', async() => {
       await page.filterResourcesByFolders.openContextualMenuWithButton;
-      expect(props.contextualMenuContext.show).toHaveBeenCalledWith(FilterResourcesByRootFolderContextualMenu, {});
+      expect(props.contextualMenuContext.show).toHaveBeenCalledWith(FilterResourcesByRootFolderContextualMenu, {className: "right", left: 0, top: 18, onBeforeHide: expect.any(Function)});
     });
 
     it('As LU I should be able to open a contextual menu for root folder with right click', async() => {

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

@@ -92,7 +92,7 @@ class TitleHeaderPageObject {
    * Returns the clickable area of the header
    */
   get hyperlink() {
-    return this._container.querySelectorAll(".folders-label span")[1];
+    return this._container.querySelectorAll(".folders-label a")[0];
   }
 
   /** Click on the component */
@@ -123,7 +123,7 @@ class FilterResourcesByFoldersPageObject {
    * Returns the root folder
    */
   get rootFolder() {
-    return this._container.querySelectorAll('.folders-label span')[1];
+    return this._container.querySelectorAll('.folders-label a')[0];
   }
 
   /**
@@ -144,7 +144,7 @@ class FilterResourcesByFoldersPageObject {
    * Returns the more button root folder
    */
   get moreButton() {
-    return this._container.querySelector('.accordion-header .node.root .row.title .main-cell-wrapper .right-cell.more-ctrl a');
+    return this._container.querySelector('.accordion-header .node.root .row.title .right-cell.more-ctrl a');
   }
 
   /**