Merge pull request #7567 from RoadieHQ/set-catalog-table-search-placeholder

Set catalog table search field placeholder to "Filter"

.changeset/nine-laws-run.md

@@ -0,0 +1,11 @@
+---
+'@backstage/core-components': patch
+---
+
+Change the Table search field placeholder to "Filter" and change icon accordingly
+
+We had feedback that users expected the catalog table search field to have more sophisticated behaviour
+than simple filtering. This change sets the search field placeholder to read "Filter"
+to avoid confusion with the search feature. The icon is updated to match. This change is applied
+generally in core-components so this change is made consistently across the app given the search
+field is present on all pages via the sidebar.

packages/core-components/src/components/Table/Table.tsx

@@ -32,7 +32,6 @@ import FirstPage from '@material-ui/icons/FirstPage';
 import LastPage from '@material-ui/icons/LastPage';
 import Remove from '@material-ui/icons/Remove';
 import SaveAlt from '@material-ui/icons/SaveAlt';
-import Search from '@material-ui/icons/Search';
 import ViewColumn from '@material-ui/icons/ViewColumn';
 import { isEqual, transform } from 'lodash';
 import MTable, {
@@ -73,7 +72,7 @@ const tableIcons: Icons = {
     <ChevronLeft {...props} ref={ref} />
   )),
   ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
-  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
+  Search: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
   SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
   ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
   ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
@@ -497,6 +496,7 @@ export function Table<T extends object = {}>(props: TableProps<T>) {
         }
         data={typeof data === 'function' ? data : tableData}
         style={{ width: '100%' }}
+        localization={{ toolbar: { searchPlaceholder: 'Filter' } }}
         {...restProps}
       />
     </div>