♻️(frontend) search on all docs if no children

When searching for documents, if no children are
found, the search will now include all documents
instead of just those with children.

Author: AntoLC

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to
 
 ### Changed
 
+- ♻️(frontend) search on all docs if no children #1184
 - ♻️(frontend) redirect to doc after duplicate #1175
 - 🔧(project) change env.d system by using local files #1200
 

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

@@ -1,6 +1,7 @@
 import { expect, test } from '@playwright/test';
 
 import { createDoc, randomName, verifyDocName } from './utils-common';
+import { createRootSubPage } from './utils-sub-pages';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -127,12 +128,12 @@ test.describe('Sub page search', () => {
     await verifyDocName(page, doc1Title);
     const searchButton = page
       .getByTestId('left-panel-desktop')
-      .getByRole('button', { name: 'search' });
+      .getByRole('button', { name: 'search', exact: true });
     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 filters.getByRole('button', { name: 'All docs' }).click();
     await expect(
       page.getByRole('menuitem', { name: 'All docs' }),
     ).toBeVisible();
@@ -142,40 +143,79 @@ test.describe('Sub page search', () => {
     await page.getByRole('menuitem', { name: 'Current doc' }).click();
 
     await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible();
+
+    await page.getByRole('button', { name: 'close' }).click();
+
+    await createRootSubPage(page, browserName, 'My sub page search');
+
+    await searchButton.click();
+    await expect(
+      filters.getByRole('button', { name: 'Current doc' }),
+    ).toBeVisible();
   });
 
   test('it searches sub pages', async ({ page, browserName }) => {
     await page.goto('/');
 
-    const [doc1Title] = await createDoc(
+    // First doc
+    const [firstDocTitle] = await createDoc(
       page,
-      'My sub page search',
+      'My first sub page search',
       browserName,
       1,
     );
-    await verifyDocName(page, doc1Title);
+    await verifyDocName(page, firstDocTitle);
+
+    // Create a new doc - for the moment without children
     await page.getByRole('button', { name: 'New doc' }).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);
+    const [secondDocTitle] = randomName(
+      'My second sub page search',
+      browserName,
+      1,
+    );
     await page
       .getByRole('textbox', { name: 'doc title input' })
-      .fill(randomDocName);
+      .fill(secondDocTitle);
+
     const searchButton = page
       .getByTestId('left-panel-desktop')
       .getByRole('button', { name: 'search' });
 
     await searchButton.click();
+    await expect(page.getByRole('button', { name: 'All docs' })).toBeVisible();
+    await page.getByRole('combobox', { name: 'Quick search input' }).click();
+    await page
+      .getByRole('combobox', { name: 'Quick search input' })
+      .fill('sub page search');
+
+    // Expect to find the first doc
     await expect(
-      page.getByRole('button', { name: 'Current doc' }),
+      page.getByRole('presentation').getByLabel(firstDocTitle),
     ).toBeVisible();
-    await page.getByRole('combobox', { name: 'Quick search input' }).click();
+    await expect(
+      page.getByRole('presentation').getByLabel(secondDocTitle),
+    ).toBeVisible();
+
+    await page.getByRole('button', { name: 'close' }).click();
+
+    // Create a sub page
+    await createRootSubPage(page, browserName, secondDocTitle);
+    await searchButton.click();
     await page
       .getByRole('combobox', { name: 'Quick search input' })
-      .fill('sub');
-    await expect(page.getByLabel(randomDocName)).toBeVisible();
+      .fill('sub page search');
+
+    // Now there is a sub page - expect to have the focus on the current doc
+    await expect(
+      page.getByRole('presentation').getByLabel(secondDocTitle),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('presentation').getByLabel(firstDocTitle),
+    ).toBeHidden();
   });
 });

src/frontend/apps/impress/src/features/docs/doc-management/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useCollaboration';
 export * from './useCopyDocLink';
+export * from './useDocUtils';
 export * from './useIsCollaborativeEditable';
 export * from './useTrans';

src/frontend/apps/impress/src/features/docs/doc-management/hooks/useDocUtils.tsx

@@ -0,0 +1,15 @@
+import { Doc } from '@/docs/doc-management';
+
+export const useDocUtils = (doc: Doc) => {
+  return {
+    isParent: doc.depth === 1, // it is a parent
+    isChild: doc.depth > 1, // it is a child
+    hasChildren: doc.numchild > 0, // it has children
+    isDesyncronized: !!(
+      doc.ancestors_link_reach &&
+      doc.ancestors_link_role &&
+      (doc.computed_link_reach !== doc.ancestors_link_reach ||
+        doc.computed_link_role !== doc.ancestors_link_role)
+    ),
+  } as const;
+};

src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx

@@ -22,9 +22,9 @@ import {
   LinkReach,
   LinkRole,
   getDocLinkReach,
+  useDocUtils,
   useUpdateDocLink,
 } from '@/docs/doc-management';
-import { useTreeUtils } from '@/docs/doc-tree';
 import { useResponsiveStore } from '@/stores';
 
 import { useTranslatedShareSettings } from '../hooks/';
@@ -47,7 +47,7 @@ export const DocVisibility = ({ doc, canEdit = true }: DocVisibilityProps) => {
   const [docLinkRole, setDocLinkRole] = useState<LinkRole>(
     doc.computed_link_role ?? LinkRole.READER,
   );
-  const { isDesyncronized } = useTreeUtils(doc);
+  const { isDesyncronized } = useDocUtils(doc);
 
   const { linkModeTranslations, linkReachChoices, linkReachTranslations } =
     useTranslatedShareSettings();

src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx

@@ -15,13 +15,13 @@ import {
   ModalRemoveDoc,
   Role,
   useCopyDocLink,
+  useDocUtils,
   useDuplicateDoc,
 } from '@/docs/doc-management';
 
 import { useCreateChildrenDoc } from '../api/useCreateChildren';
 import { useDetachDoc } from '../api/useDetach';
 import MoveDocIcon from '../assets/doc-extract-bold.svg';
-import { useTreeUtils } from '../hooks';
 
 type DocTreeItemActionsProps = {
   doc: Doc;
@@ -43,7 +43,7 @@ export const DocTreeItemActions = ({
   const deleteModal = useModal();
 
   const copyLink = useCopyDocLink(doc.id);
-  const { isCurrentParent } = useTreeUtils(doc);
+  const { isParent } = useDocUtils(doc);
   const { mutate: detachDoc } = useDetachDoc();
   const treeContext = useTreeContext<Doc>();
   const { mutate: duplicateDoc } = useDuplicateDoc({
@@ -77,7 +77,7 @@ export const DocTreeItemActions = ({
       icon: <Icon iconName="link" $size="24px" />,
       callback: copyLink,
     },
-    ...(!isCurrentParent
+    ...(!isParent
       ? [
           {
             label: t('Move to my docs'),

src/frontend/apps/impress/src/features/docs/doc-tree/hooks/index.ts

@@ -1,3 +1,2 @@
 export * from './api';
-export * from './hooks';
 export * from './utils';

src/frontend/apps/impress/src/features/docs/doc-tree/hooks/useTreeUtils.tsx

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 import { PropsWithChildren, useCallback, useState } from 'react';
 
 import { Box, Icon, SeparatedSection } from '@/components';
+import { Doc, useDocStore, useDocUtils } from '@/docs/doc-management';
 import { DocSearchModal, DocSearchTarget } from '@/docs/doc-search/';
 import { useAuth } from '@/features/auth';
 import { useCmdK } from '@/hook/useCmdK';
@@ -12,10 +13,10 @@ import { useLeftPanelStore } from '../stores';
 import { LeftPanelHeaderButton } from './LeftPanelHeaderButton';
 
 export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
+  const { currentDoc } = useDocStore();
+  const isDoc = !!currentDoc;
   const router = useRouter();
   const { authenticated } = useAuth();
-  const isDoc = router.pathname === '/docs/[id]';
-
   const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
 
   const openSearchModal = useCallback(() => {
@@ -77,16 +78,45 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
         </SeparatedSection>
         {children}
       </Box>
-      {isSearchModalOpen && (
-        <DocSearchModal
+      {isSearchModalOpen && isDoc && (
+        <LeftPanelSearchModalFilter
           onClose={closeSearchModal}
           isOpen={isSearchModalOpen}
-          showFilters={isDoc}
-          defaultFilters={{
-            target: isDoc ? DocSearchTarget.CURRENT : undefined,
-          }}
+          doc={currentDoc}
         />
       )}
+      {isSearchModalOpen && !isDoc && (
+        <DocSearchModal onClose={closeSearchModal} isOpen={isSearchModalOpen} />
+      )}
     </>
   );
 };
+
+interface LeftPanelSearchModalProps {
+  doc: Doc;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const LeftPanelSearchModalFilter = ({
+  doc,
+  isOpen,
+  onClose,
+}: LeftPanelSearchModalProps) => {
+  const { hasChildren, isChild } = useDocUtils(doc);
+  const isWithChildren = isChild || hasChildren;
+
+  let defaultFilters = DocSearchTarget.ALL;
+  if (isWithChildren) {
+    defaultFilters = DocSearchTarget.CURRENT;
+  }
+
+  return (
+    <DocSearchModal
+      onClose={onClose}
+      isOpen={isOpen}
+      showFilters={true}
+      defaultFilters={{ target: defaultFilters }}
+    />
+  );
+};