✨(frontend) Move doc modal

We can now move a doc to another doc from a search
modal. It will make it easier to move a doc
without having to scroll through the doc grid to
find the destination doc.
We kept most of the logic implemented in the
doc grid dnd.

Author: AntoLC

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to
 - ✨(frontend) Can print a doc #1832
 - ✨(backend) manage reconciliation requests for user accounts #1878
 - 👷(CI) add GHCR workflow for forked repo testing #1851
+- ✨(frontend) Move doc modal #1886
 - ✨(backend) allow the duplication of subpages #1893
 - ✨(backend) Onboarding docs for new users #1891
 

…tests__/app-impress/doc-grid-dnd.spec.ts …ests__/app-impress/doc-grid-move.spec.tssrc/frontend/apps/e2e/__tests__/app-impress/doc-grid-dnd.spec.ts renamed to src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts src/frontend/apps/e2e/__tests__/app-impress/doc-grid-dnd.spec.ts renamed to src/frontend/apps/e2e/__tests__/app-impress/doc-grid-move.spec.ts

@@ -1,10 +1,19 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, mockedListDocs, toggleHeaderMenu } from './utils-common';
+import {
+  createDoc,
+  getGridRow,
+  mockedListDocs,
+  toggleHeaderMenu,
+  verifyDocName,
+} from './utils-common';
 import { createRootSubPage } from './utils-sub-pages';
 
-test.describe('Doc grid dnd', () => {
-  test('it creates a doc', async ({ page, browserName }) => {
+test.describe('Doc grid move', () => {
+  test('it checks drag and drop functionality', async ({
+    page,
+    browserName,
+  }) => {
     await page.goto('/');
     const header = page.locator('header').first();
     await createDoc(page, 'Draggable doc', browserName, 1);
@@ -29,7 +38,7 @@ test.describe('Doc grid dnd', () => {
     await expect(draggableElement).toBeVisible();
     await expect(dropZone).toBeVisible();
 
-    // Obtenir les positions des éléments
+    // Get the position of the elements
     const draggableBoundingBox = await draggableElement.boundingBox();
     const dropZoneBoundingBox = await dropZone.boundingBox();
 
@@ -46,7 +55,7 @@ test.describe('Doc grid dnd', () => {
     );
     await page.mouse.down();
 
-    // Déplacer vers la zone cible
+    // Move to the target zone
     await page.mouse.move(
       dropZoneBoundingBox.x + dropZoneBoundingBox.width / 2,
       dropZoneBoundingBox.y + dropZoneBoundingBox.height / 2,
@@ -161,6 +170,55 @@ test.describe('Doc grid dnd', () => {
 
     await page.mouse.up();
   });
+
+  test('it moves a doc from the doc search modal', async ({
+    page,
+    browserName,
+  }) => {
+    await page.goto('/');
+
+    const [titleDoc1] = await createDoc(page, 'Draggable doc', browserName, 1);
+    await page.getByRole('button', { name: 'Back to homepage' }).click();
+
+    const [titleDoc2] = await createDoc(page, 'Droppable doc', browserName, 1);
+    await page.getByRole('button', { name: 'Back to homepage' }).click();
+
+    const docsGrid = page.getByTestId('docs-grid');
+    await expect(docsGrid.getByText(titleDoc1)).toBeVisible();
+    await expect(docsGrid.getByText(titleDoc2)).toBeVisible();
+
+    const row = await getGridRow(page, titleDoc1);
+    await row.getByText(`more_horiz`).click();
+
+    await page.getByRole('menuitem', { name: 'Move into a doc' }).click();
+
+    await expect(
+      page.getByRole('dialog').getByRole('heading', { name: 'Move' }),
+    ).toBeVisible();
+
+    const input = page.getByRole('combobox', { name: 'Quick search input' });
+    await input.click();
+    await input.fill(titleDoc2);
+
+    await expect(page.getByRole('option').getByText(titleDoc2)).toBeVisible();
+
+    // Select the first result
+    await page.keyboard.press('Enter');
+    // The CTA should get the focus
+    await page.keyboard.press('Tab');
+    // Validate the move action
+    await page.keyboard.press('Enter');
+
+    await expect(docsGrid.getByText(titleDoc1)).toBeHidden();
+    await docsGrid
+      .getByRole('link', { name: `Open document ${titleDoc2}` })
+      .click();
+
+    await verifyDocName(page, titleDoc2);
+
+    const docTree = page.getByTestId('doc-tree');
+    await expect(docTree.getByText(titleDoc1)).toBeVisible();
+  });
 });
 
 test.describe('Doc grid dnd mobile', () => {

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

@@ -36,7 +36,6 @@ export const QuickSearch = ({
   onFilter,
   inputContent,
   inputValue,
-  loading,
   showInput = true,
   label,
   placeholder,
@@ -75,7 +74,6 @@ export const QuickSearch = ({
         >
           {showInput && (
             <QuickSearchInput
-              loading={loading}
               withSeparator={hasChildrens(children)}
               inputValue={inputValue}
               onFilter={onFilter}

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

@@ -1,6 +1,5 @@
-import { Loader } from '@gouvfr-lasuite/cunningham-react';
 import { Command } from 'cmdk';
-import { ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { HorizontalSeparator } from '@/components';
@@ -9,19 +8,16 @@ import { useCunninghamTheme } from '@/cunningham';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
 
-type Props = {
-  loading?: boolean;
+type QuickSearchInputProps = {
   inputValue?: string;
   onFilter?: (str: string) => void;
   placeholder?: string;
-  children?: ReactNode;
   withSeparator?: boolean;
   listId?: string;
   onUserInteract?: () => void;
   isExpanded?: boolean;
 };
 export const QuickSearchInput = ({
-  loading,
   inputValue,
   onFilter,
   placeholder,
@@ -30,7 +26,7 @@ export const QuickSearchInput = ({
   listId,
   onUserInteract,
   isExpanded,
-}: Props) => {
+}: PropsWithChildren<QuickSearchInputProps>) => {
   const { t } = useTranslation();
   const { spacingsTokens } = useCunninghamTheme();
 
@@ -52,14 +48,7 @@ export const QuickSearchInput = ({
         $gap={spacingsTokens['2xs']}
         $padding={{ horizontal: 'base', vertical: 'sm' }}
       >
-        {!loading && (
-          <Icon iconName="search" $variation="secondary" aria-hidden="true" />
-        )}
-        {loading && (
-          <div>
-            <Loader size="small" />
-          </div>
-        )}
+        <Icon iconName="search" $variation="secondary" aria-hidden="true" />
         <Command.Input
           autoFocus={true}
           aria-label={t('Quick search input')}

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

@@ -22,7 +22,7 @@ export const QuickSearchStyle = createGlobalStyle`
       padding: var(--c--globals--spacings--xs);
       background: white;
       outline: none;
-      color: var(--c--globals--colors--gray-1000);
+      color: var(--c--contextuals--content--semantic--neutral--primary);
       border-radius: var(--c--globals--spacings--0);
 
       &::placeholder {

src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchContent.tsx

@@ -12,15 +12,19 @@ import { DocSearchItem } from './DocSearchItem';
 type DocSearchContentProps = {
   search: string;
   filters: DocSearchFiltersValues;
+  filterResults?: (doc: Doc) => boolean;
   onSelect: (doc: Doc) => void;
   onLoadingChange?: (loading: boolean) => void;
+  renderSearchElement?: (doc: Doc) => React.ReactNode;
 };
 
 export const DocSearchContent = ({
   search,
   filters,
+  filterResults,
   onSelect,
   onLoadingChange,
+  renderSearchElement,
 }: DocSearchContentProps) => {
   const {
     data,
@@ -38,7 +42,11 @@ export const DocSearchContent = ({
   const loading = isFetching || isRefetching || isLoading;
 
   const docsData: QuickSearchData<Doc> = useMemo(() => {
-    const docs = data?.pages.flatMap((page) => page.results) || [];
+    let docs = data?.pages.flatMap((page) => page.results) || [];
+
+    if (filterResults) {
+      docs = docs.filter(filterResults);
+    }
 
     return {
       groupName: docs.length > 0 ? t('Select a document') : '',
@@ -52,7 +60,7 @@ export const DocSearchContent = ({
           ]
         : [],
     };
-  }, [search, data?.pages, fetchNextPage, hasNextPage]);
+  }, [search, data?.pages, fetchNextPage, hasNextPage, filterResults]);
 
   useEffect(() => {
     onLoadingChange?.(loading);
@@ -62,7 +70,9 @@ export const DocSearchContent = ({
     <QuickSearchGroup
       onSelect={onSelect}
       group={docsData}
-      renderElement={(doc) => <DocSearchItem doc={doc} />}
+      renderElement={
+        renderSearchElement ?? ((doc) => <DocSearchItem doc={doc} />)
+      }
     />
   );
 };

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

@@ -1,3 +1,4 @@
+export * from './DocSearchContent';
 export * from './DocSearchModal';
 export * from './DocSearchFilters';
 export * from './DocSearchSubPageContent';