✨(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.

Author: AntoLC

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('/');
@@ -67,4 +73,69 @@ 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 document');
+    await page.getByRole('button', { name: 'Delete document' }).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,

src/frontend/apps/impress/src/components/Card.tsx

@@ -7,14 +7,15 @@ import { Box, BoxType } from '.';
 
 export const Card = ({
   children,
+  className,
   $css,
   ...props
 }: PropsWithChildren<BoxType>) => {
   const { colorsTokens } = useCunninghamTheme();
 
   return (
     <Box
-      className={`--docs--card ${props.className || ''}`}
+      className={`--docs--card ${className || ''}`}
       $background="white"
       $radius="4px"
       $css={css`

src/frontend/apps/impress/src/components/Overlayer.tsx

@@ -0,0 +1,36 @@
+import { PropsWithChildren } from 'react';
+import { css } from 'styled-components';
+
+import { Box, BoxType } from '.';
+
+type OverlayerProps = PropsWithChildren<{
+  isOverlay: boolean;
+}> &
+  Partial<BoxType>;
+
+export const Overlayer = ({
+  children,
+  className,
+  $css,
+  isOverlay,
+  ...props
+}: OverlayerProps) => {
+  if (!isOverlay) {
+    return children;
+  }
+
+  return (
+    <Box
+      className={`--docs--overlayer ${className || ''}`}
+      $opacity="0.4"
+      $zIndex="10"
+      $css={css`
+        ${$css}
+        pointer-events: none;
+      `}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -83,6 +83,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   const { isEditable, isLoading } = useIsCollaborativeEditable(doc);
   const isConnectedToCollabServer = provider.isSynced;
   const readOnly = !doc.abilities.partial_update || !isEditable || isLoading;
+  const isDeletedDoc = !!doc.deleted_at;
 
   useSaveDoc(doc.id, provider.document, !readOnly, isConnectedToCollabServer);
   const { i18n } = useTranslation();
@@ -180,7 +181,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
     <Box
       $padding={{ top: 'md' }}
       $background="white"
-      $css={cssEditor(readOnly)}
+      $css={cssEditor(readOnly, isDeletedDoc)}
       className="--docs--editor-container"
     >
       {errorAttachment && (
@@ -231,7 +232,7 @@ export const BlockNoteEditorVersion = ({
   );
 
   return (
-    <Box $css={cssEditor(readOnly)} className="--docs--editor-container">
+    <Box $css={cssEditor(readOnly, true)} className="--docs--editor-container">
       <BlockNoteView editor={editor} editable={!readOnly} theme="light" />
     </Box>
   );

src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 
-export const cssEditor = (readonly: boolean) => css`
+export const cssEditor = (readonly: boolean, isDeletedDoc: boolean) => css`
   &,
   & > .bn-container,
   & .ProseMirror {
@@ -127,6 +127,13 @@ export const cssEditor = (readonly: boolean) => css`
       .bn-block-outer:not([data-prev-depth-changed]):before {
       border-left: none;
     }
+
+    ${isDeletedDoc &&
+    `
+      a {
+        pointer-events: none;
+      }
+    `}
   }
 
   & .bn-editor {

src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx

@@ -0,0 +1,97 @@
+import { useTreeContext } from '@gouvfr-lasuite/ui-kit';
+import { VariantType, useToastProvider } from '@openfun/cunningham-react';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box, BoxButton, Icon, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import {
+  Doc,
+  KEY_DOC,
+  KEY_LIST_DOC,
+  useRestoreDoc,
+} from '@/docs/doc-management';
+import { KEY_LIST_DOC_TRASHBIN } from '@/docs/docs-grid';
+
+export const AlertRestore = ({ doc }: { doc: Doc }) => {
+  const { t } = useTranslation();
+  const { toast } = useToastProvider();
+  const treeContext = useTreeContext<Doc>();
+  const { colorsTokens, spacingsTokens } = useCunninghamTheme();
+  const { mutate: restoreDoc, error } = useRestoreDoc({
+    listInvalidQueries: [KEY_LIST_DOC, KEY_LIST_DOC_TRASHBIN, KEY_DOC],
+    options: {
+      onSuccess: (_data) => {
+        // It will force the tree to be reloaded
+        treeContext?.setRoot(undefined as unknown as Doc);
+
+        toast(t('The document has been restored.'), VariantType.SUCCESS, {
+          duration: 4000,
+        });
+      },
+      onError: () => {
+        toast(
+          t('An error occurred while restoring the document: {{error}}', {
+            error: error?.message,
+          }),
+          VariantType.ERROR,
+          {
+            duration: 4000,
+          },
+        );
+      },
+    },
+  });
+
+  return (
+    <Box
+      className="--docs--alert-restore"
+      aria-label={t('Alert deleted document')}
+      $color={colorsTokens['danger-800']}
+      $background={colorsTokens['danger-100']}
+      $radius={spacingsTokens['3xs']}
+      $direction="row"
+      $padding="xs"
+      $flex={1}
+      $align="center"
+      $gap={spacingsTokens['3xs']}
+      $css={css`
+        border: 1px solid var(--c--theme--colors--danger-300, #e3e3fd);
+      `}
+      $justify="space-between"
+    >
+      <Box $direction="row" $align="center" $gap="0.2rem">
+        <Icon
+          $theme="danger"
+          $variation="700"
+          data-testid="public-icon"
+          iconName="delete"
+          variant="symbols-outlined"
+        />
+        <Text $theme="danger" $variation="700" $weight="500">
+          {t('Document deleted')}
+        </Text>
+      </Box>
+      <BoxButton
+        onClick={() =>
+          restoreDoc({
+            docId: doc.id,
+          })
+        }
+        $direction="row"
+        $gap="0.2rem"
+      >
+        <Icon
+          iconName="undo"
+          $theme="danger"
+          $variation="600"
+          $css="font-size: 18px !important;"
+          variant="symbols-outlined"
+        />
+        <Text $theme="danger" $variation="600" $size="s">
+          {t('Restore')}
+        </Text>
+      </BoxButton>
+    </Box>
+  );
+};