Merge branch 'master' into fix/update-search-ui

packages/app/src/components/quick-search/Footer.tsx

@@ -1,26 +1,23 @@
 import React from 'react';
 import { AddIcon } from '@blocksuite/icons';
 import { StyledModalFooterContent } from './style';
-import { useModal } from '@/providers/GlobalModalProvider';
 import { Command } from 'cmdk';
 import { usePageHelper } from '@/hooks/use-page-helper';
 import { useTranslation } from '@affine/i18n';
-export const Footer = (props: { query: string }) => {
-  const { triggerQuickSearchModal } = useModal();
+export const Footer = (props: { query: string; onClose: () => void }) => {
   const { openPage, createPage } = usePageHelper();
   const { t } = useTranslation();
-  const query = props.query;
+  const { query, onClose } = props;
 
   return (
     <Command.Item
       data-testid="quickSearch-addNewPage"
       onSelect={async () => {
+        onClose();
         const pageId = await createPage({ title: query });
         if (pageId) {
           openPage(pageId);
         }
-
-        triggerQuickSearchModal();
       }}
     >
       <StyledModalFooterContent>

packages/app/src/components/quick-search/Input.tsx

@@ -28,12 +28,9 @@ export const Input = (props: {
       },
       true
     );
+    setInputValue(props.query);
     return inputRef.current?.focus();
-  }, [inputRef]);
-  useEffect(() => {
-    return setInputValue(props.query);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [inputRef, props.query]);
   return (
     <StyledInputContent>
       <StyledLabel htmlFor=":r5:">

packages/app/src/components/quick-search/Results.tsx

@@ -1,6 +1,5 @@
 import { Command } from 'cmdk';
 import { StyledListItem, StyledNotFound } from './style';
-import { useModal } from '@/providers/GlobalModalProvider';
 import { PaperIcon, EdgelessIcon } from '@blocksuite/icons';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { useAppState } from '@/providers/app-state-provider';
@@ -12,14 +11,11 @@ import usePageHelper from '@/hooks/use-page-helper';
 export const Results = (props: {
   query: string;
   loading: boolean;
+  onClose: () => void;
   setLoading: Dispatch<SetStateAction<boolean>>;
   setShowCreatePage: Dispatch<SetStateAction<boolean>>;
 }) => {
-  const query = props.query;
-  const loading = props.loading;
-  const setLoading = props.setLoading;
-  const setShowCreatePage = props.setShowCreatePage;
-  const { triggerQuickSearchModal } = useModal();
+  const { query, loading, setLoading, setShowCreatePage, onClose } = props;
   const { openPage } = usePageHelper();
   const router = useRouter();
   const { currentWorkspace, pageList } = useAppState();
@@ -55,8 +51,8 @@ export const Results = (props: {
                 <Command.Item
                   key={result.id}
                   onSelect={() => {
+                    onClose();
                     openPage(result.id);
-                    triggerQuickSearchModal();
                   }}
                   value={result.id}
                 >
@@ -86,8 +82,8 @@ export const Results = (props: {
                 key={link.title}
                 value={link.title}
                 onSelect={() => {
+                  onClose();
                   router.push(link.href);
-                  triggerQuickSearchModal();
                 }}
               >
                 <StyledListItem>

packages/app/src/components/quick-search/index.tsx

@@ -33,40 +33,48 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   const isPublicAndNoQuery = () => {
     return isPublic && query.length === 0;
   };
+  const handleClose = () => {
+    setQuery('');
+    onClose();
+  };
   // Add  ‘⌘+K’ shortcut keys as switches
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if ((e.key === 'k' && e.metaKey) || (e.key === 'k' && e.ctrlKey)) {
         const selection = window.getSelection();
+        setQuery('');
         if (selection?.toString()) {
           triggerQuickSearchModal(false);
           return;
         }
-        if (selection?.isCollapsed) {
+        if (
+          selection?.isCollapsed &&
+          router.pathname.startsWith('/404') !== true
+        ) {
           triggerQuickSearchModal(!open);
         }
       }
     };
-    if (!open) {
-      setQuery('');
-    }
     document.addEventListener('keydown', down, { capture: true });
     return () =>
       document.removeEventListener('keydown', down, { capture: true });
-  }, [open, triggerQuickSearchModal]);
+  }, [open, router.pathname, triggerQuickSearchModal]);
 
   useEffect(() => {
+    if (router.pathname.startsWith('/404')) {
+      return handleClose();
+    }
     if (router.pathname.startsWith('/public-workspace')) {
       return setIsPublic(true);
     } else {
       return setIsPublic(false);
     }
-  }, [router]);
+  }, [handleClose, router]);
 
   return (
     <Modal
       open={open}
-      onClose={onClose}
+      onClose={handleClose}
       wrapperPosition={['top', 'center']}
       data-testid="quickSearch"
     >
@@ -102,47 +110,42 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
             />
             <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
           </StyledModalHeader>
-          <>
-            <StyledModalDivider
+          <StyledModalDivider
+            style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
+          />
+          <Command.List>
+            <StyledContent
               style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
-            />
-            <Command.List>
-              <StyledContent
-                style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
-              >
-                {!isPublic ? (
-                  <Results
-                    query={query}
-                    loading={loading}
-                    setLoading={setLoading}
-                    setShowCreatePage={setShowCreatePage}
-                  />
-                ) : (
-                  <PublishedResults
-                    query={query}
-                    loading={loading}
-                    setLoading={setLoading}
-                    onClose={onClose}
-                    setPublishWorkspaceName={setPublishWorkspaceName}
-                  />
-                )}
-              </StyledContent>
+            >
               {!isPublic ? (
-                showCreatePage ? (
-                  <>
-                    <StyledModalDivider />
-                    <StyledModalFooter>
-                      <Footer query={query} />
-                    </StyledModalFooter>
-                  </>
-                ) : (
-                  <></>
-                )
+                <Results
+                  query={query}
+                  loading={loading}
+                  setLoading={setLoading}
+                  onClose={handleClose}
+                  setShowCreatePage={setShowCreatePage}
+                />
               ) : (
-                <></>
+                <PublishedResults
+                  query={query}
+                  loading={loading}
+                  setLoading={setLoading}
+                  onClose={handleClose}
+                  setPublishWorkspaceName={setPublishWorkspaceName}
+                />
               )}
-            </Command.List>
-          </>
+            </StyledContent>
+            {!isPublic ? (
+              showCreatePage ? (
+                <>
+                  <StyledModalDivider />
+                  <StyledModalFooter>
+                    <Footer query={query} onClose={handleClose} />
+                  </StyledModalFooter>
+                </>
+              ) : null
+            ) : null}
+          </Command.List>
         </Command>
       </ModalWrapper>
     </Modal>

tests/quick-search.spec.ts

@@ -8,15 +8,19 @@ loadPage();
 const openQuickSearchByShortcut = async (page: Page) =>
   await withCtrlOrMeta(page, () => page.keyboard.press('k', { delay: 50 }));
 
-async function assertTitleTexts(page: Page, texts: string) {
-  await page.title();
-  const actual = await page.evaluate(() => {
-    const titleElement = <HTMLTextAreaElement>(
-      document.querySelector('.affine-default-page-block-title')
-    );
-    return titleElement.value;
-  });
-  expect(actual).toEqual(texts);
+async function assertTitleTexts(page: Page, texts: string, isSearch?: boolean) {
+  if (isSearch) {
+    const actual = await page.evaluate(() => {
+      const titleElement = <HTMLTextAreaElement>(
+        document.querySelector('.affine-default-page-block-title')
+      );
+      return titleElement.value;
+    });
+    expect(actual).toEqual(texts);
+  } else {
+    const actual = await page.title();
+    expect(actual).toEqual(texts);
+  }
 }
 async function assertResultList(page: Page, texts: string[]) {
   const actual = await page.locator('[cmdk-item]').allInnerTexts();
@@ -53,14 +57,13 @@ test.describe('Open quick search', () => {
 });
 
 test.describe('Add new page in quick search', () => {
-  // FIXME: not working
   test('Create a new page without keyword', async ({ page }) => {
     await newPage(page);
     await openQuickSearchByShortcut(page);
     const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]');
     await addNewPage.click();
     await page.waitForTimeout(300);
-    await assertTitleTexts(page, '');
+    await assertTitleTexts(page, 'Untitled');
   });
 
   test('Create a new page with keyword', async ({ page }) => {
@@ -75,7 +78,7 @@ test.describe('Add new page in quick search', () => {
 });
 
 test.describe('Search and select', () => {
-  test.skip('Create a new page and search this page', async ({ page }) => {
+  test('Create a new page and search this page', async ({ page }) => {
     await newPage(page);
     await openQuickSearchByShortcut(page);
     await page.keyboard.insertText('test123456');
@@ -83,11 +86,11 @@ test.describe('Search and select', () => {
     await addNewPage.click();
     await page.waitForTimeout(300);
     await assertTitleTexts(page, 'test123456');
-    await page.waitForTimeout(100);
     await openQuickSearchByShortcut(page);
-    await page.keyboard.type('test123456');
+    await page.keyboard.insertText('test123456');
     await assertResultList(page, ['test123456']);
-    await page.keyboard.press('Enter', { delay: 50 });
-    await assertTitleTexts(page, 'test123456');
+    await page.keyboard.press('Enter');
+    await page.waitForTimeout(300);
+    await assertTitleTexts(page, 'test123456', true);
   });
 });