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}