diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx index 15659e5558..65cfe22c6b 100644 --- a/packages/app/src/components/quick-search/index.tsx +++ b/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) => { /> {isMac() ? '⌘ + K' : 'Ctrl + K'} - + - + {!isPublic ? ( { setLoading={setLoading} onClose={handleClose} setPublishWorkspaceName={setPublishWorkspaceName} + data-testid="publishedSearchResults" /> )} diff --git a/packages/app/src/components/quick-search/style.ts b/packages/app/src/components/quick-search/style.ts index 492b7988c4..3c949aaaa9 100644 --- a/packages/app/src/components/quick-search/style.ts +++ b/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', }; }); diff --git a/tests/quick-search.spec.ts b/tests/quick-search.spec.ts index 4526a7e447..68e05acd41 100644 --- a/tests/quick-search.spec.ts +++ b/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 }); + }); +});