🩹(frontend) refresh tree after duplicate

After duplicating a document, the tree is now
refreshed to reflect the new structure.
This ensures that the user sees the updated
document tree immediately after the duplication
action.

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

@@ -9,6 +9,7 @@ import {
   mockedInvitations,
   verifyDocName,
 } from './common';
+import { createRootSubPage } from './sub-pages-utils';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -456,6 +457,32 @@ test.describe('Doc Header', () => {
     await page.getByText(duplicateDuplicateTitle).click();
     await expect(page.getByText('Hello Duplicated World')).toBeVisible();
   });
+
+  test('it duplicates a child document', async ({ page, browserName }) => {
+    await createDoc(page, `Duplicate doc`, browserName);
+
+    const { name: childTitle } = await createRootSubPage(
+      page,
+      browserName,
+      'Duplicate doc - child',
+    );
+
+    const editor = page.locator('.ProseMirror');
+    await editor.click();
+    await editor.fill('Hello Duplicated World');
+
+    await page.getByLabel('Open the document options').click();
+
+    await page.getByRole('menuitem', { name: 'Duplicate' }).click();
+    await expect(
+      page.getByText('Document duplicated successfully!'),
+    ).toBeVisible();
+
+    const duplicateDuplicateTitle = 'Copy of ' + childTitle;
+    await expect(
+      page.getByTestId('doc-tree').getByText(duplicateDuplicateTitle),
+    ).toBeVisible();
+  });
 });
 
 test.describe('Documents Header mobile', () => {

src/frontend/apps/impress/src/features/docs/doc-management/api/useDuplicateDoc.tsx

@@ -7,6 +7,7 @@ import * as Y from 'yjs';
 
 import { APIError, errorCauses, fetchAPI } from '@/api';
 import { toBase64 } from '@/docs/doc-editor';
+import { KEY_DOC_TREE } from '@/docs/doc-tree';
 import { KEY_LIST_DOC_VERSIONS } from '@/docs/doc-versioning';
 
 import { useProviderStore } from '../stores';
@@ -85,6 +86,9 @@ export function useDuplicateDoc(options: DuplicateDocOptions) {
       void queryClient.resetQueries({
         queryKey: [KEY_LIST_DOC],
       });
+      void queryClient.resetQueries({
+        queryKey: [KEY_DOC_TREE],
+      });
       void options.onSuccess?.(data, variables, context);
     },
   });

src/frontend/apps/impress/src/features/docs/doc-tree/api/index.ts

@@ -1,3 +1,4 @@
 export * from './useCreateChildren';
 export * from './useDocChildren';
+export * from './useDocTree';
 export * from './useMove';

src/frontend/apps/impress/src/features/docs/doc-tree/api/useDocTree.tsx

@@ -25,7 +25,7 @@ export const getDocTree = async ({ docId }: DocsTreeParams): Promise<Doc> => {
   return response.json() as Promise<Doc>;
 };
 
-export const KEY_LIST_DOC_CHILDREN = 'doc-tree';
+export const KEY_DOC_TREE = 'doc-tree';
 
 export function useDocTree(
   params: DocsTreeParams,
@@ -35,7 +35,7 @@ export function useDocTree(
   >,
 ) {
   return useQuery<Doc, APIError, Doc>({
-    queryKey: [KEY_LIST_DOC_CHILDREN, params],
+    queryKey: [KEY_DOC_TREE, params],
     queryFn: () => getDocTree(params),
     staleTime: 0,
     refetchOnWindowFocus: false,