From a5a6cd5db781379c46c9e8e0b69be0976f7d557e Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Wed, 1 Dec 2021 14:55:36 +0100 Subject: [PATCH 1/4] docs(search): update the number of engines Co-authored-by: Emma Indal Signed-off-by: Camila Belo --- docs/features/search/search-engines.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 From 9c19328da9d2cf2e607a829d34d899e99d3822b3 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Wed, 1 Dec 2021 14:56:12 +0100 Subject: [PATCH 2/4] feat(search): Add optional clear button prop Co-authored-by: Emma Indal Signed-off-by: Camila Belo --- .../SearchBar/SearchBar.stories.tsx | 47 ++++++++++++++++++- .../components/SearchBar/SearchBar.test.tsx | 14 ++++++ .../src/components/SearchBar/SearchBar.tsx | 17 +++++-- 3 files changed, 72 insertions(+), 6 deletions(-) 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} /> ); }; From c5941d5c30538fb8f58f43c054f550f2be9d41cc Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Wed, 1 Dec 2021 15:01:23 +0100 Subject: [PATCH 3/4] chore(search): add changeset file Co-authored-by: Emma Indal Signed-off-by: Camila Belo --- .changeset/search-zebras-matter.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/search-zebras-matter.md 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. From 11e267359437dd23e82b9ec9b0efec4a79eed02c Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Wed, 1 Dec 2021 15:30:33 +0100 Subject: [PATCH 4/4] docs(search): build api reports Co-authored-by: Emma Indal Signed-off-by: Camila Belo --- plugins/search/api-report.md | 3 +++ 1 file changed, 3 insertions(+) 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)