diff --git a/components/header-bar/src/apps.js b/components/header-bar/src/apps.js
index 95fd4ab99..72db8e9f3 100755
--- a/components/header-bar/src/apps.js
+++ b/components/header-bar/src/apps.js
@@ -8,12 +8,11 @@ import {
IconArrowLeft16,
} from '@dhis2/ui-icons'
import { Button } from '@dhis2-ui/button'
-import { Card } from '@dhis2-ui/card'
import { InputField } from '@dhis2-ui/input'
import { MenuItem } from '@dhis2-ui/menu'
import { Modal, ModalContent } from '@dhis2-ui/modal'
import PropTypes from 'prop-types'
-import React, { useState, useCallback, useRef } from 'react'
+import React, { useState, useCallback, useRef, useEffect } from 'react'
import { joinPath } from './join-path.js'
import i18n from './locales/index.js'
@@ -35,18 +34,16 @@ function Search({ value, onChange }) {
placeholder={i18n.t('Search apps, shortcuts, commands')}
onChange={onChange}
initialFocus
+ // style={{
+ // width: '100%',
+ // border: 'none',
+ // }}
/>
@@ -58,7 +55,7 @@ Search.propTypes = {
onChange: PropTypes.func.isRequired,
}
-function Item({ name, path, img }) {
+function AppItem({ name, path, img }) {
return (
@@ -67,14 +64,11 @@ function Item({ name, path, img }) {
)
}
-AppItem.propTypes = {
+ListItem.propTypes = {
description: PropTypes.string,
image: PropTypes.string,
name: PropTypes.string,
path: PropTypes.string,
}
-function BackToHomeButton({ setView }) {
- const handleClick = () => {
- setView('home')
- }
- return (
- }
- name="Back"
- onClick={handleClick}
- title="Back Button"
- value="back"
- style={{
- width: '100%',
- border: 'none',
- justifyContent: 'flex-start',
- }}
- />
- )
-}
-
-BackToHomeButton.propTypes = {
- setView: PropTypes.func,
-}
-
-const CommandPalette = ({ apps, commands }) => {
- 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])
-
- console.log(containerEl, 'containerEl')
-
+function List({ filteredItems }) {
return (
-
-
-
- {show ? (
-
- ) : null}
+
+ {filteredItems.map(
+ (
+ { displayName, name, defaultAction, icon, description },
+ idx
+ ) => (
+
+ )
+ )}
)
}
-
-CommandPalette.propTypes = {
- apps: PropTypes.array,
- commands: PropTypes.array,
+List.propTypes = {
+ filteredItems: PropTypes.array,
}
-export const MenuModal = ({ show, apps, commands, filter, onFilterChange }) => {
- console.log(apps, 'apps')
- const [currentView, setCurrentView] = useState('home')
- const showActions = filter.length <= 0 && currentView === 'home'
-
- return (
-
- {show && (
-
-
-
-
-
-
- {showActions ? (
-
- ) : null}
-
-
-
-
- )}
-
- )
-}
+function Actions({ setView }) {
+ const actions = [
+ {
+ icon: IconApps16,
+ type: 'apps',
+ action: 'Browse apps',
+ },
+ {
+ icon: IconTerminalWindow16,
+ type: 'commands',
+ action: 'Browse commands',
+ },
+ ]
-MenuModal.propTypes = {
- apps: PropTypes.array,
- commands: PropTypes.array,
- filter: PropTypes.string,
- show: PropTypes.bool,
- onFilterChange: PropTypes.func,
-}
+ const { baseUrl } = useConfig()
-function ViewSwitcher({ apps, commands, filter, view, setView }) {
- switch (view) {
- case 'apps':
- return
- case 'commands':
- return (
-
+ {i18n.t('Actions')}
+ {actions.map((action, index) => (
+