Split storybook SearchContextProvider

Signed-off-by: Vincenzo Scamporlino <me@vinzscam.dev>

plugins/search/src/components/SearchContext/SearchContextForStorybook.stories.tsx

@@ -16,7 +16,7 @@
 import { ApiProvider } from '@backstage/core-app-api';
 import { SearchResultSet } from '@backstage/search-common';
 import { TestApiRegistry } from '@backstage/test-utils';
-import React, { ComponentProps } from 'react';
+import React, { ComponentProps, PropsWithChildren } from 'react';
 import { searchApiRef } from '../../apis';
 import { SearchContextProvider as RealSearchContextProvider } from './SearchContext';
 
@@ -33,13 +33,16 @@ type QueryResultProps = {
 export const SearchContextProvider = (
   props: ComponentProps<typeof RealSearchContextProvider> & QueryResultProps,
 ) => {
-  const { mockedResults, ...contextProps } = props;
-  const query: any = () => Promise.resolve(mockedResults || {});
-  const apiRegistry = TestApiRegistry.from([searchApiRef, { query }]);
-
   return (
-    <ApiProvider apis={apiRegistry}>
-      <RealSearchContextProvider {...contextProps} />
-    </ApiProvider>
+    <SearchApiProvider {...props}>
+      <RealSearchContextProvider children={props.children} />
+    </SearchApiProvider>
   );
 };
+
+export function SearchApiProvider(props: PropsWithChildren<QueryResultProps>) {
+  const { mockedResults, children } = props;
+  const query: any = () => Promise.resolve(mockedResults || {});
+  const apiRegistry = TestApiRegistry.from([searchApiRef, { query }]);
+  return <ApiProvider apis={apiRegistry} children={children} />;
+}

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

@@ -16,10 +16,9 @@
 
 import { wrapInTestApp } from '@backstage/test-utils';
 import { Button } from '@material-ui/core';
-import React, { ComponentType } from 'react';
+import React, { ComponentType, useState } from 'react';
 import { rootRouteRef } from '../../plugin';
-import { useSearch } from '../SearchContext';
-import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories';
+import { SearchApiProvider } from '../SearchContext/SearchContextForStorybook.stories';
 import { SearchModal } from './SearchModal';
 
 const mockResults = {
@@ -57,23 +56,32 @@ export default {
   decorators: [
     (Story: ComponentType<{}>) =>
       wrapInTestApp(
-        <SearchContextProvider mockedResults={mockResults}>
+        <SearchApiProvider mockedResults={mockResults}>
           <Story />
-        </SearchContextProvider>,
+        </SearchApiProvider>,
         { mountedRoutes: { '/search': rootRouteRef } },
       ),
   ],
 };
 
 export const Default = () => {
-  const { open, toggleModal } = useSearch();
+  const [state, setState] = useState({ hidden: true, opened: false });
+  const handleToggleModal = () =>
+    setState(previousState => ({
+      opened: true,
+      hidden: !previousState.hidden,
+    }));
 
   return (
     <>
-      <Button variant="contained" color="primary" onClick={toggleModal}>
+      <Button variant="contained" color="primary" onClick={handleToggleModal}>
         Toggle Search Modal
       </Button>
-      <SearchModal open={open} toggleModal={toggleModal} />
+      <SearchModal
+        open={state.opened}
+        hidden={state.hidden}
+        toggleModal={handleToggleModal}
+      />
     </>
   );
 };