✨(frontend) add import document area in docs grid

AntoLC · AntoLC · commit 4b195331435b · 2025-12-02T17:50:58.000+01:00
Add import document area with drag and drop
support in the docs grid component.
We can now import docx and and md files just
by dropping them into the designated area.

We are using the `react-dropzone` library to
handle the drag and drop functionality.
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/assets/test_import.docx b/src/frontend/apps/e2e/__tests__/app-impress/assets/test_import.docx
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/assets/test_import.md b/src/frontend/apps/e2e/__tests__/app-impress/assets/test_import.md
@@ -0,0 +1,63 @@
+![473389927-e4ff1794-69f3-460a-85f8-fec993cd74d6.png](http://localhost:3000/assets/logo-suite-numerique.png)![497094770-53e5f8e2-c93e-4a0b-a82f-cd184fd03f51.svg](http://localhost:3000/assets/assets/icon-docs.svg)
+
+# Lorem Ipsum Markdown Document
+
+## Introduction
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.
+
+### Subsection 1.1
+
+* **Bold text**: Lorem ipsum dolor sit amet.
+
+* *Italic text*: Consectetur adipiscing elit.
+
+* ~~Strikethrough text~~: Nullam auctor, nisl eget ultricies tincidunt.
+
+1. First item in an ordered list.
+
+2. Second item in an ordered list.
+
+   * Indented bullet point.
+
+   * Another indented bullet point.
+
+3. Third item in an ordered list.
+
+### Subsection 1.2
+
+**Code block:**
+
+```python
+def hello_world():
+    print("Hello, world!")
+```
+
+**Blockquote:**
+
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt.
+
+**Horizontal rule:**
+
+***
+
+**Table:**
+
+| Syntax    | Description |
+| --------- | ----------- |
+| Header    | Title       |
+| Paragraph | Text        |
+
+**Inline code:**
+
+Use the `printf()` function.
+
+**Link:** [Example](https://www.example.com)
+
+**Image:**
+
+![Alt text](https://via.placeholder.com/150)
+
+## Conclusion
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-import.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-import.spec.ts
@@ -0,0 +1,98 @@
+import { readFileSync } from 'fs';
+import path from 'path';
+
+import { Page, expect, test } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.describe('Doc Import', () => {
+  test('it imports 2 docs with the import icon', async ({ page }) => {
+    const fileChooserPromise = page.waitForEvent('filechooser');
+    await page.getByLabel('Open the upload dialog').click();
+
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(path.join(__dirname, 'assets/test_import.docx'));
+    await fileChooser.setFiles(path.join(__dirname, 'assets/test_import.md'));
+
+    await expect(
+      page.getByText(
+        'The document "test_import.docx" has been successfully imported',
+      ),
+    ).toBeVisible();
+    await expect(
+      page.getByText(
+        'The document "test_import.md" has been successfully imported',
+      ),
+    ).toBeVisible();
+
+    const docsGrid = page.getByTestId('docs-grid');
+    await expect(docsGrid.getByText('test_import.docx')).toBeVisible();
+    await expect(docsGrid.getByText('test_import.md')).toBeVisible();
+  });
+
+  test('it imports 2 docs with the drag and drop area', async ({ page }) => {
+    const docsGrid = page.getByTestId('docs-grid');
+    await expect(docsGrid).toBeVisible();
+
+    await dragAndDropFiles(page, "[data-testid='docs-grid']", [
+      {
+        filePath: path.join(__dirname, 'assets/test_import.docx'),
+        fileName: 'test_import.docx',
+        fileType:
+          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      },
+      {
+        filePath: path.join(__dirname, 'assets/test_import.md'),
+        fileName: 'test_import.md',
+        fileType: 'text/markdown',
+      },
+    ]);
+
+    // Wait for success messages
+    await expect(
+      page.getByText(
+        'The document "test_import.docx" has been successfully imported',
+      ),
+    ).toBeVisible();
+    await expect(
+      page.getByText(
+        'The document "test_import.md" has been successfully imported',
+      ),
+    ).toBeVisible();
+
+    await expect(docsGrid.getByText('test_import.docx').first()).toBeVisible();
+    await expect(docsGrid.getByText('test_import.md').first()).toBeVisible();
+  });
+});
+
+const dragAndDropFiles = async (
+  page: Page,
+  selector: string,
+  files: Array<{ filePath: string; fileName: string; fileType?: string }>,
+) => {
+  const filesData = files.map((file) => ({
+    bufferData: `data:application/octet-stream;base64,${readFileSync(file.filePath).toString('base64')}`,
+    fileName: file.fileName,
+    fileType: file.fileType || '',
+  }));
+
+  const dataTransfer = await page.evaluateHandle(async (filesInfo) => {
+    const dt = new DataTransfer();
+
+    for (const fileInfo of filesInfo) {
+      const blobData = await fetch(fileInfo.bufferData).then((res) =>
+        res.blob(),
+      );
+      const file = new File([blobData], fileInfo.fileName, {
+        type: fileInfo.fileType,
+      });
+      dt.items.add(file);
+    }
+
+    return dt;
+  }, filesData);
+
+  await page.dispatchEvent(selector, 'drop', { dataTransfer });
+};
diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json
@@ -62,6 +62,7 @@
     "react": "*",
     "react-aria-components": "1.13.0",
     "react-dom": "*",
+    "react-dropzone": "14.3.8",
     "react-i18next": "16.3.5",
     "react-intersection-observer": "10.0.0",
     "react-resizable-panels": "3.0.6",
diff --git a/src/frontend/apps/impress/src/api/helpers.tsx b/src/frontend/apps/impress/src/api/helpers.tsx
@@ -20,7 +20,7 @@ export type DefinedInitialDataInfiniteOptionsAPI<
   QueryKey,
   TPageParam
 >;
-
+export type UseInfiniteQueryResultAPI<Q> = InfiniteData<Q>;
 export type InfiniteQueryConfig<Q> = Omit<
   DefinedInitialDataInfiniteOptionsAPI<Q>,
   'queryKey' | 'initialData' | 'getNextPageParam' | 'initialPageParam'
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/api/useImportDoc.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/api/useImportDoc.tsx
@@ -0,0 +1,88 @@
+import { VariantType, useToastProvider } from '@openfun/cunningham-react';
+import {
+  UseMutationOptions,
+  useMutation,
+  useQueryClient,
+} from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import {
+  APIError,
+  UseInfiniteQueryResultAPI,
+  errorCauses,
+  fetchAPI,
+} from '@/api';
+import { Doc, DocsResponse, KEY_LIST_DOC } from '@/docs/doc-management';
+
+export const importDoc = async (file: File): Promise<Doc> => {
+  const form = new FormData();
+  form.append('file', file);
+
+  const response = await fetchAPI(`documents/`, {
+    method: 'POST',
+    body: form,
+    withoutContentType: true,
+  });
+
+  if (!response.ok) {
+    throw new APIError('Failed to import the doc', await errorCauses(response));
+  }
+
+  return response.json() as Promise<Doc>;
+};
+
+type UseImportDocOptions = UseMutationOptions<Doc, APIError, File>;
+
+export function useImportDoc(props?: UseImportDocOptions) {
+  const { toast } = useToastProvider();
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<Doc, APIError, File>({
+    mutationFn: importDoc,
+    ...props,
+    onSuccess: (...successProps) => {
+      queryClient.setQueriesData<UseInfiniteQueryResultAPI<DocsResponse>>(
+        { queryKey: [KEY_LIST_DOC] },
+        (oldData) => {
+          if (!oldData || oldData?.pages.length === 0) {
+            return oldData;
+          }
+
+          return {
+            ...oldData,
+            pages: oldData.pages.map((page, index) => {
+              // Add the new doc to the first page only
+              if (index === 0) {
+                return {
+                  ...page,
+                  results: [successProps[0], ...page.results],
+                };
+              }
+              return page;
+            }),
+          };
+        },
+      );
+
+      toast(
+        t('The document "{{documentName}}" has been successfully imported', {
+          documentName: successProps?.[0].title || '',
+        }),
+        VariantType.SUCCESS,
+      );
+
+      props?.onSuccess?.(...successProps);
+    },
+    onError: (...errorProps) => {
+      toast(
+        t(`The document "{{documentName}}" import has failed`, {
+          documentName: errorProps?.[1].name || '',
+        }),
+        VariantType.ERROR,
+      );
+
+      props?.onError?.(...errorProps);
+    },
+  });
+}
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
@@ -1,5 +1,10 @@
-import { Button } from '@openfun/cunningham-react';
-import { useMemo } from 'react';
+import {
+  Button,
+  VariantType,
+  useToastProvider,
+} from '@openfun/cunningham-react';
+import { useMemo, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { InView } from 'react-intersection-observer';
 import { css } from 'styled-components';
@@ -10,6 +15,7 @@ import { DocDefaultFilter, useInfiniteDocs } from '@/docs/doc-management';
 import { useResponsiveStore } from '@/stores';
 
 import { useInfiniteDocsTrashbin } from '../api';
+import { useImportDoc } from '../api/useImportDoc';
 import { useResponsiveDocGrid } from '../hooks/useResponsiveDocGrid';
 
 import {
@@ -25,6 +31,41 @@ export const DocsGrid = ({
   target = DocDefaultFilter.ALL_DOCS,
 }: DocsGridProps) => {
   const { t } = useTranslation();
+  const [isDragOver, setIsDragOver] = useState(false);
+  const { toast } = useToastProvider();
+  const { getRootProps, getInputProps, open } = useDropzone({
+    accept: {
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+        ['.docx'],
+      'text/markdown': ['.md'],
+    },
+    onDrop(acceptedFiles) {
+      setIsDragOver(false);
+      for (const file of acceptedFiles) {
+        importDoc(file);
+      }
+    },
+    onDragEnter: () => {
+      setIsDragOver(true);
+    },
+    onDragLeave: () => {
+      setIsDragOver(false);
+    },
+    onDropRejected(fileRejections) {
+      toast(
+        t(
+          `The document "{{documentName}}" import has failed (only .docx and .md files are allowed)`,
+          {
+            documentName: fileRejections?.[0].file.name || '',
+          },
+        ),
+        VariantType.ERROR,
+      );
+    },
+    noClick: true,
+  });
+  const { mutate: importDoc } = useImportDoc();
+  const withUpload = target === DocDefaultFilter.ALL_DOCS;
 
   const { isDesktop } = useResponsiveStore();
   const { flexLeft, flexRight } = useResponsiveDocGrid();
@@ -77,12 +118,24 @@ export const DocsGrid = ({
         $width="100%"
         $css={css`
           ${!isDesktop ? 'border: none;' : ''}
+          ${isDragOver
+            ? `
+              border: 2px dashed var(--c--contextuals--border--semantic--brand--primary);
+              background-color: var(--c--contextuals--background--semantic--brand--tertiary);
+            `
+            : ''}
         `}
         $padding={{
           bottom: 'md',
         }}
+        {...(withUpload ? getRootProps({ className: 'dropzone' }) : {})}
       >
-        <DocGridTitleBar target={target} />
+        {withUpload && <input {...getInputProps()} />}
+        <DocGridTitleBar
+          target={target}
+          onUploadClick={open}
+          withUpload={withUpload}
+        />
 
         {!hasDocs && !loading && (
           <Box $padding={{ vertical: 'sm' }} $align="center" $justify="center">
@@ -158,7 +211,15 @@ export const DocsGrid = ({
   );
 };
 
-const DocGridTitleBar = ({ target }: { target: DocDefaultFilter }) => {
+const DocGridTitleBar = ({
+  target,
+  onUploadClick,
+  withUpload,
+}: {
+  target: DocDefaultFilter;
+  onUploadClick: () => void;
+  withUpload: boolean;
+}) => {
   const { t } = useTranslation();
   const { isDesktop } = useResponsiveStore();
 
@@ -200,6 +261,19 @@ const DocGridTitleBar = ({ target }: { target: DocDefaultFilter }) => {
           {title}
         </Text>
       </Box>
+      {withUpload && (
+        <Button
+          color="brand"
+          variant="tertiary"
+          onClick={(e) => {
+            e.stopPropagation();
+            onUploadClick();
+          }}
+          aria-label={t('Open the upload dialog')}
+        >
+          <Icon iconName="upload_file" $withThemeInherited />
+        </Button>
+      )}
     </Box>
   );
 };
diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
