feat: refactor CommandBar to separate backdrop and enhance navigation with keyboard shortcuts

Author: AbhishekA1509

src/Pages/Shared/CommandBar/CommandBar.component.tsx

@@ -1,86 +1,22 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useState } from 'react'
 
-import {
-    API_STATUS_CODES,
-    Backdrop,
-    getUserPreferences,
-    KeyboardShortcut,
-    ResponseType,
-    SearchBar,
-    stopPropagation,
-    useQuery,
-    useRegisterShortcut,
-    UseRegisterShortcutProvider,
-} from '@devtron-labs/devtron-fe-common-lib'
+import { useRegisterShortcut, UseRegisterShortcutProvider } from '@devtron-labs/devtron-fe-common-lib'
 
-import CommandGroup from './CommandGroup'
-import { NAVIGATION_GROUPS, RECENT_ACTIONS_GROUP, SHORT_CUTS } from './constants'
-import { CommandBarGroupType } from './types'
+import CommandBarBackdrop from './CommandBarBackdrop'
+import { SHORT_CUTS } from './constants'
 
 import './CommandBar.scss'
 
 const CommandBar = () => {
     const [showCommandBar, setShowCommandBar] = useState(false)
-    const [searchText, setSearchText] = useState('')
-
-    const { data: recentActionsGroup, isLoading } = useQuery({
-        queryFn: ({ signal }) =>
-            getUserPreferences(signal).then((response) => {
-                const responseData: ResponseType<typeof response> = {
-                    code: API_STATUS_CODES.OK,
-                    status: 'OK',
-                    result: response,
-                }
-                return responseData
-            }),
-        queryKey: [showCommandBar, 'recentNavigationActions'],
-        enabled: showCommandBar,
-        select: ({ result }) =>
-            result.commandBar.recentNavigationActions.reduce<CommandBarGroupType>((acc, action) => {
-                const requiredGroup = NAVIGATION_GROUPS.find((group) =>
-                    group.items.some((item) => item.id === action.id),
-                )
-
-                if (requiredGroup) {
-                    const requiredItem = requiredGroup.items.find((item) => item.id === action.id)
-                    if (requiredItem) {
-                        acc.items.push(structuredClone(requiredItem))
-                    }
-                }
-                return acc
-            }, structuredClone(RECENT_ACTIONS_GROUP)),
-    })
-
-    const searchBarRef = useRef<HTMLInputElement>(null)
-
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
 
-    const handleSearchChange = (value: string) => {
-        setSearchText(value)
-    }
-
-    const handleClose = () => {
-        setSearchText('')
-        setShowCommandBar(false)
-    }
-
-    const handleEscape = () => {
-        if (searchText) {
-            handleSearchChange('')
-            return
-        }
-
-        handleClose()
-    }
-
     const handleOpen = () => {
         setShowCommandBar(true)
     }
 
-    const focusSearchBar = () => {
-        if (searchBarRef.current) {
-            searchBarRef.current.focus()
-        }
+    const handleClose = () => {
+        setShowCommandBar(false)
     }
 
     useEffect(() => {
@@ -90,15 +26,8 @@ const CommandBar = () => {
             callback: handleOpen,
         })
 
-        registerShortcut({
-            keys: SHORT_CUTS.FOCUS_SEARCH_BAR.keys,
-            description: SHORT_CUTS.FOCUS_SEARCH_BAR.description,
-            callback: focusSearchBar,
-        })
-
         return () => {
             unregisterShortcut(SHORT_CUTS.OPEN_COMMAND_BAR.keys)
-            unregisterShortcut(SHORT_CUTS.FOCUS_SEARCH_BAR.keys)
         }
     }, [])
 
@@ -108,65 +37,7 @@ const CommandBar = () => {
 
     return (
         <UseRegisterShortcutProvider ignoreTags={[]}>
-            <Backdrop onEscape={handleEscape} onClick={handleClose} deactivateFocusOnEscape={!!searchText}>
-                <div
-                    onClick={stopPropagation}
-                    className="dc__mxw-800 mxh-450 flexbox-col dc__overflow-auto dc__content-space br-12 bg__modal--primary command-bar__container w-100 h-100"
-                >
-                    <div className="flexbox-col dc__overflow-auto">
-                        <div className="px-20 py-8">
-                            <SearchBar
-                                inputProps={{
-                                    autoFocus: true,
-                                    placeholder: 'Search or jump to…',
-                                    ref: searchBarRef,
-                                }}
-                                initialSearchText={searchText}
-                                handleSearchChange={handleSearchChange}
-                                noBackgroundAndBorder
-                            />
-                        </div>
-
-                        <div
-                            className="flexbox-col dc__overflow-auto border__primary--top pt-8"
-                            role="listbox"
-                            aria-label="Command Menu"
-                            // TODO: aria-activedescendant for the currently focused item
-                        >
-                            <CommandGroup isLoading={isLoading} {...(recentActionsGroup || RECENT_ACTIONS_GROUP)} />
-
-                            {NAVIGATION_GROUPS.map((group) => (
-                                <CommandGroup key={group.id} {...group} />
-                            ))}
-                        </div>
-                    </div>
-
-                    <div className="flexbox dc__content-space dc__align-items-center px-20 py-12 border__primary--top bg__secondary">
-                        <div className="flexbox dc__gap-20 dc__align-items-center">
-                            <div className="flexbox dc__gap-8 dc__align-items-center">
-                                <KeyboardShortcut keyboardKey="ArrowUp" />
-                                <KeyboardShortcut keyboardKey="ArrowDown" />
-                                <span className="cn-9 fs-12 fw-4 lh-20">to navigate</span>
-                            </div>
-
-                            <div className="flexbox dc__gap-8 dc__align-items-center">
-                                <KeyboardShortcut keyboardKey="Enter" />
-                                <span className="cn-9 fs-12 fw-4 lh-20">to select</span>
-                            </div>
-
-                            <div className="flexbox dc__gap-8 dc__align-items-center">
-                                <KeyboardShortcut keyboardKey="Escape" />
-                                <span className="cn-9 fs-12 fw-4 lh-20">to close</span>
-                            </div>
-                        </div>
-
-                        <div className="flexbox dc__gap-8 dc__align-items-center">
-                            <KeyboardShortcut keyboardKey=">" />
-                            <span className="cn-9 fs-12 fw-4 lh-20">to search actions</span>
-                        </div>
-                    </div>
-                </div>
-            </Backdrop>
+            <CommandBarBackdrop handleClose={handleClose} />
         </UseRegisterShortcutProvider>
     )
 }

src/Pages/Shared/CommandBar/CommandBar.scss

@@ -2,6 +2,10 @@
     &__container {
         box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04), 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 3px 17px 0 rgba(0, 0, 0, 0.04), 0 4px 30px 0 rgba(0, 0, 0, 0.13), 0 8px 48px 0 rgba(0, 0, 0, 0.15);
 
+        &--selected-item {
+            background: var(--bg-hover);
+        }
+
         .search-bar {
             &:focus-within {
                 border: none !important;