feat(command-bar): add search to command bar

frontend/src/lib/components/CommandBar/CommandBar.tsx

@@ -0,0 +1,54 @@
+import { useRef, forwardRef } from 'react'
+import { useActions, useValues } from 'kea'
+
+import { useEventListener } from 'lib/hooks/useEventListener'
+import { useOutsideClickHandler } from 'lib/hooks/useOutsideClickHandler'
+
+import { commandBarLogic } from './commandBarLogic'
+import { BarStatus } from './types'
+
+import './index.scss'
+import SearchBar from './SearchBar'
+import { LemonModal } from '@posthog/lemon-ui'
+
+const CommandBarContainer = forwardRef<HTMLDivElement, { children?: React.ReactNode }>(function CommandBarContainer(
+    { children },
+    ref
+): JSX.Element {
+    return (
+        <div className="w-full h-160 max-w-lg bg-bg-3000 rounded overflow-hidden flex flex-col" ref={ref}>
+            {children}
+        </div>
+    )
+})
+
+function CommandBar(): JSX.Element | null {
+    const containerRef = useRef<HTMLDivElement | null>(null)
+    const { barStatus } = useValues(commandBarLogic)
+    const { toggleSearchBar, toggleActionsBar, hideCommandBar } = useActions(commandBarLogic)
+
+    useEventListener('keydown', (event) => {
+        if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+            event.preventDefault()
+            if (event.shiftKey) {
+                toggleActionsBar()
+            } else {
+                toggleSearchBar()
+            }
+        } else if (event.key === 'Escape') {
+            hideCommandBar()
+        }
+    })
+
+    useOutsideClickHandler(containerRef, hideCommandBar, [])
+
+    return (
+        <LemonModal isOpen={barStatus !== BarStatus.HIDDEN} simple closable={false} width={800}>
+            <CommandBarContainer ref={containerRef}>
+                <SearchBar />
+            </CommandBarContainer>
+        </LemonModal>
+    )
+}
+
+export default CommandBar

frontend/src/lib/components/CommandBar/SearchBar.tsx

@@ -0,0 +1,21 @@
+import { useMountedLogic } from 'kea'
+
+import { searchBarLogic } from './searchBarLogic'
+
+import SearchInput from './SearchInput'
+import SearchResults from './SearchResults'
+import SearchTabs from './SearchTabs'
+
+const SearchBar = (): JSX.Element => {
+    useMountedLogic(searchBarLogic)
+
+    return (
+        <div className="flex flex-col h-full">
+            <SearchInput />
+            <SearchResults />
+            <SearchTabs />
+        </div>
+    )
+}
+
+export default SearchBar

frontend/src/lib/components/CommandBar/SearchBarTab.tsx

@@ -0,0 +1,23 @@
+import { useActions } from 'kea'
+
+import { resultTypeToName } from './constants'
+import { searchBarLogic } from './searchBarLogic'
+import { ResultTypeWithAll } from './types'
+
+type SearchBarTabProps = {
+    type: ResultTypeWithAll
+    active: boolean
+    count?: number | null
+}
+
+const SearchBarTab = ({ type, active, count }: SearchBarTabProps): JSX.Element => {
+    const { setActiveTab } = useActions(searchBarLogic)
+    return (
+        <div className={`px-3 py-2 cursor-pointer text-xs ${active && 'font-bold'}`} onClick={() => setActiveTab(type)}>
+            {resultTypeToName[type]}
+            {count != null && <span className="ml-1 text-xxs text-muted-3000">{count}</span>}
+        </div>
+    )
+}
+
+export default SearchBarTab

frontend/src/lib/components/CommandBar/SearchInput.tsx

@@ -0,0 +1,28 @@
+import { useActions, useValues } from 'kea'
+
+import { LemonInput } from '@posthog/lemon-ui'
+import { KeyboardShortcut } from '~/layout/navigation-3000/components/KeyboardShortcut'
+
+import { searchBarLogic } from './searchBarLogic'
+
+const SearchInput = (): JSX.Element => {
+    const { searchQuery } = useValues(searchBarLogic)
+    const { setSearchQuery } = useActions(searchBarLogic)
+
+    return (
+        <div className="border-b">
+            <LemonInput
+                type="search"
+                size="small"
+                className="CommandBar__search-input"
+                fullWidth
+                suffix={<KeyboardShortcut escape muted />}
+                autoFocus
+                value={searchQuery}
+                onChange={setSearchQuery}
+            />
+        </div>
+    )
+}
+
+export default SearchInput

frontend/src/lib/components/CommandBar/SearchResult.tsx

@@ -0,0 +1,86 @@
+import { useLayoutEffect, useRef } from 'react'
+import { useActions, useValues } from 'kea'
+
+import { resultTypeToName } from './constants'
+import { searchBarLogic, urlForResult } from './searchBarLogic'
+import { SearchResult as SearchResultType } from './types'
+import { LemonSkeleton } from '@posthog/lemon-ui'
+
+type SearchResultProps = {
+    result: SearchResultType
+    resultIndex: number
+    focused: boolean
+    keyboardFocused: boolean
+}
+
+const SearchResult = ({ result, resultIndex, focused, keyboardFocused }: SearchResultProps): JSX.Element => {
+    const { isAutoScrolling } = useValues(searchBarLogic)
+    const { onMouseEnterResult, onMouseLeaveResult, openResult, setIsAutoScrolling } = useActions(searchBarLogic)
+
+    const ref = useRef<HTMLDivElement | null>(null)
+
+    useLayoutEffect(() => {
+        if (keyboardFocused) {
+            // :HACKY: This uses the non-standard scrollIntoViewIfNeeded api
+            // to improve scroll behaviour. Change to scrollIntoView({ scrollMode: 'if-needed' })
+            // once available.
+            if ((ref.current as any)?.scrollIntoViewIfNeeded) {
+                ;(ref.current as any).scrollIntoViewIfNeeded(false)
+            } else {
+                ref.current?.scrollIntoView()
+            }
+
+            // set scrolling state to prevent mouse enter/leave events during
+            // keyboard navigation
+            setIsAutoScrolling(true)
+            setTimeout(() => {
+                setIsAutoScrolling(false)
+            }, 50)
+        }
+    }, [keyboardFocused])
+
+    return (
+        <div
+            className={`w-full pl-3 pr-2 ${
+                focused ? 'bg-secondary-3000-hover' : 'bg-secondary-3000'
+            } border-b cursor-pointer`}
+            onMouseEnter={() => {
+                if (isAutoScrolling) {
+                    return
+                }
+                onMouseEnterResult(resultIndex)
+            }}
+            onMouseLeave={() => {
+                if (isAutoScrolling) {
+                    return
+                }
+                onMouseLeaveResult()
+            }}
+            onClick={() => {
+                openResult(resultIndex)
+            }}
+            ref={ref}
+        >
+            <div className="px-2 py-3 w-full space-y-0.5 flex flex-col items-start">
+                <span className="text-muted-3000 text-xs">{resultTypeToName[result.type]}</span>
+                <span className="text-text-3000">{result.name}</span>
+                <span className="text-trace-3000 text-xs">
+                    {location.host}
+                    <span className="text-muted-3000">{urlForResult(result)}</span>
+                </span>
+            </div>
+        </div>
+    )
+}
+
+export const SearchResultSkeleton = (): JSX.Element => (
+    <div className="w-full pl-3 pr-2 bg-secondary-3000 border-b">
+        <div className="px-2 py-3 w-full space-y-0.5 flex flex-col items-start">
+            <LemonSkeleton className="w-32 opacity-75" height={3} />
+            <LemonSkeleton className="w-80" />
+            <LemonSkeleton className="w-100 opacity-75" height={3} />
+        </div>
+    </div>
+)
+
+export default SearchResult

frontend/src/lib/components/CommandBar/SearchResults.tsx

@@ -0,0 +1,60 @@
+import { useActions, useValues } from 'kea'
+import { useEventListener } from 'lib/hooks/useEventListener'
+import { DetectiveHog } from '../hedgehogs'
+
+import { searchBarLogic } from './searchBarLogic'
+import SearchResult, { SearchResultSkeleton } from './SearchResult'
+
+const SearchResults = (): JSX.Element => {
+    const { filterSearchResults, searchResponseLoading, activeResultIndex, keyboardResultIndex, maxIndex } =
+        useValues(searchBarLogic)
+    const { onArrowUp, onArrowDown, openResult } = useActions(searchBarLogic)
+
+    useEventListener('keydown', (event) => {
+        if (!filterSearchResults) {
+            return
+        }
+
+        if (event.key === 'Enter') {
+            event.preventDefault()
+            openResult(activeResultIndex)
+        } else if (event.key === 'ArrowDown') {
+            event.preventDefault()
+            onArrowDown(activeResultIndex, maxIndex)
+        } else if (event.key === 'ArrowUp') {
+            event.preventDefault()
+            onArrowUp(activeResultIndex, maxIndex)
+        }
+    })
+
+    return (
+        <div className="grow overscroll-none overflow-y-auto">
+            {searchResponseLoading && (
+                <>
+                    <SearchResultSkeleton />
+                    <SearchResultSkeleton />
+                    <SearchResultSkeleton />
+                </>
+            )}
+            {!searchResponseLoading && filterSearchResults?.length === 0 && (
+                <div className="h-full flex flex-col items-center justify-center p-3">
+                    <h3 className="mb-0 text-xl">No results</h3>
+                    <p className="opacity-75 mb-0">This doesn't happen often, but we're stumped!</p>
+                    <DetectiveHog height={150} width={150} />
+                </div>
+            )}
+            {!searchResponseLoading &&
+                filterSearchResults?.map((result, index) => (
+                    <SearchResult
+                        key={`${result.type}_${result.result_id}`}
+                        result={result}
+                        resultIndex={index}
+                        focused={index === activeResultIndex}
+                        keyboardFocused={index === keyboardResultIndex}
+                    />
+                ))}
+        </div>
+    )
+}
+
+export default SearchResults

frontend/src/lib/components/CommandBar/SearchTabs.tsx

@@ -0,0 +1,23 @@
+import { useValues } from 'kea'
+
+import { searchBarLogic } from './searchBarLogic'
+import SearchBarTab from './SearchBarTab'
+import { ResultType } from './types'
+
+const SearchTabs = (): JSX.Element | null => {
+    const { searchResponse, activeTab } = useValues(searchBarLogic)
+
+    if (!searchResponse) {
+        return null
+    }
+
+    return (
+        <div className="flex items-center border-t space-x-3 px-2">
+            <SearchBarTab type="all" active={activeTab === 'all'} />
+            {Object.entries(searchResponse.counts).map(([type, count]) => (
+                <SearchBarTab key={type} type={type as ResultType} count={count} active={activeTab === type} />
+            ))}
+        </div>
+    )
+}
+export default SearchTabs

frontend/src/lib/components/CommandBar/commandBarLogic.ts

@@ -0,0 +1,25 @@
+import { kea, path, actions, reducers } from 'kea'
+import { BarStatus } from './types'
+
+import type { commandBarLogicType } from './commandBarLogicType'
+
+export const commandBarLogic = kea<commandBarLogicType>([
+    path(['lib', 'components', 'CommandBar', 'commandBarLogic']),
+    actions({
+        hideCommandBar: true,
+        toggleSearchBar: true,
+        toggleActionsBar: true,
+    }),
+    reducers({
+        barStatus: [
+            BarStatus.HIDDEN as BarStatus,
+            {
+                hideCommandBar: () => BarStatus.HIDDEN,
+                toggleSearchBar: (previousState) =>
+                    previousState === BarStatus.HIDDEN ? BarStatus.SHOW_SEARCH : BarStatus.HIDDEN,
+                toggleActionsBar: (previousState) =>
+                    previousState === BarStatus.HIDDEN ? BarStatus.SHOW_ACTIONS : BarStatus.HIDDEN,
+            },
+        ],
+    }),
+])

frontend/src/lib/components/CommandBar/constants.ts

@@ -0,0 +1,11 @@
+import { ResultTypeWithAll } from './types'
+
+export const resultTypeToName: Record<ResultTypeWithAll, string> = {
+    all: 'All',
+    action: 'Actions',
+    cohort: 'Cohorts',
+    dashboard: 'Dashboards',
+    experiment: 'Experiments',
+    feature_flag: 'Feature Flags',
+    insight: 'Insights',
+}

frontend/src/lib/components/CommandBar/index.scss

@@ -0,0 +1,4 @@
+.CommandBar__search-input {
+    border-color: transparent !important;
+    border-radius: 0;
+}