Merge pull request #852 from toeverything/fix/update-search-ui

fix: update search UI in public page

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

@@ -30,13 +30,19 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   const [publishWorkspaceName, setPublishWorkspaceName] = useState('');
   const [showCreatePage, setShowCreatePage] = useState(true);
   const { triggerQuickSearchModal } = useModal();
-
+  const isPublicAndNoQuery = () => {
+    return isPublic && query.length === 0;
+  };
   const handleClose = () => {
     setQuery('');
     onClose();
   };
   // Add  ‘⌘+K’ shortcut keys as switches
   useEffect(() => {
+    if (router.pathname.startsWith('/404')) {
+      triggerQuickSearchModal(false);
+      return;
+    }
     const down = (e: KeyboardEvent) => {
       if ((e.key === 'k' && e.metaKey) || (e.key === 'k' && e.ctrlKey)) {
         const selection = window.getSelection();
@@ -53,7 +59,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
     document.addEventListener('keydown', down, { capture: true });
     return () =>
       document.removeEventListener('keydown', down, { capture: true });
-  }, [open, triggerQuickSearchModal]);
+  }, [open, router.pathname, triggerQuickSearchModal]);
 
   useEffect(() => {
     if (router.pathname.startsWith('/public-workspace')) {
@@ -74,7 +80,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
         width={620}
         style={{
           maxHeight: '80vh',
-          minHeight: '350px',
+          minHeight: isPublicAndNoQuery() ? '72px' : '350px',
           top: '12vh',
         }}
       >
@@ -102,9 +108,13 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
             />
             <StyledShortcut>{isMac() ? '⌘ + K' : 'Ctrl + K'}</StyledShortcut>
           </StyledModalHeader>
-          <StyledModalDivider />
+          <StyledModalDivider
+            style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
+          />
           <Command.List>
-            <StyledContent>
+            <StyledContent
+              style={{ display: isPublicAndNoQuery() ? 'none' : '' }}
+            >
               {!isPublic ? (
                 <Results
                   query={query}
@@ -120,6 +130,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
                   setLoading={setLoading}
                   onClose={handleClose}
                   setPublishWorkspaceName={setPublishWorkspaceName}
+                  data-testid="publishedSearchResults"
                 />
               )}
             </StyledContent>

packages/app/src/components/quick-search/style.ts

@@ -9,6 +9,7 @@ export const StyledContent = styled('div')(({ theme }) => {
     marginBottom: '10px',
     ...displayFlex('center', 'flex-start'),
     color: theme.colors.popoverColor,
+    transition: 'all 0.15s',
     letterSpacing: '0.06em',
     '[cmdk-group-heading]': {
       margin: '5px 16px',
@@ -16,7 +17,6 @@ export const StyledContent = styled('div')(({ theme }) => {
       fontWeight: '500',
     },
     '[aria-selected="true"]': {
-      transition: 'background .15s, color .15s',
       borderRadius: '5px',
       color: theme.colors.primaryColor,
       backgroundColor: theme.colors.hoverBackground,
@@ -103,6 +103,7 @@ export const StyledModalDivider = styled('div')(({ theme }) => {
     margin: '6px 16px 6.5px 16px',
     position: 'relative',
     borderTop: `0.5px solid ${theme.colors.placeHolderColor}`,
+    transition: 'all 0.15s',
   };
 });
 

tests/quick-search.spec.ts

@@ -94,3 +94,23 @@ test.describe('Search and select', () => {
     await assertTitleTexts(page, 'test123456', true);
   });
 });
+test.describe('Disable search on 404 page', () => {
+  test('Navigate to the 404 page and try to open quick search', async ({
+    page,
+  }) => {
+    await page.goto('http://localhost:8080/404');
+    const notFoundTip = page.locator('[data-testid=notFound]');
+    await expect(notFoundTip).toBeVisible();
+    await openQuickSearchByShortcut(page);
+    const quickSearch = page.locator('[data-testid=quickSearch]');
+    await expect(quickSearch).toBeVisible({ visible: false });
+  });
+});
+test.describe('Open quick search on the published page', () => {
+  test('Open quick search on local page', async ({ page }) => {
+    await newPage(page);
+    await openQuickSearchByShortcut(page);
+    const publishedSearchResults = page.locator('[publishedSearchResults]');
+    await expect(publishedSearchResults).toBeVisible({ visible: false });
+  });
+});