From a906f6ce240b51210ad6c1d22d3e68cd4f6b6eba Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Tue, 14 Jun 2022 15:56:27 +0200 Subject: [PATCH 1/6] add stack overflow plugin to marketplace Signed-off-by: Emma Indal --- microsite/data/plugins/stack-overflow.yaml | 9 +++++++++ microsite/static/img/stack-overflow-logo.svg | 1 + plugins/stack-overflow/README.md | 2 ++ 3 files changed, 12 insertions(+) create mode 100644 microsite/data/plugins/stack-overflow.yaml create mode 100644 microsite/static/img/stack-overflow-logo.svg diff --git a/microsite/data/plugins/stack-overflow.yaml b/microsite/data/plugins/stack-overflow.yaml new file mode 100644 index 0000000000..23b952e93f --- /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-adr' 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 From c9ca0e917d9452eadbabc2cf539b0de51fef7705 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Tue, 14 Jun 2022 15:58:15 +0200 Subject: [PATCH 2/6] add support for icon property for StackOverflowQuestions homepage component Signed-off-by: Emma Indal --- .../home/StackOverflowQuestions/Content.tsx | 10 +++--- .../StackOverflowQuestions.stories.tsx | 16 +++++++++ .../src/icons/StackOverflowIcon.tsx | 34 +++++++++++++++++++ plugins/stack-overflow/src/icons/index.ts | 16 +++++++++ plugins/stack-overflow/src/index.ts | 2 ++ plugins/stack-overflow/src/types.ts | 1 + 6 files changed, 75 insertions(+), 4 deletions(-) create mode 100644 plugins/stack-overflow/src/icons/StackOverflowIcon.tsx create mode 100644 plugins/stack-overflow/src/icons/index.ts 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..5e2139b4a8 --- /dev/null +++ b/plugins/stack-overflow/src/icons/StackOverflowIcon.tsx @@ -0,0 +1,34 @@ +/* + * 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'; + +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/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; }; /** From 8d9f6bbe81f4f4c4b1ea47019a1b86311cece0dd Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Tue, 14 Jun 2022 16:06:18 +0200 Subject: [PATCH 3/6] add storybook example of stack overflow search result with icon Signed-off-by: Emma Indal --- ...StackOverflowSearchResultListItem.stories.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) 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 ( + } + /> + ); +}; From 5907499e67c13bf62b65398ffb1560ddd1e30518 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Tue, 14 Jun 2022 16:24:16 +0200 Subject: [PATCH 4/6] update api report Signed-off-by: Emma Indal --- plugins/stack-overflow/api-report.md | 4 ++++ plugins/stack-overflow/src/icons/StackOverflowIcon.tsx | 4 ++++ 2 files changed, 8 insertions(+) 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/icons/StackOverflowIcon.tsx b/plugins/stack-overflow/src/icons/StackOverflowIcon.tsx index 5e2139b4a8..8befe53177 100644 --- a/plugins/stack-overflow/src/icons/StackOverflowIcon.tsx +++ b/plugins/stack-overflow/src/icons/StackOverflowIcon.tsx @@ -15,6 +15,10 @@ */ import React from 'react'; +/** + * Stack Overflow Icon + * @public + */ export const StackOverflowIcon = () => { return ( Date: Tue, 14 Jun 2022 16:38:30 +0200 Subject: [PATCH 5/6] fixup Signed-off-by: Emma Indal --- microsite/data/plugins/stack-overflow.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/microsite/data/plugins/stack-overflow.yaml b/microsite/data/plugins/stack-overflow.yaml index 23b952e93f..0d734446d7 100644 --- a/microsite/data/plugins/stack-overflow.yaml +++ b/microsite/data/plugins/stack-overflow.yaml @@ -6,4 +6,4 @@ 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-adr' +npmPackageName: '@backstage/plugin-stack-overflow' From 12ae3eed2f873a53ef1f16207031a117533632ec Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Tue, 14 Jun 2022 16:42:37 +0200 Subject: [PATCH 6/6] add changeset Signed-off-by: Emma Indal --- .changeset/modern-ducks-lay.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/modern-ducks-lay.md 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.