fix broken stack overflow stories - mock stack overflow api

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

.changeset/silver-donkeys-eat.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-stack-overflow': patch
+---
+
+Export api ref and StackOverflowApi type

packages/app/src/components/home/templates/DefaultTemplate.stories.tsx

@@ -19,7 +19,7 @@ import {
   HomePageCompanyLogo,
   HomePageStarredEntities,
   TemplateBackstageLogo,
-  TemplateBackstageLogoIcon
+  TemplateBackstageLogoIcon,
 } from '@backstage/plugin-home';
 import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils';
 import { Content, Page, InfoCard } from '@backstage/core-components';
@@ -31,12 +31,12 @@ import {
 } from '@backstage/plugin-catalog-react';
 import { configApiRef } from '@backstage/core-plugin-api';
 import { ConfigReader } from '@backstage/config';
+import { HomePageSearchBar, searchPlugin } from '@backstage/plugin-search';
 import {
-  HomePageSearchBar,
-  searchPlugin,
-} from '@backstage/plugin-search';
-import { searchApiRef, SearchContextProvider } from '@backstage/plugin-search-react';
-import { HomePageStackOverflowQuestions } from '@backstage/plugin-stack-overflow';
+  searchApiRef,
+  SearchContextProvider,
+} from '@backstage/plugin-search-react';
+import { stackOverflowApiRef, HomePageStackOverflowQuestions } from '@backstage/plugin-stack-overflow';
 import { Grid, makeStyles } from '@material-ui/core';
 import React, { ComponentType } from 'react';
 
@@ -79,6 +79,25 @@ const mockCatalogApi = {
   getEntities: async () => ({ items: entities }),
 };
 
+const mockStackOverflowApi = {
+  listQuestions: async () => [
+    {
+      title: 'Customizing Spotify backstage UI',
+      link: 'stackoverflow.question/1',
+      answer_count: 0,
+      tags: ['backstage'],
+      owner: { 'some owner': 'name' },
+    },
+    {
+      title: 'Customizing Spotify backstage UI',
+      link: 'stackoverflow.question/1',
+      answer_count: 0,
+      tags: ['backstage'],
+      owner: { 'some owner': 'name' },
+    },
+  ],
+};
+
 const starredEntitiesApi = new MockStarredEntitiesApi();
 starredEntitiesApi.toggleStarred('component:default/example-starred-entity');
 starredEntitiesApi.toggleStarred('component:default/example-starred-entity-2');
@@ -93,6 +112,7 @@ export default {
         <>
           <TestApiProvider
             apis={[
+              [stackOverflowApiRef, mockStackOverflowApi],
               [catalogApiRef, mockCatalogApi],
               [starredEntitiesApiRef, starredEntitiesApi],
               [searchApiRef, { query: () => Promise.resolve({ results: [] }) }],

plugins/stack-overflow/api-report.md

@@ -5,6 +5,7 @@
 ```ts
 /// <reference types="react" />
 
+import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { CardExtensionProps } from '@backstage/plugin-home';
 import { ReactNode } from 'react';
@@ -15,6 +16,16 @@ export const HomePageStackOverflowQuestions: (
   props: CardExtensionProps<StackOverflowQuestionsContentProps>,
 ) => JSX.Element;
 
+// @public (undocumented)
+export type StackOverflowApi = {
+  listQuestions(options?: {
+    requestParams: StackOverflowQuestionsRequestParams;
+  }): Promise<StackOverflowQuestion[]>;
+};
+
+// @public (undocumented)
+export const stackOverflowApiRef: ApiRef<StackOverflowApi>;
+
 // @public
 export const StackOverflowIcon: () => JSX.Element;
 

plugins/stack-overflow/src/api/StackOverflowApi.ts

@@ -20,10 +20,16 @@ import {
   StackOverflowQuestionsRequestParams,
 } from '../types';
 
+/**
+ * @public
+ */
 export const stackOverflowApiRef = createApiRef<StackOverflowApi>({
   id: 'plugin.stackoverflow.service',
 });
 
+/**
+ * @public
+ */
 export type StackOverflowApi = {
   listQuestions(options?: {
     requestParams: StackOverflowQuestionsRequestParams;

plugins/stack-overflow/src/home/StackOverflowQuestions/StackOverflowQuestions.stories.tsx

@@ -21,6 +21,26 @@ import { ConfigReader } from '@backstage/config';
 import { Grid } from '@material-ui/core';
 import React, { ComponentType } from 'react';
 import { StackOverflowIcon } from '../../icons';
+import { stackOverflowApiRef } from '../../api';
+
+const mockStackOverflowApi = {
+  listQuestions: async () => [
+    {
+      title: 'Customizing Spotify backstage UI',
+      link: 'stackoverflow.question/1',
+      answer_count: 0,
+      tags: ['backstage'],
+      owner: { 'some owner': 'name' },
+    },
+    {
+      title: 'Customizing Spotify backstage UI',
+      link: 'stackoverflow.question/1',
+      answer_count: 0,
+      tags: ['backstage'],
+      owner: { 'some owner': 'name' },
+    },
+  ],
+};
 
 export default {
   title: 'Plugins/Home/Components/StackOverflow',
@@ -39,6 +59,7 @@ export default {
                   },
                 }),
               ],
+              [stackOverflowApiRef, mockStackOverflowApi],
             ]}
           >
             <Story />

plugins/stack-overflow/src/index.ts

@@ -30,3 +30,5 @@ export type {
   StackOverflowQuestionsContentProps,
   StackOverflowQuestionsRequestParams,
 } from './types';
+export { stackOverflowApiRef } from './api';
+export type { StackOverflowApi } from './api';