From efb0c6bf15dc707cda4924d8aa2c4e5be6f9aca4 Mon Sep 17 00:00:00 2001 From: Iain Billett Date: Tue, 12 Oct 2021 13:56:31 +0100 Subject: [PATCH 1/3] 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. Signed-off-by: Iain Billett --- .changeset/healthy-poets-tap.md | 9 +++++++++ .../catalog/src/components/CatalogTable/CatalogTable.tsx | 1 + 2 files changed, 10 insertions(+) create mode 100644 .changeset/healthy-poets-tap.md diff --git a/.changeset/healthy-poets-tap.md b/.changeset/healthy-poets-tap.md new file mode 100644 index 0000000000..31e03e7e09 --- /dev/null +++ b/.changeset/healthy-poets-tap.md @@ -0,0 +1,9 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Set the search field placeholder on the catalog table to "Filter" to differentiate it from the search feature + +We had feedback that users expected the catalog table search field to have more sophisticated behaviour +than simple filtering. This change better sets expectations by setting the placeholder to "Filter" to +differentiate it from components which are part of the search plugin. diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index f293710847..197937d6f7 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -163,6 +163,7 @@ export const CatalogTable = ({ columns, actions }: CatalogTableProps) => { title={`${titlePreamble} (${entities.length})`} data={rows} actions={actions || defaultActions} + localization={{ toolbar: { searchPlaceholder: 'Filter' } }} /> ); }; From 28afbcd45ac9bf1dd281869da9adcdc25d1a9350 Mon Sep 17 00:00:00 2001 From: Iain Billett Date: Wed, 13 Oct 2021 10:48:59 +0100 Subject: [PATCH 2/3] Revert "Set catalog table search field placeholder to "Filter"" This reverts commit c9940ec5c5d515888c7f5cd2ee14a3672f9f02ac. Signed-off-by: Iain Billett --- .changeset/healthy-poets-tap.md | 9 --------- .../catalog/src/components/CatalogTable/CatalogTable.tsx | 1 - 2 files changed, 10 deletions(-) delete mode 100644 .changeset/healthy-poets-tap.md diff --git a/.changeset/healthy-poets-tap.md b/.changeset/healthy-poets-tap.md deleted file mode 100644 index 31e03e7e09..0000000000 --- a/.changeset/healthy-poets-tap.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -'@backstage/plugin-catalog': patch ---- - -Set the search field placeholder on the catalog table to "Filter" to differentiate it from the search feature - -We had feedback that users expected the catalog table search field to have more sophisticated behaviour -than simple filtering. This change better sets expectations by setting the placeholder to "Filter" to -differentiate it from components which are part of the search plugin. diff --git a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx index 197937d6f7..f293710847 100644 --- a/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx +++ b/plugins/catalog/src/components/CatalogTable/CatalogTable.tsx @@ -163,7 +163,6 @@ export const CatalogTable = ({ columns, actions }: CatalogTableProps) => { title={`${titlePreamble} (${entities.length})`} data={rows} actions={actions || defaultActions} - localization={{ toolbar: { searchPlaceholder: 'Filter' } }} /> ); }; From b488d8b69fa70e6081effa214e4e1f771f1dfaa9 Mon Sep 17 00:00:00 2001 From: Iain Billett Date: Wed, 13 Oct 2021 11:03:01 +0100 Subject: [PATCH 3/3] 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 --- .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 = { )), ResetSearch: forwardRef((props, ref) => ), - Search: forwardRef((props, ref) => ), + Search: forwardRef((props, ref) => ), SortArrow: forwardRef((props, ref) => ), ThirdStateCheck: forwardRef((props, ref) => ), ViewColumn: forwardRef((props, ref) => ), @@ -497,6 +496,7 @@ export function Table(props: TableProps) { } data={typeof data === 'function' ? data : tableData} style={{ width: '100%' }} + localization={{ toolbar: { searchPlaceholder: 'Filter' } }} {...restProps} />