diff --git a/.changeset/search-crying-in-hmart.md b/.changeset/search-crying-in-hmart.md new file mode 100644 index 0000000000..b6df59658e --- /dev/null +++ b/.changeset/search-crying-in-hmart.md @@ -0,0 +1,10 @@ +--- +'@backstage/plugin-search': minor +--- + +The way labels are controlled on both the `` and +`` components has changed. Previously, the string passed +on the `name` prop (which controls the field being filtered on) was also +rendered as the field label. Now, if you want a label rendered, it must be +passed on the new `label` prop. If no `label` is provided, no label will be +rendered. diff --git a/.changeset/search-the-things.md b/.changeset/search-the-things.md new file mode 100644 index 0000000000..83cc65233a --- /dev/null +++ b/.changeset/search-the-things.md @@ -0,0 +1,27 @@ +--- +'@backstage/create-app': patch +--- + +A `label` prop was added to `` components in order to allow +user-friendly label strings (as well as the option to omit a label). In order +to maintain labels on your existing filters, add a `label` prop to them in your +`SearchPage.tsx`. + +```diff +--- a/packages/app/src/components/search/SearchPage.tsx ++++ b/packages/app/src/components/search/SearchPage.tsx +@@ -96,11 +96,13 @@ const SearchPage = () => { + )} + + +``` diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx index 555a8932ea..3b839f9b1f 100644 --- a/packages/app/src/components/search/SearchPage.tsx +++ b/packages/app/src/components/search/SearchPage.tsx @@ -115,11 +115,13 @@ const SearchPage = () => { )} diff --git a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx index d348606873..d9508e24e8 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx @@ -96,11 +96,13 @@ const SearchPage = () => { )} diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx index 7a67bf3935..b329cf3b03 100644 --- a/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx +++ b/plugins/search/src/components/SearchFilter/SearchFilter.Autocomplete.tsx @@ -78,7 +78,7 @@ export const AutocompleteFilter = (props: SearchAutocompleteFilterProps) => { {...params} name="search" variant="outlined" - label={label || name} + label={label} fullWidth /> ); diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx index aa1b7e5e88..31539df0d8 100644 --- a/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx +++ b/plugins/search/src/components/SearchFilter/SearchFilter.test.tsx @@ -34,6 +34,7 @@ describe('SearchFilter', () => { types: [], }; + const label = 'Field'; const name = 'field'; const values = ['value1', 'value2']; const filters = { unrelated: 'unrelated' }; @@ -57,12 +58,12 @@ describe('SearchFilter', () => { it('Renders field name and values when provided as props', async () => { render( - + , ); await waitFor(() => { - expect(screen.getByText(name)).toBeInTheDocument(); + expect(screen.getByText(label)).toBeInTheDocument(); }); expect( @@ -83,12 +84,12 @@ describe('SearchFilter', () => { }, }} > - + , ); await waitFor(() => { - expect(screen.getByText(name)).toBeInTheDocument(); + expect(screen.getByText(label)).toBeInTheDocument(); }); expect( @@ -101,6 +102,7 @@ describe('SearchFilter', () => { render( { ); await waitFor(() => { - expect(screen.getByText(name)).toBeInTheDocument(); + expect(screen.getByText(label)).toBeInTheDocument(); }); expect(screen.getByRole('checkbox', { name: values[0] })).toBeChecked(); @@ -121,12 +123,12 @@ describe('SearchFilter', () => { it('Checking / unchecking a value sets filter state', async () => { render( - + , ); await waitFor(() => { - expect(screen.getByText(name)).toBeInTheDocument(); + expect(screen.getByText(label)).toBeInTheDocument(); }); const checkBox = screen.getByRole('checkbox', { name: values[0] }); @@ -151,12 +153,12 @@ describe('SearchFilter', () => { it('Checking / unchecking a value maintains unrelated filter state', async () => { render( - + , ); await waitFor(() => { - expect(screen.getByText(name)).toBeInTheDocument(); + expect(screen.getByText(label)).toBeInTheDocument(); }); const checkBox = screen.getByRole('checkbox', { name: values[0] }); @@ -185,12 +187,12 @@ describe('SearchFilter', () => { it('Renders field name and values when provided as props', async () => { render( - + , ); await waitFor(() => { - expect(screen.getByText(name)).toBeInTheDocument(); + expect(screen.getByText(label)).toBeInTheDocument(); }); userEvent.click(screen.getByRole('button')); @@ -210,7 +212,11 @@ describe('SearchFilter', () => { it('Renders values when provided asynchronously', async () => { render( - values} /> + values} + /> , ); @@ -245,12 +251,12 @@ describe('SearchFilter', () => { }, }} > - + , ); await waitFor(() => { - expect(screen.getByText(name)).toBeInTheDocument(); + expect(screen.getByText(label)).toBeInTheDocument(); }); userEvent.click(screen.getByRole('button')); @@ -276,6 +282,7 @@ describe('SearchFilter', () => { @@ -283,7 +290,7 @@ describe('SearchFilter', () => { ); await waitFor(() => { - expect(screen.getByText(name)).toBeInTheDocument(); + expect(screen.getByText(label)).toBeInTheDocument(); }); userEvent.click(screen.getByRole('button')); @@ -307,12 +314,12 @@ describe('SearchFilter', () => { it('Selecting a value sets filter state', async () => { render( - + , ); await waitFor(() => { - expect(screen.getByText(name)).toBeInTheDocument(); + expect(screen.getByText(label)).toBeInTheDocument(); }); const button = screen.getByRole('button'); @@ -358,12 +365,12 @@ describe('SearchFilter', () => { filters, }} > - + , ); await waitFor(() => { - expect(screen.getByText(name)).toBeInTheDocument(); + expect(screen.getByText(label)).toBeInTheDocument(); }); const button = screen.getByRole('button'); diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.tsx index d009afd115..534db60130 100644 --- a/plugins/search/src/components/SearchFilter/SearchFilter.tsx +++ b/plugins/search/src/components/SearchFilter/SearchFilter.tsx @@ -93,7 +93,7 @@ const CheckboxFilter = (props: SearchFilterComponentProps) => { fullWidth data-testid="search-checkboxfilter-next" > - {label || name} + {label ? {label} : null} {values.map((value: string) => ( { fullWidth data-testid="search-selectfilter-next" > - - {label || name} - + {label ? ( + + {label} + + ) : null}