🛂(frontend) block drag n drop when not desktop

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to
 - 🔧(project) change env.d system by using local files #1200
 - ⚡️(frontend) improve tree stability #1207
 - ⚡️(frontend) improve accessibility #1232
+- 🛂(frontend) block drag n drop when not desktop #1239
 
 ### Fixed
 

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,14 +10,29 @@ 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);
   const response = await responsePromise;
   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]);

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx

@@ -71,6 +71,7 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
   return (
     <Box
       className="--docs-sub-page-item"
+      draggable={doc.abilities.move && isDesktop}
       $position="relative"
       $css={css`
         background-color: ${actionsOpen

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTree.tsx

@@ -2,6 +2,7 @@ import {
   OpenMap,
   TreeView,
   TreeViewMoveResult,
+  useResponsive,
   useTreeContext,
 } from '@gouvfr-lasuite/ui-kit';
 import { useRouter } from 'next/navigation';
@@ -29,6 +30,7 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
   const [rootActionsOpen, setRootActionsOpen] = useState(false);
   const treeContext = useTreeContext<Doc | null>();
   const router = useRouter();
+  const { isDesktop } = useResponsive();
 
   const [initialOpenState, setInitialOpenState] = useState<OpenMap | undefined>(
     undefined,
@@ -243,13 +245,13 @@ export const DocTree = ({ currentDoc }: DocTreeProps) => {
           canDrop={({ parentNode }) => {
             const parentDoc = parentNode?.data.value as Doc;
             if (!parentDoc) {
-              return currentDoc.abilities.move;
+              return currentDoc.abilities.move && isDesktop;
             }
-            return parentDoc.abilities.move;
+            return parentDoc.abilities.move && isDesktop;
           }}
           canDrag={(node) => {
             const doc = node.value as Doc;
-            return doc.abilities.move;
+            return doc.abilities.move && isDesktop;
           }}
           rootNodeId={treeContext.root.id}
           renderNode={DocSubPageItem}

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridContentList.tsx

@@ -51,7 +51,9 @@ type DocGridContentListProps = {
   docs: Doc[];
 };
 
-export const DocGridContentList = ({ docs }: DocGridContentListProps) => {
+export const DraggableDocGridContentList = ({
+  docs,
+}: DocGridContentListProps) => {
   const { mutateAsync: handleMove, isError } = useMoveDoc();
   const queryClient = useQueryClient();
   const modalConfirmation = useModal();
@@ -223,7 +225,7 @@ export const DocGridContentList = ({ docs }: DocGridContentListProps) => {
   );
 };
 
-interface DocGridItemProps {
+interface DraggableDocGridItemProps {
   doc: Doc;
   dragMode: boolean;
   canDrag: boolean;
@@ -235,7 +237,7 @@ export const DraggableDocGridItem = ({
   dragMode,
   canDrag,
   updateCanDrop,
-}: DocGridItemProps) => {
+}: DraggableDocGridItemProps) => {
   const canDrop = doc.abilities.move;
 
   return (
@@ -252,3 +254,13 @@ export const DraggableDocGridItem = ({
     </Droppable>
   );
 };
+
+export const DocGridContentList = ({ docs }: DocGridContentListProps) => {
+  if (docs.length === 0) {
+    return null;
+  }
+
+  return docs.map((doc) => (
+    <DocsGridItem dragMode={false} doc={doc} key={doc.id} />
+  ));
+};

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx

@@ -9,7 +9,10 @@ import { useResponsiveStore } from '@/stores';
 
 import { useResponsiveDocGrid } from '../hooks/useResponsiveDocGrid';
 
-import { DocGridContentList } from './DocGridContentList';
+import {
+  DocGridContentList,
+  DraggableDocGridContentList,
+} from './DocGridContentList';
 import { DocsGridLoader } from './DocsGridLoader';
 
 type DocsGridProps = {
@@ -118,7 +121,11 @@ export const DocsGrid = ({
               )}
             </Box>
 
-            <DocGridContentList docs={docs} />
+            {isDesktop ? (
+              <DraggableDocGridContentList docs={docs} />
+            ) : (
+              <DocGridContentList docs={docs} />
+            )}
 
             {hasNextPage && !loading && (
               <InView