Refactor search plugin stories to use a shared mock search context provider.

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>

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

@@ -25,6 +25,17 @@ import { MemoryRouter } from 'react-router';
 export default {
   title: 'Plugins/Search/DefaultResultListItem',
   component: DefaultResultListItem,
+  decorators: [
+    (Story: () => JSX.Element) => (
+      <MemoryRouter>
+        <Grid container direction="row">
+          <Grid item xs={12}>
+            <Story />
+          </Grid>
+        </Grid>
+      </MemoryRouter>
+    ),
+  ],
 };
 
 const mockSearchResult = {
@@ -35,54 +46,34 @@ const mockSearchResult = {
 };
 
 export const Default = () => {
-  return (
-    <MemoryRouter>
-      <Grid container direction="row">
-        <Grid item xs={12}>
-          <DefaultResultListItem result={mockSearchResult} />
-        </Grid>
-      </Grid>
-    </MemoryRouter>
-  );
+  return <DefaultResultListItem result={mockSearchResult} />;
 };
 
 export const WithIcon = () => {
   return (
-    <MemoryRouter>
-      <Grid container direction="row">
-        <Grid item xs={12}>
-          <DefaultResultListItem
-            result={mockSearchResult}
-            icon={<FindInPageIcon color="primary" />}
-          />
-        </Grid>
-      </Grid>
-    </MemoryRouter>
+    <DefaultResultListItem
+      result={mockSearchResult}
+      icon={<FindInPageIcon color="primary" />}
+    />
   );
 };
 
 export const WithSecondaryAction = () => {
   return (
-    <MemoryRouter>
-      <Grid container direction="row">
-        <Grid item xs={12}>
-          <DefaultResultListItem
-            result={mockSearchResult}
-            secondaryAction={
-              <Button
-                to="#"
-                size="small"
-                aria-label="owner"
-                variant="text"
-                startIcon={<GroupIcon />}
-                style={{ textTransform: 'lowercase' }}
-              >
-                {mockSearchResult.owner}
-              </Button>
-            }
-          />
-        </Grid>
-      </Grid>
-    </MemoryRouter>
+    <DefaultResultListItem
+      result={mockSearchResult}
+      secondaryAction={
+        <Button
+          to="#"
+          size="small"
+          aria-label="owner"
+          variant="text"
+          startIcon={<GroupIcon />}
+          style={{ textTransform: 'lowercase' }}
+        >
+          {mockSearchResult.owner}
+        </Button>
+      }
+    />
   );
 };

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

@@ -14,88 +14,58 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { Paper, Grid, makeStyles } from '@material-ui/core';
-import { SearchBar, SearchContext } from '../index';
-import { MemoryRouter } from 'react-router';
+import { SearchBar } from '../index';
+import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories';
 
 export default {
   title: 'Plugins/Search/SearchBar',
   component: SearchBar,
-};
-
-const defaultValue = {
-  term: '',
-  setTerm: () => {},
+  decorators: [
+    (Story: ComponentType<{}>) => (
+      <SearchContextProvider>
+        <Grid container direction="row">
+          <Grid item xs={12}>
+            <Story />
+          </Grid>
+        </Grid>
+      </SearchContextProvider>
+    ),
+  ],
 };
 
 export const Default = () => {
   return (
-    <MemoryRouter>
-      {/* @ts-ignore (defaultValue requires more than what is used here) */}
-      <SearchContext.Provider value={defaultValue}>
-        <Grid container direction="row">
-          <Grid item xs={12}>
-            <Paper style={{ padding: '8px 0' }}>
-              <SearchBar />
-            </Paper>
-          </Grid>
-        </Grid>
-      </SearchContext.Provider>
-    </MemoryRouter>
+    <Paper style={{ padding: '8px 0' }}>
+      <SearchBar />
+    </Paper>
   );
 };
 
 export const CustomPlaceholder = () => {
   return (
-    <MemoryRouter>
-      {/* @ts-ignore (defaultValue requires more than what is used here) */}
-      <SearchContext.Provider value={defaultValue}>
-        <Grid container direction="row">
-          <Grid item xs={12}>
-            <Paper style={{ padding: '8px 0' }}>
-              <SearchBar placeholder="This is a custom placeholder" />
-            </Paper>
-          </Grid>
-        </Grid>
-      </SearchContext.Provider>
-    </MemoryRouter>
+    <Paper style={{ padding: '8px 0' }}>
+      <SearchBar placeholder="This is a custom placeholder" />
+    </Paper>
   );
 };
 
 export const Focused = () => {
   return (
-    <MemoryRouter>
-      {/* @ts-ignore (defaultValue requires more than what is used here) */}
-      <SearchContext.Provider value={defaultValue}>
-        <Grid container direction="row">
-          <Grid item xs={12}>
-            <Paper style={{ padding: '8px 0' }}>
-              {/* decision up to adopter, read https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md#no-autofocus */}
-              {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
-              <SearchBar autoFocus />
-            </Paper>
-          </Grid>
-        </Grid>
-      </SearchContext.Provider>
-    </MemoryRouter>
+    <Paper style={{ padding: '8px 0' }}>
+      {/* decision up to adopter, read https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md#no-autofocus */}
+      {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
+      <SearchBar autoFocus />
+    </Paper>
   );
 };
 
 export const WithoutClearButton = () => {
   return (
-    <MemoryRouter>
-      {/* @ts-ignore (defaultValue requires more than what is used here) */}
-      <SearchContext.Provider value={defaultValue}>
-        <Grid container direction="row">
-          <Grid item xs={12}>
-            <Paper style={{ padding: '8px 0' }}>
-              <SearchBar clearButton={false} />
-            </Paper>
-          </Grid>
-        </Grid>
-      </SearchContext.Provider>
-    </MemoryRouter>
+    <Paper style={{ padding: '8px 0' }}>
+      <SearchBar clearButton={false} />
+    </Paper>
   );
 };
 
@@ -112,17 +82,8 @@ const useStyles = makeStyles({
 export const CustomStyles = () => {
   const classes = useStyles();
   return (
-    <MemoryRouter>
-      {/* @ts-ignore (defaultValue requires more than what is used here) */}
-      <SearchContext.Provider value={defaultValue}>
-        <Grid container direction="row">
-          <Grid item xs={12}>
-            <Paper className={classes.search}>
-              <SearchBar />
-            </Paper>
-          </Grid>
-        </Grid>
-      </SearchContext.Provider>
-    </MemoryRouter>
+    <Paper className={classes.search}>
+      <SearchBar />
+    </Paper>
   );
 };

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

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+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 { searchApiRef } from '../../apis';
+import { SearchContextProvider as RealSearchContextProvider } from './SearchContext';
+
+type QueryResultProps = {
+  mockedResults?: SearchResultSet;
+};
+
+/**
+ * Utility context provider only for use in Storybook stories.
+ */
+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>
+  );
+};

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

@@ -14,56 +14,45 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { Grid, Paper } from '@material-ui/core';
-import { SearchFilter, SearchContext } from '../index';
-import { MemoryRouter } from 'react-router';
+import { SearchFilter } from '../index';
+import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories';
 
 export default {
   title: 'Plugins/Search/SearchFilter',
   component: SearchFilter,
-};
-
-const defaultValue = {
-  filters: {},
+  decorators: [
+    (Story: ComponentType<{}>) => (
+      <SearchContextProvider>
+        <Grid container direction="row">
+          <Grid item xs={4}>
+            <Story />
+          </Grid>
+        </Grid>
+      </SearchContextProvider>
+    ),
+  ],
 };
 
 export const CheckBoxFilter = () => {
   return (
-    <MemoryRouter>
-      {/* @ts-ignore (defaultValue requires more than what is used here) */}
-      <SearchContext.Provider value={defaultValue}>
-        <Grid container direction="row">
-          <Grid item xs={4}>
-            <Paper style={{ padding: 10 }}>
-              <SearchFilter.Checkbox
-                name="Search Checkbox Filter"
-                values={['value1', 'value2']}
-              />
-            </Paper>
-          </Grid>
-        </Grid>
-      </SearchContext.Provider>
-    </MemoryRouter>
+    <Paper style={{ padding: 10 }}>
+      <SearchFilter.Checkbox
+        name="Search Checkbox Filter"
+        values={['value1', 'value2']}
+      />
+    </Paper>
   );
 };
 
 export const SelectFilter = () => {
   return (
-    <MemoryRouter>
-      {/* @ts-ignore (defaultValue requires more than what is used here) */}
-      <SearchContext.Provider value={defaultValue}>
-        <Grid container direction="row">
-          <Grid item xs={4}>
-            <Paper style={{ padding: 10 }}>
-              <SearchFilter.Select
-                name="Search Select Filter"
-                values={['value1', 'value2']}
-              />
-            </Paper>
-          </Grid>
-        </Grid>
-      </SearchContext.Provider>
-    </MemoryRouter>
+    <Paper style={{ padding: 10 }}>
+      <SearchFilter.Select
+        name="Search Select Filter"
+        values={['value1', 'value2']}
+      />
+    </Paper>
   );
 };

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

@@ -16,60 +16,50 @@
 
 import React, { ComponentType } from 'react';
 import { Button } from '@material-ui/core';
-import { ApiProvider, ApiRegistry } from '@backstage/core-app-api';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { SearchModal } from '../index';
-import { useSearch, SearchContextProvider } from '../SearchContext';
-import { searchApiRef } from '../../apis';
+import { useSearch } from '../SearchContext';
 import { rootRouteRef } from '../../plugin';
+import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories';
 
-const mockSearchApi = {
-  query: () =>
-    Promise.resolve({
-      results: [
-        {
-          type: 'custom-result-item',
-          document: {
-            location: 'search/search-result-1',
-            title: 'Search Result 1',
-            text: 'some text from the search result',
-          },
-        },
-        {
-          type: 'no-custom-result-item',
-          document: {
-            location: 'search/search-result-2',
-            title: 'Search Result 2',
-            text: 'some text from the search result',
-          },
-        },
-        {
-          type: 'no-custom-result-item',
-          document: {
-            location: 'search/search-result-3',
-            title: 'Search Result 3',
-            text: 'some text from the search result',
-          },
-        },
-      ],
-    }),
+const mockResults = {
+  results: [
+    {
+      type: 'custom-result-item',
+      document: {
+        location: 'search/search-result-1',
+        title: 'Search Result 1',
+        text: 'some text from the search result',
+      },
+    },
+    {
+      type: 'no-custom-result-item',
+      document: {
+        location: 'search/search-result-2',
+        title: 'Search Result 2',
+        text: 'some text from the search result',
+      },
+    },
+    {
+      type: 'no-custom-result-item',
+      document: {
+        location: 'search/search-result-3',
+        title: 'Search Result 3',
+        text: 'some text from the search result',
+      },
+    },
+  ],
 };
 
-const apiRegistry = () => ApiRegistry.from([[searchApiRef, mockSearchApi]]);
-
 export default {
   title: 'Plugins/Search/SearchModal',
   component: SearchModal,
   decorators: [
     (Story: ComponentType<{}>) =>
       wrapInTestApp(
-        <>
-          <ApiProvider apis={apiRegistry()}>
-            <SearchContextProvider>
-              <Story />
-            </SearchContextProvider>
-          </ApiProvider>
-        </>,
+        <SearchContextProvider mockedResults={mockResults}>
+          <Story />
+        </SearchContextProvider>,
         { mountedRoutes: { '/search': rootRouteRef } },
       ),
   ],

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

@@ -14,83 +14,82 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { List, ListItem } from '@material-ui/core';
-import { SearchResult, SearchContext, DefaultResultListItem } from '../index';
+import { SearchResult, DefaultResultListItem } from '../index';
 import { MemoryRouter } from 'react-router';
 import { Link } from '@backstage/core-components';
+import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories';
+
+const mockResults = {
+  results: [
+    {
+      type: 'custom-result-item',
+      document: {
+        location: 'search/search-result-1',
+        title: 'Search Result 1',
+        text: 'some text from the search result',
+      },
+    },
+    {
+      type: 'no-custom-result-item',
+      document: {
+        location: 'search/search-result-2',
+        title: 'Search Result 2',
+        text: 'some text from the search result',
+      },
+    },
+    {
+      type: 'no-custom-result-item',
+      document: {
+        location: 'search/search-result-3',
+        title: 'Search Result 3',
+        text: 'some text from the search result',
+      },
+    },
+  ],
+};
 
 export default {
   title: 'Plugins/Search/SearchResult',
   component: SearchResult,
-};
-
-const defaultValue = {
-  result: {
-    loading: false,
-    error: '',
-    value: {
-      results: [
-        {
-          type: 'custom-result-item',
-          document: {
-            location: 'search/search-result-1',
-            title: 'Search Result 1',
-            text: 'some text from the search result',
-          },
-        },
-        {
-          type: 'no-custom-result-item',
-          document: {
-            location: 'search/search-result-2',
-            title: 'Search Result 2',
-            text: 'some text from the search result',
-          },
-        },
-        {
-          type: 'no-custom-result-item',
-          document: {
-            location: 'search/search-result-3',
-            title: 'Search Result 3',
-            text: 'some text from the search result',
-          },
-        },
-      ],
-    },
-  },
+  decorators: [
+    (Story: ComponentType<{}>) => (
+      <MemoryRouter>
+        <SearchContextProvider mockedResults={mockResults}>
+          <Story />
+        </SearchContextProvider>
+      </MemoryRouter>
+    ),
+  ],
 };
 
 export const Default = () => {
   return (
-    <MemoryRouter>
-      {/* @ts-ignore (defaultValue requires more than what is used here) */}
-      <SearchContext.Provider value={defaultValue}>
-        <SearchResult>
-          {({ results }) => (
-            <List>
-              {results.map(({ type, document }) => {
-                switch (type) {
-                  case 'custom-result-item':
-                    return (
-                      <DefaultResultListItem
-                        key={document.location}
-                        result={document}
-                      />
-                    );
-                  default:
-                    return (
-                      <ListItem>
-                        <Link to={document.location}>
-                          {document.title} - {document.text}
-                        </Link>
-                      </ListItem>
-                    );
-                }
-              })}
-            </List>
-          )}
-        </SearchResult>
-      </SearchContext.Provider>
-    </MemoryRouter>
+    <SearchResult>
+      {({ results }) => (
+        <List>
+          {results.map(({ type, document }) => {
+            switch (type) {
+              case 'custom-result-item':
+                return (
+                  <DefaultResultListItem
+                    key={document.location}
+                    result={document}
+                  />
+                );
+              default:
+                return (
+                  <ListItem>
+                    <Link to={document.location}>
+                      {document.title} - {document.text}
+                    </Link>
+                  </ListItem>
+                );
+            }
+          })}
+        </List>
+      )}
+    </SearchResult>
   );
 };

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

@@ -13,46 +13,51 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState } from 'react';
+import React, { ComponentType } from 'react';
+import { Grid, Paper } from '@material-ui/core';
 import CatalogIcon from '@material-ui/icons/MenuBook';
 import DocsIcon from '@material-ui/icons/Description';
 import UsersGroupsIcon from '@material-ui/icons/Person';
 
 import { SearchType } from '../index';
-import { SearchContext } from '../SearchContext';
+import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories';
 
 export default {
   title: 'Plugins/Search/SearchType',
   component: SearchType,
+  decorators: [
+    (Story: ComponentType<{}>) => (
+      <SearchContextProvider>
+        <Grid container direction="row">
+          <Grid item xs={4}>
+            <Story />
+          </Grid>
+        </Grid>
+      </SearchContextProvider>
+    ),
+  ],
 };
 
 const values = ['value-1', 'value-2', 'value-3'];
 
 export const Default = () => {
-  const [types, setTypes] = useState<string[]>([]);
-
   return (
-    <SearchContext.Provider value={{ types, setTypes } as any}>
+    <Paper style={{ padding: 10 }}>
       <SearchType name="Search type" values={values} defaultValue={values[0]} />
-    </SearchContext.Provider>
+    </Paper>
   );
 };
 
 export const Accordion = () => {
-  const [types, setTypes] = useState<string[]>([]);
-  const setPageCursor = () => {};
-
   return (
-    <SearchContext.Provider value={{ types, setTypes, setPageCursor } as any}>
-      <SearchType.Accordion
-        name="Result Types"
-        defaultValue="value-1"
-        types={[
-          { value: 'value-1', name: 'Value One', icon: <CatalogIcon /> },
-          { value: 'value-2', name: 'Value Two', icon: <DocsIcon /> },
-          { value: 'value-3', name: 'Value Three', icon: <UsersGroupsIcon /> },
-        ]}
-      />
-    </SearchContext.Provider>
+    <SearchType.Accordion
+      name="Result Types"
+      defaultValue="value-1"
+      types={[
+        { value: 'value-1', name: 'Value One', icon: <CatalogIcon /> },
+        { value: 'value-2', name: 'Value Two', icon: <DocsIcon /> },
+        { value: 'value-3', name: 'Value Three', icon: <UsersGroupsIcon /> },
+      ]}
+    />
   );
 };