import from '@backstage/plugin-search-react'

Signed-off-by: Emma Indal <emma.indahl@gmail.com>

packages/app/src/components/search/SearchModal.tsx

@@ -41,8 +41,8 @@ import {
   SearchResult,
   SearchResultPager,
   SearchType,
-  useSearch,
 } from '@backstage/plugin-search';
+import { useSearch } from '@backstage/plugin-search-react';
 import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs';
 
 const useStyles = makeStyles(theme => ({

packages/app/src/components/search/SearchPage.tsx

@@ -36,8 +36,8 @@ import {
   SearchResult,
   SearchResultPager,
   SearchType,
-  useSearch,
 } from '@backstage/plugin-search';
+import { useSearch } from '@backstage/plugin-search-react';
 import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs';
 import { Grid, List, makeStyles, Paper, Theme } from '@material-ui/core';
 import React, { useContext } from 'react';

plugins/search/src/components/HomePageComponent/HomePageSearchBar.stories.tsx

@@ -15,7 +15,7 @@
  */
 
 import { rootRouteRef, HomePageSearchBar } from '../../plugin';
-import { searchApiRef } from '../../apis';
+import { searchApiRef } from '@backstage/plugin-search-react';
 import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { Grid, makeStyles } from '@material-ui/core';
 import React, { ComponentType } from 'react';

plugins/search/src/components/HomePageComponent/HomePageSearchBar.tsx

@@ -16,7 +16,6 @@
 
 import React, { useCallback, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-
 import { SearchBarBase, SearchBarBaseProps } from '../SearchBar';
 import { useNavigateToQuery } from '../util';
 

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

@@ -17,13 +17,15 @@
 import React from 'react';
 import { screen, render, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { SearchContextProvider } from '../SearchContext';
-
-import { SearchBar } from './SearchBar';
 import { configApiRef, analyticsApiRef } from '@backstage/core-plugin-api';
 import { ApiProvider, ConfigReader } from '@backstage/core-app-api';
-import { searchApiRef } from '../../apis';
 import { MockAnalyticsApi, TestApiRegistry } from '@backstage/test-utils';
+import {
+  SearchContextProvider,
+  searchApiRef,
+} from '@backstage/plugin-search-react';
+
+import { SearchBar } from './SearchBar';
 
 jest.mock('@backstage/core-plugin-api', () => ({
   ...jest.requireActual('@backstage/core-plugin-api'),

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

@@ -20,7 +20,6 @@ import React, {
   useState,
   useEffect,
   useCallback,
-  useContext,
 } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
@@ -34,10 +33,9 @@ import SearchIcon from '@material-ui/icons/Search';
 import ClearButton from '@material-ui/icons/Clear';
 
 import {
-  SearchContext,
   SearchContextProvider,
   useSearch,
-} from '../SearchContext';
+} from '@backstage/plugin-search-react';
 import { TrackSearch } from '../SearchTracker';
 
 /**
@@ -53,11 +51,6 @@ export type SearchBarBaseProps = Omit<InputBaseProps, 'onChange'> & {
   onChange: (value: string) => void;
 };
 
-const useSearchContextCheck = () => {
-  const context = useContext(SearchContext);
-  return context !== undefined;
-};
-
 /**
  * All search boxes exported by the search plugin are based on the <SearchBarBase />,
  * and this one is based on the <InputBase /> component from Material UI.
@@ -79,7 +72,7 @@ export const SearchBarBase = ({
 }: SearchBarBaseProps) => {
   const configApi = useApi(configApiRef);
   const [value, setValue] = useState<string>(defaultValue as string);
-  const hasSearchContext = useSearchContextCheck();
+  const hasSearchContext = useSearch();
 
   useEffect(() => {
     setValue(prevValue =>

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

@@ -18,8 +18,11 @@ import { TestApiProvider } from '@backstage/test-utils';
 import { screen, render, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { searchApiRef } from '../../apis';
-import { SearchContextProvider, useSearch } from '../SearchContext';
+import {
+  SearchContextProvider,
+  useSearch,
+  searchApiRef,
+} from '@backstage/plugin-search-react';
 import { SearchFilter } from './SearchFilter';
 
 const SearchContextFilterSpy = ({ name }: { name: string }) => {

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

@@ -21,7 +21,7 @@ import {
   AutocompleteGetTagProps,
   AutocompleteRenderInputParams,
 } from '@material-ui/lab';
-import { useSearch } from '../SearchContext';
+import { useSearch } from '@backstage/plugin-search-react';
 import { useAsyncFilterValues, useDefaultFilterValue } from './hooks';
 import { SearchFilterComponentProps } from './SearchFilter';
 

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

@@ -19,7 +19,7 @@ import { screen, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SearchFilter } from './SearchFilter';
 
-import { SearchContextProvider } from '../SearchContext';
+import { SearchContextProvider } from '@backstage/plugin-search-react';
 import { useApi } from '@backstage/core-plugin-api';
 
 jest.mock('@backstage/core-plugin-api', () => ({

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

@@ -30,7 +30,7 @@ import {
   AutocompleteFilter,
   SearchAutocompleteFilterProps,
 } from './SearchFilter.Autocomplete';
-import { useSearch } from '../SearchContext';
+import { useSearch } from '@backstage/plugin-search-react';
 import { useAsyncFilterValues, useDefaultFilterValue } from './hooks';
 
 const useStyles = makeStyles({

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

@@ -17,9 +17,12 @@ import React from 'react';
 import { ApiProvider } from '@backstage/core-app-api';
 import { TestApiRegistry } from '@backstage/test-utils';
 import { renderHook } from '@testing-library/react-hooks';
-import { SearchContextProvider, useSearch } from '../SearchContext';
+import {
+  SearchContextProvider,
+  useSearch,
+  searchApiRef,
+} from '@backstage/plugin-search-react';
 import { useDefaultFilterValue, useAsyncFilterValues } from './hooks';
-import { searchApiRef } from '../../apis';
 
 jest.useFakeTimers();
 

plugins/search/src/components/SearchFilter/hooks.ts

@@ -17,7 +17,7 @@
 import { useEffect, useRef } from 'react';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 import useDebounce from 'react-use/lib/useDebounce';
-import { useSearch } from '../SearchContext';
+import { useSearch } from '@backstage/plugin-search-react';
 
 /**
  * Utility hook for either asynchronously loading filter values from a given

plugins/search/src/components/SearchModal/SearchModal.test.tsx

@@ -21,7 +21,7 @@ import userEvent from '@testing-library/user-event';
 import { configApiRef } from '@backstage/core-plugin-api';
 import { ApiProvider, ConfigReader } from '@backstage/core-app-api';
 import { rootRouteRef } from '../../plugin';
-import { searchApiRef } from '../../apis';
+import { searchApiRef } from '@backstage/plugin-search-react';
 
 import { SearchModal } from './SearchModal';
 

plugins/search/src/components/SearchModal/SearchModal.tsx

@@ -31,7 +31,10 @@ import { makeStyles } from '@material-ui/core/styles';
 import { SearchBar } from '../SearchBar';
 import { DefaultResultListItem } from '../DefaultResultListItem';
 import { SearchResult } from '../SearchResult';
-import { SearchContextProvider, useSearch } from '../SearchContext';
+import {
+  SearchContextProvider,
+  useSearch,
+} from '@backstage/plugin-search-react';
 import { SearchResultPager } from '../SearchResultPager';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { Link, useContent } from '@backstage/core-components';

plugins/search/src/components/SearchPage/SearchPage.test.tsx

@@ -17,7 +17,7 @@
 import { renderInTestApp } from '@backstage/test-utils';
 import React from 'react';
 import { useLocation, useOutlet } from 'react-router';
-import { useSearch } from '../SearchContext';
+import { useSearch } from '@backstage/plugin-search-react';
 import { SearchPage } from './SearchPage';
 
 jest.mock('react-router', () => ({
@@ -33,8 +33,8 @@ const setTypesMock = jest.fn();
 const setFiltersMock = jest.fn();
 const setPageCursorMock = jest.fn();
 
-jest.mock('../SearchContext', () => ({
-  ...jest.requireActual('../SearchContext'),
+jest.mock('@backstage/plugin-search-react', () => ({
+  ...jest.requireActual('@backstage/plugin-search-react'),
   SearchContextProvider: jest
     .fn()
     .mockImplementation(({ children }) => children),
@@ -51,7 +51,7 @@ jest.mock('../SearchContext', () => ({
 }));
 
 jest.mock('../LegacySearchPage', () => ({
-  ...jest.requireActual('../SearchContext'),
+  ...jest.requireActual('@backstage/plugin-search-react'),
   LegacySearchPage: jest.fn().mockReturnValue('LegacySearchPageMock'),
 }));
 

plugins/search/src/components/SearchPage/SearchPage.tsx

@@ -18,7 +18,10 @@ import React, { useEffect } from 'react';
 import usePrevious from 'react-use/lib/usePrevious';
 import qs from 'qs';
 import { useLocation, useOutlet } from 'react-router';
-import { SearchContextProvider, useSearch } from '../SearchContext';
+import {
+  SearchContextProvider,
+  useSearch,
+} from '@backstage/plugin-search-react';
 import { JsonObject } from '@backstage/types';
 import { LegacySearchPage } from '../LegacySearchPage';
 

plugins/search/src/components/SearchResult/SearchResult.test.tsx

@@ -17,11 +17,11 @@
 import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
 import React from 'react';
-import { useSearch } from '../SearchContext';
+import { useSearch } from '@backstage/plugin-search-react';
 import { SearchResult } from './SearchResult';
 
-jest.mock('../SearchContext', () => ({
-  ...jest.requireActual('../SearchContext'),
+jest.mock('@backstage/plugin-search-react', () => ({
+  ...jest.requireActual('@backstage/plugin-search-react'),
   useSearch: jest.fn().mockReturnValue({
     result: {},
   }),

plugins/search/src/components/SearchResult/SearchResult.tsx

@@ -21,7 +21,7 @@ import {
 } from '@backstage/core-components';
 import { SearchResult } from '@backstage/plugin-search-common';
 import React from 'react';
-import { useSearch } from '../SearchContext';
+import { useSearch } from '@backstage/plugin-search-react';
 
 type Props = {
   children: (results: { results: SearchResult[] }) => JSX.Element;

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

@@ -18,11 +18,11 @@ import { renderInTestApp } from '@backstage/test-utils';
 import { waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { useSearch } from '../SearchContext';
+import { useSearch } from '@backstage/plugin-search-react';
 import { SearchResultPager } from './SearchResultPager';
 
-jest.mock('../SearchContext', () => ({
-  ...jest.requireActual('../SearchContext'),
+jest.mock('@backstage/plugin-search-react', () => ({
+  ...jest.requireActual('@backstage/plugin-search-react'),
   useSearch: jest.fn().mockReturnValue({
     result: {},
   }),

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

@@ -18,7 +18,7 @@ import { Button, makeStyles } from '@material-ui/core';
 import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
 import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
 import React from 'react';
-import { useSearch } from '../SearchContext';
+import { useSearch } from '@backstage/plugin-search-react';
 
 const useStyles = makeStyles(theme => ({
   root: {

plugins/search/src/components/SearchTracker/SearchTracker.tsx

@@ -16,7 +16,7 @@
 
 import React, { useEffect } from 'react';
 import { useAnalytics } from '@backstage/core-plugin-api';
-import { useSearch } from '../SearchContext';
+import { useSearch } from '@backstage/plugin-search-react';
 
 /**
  * Capture search event on term change.

plugins/search/src/components/SearchType/SearchType.Accordion.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { cloneElement, Fragment, useEffect, useState } from 'react';
-import { useSearch } from '../SearchContext';
+import { useSearch } from '@backstage/plugin-search-react';
 import {
   Accordion,
   AccordionSummary,

plugins/search/src/components/SearchType/SearchType.Tabs.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect } from 'react';
-import { useSearch } from '../SearchContext';
+import { useSearch } from '@backstage/plugin-search-react';
 import { BackstageTheme } from '@backstage/theme';
 import { makeStyles, Tab, Tabs } from '@material-ui/core';
 

plugins/search/src/components/SearchType/SearchType.test.tsx

@@ -18,7 +18,7 @@ import { useApi } from '@backstage/core-plugin-api';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { SearchContextProvider } from '../SearchContext';
+import { SearchContextProvider } from '@backstage/plugin-search-react';
 import { SearchType } from './SearchType';
 
 jest.mock('@backstage/core-plugin-api', () => ({

plugins/search/src/components/SearchType/SearchType.tsx

@@ -30,7 +30,7 @@ import {
   SearchTypeAccordionProps,
 } from './SearchType.Accordion';
 import { SearchTypeTabs, SearchTypeTabsProps } from './SearchType.Tabs';
-import { useSearch } from '../SearchContext';
+import { useSearch } from '@backstage/plugin-search-react';
 
 const useStyles = makeStyles(theme => ({
   label: {

plugins/search/src/plugin.ts

@@ -14,7 +14,8 @@
  * limitations under the License.
  */
 
-import { SearchClient, searchApiRef } from './apis';
+import { SearchClient } from './apis';
+import { searchApiRef } from '@backstage/plugin-search-react';
 import {
   createApiFactory,
   createPlugin,