✨(frontend) added subpage management and document tree features

New components were created to manage subpages in the document tree,
including the ability to add, reorder, and view subpages. Tests were
added to verify the functionality of these features. Additionally, API
changes were made to manage the creation and retrieval of document
children.

Author: PanchoutNathan

CHANGELOG.md

@@ -85,6 +85,7 @@ and this project adheres to
 
 ## Added
 
+- ✨(frontend) multi-pages #701
 - ✨(backend) include ancestors accesses on document accesses list view #846
 - ✨(backend) add ancestors links reach and role to document API #846
 - 🚸(backend) make document search on title accent-insensitive #874

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

@@ -78,16 +78,19 @@ export const createDoc = async (
   docName: string,
   browserName: string,
   length: number = 1,
+  isChild: boolean = false,
 ) => {
   const randomDocs = randomName(docName, browserName, length);
 
   for (let i = 0; i < randomDocs.length; i++) {
-    const header = page.locator('header').first();
-    await header.locator('h2').getByText('Docs').click();
+    if (!isChild) {
+      const header = page.locator('header').first();
+      await header.locator('h2').getByText('Docs').click();
+    }
 
     await page
       .getByRole('button', {
-        name: 'New doc',
+        name: isChild ? 'New page' : 'New doc',
       })
       .click();
 

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

@@ -14,10 +14,10 @@ test.beforeEach(async ({ page }) => {
 
 test.describe('Doc Create', () => {
   test('it creates a doc', async ({ page, browserName }) => {
-    const [docTitle] = await createDoc(page, 'My new doc', browserName, 1);
+    const [docTitle] = await createDoc(page, 'my-new-doc', browserName, 1);
 
     await page.waitForFunction(
-      () => document.title.match(/My new doc - Docs/),
+      () => document.title.match(/my-new-doc - Docs/),
       { timeout: 5000 },
     );
 

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

@@ -173,6 +173,7 @@ test.describe('Doc Editor', () => {
     await expect(editor.getByText('Hello World Doc 2')).toBeHidden();
     await expect(editor.getByText('Hello World Doc 1')).toBeVisible();
 
+    await page.goto('/');
     await page
       .getByRole('button', {
         name: 'New doc',

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

@@ -60,7 +60,7 @@ test.describe('Doc Routing', () => {
   });
 
   test('checks 401 on docs/[id] page', async ({ page, browserName }) => {
-    const [docTitle] = await createDoc(page, 'My new doc', browserName, 1);
+    const [docTitle] = await createDoc(page, '401-doc', browserName, 1);
     await verifyDocName(page, docTitle);
 
     const responsePromise = page.route(

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, verifyDocName } from './common';
+import { createDoc, randomName, verifyDocName } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -94,4 +94,85 @@ test.describe('Document search', () => {
       page.getByLabel('Search modal').getByText('search'),
     ).toBeHidden();
   });
+
+  test("it checks we don't see filters in search modal", async ({ page }) => {
+    const searchButton = page
+      .getByTestId('left-panel-desktop')
+      .getByRole('button', { name: 'search' });
+
+    await expect(searchButton).toBeVisible();
+    await page.getByRole('button', { name: 'search', exact: true }).click();
+    await expect(
+      page.getByRole('combobox', { name: 'Quick search input' }),
+    ).toBeVisible();
+    await expect(page.getByTestId('doc-search-filters')).toBeHidden();
+  });
+});
+
+test.describe('Sub page search', () => {
+  test('it check the precense of filters in search modal', async ({
+    page,
+    browserName,
+  }) => {
+    await page.goto('/');
+    const [doc1Title] = await createDoc(
+      page,
+      'My sub page search',
+      browserName,
+      1,
+    );
+    await verifyDocName(page, doc1Title);
+    const searchButton = page
+      .getByTestId('left-panel-desktop')
+      .getByRole('button', { name: 'search' });
+    await searchButton.click();
+    const filters = page.getByTestId('doc-search-filters');
+    await expect(filters).toBeVisible();
+    await filters.click();
+    await filters.getByRole('button', { name: 'Current doc' }).click();
+    await expect(
+      page.getByRole('menuitem', { name: 'All docs' }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('menuitem', { name: 'Current doc' }),
+    ).toBeVisible();
+    await page.getByRole('menuitem', { name: 'Current doc' }).click();
+
+    await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible();
+  });
+
+  test('it searches sub pages', async ({ page, browserName }) => {
+    await page.goto('/');
+
+    const [doc1Title] = await createDoc(
+      page,
+      'My sub page search',
+      browserName,
+      1,
+    );
+    await verifyDocName(page, doc1Title);
+    await page.getByRole('button', { name: 'New page' }).click();
+    await verifyDocName(page, '');
+    await page.getByRole('textbox', { name: 'doc title input' }).click();
+    await page
+      .getByRole('textbox', { name: 'doc title input' })
+      .press('ControlOrMeta+a');
+    const [randomDocName] = randomName('doc-sub-page', browserName, 1);
+    await page
+      .getByRole('textbox', { name: 'doc title input' })
+      .fill(randomDocName);
+    const searchButton = page
+      .getByTestId('left-panel-desktop')
+      .getByRole('button', { name: 'search' });
+
+    await searchButton.click();
+    await expect(
+      page.getByRole('button', { name: 'Current doc' }),
+    ).toBeVisible();
+    await page.getByRole('combobox', { name: 'Quick search input' }).click();
+    await page
+      .getByRole('combobox', { name: 'Quick search input' })
+      .fill('sub');
+    await expect(page.getByLabel(randomDocName)).toBeVisible();
+  });
 });