✨(frontend) add copy link button

Add a copy link button to the doc
visibility component. This button will
copy the link of the doc to the clipboard.

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

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', () => {

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'],
     },

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>
   );
 };