From 694003a11c8a5e8e94d3f7dc7b0fabaa0d522dee Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Tue, 28 Feb 2023 12:51:24 -0500 Subject: [PATCH 01/12] fix: Add close button & better padding on search input Signed-off-by: Carlos Esteban Lopez --- .../app/src/components/search/SearchModal.tsx | 59 +++++++++++-------- .../app/src/components/search/SearchPage.tsx | 2 +- 2 files changed, 37 insertions(+), 24 deletions(-) diff --git a/packages/app/src/components/search/SearchModal.tsx b/packages/app/src/components/search/SearchModal.tsx index fea80f9952..16988d0ae9 100644 --- a/packages/app/src/components/search/SearchModal.tsx +++ b/packages/app/src/components/search/SearchModal.tsx @@ -13,26 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -import React, { KeyboardEvent, useRef, useCallback, useEffect } from 'react'; -import { useNavigate } from 'react-router-dom'; -import { - DialogActions, - DialogContent, - DialogTitle, - Grid, - makeStyles, - Paper, -} from '@material-ui/core'; -import Typography from '@material-ui/core/Typography'; -import BuildIcon from '@material-ui/icons/Build'; -import LaunchIcon from '@material-ui/icons/Launch'; import { CatalogIcon, DocsIcon, Link } from '@backstage/core-components'; import { useApi, useRouteRef } from '@backstage/core-plugin-api'; -import { CatalogSearchResultListItem } from '@internal/plugin-catalog-customized'; import { - catalogApiRef, CATALOG_FILTER_EXISTS, + catalogApiRef, } from '@backstage/plugin-catalog-react'; import { ToolSearchResultListItem } from '@backstage/plugin-explore'; import { searchPlugin, SearchType } from '@backstage/plugin-search'; @@ -44,12 +29,34 @@ import { useSearch, } from '@backstage/plugin-search-react'; import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs'; +import { CatalogSearchResultListItem } from '@internal/plugin-catalog-customized'; +import { + Box, + DialogActions, + DialogContent, + DialogTitle, + Grid, + makeStyles, + Paper, +} from '@material-ui/core'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import BuildIcon from '@material-ui/icons/Build'; +import CloseIcon from '@material-ui/icons/Close'; +import LaunchIcon from '@material-ui/icons/Launch'; +import React, { KeyboardEvent, useCallback, useEffect, useRef } from 'react'; +import { useNavigate } from 'react-router-dom'; const useStyles = makeStyles(theme => ({ + dialogTitle: { + display: 'grid', + gridTemplateColumns: '1fr auto', + }, container: { borderRadius: 30, display: 'flex', height: '2.4em', + padding: theme.spacing(1), }, filter: { '& + &': { @@ -95,13 +102,19 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => { return ( <> - - - + + + + + + toggleModal()}> + + + diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx index 6c4f06aed9..6e1599bacc 100644 --- a/packages/app/src/components/search/SearchPage.tsx +++ b/packages/app/src/components/search/SearchPage.tsx @@ -45,7 +45,7 @@ import BuildIcon from '@material-ui/icons/Build'; const useStyles = makeStyles((theme: Theme) => ({ bar: { - padding: theme.spacing(1, 0), + padding: theme.spacing(1), }, filter: { '& + &': { From e22f74f421369e84501bbb043c1db051d8d6ebcf Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Wed, 1 Mar 2023 16:24:49 -0500 Subject: [PATCH 02/12] feat(search): Improve search dialog's & page's bar UI Signed-off-by: Carlos Esteban Lopez --- .../app/src/components/search/SearchModal.tsx | 44 +++++++------ .../app/src/components/search/SearchPage.tsx | 4 +- .../src/components/SearchBar/SearchBar.tsx | 63 +++++++++--------- .../components/SearchModal/SearchModal.tsx | 66 ++++++++++++------- 4 files changed, 98 insertions(+), 79 deletions(-) diff --git a/packages/app/src/components/search/SearchModal.tsx b/packages/app/src/components/search/SearchModal.tsx index 16988d0ae9..e2d46b2e19 100644 --- a/packages/app/src/components/search/SearchModal.tsx +++ b/packages/app/src/components/search/SearchModal.tsx @@ -37,20 +37,24 @@ import { DialogTitle, Grid, makeStyles, - Paper, } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; import IconButton from '@material-ui/core/IconButton'; -import Typography from '@material-ui/core/Typography'; +import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; import BuildIcon from '@material-ui/icons/Build'; import CloseIcon from '@material-ui/icons/Close'; -import LaunchIcon from '@material-ui/icons/Launch'; import React, { KeyboardEvent, useCallback, useEffect, useRef } from 'react'; import { useNavigate } from 'react-router-dom'; const useStyles = makeStyles(theme => ({ dialogTitle: { + gap: theme.spacing(1), display: 'grid', + alignItems: 'center', gridTemplateColumns: '1fr auto', + '&> button': { + marginTop: theme.spacing(1), + }, }, container: { borderRadius: 30, @@ -90,7 +94,7 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => { }); const handleSearchBarKeyDown = useCallback( - (e: KeyboardEvent) => { + (e: KeyboardEvent) => { if (e.key === 'Enter') { toggleModal(); navigate(searchPagePath); @@ -103,15 +107,13 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => { <> - - - + - toggleModal()}> + @@ -186,15 +188,15 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => { alignItems="center" > - - - View Full Results - - - + diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx index 6e1599bacc..1aa15446c2 100644 --- a/packages/app/src/components/search/SearchPage.tsx +++ b/packages/app/src/components/search/SearchPage.tsx @@ -70,9 +70,7 @@ const SearchPage = () => { - - - + {!isMobile && ( diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx index 9c312718bf..1be8043b65 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.tsx @@ -13,39 +13,32 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -import React, { - ChangeEvent, - KeyboardEvent, - useState, - useEffect, - useCallback, - forwardRef, - ComponentType, - ForwardRefExoticComponent, -} from 'react'; -import useDebounce from 'react-use/lib/useDebounce'; - -import { - InputBase, - InputBaseProps, - InputAdornment, - IconButton, -} from '@material-ui/core'; -import SearchIcon from '@material-ui/icons/Search'; -import ClearButton from '@material-ui/icons/Clear'; - import { AnalyticsContext, configApiRef, useApi, } from '@backstage/core-plugin-api'; +import { IconButton, InputAdornment, TextField } from '@material-ui/core'; +import { TextFieldProps } from '@material-ui/core/TextField'; +import ClearButton from '@material-ui/icons/Clear'; +import SearchIcon from '@material-ui/icons/Search'; +import React, { + ChangeEvent, + ComponentType, + forwardRef, + ForwardRefExoticComponent, + KeyboardEvent, + useCallback, + useEffect, + useState, +} from 'react'; +import useDebounce from 'react-use/lib/useDebounce'; import { SearchContextProvider, useSearch } from '../../context'; import { TrackSearch } from '../SearchTracker'; function withContext(Component: ComponentType) { - return forwardRef((props, ref) => ( + return forwardRef((props, ref) => ( @@ -57,12 +50,13 @@ function withContext(Component: ComponentType) { * * @public */ -export type SearchBarBaseProps = Omit & { +export type SearchBarBaseProps = Omit & { debounceTime?: number; clearButton?: boolean; onClear?: () => void; onSubmit?: () => void; onChange: (value: string) => void; + endAdornment?: React.ReactNode; }; /** @@ -109,7 +103,7 @@ export const SearchBarBase: ForwardRefExoticComponent = ); const handleKeyDown = useCallback( - (e: KeyboardEvent) => { + (e: KeyboardEvent) => { if (onKeyDown) onKeyDown(e); if (onSubmit && e.key === 'Enter') { onSubmit(); @@ -147,14 +141,21 @@ export const SearchBarBase: ForwardRefExoticComponent = return ( - ({ + dialogTitle: { + gap: theme.spacing(1), + display: 'grid', + alignItems: 'center', + gridTemplateColumns: '1fr auto', + '&> button': { + marginTop: theme.spacing(1), + }, + }, container: { borderRadius: 30, display: 'flex', @@ -111,7 +122,7 @@ export const Modal = () => { }, [focusContent, transitions]); const handleSearchBarKeyDown = useCallback( - (e: KeyboardEvent) => { + (e: KeyboardEvent) => { if (e.key === 'Enter') { navigate(searchPagePath); handleSearchResultClick(); @@ -123,13 +134,17 @@ export const Modal = () => { return ( <> - + - + + + + + { alignItems="center" > - - - View Full Results - - - + From 750e45539add46bbb83c1977f7948c81dcab010e Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Wed, 1 Mar 2023 17:03:39 -0500 Subject: [PATCH 03/12] chore(search): Add changeset & update API reports Signed-off-by: Carlos Esteban Lopez --- .changeset/mighty-bears-glow.md | 6 ++++++ plugins/scaffolder/api-report.md | 2 ++ plugins/search-react/api-report.md | 5 +++-- 3 files changed, 11 insertions(+), 2 deletions(-) create mode 100644 .changeset/mighty-bears-glow.md diff --git a/.changeset/mighty-bears-glow.md b/.changeset/mighty-bears-glow.md new file mode 100644 index 0000000000..125feb73c6 --- /dev/null +++ b/.changeset/mighty-bears-glow.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-search-react': patch +'@backstage/plugin-search': patch +--- + +Add close button & improve search input. diff --git a/plugins/scaffolder/api-report.md b/plugins/scaffolder/api-report.md index 3495522310..642afe5bf4 100644 --- a/plugins/scaffolder/api-report.md +++ b/plugins/scaffolder/api-report.md @@ -140,6 +140,7 @@ export const EntityTagsPickerFieldExtension: FieldExtensionComponent_2< kinds?: string[] | undefined; showCounts?: boolean | undefined; helperText?: string | undefined; + kinds?: string[] | undefined; } >; @@ -150,6 +151,7 @@ export const EntityTagsPickerFieldSchema: FieldSchema< kinds?: string[] | undefined; showCounts?: boolean | undefined; helperText?: string | undefined; + kinds?: string[] | undefined; } >; diff --git a/plugins/search-react/api-report.md b/plugins/search-react/api-report.md index 30b5d4b581..e39e91de72 100644 --- a/plugins/search-react/api-report.md +++ b/plugins/search-react/api-report.md @@ -10,7 +10,6 @@ import { AsyncState } from 'react-use/lib/useAsync'; import { AutocompleteProps } from '@material-ui/lab'; import { Extension } from '@backstage/core-plugin-api'; import { ForwardRefExoticComponent } from 'react'; -import { InputBaseProps } from '@material-ui/core'; import { JsonObject } from '@backstage/types'; import { JsonValue } from '@backstage/types'; import { LinkProps } from '@backstage/core-components'; @@ -26,6 +25,7 @@ import { SearchDocument } from '@backstage/plugin-search-common'; import { SearchQuery } from '@backstage/plugin-search-common'; import { SearchResult as SearchResult_2 } from '@backstage/plugin-search-common'; import { SearchResultSet } from '@backstage/plugin-search-common'; +import { TextFieldProps } from '@material-ui/core/TextField'; import { TypographyProps } from '@material-ui/core'; // @public (undocumented) @@ -136,12 +136,13 @@ export const SearchBar: ForwardRefExoticComponent; export const SearchBarBase: ForwardRefExoticComponent; // @public -export type SearchBarBaseProps = Omit & { +export type SearchBarBaseProps = Omit & { debounceTime?: number; clearButton?: boolean; onClear?: () => void; onSubmit?: () => void; onChange: (value: string) => void; + endAdornment?: React_2.ReactNode; }; // @public From 718ef6063813b8964c5bac7800b7e0e425fbd96c Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Wed, 1 Mar 2023 17:55:24 -0500 Subject: [PATCH 04/12] tests(search): Fix tests broken by change from placeholder to label Signed-off-by: Carlos Esteban Lopez --- .../SearchAutocomplete.test.tsx | 6 ++--- .../components/SearchBar/SearchBar.test.tsx | 25 ++++++++++++++++--- .../src/components/SearchBar/SearchBar.tsx | 9 ++++--- 3 files changed, 30 insertions(+), 10 deletions(-) diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx index d9da187541..54deca5f5d 100644 --- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx +++ b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx @@ -74,7 +74,7 @@ describe('SearchAutocomplete', () => { expect(screen.queryByText(options[1])).not.toBeInTheDocument(); expect(screen.queryByText(options[2])).not.toBeInTheDocument(); - await userEvent.click(screen.getByPlaceholderText(`Search in ${title}`)); + await userEvent.click(screen.getByLabelText(`Search in ${title}`)); await waitFor(() => { expect(screen.getByText(options[0])).toBeInTheDocument(); @@ -150,7 +150,7 @@ describe('SearchAutocomplete', () => { , ); - await userEvent.click(screen.getByPlaceholderText(`Search in ${title}`)); + await userEvent.click(screen.getByLabelText(`Search in ${title}`)); await userEvent.click(screen.getByText(options[0])); @@ -218,7 +218,7 @@ describe('SearchAutocomplete', () => { , ); - await userEvent.click(screen.getByPlaceholderText(`Search in ${title}`)); + await userEvent.click(screen.getByLabelText(`Search in ${title}`)); await waitFor(() => { expect(screen.getAllByTitle('Option icon')).toHaveLength(3); diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx index fba50f74d8..30df27aba7 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx @@ -70,9 +70,28 @@ describe('SearchBar', () => { ); await waitFor(() => { - expect( - screen.getByPlaceholderText('Search in Mock title'), - ).toBeInTheDocument(); + expect(screen.getByLabelText('Search in Mock title')).toBeInTheDocument(); + }); + }); + + it('Renders with custom label', async () => { + const label = 'label'; + + const result = await renderWithEffects( + + + + + , + ); + + await waitFor(() => { + expect(result.getByLabelText(label)).toBeInTheDocument(); }); }); diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx index 1be8043b65..72d3559eb0 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.tsx @@ -78,7 +78,7 @@ export const SearchBarBase: ForwardRefExoticComponent = clearButton = true, fullWidth = true, value: defaultValue, - placeholder: defaultPlaceholder, + label: defaultLabel, inputProps: defaultInputProps = {}, endAdornment: defaultEndAdornment, ...rest @@ -119,8 +119,8 @@ export const SearchBarBase: ForwardRefExoticComponent = } }, [onChange, onClear]); - const placeholder = - defaultPlaceholder ?? + const label = + defaultLabel ?? `Search in ${configApi.getOptionalString('app.title') || 'Backstage'}`; const startAdornment = ( @@ -142,12 +142,13 @@ export const SearchBarBase: ForwardRefExoticComponent = return ( Date: Wed, 15 Mar 2023 17:15:53 -0500 Subject: [PATCH 05/12] fix(storybook): Fix styles of SearcBar Paper in StoryBook Signed-off-by: Carlos Esteban Lopez --- .../components/SearchBar/SearchBar.stories.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx index 88aed35f8d..559ae1776e 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx @@ -44,7 +44,7 @@ export default { export const Default = () => { return ( - + ); @@ -52,15 +52,23 @@ export const Default = () => { export const CustomPlaceholder = () => { return ( - + ); }; +export const CustomLabel = () => { + return ( + + + + ); +}; + export const Focused = () => { return ( - + {/* decision up to adopter, read https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md#no-autofocus */} {/* eslint-disable-next-line jsx-a11y/no-autofocus */} @@ -70,7 +78,7 @@ export const Focused = () => { export const WithoutClearButton = () => { return ( - + ); @@ -80,7 +88,7 @@ const useStyles = makeStyles({ search: { display: 'flex', justifyContent: 'space-between', - padding: '8px 0', + padding: '8px 16px', borderRadius: '50px', margin: 'auto', }, From cba74e9f9dd2c0717f1f11f852482778d340495c Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Thu, 16 Mar 2023 22:54:21 -0500 Subject: [PATCH 06/12] fix(search): Remove unused bar class & swap clear icon for clear text in search bar Signed-off-by: Carlos Esteban Lopez --- packages/app/src/components/search/SearchPage.tsx | 3 --- .../search-react/src/components/SearchBar/SearchBar.tsx | 8 ++++---- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx index 1aa15446c2..ecae90a06a 100644 --- a/packages/app/src/components/search/SearchPage.tsx +++ b/packages/app/src/components/search/SearchPage.tsx @@ -44,9 +44,6 @@ import { ToolSearchResultListItem } from '@backstage/plugin-explore'; import BuildIcon from '@material-ui/icons/Build'; const useStyles = makeStyles((theme: Theme) => ({ - bar: { - padding: theme.spacing(1), - }, filter: { '& + &': { marginTop: theme.spacing(2.5), diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx index 72d3559eb0..f4d89cb23f 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.tsx @@ -19,8 +19,8 @@ import { useApi, } from '@backstage/core-plugin-api'; import { IconButton, InputAdornment, TextField } from '@material-ui/core'; +import Button from '@material-ui/core/Button'; import { TextFieldProps } from '@material-ui/core/TextField'; -import ClearButton from '@material-ui/icons/Clear'; import SearchIcon from '@material-ui/icons/Search'; import React, { ChangeEvent, @@ -133,9 +133,9 @@ export const SearchBarBase: ForwardRefExoticComponent = const endAdornment = ( - - - + ); From d1ffbb5cceb01cbeae62c825f05cc77ca503ac9d Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Mon, 27 Mar 2023 11:18:02 -0500 Subject: [PATCH 07/12] chore(api-reports): Fix api-reports conflicts Signed-off-by: Carlos Esteban Lopez --- plugins/scaffolder/api-report.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/plugins/scaffolder/api-report.md b/plugins/scaffolder/api-report.md index 642afe5bf4..3495522310 100644 --- a/plugins/scaffolder/api-report.md +++ b/plugins/scaffolder/api-report.md @@ -140,7 +140,6 @@ export const EntityTagsPickerFieldExtension: FieldExtensionComponent_2< kinds?: string[] | undefined; showCounts?: boolean | undefined; helperText?: string | undefined; - kinds?: string[] | undefined; } >; @@ -151,7 +150,6 @@ export const EntityTagsPickerFieldSchema: FieldSchema< kinds?: string[] | undefined; showCounts?: boolean | undefined; helperText?: string | undefined; - kinds?: string[] | undefined; } >; From 46310ee03f65a10eb73584c7ffeec8daca05d189 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Mon, 17 Apr 2023 13:07:06 -0500 Subject: [PATCH 08/12] fix(search): Stop clear enter propagation Signed-off-by: Carlos Esteban Lopez --- .../src/components/SearchBar/SearchBar.tsx | 12 +++++++++++- .../src/components/SearchModal/SearchModal.tsx | 6 ++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx index f4d89cb23f..8fad4ef9a6 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.tsx @@ -133,7 +133,17 @@ export const SearchBarBase: ForwardRefExoticComponent = const endAdornment = ( - diff --git a/plugins/search/src/components/SearchModal/SearchModal.tsx b/plugins/search/src/components/SearchModal/SearchModal.tsx index 74e0111b3b..51dafda517 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.tsx @@ -103,7 +103,7 @@ const useStyles = makeStyles(theme => ({ viewResultsLink: { verticalAlign: '0.5em' }, })); -export const Modal = () => { +export const Modal = ({ toggleModal }: SearchModalChildrenProps) => { const classes = useStyles(); const navigate = useNavigate(); const { transitions } = useTheme(); @@ -204,7 +204,9 @@ export const SearchModal = (props: SearchModalProps) => { > {open && ( - {(children && children({ toggleModal })) ?? } + {(children && children({ toggleModal })) ?? ( + + )} )} From 87efd07490baccc95975b55785559f4dfcb690ca Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Wed, 19 Apr 2023 11:56:30 -0500 Subject: [PATCH 09/12] fix(search): Address Github PR comments Signed-off-by: Carlos Esteban Lopez --- .changeset/mighty-bears-glow.md | 8 ++++++-- .../search-react/src/components/SearchBar/SearchBar.tsx | 1 - plugins/search/src/components/SearchModal/SearchModal.tsx | 5 ----- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/.changeset/mighty-bears-glow.md b/.changeset/mighty-bears-glow.md index 125feb73c6..578e017866 100644 --- a/.changeset/mighty-bears-glow.md +++ b/.changeset/mighty-bears-glow.md @@ -1,6 +1,10 @@ --- -'@backstage/plugin-search-react': patch -'@backstage/plugin-search': patch +'@backstage/plugin-search-react': minor +'@backstage/plugin-search': minor --- Add close button & improve search input. + +MUI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. + +SearchBarBase's TextField's placeholder was changed into a label, tests relying on the placeholder should be updated to query for the label instead. diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx index 8fad4ef9a6..e36287b5b3 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.tsx @@ -164,7 +164,6 @@ export const SearchBarBase: ForwardRefExoticComponent = endAdornment: clearButton ? endAdornment : defaultEndAdornment, }} inputProps={{ - 'aria-label': 'Search', ...defaultInputProps, }} fullWidth={fullWidth} diff --git a/plugins/search/src/components/SearchModal/SearchModal.tsx b/plugins/search/src/components/SearchModal/SearchModal.tsx index 51dafda517..cfeabf3358 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.tsx @@ -89,11 +89,6 @@ const useStyles = makeStyles(theme => ({ marginTop: theme.spacing(1), }, }, - container: { - borderRadius: 30, - display: 'flex', - height: '2.4em', - }, input: { flex: 1, }, From 9e0f486ac245378711edabc6158fd522062b6377 Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Wed, 19 Apr 2023 12:33:08 -0500 Subject: [PATCH 10/12] fix(search): Fix broken tests Signed-off-by: Carlos Esteban Lopez --- .../components/SearchBar/SearchBar.test.tsx | 24 ++++++++++++++----- .../SearchModal/SearchModal.test.tsx | 2 +- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx index 30df27aba7..5846d02013 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx @@ -133,7 +133,9 @@ describe('SearchBar', () => { ); await waitFor(() => { - expect(screen.getByRole('textbox', { name: 'Search' })).toHaveValue(term); + expect( + screen.getByRole('textbox', { name: 'Search in Mock title' }), + ).toHaveValue(term); }); }); @@ -154,7 +156,9 @@ describe('SearchBar', () => { , ); - const textbox = screen.getByRole('textbox', { name: 'Search' }); + const textbox = screen.getByRole('textbox', { + name: 'Search in Mock title', + }); const value = 'value'; @@ -191,7 +195,9 @@ describe('SearchBar', () => { , ); - const textbox = screen.getByRole('textbox', { name: 'Search' }); + const textbox = screen.getByRole('textbox', { + name: 'Search in Mock title', + }); await waitFor(() => { expect(textbox).toHaveValue(term); @@ -249,7 +255,9 @@ describe('SearchBar', () => { , ); - const textbox = await screen.findByRole('textbox', { name: 'Search' }); + const textbox = await screen.findByRole('textbox', { + name: 'Search in Mock title', + }); const value = 'value'; @@ -293,7 +301,9 @@ describe('SearchBar', () => { , ); - const textbox = await screen.findByRole('textbox', { name: 'Search' }); + const textbox = await screen.findByRole('textbox', { + name: 'Search in Mock title', + }); const value = 'value'; @@ -343,7 +353,9 @@ describe('SearchBar', () => { , ); - const textbox = await screen.findByRole('textbox', { name: 'Search' }); + const textbox = await screen.findByRole('textbox', { + name: 'Search in Mock title', + }); let value = 'value'; diff --git a/plugins/search/src/components/SearchModal/SearchModal.test.tsx b/plugins/search/src/components/SearchModal/SearchModal.test.tsx index d24764f5d4..b45046c429 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.test.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.test.tsx @@ -166,6 +166,6 @@ describe('SearchModal', () => { }, ); - expect(screen.getByLabelText('Search')).toHaveFocus(); + expect(screen.getByLabelText('Search in Mock app')).toHaveFocus(); }); }); From a87f98b3858aa5d8b3434f3856b0a0aa1dba613b Mon Sep 17 00:00:00 2001 From: Carlos Esteban Lopez Date: Wed, 19 Apr 2023 18:45:28 -0500 Subject: [PATCH 11/12] fix(search): Revert placeholder & sync label & aria-label Signed-off-by: Carlos Esteban Lopez --- .changeset/mighty-bears-glow.md | 2 +- .../SearchAutocomplete.test.tsx | 6 ++--- .../components/SearchBar/SearchBar.test.tsx | 26 +++++-------------- .../src/components/SearchBar/SearchBar.tsx | 19 +++++++++----- .../SearchModal/SearchModal.test.tsx | 2 +- 5 files changed, 25 insertions(+), 30 deletions(-) diff --git a/.changeset/mighty-bears-glow.md b/.changeset/mighty-bears-glow.md index 578e017866..e540cdd8ae 100644 --- a/.changeset/mighty-bears-glow.md +++ b/.changeset/mighty-bears-glow.md @@ -7,4 +7,4 @@ Add close button & improve search input. MUI's Paper wrapping the SearchBar in the SearchPage was removed, we recommend users update their apps accordingly. -SearchBarBase's TextField's placeholder was changed into a label, tests relying on the placeholder should be updated to query for the label instead. +SearchBarBase's TextField's label support added & aria-label uses label string if present, tests relying on the default placeholder value should still work unless custom placeholder was given. diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx index 54deca5f5d..41f45e840d 100644 --- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx +++ b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx @@ -74,7 +74,7 @@ describe('SearchAutocomplete', () => { expect(screen.queryByText(options[1])).not.toBeInTheDocument(); expect(screen.queryByText(options[2])).not.toBeInTheDocument(); - await userEvent.click(screen.getByLabelText(`Search in ${title}`)); + await userEvent.click(screen.getByLabelText(`Search`)); await waitFor(() => { expect(screen.getByText(options[0])).toBeInTheDocument(); @@ -150,7 +150,7 @@ describe('SearchAutocomplete', () => { , ); - await userEvent.click(screen.getByLabelText(`Search in ${title}`)); + await userEvent.click(screen.getByLabelText(`Search`)); await userEvent.click(screen.getByText(options[0])); @@ -218,7 +218,7 @@ describe('SearchAutocomplete', () => { , ); - await userEvent.click(screen.getByLabelText(`Search in ${title}`)); + await userEvent.click(screen.getByLabelText(`Search`)); await waitFor(() => { expect(screen.getAllByTitle('Option icon')).toHaveLength(3); diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx index 5846d02013..e4859861d9 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx @@ -70,7 +70,7 @@ describe('SearchBar', () => { ); await waitFor(() => { - expect(screen.getByLabelText('Search in Mock title')).toBeInTheDocument(); + expect(screen.getByLabelText('Search')).toBeInTheDocument(); }); }); @@ -133,9 +133,7 @@ describe('SearchBar', () => { ); await waitFor(() => { - expect( - screen.getByRole('textbox', { name: 'Search in Mock title' }), - ).toHaveValue(term); + expect(screen.getByRole('textbox', { name: 'Search' })).toHaveValue(term); }); }); @@ -156,9 +154,7 @@ describe('SearchBar', () => { , ); - const textbox = screen.getByRole('textbox', { - name: 'Search in Mock title', - }); + const textbox = screen.getByRole('textbox', { name: 'Search' }); const value = 'value'; @@ -195,9 +191,7 @@ describe('SearchBar', () => { , ); - const textbox = screen.getByRole('textbox', { - name: 'Search in Mock title', - }); + const textbox = screen.getByRole('textbox', { name: 'Search' }); await waitFor(() => { expect(textbox).toHaveValue(term); @@ -255,9 +249,7 @@ describe('SearchBar', () => { , ); - const textbox = await screen.findByRole('textbox', { - name: 'Search in Mock title', - }); + const textbox = await screen.findByRole('textbox', { name: 'Search' }); const value = 'value'; @@ -301,9 +293,7 @@ describe('SearchBar', () => { , ); - const textbox = await screen.findByRole('textbox', { - name: 'Search in Mock title', - }); + const textbox = await screen.findByRole('textbox', { name: 'Search' }); const value = 'value'; @@ -353,9 +343,7 @@ describe('SearchBar', () => { , ); - const textbox = await screen.findByRole('textbox', { - name: 'Search in Mock title', - }); + const textbox = await screen.findByRole('textbox', { name: 'Search' }); let value = 'value'; diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx index e36287b5b3..913f515aaa 100644 --- a/plugins/search-react/src/components/SearchBar/SearchBar.tsx +++ b/plugins/search-react/src/components/SearchBar/SearchBar.tsx @@ -78,9 +78,10 @@ export const SearchBarBase: ForwardRefExoticComponent = clearButton = true, fullWidth = true, value: defaultValue, - label: defaultLabel, + label, + placeholder, inputProps: defaultInputProps = {}, - endAdornment: defaultEndAdornment, + endAdornment, ...rest } = props; @@ -119,8 +120,10 @@ export const SearchBarBase: ForwardRefExoticComponent = } }, [onChange, onClear]); - const label = - defaultLabel ?? + const ariaLabel: string | undefined = label ? undefined : 'Search'; + + const inputPlaceholder = + placeholder ?? `Search in ${configApi.getOptionalString('app.title') || 'Backstage'}`; const startAdornment = ( @@ -131,7 +134,7 @@ export const SearchBarBase: ForwardRefExoticComponent = ); - const endAdornment = ( + const clearButtonEndAdornment = (