From 284e284fe03fe7102633ce4e018f8873580cc8e6 Mon Sep 17 00:00:00 2001
From: Diana Nanyanzi <diana@dhis2.org>
Date: Mon, 21 Oct 2024 17:05:34 +0300
Subject: [PATCH] feat: switch search field placeholder depending on the view

---
 .../src/command-palette/command-palette.js      | 17 ++++++++++++++++-
 .../command-palette/sections/search-field.js    |  6 +++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/components/header-bar/src/command-palette/command-palette.js b/components/header-bar/src/command-palette/command-palette.js
index b66e18cc6..972257975 100755
--- 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
index 3ee529fe0..0d5ff1f76 100644
--- 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