From 37db31a8d55705e0041da56c2768454b330dbf87 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 6 Sep 2024 18:03:30 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20copy=20link=20butto?=
 =?UTF-8?q?n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a copy link button to the doc
visibility component. This button will
copy the link of the doc to the clipboard.
---
 CHANGELOG.md                                  |  1 +
 .../app-impress/doc-visibility.spec.ts        | 22 +++++++++++++++++++
 src/frontend/apps/e2e/playwright.config.ts    |  9 ++++++++
 .../components/DocVisibility.tsx              | 21 ++++++++++++++++++
 4 files changed, 53 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3c853688..7b8da411 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to
 
 ## Added
 
+- ✨(frontend) add copy link button #235
 - 🛂(frontend) access public docs without being logged #235
 
 ## Changed
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts
index b0fc109f..0e2366de 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts
@@ -33,6 +33,28 @@ test.describe('Doc Visibility', () => {
 
     await expect(row.getByRole('cell').nth(0)).toHaveText('Public');
   });
+
+  test('It checks the copy link button', async ({ page, browserName }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(
+      browserName === 'webkit',
+      'navigator.clipboard is not working with webkit and playwright',
+    );
+
+    await createDoc(page, 'My button copy doc', browserName, 1);
+
+    await page.getByRole('button', { name: 'Share' }).click();
+    await page.getByRole('button', { name: 'Copy link' }).click();
+
+    await expect(page.getByText('Link Copied !')).toBeVisible();
+
+    const handle = await page.evaluateHandle(() =>
+      navigator.clipboard.readText(),
+    );
+    const clipboardContent = await handle.jsonValue();
+
+    expect(clipboardContent).toMatch(page.url());
+  });
 });
 
 test.describe('Doc Visibility: Not loggued', () => {
diff --git a/src/frontend/apps/e2e/playwright.config.ts b/src/frontend/apps/e2e/playwright.config.ts
index bf4e6f97..08caf07f 100644
--- a/src/frontend/apps/e2e/playwright.config.ts
+++ b/src/frontend/apps/e2e/playwright.config.ts
@@ -50,6 +50,9 @@ export default defineConfig({
         locale: 'en-US',
         timezoneId: 'Europe/Paris',
         storageState: 'playwright/.auth/user-chromium.json',
+        contextOptions: {
+          permissions: ['clipboard-read', 'clipboard-write'],
+        },
       },
       dependencies: ['setup'],
     },
@@ -70,6 +73,12 @@ export default defineConfig({
         locale: 'en-US',
         timezoneId: 'Europe/Paris',
         storageState: 'playwright/.auth/user-firefox.json',
+        launchOptions: {
+          firefoxUserPrefs: {
+            'dom.events.asyncClipboard.readText': true,
+            'dom.events.testing.asyncClipboard': true,
+          },
+        },
       },
       dependencies: ['setup'],
     },
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocVisibility.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocVisibility.tsx
index 043dbc3e..57cc0d2f 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocVisibility.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocVisibility.tsx
@@ -1,4 +1,5 @@
 import {
+  Button,
   Switch,
   VariantType,
   useToastProvider,
@@ -60,6 +61,26 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
           )}
         />
       </Box>
+      <Button
+        onClick={() => {
+          navigator.clipboard
+            .writeText(window.location.href)
+            .then(() => {
+              toast(t('Link Copied !'), VariantType.SUCCESS, {
+                duration: 3000,
+              });
+            })
+            .catch(() => {
+              toast(t('Failed to copy link'), VariantType.ERROR, {
+                duration: 3000,
+              });
+            });
+        }}
+        color="primary"
+        icon={<span className="material-icons">copy</span>}
+      >
+        {t('Copy link')}
+      </Button>
     </Card>
   );
 };