refactor: move configApi to SearchContext

Signed-off-by: Enrico Alvarenga <enricomalvarenga@gmail.com>

plugins/search/config.d.ts

@@ -21,12 +21,12 @@ export interface Config {
      */
     search?: {
       /**
-       * An object representing the initial state configuration for the SearchPage
-       * component. By configuring and modifying the values of the initialState
-       * object attributes, you can customize the initial state of the search component
+       * An object representing the default search query configuration.
+       * By configuring and modifying the values of this object,
+       * you can customize the default values of the search component
        * and define how it behaves when it is first loaded or reset.
        */
-      initialState?: {
+      query?: {
         /**
          * A number indicating the maximum number of results to be returned
          * per page during pagination.

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

@@ -14,41 +14,18 @@
  * limitations under the License.
  */
 
-import {
-  MockConfigApi,
-  TestApiProvider,
-  renderInTestApp,
-} from '@backstage/test-utils';
+import { renderInTestApp } from '@backstage/test-utils';
 import React from 'react';
 import { useLocation } from 'react-router-dom';
-import {
-  type SearchContextState,
-  useSearch,
-  getSearchContextInitialStateDefaults,
-} from '@backstage/plugin-search-react';
+import { useSearch } from '@backstage/plugin-search-react';
 import { SearchPage } from './SearchPage';
-import { configApiRef } from '@backstage/core-plugin-api';
-import type { JsonObject } from '@backstage/types';
-
-const TestingContext = React.createContext<SearchContextState>(
-  getSearchContextInitialStateDefaults(),
-);
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useLocation: jest.fn().mockReturnValue({
     search: '',
   }),
-  useOutlet: jest.fn().mockImplementation(() => (
-    <TestingContext.Consumer>
-      {value => (
-        <>
-          <h1>Route Children</h1>
-          <div>Page Limit: {value.pageLimit} </div>
-        </>
-      )}
-    </TestingContext.Consumer>
-  )),
+  useOutlet: jest.fn().mockReturnValue('Route Children'),
 }));
 
 const setTermMock = jest.fn();
@@ -60,11 +37,7 @@ jest.mock('@backstage/plugin-search-react', () => ({
   ...jest.requireActual('@backstage/plugin-search-react'),
   SearchContextProvider: jest
     .fn()
-    .mockImplementation(({ initialState, children }) => (
-      <TestingContext.Provider value={initialState}>
-        {children}
-      </TestingContext.Provider>
-    )),
+    .mockImplementation(({ children }) => children),
   useSearch: jest.fn().mockReturnValue({
     term: '',
     setTerm: (term: any) => setTermMock(term),
@@ -77,13 +50,6 @@ jest.mock('@backstage/plugin-search-react', () => ({
   }),
 }));
 
-const renderSearchPageWithConfig = (config: JsonObject = {}) =>
-  renderInTestApp(
-    <TestApiProvider apis={[[configApiRef, new MockConfigApi(config)]]}>
-      <SearchPage />
-    </TestApiProvider>,
-  );
-
 describe('SearchPage', () => {
   const origReplaceState = window.history.replaceState;
 
@@ -110,7 +76,7 @@ describe('SearchPage', () => {
     });
 
     // When we render the page...
-    await renderSearchPageWithConfig();
+    await renderInTestApp(<SearchPage />);
 
     // Then search context should be set with these values...
     expect(setTermMock).toHaveBeenCalledWith(expectedTerm);
@@ -120,7 +86,7 @@ describe('SearchPage', () => {
   });
 
   it('renders provided router element', async () => {
-    const { getByText } = await renderSearchPageWithConfig();
+    const { getByText } = await renderInTestApp(<SearchPage />);
 
     expect(getByText('Route Children')).toBeInTheDocument();
   });
@@ -140,27 +106,9 @@ describe('SearchPage', () => {
       '?query=bieber&types[]=software-catalog&pageCursor=SOMEPAGE&filters[anyKey]=anyValue',
     );
 
-    await renderSearchPageWithConfig();
+    await renderInTestApp(<SearchPage />);
 
     const calls = (window.history.replaceState as jest.Mock).mock.calls[0];
     expect(calls[2]).toContain(expectedLocation);
   });
-
-  it('initializes the SearchPage with a custom page limit', async () => {
-    const { getByText } = await renderSearchPageWithConfig({
-      app: {
-        search: {
-          initialState: {
-            pageLimit: 50,
-          },
-        },
-      },
-    });
-
-    const calls = (window.history.replaceState as jest.Mock).mock.calls[0];
-    const expectedLocation = encodeURI('?query=&pageCursor=');
-    expect(calls[2]).toContain(expectedLocation);
-
-    expect(getByText('Page Limit: 50')).toBeInTheDocument();
-  });
 });

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

@@ -21,10 +21,8 @@ import { useLocation, useOutlet } from 'react-router-dom';
 import {
   SearchContextProvider,
   useSearch,
-  getSearchContextInitialStateDefaults,
 } from '@backstage/plugin-search-react';
 import { JsonObject } from '@backstage/types';
-import { configApiRef, useApi } from '@backstage/core-plugin-api';
 
 export const UrlUpdater = () => {
   const location = useLocation();
@@ -93,15 +91,9 @@ export const UrlUpdater = () => {
  */
 export const SearchPage = () => {
   const outlet = useOutlet();
-  const configApi = useApi(configApiRef);
-
-  const initialState = {
-    ...getSearchContextInitialStateDefaults(),
-    pageLimit: configApi.getOptionalNumber('app.search.initialState.pageLimit'),
-  };
 
   return (
-    <SearchContextProvider initialState={initialState}>
+    <SearchContextProvider>
       <UrlUpdater />
       {outlet}
     </SearchContextProvider>