passbolt-styleguide 3.3.2 → 3.4.0-alpha1

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

@@ -1,3 +1,4 @@
+
 /**
  * Passbolt ~ Open source password manager for teams
  * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
@@ -18,6 +19,7 @@ import {BrowserRouter as Router} from 'react-router-dom';
 import {FilterResourcesByFoldersItemPageObject} from "./FilterResourcesByFoldersItem.test.page";
 import MockTranslationProvider from "../../../test/mock/components/Internationalisation/MockTranslationProvider";
 import FilterResourcesByFolders from "./FilterResourcesByFolders";
+import {DragContext} from "../../../contexts/DragContext";
 
 /**
  * The FilterResourcesByFolders component represented as a page
@@ -33,7 +35,9 @@ export default class FilterResourcesByFoldersPage {
       <MockTranslationProvider>
         <AppContext.Provider value={appContext}>
           <Router>
-            <FilterResourcesByFolders.WrappedComponent {...props}/>
+            <DragContext.Provider value={props.dragContext}>
+              <FilterResourcesByFolders.WrappedComponent {...props}/>
+            </DragContext.Provider>
           </Router>
         </AppContext.Provider>
       </MockTranslationProvider>

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

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

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

@@ -18,6 +18,9 @@ import {withContextualMenu} from "../../../contexts/ContextualMenuContext";
 import FilterResourcesByFoldersItemContextualMenu from "./FilterResourcesByFoldersItemContextualMenu";
 import {withAppContext} from "../../../contexts/AppContext";
 import {ResourceWorkspaceFilterTypes, withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
+import {withDrag} from "../../../contexts/DragContext";
+import DisplayDragFolderItem from "./DisplayDragFolderItem";
+import {withRouter} from "react-router-dom";
 
 class FilterResourcesByFoldersItem extends React.Component {
   /**
@@ -45,7 +48,7 @@ class FilterResourcesByFoldersItem extends React.Component {
 
 
   bindCallbacks() {
-    this.handleClickLeftCaretEvent = this.handleClickLeftCaretEvent.bind(this);
+    this.handleToggleOpenFolder = this.handleToggleOpenFolder.bind(this);
     this.handleContextualMenuEvent = this.handleContextualMenuEvent.bind(this);
     this.handleDragEndEvent = this.handleDragEndEvent.bind(this);
     this.handleDragLeaveEvent = this.handleDragLeaveEvent.bind(this);
@@ -56,14 +59,24 @@ class FilterResourcesByFoldersItem extends React.Component {
     this.handleSelectEvent = this.handleSelectEvent.bind(this);
   }
 
+  componentDidMount() {
+    if (this.props.match.params.filterByFolderId) {
+      // Expand folder tree until the selected folder
+      this.openFolderParentTree(this.props.match.params.filterByFolderId);
+    }
+  }
+
   /**
    * Handle when the user start dragging the folder.
    * @param {ReactEvent} event The event
    */
   handleDragStartEvent(event) {
-    const dragging = true;
-    this.setState({dragging});
-    this.props.onDragStart(event, this.props.folder);
+    event.persist();
+    const draggedItems = {
+      folders: [this.props.folder],
+      resources: []
+    };
+    this.props.dragContext.onDragStart(event, DisplayDragFolderItem, draggedItems);
   }
 
   /**
@@ -71,16 +84,29 @@ class FilterResourcesByFoldersItem extends React.Component {
    * Fold/Unfold the folder.
    * @param {ReactEvent} event The event
    */
-  handleClickLeftCaretEvent(event) {
+  handleToggleOpenFolder(event) {
     /*
      * Prevent the component to select the folder.
      * @todo This default behavior should not be allowed as it will break other behavior, such as closing a contextual menu closing.
      */
     event.stopPropagation();
-    if (this.isOpen()) {
-      this.props.onClose(event, this.props.folder);
-    } else {
-      this.props.onOpen(event, this.props.folder);
+    const open = !this.state.open;
+    this.setState({open});
+  }
+
+  /**
+   * Open the tree until a given folder
+   * @param {object} selectedFolderId The folder id to scroll to
+   */
+  openFolderParentTree(selectedFolderId) {
+    const selectedFolder = this.props.context.folders.find(folder => folder.id === selectedFolderId);
+    // If the selected folder has a parent. Open it if not yet open.
+    if (selectedFolder.folder_parent_id) {
+      if (selectedFolder.folder_parent_id === this.props.folder.id) {
+        this.setState({open: true});
+      } else {
+        this.openFolderParentTree(selectedFolder.folder_parent_id);
+      }
     }
   }
 
@@ -89,7 +115,7 @@ class FilterResourcesByFoldersItem extends React.Component {
    * @return {boolean}
    */
   isOpen() {
-    return this.props.openFolders.some(folder => folder.id === this.props.folder.id);
+    return this.state.open;
   }
 
   /**
@@ -123,8 +149,8 @@ class FilterResourcesByFoldersItem extends React.Component {
    * Handle when the user stop dragging content.
    * @param {ReactEvent} event The event
    */
-  handleDragEndEvent(event) {
-    this.props.onDragEnd(event);
+  handleDragEndEvent() {
+    this.props.dragContext.onDragEnd();
   }
 
   /**
@@ -169,7 +195,7 @@ class FilterResourcesByFoldersItem extends React.Component {
     if (!open) {
       const now = Date.now();
       if (now - this.state.draggingOverSince > period) {
-        this.props.onOpen(event, this.props.folder);
+        this.handleToggleOpenFolder(event);
       }
     }
   }
@@ -178,11 +204,14 @@ class FilterResourcesByFoldersItem extends React.Component {
    * Handle when the user drop content on this component.
    * @param {ReactEvent} event The event
    */
-  handleDropEvent(event) {
+  handleDropEvent() {
     // The user cannot drop the dragged content on a dragged item.
-    const isDroppingOnDraggedItem = this.props.draggedItems.folders.some(item => item.id === this.props.folder.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 = this.props.folder.id;
+    const isDroppingOnDraggedItem = this.draggedItems.folders.some(item => item.id === folderParentId);
     if (!isDroppingOnDraggedItem) {
-      this.props.onDrop(event, this.props.folder);
+      this.props.context.port.request("passbolt.folders.open-move-confirmation-dialog", {folders, resources, folderParentId});
     }
 
     // The dragLeave event is not fired when a drop is happening. Cancel the state manually.
@@ -191,11 +220,10 @@ class FilterResourcesByFoldersItem extends React.Component {
   }
 
   /**
-   * Handle when this component is selected.
-   * @param {ReactEvent} event The event
+   * Handle the user selects a folder from the list.
    */
-  handleSelectEvent(event) {
-    this.props.onSelect(event, this.props.folder);
+  handleSelectEvent() {
+    this.props.history.push(`/app/folders/view/${this.props.folder.id}`);
   }
 
   /**
@@ -296,8 +324,8 @@ class FilterResourcesByFoldersItem extends React.Component {
    * @returns {int}
    */
   getDraggedItemsLowestPermission() {
-    const draggedFoldersLowestPermission = this.getItemsListLowestPermission(this.props.draggedItems.folders);
-    const draggedResourcesLowestPermission = this.getItemsListLowestPermission(this.props.draggedItems.resources);
+    const draggedFoldersLowestPermission = this.getItemsListLowestPermission(this.draggedItems.folders);
+    const draggedResourcesLowestPermission = this.getItemsListLowestPermission(this.draggedItems.resources);
 
     return draggedFoldersLowestPermission < draggedResourcesLowestPermission ? draggedFoldersLowestPermission : draggedResourcesLowestPermission;
   }
@@ -307,7 +335,7 @@ class FilterResourcesByFoldersItem extends React.Component {
    * @returns {boolean}
    */
   canDropInto() {
-    if (!this.props.isDragging) {
+    if (!this.isDragging()) {
       return false;
     }
 
@@ -325,13 +353,13 @@ class FilterResourcesByFoldersItem extends React.Component {
     }
 
     // Cannot move a folder into one of its own children.
-    if (this.isChildOfAny(this.props.folder, this.props.draggedItems.folders)) {
+    if (this.isChildOfAny(this.props.folder, this.draggedItems.folders)) {
       return false;
     }
 
     // Cannot move a folder into itself.
-    for (const i in this.props.draggedItems.folders) {
-      if (this.props.folder.id === this.props.draggedItems.folders[i].id) {
+    for (const i in this.draggedItems.folders) {
+      if (this.props.folder.id === this.draggedItems.folders[i].id) {
         return false;
       }
     }
@@ -344,12 +372,9 @@ class FilterResourcesByFoldersItem extends React.Component {
    * @returns {boolean}
    */
   isDragged() {
-    for (const i in this.props.draggedItems.folders) {
-      if (this.props.folder.id === this.props.draggedItems.folders[i].id) {
-        return true;
-      }
+    if (this.isDragging()) {
+      return this.draggedItems.folders.some(folder => folder.id === this.props.folder.id);
     }
-
     return false;
   }
 
@@ -363,8 +388,8 @@ class FilterResourcesByFoldersItem extends React.Component {
      * - The user is not allowed to drag any of dragged items;
      * - The user is not allowed to drop content in the folder associated to this component.
      */
-    if (this.props.isDragging) {
-      const canDragItems = this.canDragItems(this.props.draggedItems);
+    if (this.isDragging()) {
+      const canDragItems = this.canDragItems(this.draggedItems);
       if (!canDragItems) {
         return true;
       }
@@ -407,6 +432,22 @@ class FilterResourcesByFoldersItem extends React.Component {
     return folders;
   }
 
+  /**
+   * return dragged items
+   * @returns {*}
+   */
+  get draggedItems() {
+    return this.props.dragContext.draggedItems;
+  }
+
+  /**
+   * Check if the user is currently dragging content.
+   * @returns {boolean}
+   */
+  isDragging() {
+    return this.props.dragContext.dragging;
+  }
+
   /**
    * Render the component
    * @returns {JSX}
@@ -438,10 +479,10 @@ class FilterResourcesByFoldersItem extends React.Component {
                 {hasChildren &&
                 <Fragment>
                   {isOpen &&
-                  <Icon name="caret-down" onClick={this.handleClickLeftCaretEvent}/>
+                  <Icon name="caret-down" onClick={this.handleToggleOpenFolder}/>
                   }
                   {!isOpen &&
-                  <Icon name="caret-right" onClick={this.handleClickLeftCaretEvent}/>
+                  <Icon name="caret-right" onClick={this.handleToggleOpenFolder}/>
                   }
                 </Fragment>
                 }
@@ -465,17 +506,7 @@ class FilterResourcesByFoldersItem extends React.Component {
         <ul className="folders-tree">
           {folderChildren.map(folder => <DecoratedFoldersTreeItem
             key={`folders-tree-${folder.id}`}
-            draggedItems={this.props.draggedItems}
-            folder={folder}
-            folders={this.props.context.folders}
-            isDragging={this.props.isDragging}
-            onClose={this.props.onClose}
-            onDragEnd={this.props.onDragEnd}
-            onDragStart={this.props.onDragStart}
-            onDrop={this.props.onDrop}
-            onOpen={this.props.onOpen}
-            onSelect={this.props.onSelect}
-            openFolders={this.props.openFolders}/>)}
+            folder={folder}/>)}
         </ul>
         }
       </li>
@@ -486,19 +517,13 @@ class FilterResourcesByFoldersItem extends React.Component {
 FilterResourcesByFoldersItem.propTypes = {
   context: PropTypes.any, // The app context
   contextualMenuContext: PropTypes.any, // The contextual menu context
-  draggedItems: PropTypes.object,
+  history: PropTypes.object,
+  match: PropTypes.object,
   folder: PropTypes.object,
-  isDragging: PropTypes.bool,
-  onClose: PropTypes.func,
-  onDragEnd: PropTypes.func,
-  onDragStart: PropTypes.func,
-  onDrop: PropTypes.func,
-  onOpen: PropTypes.func,
-  onSelect: PropTypes.func,
-  openFolders: PropTypes.array,
-  resourceWorkspaceContext: PropTypes.any
+  resourceWorkspaceContext: PropTypes.any,
+  dragContext: PropTypes.any,
 };
 
-const DecoratedFoldersTreeItem = withAppContext(withContextualMenu(withResourceWorkspace(FilterResourcesByFoldersItem)));
+const DecoratedFoldersTreeItem = withRouter(withAppContext(withContextualMenu(withResourceWorkspace(withDrag(FilterResourcesByFoldersItem)))));
 
-export default withAppContext(withContextualMenu(withResourceWorkspace(FilterResourcesByFoldersItem)));
+export default withRouter(withAppContext(withContextualMenu(withResourceWorkspace(withDrag(FilterResourcesByFoldersItem)))));

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

@@ -1,3 +1,5 @@
+import {ResourceWorkspaceFilterTypes} from "../../../contexts/ResourceWorkspaceContext";
+import MockPort from "../../../test/mock/MockPort";
 
 /**
  * Returns the default app context for the unit test
@@ -6,7 +8,8 @@
  */
 export function defaultAppContext(appContext) {
   const defaultAppContext = {
-    folders: foldersMock
+    port: new MockPort(),
+    folders: foldersMock,
   };
   return Object.assign(defaultAppContext, appContext || {});
 }
@@ -17,27 +20,34 @@ export function defaultAppContext(appContext) {
  */
 export function defaultProps() {
   return {
-    draggedItems: {
-      folders: [foldersMock[4]],
-      resources: []
-    },
-    folders: foldersMock,
-    folder: foldersMock[1],
-    selectedFolder: {
-      id: foldersMock[1].id
+    resourceWorkspaceContext: {
+      filter: {
+        type: ResourceWorkspaceFilterTypes.FOLDER,
+        payload: {
+          folder: foldersMock[0]
+        }
+      }
     },
-    isDragging: true,
-    onClose: jest.fn(),
-    onDragEnd: jest.fn(),
-    onDragStart: jest.fn(),
-    onDrop: jest.fn(),
-    onOpen: jest.fn(),
-    onSelect: jest.fn(),
-    openFolders: {
-      some: () => true
+    dragContext: {
+      dragging: true,
+      draggedItems: {
+        folders: [foldersMock[2]],
+        resources: []
+      },
+      onDragStart: jest.fn(),
+      onDragEnd: jest.fn(),
     },
+    folder: foldersMock[0],
     contextualMenuContext: {
       show: jest.fn()
+    },
+    history: {
+      push: jest.fn(),
+    },
+    match: {
+      params: {
+        filterByFolderId: foldersMock[2].id
+      }
     }
   };
 }
@@ -48,22 +58,24 @@ export function defaultProps() {
  */
 export function defaultPropsCloseFolders() {
   return {
-    draggedItems: {
-      folders: []
+    dragContext: {
+      dragging: false,
+      draggedItems: null
     },
-    folders: foldersMock,
-    folder: foldersMock[1],
-    onClose: jest.fn(),
-    onDragEnd: jest.fn(),
-    onDragStart: jest.fn(),
-    onDrop: jest.fn(),
-    onOpen: jest.fn(),
-    onSelect: jest.fn(),
-    openFolders: {
-      some: () => false
+    resourceWorkspaceContext: {
+      filter: {
+        type: ResourceWorkspaceFilterTypes.ALL,
+      }
     },
+    folder: foldersMock[0],
     contextualMenuContext: {
       show: jest.fn()
+    },
+    history: {
+      push: jest.fn()
+    },
+    match: {
+      params: jest.fn()
     }
   };
 }
@@ -73,27 +85,8 @@ export function defaultPropsCloseFolders() {
  */
 export const foldersMock = [
   {
-    "id": "9e03fd73-04c0-5514-95fa-1a6cf2c7c093",
-    "name": "Accounting",
-    "created": "2020-02-01T00:00:00+00:00",
-    "modified": "2020-02-01T00:00:00+00:00",
-    "created_by": "d57c10f5-639d-5160-9c81-8a0c6c4ec856",
-    "modified_by": "d57c10f5-639d-5160-9c81-8a0c6c4ec856",
-    "permission": {
-      "id": "6aada140-fe8b-5e69-a90f-ae0cec6d3dcf",
-      "aco": "Folder",
-      "aco_foreign_key": "9e03fd73-04c0-5514-95fa-1a6cf2c7c093",
-      "aro": "User",
-      "aro_foreign_key": "f848277c-5398-58f8-a82a-72397af2d450",
-      "type": 1,
-      "created": "2020-05-11T10:11:13+00:00",
-      "modified": "2020-05-11T10:11:13+00:00"
-    },
-    "folder_parent_id": null,
-    "personal": false
-  }, {
-    "id": "299f613b-0706-570a-8636-956186384e0a",
-    "name": "ParentCertificates",
+    "id": "3ed65efd-7c41-5906-9c02-71e2d95951da",
+    "name": "Certificates",
     "created": "2020-02-01T00:00:00+00:00",
     "modified": "2020-02-01T00:00:00+00:00",
     "created_by": "d57c10f5-639d-5160-9c81-8a0c6c4ec856",
@@ -111,8 +104,8 @@ export const foldersMock = [
     "folder_parent_id": null,
     "personal": false
   }, {
-    "id": "3ed65efd-7c41-5906-9c02-71e2d95951da",
-    "name": "Certificates",
+    "id": "3ed65efd-7c41-5906-9c02-71e2d95951db",
+    "name": "ChildCertificates2",
     "created": "2020-02-01T00:00:00+00:00",
     "modified": "2020-02-01T00:00:00+00:00",
     "created_by": "d57c10f5-639d-5160-9c81-8a0c6c4ec856",
@@ -127,11 +120,11 @@ export const foldersMock = [
       "created": "2020-05-11T10:11:13+00:00",
       "modified": "2020-05-11T10:11:13+00:00"
     },
-    "folder_parent_id": "299f613b-0706-570a-8636-956186384e0a",
+    "folder_parent_id": "3ed65efd-7c41-5906-9c02-71e2d95951da",
     "personal": false
   }, {
-    "id": "3ed65efd-7c41-5906-9c02-71e2d95951db",
-    "name": "ChildCertificates2",
+    "id": "3ed65efd-7c41-5906-9c02-71e2d95951dc",
+    "name": "ChildCertificates1",
     "created": "2020-02-01T00:00:00+00:00",
     "modified": "2020-02-01T00:00:00+00:00",
     "created_by": "d57c10f5-639d-5160-9c81-8a0c6c4ec856",
@@ -149,8 +142,8 @@ export const foldersMock = [
     "folder_parent_id": "3ed65efd-7c41-5906-9c02-71e2d95951da",
     "personal": false
   }, {
-    "id": "3ed65efd-7c41-5906-9c02-71e2d95951dc",
-    "name": "ChildCertificates1",
+    "id": "3ed65efd-7c41-5906-9c02-71e2d95951dg",
+    "name": "ChildCertificates3",
     "created": "2020-02-01T00:00:00+00:00",
     "modified": "2020-02-01T00:00:00+00:00",
     "created_by": "d57c10f5-639d-5160-9c81-8a0c6c4ec856",
@@ -165,7 +158,7 @@ export const foldersMock = [
       "created": "2020-05-11T10:11:13+00:00",
       "modified": "2020-05-11T10:11:13+00:00"
     },
-    "folder_parent_id": "3ed65efd-7c41-5906-9c02-71e2d95951da",
+    "folder_parent_id": "3ed65efd-7c41-5906-9c02-71e2d95951dc",
     "personal": false
   }
 ];

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

@@ -30,7 +30,10 @@ beforeEach(() => {
 
 describe("As LU I should see each folders", () => {
   let page; // The page to test against
-  const context = defaultAppContext(); // The applicative context
+  const appContext = defaultAppContext(); // The app context to pass
+  const requestMockImpl = jest.fn((message, data) => data);
+  const mockContextRequest = (context, implementation) => jest.spyOn(appContext.port, 'request').mockImplementation(implementation);
+  mockContextRequest(appContext, requestMockImpl);
 
   describe('As LU I should see and identify each folders open', () => {
     const props = defaultProps(); // The props to pass
@@ -42,52 +45,54 @@ describe("As LU I should see each folders", () => {
      */
 
     beforeEach(() => {
-      page = new FilterResourcesByFoldersItemPage(context, props);
+      page = new FilterResourcesByFoldersItemPage(appContext, props);
     });
 
-    it('As LU I should see all folders name', () => {
+    it('As LU I should see all folders name', async() => {
       expect(page.filterResourcesByFoldersItem.exists()).toBeTruthy();
+      await page.filterResourcesByFoldersItem.toggleDisplayChildFolders(2);
       expect(page.filterResourcesByFoldersItem.count).toBe(4);
-      expect(page.filterResourcesByFoldersItem.name(1)).toBe("ParentCertificates");
-      expect(page.filterResourcesByFoldersItem.name(2)).toBe("Certificates");
-      expect(page.filterResourcesByFoldersItem.name(3)).toBe("ChildCertificates1");
+      expect(page.filterResourcesByFoldersItem.name(1)).toBe("Certificates");
+      expect(page.filterResourcesByFoldersItem.name(2)).toBe("ChildCertificates1");
+      expect(page.filterResourcesByFoldersItem.name(3)).toBe("ChildCertificates3");
       expect(page.filterResourcesByFoldersItem.name(4)).toBe("ChildCertificates2");
+      expect(page.filterResourcesByFoldersItem.selectedFolderName).toBe("Certificates");
     });
 
     it('As LU I should filter by folder', async() => {
-      await page.filterResourcesByFoldersItem.filter(2);
-      expect(props.onSelect).toHaveBeenCalled();
+      await page.filterResourcesByFoldersItem.filter(1);
+      expect(props.history.push).toHaveBeenCalledWith('/app/folders/view/3ed65efd-7c41-5906-9c02-71e2d95951da');
     });
 
     it('As LU I should be able to open a contextual menu for a folder with the more button', async() => {
       await page.filterResourcesByFoldersItem.openContextualMenuWithButton(1);
-      expect(props.contextualMenuContext.show).toHaveBeenCalledWith(FilterResourcesByFoldersItemContextualMenu, {folder: foldersMock[1]});
+      expect(props.contextualMenuContext.show).toHaveBeenCalledWith(FilterResourcesByFoldersItemContextualMenu, {folder: foldersMock[0]});
     });
 
     it('As LU I should be able to open a contextual menu for a folder with right click on parent folder', async() => {
       await page.filterResourcesByFoldersItem.openContextualMenuWithRightClick(1);
-      expect(props.contextualMenuContext.show).toHaveBeenCalledWith(FilterResourcesByFoldersItemContextualMenu, {folder: foldersMock[1]});
+      expect(props.contextualMenuContext.show).toHaveBeenCalledWith(FilterResourcesByFoldersItemContextualMenu, {folder: foldersMock[0]});
     });
 
     it('As LU I should be able to open a contextual menu for a folder with right click on a child folder', async() => {
       await page.filterResourcesByFoldersItem.openContextualMenuWithRightClick(3);
-      expect(props.contextualMenuContext.show).toHaveBeenCalledWith(FilterResourcesByFoldersItemContextualMenu, {folder: foldersMock[1]});
+      expect(props.contextualMenuContext.show).toHaveBeenCalledWith(FilterResourcesByFoldersItemContextualMenu, {folder: foldersMock[0]});
     });
 
     it('As LU I should be able to drag and drop a folder on another folder', async() => {
       await page.filterResourcesByFoldersItem.dragStartOnFolder(3);
-      await page.filterResourcesByFoldersItem.dragEndOnFolder(3);
+      await page.filterResourcesByFoldersItem.dragEndOnFolder(1);
       await page.filterResourcesByFoldersItem.dragOverOnFolder(1);
       await page.filterResourcesByFoldersItem.dragLeaveOnFolder(1);
-      await page.filterResourcesByFoldersItem.onDropFolder(1);
-      expect(props.onDragStart).toHaveBeenCalled();
-      expect(props.onDragEnd).toHaveBeenCalled();
-      expect(props.onDrop).toHaveBeenCalled();
+      await page.filterResourcesByFoldersItem.onDropFolder(3);
+      expect(props.dragContext.onDragStart).toHaveBeenCalled();
+      expect(props.dragContext.onDragEnd).toHaveBeenCalled();
+      expect(appContext.port.request).toHaveBeenCalledWith("passbolt.folders.open-move-confirmation-dialog", {folders: ["3ed65efd-7c41-5906-9c02-71e2d95951dc"], resources:[], folderParentId: foldersMock[1].id});
     });
 
     it('As LU I should be able to close folder to hide the child folders', async() => {
-      await page.filterResourcesByFoldersItem.toggleDisplayChildFolders(2);
-      expect(props.onClose).toHaveBeenCalled();
+      await page.filterResourcesByFoldersItem.toggleDisplayChildFolders(1);
+      expect(page.filterResourcesByFoldersItem.count).toBe(1);
     });
   });
 
@@ -99,12 +104,12 @@ describe("As LU I should see each folders", () => {
      */
 
     beforeEach(() => {
-      page = new FilterResourcesByFoldersItemPage(context, props);
+      page = new FilterResourcesByFoldersItemPage(appContext, props);
     });
 
     it('As LU I should be able to open folder to see or not the child folders', async() => {
       await page.filterResourcesByFoldersItem.toggleDisplayChildFolders(1);
-      expect(props.onOpen).toHaveBeenCalled();
+      expect(page.filterResourcesByFoldersItem.count).toBe(3);
     });
   });
 });

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

@@ -15,9 +15,11 @@
 
 
 import {fireEvent, render, waitFor} from "@testing-library/react";
-import AppContext from "../../../contexts/AppContext";
 import React from "react";
 import FilterResourcesByFoldersItem from "./FilterResourcesByFoldersItem";
+import {BrowserRouter as Router} from "react-router-dom";
+import AppContext from "../../../contexts/AppContext";
+import {DragContext} from "../../../contexts/DragContext";
 
 /**
  * The FilterResourcesByFolders component represented as a page
@@ -31,7 +33,11 @@ export default class FilterResourcesByFoldersItemPage {
   constructor(appContext, props) {
     this._page = render(
       <AppContext.Provider value={appContext}>
-        <FilterResourcesByFoldersItem {...props}/>
+        <Router>
+          <DragContext.Provider value={props.dragContext}>
+            <FilterResourcesByFoldersItem.WrappedComponent {...props}/>
+          </DragContext.Provider>
+        </Router>
       </AppContext.Provider>
     );
     this.setupPageObjects();
@@ -83,10 +89,10 @@ export class FilterResourcesByFoldersItemPageObject {
   }
 
   /**
-   * Returns the folder selected
+   * Returns the name of the folder selected
    */
-  get isSelected() {
-    return this._container.querySelector('li.folder-item .row.selected') !== null;
+  get selectedFolderName() {
+    return this._container.querySelector('li.folder-item .row.selected').textContent;
   }
 
   /**

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

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