diff --git a/.changeset/search-zebras-matter.md b/.changeset/search-zebras-matter.md
new file mode 100644
index 0000000000..277e36dd39
--- /dev/null
+++ b/.changeset/search-zebras-matter.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-search': patch
+---
+
+Add a new optional clearButton property to the SearchBar component. The default value for this new property is true.
diff --git a/docs/features/search/search-engines.md b/docs/features/search/search-engines.md
index a0302ce279..1331c73b72 100644
--- a/docs/features/search/search-engines.md
+++ b/docs/features/search/search-engines.md
@@ -4,9 +4,9 @@ title: Search Engines
description: Choosing and configuring your search engine for Backstage
---
-Backstage supports 2 search engines by default, an in-memory engine called Lunr
-and ElasticSearch. You can configure your own search engines by implementing the
-provided interface as mentioned in the
+Backstage supports 3 search engines by default, an in-memory engine called Lunr,
+ElasticSearch and Postgres. You can configure your own search engines by
+implementing the provided interface as mentioned in the
[search backend documentation.](./getting-started.md#Backend)
Provided search engine implementations have their own way of constructing
diff --git a/plugins/search/api-report.md b/plugins/search/api-report.md
index c211c48e53..7dba0a8e21 100644
--- a/plugins/search/api-report.md
+++ b/plugins/search/api-report.md
@@ -84,6 +84,7 @@ export const SearchBar: ({
className,
debounceTime,
placeholder,
+ clearButton,
}: Props) => JSX.Element;
// Warning: (ae-missing-release-tag) "SearchBarNext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -94,11 +95,13 @@ export const SearchBarNext: ({
className,
debounceTime,
placeholder,
+ clearButton,
}: {
autoFocus?: boolean | undefined;
className?: string | undefined;
debounceTime?: number | undefined;
placeholder?: string | undefined;
+ clearButton?: boolean | undefined;
}) => JSX.Element;
// Warning: (ae-missing-release-tag) "SearchContextProvider" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
diff --git a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx
index 72b8429026..d00f391bc7 100644
--- a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx
+++ b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx
@@ -15,7 +15,7 @@
*/
import React from 'react';
-import { Paper, Grid } from '@material-ui/core';
+import { Paper, Grid, makeStyles } from '@material-ui/core';
import { SearchBar, SearchContext } from '../index';
import { MemoryRouter } from 'react-router';
@@ -81,3 +81,48 @@ export const Focused = () => {
);
};
+
+export const WithoutClearButton = () => {
+ return (
+
+ {/* @ts-ignore (defaultValue requires more than what is used here) */}
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const useStyles = makeStyles({
+ search: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ padding: '8px 0',
+ borderRadius: '50px',
+ margin: 'auto',
+ },
+});
+
+export const CustomStyles = () => {
+ const classes = useStyles();
+ return (
+
+ {/* @ts-ignore (defaultValue requires more than what is used here) */}
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/plugins/search/src/components/SearchBar/SearchBar.test.tsx b/plugins/search/src/components/SearchBar/SearchBar.test.tsx
index 81f90640c1..4ac4c95224 100644
--- a/plugins/search/src/components/SearchBar/SearchBar.test.tsx
+++ b/plugins/search/src/components/SearchBar/SearchBar.test.tsx
@@ -149,6 +149,20 @@ describe('SearchBar', () => {
);
});
+ it('Should not show clear button', async () => {
+ render(
+
+
+
+
+ ,
+ );
+
+ expect(
+ screen.queryByRole('button', { name: 'Clear' }),
+ ).not.toBeInTheDocument();
+ });
+
it('Adheres to provided debounceTime', async () => {
jest.useFakeTimers();
diff --git a/plugins/search/src/components/SearchBar/SearchBar.tsx b/plugins/search/src/components/SearchBar/SearchBar.tsx
index 4ab680d8fa..693cf98adf 100644
--- a/plugins/search/src/components/SearchBar/SearchBar.tsx
+++ b/plugins/search/src/components/SearchBar/SearchBar.tsx
@@ -31,6 +31,7 @@ type PresenterProps = {
className?: string;
placeholder?: string;
autoFocus?: boolean;
+ clearButton?: boolean;
};
export const SearchBarBase = ({
@@ -40,6 +41,7 @@ export const SearchBarBase = ({
onSubmit,
className,
placeholder: overridePlaceholder,
+ clearButton = true,
}: PresenterProps) => {
const configApi = useApi(configApiRef);
@@ -79,11 +81,13 @@ export const SearchBarBase = ({
}
endAdornment={
-
-
-
-
-
+ clearButton && (
+
+
+
+
+
+ )
}
{...(className && { className })}
{...(onSubmit && { onKeyDown })}
@@ -96,6 +100,7 @@ type Props = {
className?: string;
debounceTime?: number;
placeholder?: string;
+ clearButton?: boolean;
};
export const SearchBar = ({
@@ -103,6 +108,7 @@ export const SearchBar = ({
className,
debounceTime = 0,
placeholder,
+ clearButton = true,
}: Props) => {
const { term, setTerm } = useSearch();
const [value, setValue] = useState(term);
@@ -129,6 +135,7 @@ export const SearchBar = ({
onChange={handleQuery}
onClear={handleClear}
placeholder={placeholder}
+ clearButton={clearButton}
/>
);
};