diff --git a/.changeset/search-feet-flash.md b/.changeset/search-feet-flash.md index fb4a27975d..c7423f0317 100644 --- a/.changeset/search-feet-flash.md +++ b/.changeset/search-feet-flash.md @@ -1,21 +1,59 @@ --- -'@backstage/plugin-search-react': patch +'@backstage/plugin-search-react': minor --- -Add the term autocomplete functionality to the search bar with a `SearchAutocomplete` component. Additionally, we provide a `SearchAutocompleteDefaultOption` to render options with an icon, a primary text and a secondary text. +Provides search autocomplete functionality through a `SearchAutocomplete` component. +A `SearchAutocompleteDefaultOption` can also be used to render options with icons, primary texts, and secondary texts. Example: ```jsx -// import { SearchAutocomplete, SearchAutocompleteDefaultOption} from '@backstage/plugin-search-react'; - option.title} - renderOption={option => ( - } - primaryText={option.title} - secondaryText={option.text} - /> - )} -/> +import React, { ChangeEvent, useState, useCallback } from 'react'; +import useAsync from 'react-use/lib/useAsync'; + +import { Grid, Paper } from '@material-ui/core'; + +import { Page, Content } from '@backstage/core-components'; +import { SearchAutocomplete, SearchAutocompleteDefaultOption} from '@backstage/plugin-search-react'; + +const OptionsIcon = () => + +const SearchPage = () => { + const [inputValue, setInputValue] = useState(''); + + const options = useAsync(async () => { + // Gets and returns autocomplete options + }, [inputValue]) + + const useCallback((_event: ChangeEvent<{}>, newInputValue: string) => { + setInputValue(newInputValue); + }, [setInputValue]) + + return ( + + + + + + option.title} + renderOption={option => ( + } + primaryText={option.title} + secondaryText={option.text} + /> + )} + /> + + + + {'/* Filters and results are omitted */'} + + + ); +}; ``` diff --git a/.changeset/search-planets-flash.md b/.changeset/search-planets-flash.md index cc81b8c209..49431128f9 100644 --- a/.changeset/search-planets-flash.md +++ b/.changeset/search-planets-flash.md @@ -2,4 +2,4 @@ '@backstage/plugin-search': patch --- -Add `userParentContext` prop to the `SearchContextProvider`, this added property does not create a local context and consumes the parent if it already exists. +Use the new `inheritParentContextIfAvailable` search context property in `SearchModal` instead of manually checking if a parent context exists, this conditional statement was previously duplicated in more than one component like in `SearchBar` as well and is now only done in ` SearchContextProvider`. diff --git a/.changeset/search-zebras-tap.md b/.changeset/search-zebras-tap.md new file mode 100644 index 0000000000..4593478a51 --- /dev/null +++ b/.changeset/search-zebras-tap.md @@ -0,0 +1,7 @@ +--- +'@backstage/plugin-search-react': minor +--- + +We noticed a repeated check for the existence of a parent context before creating a child search context in more the one component such as Search Modal and Search Bar and to remove code duplication we extract the conditional to the context provider, now you can use it passing an `inheritParentContextIfAvailable` prop to the `SearchContextProvider`. + +Note: This added property does not create a local context if there is a parent context and in this case, you cannot use it together with `initialState`, it will result in a type error because the parent context is already initialized. diff --git a/.changeset/techdocs-feet-dress.md b/.changeset/techdocs-feet-dress.md new file mode 100644 index 0000000000..d2b2a625af --- /dev/null +++ b/.changeset/techdocs-feet-dress.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs': patch +--- + +Use the new `SearchAutocomplete` component in the `TechDocsSearch` component to maintain consistency across search experiences and avoid code duplication. diff --git a/plugins/search-react/api-report.md b/plugins/search-react/api-report.md index fcb0378ab0..7d5e64757b 100644 --- a/plugins/search-react/api-report.md +++ b/plugins/search-react/api-report.md @@ -8,7 +8,7 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { AsyncState } from 'react-use/lib/useAsync'; import { AutocompleteProps } from '@material-ui/lab'; -import { AutocompleteRenderInputParams } from '@material-ui/lab'; +import { ForwardRefExoticComponent } from 'react'; import { InputBaseProps } from '@material-ui/core'; import { JsonObject } from '@backstage/types'; import { ListItemTextProps } from '@material-ui/core'; @@ -78,13 +78,11 @@ export interface SearchApi { export const searchApiRef: ApiRef; // @public -export const SearchAutocomplete: < - T, - Multiple extends boolean | undefined, - DisableClearable extends boolean | undefined, - FreeSolo extends boolean | undefined, ->( - props: SearchAutocompleteProps, +export const SearchAutocomplete: SearchAutocompleteComponent; + +// @public +export type SearchAutocompleteComponent =