feat: add commands support and make logout searchable

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

@@ -44,7 +44,7 @@ const CommandPalette = ({ apps, commands, shortcuts }) => {
         setOpenModal,
         itemsArray: currentViewItemsArray,
         showGrid: apps?.length > 0,
-        actionsLength: actionsArray?.length,
+        actionsArray,
     })
 
     useEffect(() => {

components/header-bar/src/command-palette/commands/index.js

@@ -0,0 +1,9 @@
+import useLogout from './useLogout.js'
+
+const useCommands = () => {
+    const { logout } = useLogout()
+
+    return [logout]
+}
+
+export default useCommands

components/header-bar/src/command-palette/commands/useLogout.js

@@ -0,0 +1,29 @@
+import { clearSensitiveCaches, useConfig } from '@dhis2/app-runtime'
+import { colors } from '@dhis2/ui-constants'
+import { IconLogOut16 } from '@dhis2/ui-icons'
+import React from 'react'
+import { joinPath } from '../../join-path.js'
+
+const useLogout = () => {
+    const { baseUrl } = useConfig()
+
+    const href = joinPath(baseUrl, 'dhis-web-commons-security/logout.action')
+    const logoutAction = async () => {
+        await clearSensitiveCaches()
+        window.location.assign(href)
+    }
+
+    return {
+        logout: {
+            name: 'Logout',
+            icon: <IconLogOut16 color={colors.grey700} />,
+            description: 'Logout of the application',
+            action: logoutAction,
+            url: href,
+        },
+        logoutURL: href,
+        logoutAction,
+    }
+}
+
+export default useLogout

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

@@ -7,9 +7,20 @@
 } from '@dhis2/ui-icons'
 import React, { useMemo } from 'react'
 import i18n from '../../locales/index.js'
+import useLogout from '../commands/useLogout.js'
+import { useCommandPaletteContext } from '../context/command-palette-context.js'
 import { MIN_APPS_NUM } from './use-navigation.js'
 
 export const useAvailableActions = ({ apps, shortcuts, commands }) => {
+    const { setCurrentView, setHighlightedIndex } = useCommandPaletteContext()
+
+    const switchViewAction = (type) => {
+        setCurrentView(type)
+        setHighlightedIndex(0)
+    }
+
+    const { logoutAction, logoutURL } = useLogout()
+
     const actions = useMemo(() => {
         const actionsArray = []
         if (apps?.length > MIN_APPS_NUM) {
@@ -18,6 +29,7 @@
                 title: i18n.t('Browse apps'),
                 icon: <IconApps16 color={colors.grey700} />,
                 dataTest: 'headerbar-browse-apps',
+                action: () => switchViewAction('apps'),
             })
         }
         if (commands?.length > 0) {
@@ -26,6 +38,7 @@
                 title: i18n.t('Browse commands'),
                 icon: <IconTerminalWindow16 color={colors.grey700} />,
                 dataTest: 'headerbar-browse-commands',
+                action: () => switchViewAction('commands'),
             })
         }
         if (shortcuts?.length > 0) {
@@ -34,6 +47,7 @@
                 title: i18n.t('Browse shortcuts'),
                 icon: <IconRedo16 color={colors.grey700} />,
                 dataTest: 'headerbar-browse-shortcuts',
+                action: () => switchViewAction('shortcuts'),
             })
         }
         // default logout action
@@ -42,8 +56,10 @@
             title: i18n.t('Logout'),
             icon: <IconLogOut16 color={colors.grey700} />,
             dataTest: 'headerbar-logout',
+            action: logoutAction,
+            href: logoutURL,
         })
         return actionsArray
     }, [apps, shortcuts, commands])
     return actions
 }

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useCommandPaletteContext } from '../context/command-palette-context.js'
 
 export const GRID_ITEMS_LENGTH = 8
@@ -8,7 +8,7 @@
     setOpenModal,
     itemsArray,
     showGrid,
-    actionsLength,
+    actionsArray,
 }) => {
     const modalRef = useRef(null)
 
@@ -23,6 +23,15 @@
         setActiveSection,
     } = useCommandPaletteContext()
 
+    const actionsLength = actionsArray?.length || 0
+
+    const activeItems = useMemo(() => {
+        if (currentView === 'home' && activeSection === 'actions') {
+            return actionsArray
+        }
+        return itemsArray
+    }, [itemsArray, actionsArray, currentView, activeSection])
+
     // highlight first item in filtered results
     useEffect(() => {
         setHighlightedIndex(0)
@@ -184,7 +193,7 @@
                 setHighlightedIndex(0)
             }
         },
         [
             activeSection,
             actionsLength,
             defaultSection,
@@ -198,14 +207,12 @@
 
     const handleKeyDown = useCallback(
         (event) => {
-            const modal = modalRef.current
-
             if (currentView === 'home') {
                 if (filter.length > 0) {
                     // search mode
                     handleListViewNavigation({
                         event,
-                        listLength: itemsArray.length,
+                        listLength: activeItems.length,
                     })
                 } else {
                     handleHomeViewNavigation(event)
@@ -214,23 +221,21 @@
                 setActiveSection(null)
                 handleListViewNavigation({
                     event,
-                    listLength: itemsArray.length,
+                    listLength: activeItems.length,
                 })
             }
 
             if (event.key === 'Enter') {
-                if (activeSection === 'actions') {
-                    modal
-                        ?.querySelector('.actions-menu')
-                        ?.childNodes?.[highlightedIndex]?.click()
-                } else {
-                    // open apps, shortcuts link
-                    window.open(itemsArray[highlightedIndex]?.['defaultAction'])
-                    // TODO: execute commands
+                const activeItem = activeItems[highlightedIndex]
+
+                if (activeItem?.['action']) {
+                    activeItem?.['action']?.()
+                } else if (activeItem?.['defaultAction']) {
+                    window.open(activeItem?.['defaultAction'])
                 }
             }
         },
         [
             activeSection,
             currentView,
             filter.length,
@@ -238,7 +243,7 @@
             handleHomeViewNavigation,
             handleListViewNavigation,
             highlightedIndex,
-            itemsArray,
+            activeItems,
             setActiveSection,
             setOpenModal,
             showGrid,

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

@@ -9,20 +9,32 @@ function List({ filteredItems, type }) {
         <div data-test="headerbar-list">
             {filteredItems.map(
                 (
-                    { displayName, name, defaultAction, icon, description },
+                    {
+                        displayName,
+                        name,
+                        defaultAction,
+                        icon,
+                        description,
+                        url,
+                    },
                     idx
-                ) => (
-                    <ListItem
-                        type={type}
-                        key={`app-${name}-${idx}`}
-                        title={displayName || name}
-                        path={defaultAction}
-                        image={icon}
-                        description={description}
-                        highlighted={highlightedIndex === idx}
-                        handleMouseEnter={() => setHighlightedIndex(idx)}
-                    />
-                )
+                ) => {
+                    const isImage = typeof icon === 'string'
+                    const isIcon = React.isValidElement(icon)
+                    return (
+                        <ListItem
+                            type={type}
+                            key={`app-${name}-${idx}`}
+                            title={displayName || name}
+                            path={defaultAction || url}
+                            image={isImage ? icon : undefined}
+                            icon={isIcon ? icon : undefined}
+                            description={description}
+                            highlighted={highlightedIndex === idx}
+                            handleMouseEnter={() => setHighlightedIndex(idx)}
+                        />
+                    )
+                }
             )}
         </div>
     )

components/header-bar/src/command-palette/views/home-view.js

@@ -1,8 +1,6 @@
-import { clearSensitiveCaches, useConfig } from '@dhis2/app-runtime'
 import { spacers } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { joinPath } from '../../join-path.js'
 import i18n from '../../locales/index.js'
 import { useCommandPaletteContext } from '../context/command-palette-context.js'
 import AppItem from '../sections/app-item.js'
@@ -11,10 +9,8 @@ import ListItem from '../sections/list-item.js'
 import ListView from './list-view.js'
 
 function HomeView({ apps, commands, shortcuts, actions }) {
-    const { baseUrl } = useConfig()
     const {
         filter,
-        setCurrentView,
         highlightedIndex,
         setHighlightedIndex,
         activeSection,
@@ -79,41 +75,18 @@ function HomeView({ apps, commands, shortcuts, actions }) {
                         data-test="headerbar-actions-menu"
                     >
                         {actions.map(
-                            ({ dataTest, icon, title, type }, index) => {
-                                const logoutActionHandler = async () => {
-                                    await clearSensitiveCaches()
-                                    window.location.assign(
-                                        joinPath(
-                                            baseUrl,
-                                            'dhis-web-commons-security/logout.action'
-                                        )
-                                    )
-                                }
-
-                                const viewActionHandler = () => {
-                                    setCurrentView(type)
-                                    setHighlightedIndex(0)
-                                }
-
+                            (
+                                { dataTest, icon, title, type, href, action },
+                                index
+                            ) => {
                                 return (
                                     <ListItem
                                         key={`action-${type}-${index}`}
                                         title={title}
                                         icon={icon}
                                         dataTest={dataTest}
-                                        href={
-                                            type === 'logout'
-                                                ? joinPath(
-                                                      baseUrl,
-                                                      'dhis-web-commons-security/logout.action'
-                                                  )
-                                                : undefined
-                                        }
-                                        onClickHandler={
-                                            type === 'logout'
-                                                ? logoutActionHandler
-                                                : viewActionHandler
-                                        }
+                                        href={href}
+                                        onClickHandler={action}
                                         highlighted={
                                             activeSection === 'actions' &&
                                             highlightedIndex === index

components/header-bar/src/header-bar.js

@@ -3,6 +3,7 @@ import { colors } from '@dhis2/ui-constants'
 import PropTypes from 'prop-types'
 import React, { useMemo } from 'react'
 import CommandPalette from './command-palette/command-palette.js'
+import useCommands from './command-palette/commands/index.js'
 import { CommandPaletteContextProvider } from './command-palette/context/command-palette-context.js'
 import { HeaderBarContextProvider } from './header-bar-context.js'
 import { joinPath } from './join-path.js'
@@ -57,7 +58,7 @@ export const HeaderBar = ({
     }, [data, baseUrl])
 
     // fetch commands
-    const commands = []
+    const commands = useCommands()
 
     // fetch shortcuts
     const shortcuts = []