[Security Solutions][Endpoint] Change search bar placeholder and make…

… it dynamic by props (#100047) * Change search bar placeholder and make it dynamic by props * Adds placeholder on test Co-authored-by: Kibana Machine <[email protected]>
elastic · May 14, 2021 · fd7c3b6 · fd7c3b6
1 parent 8240b57
commit fd7c3b6
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git a/...y_solution/public/management/pages/trusted_apps/view/components/search_bar/index.test.tsx b/...y_solution/public/management/pages/trusted_apps/view/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/...curity_solution/public/management/pages/trusted_apps/view/components/search_bar/index.tsx b/...curity_solution/public/management/pages/trusted_apps/view/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,12 +29,7 @@ export const SearchBar = memo<SearchBarProps>(({ defaultValue = '', onSearch })
       <EuiFlexItem>
         <EuiFieldSearch
           defaultValue={query}
-          placeholder={i18n.translate(
-            'xpack.securitySolution.trustedapps.list.search.placeholder',
-            {
-              defaultMessage: 'Search',
-            }
-          )}
+          placeholder={placeholder}
           onChange={handleOnChangeSearchField}
           onSearch={onSearch}
           isClearable

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
@@ -186,3 +186,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"