✨(frontend) doc page when deleted

Whe the doc is deleted, the doc page is a bit
different, we have to adapt the doc header
to add some information and actions that
are relevant for a deleted doc.

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

@@ -96,7 +96,7 @@ test.describe('Doc Header', () => {
       page.getByRole('heading', { name: 'Delete a doc' }),
     ).toBeVisible();
 
-    await expect(page.getByText(`This document and any sub-`)).toBeVisible();
+    await expect(page.getByText(`This document will be`)).toBeVisible();
 
     await page
       .getByRole('button', {

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

@@ -1,12 +1,18 @@
 import { expect, test } from '@playwright/test';
 
 import {
+  clickInEditorMenu,
   clickInGridMenu,
   createDoc,
   getGridRow,
   verifyDocName,
 } from './utils-common';
 import { addNewMember } from './utils-share';
+import {
+  addChild,
+  createRootSubPage,
+  navigateToPageFromTree,
+} from './utils-sub-pages';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -74,4 +80,71 @@ test.describe('Doc Trashbin', () => {
     await page.getByRole('link', { name: 'Trashbin' }).click();
     await expect(row2.getByText(title2)).toBeHidden();
   });
+
+  test('it controls UI and interaction from the doc page', async ({
+    page,
+    browserName,
+  }) => {
+    const [topParent] = await createDoc(
+      page,
+      'my-trash-editor-doc',
+      browserName,
+      1,
+    );
+    await verifyDocName(page, topParent);
+    const { name: subDocName } = await createRootSubPage(
+      page,
+      browserName,
+      'my-trash-editor-subdoc',
+    );
+
+    const subsubDocName = await addChild({
+      page,
+      browserName,
+      docParent: subDocName,
+    });
+    await verifyDocName(page, subsubDocName);
+
+    await navigateToPageFromTree({ page, title: subDocName });
+    await verifyDocName(page, subDocName);
+
+    await clickInEditorMenu(page, 'Delete sub-document');
+    await page.getByRole('button', { name: 'Delete document' }).click();
+    await verifyDocName(page, topParent);
+
+    await page.getByRole('button', { name: 'Back to homepage' }).click();
+    await page.getByRole('link', { name: 'Trashbin' }).click();
+    const row = await getGridRow(page, subDocName);
+    await row.getByText(subDocName).click();
+    await verifyDocName(page, subDocName);
+
+    await expect(page.getByLabel('Alert deleted document')).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Share' })).toBeDisabled();
+    await expect(page.locator('.bn-editor')).toHaveAttribute(
+      'contenteditable',
+      'false',
+    );
+    const docTree = page.getByTestId('doc-tree');
+    await expect(docTree.getByText(topParent)).toBeHidden();
+    await expect(
+      docTree.getByText(subDocName, {
+        exact: true,
+      }),
+    ).toBeVisible();
+    await expect(docTree.getByText(subsubDocName)).toBeVisible();
+    await expect(
+      docTree
+        .locator(".--docs-sub-page-item[aria-disabled='true']")
+        .getByText(subsubDocName),
+    ).toBeVisible();
+
+    await page.getByRole('button', { name: 'Restore' }).click();
+    await expect(page.getByLabel('Alert deleted document')).toBeHidden();
+    await expect(page.locator('.bn-editor')).toHaveAttribute(
+      'contenteditable',
+      'true',
+    );
+    await expect(page.getByRole('button', { name: 'Share' })).toBeEnabled();
+    await expect(docTree.getByText(topParent)).toBeVisible();
+  });
 });

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

@@ -327,6 +327,11 @@ export async function waitForLanguageSwitch(
   await page.getByRole('menuitem', { name: lang.label }).click();
 }
 
+export const clickInEditorMenu = async (page: Page, textButton: string) => {
+  await page.getByRole('button', { name: 'Open the document options' }).click();
+  await page.getByRole('menuitem', { name: textButton }).click();
+};
+
 export const clickInGridMenu = async (
   page: Page,
   row: Locator,

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

@@ -1,6 +1,7 @@
 import { Page, expect } from '@playwright/test';
 
 import {
+  BrowserName,
   randomName,
   updateDocTitle,
   verifyDocName,
@@ -9,7 +10,7 @@ import {
 
 export const createRootSubPage = async (
   page: Page,
-  browserName: string,
+  browserName: BrowserName,
   docName: string,
   isMobile: boolean = false,
 ) => {
@@ -67,6 +68,47 @@ export const clickOnAddRootSubPage = async (page: Page) => {
   await rootItem.getByTestId('doc-tree-item-actions-add-child').click();
 };
 
+export const addChild = async ({
+  page,
+  browserName,
+  docParent,
+}: {
+  page: Page;
+  browserName: BrowserName;
+  docParent: string;
+}) => {
+  let item = page.getByTestId('doc-tree-root-item');
+
+  const isParent = await item
+    .filter({
+      hasText: docParent,
+    })
+    .first()
+    .count();
+
+  if (!isParent) {
+    const items = page.getByRole('treeitem');
+
+    item = items
+      .filter({
+        hasText: docParent,
+      })
+      .first();
+  }
+
+  await item.hover();
+  await item.getByTestId('doc-tree-item-actions-add-child').click();
+
+  const [name] = randomName(docParent, browserName, 1);
+  await updateDocTitle(page, name);
+
+  return name;
+};
+
+export const navigateToTopParentFromTree = async ({ page }: { page: Page }) => {
+  await page.getByRole('link', { name: /Open root document/ }).click();
+};
+
 export const navigateToPageFromTree = async ({
   page,
   title,