⚗️(frontend) add button Restore this version near title

When a user is on a page version, we will display
a button "Restore this version" near the title of
the page. It gives an obvious way to restore the
version of the doc.

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to
 
 - ✨Add image attachments with access control
 - ✨(frontend) Upload image to a document #211
+- ✨(frontend) Versions #217
 
 ## Changed
 

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

@@ -133,4 +133,62 @@ test.describe('Doc Version', () => {
     await expect(page.getByText('Hello')).toBeVisible();
     await expect(page.getByText('World')).toBeHidden();
   });
+
+  test('it restores the doc version from button title', async ({
+    page,
+    browserName,
+  }) => {
+    const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
+
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+
+    await page.locator('.bn-block-outer').last().click();
+    await page.locator('.bn-block-outer').last().fill('Hello');
+
+    await goToGridDoc(page, {
+      title: randomDoc,
+    });
+
+    await expect(page.getByText('Hello')).toBeVisible();
+    await page.locator('.bn-block-outer').last().click();
+    await page.keyboard.press('Enter');
+    await page.locator('.bn-block-outer').last().fill('World');
+
+    await goToGridDoc(page, {
+      title: randomDoc,
+    });
+
+    await expect(page.getByText('World')).toBeVisible();
+
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Version history',
+      })
+      .click();
+
+    const panel = page.getByLabel('Document version panel');
+    await panel.locator('li').nth(1).click();
+    await expect(page.getByText('World')).toBeHidden();
+
+    await page
+      .getByRole('button', {
+        name: 'Restore this version',
+      })
+      .click();
+
+    await expect(page.getByText('Restore this version?')).toBeVisible();
+
+    await page
+      .getByRole('button', {
+        name: 'Restore',
+      })
+      .click();
+
+    await expect(panel.locator('li')).toHaveCount(3);
+
+    await panel.getByText('Current version').click();
+    await expect(page.getByText('Hello')).toBeVisible();
+    await expect(page.getByText('World')).toBeHidden();
+  });
 });

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

@@ -35,7 +35,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
 
   return (
     <>
-      <DocHeader doc={doc} />
+      <DocHeader doc={doc} versionId={versionId as Versions['version_id']} />
       {!doc.abilities.partial_update && (
         <Box $margin={{ all: 'small', top: 'none' }}>
           <Alert type={VariantType.WARNING}>

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

@@ -1,4 +1,5 @@
-import React, { Fragment } from 'react';
+import { Button } from '@openfun/cunningham-react';
+import React, { Fragment, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Card, StyledLink, Text } from '@/components';
@@ -9,21 +10,25 @@ import {
   currentDocRole,
   useTransRole,
 } from '@/features/docs/doc-management';
+import { ModalVersion, Versions } from '@/features/docs/doc-versioning';
 import { useDate } from '@/hook';
 
 import { DocToolBox } from './DocToolBox';
 
 interface DocHeaderProps {
   doc: Doc;
+  versionId?: Versions['version_id'];
 }
 
-export const DocHeader = ({ doc }: DocHeaderProps) => {
+export const DocHeader = ({ doc, versionId }: DocHeaderProps) => {
   const { colorsTokens } = useCunninghamTheme();
   const { t } = useTranslation();
   const { formatDate } = useDate();
   const transRole = useTransRole();
+  const [isModalVersionOpen, setIsModalVersionOpen] = useState(false);
 
   return (
+    <>
       <Card
         $margin="small"
         aria-label={t('It is the card information about the document.')}
@@ -48,9 +53,25 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
             $background={colorsTokens()['greyscale-100']}
             $margin={{ horizontal: 'small' }}
           />
-        <Text as="h2" $align="center" $margin={{ all: 'none', left: 'tiny' }}>
+          <Box $gap="1rem" $direction="row">
+            <Text
+              as="h2"
+              $align="center"
+              $margin={{ all: 'none', left: 'tiny' }}
+            >
               {doc.title}
             </Text>
+            {versionId && (
+              <Button
+                onClick={() => {
+                  setIsModalVersionOpen(true);
+                }}
+                size="small"
+              >
+                {t('Restore this version')}
+              </Button>
+            )}
+          </Box>
           <DocToolBox doc={doc} />
         </Box>
         <Box
@@ -100,5 +121,13 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
           </Text>
         </Box>
       </Card>
+      {isModalVersionOpen && versionId && (
+        <ModalVersion
+          onClose={() => setIsModalVersionOpen(false)}
+          docId={doc.id}
+          versionId={versionId}
+        />
+      )}
+    </>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-versioning/components/index.ts

@@ -1 +1,2 @@
+export * from './ModalVersion';
 export * from './Panel';