✨(frontend) add duplicate action to doc tree

AntoLC · AntoLC · commit 83f2b3886ef2 · 2025-07-21T19:48:58.000+02:00
We added a duplicate action to the document tree.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Added
+
+- ✨(frontend) add duplicate action to doc tree #1175
+
 ### Changed
 
 - ♻️(frontend) redirect to doc after duplicate #1175
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts
@@ -471,14 +471,19 @@ test.describe('Doc Header', () => {
     await editor.click();
     await editor.fill('Hello Duplicated World');
 
-    await page.getByLabel('Open the document options').click();
+    const duplicateTitle = 'Copy of ' + childTitle;
+    const docTree = page.getByTestId('doc-tree');
 
-    await page.getByRole('menuitem', { name: 'Duplicate' }).click();
-    await expect(
-      page.getByText('Document duplicated successfully!'),
-    ).toBeVisible();
+    const child = docTree
+      .getByRole('treeitem')
+      .locator('.--docs-sub-page-item')
+      .filter({
+        hasText: childTitle,
+      });
+    await child.hover();
+    await child.getByText(`more_horiz`).click();
 
-    const duplicateTitle = 'Copy of ' + childTitle;
+    await page.getByRole('menuitem', { name: 'Duplicate' }).click();
 
     await verifyDocName(page, duplicateTitle);
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx
@@ -10,13 +10,14 @@ import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { Box, BoxButton, Icon } from '@/components';
-
 import {
   Doc,
   ModalRemoveDoc,
   Role,
   useCopyDocLink,
-} from '../../doc-management';
+  useDuplicateDoc,
+} from '@/docs/doc-management';
+
 import { useCreateChildrenDoc } from '../api/useCreateChildren';
 import { useDetachDoc } from '../api/useDetach';
 import MoveDocIcon from '../assets/doc-extract-bold.svg';
@@ -45,6 +46,11 @@ export const DocTreeItemActions = ({
   const { isCurrentParent } = useTreeUtils(doc);
   const { mutate: detachDoc } = useDetachDoc();
   const treeContext = useTreeContext<Doc>();
+  const { mutate: duplicateDoc } = useDuplicateDoc({
+    onSuccess: (data) => {
+      void router.push(`/docs/${data.id}`);
+    },
+  });
 
   const handleDetachDoc = () => {
     if (!treeContext?.root) {
@@ -89,6 +95,18 @@ export const DocTreeItemActions = ({
           },
         ]
       : []),
+    {
+      label: t('Duplicate'),
+      icon: <Icon $variation="600" iconName="content_copy" />,
+      isDisabled: !doc.abilities.duplicate,
+      callback: () => {
+        duplicateDoc({
+          docId: doc.id,
+          with_accesses: false,
+          canSave: doc.abilities.partial_update,
+        });
+      },
+    },
     {
       label: t('Delete'),
       isDisabled: !doc.abilities.destroy,
