♻️ Move doc action buttons to fix toolbar

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to
 
 - ♻️(backend) allow global search in sub documents
 - ✨(backend) add a breadcrumb in the search response
+- ♻️(frontend) move doc action buttons to fix toolbar #2360
 
 ### Fixed
 

env.d/development/common.e2e

@@ -6,4 +6,5 @@ Y_PROVIDER_API_BASE_URL=http://y-provider-converter:4444/api/
 
 # Throttle
 API_DOCUMENT_THROTTLE_RATE=1000/min
+API_DOCUMENT_ACCESS_THROTTLE_RATE=1000/min
 API_CONFIG_THROTTLE_RATE=1000/min

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

@@ -7,6 +7,7 @@ import { PDFParse } from 'pdf-parse';
 
 import {
   TestLanguage,
+  clickInEditorMenu,
   createDoc,
   verifyDocName,
   waitForLanguageSwitch,
@@ -24,11 +25,7 @@ test.describe('Doc Export', () => {
     browserName,
   }) => {
     await createDoc(page, 'doc-editor', browserName, 1);
-    await page
-      .getByRole('button', {
-        name: 'Export the document',
-      })
-      .click();
+    await clickInEditorMenu(page, 'Download');
 
     await expect(page.getByTestId('modal-export-title')).toBeVisible();
     await expect(
@@ -54,11 +51,7 @@ test.describe('Doc Export', () => {
   test('it exports the doc to docx', async ({ page, browserName }) => {
     const randomDoc = await overrideDocContent({ page, browserName });
 
-    await page
-      .getByRole('button', {
-        name: 'Export the document',
-      })
-      .click();
+    await clickInEditorMenu(page, 'Download');
 
     await page.getByRole('combobox', { name: 'Format' }).click();
     await page.getByRole('option', { name: 'Docx' }).click();
@@ -84,11 +77,7 @@ test.describe('Doc Export', () => {
   test('it exports the doc to odt', async ({ page, browserName }) => {
     const randomDoc = await overrideDocContent({ page, browserName });
 
-    await page
-      .getByRole('button', {
-        name: 'Export the document',
-      })
-      .click();
+    await clickInEditorMenu(page, 'Download');
 
     await page.getByRole('combobox', { name: 'Format' }).click();
     await page.getByRole('option', { name: 'Odt' }).click();
@@ -139,11 +128,7 @@ test.describe('Doc Export', () => {
     // Give some time for the image to be fully processed
     await page.waitForTimeout(1000);
 
-    await page
-      .getByRole('button', {
-        name: 'Export the document',
-      })
-      .click();
+    await clickInEditorMenu(page, 'Download');
 
     await page.getByRole('combobox', { name: 'Format' }).click();
     await page.getByRole('option', { name: 'HTML' }).click();
@@ -231,11 +216,7 @@ test.describe('Doc Export', () => {
       .fill('https://docs.numerique.gouv.fr/assets/logo-gouv.png');
     await page.getByText('Embed image').click();
 
-    await page
-      .getByRole('button', {
-        name: 'Export the document',
-      })
-      .click();
+    await clickInEditorMenu(page, 'Download');
 
     await new Promise((resolve) => setTimeout(resolve, 1000));
 
@@ -288,14 +269,9 @@ test.describe('Doc Export', () => {
     });
 
     await page
-      .getByRole('button', {
-        name: 'Exporter le document',
-      })
+      .getByRole('button', { name: 'Ouvrir les options du document' })
       .click();
-
-    await expect(
-      page.getByTestId('doc-open-modal-download-button'),
-    ).toBeVisible();
+    await page.getByRole('menuitem', { name: 'Télécharger' }).click();
 
     const downloadPromise = page.waitForEvent('download', (download) => {
       return download.suggestedFilename().includes(`${randomDocFrench}.pdf`);
@@ -327,11 +303,7 @@ test.describe('Doc Export', () => {
 
     await overrideDocContent({ page, browserName });
 
-    await page
-      .getByRole('button', {
-        name: 'Export the document',
-      })
-      .click();
+    await clickInEditorMenu(page, 'Download');
 
     await page.getByRole('combobox', { name: 'Format' }).click();
     await page.getByRole('option', { name: 'Print' }).click();
@@ -380,11 +352,7 @@ test.describe('Doc Export', () => {
 
     const randomDoc = await overrideDocContent({ page, browserName });
 
-    await page
-      .getByRole('button', {
-        name: 'Export the document',
-      })
-      .click();
+    await clickInEditorMenu(page, 'Download');
 
     const downloadPromise = page.waitForEvent('download', (download) => {
       return download.suggestedFilename().includes(`${randomDoc}.pdf`);

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

@@ -1,6 +1,11 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, getGridRow, verifyDocName } from './utils-common';
+import {
+  clickInEditorShareButton,
+  createDoc,
+  getGridRow,
+  verifyDocName,
+} from './utils-common';
 import { addNewMember, connectOtherUserToDoc } from './utils-share';
 
 type SmallDoc = {
@@ -212,9 +217,7 @@ test.describe('Documents filters', () => {
   test('it checks the left panel filters', async ({ page, browserName }) => {
     void page.goto('/');
 
-    // Create my doc
     const [docName] = await createDoc(page, 'my-doc', browserName, 1);
-    await verifyDocName(page, docName);
 
     // Another user create a doc and share it with me
     const { cleanup, otherPage, otherBrowserName } =
@@ -230,9 +233,7 @@ test.describe('Documents filters', () => {
       1,
     );
 
-    await verifyDocName(otherPage, docShareName);
-
-    await otherPage.getByRole('button', { name: 'Share' }).click();
+    await clickInEditorShareButton(otherPage);
 
     await addNewMember(otherPage, 0, 'Editor', browserName);
 

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

@@ -1,6 +1,8 @@
 import { expect, test } from '@playwright/test';
 
 import {
+  clickInEditorMenu,
+  clickInEditorShareButton,
   createDoc,
   getGridRow,
   goToGridDoc,
@@ -82,15 +84,14 @@ test.describe('Doc Header', () => {
 
     await page.getByRole('button', { name: 'close' }).first().click();
 
-    await expect(card.getByText('Public document')).toBeVisible();
-
+    await expect(card.getByText('Public ·')).toBeVisible();
     await expect(card.getByText('Owner ·')).toBeVisible();
     await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
+    await page
+      .getByRole('button', { name: 'Open the document options' })
+      .click();
     await expect(
-      page.getByRole('button', { name: 'Export the document' }),
-    ).toBeVisible();
-    await expect(
-      page.getByRole('button', { name: 'Open the document options' }),
+      page.getByRole('menuitem', { name: 'Download' }),
     ).toBeVisible();
   });
 
@@ -185,17 +186,15 @@ test.describe('Doc Header', () => {
     await createDoc(page, 'doc-update-emoji', browserName, 1);
 
     const emojiPicker = page.locator('.--docs--doc-title').getByRole('button');
-    const optionMenu = page.getByLabel('Open the document options');
-    const addEmojiMenuItem = page.getByRole('menuitem', { name: 'Add emoji' });
-    const removeEmojiMenuItem = page.getByRole('menuitem', {
-      name: 'Remove emoji',
+    const addEmoji = page.getByRole('button', { name: 'Add icon' });
+    const removeEmoji = page.getByRole('button', {
+      name: 'Remove icon',
     });
 
     // Top parent should not have emoji picker
     await expect(emojiPicker).toBeHidden();
-    await optionMenu.click();
-    await expect(addEmojiMenuItem).toBeHidden();
-    await expect(removeEmojiMenuItem).toBeHidden();
+    await expect(addEmoji).toBeHidden();
+    await expect(removeEmoji).toBeHidden();
     await page.keyboard.press('Escape');
 
     const { name: docChild } = await createRootSubPage(
@@ -210,9 +209,8 @@ test.describe('Doc Header', () => {
     await expect(emojiPicker).toBeHidden();
 
     // Add emoji
-    await optionMenu.click();
-    await expect(removeEmojiMenuItem).toBeHidden();
-    await addEmojiMenuItem.click();
+    await expect(removeEmoji).toBeHidden();
+    await addEmoji.click();
     // The 1 April the emoji is a fish
     await expect(emojiPicker).toHaveText(/📄|🐟/);
 
@@ -234,17 +232,15 @@ test.describe('Doc Header', () => {
     await expect(row.getByText('😀')).toBeVisible();
 
     // Remove emoji
-    await optionMenu.click();
-    await expect(addEmojiMenuItem).toBeHidden();
-    await removeEmojiMenuItem.click();
+    await expect(addEmoji).toBeHidden();
+    await removeEmoji.click();
     await expect(emojiPicker).toBeHidden();
   });
 
   test('it deletes the doc', async ({ page, browserName }) => {
     const [randomDoc] = await createDoc(page, 'doc-delete', browserName, 1);
 
-    await page.getByLabel('Open the document options').click();
-    await page.getByRole('menuitem', { name: 'Delete document' }).click();
+    await clickInEditorMenu(page, 'Delete');
 
     await expect(
       page.getByRole('heading', { name: 'Delete a doc' }),
@@ -300,15 +296,12 @@ test.describe('Doc Header', () => {
       page.getByRole('textbox', { name: 'Document title' }),
     ).toContainText('Mocked document');
 
-    await expect(
-      page.getByRole('button', { name: 'Export the document' }),
-    ).toBeVisible();
-
     await page.getByLabel('Open the document options').click();
 
     await expect(
-      page.getByRole('menuitem', { name: 'Delete document' }),
-    ).toBeDisabled();
+      page.getByRole('menuitem', { name: 'Download' }),
+    ).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Delete' })).toBeHidden();
 
     // Click somewhere else to close the options
     await page.locator('body').click({ position: { x: 0, y: 0 } });
@@ -380,14 +373,12 @@ test.describe('Doc Header', () => {
       page.getByRole('textbox', { name: 'Document title' }),
     ).toContainText('Mocked document');
 
-    await expect(
-      page.getByRole('button', { name: 'Export the document' }),
-    ).toBeVisible();
     await page.getByLabel('Open the document options').click();
 
     await expect(
-      page.getByRole('menuitem', { name: 'Delete document' }),
-    ).toBeDisabled();
+      page.getByRole('menuitem', { name: 'Download' }),
+    ).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Delete' })).toBeHidden();
 
     // Click somewhere else to close the options
     await page.locator('body').click({ position: { x: 0, y: 0 } });
@@ -452,14 +443,12 @@ test.describe('Doc Header', () => {
       page.getByRole('heading', { name: 'Mocked document' }),
     ).toBeVisible();
 
-    await expect(
-      page.getByRole('button', { name: 'Export the document' }),
-    ).toBeVisible();
     await page.getByLabel('Open the document options').click();
 
     await expect(
-      page.getByRole('menuitem', { name: 'Delete document' }),
-    ).toBeDisabled();
+      page.getByRole('menuitem', { name: 'Download' }),
+    ).toBeVisible();
+    await expect(page.getByRole('menuitem', { name: 'Delete' })).toBeHidden();
 
     // Click somewhere else to close the options
     await page.locator('body').click({ position: { x: 0, y: 0 } });
@@ -706,13 +695,18 @@ test.describe('Documents Header mobile', () => {
 
     await goToGridDoc(page);
 
-    await expect(page.getByRole('button', { name: 'Copy link' })).toBeHidden();
     await page.getByLabel('Open the document options').click();
     await expect(
       page.getByRole('menuitem', { name: 'Copy link' }),
     ).toBeVisible();
-    await page.getByRole('menuitem', { name: 'Share' }).click();
-    await expect(page.getByRole('button', { name: 'Copy link' })).toBeVisible();
+    await page.keyboard.press('Escape');
+    await page.getByRole('button', { name: 'Share' }).click();
+    const shareModal = page.getByRole('dialog', {
+      name: 'Share the document',
+    });
+    await expect(
+      shareModal.getByRole('button', { name: 'Copy link' }),
+    ).toBeVisible();
   });
 
   test('it checks the close button on Share modal', async ({ page }) => {
@@ -733,8 +727,7 @@ test.describe('Documents Header mobile', () => {
 
     await goToGridDoc(page);
 
-    await page.getByLabel('Open the document options').click();
-    await page.getByRole('menuitem', { name: 'Share' }).click();
+    await clickInEditorShareButton(page);
 
     const shareModal = page.getByRole('dialog', {
       name: 'Share the document',

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

@@ -1,6 +1,12 @@
 import { expect, test } from '@playwright/test';
 
-import { BROWSERS, createDoc, randomName, verifyDocName } from './utils-common';
+import {
+  BROWSERS,
+  clickInEditorShareButton,
+  createDoc,
+  randomName,
+  verifyDocName,
+} from './utils-common';
 import { writeInEditor } from './utils-editor';
 import { connectOtherUserToDoc, updateRoleUser } from './utils-share';
 import { SignIn } from './utils-signin';
@@ -271,8 +277,6 @@ test.describe('Document create member', () => {
       1,
     );
 
-    await verifyDocName(page, docTitle);
-
     await writeInEditor({ page, text: 'Hello World' });
 
     const docUrl = page.url();
@@ -294,8 +298,7 @@ test.describe('Document create member', () => {
     ).toBeVisible();
 
     // First user approves the request
-    await page.getByRole('button', { name: 'Share' }).click();
-
+    await clickInEditorShareButton(page);
     await expect(page.getByText('Access Requests')).toBeVisible();
     await expect(
       page.getByText(
@@ -330,7 +333,9 @@ test.describe('Document create member', () => {
     await updateRoleUser(page, 'Remove access', emailRequest);
     await expect(
       otherPage.getByText('Insufficient access rights to view the document.'),
-    ).toBeVisible();
+    ).toBeVisible({
+      timeout: 10000,
+    });
 
     // Cleanup: other user logout
     await cleanup();