Merge pull request #12024 from backstage/emmaindal/stackoverflow-plugin-marketplace

[Stack Overflow] add stackoverflow to plugin marketplace

.changeset/modern-ducks-lay.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-stack-overflow': patch
+---
+
+- Publicly exports `StackOverflowIcon`.
+- `HomePageStackOverflowQuestions` accepts optional icon property.

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'

microsite/static/img/stack-overflow-logo.svg

@@ -0,0 +1 @@
+<svg width="100" height="118" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M84.021 75.825v31H11v-31H0v42h95v-42H84.021z" fill="#BCBBBB"/><path d="M21.057 96.825H74v-10H21.057v10zm1.058-23.915l51.428 10.794 2.117-10.265L24.23 62.645 22.115 72.91zm6.773-24.656l47.618 22.222 4.445-9.524L33.33 38.73l-4.444 9.524zm13.227-23.386l40.423 33.65 6.773-8.042-40.53-33.65-6.666 8.042zM68.147 0L59.68 6.243l31.323 42.222 8.465-6.243L68.147 0z" fill="#F48024"/></svg>

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

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

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 (
     <List>
       {value.map(question => (
-        <ListItem key={question.link}>
-          <Link to={question.link}>
+        <Link to={question.link}>
+          <ListItem key={question.link}>
+            {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
             <ListItemText
               primary={question.title}
               secondary={getSecondaryText(question.answer_count)}
@@ -79,8 +81,8 @@ export const Content = (props: StackOverflowQuestionsContentProps) => {
                 <OpenInNewIcon />
               </IconButton>
             </ListItemSecondaryAction>
-          </Link>
-        </ListItem>
+          </ListItem>
+        </Link>
       ))}
     </List>
   );

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 = () => {
     </Grid>
   );
 };
+
+export const WithIcon = () => {
+  return (
+    <Grid item xs={12} md={6}>
+      <HomePageStackOverflowQuestions
+        requestParams={{
+          tagged: 'backstage',
+          site: 'stackoverflow',
+          pagesize: 5,
+        }}
+        icon={<StackOverflowIcon />}
+      />
+    </Grid>
+  );
+};

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 (
+    <svg
+      viewBox="0 0 125 125"
+      width="25"
+      height="25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M84.021 75.825v31H11v-31H0v42h95v-42H84.021z" fill="#BCBBBB" />
+      <path
+        d="M21.057 96.825H74v-10H21.057v10zm1.058-23.915l51.428 10.794 2.117-10.265L24.23 62.645 22.115 72.91zm6.773-24.656l47.618 22.222 4.445-9.524L33.33 38.73l-4.444 9.524zm13.227-23.386l40.423 33.65 6.773-8.042-40.53-33.65-6.666 8.042zM68.147 0L59.68 6.243l31.323 42.222 8.465-6.243L68.147 0z"
+        fill="#F48024"
+      />
+    </svg>
+  );
+};

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';

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,

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 (
+    <StackOverflowSearchResultListItem
+      result={{
+        title: 'Customizing Spotify backstage UI',
+        text: 'Name of Author',
+        location: 'stackoverflow.question/1',
+        answers: 0,
+        tags: ['backstage'],
+      }}
+      icon={<StackOverflowIcon />}
+    />
+  );
+};

plugins/stack-overflow/src/types.ts

@@ -34,6 +34,7 @@ export type StackOverflowQuestion = {
  */
 export type StackOverflowQuestionsContentProps = {
   requestParams: StackOverflowQuestionsRequestParams;
+  icon?: React.ReactNode;
 };
 
 /**