✨(frontend) add trashbin list

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

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