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

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

@@ -0,0 +1,70 @@
+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 '../CommandPalette/index.scss'
+
+const CommandBarOverlay = ({ children }: { children?: React.ReactNode }): JSX.Element => (
+    <div
+        className="fixed top-0 left-0 w-full h-full flex flex-col items-center"
+        // eslint-disable-next-line react/forbid-dom-props
+        style={{ zIndex: 'var(--z-command-palette)' }}
+    >
+        {children}
+    </div>
+)
+
+const CommandBarContainer = forwardRef<HTMLDivElement, { children?: React.ReactNode }>(function CommandBarContainer(
+    { children },
+    ref
+): JSX.Element {
+    return (
+        <div className="bg-white p-4" 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()
+            }
+        }
+    })
+
+    useOutsideClickHandler(
+        containerRef,
+        () => {
+            hideCommandBar()
+        },
+        []
+    )
+
+    if (barStatus === BarStatus.HIDDEN) {
+        return null
+    }
+
+    return (
+        <CommandBarOverlay>
+            <CommandBarContainer ref={containerRef}>
+                {barStatus === BarStatus.SHOW_ACTIONS && <div>Actions</div>}
+                {barStatus === BarStatus.SHOW_SEARCH && <div>Search</div>}
+            </CommandBarContainer>
+        </CommandBarOverlay>
+    )
+}
+
+export default CommandBar

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/types.ts

@@ -0,0 +1,5 @@
+export enum BarStatus {
+    HIDDEN = 'hidden',
+    SHOW_SEARCH = 'show_search',
+    SHOW_ACTIONS = 'show_actions',
+}

frontend/src/lib/components/CommandPalette/index.tsx

@@ -7,8 +7,24 @@ import { CommandResults } from './CommandResults'
 import { useEventListener } from 'lib/hooks/useEventListener'
 import squeakFile from 'public/squeak.mp3'
 import './index.scss'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
+import { FEATURE_FLAGS } from 'lib/constants'
+import CommandBar from '../CommandBar/CommandBar'
 
-export function CommandPalette(): JSX.Element | null {
+/** Use the new Cmd+K search when the respective feature flag is enabled. */
+export function CommandPalette(): JSX.Element {
+    const { featureFlags } = useValues(featureFlagLogic)
+
+    const isUsingCmdKSearch = featureFlags[FEATURE_FLAGS.CMD_K_SEARCH]
+
+    if (isUsingCmdKSearch) {
+        return <CommandBar />
+    } else {
+        return <_CommandPalette />
+    }
+}
+
+function _CommandPalette(): JSX.Element | null {
     useMountedLogic(commandPaletteLogic)
 
     const { setInput, hidePalette, togglePalette, backFlow } = useActions(commandPaletteLogic)

frontend/src/lib/constants.tsx

@@ -173,6 +173,7 @@ export const FEATURE_FLAGS = {
     SURVEYS_RESULTS_VISUALIZATIONS: 'surveys-results-visualizations', // owner: @jurajmajerik
     CONSOLE_RECORDING_SEARCH: 'console-recording-search', // owner: #team-monitoring
     PERSONS_HOGQL_QUERY: 'persons-hogql-query', // owner: @mariusandra
+    CMD_K_SEARCH: 'cmd-k-search', // owner: @thmsobrmlr
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

frontend/src/styles/vars.scss

@@ -248,7 +248,7 @@ $_lifecycle_dormant: $_danger;
     --recording-highlight-event: var(--mark);
     --recording-highlight-event-dark: #946508;
 
-    // Z-indexes, synced with vars.ts
+    // Z-indexes
     --z-bottom-notice: 5100;
     --z-command-palette: 1875;
     --z-force-modal-above-popovers: 1850;