feat: switch search field placeholder depending on the view

dhis2 · Oct 21, 2024 · 284e284 · 284e284
1 parent 96ed25e
commit 284e284
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/components/header-bar/src/command-palette/command-palette.js b/components/header-bar/src/command-palette/command-palette.js
@@ -2,6 +2,7 @@ import { colors, spacers } from '@dhis2/ui-constants'
 import { IconApps24 } from '@dhis2/ui-icons'
 import PropTypes from 'prop-types'
 import React, { useState, useCallback, useRef, useEffect } from 'react'
+import i18n from '../locales/index.js'
 import ActionsMenu from './sections/actions-menu.js'
 import BackButton from './sections/back-button.js'
 import Container from './sections/container.js'
@@ -82,7 +83,21 @@ const CommandPalette = ({ apps, commands, shortcuts }) => {
             {show ? (
                 <Container setShow={setShow} show={show}>
                     <div data-test="headerbar-menu" className="headerbar-menu">
-                        <Search value={filter} onChange={handleFilterChange} />
+                        <Search
+                            value={filter}
+                            onChange={handleFilterChange}
+                            placeholder={
+                                currentView === 'home'
+                                    ? i18n.t('Search apps, shortcuts, commands')
+                                    : currentView === 'apps'
+                                    ? i18n.t('Search apps')
+                                    : currentView === 'commands'
+                                    ? i18n.t('Search commands')
+                                    : currentView === 'shortcuts'
+                                    ? i18n.t('Search shortcuts')
+                                    : null
+                            }
+                        />
                         <div className="headerbar-menu-content">
                             {currentView !== 'home' && !filter ? (
                                 <BackButton onClickHandler={goToDefaultView} />

diff --git a/components/header-bar/src/command-palette/sections/search-field.js b/components/header-bar/src/command-palette/sections/search-field.js
@@ -3,15 +3,14 @@ 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'
-import i18n from '../../locales/index.js'
 
-function Search({ value, onChange }) {
+function Search({ value, onChange, placeholder }) {
     return (
         <>
             <InputField
                 value={value}
                 name="filter"
-                placeholder={i18n.t('Search apps, shortcuts, commands')}
+                placeholder={placeholder}
                 onChange={onChange}
                 initialFocus
                 className="search"
@@ -50,6 +49,7 @@ function Search({ value, onChange }) {
 Search.propTypes = {
     value: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
+    placeholder: PropTypes.string,
 }
 
 export default Search