feat: searchable category actions (#1673)

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

@@ -30,13 +30,13 @@ describe('Command Palette - List View - Search Results', () => {
         fireEvent.keyDown(container, { key: 'k', metaKey: true })
 
         // Search field
-        const searchField = await getByPlaceholderText(
+        const searchField = getByPlaceholderText(
             'Search apps, shortcuts, commands'
         )
         expect(searchField).toHaveValue('')
 
         // one item result
-        await user.type(searchField, 'Shortcut')
+        await user.type(searchField, 'Test Shortcut')
         const listItems = queryAllByTestId('headerbar-list-item')
         expect(listItems.length).toBe(1)
 
@@ -76,26 +76,62 @@ describe('Command Palette - List View - Search Results', () => {
         expect(queryByText(/Nothing found for "abc"/i)).toBeInTheDocument()
     })
 
-    it('handles search for logout action in the command palette', async () => {
+    it('handles search for actions in the command palette', async () => {
         const user = userEvent.setup()
-        const { getByPlaceholderText, queryAllByTestId, container } = render(
-            <CommandPalette apps={[]} shortcuts={[]} commands={[]} />
+        const {
+            getByPlaceholderText,
+            queryAllByTestId,
+            queryByPlaceholderText,
+            getByTestId,
+            queryByTestId,
+            container,
+        } = render(
+            <CommandPalette
+                apps={testApps}
+                shortcuts={testShortcuts}
+                commands={testCommands}
+            />
         )
         // open modal
         fireEvent.keyDown(container, { key: 'k', metaKey: true })
 
         // Search field
-        const searchField = await getByPlaceholderText(
+        const searchField = getByPlaceholderText(
             'Search apps, shortcuts, commands'
         )
 
-        // result
-        await user.type(searchField, 'Logout')
-        const listItems = queryAllByTestId('headerbar-list-item')
-        expect(listItems.length).toBe(1)
-
-        expect(listItems[0]).toHaveTextContent('Logout')
-        expect(listItems[0]).toHaveClass('highlighted')
+        const testActionSearch = async (searchTerm, action) => {
+            await user.type(searchField, searchTerm)
+
+            const listItems = queryAllByTestId('headerbar-list-item')
+            expect(listItems.length).toBe(1)
+            expect(listItems[0]).toHaveTextContent(action)
+            expect(listItems[0]).toHaveClass('highlighted')
+
+            // clear search field
+            await user.keyboard('{Backspace}'.repeat(searchTerm.length))
+        }
+
+        // search for logout action
+        await testActionSearch('Logout', 'Logout')
+        // search for category actions
+        await testActionSearch('apps', 'Browse apps')
+        await testActionSearch('commands', 'Browse commands')
+        await testActionSearch('shortcuts', 'Browse shortcuts')
+
+        // go to shortcuts
+        await user.type(searchField, 'Browse shortcuts')
+        await user.keyboard('{Enter}')
+        expect(queryByPlaceholderText('Search shortcuts')).toBeInTheDocument()
+        // back action
+        const backActionListItem = getByTestId('headerbar-back-action')
+        expect(backActionListItem).not.toHaveClass('highlighted')
+        // first shortcut highlighted
+        const shortcutsListItem = queryByTestId('headerbar-list-item')
+        expect(shortcutsListItem.querySelector('span')).toHaveTextContent(
+            'Test Shortcut 1'
+        )
+        expect(shortcutsListItem).toHaveClass('highlighted')
     })
 
     it('handles multiple search results in the HOME View', async () => {
@@ -113,12 +149,12 @@ describe('Command Palette - List View - Search Results', () => {
         fireEvent.keyDown(container, { key: 'k', metaKey: true })
 
         // Search field
-        const searchField = await getByPlaceholderText(
+        const searchField = getByPlaceholderText(
             'Search apps, shortcuts, commands'
         )
         expect(searchField).toHaveValue('')
 
-        const searchTerm = 'app'
+        const searchTerm = 'Test app'
 
         await user.type(searchField, searchTerm)
         expect(queryByTestId('headerbar-top-apps-list')).not.toBeInTheDocument()
@@ -140,7 +176,6 @@ describe('Command Palette - List View - Search Results', () => {
 
         // clear search field
         await user.keyboard('{Backspace}'.repeat(searchTerm.length))
-
         expect(searchField).toHaveValue('')
 
         const appsGrid = getByTestId('headerbar-top-apps-list')
@@ -182,7 +217,7 @@ describe('Command Palette - List View - Search Results', () => {
         expect(browseCommandsAction).toHaveClass('highlighted')
 
         // Search field
-        const searchField = await getByPlaceholderText(
+        const searchField = getByPlaceholderText(
             'Search apps, shortcuts, commands'
         )
         const searchTerm = 'test'

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

@@ -29,6 +29,7 @@ export const useAvailableActions = ({ apps, shortcuts, commands }) => {
         currentView,
         goToDefaultView,
         setCurrentView,
+        setFilter,
         setHighlightedIndex,
     } = useCommandPaletteContext()
 
@@ -46,17 +47,18 @@ export const useAvailableActions = ({ apps, shortcuts, commands }) => {
         (type) => {
             const firstItemIndexInList = 1
             setCurrentView(type)
+            setFilter('')
             setHighlightedIndex(firstItemIndexInList)
         },
-        [setCurrentView, setHighlightedIndex]
+        [setCurrentView, setFilter, setHighlightedIndex]
     )
 
     const actions = useMemo(() => {
         const actionsArray = []
         if (currentView === HOME_VIEW) {
             if (apps?.length > MIN_APPS_NUM) {
                 actionsArray.push({
-                    type: ACTION,
+                    type: FILTERABLE_ACTION,
                     name: i18n.t('Browse apps'),
                     icon: <IconApps16 color={colors.grey700} />,
                     dataTest: 'headerbar-browse-apps',
@@ -65,7 +67,7 @@ export const useAvailableActions = ({ apps, shortcuts, commands }) => {
             }
             if (commands?.length > MIN_COMMANDS_NUM) {
                 actionsArray.push({
-                    type: ACTION,
+                    type: FILTERABLE_ACTION,
                     name: i18n.t('Browse commands'),
                     icon: <IconTerminalWindow16 color={colors.grey700} />,
                     dataTest: 'headerbar-browse-commands',
@@ -74,7 +76,7 @@ export const useAvailableActions = ({ apps, shortcuts, commands }) => {
             }
             if (shortcuts?.length > MIN_SHORTCUTS_NUM) {
                 actionsArray.push({
-                    type: ACTION,
+                    type: FILTERABLE_ACTION,
                     name: i18n.t('Browse shortcuts'),
                     icon: <IconRedo16 color={colors.grey700} />,
                     dataTest: 'headerbar-browse-shortcuts',

components/header-bar/src/command-palette/sections/list.js

@@ -17,6 +17,7 @@ function List({ filteredItems, backAction }) {
             {filteredItems.map(
                 (
                     {
+                        action,
                         displayName,
                         name,
                         defaultAction,
@@ -41,6 +42,7 @@ function List({ filteredItems, backAction }) {
                             icon={isIcon ? icon : undefined}
                             description={description}
                             highlighted={highlightedIndex === index}
+                            onClickHandler={action}
                         />
                     )
                 }