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

Author: AntoLC

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

@@ -99,64 +99,60 @@ test.describe('Document 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 presence 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);
+    // Doc grid filters are not visible
     const searchButton = page
       .getByTestId('left-panel-desktop')
       .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: 'All docs' }).click();
+
+    await searchButton.click();
     await expect(
-      page.getByRole('menuitem', { name: 'All docs' }),
+      page.getByRole('combobox', { name: 'Quick search input' }),
     ).toBeVisible();
+    await expect(filters).toBeHidden();
+
+    await page.getByRole('button', { name: 'close' }).click();
+
+    // Create a doc without children for the moment
+    // and check that filters are not visible
+    const [doc1Title] = await createDoc(page, 'My page search', browserName, 1);
+    await verifyDocName(page, doc1Title);
+
+    await searchButton.click();
     await expect(
-      page.getByRole('menuitem', { name: 'Current doc' }),
+      page.getByRole('combobox', { name: 'Quick search input' }),
     ).toBeVisible();
-    await page.getByRole('menuitem', { name: 'Current doc' }).click();
-
-    await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible();
+    await expect(filters).toBeHidden();
 
     await page.getByRole('button', { name: 'close' }).click();
 
+    // Create a sub page
+    // and check that filters are visible
     await createRootSubPage(page, browserName, 'My sub page search');
 
     await searchButton.click();
+
+    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(
-      filters.getByRole('button', { name: 'Current doc' }),
+      page.getByRole('menuitem', { name: 'Current doc' }),
     ).toBeVisible();
+    await page.getByRole('menuitem', { name: 'All docs' }).click();
+
+    await expect(page.getByRole('button', { name: 'Reset' })).toBeVisible();
   });
 
   test('it searches sub pages', async ({ page, browserName }) => {
-    await page.goto('/');
-
     // First doc
     const [firstDocTitle] = await createDoc(
       page,
@@ -187,7 +183,6 @@ test.describe('Sub page search', () => {
       .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' })

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

@@ -2,10 +2,10 @@ 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: !!(
+    isTopRoot: doc.depth === 1,
+    isChild: doc.depth > 1,
+    hasChildren: doc.numchild > 0,
+    isDesynchronized: !!(
       doc.ancestors_link_reach &&
       doc.ancestors_link_role &&
       (doc.computed_link_reach !== doc.ancestors_link_reach ||

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

@@ -7,9 +7,9 @@ import { useDebouncedCallback } from 'use-debounce';
 
 import { Box } from '@/components';
 import { QuickSearch } from '@/components/quick-search';
+import { Doc, useDocUtils } from '@/docs/doc-management';
 import { useResponsiveStore } from '@/stores';
 
-import { Doc } from '../../doc-management';
 import EmptySearchIcon from '../assets/illustration-docs-empty.png';
 
 import { DocSearchContent } from './DocSearchContent';
@@ -20,18 +20,18 @@ import {
 } from './DocSearchFilters';
 import { DocSearchSubPageContent } from './DocSearchSubPageContent';
 
-type DocSearchModalProps = {
+type DocSearchModalGlobalProps = {
   onClose: () => void;
   isOpen: boolean;
   showFilters?: boolean;
   defaultFilters?: DocSearchFiltersValues;
 };
 
-export const DocSearchModal = ({
+const DocSearchModalGlobal = ({
   showFilters = false,
   defaultFilters,
   ...modalProps
-}: DocSearchModalProps) => {
+}: DocSearchModalGlobalProps) => {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
 
@@ -126,3 +126,42 @@ export const DocSearchModal = ({
     </Modal>
   );
 };
+
+type DocSearchModalDetailProps = DocSearchModalGlobalProps & {
+  doc: Doc;
+};
+
+const DocSearchModalDetail = ({
+  doc,
+  ...modalProps
+}: DocSearchModalDetailProps) => {
+  const { hasChildren, isChild } = useDocUtils(doc);
+  const isWithChildren = isChild || hasChildren;
+
+  let defaultFilters = DocSearchTarget.ALL;
+  let showFilters = false;
+  if (isWithChildren) {
+    defaultFilters = DocSearchTarget.CURRENT;
+    showFilters = true;
+  }
+
+  return (
+    <DocSearchModalGlobal
+      {...modalProps}
+      showFilters={showFilters}
+      defaultFilters={{ target: defaultFilters }}
+    />
+  );
+};
+
+type DocSearchModalProps = DocSearchModalGlobalProps & {
+  doc?: Doc;
+};
+
+export const DocSearchModal = ({ doc, ...modalProps }: DocSearchModalProps) => {
+  if (doc) {
+    return <DocSearchModalDetail doc={doc} {...modalProps} />;
+  }
+
+  return <DocSearchModalGlobal {...modalProps} />;
+};

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

@@ -47,7 +47,7 @@ export const DocVisibility = ({ doc, canEdit = true }: DocVisibilityProps) => {
   const [docLinkRole, setDocLinkRole] = useState<LinkRole>(
     doc.computed_link_role ?? LinkRole.READER,
   );
-  const { isDesyncronized } = useDocUtils(doc);
+  const { isDesynchronized } = useDocUtils(doc);
 
   const { linkModeTranslations, linkReachChoices, linkReachTranslations } =
     useTranslatedShareSettings();
@@ -165,7 +165,7 @@ export const DocVisibility = ({ doc, canEdit = true }: DocVisibilityProps) => {
       <Text $weight="700" $size="sm" $variation="700">
         {t('Link parameters')}
       </Text>
-      {isDesyncronized && (
+      {isDesynchronized && (
         <Box
           $background={colorsTokens['primary-100']}
           $padding="3xs"

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

@@ -43,7 +43,7 @@ export const DocTreeItemActions = ({
   const deleteModal = useModal();
 
   const copyLink = useCopyDocLink(doc.id);
-  const { isParent } = useDocUtils(doc);
+  const { isTopRoot } = 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,
     },
-    ...(!isParent
+    ...(!isTopRoot
       ? [
           {
             label: t('Move to my docs'),

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx

@@ -3,8 +3,8 @@ 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 { useDocStore } from '@/docs/doc-management';
+import { DocSearchModal } from '@/docs/doc-search/';
 import { useAuth } from '@/features/auth';
 import { useCmdK } from '@/hook/useCmdK';
 
@@ -14,7 +14,6 @@ import { LeftPanelHeaderButton } from './LeftPanelHeaderButton';
 
 export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
   const { currentDoc } = useDocStore();
-  const isDoc = !!currentDoc;
   const router = useRouter();
   const { authenticated } = useAuth();
   const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
@@ -78,45 +77,13 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
         </SeparatedSection>
         {children}
       </Box>
-      {isSearchModalOpen && isDoc && (
-        <LeftPanelSearchModalFilter
+      {isSearchModalOpen && (
+        <DocSearchModal
           onClose={closeSearchModal}
           isOpen={isSearchModalOpen}
           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 }}
-    />
-  );
-};