diff --git a/components/header-bar/src/apps.js b/components/header-bar/src/apps.js
deleted file mode 100755
index 37e5f805ce..0000000000
--- a/components/header-bar/src/apps.js
+++ /dev/null
@@ -1,276 +0,0 @@
-import { useConfig } from '@dhis2/app-runtime'
-import { colors, spacers, theme } from '@dhis2/ui-constants'
-import { IconApps24, IconSettings24 } from '@dhis2/ui-icons'
-import { Card } from '@dhis2-ui/card'
-import { InputField } from '@dhis2-ui/input'
-import PropTypes from 'prop-types'
-import React, { useState, useEffect, useCallback, useRef } from 'react'
-import { joinPath } from './join-path.js'
-import i18n from './locales/index.js'
-
-/**
- * Copied from here:
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping
- */
-function escapeRegExpCharacters(text) {
- return text.replace(/[/.*+?^${}()|[\]\\]/g, '\\$&')
-}
-
-function Search({ value, onChange }) {
- const { baseUrl } = useConfig()
-
- return (
-
- )
-}
-
-Search.propTypes = {
- value: PropTypes.string.isRequired,
- onChange: PropTypes.func.isRequired,
-}
-
-function Item({ name, path, img }) {
- return (
-
- {name}
-
-
-
- )
-}
-
-Item.propTypes = {
- img: PropTypes.string,
- name: PropTypes.string,
- path: PropTypes.string,
-}
-
-function List({ apps, filter }) {
- return (
-
- {apps
- .filter(({ displayName, name }) => {
- const appName = displayName || name
- const formattedAppName = appName.toLowerCase()
- const formattedFilter =
- escapeRegExpCharacters(filter).toLowerCase()
-
- return filter.length > 0
- ? formattedAppName.match(formattedFilter)
- : true
- })
- .map(({ displayName, name, defaultAction, icon }, idx) => (
-
- )
-}
-List.propTypes = {
- apps: PropTypes.array,
- filter: PropTypes.string,
-}
-
-const AppMenu = ({ apps, filter, onFilterChange }) => (
-
-
-
-
-
-
-
-)
-
-AppMenu.propTypes = {
- apps: PropTypes.array.isRequired,
- onFilterChange: PropTypes.func.isRequired,
- filter: PropTypes.string,
-}
-
-const Apps = ({ apps }) => {
- const [show, setShow] = useState(false)
- const [filter, setFilter] = useState('')
-
- const handleVisibilityToggle = useCallback(() => setShow(!show), [show])
- const handleFilterChange = useCallback(({ value }) => setFilter(value), [])
-
- const containerEl = useRef(null)
- const onDocClick = useCallback((evt) => {
- if (containerEl.current && !containerEl.current.contains(evt.target)) {
- setShow(false)
- }
- }, [])
- useEffect(() => {
- document.addEventListener('click', onDocClick)
- return () => document.removeEventListener('click', onDocClick)
- }, [onDocClick])
-
- return (
-
-
-
-
- {show ? (
-
- ) : null}
-
-
-
+ {children}
+
+ )
+}
+
+CommandPaletteProviderWrapper.propTypes = {
+ children: PropTypes.node,
+}
+
+export const render = (ui, options) =>
+ originalRender(ui, { wrapper: CommandPaletteProviderWrapper, ...options })
+
+export const headerBarIconTest = 'headerbar-apps-icon'
+export const modalTest = 'headerbar-menu'
+export const minAppsNum = MIN_APPS_NUM // 8
+
+export const testApps = new Array(minAppsNum + 1)
+ .fill(null)
+ .map((_, index) => ({
+ name: `Test App ${index + 1}`,
+ displayName: `Test App ${index + 1}`,
+ icon: '',
+ defaultAction: '',
+ }))
+
+export const testCommands = [
+ {
+ name: 'Test Command 1',
+ displayName: 'Test Command 1',
+ icon: '',
+ defaultAction: '',
+ },
+]
+
+export const testShortcuts = [
+ {
+ name: 'Test Shortcut 1',
+ displayName: 'Test Shortcut 1',
+ icon: '',
+ defaultAction: '',
+ },
+]
+
+describe('Command Palette Component', () => {
+ it('renders bare default view when Command Palette is opened', async () => {
+ const user = userEvent.setup()
+ const { getByTestId, queryByTestId, getByPlaceholderText } = render(
+
+
+
+ {show ? (
+
+
+
+
+ {currentView !== 'home' && !filter ? (
+
+
+ ) : null}
+
+
+ {children}
+
+ )
+}
+CommandPaletteContextProvider.propTypes = {
+ children: PropTypes.node,
+}
+
+export const useCommandPaletteContext = () => useContext(commandPaletteContext)
diff --git a/components/header-bar/src/command-palette/hooks/use-actions.js b/components/header-bar/src/command-palette/hooks/use-actions.js
new file mode 100644
index 0000000000..127a66f1b5
--- /dev/null
+++ b/components/header-bar/src/command-palette/hooks/use-actions.js
@@ -0,0 +1,49 @@
+import { colors } from '@dhis2/ui-constants'
+import {
+ IconApps16,
+ IconLogOut16,
+ IconRedo16,
+ IconTerminalWindow16,
+} from '@dhis2/ui-icons'
+import React, { useMemo } from 'react'
+import i18n from '../../locales/index.js'
+import { MIN_APPS_NUM } from './use-navigation.js'
+
+export const useAvailableActions = ({ apps, shortcuts, commands }) => {
+ const actions = useMemo(() => {
+ const actionsArray = []
+ if (apps?.length > MIN_APPS_NUM) {
+ actionsArray.push({
+ type: 'apps',
+ title: i18n.t('Browse apps'),
+ icon:
+ {name}
+
+
+ )
+}
+
+AppItem.propTypes = {
+ handleMouseEnter: PropTypes.func,
+ highlighted: PropTypes.bool,
+ img: PropTypes.string,
+ name: PropTypes.string,
+ path: PropTypes.string,
+}
+
+export default AppItem
diff --git a/components/header-bar/src/command-palette/sections/back-button.js b/components/header-bar/src/command-palette/sections/back-button.js
new file mode 100644
index 0000000000..6e0a2dc52c
--- /dev/null
+++ b/components/header-bar/src/command-palette/sections/back-button.js
@@ -0,0 +1,53 @@
+import { colors, spacers, theme } from '@dhis2/ui-constants'
+import { IconArrowLeft16 } from '@dhis2/ui-icons'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+function BackButton({ onClickHandler }) {
+ return (
+ <>
+
+
+
+
+ )
+}
+
+BackButton.propTypes = {
+ onClickHandler: PropTypes.func,
+}
+
+export default BackButton
diff --git a/components/header-bar/src/command-palette/sections/container.js b/components/header-bar/src/command-palette/sections/container.js
new file mode 100644
index 0000000000..107bb5fb85
--- /dev/null
+++ b/components/header-bar/src/command-palette/sections/container.js
@@ -0,0 +1,37 @@
+import { colors, elevations } from '@dhis2/ui-constants'
+import { Layer } from '@dhis2-ui/layer'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const ModalContainer = ({ children, setShow, show }) => {
+ return (
+ setShow(false)} translucent={show}>
+
+ {children}
+
+
+
+ )
+}
+
+ModalContainer.propTypes = {
+ children: PropTypes.node,
+ setShow: PropTypes.func,
+ show: PropTypes.bool,
+}
+
+export default ModalContainer
diff --git a/components/header-bar/src/command-palette/sections/heading.js b/components/header-bar/src/command-palette/sections/heading.js
new file mode 100644
index 0000000000..86011cbef5
--- /dev/null
+++ b/components/header-bar/src/command-palette/sections/heading.js
@@ -0,0 +1,30 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+function Heading({ heading }) {
+ return (
+
+ {/* role='header' ?*/}
+ {heading}
+
+
+ )
+}
+
+Heading.propTypes = {
+ heading: PropTypes.string,
+}
+
+export default Heading
diff --git a/components/header-bar/src/command-palette/sections/list-item.js b/components/header-bar/src/command-palette/sections/list-item.js
new file mode 100644
index 0000000000..c3e1c4dad7
--- /dev/null
+++ b/components/header-bar/src/command-palette/sections/list-item.js
@@ -0,0 +1,113 @@
+import { colors, spacers } from '@dhis2/ui-constants'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+function ListItem({
+ title,
+ path,
+ icon,
+ image,
+ description,
+ type,
+ onClickHandler,
+ highlighted,
+ dataTest = 'headerbar-list-item',
+ handleMouseEnter,
+}) {
+ const showDescription = type === 'commands'
+ return (
+
+
+ {icon &&
{icon} }
+ {image && (
+
+ )}
+
+ {title}
+ {showDescription && (
+ {description}
+ )}
+
+
+
+ )
+}
+
+ListItem.propTypes = {
+ dataTest: PropTypes.string,
+ description: PropTypes.string,
+ handleMouseEnter: PropTypes.func,
+ highlighted: PropTypes.bool,
+ icon: PropTypes.node,
+ image: PropTypes.string,
+ path: PropTypes.string,
+ title: PropTypes.string,
+ type: PropTypes.string,
+ onClickHandler: PropTypes.func,
+}
+
+export default ListItem
diff --git a/components/header-bar/src/command-palette/sections/list.js b/components/header-bar/src/command-palette/sections/list.js
new file mode 100644
index 0000000000..8a5761180a
--- /dev/null
+++ b/components/header-bar/src/command-palette/sections/list.js
@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useCommandPaletteContext } from '../context/command-palette-context.js'
+import ListItem from './list-item.js'
+
+function List({ filteredItems, type }) {
+ const { highlightedIndex, setHighlightedIndex } = useCommandPaletteContext()
+ return (
+
+ {filteredItems.map(
+ (
+ { displayName, name, defaultAction, icon, description },
+ idx
+ ) => (
+ setHighlightedIndex(idx)}
+ />
+ )
+ )}
+
+ )
+}
+List.propTypes = {
+ filteredItems: PropTypes.array,
+ type: PropTypes.string,
+}
+
+export default List
diff --git a/components/header-bar/src/command-palette/sections/search-field.js b/components/header-bar/src/command-palette/sections/search-field.js
new file mode 100644
index 0000000000..6ea20c4cc9
--- /dev/null
+++ b/components/header-bar/src/command-palette/sections/search-field.js
@@ -0,0 +1,54 @@
+import { colors, spacers, theme } from '@dhis2/ui-constants'
+import { IconSearch16 } from '@dhis2/ui-icons'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { InputField } from '../../../../input/src/input-field/input-field.js'
+
+function Search({ value, onChange, placeholder }) {
+ return (
+ <>
+
+
+
+
+ )
+}
+
+export default EmptySearchResults
diff --git a/components/header-bar/src/command-palette/utils/escapeCharacters.js b/components/header-bar/src/command-palette/utils/escapeCharacters.js
new file mode 100644
index 0000000000..26ed7e12f0
--- /dev/null
+++ b/components/header-bar/src/command-palette/utils/escapeCharacters.js
@@ -0,0 +1,7 @@
+/**
+ * Copied from here:
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping
+ */
+export function escapeRegExpCharacters(text) {
+ return text.replace(/[/.*+?^${}()|[\]\\]/g, '\\$&')
+}
diff --git a/components/header-bar/src/command-palette/utils/filterItemsArray.js b/components/header-bar/src/command-palette/utils/filterItemsArray.js
new file mode 100644
index 0000000000..75a792da80
--- /dev/null
+++ b/components/header-bar/src/command-palette/utils/filterItemsArray.js
@@ -0,0 +1,13 @@
+import { escapeRegExpCharacters } from './escapeCharacters.js'
+
+export const filterItemsArray = (items, filter) => {
+ return items.filter(({ displayName, name }) => {
+ const itemName = displayName || name
+ const formattedItemName = itemName.toLowerCase()
+ const formattedFilter = escapeRegExpCharacters(filter).toLowerCase()
+
+ return filter.length > 0
+ ? formattedItemName.match(formattedFilter)
+ : true
+ })
+}
diff --git a/components/header-bar/src/command-palette/views/home-view.js b/components/header-bar/src/command-palette/views/home-view.js
new file mode 100644
index 0000000000..89ef449d6b
--- /dev/null
+++ b/components/header-bar/src/command-palette/views/home-view.js
@@ -0,0 +1,143 @@
+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'
+import Heading from '../sections/heading.js'
+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,
+ setActiveSection,
+ } = useCommandPaletteContext()
+ const filteredItems = apps.concat(commands, shortcuts)
+ const topApps = apps?.slice(0, 8)
+ return (
+ <>
+ {filter.length > 0 ? (
+
+ {topApps.map(
+ (
+ {
+ displayName,
+ name,
+ defaultAction,
+ icon,
+ },
+ idx
+ ) => (
+
{
+ setActiveSection('grid')
+ setHighlightedIndex(idx)
+ }}
+ />
+ )
+ )}
+
+
+ {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)
+ }
+
+ return (
+ {
+ setActiveSection('actions')
+ setHighlightedIndex(index)
+ }}
+ />
+ )
+ }
+ )}
+
+
+ )}
+
+ )
+}
+
+HomeView.propTypes = {
+ actions: PropTypes.array,
+ apps: PropTypes.array,
+ commands: PropTypes.array,
+ shortcuts: PropTypes.array,
+}
+
+export default HomeView
diff --git a/components/header-bar/src/command-palette/views/list-view.js b/components/header-bar/src/command-palette/views/list-view.js
new file mode 100644
index 0000000000..d62882ebbd
--- /dev/null
+++ b/components/header-bar/src/command-palette/views/list-view.js
@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../../locales/index.js'
+import { useCommandPaletteContext } from '../context/command-palette-context.js'
+import Heading from '../sections/heading.js'
+import List from '../sections/list.js'
+import { EmptySearchResults } from '../sections/search-results.js'
+
+export function BrowseApps({ apps }) {
+ return 0
+ ? i18n.t(`Results for "${filter}"`)
+ : heading
+ }
+ />
+
+
+ ) : filter ? (
+
+