feat(command palette): grid layout and navigation

src/App.test.jsx

@@ -10,10 +10,6 @@ import { createRoot } from 'react-dom/client'
 it.skip('renders without crashing', () => {
     const div = document.createElement('div')
     const root = createRoot(div)
-    root.render(
-        <CustomDataProvider>
-            {/* <App /> */}
-        </CustomDataProvider>
-    )
+    root.render(<CustomDataProvider>{/* <App /> */}</CustomDataProvider>)
     root.unmount()
 })

src/components/header-bar/command-palette/__tests__/search-results.test.jsx

@@ -100,10 +100,10 @@ describe('Command Palette - List View - Search Results', () => {
             'Search apps, shortcuts, commands'
         )
 
-        const testActionSearch = async (searchTerm, action) => {
+        const testActionSearch = async (searchTerm, action, dataTestId) => {
             await user.type(searchField, searchTerm)
 
-            const listItems = queryAllByTestId('headerbar-list-item')
+            const listItems = queryAllByTestId(dataTestId)
             expect(listItems.length).toBe(1)
             expect(listItems[0]).toHaveTextContent(action)
             expect(listItems[0]).toHaveClass('highlighted')
@@ -113,11 +113,19 @@ describe('Command Palette - List View - Search Results', () => {
         }
 
         // search for logout action
-        await testActionSearch('Logout', 'Logout')
+        await testActionSearch('Logout', 'Logout', 'headerbar-logout')
         // search for category actions
-        await testActionSearch('apps', 'Browse apps')
-        await testActionSearch('commands', 'Browse commands')
-        await testActionSearch('shortcuts', 'Browse shortcuts')
+        await testActionSearch('apps', 'Browse apps', 'headerbar-browse-apps')
+        await testActionSearch(
+            'commands',
+            'Browse commands',
+            'headerbar-browse-commands'
+        )
+        await testActionSearch(
+            'shortcuts',
+            'Browse shortcuts',
+            'headerbar-browse-shortcuts'
+        )
 
         // go to shortcuts
         await user.type(searchField, 'Browse shortcuts')

src/components/header-bar/command-palette/command-palette.jsx

@@ -1,48 +1,93 @@
 import { colors, spacers } from '@dhis2/ui-constants'
 import { IconApps24 } from '@dhis2/ui-icons'
 import PropTypes from 'prop-types'
-import React, { useCallback, useRef, useEffect } from 'react'
+import React, { useCallback, useRef, useEffect, useMemo } from 'react'
 import { useCommandPaletteContext } from './context/command-palette-context.jsx'
 import { useAvailableActions } from './hooks/use-actions.jsx'
 import { useFilter } from './hooks/use-filter.js'
-import { useNavigation } from './hooks/use-navigation.js'
+import useGridNavigation from './hooks/use-grid-navigation.js'
+import useModal from './hooks/use-modal.js'
 import ModalContainer from './sections/modal-container.jsx'
 import NavigationKeysLegend from './sections/navigation-keys-legend.jsx'
-import SearchFilter from './sections/search-field.jsx'
-import { FILTERABLE_ACTION, HOME_VIEW } from './utils/constants.js'
+import SearchFilter from './sections/search-filter.jsx'
+import { HOME_VIEW } from './utils/constants.js'
 import HomeView from './views/home-view.jsx'
 import ListView from './views/list-view.jsx'
 
 const CommandPalette = ({ apps, commands, shortcuts }) => {
     const containerEl = useRef(null)
-    const { currentView, goToDefaultView, setShowGrid } =
-        useCommandPaletteContext()
-
-    const actionsArray = useAvailableActions({ apps, shortcuts, commands })
-    const searchableActions = actionsArray.filter(
-        (action) => action.type === FILTERABLE_ACTION
-    )
-
-    const { filteredApps, currentViewItemsArray } = useFilter({
+    const { currentView, filter, setCurrentView } = useCommandPaletteContext()
+    const actions = useAvailableActions({ apps, shortcuts, commands })
+    const filteredItems = useFilter({
         apps,
         commands,
         shortcuts,
-        actions: searchableActions,
+        actions,
     })
+    const gridItems = currentView === HOME_VIEW && !filter ? apps : []
+    const listItems = useMemo(() => {
+        if (filter) {
+            return [...filteredItems]
+        }
 
-    useEffect(() => {
-        setShowGrid(apps?.length > 0)
-    }, [apps, setShowGrid])
+        if (currentView === HOME_VIEW) {
+            return [...actions]
+        } else {
+            return [...actions, ...filteredItems]
+        }
+    }, [actions, currentView, filter, filteredItems])
 
-    const { handleKeyDown, modalRef, setModalOpen, showModal } = useNavigation({
-        itemsArray: currentViewItemsArray,
-        actionsArray,
-    })
+    const {
+        currentItem,
+        grid,
+        gridColumnCount,
+        gridRowCount,
+        handleKeyDown: handleGridNavigation,
+    } = useGridNavigation(gridItems, listItems)
+
+    const { modalOpen, modalRef, setModalOpen } = useModal(currentItem)
+
+    const handleKeyDown = useCallback(
+        (event) => {
+            if (currentView !== HOME_VIEW) {
+                if (!filter.length && event.key === 'Backspace') {
+                    event.preventDefault()
+                    setCurrentView(HOME_VIEW)
+                }
+            }
+
+            handleGridNavigation(event)
+
+            switch (event.key) {
+                case 'Escape':
+                    event.preventDefault()
+                    setModalOpen(false)
+                    break
+                case 'Enter':
+                    event.preventDefault()
+                    currentItem?.['action']?.()
+                    break
+                case 'Tab':
+                    event.preventDefault()
+                    break
+                default:
+                    break
+            }
+        },
+        [
+            currentItem,
+            currentView,
+            filter,
+            handleGridNavigation,
+            setCurrentView,
+            setModalOpen,
+        ]
+    )
 
     const handleVisibilityToggle = useCallback(() => {
         setModalOpen((open) => !open)
-        goToDefaultView()
-    }, [setModalOpen, goToDefaultView])
+        setCurrentView(HOME_VIEW)
+    }, [setCurrentView, setModalOpen])
 
     const handleModalClick = useCallback(
         (event) => {
@@ -70,14 +115,18 @@ const CommandPalette = ({ apps, commands, shortcuts }) => {
     }, [handleVisibilityToggle])
 
     return (
-        <div ref={containerEl} data-test="headerbar-apps-menu" className="headerbar-apps-menu">
+        <div
+            ref={containerEl}
+            data-test="headerbar-apps-menu"
+            className="headerbar-apps-menu"
+        >
             <button
                 onClick={handleVisibilityToggle}
                 data-test="headerbar-apps-icon"
             >
                 <IconApps24 color={colors.white} />
             </button>
-            {showModal ? (
+            {modalOpen ? (
                 <ModalContainer
                     ref={modalRef}
                     onKeyDown={handleKeyDown}
@@ -86,16 +135,17 @@ const CommandPalette = ({ apps, commands, shortcuts }) => {
                     <div data-test="headerbar-menu" className="headerbar-menu">
                         <SearchFilter />
                         <div className="headerbar-menu-content">
-                            {currentView === HOME_VIEW ? (
+                            {currentView === HOME_VIEW && !filter ? (
                                 <HomeView
-                                    actions={actionsArray}
-                                    filteredItems={currentViewItemsArray}
-                                    apps={filteredApps}
+                                    grid={grid}
+                                    gridColumnCount={gridColumnCount}
+                                    gridRowCount={gridRowCount}
+                                    currentItem={currentItem}
                                 />
                             ) : (
                                 <ListView
-                                    filteredItems={currentViewItemsArray}
-                                    actions={actionsArray}
+                                    grid={grid}
+                                    currentItem={currentItem}
                                 />
                             )}
                         </div>

src/components/header-bar/command-palette/context/command-palette-context.jsx

@@ -1,62 +1,22 @@
 import PropTypes from 'prop-types'
-import React, {
-    createContext,
-    useCallback,
-    useContext,
-    useMemo,
-    useState,
-} from 'react'
-import { ACTIONS_SECTION, GRID_SECTION, HOME_VIEW } from '../utils/constants.js'
+import React, { createContext, useContext, useMemo, useState } from 'react'
+import { HOME_VIEW } from '../utils/constants.js'
 
 const commandPaletteContext = createContext()
 
 export const CommandPaletteContextProvider = ({ children }) => {
     const [filter, setFilter] = useState('')
-    const [highlightedIndex, setHighlightedIndex] = useState(0)
     const [currentView, setCurrentView] = useState(HOME_VIEW)
-    // home view sections
-    const [activeSection, setActiveSection] = useState(null)
-    const [showGrid, setShowGrid] = useState(null)
-
-    const goToDefaultSection = useCallback(() => {
-        const defaultSection = showGrid ? GRID_SECTION : ACTIONS_SECTION
-
-        setActiveSection(defaultSection)
-        setHighlightedIndex(0)
-    }, [showGrid, setActiveSection, setHighlightedIndex])
-
-    const goToDefaultView = useCallback(() => {
-        setFilter('')
-        setCurrentView(HOME_VIEW)
-        goToDefaultSection()
-    }, [setCurrentView, setFilter, goToDefaultSection])
 
     const contextValue = useMemo(
         () => ({
             filter,
             setFilter,
-            goToDefaultSection,
-            goToDefaultView,
-            highlightedIndex,
-            setHighlightedIndex,
             currentView,
             setCurrentView,
-            activeSection,
-            setActiveSection,
-            showGrid,
-            setShowGrid,
         }),
-        [
-            filter,
-            goToDefaultSection,
-            goToDefaultView,
-            highlightedIndex,
-            currentView,
-            activeSection,
-            showGrid,
-        ]
+        [filter, currentView]
     )
-
     return (
         <commandPaletteContext.Provider value={contextValue}>
             {children}

src/components/header-bar/command-palette/hooks/use-actions.jsx

@@ -25,13 +25,8 @@ import {
 
 export const useAvailableActions = ({ apps, shortcuts, commands }) => {
     const { baseUrl } = useConfig()
-    const {
-        currentView,
-        goToDefaultView,
-        setCurrentView,
-        setFilter,
-        setHighlightedIndex,
-    } = useCommandPaletteContext()
+    const { currentView, setCurrentView, setFilter } =
+        useCommandPaletteContext()
 
     const logoutURL = joinPath(
         baseUrl,
@@ -45,12 +40,10 @@ export const useAvailableActions = ({ apps, shortcuts, commands }) => {
 
     const switchViewAction = useCallback(
         (type) => {
-            const firstItemIndexInList = 1
             setCurrentView(type)
             setFilter('')
-            setHighlightedIndex(firstItemIndexInList)
         },
-        [setCurrentView, setFilter, setHighlightedIndex]
+        [setCurrentView, setFilter]
     )
 
     const actions = useMemo(() => {
@@ -97,18 +90,10 @@ export const useAvailableActions = ({ apps, shortcuts, commands }) => {
                 name: i18n.t('Back'),
                 icon: <IconArrowLeft16 color={colors.grey700} />,
                 dataTest: 'headerbar-back-action',
-                action: goToDefaultView,
+                action: () => switchViewAction(HOME_VIEW),
             })
         }
         return actionsArray
-    }, [
-        apps,
-        shortcuts,
-        commands,
-        currentView,
-        logoutURL,
-        goToDefaultView,
-        switchViewAction,
-    ])
+    }, [apps, shortcuts, commands, currentView, logoutURL, switchViewAction])
     return actions
 }

src/components/header-bar/command-palette/hooks/use-filter.js

@@ -4,18 +4,23 @@ import {
     ALL_APPS_VIEW,
     ALL_COMMANDS_VIEW,
     ALL_SHORTCUTS_VIEW,
+    FILTERABLE_ACTION,
 } from '../utils/constants.js'
 import { filterItemsArray } from '../utils/filterItemsArray.js'
 
 export const useFilter = ({ apps, commands, shortcuts, actions }) => {
     const { filter, currentView } = useCommandPaletteContext()
 
+    const searchableActions = actions.filter(
+        (action) => action.type === FILTERABLE_ACTION
+    )
+
     const filteredApps = filterItemsArray(apps, filter)
     const filteredCommands = filterItemsArray(commands, filter)
     const filteredShortcuts = filterItemsArray(shortcuts, filter)
-    const filteredActions = filterItemsArray(actions, filter)
+    const filteredActions = filterItemsArray(searchableActions, filter)
 
-    const currentViewItemsArray = useMemo(() => {
+    const filteredItems = useMemo(() => {
         if (currentView === ALL_APPS_VIEW) {
             return filteredApps
         } else if (currentView === ALL_COMMANDS_VIEW) {
@@ -37,10 +42,5 @@ export const useFilter = ({ apps, commands, shortcuts, actions }) => {
         filteredActions,
     ])
 
-    return {
-        filteredApps,
-        filteredCommands,
-        filteredShortcuts,
-        currentViewItemsArray,
-    }
+    return filteredItems
 }