apply review feedback

Signed-off-by: Anders Näsman <andersn@spotify.com>

plugins/search/api-report.md

@@ -99,7 +99,7 @@ export const SearchBarBase: ({
   inputProps: defaultInputProps,
   endAdornment: defaultEndAdornment,
   ...props
-}: SearchBarBaseProps) => JSX.Element;
+}: SearchBarBaseProps_2) => JSX.Element;
 
 // @public @deprecated
 export type SearchBarBaseProps = Omit<InputBaseProps, 'onChange'> & {

plugins/search/src/components/SearchBar/SearchBar.tsx

@@ -14,36 +14,20 @@
  * limitations under the License.
  */
 
-import React, {
-  ChangeEvent,
-  KeyboardEvent,
-  useState,
-  useEffect,
-  useCallback,
-} from 'react';
-import useDebounce from 'react-use/lib/useDebounce';
-import { configApiRef, useApi } from '@backstage/core-plugin-api';
-import {
-  InputBase,
-  InputBaseProps,
-  InputAdornment,
-  IconButton,
-} from '@material-ui/core';
-import SearchIcon from '@material-ui/icons/Search';
-import ClearButton from '@material-ui/icons/Clear';
+import React, { useCallback } from 'react';
+
+import { InputBaseProps } from '@material-ui/core';
 
 import {
-  SearchContextProvider,
+  SearchBarBase as RealSearchBarBase,
   useSearch,
-  useSearchContextCheck,
-  TrackSearch,
 } from '@backstage/plugin-search-react';
 
 /**
  * Props for {@link SearchBarBase}.
  *
  * @public
- * @deprecated Moved to `@backstage/plugin-search-react`.
+ * @deprecated Import from `@backstage/plugin-search-react` instead.
  */
 export type SearchBarBaseProps = Omit<InputBaseProps, 'onChange'> & {
   debounceTime?: number;
@@ -59,102 +43,15 @@ export type SearchBarBaseProps = Omit<InputBaseProps, 'onChange'> & {
  * Recommended if you don't use Search Provider or Search Context.
  *
  * @public
- * @deprecated Moved to `@backstage/plugin-search-react`.
+ * @deprecated Import from `@backstage/plugin-search-react` instead.
  */
-export const SearchBarBase = ({
-  onChange,
-  onKeyDown,
-  onSubmit,
-  debounceTime = 200,
-  clearButton = true,
-  fullWidth = true,
-  value: defaultValue,
-  inputProps: defaultInputProps = {},
-  endAdornment: defaultEndAdornment,
-  ...props
-}: SearchBarBaseProps) => {
-  const configApi = useApi(configApiRef);
-  const [value, setValue] = useState<string>(defaultValue as string);
-  const hasSearchContext = useSearchContextCheck();
-
-  useEffect(() => {
-    setValue(prevValue =>
-      prevValue !== defaultValue ? (defaultValue as string) : prevValue,
-    );
-  }, [defaultValue]);
-
-  useDebounce(() => onChange(value), debounceTime, [value]);
-
-  const handleChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      setValue(e.target.value);
-    },
-    [setValue],
-  );
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLInputElement>) => {
-      if (onKeyDown) onKeyDown(e);
-      if (onSubmit && e.key === 'Enter') {
-        onSubmit();
-      }
-    },
-    [onKeyDown, onSubmit],
-  );
-
-  const handleClear = useCallback(() => {
-    onChange('');
-  }, [onChange]);
-
-  const placeholder = `Search in ${
-    configApi.getOptionalString('app.title') || 'Backstage'
-  }`;
-
-  const startAdornment = (
-    <InputAdornment position="start">
-      <IconButton aria-label="Query" disabled>
-        <SearchIcon />
-      </IconButton>
-    </InputAdornment>
-  );
-
-  const endAdornment = (
-    <InputAdornment position="end">
-      <IconButton aria-label="Clear" onClick={handleClear}>
-        <ClearButton />
-      </IconButton>
-    </InputAdornment>
-  );
-
-  const searchBar = (
-    <TrackSearch>
-      <InputBase
-        data-testid="search-bar-next"
-        value={value}
-        placeholder={placeholder}
-        startAdornment={startAdornment}
-        endAdornment={clearButton ? endAdornment : defaultEndAdornment}
-        inputProps={{ 'aria-label': 'Search', ...defaultInputProps }}
-        fullWidth={fullWidth}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        {...props}
-      />
-    </TrackSearch>
-  );
-
-  return hasSearchContext ? (
-    searchBar
-  ) : (
-    <SearchContextProvider>{searchBar}</SearchContextProvider>
-  );
-};
+export const SearchBarBase = RealSearchBarBase;
 
 /**
  * Props for {@link SearchBar}.
  *
  * @public
- * @deprecated Moved to `@backstage/plugin-search-react`.
+ * @deprecated Import from `@backstage/plugin-search-react` instead.
  */
 export type SearchBarProps = Partial<SearchBarBaseProps>;
 
@@ -162,7 +59,7 @@ export type SearchBarProps = Partial<SearchBarBaseProps>;
  * Recommended search bar when you use the Search Provider or Search Context.
  *
  * @public
- * @deprecated Moved to `@backstage/plugin-search-react`.
+ * @deprecated Import from `@backstage/plugin-search-react` instead.
  */
 export const SearchBar = ({ onChange, ...props }: SearchBarProps) => {
   const { term, setTerm } = useSearch();

plugins/search/src/components/SearchFilter/SearchFilter.tsx

@@ -25,7 +25,7 @@ import {
 
 /**
  * @public
- * @deprecated Moved to `@backstage/plugin-search-react`.
+ * @deprecated Import from `@backstage/plugin-search-react` instead.
  */
 export type SearchFilterComponentProps = {
   className?: string;
@@ -48,7 +48,7 @@ export type SearchFilterComponentProps = {
 
 /**
  * @public
- * @deprecated Moved to `@backstage/plugin-search-react`.
+ * @deprecated Import from `@backstage/plugin-search-react` instead.
  */
 export type SearchFilterWrapperProps = SearchFilterComponentProps & {
   component: (props: SearchFilterComponentProps) => ReactElement;
@@ -57,7 +57,7 @@ export type SearchFilterWrapperProps = SearchFilterComponentProps & {
 
 /**
  * @public
- * @deprecated Moved to `@backstage/plugin-search-react`.
+ * @deprecated Import from `@backstage/plugin-search-react` instead.
  */
 const SearchFilter = ({
   component: Element,
@@ -65,7 +65,7 @@ const SearchFilter = ({
 }: SearchFilterWrapperProps) => <Element {...props} />;
 
 /**
- * @deprecated Moved to `@backstage/plugin-search-react`.
+ * @deprecated Import from `@backstage/plugin-search-react` instead.
  */
 SearchFilter.Checkbox = (
   props: Omit<SearchFilterWrapperProps, 'component'> &
@@ -73,7 +73,7 @@ SearchFilter.Checkbox = (
 ) => <SearchFilter {...props} component={CheckboxFilter} />;
 
 /**
- * @deprecated Moved to `@backstage/plugin-search-react`.
+ * @deprecated Import from `@backstage/plugin-search-react` instead.
  */
 SearchFilter.Select = (
   props: Omit<SearchFilterWrapperProps, 'component'> &
@@ -86,7 +86,7 @@ SearchFilter.Select = (
  * which returns values may be provided instead.
  *
  * @public
- * @deprecated Moved to `@backstage/plugin-search-react`.
+ * @deprecated Import from `@backstage/plugin-search-react` instead.
  */
 SearchFilter.Autocomplete = (props: SearchAutocompleteFilterProps) => (
   <SearchFilter {...props} component={AutocompleteFilter} />

plugins/search/src/components/SearchResultPager/SearchResultPager.tsx

@@ -31,7 +31,7 @@ const useStyles = makeStyles(theme => ({
 
 /**
  * @public
- * @deprecated Moved to `@backstage/plugin-search-react`.
+ * @deprecated Import from `@backstage/plugin-search-react` instead.
  */
 export const SearchResultPager = () => {
   const { fetchNextPage, fetchPreviousPage } = useSearch();