From 30cf3bd83041e28d66e9d5c13a28429c9827c108 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 29 Apr 2022 11:20:44 +0200 Subject: [PATCH 1/5] introduce a new mock implementation of the search api, delete SearchContextProviderForStorybook and SearchApiProviderForStorybook Signed-off-by: Emma Indal --- plugins/search-react/api-report.md | 32 +++------ plugins/search-react/src/api.ts | 13 ++++ .../SearchContextForStorybook.stories.tsx | 71 ------------------- plugins/search-react/src/context/index.tsx | 8 --- plugins/search-react/src/index.ts | 6 +- 5 files changed, 23 insertions(+), 107 deletions(-) delete mode 100644 plugins/search-react/src/context/SearchContextForStorybook.stories.tsx diff --git a/plugins/search-react/api-report.md b/plugins/search-react/api-report.md index 969e4d8563..e8d3afff82 100644 --- a/plugins/search-react/api-report.md +++ b/plugins/search-react/api-report.md @@ -5,31 +5,27 @@ ```ts import { ApiRef } from '@backstage/core-plugin-api'; import { AsyncState } from 'react-use/lib/useAsync'; -import { ComponentProps } from 'react'; import { JsonObject } from '@backstage/types'; import { PropsWithChildren } from 'react'; import { default as React_2 } from 'react'; import { SearchQuery } from '@backstage/plugin-search-common'; import { SearchResultSet } from '@backstage/plugin-search-common'; +// @public +export class MockSearchApi implements SearchApi { + constructor(mockedResults?: SearchResultSet | undefined); + // (undocumented) + mockedResults?: SearchResultSet | undefined; + // (undocumented) + query(): Promise; +} + // @public (undocumented) export interface SearchApi { // (undocumented) query(query: SearchQuery): Promise; } -// @public -export function SearchApiProviderForStorybook( - props: SearchApiProviderForStorybookProps, -): JSX.Element; - -// @public -export type SearchApiProviderForStorybookProps = ComponentProps< - typeof SearchContextProvider -> & { - mockedResults?: SearchResultSet; -}; - // @public (undocumented) export const searchApiRef: ApiRef; @@ -38,16 +34,6 @@ export const SearchContextProvider: ( props: SearchContextProviderProps, ) => JSX.Element; -// @public -export const SearchContextProviderForStorybook: ( - props: SearchContextProviderForStorybookProps, -) => JSX.Element; - -// @public -export type SearchContextProviderForStorybookProps = PropsWithChildren<{ - mockedResults?: SearchResultSet; -}>; - // @public export type SearchContextProviderProps = PropsWithChildren<{ initialState?: SearchContextState; diff --git a/plugins/search-react/src/api.ts b/plugins/search-react/src/api.ts index eb8c9c23db..24a247a641 100644 --- a/plugins/search-react/src/api.ts +++ b/plugins/search-react/src/api.ts @@ -30,3 +30,16 @@ export const searchApiRef = createApiRef({ export interface SearchApi { query(query: SearchQuery): Promise; } + +/** + * @public + * + * Search Api Mock that can be used in tests and storybooks + */ +export class MockSearchApi implements SearchApi { + constructor(public mockedResults?: SearchResultSet) {} + + query(): Promise { + return Promise.resolve(this.mockedResults || { results: [] }); + } +} diff --git a/plugins/search-react/src/context/SearchContextForStorybook.stories.tsx b/plugins/search-react/src/context/SearchContextForStorybook.stories.tsx deleted file mode 100644 index 603a89035f..0000000000 --- a/plugins/search-react/src/context/SearchContextForStorybook.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -/* - * Copyright 2022 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/plugin-search-common'; -import { TestApiRegistry } from '@backstage/test-utils'; -import React, { ComponentProps, PropsWithChildren } from 'react'; -import { searchApiRef } from '../api'; -import { SearchContextProvider } from './SearchContext'; - -/** - * Props for {@link SearchApiProviderForStorybook} - * @public - */ -export type SearchApiProviderForStorybookProps = ComponentProps< - typeof SearchContextProvider -> & { - mockedResults?: SearchResultSet; -}; - -/** - * Props for {@link SearchContextProviderForStorybook} - * @public - */ -export type SearchContextProviderForStorybookProps = PropsWithChildren<{ - mockedResults?: SearchResultSet; -}>; - -/** - * Utility api provider only for use in Storybook stories. - * - * @public - */ -export function SearchApiProviderForStorybook( - props: SearchApiProviderForStorybookProps, -) { - const { mockedResults, children } = props; - const query: any = () => Promise.resolve(mockedResults || {}); - const apiRegistry = TestApiRegistry.from([searchApiRef, { query }]); - return ; -} - -/** - * Utility context provider only for use in Storybook stories. You should use - * the real `` exported by `@backstage/plugin-search-react` in - * your app instead of this! In some cases (like the search page) it may - * already be provided on your behalf. - * - * @public - */ -export const SearchContextProviderForStorybook = ( - props: SearchContextProviderForStorybookProps, -) => { - return ( - - - - ); -}; diff --git a/plugins/search-react/src/context/index.tsx b/plugins/search-react/src/context/index.tsx index 76e1142bea..304f762943 100644 --- a/plugins/search-react/src/context/index.tsx +++ b/plugins/search-react/src/context/index.tsx @@ -24,11 +24,3 @@ export type { SearchContextState, SearchContextValue, } from './SearchContext'; -export { - SearchContextProviderForStorybook, - SearchApiProviderForStorybook, -} from './SearchContextForStorybook.stories'; -export type { - SearchContextProviderForStorybookProps, - SearchApiProviderForStorybookProps, -} from './SearchContextForStorybook.stories'; diff --git a/plugins/search-react/src/index.ts b/plugins/search-react/src/index.ts index 424c804472..d24bd097de 100644 --- a/plugins/search-react/src/index.ts +++ b/plugins/search-react/src/index.ts @@ -20,19 +20,15 @@ * @packageDocumentation */ -export { searchApiRef } from './api'; +export { searchApiRef, MockSearchApi } from './api'; export type { SearchApi } from './api'; export { SearchContextProvider, useSearch, useSearchContextCheck, - SearchContextProviderForStorybook, - SearchApiProviderForStorybook, } from './context'; export type { SearchContextProviderProps, SearchContextState, SearchContextValue, - SearchContextProviderForStorybookProps, - SearchApiProviderForStorybookProps, } from './context'; From d47ae8f6f7aeda103454e05cd5f4d4bd97e1de86 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 29 Apr 2022 11:21:30 +0200 Subject: [PATCH 2/5] replace all usages of SearchContextProviderForStorybook Signed-off-by: Emma Indal --- .../SearchBar/SearchBar.stories.tsx | 24 +++++++++++++------ .../SearchFilter/SearchFilter.stories.tsx | 24 +++++++++++++------ .../SearchModal/SearchModal.stories.tsx | 21 ++++++++++++---- .../SearchResult/SearchResult.stories.tsx | 21 ++++++++++++---- .../SearchType/SearchType.stories.tsx | 24 +++++++++++++------ 5 files changed, 85 insertions(+), 29 deletions(-) diff --git a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx index 72c7deb06b..1340bb7dc3 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx +++ b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx @@ -16,7 +16,13 @@ import { Grid, makeStyles, Paper } from '@material-ui/core'; import React, { ComponentType } from 'react'; -import { SearchContextProviderForStorybook } from '@backstage/plugin-search-react'; +import { + searchApiRef, + MockSearchApi, + SearchContextProvider, +} from '@backstage/plugin-search-react'; +import { ApiProvider } from '@backstage/core-app-api'; +import { TestApiRegistry } from '@backstage/test-utils'; import { SearchBar } from './SearchBar'; export default { @@ -24,13 +30,17 @@ export default { component: SearchBar, decorators: [ (Story: ComponentType<{}>) => ( - - - - + + + + + + - - + + ), ], }; diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx index 3c49b76699..c7111a52f2 100644 --- a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx +++ b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx @@ -16,7 +16,13 @@ import { Grid, Paper } from '@material-ui/core'; import React, { ComponentType } from 'react'; -import { SearchContextProviderForStorybook } from '@backstage/plugin-search-react'; +import { + searchApiRef, + MockSearchApi, + SearchContextProvider, +} from '@backstage/plugin-search-react'; +import { ApiProvider } from '@backstage/core-app-api'; +import { TestApiRegistry } from '@backstage/test-utils'; import { SearchFilter } from './SearchFilter'; export default { @@ -24,13 +30,17 @@ export default { component: SearchFilter, decorators: [ (Story: ComponentType<{}>) => ( - - - - + + + + + + - - + + ), ], }; diff --git a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx index e2e3db694b..2e70b2d6d3 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx @@ -29,7 +29,13 @@ import React, { ComponentType } from 'react'; import { rootRouteRef } from '../../plugin'; import { DefaultResultListItem } from '../DefaultResultListItem'; import { SearchBar } from '../SearchBar'; -import { SearchApiProviderForStorybook } from '@backstage/plugin-search-react'; +import { + searchApiRef, + MockSearchApi, + SearchContextProvider, +} from '@backstage/plugin-search-react'; +import { ApiProvider } from '@backstage/core-app-api'; +import { TestApiRegistry } from '@backstage/test-utils'; import { SearchModal } from './SearchModal'; import { SearchResult } from '../SearchResult'; import { SearchResultPager } from '../SearchResultPager'; @@ -71,9 +77,16 @@ export default { decorators: [ (Story: ComponentType<{}>) => wrapInTestApp( - - - , + + + + + , { mountedRoutes: { '/search': rootRouteRef } }, ), ], diff --git a/plugins/search/src/components/SearchResult/SearchResult.stories.tsx b/plugins/search/src/components/SearchResult/SearchResult.stories.tsx index 4a3d950164..0bf894b860 100644 --- a/plugins/search/src/components/SearchResult/SearchResult.stories.tsx +++ b/plugins/search/src/components/SearchResult/SearchResult.stories.tsx @@ -20,8 +20,14 @@ import React, { ComponentType } from 'react'; import { MemoryRouter } from 'react-router'; import { DefaultResultListItem } from '../DefaultResultListItem'; -import { SearchContextProviderForStorybook } from '@backstage/plugin-search-react'; +import { + searchApiRef, + MockSearchApi, + SearchContextProvider, +} from '@backstage/plugin-search-react'; import { SearchResult } from './SearchResult'; +import { TestApiRegistry } from '@backstage/test-utils'; +import { ApiProvider } from '@backstage/core-app-api'; const mockResults = { results: [ @@ -58,9 +64,16 @@ export default { decorators: [ (Story: ComponentType<{}>) => ( - - - + + + + + ), ], diff --git a/plugins/search/src/components/SearchType/SearchType.stories.tsx b/plugins/search/src/components/SearchType/SearchType.stories.tsx index b56f4c089c..e98655b684 100644 --- a/plugins/search/src/components/SearchType/SearchType.stories.tsx +++ b/plugins/search/src/components/SearchType/SearchType.stories.tsx @@ -19,21 +19,31 @@ import CatalogIcon from '@material-ui/icons/MenuBook'; import DocsIcon from '@material-ui/icons/Description'; import UsersGroupsIcon from '@material-ui/icons/Person'; import React, { ComponentType } from 'react'; -import { SearchContextProviderForStorybook } from '@backstage/plugin-search-react'; import { SearchType } from './SearchType'; +import { ApiProvider } from '@backstage/core-app-api'; +import { TestApiRegistry } from '@backstage/test-utils'; +import { + searchApiRef, + MockSearchApi, + SearchContextProvider, +} from '@backstage/plugin-search-react'; export default { title: 'Plugins/Search/SearchType', component: SearchType, decorators: [ (Story: ComponentType<{}>) => ( - - - - + + + + + + - - + + ), ], }; From bdbe62079710d2c246be41bcdda8746e923594cb Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 29 Apr 2022 11:22:56 +0200 Subject: [PATCH 3/5] changesets Signed-off-by: Emma Indal --- .changeset/spotty-rats-work.md | 5 +++++ .changeset/tall-parents-deny.md | 21 +++++++++++++++++++++ 2 files changed, 26 insertions(+) create mode 100644 .changeset/spotty-rats-work.md create mode 100644 .changeset/tall-parents-deny.md diff --git a/.changeset/spotty-rats-work.md b/.changeset/spotty-rats-work.md new file mode 100644 index 0000000000..a72f6bd486 --- /dev/null +++ b/.changeset/spotty-rats-work.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-search-react': patch +--- + +Removed all usages of `SearchContextProviderForStorybook` as it has been deprecated. diff --git a/.changeset/tall-parents-deny.md b/.changeset/tall-parents-deny.md new file mode 100644 index 0000000000..db56810386 --- /dev/null +++ b/.changeset/tall-parents-deny.md @@ -0,0 +1,21 @@ +--- +'@backstage/plugin-search-react': minor +--- + +`SearchContextProviderForStorybook` and `SearchApiProviderForStorybook` has been deleted. New mock implementation of the `SearchApi` introduced. If you need to mock the api we recommend you to do the following: + +```tsx +import { + searchApiRef, + MockSearchApi, + SearchContextProvider, +} from '@backstage/plugin-search-react'; +import { ApiProvider } from '@backstage/core-app-api'; +import { TestApiRegistry } from '@backstage/test-utils'; + + + + + +; +``` From b9291e1b8355d4d36062cbdc3f047d192f9b6063 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 29 Apr 2022 11:51:50 +0200 Subject: [PATCH 4/5] replace usage of api provider and test api registry with TestApiProvider Signed-off-by: Emma Indal --- .changeset/tall-parents-deny.md | 7 +++---- .../src/components/SearchBar/SearchBar.stories.tsx | 9 +++------ .../SearchFilter/SearchFilter.stories.tsx | 9 +++------ .../components/SearchModal/SearchModal.stories.tsx | 13 +++++-------- .../SearchResult/SearchResult.stories.tsx | 12 ++++-------- .../components/SearchType/SearchType.stories.tsx | 9 +++------ 6 files changed, 21 insertions(+), 38 deletions(-) diff --git a/.changeset/tall-parents-deny.md b/.changeset/tall-parents-deny.md index db56810386..856a43a1ab 100644 --- a/.changeset/tall-parents-deny.md +++ b/.changeset/tall-parents-deny.md @@ -10,12 +10,11 @@ import { MockSearchApi, SearchContextProvider, } from '@backstage/plugin-search-react'; -import { ApiProvider } from '@backstage/core-app-api'; -import { TestApiRegistry } from '@backstage/test-utils'; +import { TestApiProvider } from '@backstage/test-utils'; - + -; +; ``` diff --git a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx index 1340bb7dc3..9728101e97 100644 --- a/plugins/search/src/components/SearchBar/SearchBar.stories.tsx +++ b/plugins/search/src/components/SearchBar/SearchBar.stories.tsx @@ -21,8 +21,7 @@ import { MockSearchApi, SearchContextProvider, } from '@backstage/plugin-search-react'; -import { ApiProvider } from '@backstage/core-app-api'; -import { TestApiRegistry } from '@backstage/test-utils'; +import { TestApiProvider } from '@backstage/test-utils'; import { SearchBar } from './SearchBar'; export default { @@ -30,9 +29,7 @@ export default { component: SearchBar, decorators: [ (Story: ComponentType<{}>) => ( - + @@ -40,7 +37,7 @@ export default { - + ), ], }; diff --git a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx index c7111a52f2..7e8a7d585a 100644 --- a/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx +++ b/plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx @@ -21,8 +21,7 @@ import { MockSearchApi, SearchContextProvider, } from '@backstage/plugin-search-react'; -import { ApiProvider } from '@backstage/core-app-api'; -import { TestApiRegistry } from '@backstage/test-utils'; +import { TestApiProvider } from '@backstage/test-utils'; import { SearchFilter } from './SearchFilter'; export default { @@ -30,9 +29,7 @@ export default { component: SearchFilter, decorators: [ (Story: ComponentType<{}>) => ( - + @@ -40,7 +37,7 @@ export default { - + ), ], }; diff --git a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx index 2e70b2d6d3..a4e92f53ec 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx @@ -34,8 +34,7 @@ import { MockSearchApi, SearchContextProvider, } from '@backstage/plugin-search-react'; -import { ApiProvider } from '@backstage/core-app-api'; -import { TestApiRegistry } from '@backstage/test-utils'; +import { TestApiProvider } from '@backstage/test-utils'; import { SearchModal } from './SearchModal'; import { SearchResult } from '../SearchResult'; import { SearchResultPager } from '../SearchResultPager'; @@ -77,16 +76,14 @@ export default { decorators: [ (Story: ComponentType<{}>) => wrapInTestApp( - - , + , + { mountedRoutes: { '/search': rootRouteRef } }, ), ], diff --git a/plugins/search/src/components/SearchResult/SearchResult.stories.tsx b/plugins/search/src/components/SearchResult/SearchResult.stories.tsx index 0bf894b860..207f1ae1d7 100644 --- a/plugins/search/src/components/SearchResult/SearchResult.stories.tsx +++ b/plugins/search/src/components/SearchResult/SearchResult.stories.tsx @@ -26,8 +26,7 @@ import { SearchContextProvider, } from '@backstage/plugin-search-react'; import { SearchResult } from './SearchResult'; -import { TestApiRegistry } from '@backstage/test-utils'; -import { ApiProvider } from '@backstage/core-app-api'; +import { TestApiProvider } from '@backstage/test-utils'; const mockResults = { results: [ @@ -64,16 +63,13 @@ export default { decorators: [ (Story: ComponentType<{}>) => ( - - + ), ], diff --git a/plugins/search/src/components/SearchType/SearchType.stories.tsx b/plugins/search/src/components/SearchType/SearchType.stories.tsx index e98655b684..415eee19a6 100644 --- a/plugins/search/src/components/SearchType/SearchType.stories.tsx +++ b/plugins/search/src/components/SearchType/SearchType.stories.tsx @@ -20,8 +20,7 @@ import DocsIcon from '@material-ui/icons/Description'; import UsersGroupsIcon from '@material-ui/icons/Person'; import React, { ComponentType } from 'react'; import { SearchType } from './SearchType'; -import { ApiProvider } from '@backstage/core-app-api'; -import { TestApiRegistry } from '@backstage/test-utils'; +import { TestApiProvider } from '@backstage/test-utils'; import { searchApiRef, MockSearchApi, @@ -33,9 +32,7 @@ export default { component: SearchType, decorators: [ (Story: ComponentType<{}>) => ( - + @@ -43,7 +40,7 @@ export default { - + ), ], }; From b090aa8773bdb219a58c200339247d7aaf1e7571 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Fri, 29 Apr 2022 13:01:09 +0200 Subject: [PATCH 5/5] no need plugin-search changeset Signed-off-by: Emma Indal --- .changeset/spotty-rats-work.md | 5 ----- .changeset/tall-parents-deny.md | 2 +- 2 files changed, 1 insertion(+), 6 deletions(-) delete mode 100644 .changeset/spotty-rats-work.md diff --git a/.changeset/spotty-rats-work.md b/.changeset/spotty-rats-work.md deleted file mode 100644 index a72f6bd486..0000000000 --- a/.changeset/spotty-rats-work.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@backstage/plugin-search-react': patch ---- - -Removed all usages of `SearchContextProviderForStorybook` as it has been deprecated. diff --git a/.changeset/tall-parents-deny.md b/.changeset/tall-parents-deny.md index 856a43a1ab..c757b37b79 100644 --- a/.changeset/tall-parents-deny.md +++ b/.changeset/tall-parents-deny.md @@ -2,7 +2,7 @@ '@backstage/plugin-search-react': minor --- -`SearchContextProviderForStorybook` and `SearchApiProviderForStorybook` has been deleted. New mock implementation of the `SearchApi` introduced. If you need to mock the api we recommend you to do the following: +**BREAKING**: `SearchContextProviderForStorybook` and `SearchApiProviderForStorybook` has been deleted. New mock implementation of the `SearchApi` introduced. If you need to mock the api we recommend you to do the following: ```tsx import {