Change search bar placeholder and make it dynamic by props (#100049)

elastic · May 14, 2021 · b6635b0 · b6635b0
1 parent 0b5c672
commit b6635b0
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 8 deletions.
diff --git a/x-pack/plugins/security_solution/public/management/components/search_bar/index.test.tsx b/x-pack/plugins/security_solution/public/management/components/search_bar/index.test.tsx
@@ -22,7 +22,7 @@ describe('Search bar', () => {
   });
 
   const getElement = (defaultValue: string = '') => (
-    <SearchBar defaultValue={defaultValue} onSearch={onSearchMock} />
+    <SearchBar defaultValue={defaultValue} onSearch={onSearchMock} placeholder={'placeholder'} />
   );
 
   it('should have a default value', () => {

diff --git a/x-pack/plugins/security_solution/public/management/components/search_bar/index.tsx b/x-pack/plugins/security_solution/public/management/components/search_bar/index.tsx
@@ -11,10 +11,11 @@ import { i18n } from '@kbn/i18n';
 
 export interface SearchBarProps {
   defaultValue?: string;
+  placeholder: string;
   onSearch(value: string): void;
 }
 
-export const SearchBar = memo<SearchBarProps>(({ defaultValue = '', onSearch }) => {
+export const SearchBar = memo<SearchBarProps>(({ defaultValue = '', onSearch, placeholder }) => {
   const [query, setQuery] = useState<string>(defaultValue);
 
   const handleOnChangeSearchField = useCallback(
@@ -28,9 +29,7 @@ export const SearchBar = memo<SearchBarProps>(({ defaultValue = '', onSearch })
       <EuiFlexItem>
         <EuiFieldSearch
           defaultValue={defaultValue}
-          placeholder={i18n.translate('xpack.securitySolution.management.search.placeholder', {
-            defaultMessage: 'Search',
-          })}
+          placeholder={placeholder}
           onChange={handleOnChangeSearchField}
           onSearch={onSearch}
           isClearable

diff --git a/.../security_solution/public/management/pages/event_filters/view/event_filters_list_page.tsx b/.../security_solution/public/management/pages/event_filters/view/event_filters_list_page.tsx
@@ -213,7 +213,13 @@ export const EventFiltersListPage = memo(() => {
 
       {doesDataExist && (
         <>
-          <SearchBar defaultValue={location.filter} onSearch={handleOnSearch} />
+          <SearchBar
+            defaultValue={location.filter}
+            onSearch={handleOnSearch}
+            placeholder={i18n.translate('xpack.securitySolution.eventFilter.search.placeholder', {
+              defaultMessage: 'Search on the fields below: name, comments, value',
+            })}
+          />
           <EuiSpacer size="m" />
           <EuiText color="subdued" size="xs" data-test-subj="eventFiltersCountLabel">
             <FormattedMessage

diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/translations.ts b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/translations.ts
@@ -185,3 +185,10 @@ export const CREATE_TRUSTED_APP_ERROR: { [K in string]: string } = {
     { defaultMessage: 'An invalid Signature was entered. Please enter in a valid Signature.' }
   ),
 };
+
+export const SEARCH_TRUSTED_APP_PLACEHOLDER = i18n.translate(
+  'xpack.securitySolution.trustedapps.list.search.placeholder',
+  {
+    defaultMessage: 'Search on the fields below: name, description, value',
+  }
+);
diff --git a/...plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.tsx b/...plugins/security_solution/public/management/pages/trusted_apps/view/trusted_apps_page.tsx
@@ -37,7 +37,7 @@ import { TrustedAppDeletionDialog } from './trusted_app_deletion_dialog';
 import { TrustedAppsNotifications } from './trusted_apps_notifications';
 import { TrustedAppsListPageRouteState } from '../../../../../common/endpoint/types';
 import { useNavigateToAppEventHandler } from '../../../../common/hooks/endpoint/use_navigate_to_app_event_handler';
-import { ABOUT_TRUSTED_APPS } from './translations';
+import { ABOUT_TRUSTED_APPS, SEARCH_TRUSTED_APP_PLACEHOLDER } from './translations';
 import { EmptyState } from './components/empty_state';
 import { SearchBar } from '../../../components/search_bar';
 
@@ -96,7 +96,11 @@ export const TrustedAppsPage = memo(() => {
         />
       )}
 
-      <SearchBar defaultValue={location.filter} onSearch={handleOnSearch} />
+      <SearchBar
+        defaultValue={location.filter}
+        onSearch={handleOnSearch}
+        placeholder={SEARCH_TRUSTED_APP_PLACEHOLDER}
+      />
       {doEntriesExist ? (
         <EuiFlexGroup
           direction="column"