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

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

@@ -0,0 +1,149 @@
+/* eslint-disable playwright/no-conditional-in-test */
+import { expect, test } from '@playwright/test';
+
+import { createDoc } from './common';
+
+test.describe('Doc Tree', () => {
+ test('create new sub pages', async ({ page, browserName }) => {
+ await page.goto('/');
+ await createDoc(page, 'doc-tree-content', browserName, 1);
+ const addButton = page.getByRole('button', { name: 'New page' });
+ const docTree = page.getByTestId('doc-tree');
+
+ await expect(addButton).toBeVisible();
+
+ // Attendre et intercepter la requête POST pour créer une nouvelle page
+ const responsePromise = page.waitForResponse(
+ (response) =>
+ response.url().includes('/documents/') &&
+ response.url().includes('/children/') &&
+ response.request().method() === 'POST',
+ );
+
+ await addButton.click();
+ const response = await responsePromise;
+ expect(response.ok()).toBeTruthy();
+ const subPageJson = await response.json();
+
+ await expect(docTree).toBeVisible();
+ const subPageItem = docTree
+ .getByTestId(`doc-sub-page-item-${subPageJson.id}`)
+ .first();
+
+ await expect(subPageItem).toBeVisible();
+ await subPageItem.click();
+ const input = page.getByRole('textbox', { name: 'doc title input' });
+ await input.click();
+ await input.fill('Test');
+ await input.press('Enter');
+ await expect(subPageItem.getByText('Test')).toBeVisible();
+ await page.reload();
+ await expect(subPageItem.getByText('Test')).toBeVisible();
+ });
+
+ test('check the reorder of sub pages', async ({ page, browserName }) => {
+ await page.goto('/');
+ await createDoc(page, 'doc-tree-content', browserName, 1);
+ const addButton = page.getByRole('button', { name: 'New page' });
+ await expect(addButton).toBeVisible();
+
+ const docTree = page.getByTestId('doc-tree');
+
+ // Create first sub page
+ const firstResponsePromise = page.waitForResponse(
+ (response) =>
+ response.url().includes('/documents/') &&
+ response.url().includes('/children/') &&
+ response.request().method() === 'POST',
+ );
+
+ await addButton.click();
+ const firstResponse = await firstResponsePromise;
+ expect(firstResponse.ok()).toBeTruthy();
+
+ const secondResponsePromise = page.waitForResponse(
+ (response) =>
+ response.url().includes('/documents/') &&
+ response.url().includes('/children/') &&
+ response.request().method() === 'POST',
+ );
+
+ // Create second sub page
+ await addButton.click();
+ const secondResponse = await secondResponsePromise;
+ expect(secondResponse.ok()).toBeTruthy();
+
+ const secondSubPageJson = await secondResponse.json();
+ const firstSubPageJson = await firstResponse.json();
+
+ const firstSubPageItem = docTree
+ .getByTestId(`doc-sub-page-item-${firstSubPageJson.id}`)
+ .first();
+
+ const secondSubPageItem = docTree
+ .getByTestId(`doc-sub-page-item-${secondSubPageJson.id}`)
+ .first();
+
+ // check that the sub pages are visible in the tree
+ await expect(firstSubPageItem).toBeVisible();
+ await expect(secondSubPageItem).toBeVisible();
+
+ // get the bounding boxes of the sub pages
+ const firstSubPageBoundingBox = await firstSubPageItem.boundingBox();
+ const secondSubPageBoundingBox = await secondSubPageItem.boundingBox();
+
+ expect(firstSubPageBoundingBox).toBeDefined();
+ expect(secondSubPageBoundingBox).toBeDefined();
+
+ if (!firstSubPageBoundingBox || !secondSubPageBoundingBox) {
+ throw new Error('Impossible de déterminer la position des éléments');
+ }
+
+ // move the first sub page to the second position
+ await page.mouse.move(
+ firstSubPageBoundingBox.x + firstSubPageBoundingBox.width / 2,
+ firstSubPageBoundingBox.y + firstSubPageBoundingBox.height / 2,
+ );
+
+ await page.mouse.down();
+
+ await page.mouse.move(
+ secondSubPageBoundingBox.x + secondSubPageBoundingBox.width / 2,
+ secondSubPageBoundingBox.y + secondSubPageBoundingBox.height + 4,
+ { steps: 10 },
+ );
+
+ await page.mouse.up();
+
+ // check that the sub pages are visible in the tree
+ await expect(firstSubPageItem).toBeVisible();
+ await expect(secondSubPageItem).toBeVisible();
+
+ // reload the page
+ await page.reload();
+
+ // check that the sub pages are visible in the tree
+ await expect(firstSubPageItem).toBeVisible();
+ await expect(secondSubPageItem).toBeVisible();
+
+ // Check the position of the sub pages
+ const allSubPageItems = await docTree
+ .getByTestId(/^doc-sub-page-item/)
+ .all();
+
+ expect(allSubPageItems.length).toBe(2);
+
+ // Vérifier que le premier élément a l'ID de la deuxième sous-page après le drag and drop
+
+ await expect(allSubPageItems[0]).toHaveAttribute(
+ 'data-testid',
+ `doc-sub-page-item-${secondSubPageJson.id}`,
+ );
+
+ // Vérifier que le deuxième élément a l'ID de la première sous-page après le drag and drop
+ await expect(allSubPageItems[1]).toHaveAttribute(
+ 'data-testid',
+ `doc-sub-page-item-${firstSubPageJson.id}`,
+ );
+ });
+});

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

@@ -8,6 +8,7 @@ export type DropdownMenuOption = {
  icon?: string;
  label: string;
  testId?: string;
+ value?: string;
  callback?: () => void | Promise<unknown>;
  danger?: boolean;
  isSelected?: boolean;
@@ -23,6 +24,8 @@ export type DropdownMenuProps = {
  buttonCss?: BoxProps['$css'];
  disabled?: boolean;
  topMessage?: string;
+ selectedValues?: string[];
+ afterOpenChange?: (isOpen: boolean) => void;
 };
 
 export const DropdownMenu = ({
@@ -34,6 +37,8 @@ export const DropdownMenu = ({
  buttonCss,
  label,
  topMessage,
+ afterOpenChange,
+ selectedValues,
 }: PropsWithChildren<DropdownMenuProps>) => {
  const theme = useCunninghamTheme();
  const spacings = theme.spacingsTokens();
@@ -43,6 +48,7 @@ export const DropdownMenu = ({
 
  const onOpenChange = (isOpen: boolean) => {
  setIsOpen(isOpen);
+ afterOpenChange?.(isOpen);
  };
 
  if (disabled) {
@@ -161,7 +167,8 @@ export const DropdownMenu = ({
  {option.label}
  </Text>
  </Box>
- {option.isSelected && (
+ {(option.isSelected ||
+ selectedValues?.includes(option.value ?? '')) && (
  <Icon iconName="check" $size="20px" $theme="greyscale" />
  )}
  </BoxButton>

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

@@ -5,10 +5,19 @@ import { useCunninghamTheme } from '@/cunningham';
 
 type IconProps = TextType & {
  iconName: string;
+ isFilled?: boolean;
 };
-export const Icon = ({ iconName, ...textProps }: IconProps) => {
+export const Icon = ({ iconName, isFilled, ...textProps }: IconProps) => {
  return (
- <Text $isMaterialIcon {...textProps}>
+ <Text
+ $isMaterialIcon={!isFilled}
+ {...textProps}
+ className={
+ isFilled
+ ? `material-icons-filled ${textProps.className}`
+ : textProps.className
+ }
+ >
  {iconName}
  </Text>
  );
@@ -27,7 +36,7 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
  $size="36px"
  $theme="primary"
  $variation="600"
- $background={colorsTokens()['primary-bg']}
+ $background={colorsTokens()['greyscale-000']}
  $css={`
  border: 1px solid ${colorsTokens()['primary-200']}; 
  user-select: none;

src/frontend/apps/impress/src/components/filter/FilterDropdown.tsx

@@ -0,0 +1,63 @@
+import { css } from 'styled-components';
+
+import { Box } from '../Box';
+import { DropdownMenu, DropdownMenuOption } from '../DropdownMenu';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+
+export type FilterDropdownProps = {
+ options: DropdownMenuOption[];
+ selectedValue?: string;
+};
+
+export const FilterDropdown = ({
+ options,
+ selectedValue,
+}: FilterDropdownProps) => {
+ const selectedOption = options.find(
+ (option) => option.value === selectedValue,
+ );
+
+ if (options.length === 0) {
+ return null;
+ }
+
+ return (
+ <DropdownMenu
+ selectedValues={selectedValue ? [selectedValue] : undefined}
+ options={options}
+ >
+ <Box
+ $css={css`
+ border: 1px solid
+ ${selectedOption
+ ? 'var(--c--theme--colors--primary-500)'
+ : 'var(--c--theme--colors--greyscale-250)'};
+ border-radius: 4px;
+ background-color: ${selectedOption
+ ? 'var(--c--theme--colors--primary-100)'
+ : 'var(--c--theme--colors--greyscale-000)'};
+ gap: var(--c--theme--spacings--2xs);
+ padding: var(--c--theme--spacings--2xs) var(--c--theme--spacings--xs);
+ `}
+ color="secondary"
+ $direction="row"
+ $align="center"
+ >
+ <Text
+ $weight={400}
+ $variation={selectedOption ? '800' : '600'}
+ $theme={selectedOption ? 'primary' : 'greyscale'}
+ >
+ {selectedOption?.label ?? options[0].label}
+ </Text>
+ <Icon
+ $size="16px"
+ iconName="keyboard_arrow_down"
+ $variation={selectedOption ? '800' : '600'}
+ $theme={selectedOption ? 'primary' : 'greyscale'}
+ />
+ </Box>
+ </DropdownMenu>
+ );
+};

src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx

@@ -57,6 +57,9 @@ export const QuickSearchInput = ({
  /* eslint-disable-next-line jsx-a11y/no-autofocus */
  autoFocus={true}
  aria-label={t('Quick search input')}
+ onClick={(e) => {
+ e.stopPropagation();
+ }}
  value={inputValue}
  role="combobox"
  placeholder={placeholder ?? t('Search')}

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

@@ -1,10 +1,6 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import {
- Tooltip,
- VariantType,
- useToastProvider,
-} from '@openfun/cunningham-react';
+import { Tooltip } from '@openfun/cunningham-react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
@@ -20,6 +16,8 @@ import {
 } from '@/docs/doc-management';
 import { useBroadcastStore, useResponsiveStore } from '@/stores';
 
+import { useDocTreeData } from '../../doc-tree/context/DocTreeContext';
+
 interface DocTitleProps {
  doc: Doc;
 }
@@ -57,18 +55,20 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
  const { t } = useTranslation();
  const { colorsTokens } = useCunninghamTheme();
  const [titleDisplay, setTitleDisplay] = useState(doc.title);
- const { toast } = useToastProvider();
+ const data = useDocTreeData();
  const { untitledDocument } = useTrans();
 
  const { broadcast } = useBroadcastStore();
 
  const { mutate: updateDoc } = useUpdateDoc({
  listInvalideQueries: [KEY_DOC, KEY_LIST_DOC],
- onSuccess(data) {
- toast(t('Document title updated successfully'), VariantType.SUCCESS);
-
+ onSuccess(updatedDoc) {
  // Broadcast to every user connected to the document
- broadcast(`${KEY_DOC}-${data.id}`);
+ broadcast(`${KEY_DOC}-${updatedDoc.id}`);
+ data?.tree?.updateNode(updatedDoc.id, { title: updatedDoc.title });
+ if (updatedDoc.id === data?.root?.id) {
+ void data?.refreshRoot();
+ }
  },
  });
 

src/frontend/apps/impress/src/features/docs/doc-management/api/useDocs.tsx

@@ -8,6 +8,7 @@ import {
  useAPIInfiniteQuery,
 } from '@/api';
 
+import { DocSearchTarget } from '../../doc-search/components/DocSearchFilters';
 import { Doc } from '../types';
 
 export const isDocsOrdering = (data: string): data is DocsOrdering => {
@@ -31,6 +32,8 @@ export type DocsParams = {
  is_creator_me?: boolean;
  title?: string;
  is_favorite?: boolean;
+ target?: DocSearchTarget;
+ parent_id?: string;
 };
 
 export type DocsResponse = APIList<Doc>;
@@ -53,8 +56,14 @@ export const getDocs = async (params: DocsParams): Promise<DocsResponse> => {
  if (params.is_favorite !== undefined) {
  searchParams.set('is_favorite', params.is_favorite.toString());
  }
-
- const response = await fetchAPI(`documents/?${searchParams.toString()}`);
+ let response: Response;
+ if (params.parent_id && params.target === DocSearchTarget.CURRENT) {
+ response = await fetchAPI(
+ `documents/${params.parent_id}/descendants/?${searchParams.toString()}`,
+ );
+ } else {
+ response = await fetchAPI(`documents/?${searchParams.toString()}`);
+ }
 
  if (!response.ok) {
  throw new APIError('Failed to get the docs', await errorCauses(response));