From b488d8b69fa70e6081effa214e4e1f771f1dfaa9 Mon Sep 17 00:00:00 2001
From: Iain Billett <iain@roadie.io>
Date: Wed, 13 Oct 2021 11:03:01 +0100
Subject: [PATCH] Set catalog table search field placeholder to "Filter"

Full reasoning is in the changeset but in short this is to avoid
confusion with the search plugin. The icon is also updated.

Signed-off-by: Iain Billett <iain@roadie.io>
---
 .changeset/nine-laws-run.md                           | 11 +++++++++++
 .../core-components/src/components/Table/Table.tsx    |  4 ++--
 2 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/nine-laws-run.md

diff --git a/.changeset/nine-laws-run.md b/.changeset/nine-laws-run.md
new file mode 100644
index 0000000000..742ec4d8b6
--- /dev/null
+++ b/.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.
diff --git a/packages/core-components/src/components/Table/Table.tsx b/packages/core-components/src/components/Table/Table.tsx
index f61811938e..234b64ec54 100644
--- a/packages/core-components/src/components/Table/Table.tsx
+++ b/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>