♻️(frontend) Version new types

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to
 ## Added
 
 - ✨(ci) add security scan #291
+- ✨(frontend) Activate versions feature #240
 
 ## Changed
 

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc } from './common';
+import { createDoc, goToGridDoc } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -33,6 +33,7 @@ test.describe('Doc Table Content', () => {
     await editor.getByText('Hello').dblclick();
     await page.getByRole('button', { name: 'Strike' }).click();
 
+    await page.locator('.bn-block-outer').first().click();
     await page.locator('.bn-block-outer').last().click();
 
     // Create space to fill the viewport
@@ -92,4 +93,45 @@ test.describe('Doc Table Content', () => {
     await expect(editor.getByText('Hello World')).not.toBeInViewport();
     await expect(superW).toHaveAttribute('aria-selected', 'true');
   });
+
+  test('it checks that table contents panel is opened automaticaly if more that 2 headings', async ({
+    page,
+    browserName,
+  }) => {
+    const [randomDoc] = await createDoc(
+      page,
+      'doc-table-content',
+      browserName,
+      1,
+    );
+
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await expect(page.getByLabel('Open the panel')).toBeHidden();
+
+    const editor = page.locator('.ProseMirror');
+
+    await editor.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Heading 1').click();
+    await page.keyboard.type('Hello World', { delay: 100 });
+
+    await page.keyboard.press('Enter');
+
+    await editor.locator('.bn-block-outer').last().fill('/');
+    await page.getByText('Heading 2').click();
+    await page.keyboard.type('Super World', { delay: 100 });
+
+    await goToGridDoc(page, {
+      title: randomDoc,
+    });
+
+    await expect(page.getByLabel('Close the panel')).toBeVisible();
+
+    const panel = page.getByLabel('Document panel');
+    await expect(panel.getByText('Hello World')).toBeVisible();
+    await expect(panel.getByText('Super World')).toBeVisible();
+
+    await page.getByLabel('Close the panel').click();
+
+    await expect(panel).toHaveAttribute('aria-hidden', 'true');
+  });
 });

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

@@ -0,0 +1,205 @@
+import { expect, test } from '@playwright/test';
+
+import { createDoc, goToGridDoc, mockedDocument } from './common';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.describe('Doc Version', () => {
+  test('it displays the doc versions', async ({ page, browserName }) => {
+    const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
+
+    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Version history',
+      })
+      .click();
+
+    const panel = page.getByLabel('Document panel');
+
+    await expect(panel.getByText('Current version')).toBeVisible();
+    expect(await panel.locator('li').count()).toBe(1);
+
+    await page.locator('.ProseMirror.bn-editor').click();
+    await page.locator('.ProseMirror.bn-editor').last().fill('Hello World');
+
+    await goToGridDoc(page, {
+      title: randomDoc,
+    });
+
+    await expect(page.getByText('Hello World')).toBeVisible();
+
+    await page
+      .locator('.ProseMirror .bn-block')
+      .getByText('Hello World')
+      .fill('It will create a version');
+
+    await goToGridDoc(page, {
+      title: randomDoc,
+    });
+
+    await expect(page.getByText('Hello World')).toBeHidden();
+    await expect(page.getByText('It will create a version')).toBeVisible();
+
+    await page.getByLabel('Open the document options').click();
+    await page
+      .getByRole('button', {
+        name: 'Version history',
+      })
+      .click();
+
+    await expect(panel.getByText('Current version')).toBeVisible();
+    expect(await panel.locator('li').count()).toBe(2);
+
+    await panel.locator('li').nth(1).click();
+    await expect(
+      page.getByText('Read only, you cannot edit document versions.'),
+    ).toBeVisible();
+    await expect(page.getByText('Hello World')).toBeVisible();
+    await expect(page.getByText('It will create a version')).toBeHidden();
+
+    await panel.getByText('Current version').click();
+    await expect(page.getByText('Hello World')).toBeHidden();
+    await expect(page.getByText('It will create a version')).toBeVisible();
+  });
+
+  test('it does not display the doc versions if not allowed', async ({
+    page,
+  }) => {
+    await mockedDocument(page, {
+      abilities: {
+        versions_list: false,
+        partial_update: true,
+      },
+    });
+
+    await goToGridDoc(page);
+
+    await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
+
+    await page.getByLabel('Open the document options').click();
+    await expect(
+      page.getByRole('button', { name: 'Version history' }),
+    ).toBeHidden();
+
+    await page.getByRole('button', { name: 'Table of content' }).click();
+
+    await expect(
+      page.getByLabel('Document panel').getByText('Versions'),
+    ).toBeHidden();
+  });
+
+  test('it restores the doc version', 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 panel');
+    await panel.locator('li').nth(1).click();
+    await expect(page.getByText('World')).toBeHidden();
+
+    await panel.getByLabel('Open the version options').click();
+    await page.getByText('Restore the 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();
+  });
+
+  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 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/api/helpers.tsx

@@ -10,14 +10,16 @@ import { APIError } from './APIError';
 import { APIList } from './types';
 
 export type UseQueryOptionsAPI<Q> = UseQueryOptions<Q, APIError, Q>;
-export type DefinedInitialDataInfiniteOptionsAPI<Q> =
-  DefinedInitialDataInfiniteOptions<
-    Q,
-    APIError,
-    InfiniteData<Q>,
-    QueryKey,
-    number
-  >;
+export type DefinedInitialDataInfiniteOptionsAPI<
+  Q,
+  TPageParam = number,
+> = DefinedInitialDataInfiniteOptions<
+  Q,
+  APIError,
+  InfiniteData<Q>,
+  QueryKey,
+  TPageParam
+>;
 
 /**
  * @param param Used for infinite scroll pagination

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

@@ -21,7 +21,7 @@ export interface BoxProps {
   $effect?: 'show' | 'hide';
   $flex?: boolean;
   $gap?: CSSProperties['gap'];
-  $hasTransition?: boolean;
+  $hasTransition?: boolean | 'slow';
   $height?: CSSProperties['height'];
   $justify?: CSSProperties['justifyContent'];
   $overflow?: CSSProperties['overflow'];
@@ -53,7 +53,11 @@ export const Box = styled('div')<BoxProps>`
   ${({ $gap }) => $gap && `gap: ${$gap};`}
   ${({ $height }) => $height && `height: ${$height};`}
   ${({ $hasTransition }) =>
-    $hasTransition && `transition: all 0.3s ease-in-out;`}
+    $hasTransition && $hasTransition === 'slow'
+      ? `transition: all 0.5s ease-in-out;`
+      : $hasTransition
+        ? `transition: all 0.3s ease-in-out;`
+        : ''}
   ${({ $justify }) => $justify && `justify-content: ${$justify};`}
   ${({ $margin }) => $margin && stylesMargin($margin)}
   ${({ $maxHeight }) => $maxHeight && `max-height: ${$maxHeight};`}

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

@@ -24,6 +24,8 @@ const BoxButton = forwardRef<HTMLDivElement, BoxType>(
         ref={ref}
         as="button"
         $background="none"
+        $margin="none"
+        $padding="none"
         $css={`
           cursor: pointer;
           border: none;

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

@@ -14,7 +14,10 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
       $size="36px"
       $theme="primary"
       $background={colorsTokens()['primary-bg']}
-      $css={`border: 1px solid ${colorsTokens()['primary-200']}`}
+      $css={`
+        border: 1px solid ${colorsTokens()['primary-200']}; 
+        user-select: none;
+      `}
       $radius="12px"
       $padding="4px"
       $margin="auto"
@@ -38,6 +41,7 @@ export const IconOptions = ({ isOpen, ...props }: IconOptionsProps) => {
       $css={`
         transition: all 0.3s ease-in-out;
         transform: rotate(${isOpen ? '90' : '0'}deg);
+        user-select: none;
       `}
     >
       more_vert