passbolt-styleguide 3.3.2 → 3.4.0-alpha1

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

@@ -20,6 +20,7 @@ import AppContext from "../../../contexts/AppContext";
 import {BrowserRouter as Router} from "react-router-dom";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import DisplayResourcesList from "./DisplayResourcesList";
+import {DragContext} from "../../../contexts/DragContext";
 
 /**
  * The DisplayResourcesListPage component represented as a page
@@ -35,7 +36,9 @@ export default class DisplayResourcesListPage {
       <MockTranslationProvider>
         <AppContext.Provider value={appContext}>
           <Router>
-            <DisplayResourcesList {...props}/>
+            <DragContext.Provider value={props.dragContext}>
+              <DisplayResourcesList {...props}/>
+            </DragContext.Provider>
           </Router>
         </AppContext.Provider>
       </MockTranslationProvider>

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

@@ -243,16 +243,12 @@ class ExportResourcesCredentials extends Component {
                   ref={this.passwordInputRef}
                   disabled={!this.areActionsAllowed}
                   autoComplete="off"/>
-                <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>
+                <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>
             </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.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)));

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

@@ -23,6 +23,7 @@ import PropTypes from "prop-types";
 import {withDialog} from "../../../contexts/DialogContext";
 import ReactList from "react-list";
 import {Trans, withTranslation} from "react-i18next";
+import {withDrag} from "../../../contexts/DragContext";
 
 // Root virtual folder identifier.
 const ROOT = null;
@@ -37,7 +38,6 @@ class FilterResourcesByFolders extends React.Component {
     this.state = this.getDefaultState();
     this.createElementsRef();
     this.bindCallbacks();
-    this.initEventHandlers();
   }
 
   /**
@@ -46,14 +46,9 @@ class FilterResourcesByFolders extends React.Component {
    */
   getDefaultState() {
     return {
-      draggedItems: {
-        folders: [],
-        resources: []
-      },
-      dragging: false,
       draggingOverTitle: false,
+      draggingOverTitleSince: null,
       open: true,
-      openFolders: []
     };
   }
 
@@ -68,7 +63,6 @@ class FilterResourcesByFolders extends React.Component {
    * Create DOM nodes or React elements references in order to be able to access them programmatically.
    */
   createElementsRef() {
-    this.dragFeedbackElementRef = React.createRef();
     this.listElement = React.createRef();
     this.titleElementRef = React.createRef();
   }
@@ -82,48 +76,9 @@ class FilterResourcesByFolders extends React.Component {
     this.handleDragLeaveTitle = this.handleDragLeaveTitle.bind(this);
     this.handleDragOverTitle = this.handleDragOverTitle.bind(this);
     this.handleDropTitle = this.handleDropTitle.bind(this);
-    this.handleFolderCloseEvent = this.handleFolderCloseEvent.bind(this);
-    this.handleFolderDragEndEvent = this.handleFolderDragEndEvent.bind(this);
-    this.handleFolderDragStartEvent = this.handleFolderDragStartEvent.bind(this);
-    this.handleFolderDropEvent = this.handleFolderDropEvent.bind(this);
-    this.handleFolderOpenEvent = this.handleFolderOpenEvent.bind(this);
-    this.handleFolderSelectEvent = this.handleFolderSelectEvent.bind(this);
-    this.handleGridDragStartEvent = this.handleGridDragStartEvent.bind(this);
-    this.handleGridDragEndEvent = this.handleGridDragEndEvent.bind(this);
     this.handleTitleMoreClickEvent = this.handleTitleMoreClickEvent.bind(this);
   }
 
-  /**
-   * Initialize event listeners.
-   */
-  initEventHandlers() {
-    document.addEventListener('passbolt.resources.drag-start', this.handleGridDragStartEvent);
-    document.addEventListener('passbolt.resources.drag-end', this.handleGridDragEndEvent);
-  }
-
-  /**
-   * Handle when the user opens a folder.
-   * @param {ReactEvent} event The event
-   * @param {Object} folder The open folder
-   */
-  handleFolderCloseEvent(event, folder) {
-    const openFolders = this.state.openFolders;
-    const folderIndex = openFolders.findIndex(item => item.id === folder.id);
-    openFolders.splice(folderIndex, 1);
-    this.setState({openFolders});
-  }
-
-  /**
-   * Handle when the user opens a folder.
-   * @param {ReactEvent} event The event
-   * @param {Object} folder The open folder
-   */
-  handleFolderOpenEvent(event, folder) {
-    const openFolders = this.state.openFolders;
-    openFolders.push(folder);
-    this.setState({openFolders});
-  }
-
   /**
    * Handle when the user clicks on the section title.
    */
@@ -170,7 +125,8 @@ class FilterResourcesByFolders extends React.Component {
    */
   handleDragLeaveTitle() {
     const draggingOverTitle = false;
-    this.setState({draggingOverTitle});
+    const draggingOverTitleSince = null;
+    this.setState({draggingOverTitle, draggingOverTitleSince});
   }
 
   /**
@@ -185,18 +141,36 @@ class FilterResourcesByFolders extends React.Component {
     event.preventDefault();
 
     if (this.state.draggingOverTitle) {
+      this.openTitleOnLongDragOver();
       return;
     }
     const draggingOverTitle = true;
-    this.setState({draggingOverTitle});
+    const draggingOverTitleSince = Date.now();
+    this.setState({draggingOverTitle, draggingOverTitleSince});
+  }
+
+  /**
+   * Open the root folder when the user is dragging for a defined period on it.
+   * @param {ReactEvent} event The event
+   */
+  openTitleOnLongDragOver() {
+    const period = 2000;
+
+    // If already open, leave.
+    if (!this.state.open) {
+      const now = Date.now();
+      if (now - this.state.draggingOverTitleSince > period) {
+        this.handleSectionTitleClickCaretEvent();
+      }
+    }
   }
 
   /**
    * Handle when the user is dropping the content on the title.
    */
   handleDropTitle() {
-    const folders = this.state.draggedItems.folders.map(folder => folder.id);
-    const resources = this.state.draggedItems.resources.map(resource => resource.id);
+    const folders = this.props.dragContext.draggedItems.folders.map(folder => folder.id);
+    const resources = this.props.dragContext.draggedItems.resources.map(resource => resource.id);
     const folderParentId = null;
     this.props.context.port.request("passbolt.folders.open-move-confirmation-dialog", {folders, resources, folderParentId});
 
@@ -205,96 +179,6 @@ class FilterResourcesByFolders extends React.Component {
     this.setState({draggingOverTitle});
   }
 
-  /**
-   * Handle when the user stop dragging a folder.
-   */
-  handleFolderDragEndEvent() {
-    const draggedItems = {
-      folders: [],
-      resources: [],
-    };
-    const dragging = false;
-    this.setState({draggedItems, dragging});
-  }
-
-  /**
-   * Handle when the user starts dragging a folder.
-   * @param {ReactEvent} event The event
-   * @param {Object} folder The dragged folder
-   */
-  handleFolderDragStartEvent(event, folder) {
-    const dragging = true;
-    const draggedItems = {
-      folders: [folder],
-      resources: []
-    };
-    this.setState({dragging, draggedItems});
-    event.dataTransfer.setDragImage(this.dragFeedbackElementRef.current, 5, 5);
-  }
-
-  /**
-   * Handle when the user drop the content on a folder.
-   * @param {ReactEvent} event The event
-   * @param {Object} folder The drop folder
-   */
-  handleFolderDropEvent(event, dropFolder) {
-    const folders = this.state.draggedItems.folders.map(folder => folder.id);
-    const resources = this.state.draggedItems.resources.map(resource => resource.id);
-    const folderParentId = dropFolder.id;
-    this.props.context.port.request("passbolt.folders.open-move-confirmation-dialog", {folders, resources, folderParentId});
-  }
-
-  /**
-   * Handle the user selects a folder from the list.
-   * @param {ReactEvent} event The event
-   * @param {Object} folder The folder
-   */
-  handleFolderSelectEvent(event, folder) {
-    this.props.history.push(`/app/folders/view/${folder.id}`);
-  }
-
-  /**
-   * Handle when the user is dragging content from the grid.
-   * @param {ReactEvent} event The event
-   * event.details should be formatted as following:
-   * {
-   *   array folders The list of dragged folders
-   *   array resources The list of dragged resources
-   * }
-   */
-  handleGridDragStartEvent(event) {
-    const draggedItems = event.detail;
-    this.setState({draggedItems});
-  }
-
-  /**
-   * Handle when the user stops dragging content from the grid.
-   */
-  handleGridDragEndEvent() {
-    const draggedItems = {
-      folders: [],
-      resources: []
-    };
-    this.setState({draggedItems});
-  }
-
-  /**
-   * Open the tree until a given folder
-   * @param {object} folder The folder to scroll to
-   */
-  openFolderTree(folder) {
-    let openFolders = this.state.openFolders;
-
-    // If the selected folder has a parent. Open it if not yet open.
-    if (folder.folder_parent_id) {
-      const folderParent = this.props.context.folders.folders.find(item => item.id === folder.folder_parent_id);
-      if (folderParent) {
-        openFolders = Array.from(new Set([...openFolders, folderParent]));
-        this.setState({openFolders}, () => this.openFolderTree(folderParent));
-      }
-    }
-  }
-
   /**
    * Check if the user can drag an item.
    * @param {object} item The target item
@@ -340,38 +224,6 @@ class FilterResourcesByFolders extends React.Component {
     return canDragItems;
   }
 
-  /**
-   * Render the drag feedback
-   * @returns {JSX}
-   */
-  renderDragFeedback() {
-    let error = false;
-    let dragFeedbackText = "";
-    if (this.state.dragging) {
-      const canDrag = this.canDragItems(this.state.draggedItems);
-      if (canDrag) {
-        dragFeedbackText = this.state.draggedItems.folders[0].name;
-      } else {
-        error = true;
-        dragFeedbackText = this.translate("You are not allowed to move this content");
-      }
-    }
-
-    /*
-     * We display the drag feedback element even if there is no drag event happening.
-     * The start drag event can start using the element before the render is completely rendered, not sure the waiting
-     * the status to be updated will be sufficient.
-     */
-    return (
-      <div ref={this.dragFeedbackElementRef} className="drag-and-drop">
-        {error &&
-        <Icon name="ban"/>
-        }
-        <span className={`message ${error ? "not-allowed" : ""}`}>{dragFeedbackText}</span>
-      </div>
-    );
-  }
-
   /**
    * Check if the component is loading.
    * @returns {boolean}
@@ -416,10 +268,18 @@ class FilterResourcesByFolders extends React.Component {
 
   /**
    * Check if the user is currently dragging content.
-   * @returns {number}
+   * @returns {boolean}
    */
   isDragging() {
-    return this.state.draggedItems.folders.length !== 0 || this.state.draggedItems.resources.length !== 0;
+    return this.props.dragContext.dragging;
+  }
+
+  /**
+   * return dragged items
+   * @returns {*}
+   */
+  get draggedItems() {
+    return this.props.dragContext.draggedItems;
   }
 
   /**
@@ -443,7 +303,7 @@ class FilterResourcesByFolders extends React.Component {
     let disabled = false;
 
     if (isDragging && this.state.draggingOverTitle) {
-      const canDragItems = this.canDragItems(this.state.draggedItems);
+      const canDragItems = this.canDragItems(this.draggedItems);
       if (canDragItems) {
         showDropFocus = true;
       } else {
@@ -454,7 +314,6 @@ class FilterResourcesByFolders extends React.Component {
 
     return (
       <div className="navigation-secondary-tree navigation-secondary navigation-folders accordion">
-        {this.renderDragFeedback()}
         <div className="accordion-header">
           <div className={`${isOpen ? "open" : "close"} node root`}>
             <div className={`row title ${showDropFocus ? "drop-focus" : ""} ${disabled ? "disabled" : ""}`}>
@@ -498,25 +357,13 @@ class FilterResourcesByFolders extends React.Component {
           <ReactList
             itemRenderer={(index, key) => <FilterResourcesByFoldersItem
               key={key}
-              draggedItems={this.state.draggedItems}
-              folder={rootFolders[index]}
-              folders={this.props.context.folders}
-              isDragging={isDragging}
-              onClose={this.handleFolderCloseEvent}
-              onDragEnd={this.handleFolderDragEndEvent}
-              onDragStart={this.handleFolderDragStartEvent}
-              onDrop={this.handleFolderDropEvent}
-              onOpen={this.handleFolderOpenEvent}
-              openFolders={this.state.openFolders}
-              onSelect={this.handleFolderSelectEvent}
-              selectedFolder={this.selectedFolder}/>
+              folder={rootFolders[index]}/>
             }
             itemsRenderer={(items, ref) => <ul ref={ref} className="folders-tree">{items}</ul>}
             length={rootFolders.length}
             pageSize={20}
             minSize={20}
-            type="uniform"
-            useStaticSize={true}
+            type="simple"
             ref={this.listElement}>
           </ReactList>
           }
@@ -532,7 +379,8 @@ FilterResourcesByFolders.propTypes = {
   history: PropTypes.object,
   resourceWorkspaceContext: PropTypes.object,
   dialogContext: PropTypes.any,
+  dragContext: PropTypes.any,
   t: PropTypes.func, // The translation function
 };
 
-export default withRouter(withDialog(withContextualMenu(withResourceWorkspace(withAppContext(withTranslation('common')(FilterResourcesByFolders))))));
+export default withRouter(withDialog(withContextualMenu(withResourceWorkspace(withAppContext(withDrag(withTranslation('common')(FilterResourcesByFolders)))))));

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

@@ -1,5 +1,5 @@
-import MockPort from "../../../test/mock/MockPort";
 import {ResourceWorkspaceFilterTypes} from "../../../contexts/ResourceWorkspaceContext";
+import MockPort from "../../../test/mock/MockPort";
 
 /**
  * Returns the default app context for the unit test
@@ -20,10 +20,6 @@ export function defaultAppContext(appContext) {
  */
 export function defaultProps() {
   return {
-    context: {
-      port: new MockPort(),
-      folders: foldersMock
-    },
     resourceWorkspaceContext: {
       filter: {
         type: ResourceWorkspaceFilterTypes.FOLDER,
@@ -32,6 +28,15 @@ export function defaultProps() {
         }
       }
     },
+    dragContext: {
+      dragging: true,
+      draggedItems: {
+        folders: [foldersMock[3]],
+        resources: []
+      },
+      onDragStart: jest.fn(),
+      onDragEnd: jest.fn(),
+    },
     history: {
       push: jest.fn()
     },

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

@@ -28,8 +28,9 @@ describe("See Folders", () => {
   let page; // The page to test against
   const context = defaultAppContext(); // The applicative context
   const props = defaultProps(); // The props to pass
-
-  const mockContextRequest = implementation => jest.spyOn(props.context.port, 'request').mockImplementation(implementation);
+  const requestMockImpl = jest.fn((message, data) => data);
+  const mockContextRequest = (context, implementation) => jest.spyOn(context.port, 'request').mockImplementation(implementation);
+  mockContextRequest(context, requestMockImpl);
 
   describe('As LU I see the folders', () => {
     /**
@@ -69,27 +70,23 @@ describe("See Folders", () => {
     });
 
     it('As LU I should be able to drag and drop a folder on the root folder', async() => {
-      const requestMockImpl = jest.fn();
-      mockContextRequest(requestMockImpl);
       await page.filterResourcesByFoldersItem.dragStartOnFolder(1);
       await page.filterResourcesByFoldersItem.dragEndOnFolder(1);
       await page.filterResourcesByFolders.onDragOver;
       await page.filterResourcesByFolders.onDragLeave;
       await page.filterResourcesByFolders.onDragOver;
       await page.filterResourcesByFolders.onDrop;
-      const data = {folders: [], resources: [], folderParentId: null};
-      expect(props.context.port.request).toHaveBeenCalledWith("passbolt.folders.open-move-confirmation-dialog", data);
-    });
+      expect(props.dragContext.onDragStart).toHaveBeenCalled();
+      expect(context.port.request).toHaveBeenCalledWith("passbolt.folders.open-move-confirmation-dialog", {folders: ["3ed65efd-7c41-5906-9c02-71e2d95951db"], resources: [], folderParentId: null});
+      expect(props.dragContext.onDragEnd).toHaveBeenCalled();    });
 
     it('As LU I should be able to drag and drop a folder on another folder', async() => {
-      const requestMockImpl = jest.fn();
-      mockContextRequest(requestMockImpl);
       await page.filterResourcesByFoldersItem.toggleDisplayChildFolders(2);
       await page.filterResourcesByFoldersItem.dragStartOnFolder(3);
       await page.filterResourcesByFoldersItem.dragEndOnFolder(3);
       await page.filterResourcesByFoldersItem.onDropFolder(1);
-      const data = {folders: [], resources: [], folderParentId: '9e03fd73-04c0-5514-95fa-1a6cf2c7c093'};
-      expect(props.context.port.request).toHaveBeenCalledWith("passbolt.folders.open-move-confirmation-dialog", data);
+      expect(props.dragContext.onDragStart).toHaveBeenCalled();
+      expect(context.port.request).toHaveBeenCalledWith("passbolt.folders.open-move-confirmation-dialog", {folders: ["3ed65efd-7c41-5906-9c02-71e2d95951db"], resources: [], folderParentId: null});
     });
 
     it('As LU I should be able to open and close folder to see or not the child folders', async() => {
@@ -104,7 +101,7 @@ describe("See Folders", () => {
   describe('As LU I should see the Folder section empty', () => {
     const context = defaultAppContext(); // The applicative context
     const props = defaultProps();
-    props.context.folders = [];
+    context.folders = [];
     /**
      * Given an organization with 0 Folders
      * Then I should see the Folder section empty