diff --git a/.changeset/modern-ducks-lay.md b/.changeset/modern-ducks-lay.md new file mode 100644 index 0000000000..bd62c309ba --- /dev/null +++ b/.changeset/modern-ducks-lay.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-stack-overflow': patch +--- + +- Publicly exports `StackOverflowIcon`. +- `HomePageStackOverflowQuestions` accepts optional icon property. diff --git a/microsite/data/plugins/stack-overflow.yaml b/microsite/data/plugins/stack-overflow.yaml new file mode 100644 index 0000000000..0d734446d7 --- /dev/null +++ b/microsite/data/plugins/stack-overflow.yaml @@ -0,0 +1,9 @@ +--- +title: Stack Overflow +author: Spotify +authorUrl: https://github.com/spotify +category: Discovery +description: Provides Stack Overflow specific functionality that can be used in different ways (e.g. for homepage and search) to compose your Backstage App. +documentation: https://github.com/backstage/backstage/blob/master/plugins/stack-overflow +iconUrl: img/stack-overflow-logo.svg +npmPackageName: '@backstage/plugin-stack-overflow' diff --git a/microsite/static/img/stack-overflow-logo.svg b/microsite/static/img/stack-overflow-logo.svg new file mode 100644 index 0000000000..d2fba99094 --- /dev/null +++ b/microsite/static/img/stack-overflow-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/plugins/stack-overflow/README.md b/plugins/stack-overflow/README.md index 6beb843c7d..96a8f524e3 100644 --- a/plugins/stack-overflow/README.md +++ b/plugins/stack-overflow/README.md @@ -23,6 +23,8 @@ This stack overflow frontend plugin is primarily responsible for the following: #### Use specific search result list item for Stack Overflow Question +> Note: For Stack Overflow specific search results to be returned, it needs to be indexed. Use the [stack-overflow-backend plugin](https://github.com/backstage/backstage/blob/master/plugins/stack-overflow-backend/README.md) to index Stack Overflow Questions to search. + When you have your `packages/app/src/components/search/SearchPage.tsx` file ready to make modifications, add the following code snippet to add the `StackOverflowSearchResultListItem` when the type of the search results are `stack-overflow`. ```tsx diff --git a/plugins/stack-overflow/api-report.md b/plugins/stack-overflow/api-report.md index 277b0272d1..e4912fcd18 100644 --- a/plugins/stack-overflow/api-report.md +++ b/plugins/stack-overflow/api-report.md @@ -16,6 +16,9 @@ export const HomePageStackOverflowQuestions: ( } & StackOverflowQuestionsContentProps, ) => JSX.Element; +// @public +export const StackOverflowIcon: () => JSX.Element; + // @public export const stackOverflowPlugin: BackstagePlugin<{}, {}>; @@ -31,6 +34,7 @@ export type StackOverflowQuestion = { // @public export type StackOverflowQuestionsContentProps = { requestParams: StackOverflowQuestionsRequestParams; + icon?: React.ReactNode; }; // @public diff --git a/plugins/stack-overflow/src/home/StackOverflowQuestions/Content.tsx b/plugins/stack-overflow/src/home/StackOverflowQuestions/Content.tsx index c347399474..fbc3a90a9d 100644 --- a/plugins/stack-overflow/src/home/StackOverflowQuestions/Content.tsx +++ b/plugins/stack-overflow/src/home/StackOverflowQuestions/Content.tsx @@ -22,6 +22,7 @@ import { ListItem, ListItemText, ListItemSecondaryAction, + ListItemIcon, } from '@material-ui/core'; import OpenInNewIcon from '@material-ui/icons/OpenInNew'; import useAsync from 'react-use/lib/useAsync'; @@ -68,8 +69,9 @@ export const Content = (props: StackOverflowQuestionsContentProps) => { return ( {value.map(question => ( - - + + + {props.icon && {props.icon}} { - - + + ))} ); diff --git a/plugins/stack-overflow/src/home/StackOverflowQuestions/StackOverflowQuestions.stories.tsx b/plugins/stack-overflow/src/home/StackOverflowQuestions/StackOverflowQuestions.stories.tsx index e19e0f807b..35ace44c14 100644 --- a/plugins/stack-overflow/src/home/StackOverflowQuestions/StackOverflowQuestions.stories.tsx +++ b/plugins/stack-overflow/src/home/StackOverflowQuestions/StackOverflowQuestions.stories.tsx @@ -20,6 +20,7 @@ import { configApiRef } from '@backstage/core-plugin-api'; import { ConfigReader } from '@backstage/config'; import { Grid } from '@material-ui/core'; import React, { ComponentType } from 'react'; +import { StackOverflowIcon } from '../../icons'; export default { title: 'Plugins/Home/Components/StackOverflow', @@ -60,3 +61,18 @@ export const Default = () => { ); }; + +export const WithIcon = () => { + return ( + + } + /> + + ); +}; diff --git a/plugins/stack-overflow/src/icons/StackOverflowIcon.tsx b/plugins/stack-overflow/src/icons/StackOverflowIcon.tsx new file mode 100644 index 0000000000..8befe53177 --- /dev/null +++ b/plugins/stack-overflow/src/icons/StackOverflowIcon.tsx @@ -0,0 +1,38 @@ +/* + * 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 React from 'react'; + +/** + * Stack Overflow Icon + * @public + */ +export const StackOverflowIcon = () => { + return ( + + + + + ); +}; diff --git a/plugins/stack-overflow/src/icons/index.ts b/plugins/stack-overflow/src/icons/index.ts new file mode 100644 index 0000000000..141d87d7b1 --- /dev/null +++ b/plugins/stack-overflow/src/icons/index.ts @@ -0,0 +1,16 @@ +/* + * 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. + */ +export * from './StackOverflowIcon'; diff --git a/plugins/stack-overflow/src/index.ts b/plugins/stack-overflow/src/index.ts index 264a0d5d7c..5965d66983 100644 --- a/plugins/stack-overflow/src/index.ts +++ b/plugins/stack-overflow/src/index.ts @@ -18,11 +18,13 @@ * * @packageDocumentation */ + export { stackOverflowPlugin, StackOverflowSearchResultListItem, HomePageStackOverflowQuestions, } from './plugin'; +export { StackOverflowIcon } from './icons'; export type { StackOverflowQuestion, StackOverflowQuestionsContentProps, diff --git a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.stories.tsx b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.stories.tsx index 1239cabcbe..df5b8038b0 100644 --- a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.stories.tsx +++ b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.stories.tsx @@ -17,6 +17,7 @@ import { StackOverflowSearchResultListItem } from '../../plugin'; import { wrapInTestApp } from '@backstage/test-utils'; import React, { ComponentType } from 'react'; +import { StackOverflowIcon } from '../../icons'; export default { title: 'Plugins/Search/StackOverflowResultListItem', @@ -37,3 +38,18 @@ export const Default = () => { /> ); }; + +export const WithIcon = () => { + return ( + } + /> + ); +}; diff --git a/plugins/stack-overflow/src/types.ts b/plugins/stack-overflow/src/types.ts index c3fa08cc4f..8f2d8847ec 100644 --- a/plugins/stack-overflow/src/types.ts +++ b/plugins/stack-overflow/src/types.ts @@ -34,6 +34,7 @@ export type StackOverflowQuestion = { */ export type StackOverflowQuestionsContentProps = { requestParams: StackOverflowQuestionsRequestParams; + icon?: React.ReactNode; }; /**