♻️(frontend) one click create doc

We can now create a doc in one click.
The doc will be created with a default name,
the user will be able to edit the name inline.

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to
 
 - ✨(ci) add security scan #291
 - ✨(frontend) Activate versions feature #240
+- ✨(frontend) one-click document creation #275
 
 ## Changed
 

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

@@ -7,48 +7,12 @@ test.beforeEach(async ({ page }) => {
 });
 
 test.describe('Doc Create', () => {
-  test('checks all the create doc elements are visible', async ({ page }) => {
-    const buttonCreateHomepage = page.getByRole('button', {
-      name: 'Create a new document',
-    });
-    await buttonCreateHomepage.click();
-    await expect(buttonCreateHomepage).toBeHidden();
-
-    const card = page.getByRole('dialog').first();
-
-    await expect(
-      card.locator('h2').getByText('Create a new document'),
-    ).toBeVisible();
-    await expect(card.getByLabel('Document name')).toBeVisible();
-
-    await expect(
-      card.getByRole('button', {
-        name: 'Create the document',
-      }),
-    ).toBeVisible();
-
-    await expect(card.getByLabel('Close the modal')).toBeVisible();
-  });
-
-  test('checks the cancel button interaction', async ({ page }) => {
-    const buttonCreateHomepage = page.getByRole('button', {
-      name: 'Create a new document',
-    });
-    await buttonCreateHomepage.click();
-    await expect(buttonCreateHomepage).toBeHidden();
-
-    const card = page.getByRole('dialog').first();
-
-    await card.getByLabel('Close the modal').click();
-
-    await expect(buttonCreateHomepage).toBeVisible();
-  });
-
   test('it creates a doc', async ({ page, browserName }) => {
     const [docTitle] = await createDoc(page, 'My new doc', browserName, 1);
 
-    expect(await page.locator('title').textContent()).toMatch(
-      /My new doc - Docs/,
+    await page.waitForFunction(
+      () => document.title.match(/My new doc - Docs/),
+      { timeout: 5000 },
     );
 
     const header = page.locator('header').first();
@@ -59,7 +23,8 @@ test.describe('Doc Create', () => {
       .getByRole('table');
 
     await expect(datagrid.getByLabel('Loading data')).toBeHidden();
-
-    await expect(datagrid.getByText(docTitle)).toBeVisible();
+    await expect(datagrid.getByText(docTitle)).toBeVisible({
+      timeout: 5000,
+    });
   });
 });

src/frontend/apps/impress/src/__tests__/pages.test.tsx

@@ -5,6 +5,14 @@ import { AppWrapper } from '@/tests/utils';
 
 import Page from '../pages';
 
+jest.mock('next/navigation', () => ({
+  useRouter() {
+    return {
+      push: jest.fn(),
+    };
+  },
+}));
+
 describe('Page', () => {
   it('checks Page rendering', () => {
     render(<Page />, { wrapper: AppWrapper });

src/frontend/apps/impress/src/features/docs/doc-management/api/index.ts

@@ -1,3 +1,4 @@
+export * from './useCreateDoc';
 export * from './useDoc';
 export * from './useDocs';
 export * from './useUpdateDoc';

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

@@ -1,33 +1,34 @@
 import { Button } from '@openfun/cunningham-react';
-import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Box, Card } from '@/components';
-import { ModalCreateDoc } from '@/features/docs/doc-management';
+import { Box } from '@/components';
+import { useCreateDoc, useTrans } from '@/features/docs/doc-management/';
 
 import { DocsGrid } from './DocsGrid';
 
 export const DocsGridContainer = () => {
   const { t } = useTranslation();
-  const [isModalCreateOpen, setIsModalCreateOpen] = useState(false);
+  const { untitledDocument } = useTrans();
+  const router = useRouter();
+
+  const { mutate: createDoc } = useCreateDoc({
+    onSuccess: (doc) => {
+      router.push(`/docs/${doc.id}`);
+    },
+  });
+
+  const handleCreateDoc = () => {
+    createDoc({ title: untitledDocument });
+  };
 
   return (
     <Box $overflow="auto">
-      <Card $margin="big" $padding="tiny">
-        <Box $align="flex-end" $justify="center">
-          <Button
-            onClick={() => {
-              setIsModalCreateOpen(true);
-            }}
-          >
-            {t('Create a new document')}
-          </Button>
-        </Box>
-      </Card>
+      <Box $align="flex-end" $justify="center" $margin="big">
+        <Button onClick={handleCreateDoc}>{t('Create a new document')}</Button>
+      </Box>
       <DocsGrid />
-      {isModalCreateOpen && (
-        <ModalCreateDoc onClose={() => setIsModalCreateOpen(false)} />
-      )}
     </Box>
   );
 };