♻️(frontend) add PDF generation inside a modal

Refacto the pad tools, we will use modals to handle
the different actions on the pad. We start by
implementing the PDF generation inside a modal.

src/frontend/apps/e2e/__tests__/app-impress/pad-editor.spec.ts

@@ -1,6 +1,4 @@
 import { expect, test } from '@playwright/test';
-import cs from 'convert-stream';
-import pdf from 'pdf-parse';
 
 import { createPad, keyCloakSignIn } from './common';
 
@@ -77,33 +75,6 @@ test.describe('Pad Editor', () => {
     ).toHaveAttribute('href', 'http://test-markdown.html');
   });
 
-  test('it converts the pad to pdf with a template integrated', async ({
-    page,
-    browserName,
-  }) => {
-    const downloadPromise = page.waitForEvent('download', (download) => {
-      return download.suggestedFilename().includes('impress-document.pdf');
-    });
-
-    const randomPad = await createPad(page, 'pad-editor', browserName, 1);
-    await expect(page.locator('h2').getByText(randomPad[0])).toBeVisible();
-
-    await page.locator('.ProseMirror.bn-editor').click();
-    await page.locator('.ProseMirror.bn-editor').fill('Hello World');
-
-    await page.getByText('Generate PDF').first().click();
-
-    const download = await downloadPromise;
-    expect(download.suggestedFilename()).toBe('impress-document.pdf');
-
-    const pdfBuffer = await cs.toBuffer(await download.createReadStream());
-    const pdfText = (await pdf(pdfBuffer)).text;
-
-    expect(pdfText).toContain('Monsieur le Premier Ministre'); // This is the template text
-    expect(pdfText).toContain('La directrice'); // This is the template text
-    expect(pdfText).toContain('Hello World'); // This is the pad text
-  });
-
   test('it renders correctly when we switch from one pad to another', async ({
     page,
     browserName,

src/frontend/apps/e2e/__tests__/app-impress/pad-tools.spec.ts

@@ -0,0 +1,50 @@
+import { expect, test } from '@playwright/test';
+import cs from 'convert-stream';
+import pdf from 'pdf-parse';
+
+import { createPad, keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Pad Tools', () => {
+  test('it converts the pad to pdf with a template integrated', async ({
+    page,
+    browserName,
+  }) => {
+    const downloadPromise = page.waitForEvent('download', (download) => {
+      return download.suggestedFilename().includes('impress-document.pdf');
+    });
+
+    const [randomPad] = await createPad(page, 'pad-editor', browserName, 1);
+    await expect(page.locator('h2').getByText(randomPad)).toBeVisible();
+
+    await page.locator('.ProseMirror.bn-editor').click();
+    await page.locator('.ProseMirror.bn-editor').fill('Hello World');
+
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Generate PDF',
+      })
+      .click();
+
+    await page
+      .getByRole('button', {
+        name: 'Download',
+      })
+      .click();
+
+    const download = await downloadPromise;
+    expect(download.suggestedFilename()).toBe('impress-document.pdf');
+
+    const pdfBuffer = await cs.toBuffer(await download.createReadStream());
+    const pdfText = (await pdf(pdfBuffer)).text;
+
+    expect(pdfText).toContain('Monsieur le Premier Ministre'); // This is the template text
+    expect(pdfText).toContain('La directrice'); // This is the template text
+    expect(pdfText).toContain('Hello World'); // This is the pad text
+  });
+});