✨(frontend) Added drag-and-drop functionality for document management

Added a new feature for moving documents within the user interface via
drag-and-drop. This includes the creation of Draggable and Droppable
components, as well as tests to verify document creation and movement
behavior. Changes have also been made to document types to include user
roles and child management capabilities.

src/frontend/apps/e2e/__tests__/app-impress/common.ts

@@ -239,6 +239,7 @@ export const mockedDocument = async (page: Page, json: object) => {
           },
           link_reach: 'restricted',
           created_at: '2021-09-01T09:00:00Z',
+          user_roles: ['owner'],
           ...json,
         },
       });
@@ -248,6 +249,22 @@ export const mockedDocument = async (page: Page, json: object) => {
   });
 };
 
+export const mockedListDocs = async (page: Page, data: object[] = []) => {
+  await page.route('**/documents/**/', async (route) => {
+    const request = route.request();
+    if (request.method().includes('GET') && request.url().includes('page=')) {
+      await route.fulfill({
+        json: {
+          count: data.length,
+          next: null,
+          previous: null,
+          results: data,
+        },
+      });
+    }
+  });
+};
+
 export const mockedInvitations = async (page: Page, json?: object) => {
   await page.route('**/invitations/**/', async (route) => {
     const request = route.request();

src/frontend/apps/e2e/__tests__/app-impress/doc-grid-dnd.spec.ts

@@ -0,0 +1,311 @@
+import { expect, test } from '@playwright/test';
+
+import { createDoc, mockedListDocs } from './common';
+
+test.describe('Doc grid dnd', () => {
+  test('it creates a doc', async ({ page, browserName }) => {
+    await page.goto('/');
+    const header = page.locator('header').first();
+    await createDoc(page, 'Draggable doc', browserName, 1);
+    await header.locator('h2').getByText('Docs').click();
+    await createDoc(page, 'Droppable doc', browserName, 1);
+    await header.locator('h2').getByText('Docs').click();
+
+    const response = await page.waitForResponse(
+      (response) =>
+        response.url().endsWith('documents/?page=1') &&
+        response.status() === 200,
+    );
+    const responseJson = await response.json();
+
+    const items = responseJson.results;
+
+    const docsGrid = page.getByTestId('docs-grid');
+    await expect(docsGrid).toBeVisible();
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
+    const draggableElement = page.getByTestId(`draggable-doc-${items[1].id}`);
+    const dropZone = page.getByTestId(`droppable-doc-${items[0].id}`);
+    await expect(draggableElement).toBeVisible();
+    await expect(dropZone).toBeVisible();
+
+    // Obtenir les positions des éléments
+    const draggableBoundingBox = await draggableElement.boundingBox();
+    const dropZoneBoundingBox = await dropZone.boundingBox();
+
+    expect(draggableBoundingBox).toBeDefined();
+    expect(dropZoneBoundingBox).toBeDefined();
+
+    // eslint-disable-next-line playwright/no-conditional-in-test
+    if (!draggableBoundingBox || !dropZoneBoundingBox) {
+      throw new Error('Impossible de déterminer la position des éléments');
+    }
+
+    await page.mouse.move(
+      draggableBoundingBox.x + draggableBoundingBox.width / 2,
+      draggableBoundingBox.y + draggableBoundingBox.height / 2,
+    );
+    await page.mouse.down();
+
+    // Déplacer vers la zone cible
+    await page.mouse.move(
+      dropZoneBoundingBox.x + dropZoneBoundingBox.width / 2,
+      dropZoneBoundingBox.y + dropZoneBoundingBox.height / 2,
+      { steps: 10 }, // Rendre le mouvement plus fluide
+    );
+
+    const dragOverlay = page.getByTestId('drag-doc-overlay');
+
+    await expect(dragOverlay).toBeVisible();
+    await expect(dragOverlay).toHaveText(items[1].title as string);
+    await page.mouse.up();
+
+    await expect(dragOverlay).toBeHidden();
+  });
+
+  test('it checks cant drop when we have not the minimum role', async ({
+    page,
+  }) => {
+    await mockedListDocs(page, data);
+    await page.goto('/');
+    const docsGrid = page.getByTestId('docs-grid');
+    await expect(docsGrid).toBeVisible();
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
+
+    const canDropAndDrag = page.getByTestId('droppable-doc-can-drop-and-drag');
+
+    const noDropAndNoDrag = page.getByTestId(
+      'droppable-doc-no-drop-and-no-drag',
+    );
+
+    await expect(canDropAndDrag).toBeVisible();
+
+    await expect(noDropAndNoDrag).toBeVisible();
+
+    const canDropAndDragBoundigBox = await canDropAndDrag.boundingBox();
+
+    const noDropAndNoDragBoundigBox = await noDropAndNoDrag.boundingBox();
+
+    // eslint-disable-next-line playwright/no-conditional-in-test
+    if (!canDropAndDragBoundigBox || !noDropAndNoDragBoundigBox) {
+      throw new Error('Impossible de déterminer la position des éléments');
+    }
+
+    await page.mouse.move(
+      canDropAndDragBoundigBox.x + canDropAndDragBoundigBox.width / 2,
+      canDropAndDragBoundigBox.y + canDropAndDragBoundigBox.height / 2,
+    );
+
+    await page.mouse.down();
+
+    await page.mouse.move(
+      noDropAndNoDragBoundigBox.x + noDropAndNoDragBoundigBox.width / 2,
+      noDropAndNoDragBoundigBox.y + noDropAndNoDragBoundigBox.height / 2,
+      { steps: 10 },
+    );
+
+    const dragOverlay = page.getByTestId('drag-doc-overlay');
+
+    await expect(dragOverlay).toBeVisible();
+    await expect(dragOverlay).toHaveText(
+      'You must be at least the editor of the target document',
+    );
+
+    await page.mouse.up();
+  });
+
+  test('it checks cant drag when we have not the minimum role', async ({
+    page,
+  }) => {
+    await mockedListDocs(page, data);
+    await page.goto('/');
+    const docsGrid = page.getByTestId('docs-grid');
+    await expect(docsGrid).toBeVisible();
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
+
+    const canDropAndDrag = page.getByTestId('droppable-doc-can-drop-and-drag');
+
+    const noDropAndNoDrag = page.getByTestId(
+      'droppable-doc-no-drop-and-no-drag',
+    );
+
+    await expect(canDropAndDrag).toBeVisible();
+
+    await expect(noDropAndNoDrag).toBeVisible();
+
+    const canDropAndDragBoundigBox = await canDropAndDrag.boundingBox();
+
+    const noDropAndNoDragBoundigBox = await noDropAndNoDrag.boundingBox();
+
+    // eslint-disable-next-line playwright/no-conditional-in-test
+    if (!canDropAndDragBoundigBox || !noDropAndNoDragBoundigBox) {
+      throw new Error('Impossible de déterminer la position des éléments');
+    }
+
+    await page.mouse.move(
+      noDropAndNoDragBoundigBox.x + noDropAndNoDragBoundigBox.width / 2,
+      noDropAndNoDragBoundigBox.y + noDropAndNoDragBoundigBox.height / 2,
+    );
+
+    await page.mouse.down();
+
+    await page.mouse.move(
+      canDropAndDragBoundigBox.x + canDropAndDragBoundigBox.width / 2,
+      canDropAndDragBoundigBox.y + canDropAndDragBoundigBox.height / 2,
+      { steps: 10 },
+    );
+
+    const dragOverlay = page.getByTestId('drag-doc-overlay');
+
+    await expect(dragOverlay).toBeVisible();
+    await expect(dragOverlay).toHaveText(
+      'You must have admin rights to move the document',
+    );
+
+    await page.mouse.up();
+  });
+});
+
+const data = [
+  {
+    id: 'can-drop-and-drag',
+    abilities: {
+      accesses_manage: true,
+      accesses_view: true,
+      ai_transform: true,
+      ai_translate: true,
+      attachment_upload: true,
+      children_list: true,
+      children_create: true,
+      collaboration_auth: true,
+      descendants: true,
+      destroy: true,
+      favorite: true,
+      link_configuration: true,
+      invite_owner: true,
+      move: true,
+      partial_update: true,
+      restore: true,
+      retrieve: true,
+      media_auth: true,
+      link_select_options: {
+        restricted: ['reader', 'editor'],
+        authenticated: ['reader', 'editor'],
+        public: ['reader', 'editor'],
+      },
+      tree: true,
+      update: true,
+      versions_destroy: true,
+      versions_list: true,
+      versions_retrieve: true,
+    },
+    created_at: '2025-03-14T14:45:22.527221Z',
+    creator: 'bc6895e0-8f6d-4b00-827d-c143aa6b2ecb',
+    depth: 1,
+    excerpt: null,
+    is_favorite: false,
+    link_role: 'reader',
+    link_reach: 'restricted',
+    nb_accesses_ancestors: 1,
+    nb_accesses_direct: 1,
+    numchild: 5,
+    path: '000000o',
+    title: 'Can drop and drag',
+    updated_at: '2025-03-14T14:45:27.699542Z',
+    user_roles: ['owner'],
+  },
+  {
+    id: 'can-only-drop',
+    title: 'Can only drop',
+    abilities: {
+      accesses_manage: true,
+      accesses_view: true,
+      ai_transform: true,
+      ai_translate: true,
+      attachment_upload: true,
+      children_list: true,
+      children_create: true,
+      collaboration_auth: true,
+      descendants: true,
+      destroy: true,
+      favorite: true,
+      link_configuration: true,
+      invite_owner: true,
+      move: true,
+      partial_update: true,
+      restore: true,
+      retrieve: true,
+      media_auth: true,
+      link_select_options: {
+        restricted: ['reader', 'editor'],
+        authenticated: ['reader', 'editor'],
+        public: ['reader', 'editor'],
+      },
+      tree: true,
+      update: true,
+      versions_destroy: true,
+      versions_list: true,
+      versions_retrieve: true,
+    },
+    created_at: '2025-03-14T14:45:22.527221Z',
+    creator: 'bc6895e0-8f6d-4b00-827d-c143aa6b2ecb',
+    depth: 1,
+    excerpt: null,
+    is_favorite: false,
+    link_role: 'reader',
+    link_reach: 'restricted',
+    nb_accesses_ancestors: 1,
+    nb_accesses_direct: 1,
+    numchild: 5,
+    path: '000000o',
+
+    updated_at: '2025-03-14T14:45:27.699542Z',
+    user_roles: ['editor'],
+  },
+  {
+    id: 'no-drop-and-no-drag',
+    abilities: {
+      accesses_manage: false,
+      accesses_view: true,
+      ai_transform: false,
+      ai_translate: false,
+      attachment_upload: false,
+      children_list: true,
+      children_create: false,
+      collaboration_auth: true,
+      descendants: true,
+      destroy: false,
+      favorite: true,
+      link_configuration: false,
+      invite_owner: false,
+      move: false,
+      partial_update: false,
+      restore: false,
+      retrieve: true,
+      media_auth: true,
+      link_select_options: {
+        restricted: ['reader', 'editor'],
+        authenticated: ['reader', 'editor'],
+        public: ['reader', 'editor'],
+      },
+      tree: true,
+      update: false,
+      versions_destroy: false,
+      versions_list: true,
+      versions_retrieve: true,
+    },
+    created_at: '2025-03-14T14:44:16.032773Z',
+    creator: '9264f420-f018-4bd6-96ae-4788f41af56d',
+    depth: 1,
+    excerpt: null,
+    is_favorite: false,
+    link_role: 'reader',
+    link_reach: 'restricted',
+    nb_accesses_ancestors: 14,
+    nb_accesses_direct: 14,
+    numchild: 0,
+    path: '000000l',
+    title: 'No drop and no drag',
+    updated_at: '2025-03-14T14:44:16.032774Z',
+    user_roles: ['reader'],
+  },
+];

src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts

@@ -59,6 +59,7 @@ test.describe('Documents Grid mobile', () => {
                 link_reach: 'public',
                 created_at: '2024-10-07T13:02:41.085298Z',
                 updated_at: '2024-10-07T13:30:21.829690Z',
+                user_roles: ['owner'],
               },
             ],
           },
@@ -168,6 +169,7 @@ test.describe('Document grid item options', () => {
               },
               link_reach: 'restricted',
               created_at: '2021-09-01T09:00:00Z',
+              user_roles: ['editor'],
             },
           ],
         },

src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts

@@ -70,7 +70,9 @@ test.describe('Doc Header', () => {
     ).toBeVisible();
 
     await expect(
-      page.getByText(`Are you sure you want to delete this document ?`),
+      page.getByText(
+        `Are you sure you want to delete the document "${randomDoc}"?`,
+      ),
     ).toBeVisible();
 
     await page