✨(frontend) add trashbin list

List the docs deleted in the trashbin list,
it is displayed in the docs grid.

Author: AntoLC

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to
 ### Added
 
 - ✨(frontend) add pdf block to the editor #1293
+- ✨List and restore deleted docs #1450
 
 ### Changed
 

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

@@ -139,7 +139,7 @@ test.describe('Document grid item options', () => {
     const row = await getGridRow(page, docTitle);
     await row.getByText(`more_horiz`).click();
 
-    await page.getByRole('menuitem', { name: 'Remove' }).click();
+    await page.getByRole('menuitem', { name: 'Delete' }).click();
 
     await expect(
       page.getByRole('heading', { name: 'Delete a doc' }),

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

@@ -0,0 +1,55 @@
+import { expect, test } from '@playwright/test';
+
+import {
+  clickInGridMenu,
+  createDoc,
+  getGridRow,
+  verifyDocName,
+} from './utils-common';
+import { addNewMember } from './utils-share';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.describe('Doc Trashbin', () => {
+  test('it controls UI and interaction from the grid page', async ({
+    page,
+    browserName,
+  }) => {
+    const [title1] = await createDoc(page, 'my-trash-doc-1', browserName, 1);
+    const [title2] = await createDoc(page, 'my-trash-doc-2', browserName, 1);
+    await verifyDocName(page, title2);
+    await page.getByRole('button', { name: 'Share' }).click();
+    await addNewMember(page, 0, 'Editor');
+    await page.getByRole('button', { name: 'close' }).click();
+
+    await page.getByRole('button', { name: 'Back to homepage' }).click();
+
+    const row1 = await getGridRow(page, title1);
+    await clickInGridMenu(page, row1, 'Delete');
+    await page.getByRole('button', { name: 'Delete document' }).click();
+
+    const row2 = await getGridRow(page, title2);
+    await clickInGridMenu(page, row2, 'Delete');
+    await page.getByRole('button', { name: 'Delete document' }).click();
+
+    await page.getByRole('link', { name: 'Trashbin' }).click();
+
+    const docsGrid = page.getByTestId('docs-grid');
+    await expect(docsGrid.getByText('Days remaining')).toBeVisible();
+    await expect(row1.getByText(title1)).toBeVisible();
+    await expect(row1.getByText('30 days')).toBeVisible();
+    await expect(row2.getByText(title2)).toBeVisible();
+    await expect(
+      row2.getByRole('button', {
+        name: 'Open the sharing settings for the document',
+      }),
+    ).toBeVisible();
+    await expect(
+      row2.getByRole('button', {
+        name: 'Open the sharing settings for the document',
+      }),
+    ).toBeDisabled();
+  });
+});

src/frontend/apps/e2e/__tests__/app-impress/utils-common.ts

@@ -1,4 +1,4 @@
-import { Page, expect } from '@playwright/test';
+import { Locator, Page, expect } from '@playwright/test';
 
 export type BrowserName = 'chromium' | 'firefox' | 'webkit';
 export const BROWSERS: BrowserName[] = ['chromium', 'webkit', 'firefox'];
@@ -326,3 +326,14 @@ export async function waitForLanguageSwitch(
 
   await page.getByRole('menuitem', { name: lang.label }).click();
 }
+
+export const clickInGridMenu = async (
+  page: Page,
+  row: Locator,
+  textButton: string,
+) => {
+  await row
+    .getByRole('button', { name: /Open the menu of actions for the document/ })
+    .click();
+  await page.getByRole('menuitem', { name: textButton }).click();
+};

src/frontend/apps/impress/src/features/docs/doc-management/assets/child-document.svg

@@ -4,9 +4,15 @@ import { css } from 'styled-components';
 
 import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { Doc, getEmojiAndTitle, useTrans } from '@/docs/doc-management';
+import {
+  Doc,
+  getEmojiAndTitle,
+  useDocUtils,
+  useTrans,
+} from '@/docs/doc-management';
 import { useResponsiveStore } from '@/stores';
 
+import ChildDocument from '../assets/child-document.svg';
 import PinnedDocumentIcon from '../assets/pinned-document.svg';
 import SimpleFileIcon from '../assets/simple-document.svg';
 
@@ -37,6 +43,7 @@ export const SimpleDocItem = ({
   const { spacingsTokens, colorsTokens } = useCunninghamTheme();
   const { isDesktop } = useResponsiveStore();
   const { untitledDocument } = useTrans();
+  const { isChild } = useDocUtils(doc);
 
   const { emoji, titleWithoutEmoji: displayTitle } = getEmojiAndTitle(
     doc.title || untitledDocument,
@@ -73,11 +80,19 @@ export const SimpleDocItem = ({
           <DocIcon
             emoji={emoji}
             defaultIcon={
-              <SimpleFileIcon
-                aria-hidden="true"
-                data-testid="doc-simple-icon"
-                color={colorsTokens['primary-500']}
-              />
+              isChild ? (
+                <ChildDocument
+                  aria-hidden="true"
+                  data-testid="doc-child-icon"
+                  color={colorsTokens['primary-500']}
+                />
+              ) : (
+                <SimpleFileIcon
+                  aria-hidden="true"
+                  data-testid="doc-simple-icon"
+                  color={colorsTokens['primary-500']}
+                />
+              )
             }
             $size="25px"
           />

src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx

@@ -56,6 +56,7 @@ export interface Doc {
   content: Base64;
   created_at: string;
   creator: string;
+  deleted_at: string | null;
   depth: number;
   path: string;
   is_favorite: boolean;
@@ -107,6 +108,7 @@ export enum DocDefaultFilter {
   ALL_DOCS = 'all_docs',
   MY_DOCS = 'my_docs',
   SHARED_WITH_ME = 'shared_with_me',
+  TRASHBIN = 'trashbin',
 }
 
 export type DocsOrdering =

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

@@ -7,6 +7,7 @@ import { Box, Card, Text } from '@/components';
 import { DocDefaultFilter, useInfiniteDocs } from '@/docs/doc-management';
 import { useResponsiveStore } from '@/stores';
 
+import { useInfiniteDocsTrashbin } from '../api';
 import { useResponsiveDocGrid } from '../hooks/useResponsiveDocGrid';
 
 import {
@@ -33,13 +34,7 @@ export const DocsGrid = ({
     isLoading,
     fetchNextPage,
     hasNextPage,
-  } = useInfiniteDocs({
-    page: 1,
-    ...(target &&
-      target !== DocDefaultFilter.ALL_DOCS && {
-        is_creator_me: target === DocDefaultFilter.MY_DOCS,
-      }),
-  });
+  } = useDocsQuery(target);
 
   const docs = data?.pages.flatMap((page) => page.results) ?? [];
 
@@ -52,12 +47,20 @@ export const DocsGrid = ({
     void fetchNextPage();
   };
 
-  const title =
-    target === DocDefaultFilter.MY_DOCS
-      ? t('My docs')
-      : target === DocDefaultFilter.SHARED_WITH_ME
-        ? t('Shared with me')
-        : t('All docs');
+  let title = t('All docs');
+  switch (target) {
+    case DocDefaultFilter.MY_DOCS:
+      title = t('My docs');
+      break;
+    case DocDefaultFilter.SHARED_WITH_ME:
+      title = t('Shared with me');
+      break;
+    case DocDefaultFilter.TRASHBIN:
+      title = t('Trashbin');
+      break;
+    default:
+      title = t('All docs');
+  }
 
   return (
     <Box
@@ -121,7 +124,9 @@ export const DocsGrid = ({
                       role="columnheader"
                     >
                       <Text $size="xs" $weight="500" $variation="600">
-                        {t('Updated at')}
+                        {DocDefaultFilter.TRASHBIN === target
+                          ? t('Days remaining')
+                          : t('Updated at')}
                       </Text>
                     </Box>
                   )}
@@ -157,3 +162,29 @@ export const DocsGrid = ({
     </Box>
   );
 };
+
+const useDocsQuery = (target: DocDefaultFilter) => {
+  const trashbinQuery = useInfiniteDocsTrashbin(
+    {
+      page: 1,
+    },
+    {
+      enabled: target === DocDefaultFilter.TRASHBIN,
+    },
+  );
+
+  const docsQuery = useInfiniteDocs(
+    {
+      page: 1,
+      ...(target &&
+        target !== DocDefaultFilter.ALL_DOCS && {
+          is_creator_me: target === DocDefaultFilter.MY_DOCS,
+        }),
+    },
+    {
+      enabled: target !== DocDefaultFilter.TRASHBIN,
+    },
+  );
+
+  return target === DocDefaultFilter.TRASHBIN ? trashbinQuery : docsQuery;
+};

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx

@@ -45,6 +45,7 @@ export const DocsGridActions = ({
         }
       },
       testId: `docs-grid-actions-${doc.is_favorite ? 'unpin' : 'pin'}-${doc.id}`,
+      showSeparator: true,
     },
     {
       label: t('Share'),
@@ -66,9 +67,10 @@ export const DocsGridActions = ({
           canSave: false,
         });
       },
+      showSeparator: true,
     },
     {
-      label: t('Remove'),
+      label: t('Delete'),
       icon: 'delete',
       callback: () => deleteModal.open(),
       disabled: !doc.abilities.destroy,