🛂(frontend) block drag n drop when not desktop

Scrolling on mobile devices was causing issues
with drag and drop functionality, documents were
being moved unintentionally.
This commit disables drag and drop on mobile devices
to prevent this issue.

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

@@ -1,6 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 import { createDoc, mockedListDocs } from './utils-common';
+import { createRootSubPage } from './utils-sub-pages';
 
 test.describe('Doc grid dnd', () => {
   test('it creates a doc', async ({ page, browserName }) => {
@@ -165,6 +166,40 @@ test.describe('Doc grid dnd', () => {
   });
 });
 
+test.describe('Doc grid dnd mobile', () => {
+  test.use({ viewport: { width: 500, height: 1200 } });
+
+  test('DND is deactivated on mobile', async ({ page, browserName }) => {
+    await page.goto('/');
+
+    const docsGrid = page.getByTestId('docs-grid');
+    await expect(page.getByTestId('docs-grid')).toBeVisible();
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
+
+    await expect(docsGrid.getByRole('row').first()).toBeVisible();
+    await expect(docsGrid.locator('.--docs--grid-droppable')).toHaveCount(0);
+
+    await createDoc(page, 'Draggable doc mobile', browserName, 1, false, true);
+
+    await createRootSubPage(
+      page,
+      browserName,
+      'Draggable doc mobile child',
+      true,
+    );
+
+    await page
+      .getByRole('button', { name: 'Open the header menu' })
+      .getByText('menu')
+      .click();
+
+    await expect(page.locator('.--docs-sub-page-item').first()).toHaveAttribute(
+      'draggable',
+      'false',
+    );
+  });
+});
+
 const data = [
   {
     id: 'can-drop-and-drag',

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

@@ -79,15 +79,23 @@ export const createDoc = async (
   browserName: string,
   length: number = 1,
   isChild: boolean = false,
+  isMobile: boolean = false,
 ) => {
   const randomDocs = randomName(docName, browserName, length);
 
   for (let i = 0; i < randomDocs.length; i++) {
-    if (!isChild) {
+    if (!isChild && !isMobile) {
       const header = page.locator('header').first();
       await header.locator('h2').getByText('Docs').click();
     }
 
+    if (isMobile) {
+      await page
+        .getByRole('button', { name: 'Open the header menu' })
+        .getByText('menu')
+        .click();
+    }
+
     await page
       .getByRole('button', {
         name: 'New doc',

src/frontend/apps/e2e/__tests__/app-impress/utils-sub-pages.ts

@@ -10,7 +10,15 @@ export const createRootSubPage = async (
   page: Page,
   browserName: string,
   docName: string,
+  isMobile: boolean = false,
 ) => {
+  if (isMobile) {
+    await page
+      .getByRole('button', { name: 'Open the header menu' })
+      .getByText('menu')
+      .click();
+  }
+
   // Get response
   const responsePromise = waitForResponseCreateDoc(page);
   await clickOnAddRootSubPage(page);
@@ -18,6 +26,13 @@ export const createRootSubPage = async (
   expect(response.ok()).toBeTruthy();
   const subPageJson = (await response.json()) as { id: string };
 
+  if (isMobile) {
+    await page
+      .getByRole('button', { name: 'Open the header menu' })
+      .getByText('menu')
+      .click();
+  }
+
   // Get doc tree
   const docTree = page.getByTestId('doc-tree');
   await expect(docTree).toBeVisible();
@@ -29,6 +44,13 @@ export const createRootSubPage = async (
   await expect(subPageItem).toBeVisible();
   await subPageItem.click();
 
+  if (isMobile) {
+    await page
+      .getByRole('button', { name: 'Open the header menu' })
+      .getByText('close')
+      .click();
+  }
+
   // Update sub page name
   const randomDocs = randomName(docName, browserName, 1);
   await updateDocTitle(page, randomDocs[0]);