DEVXT-1941 GitHub Discussions Search

app-config.yaml

@@ -102,6 +102,12 @@ techdocs:
       - www.youtube.com
       - miro.com
 
+search:
+  collators:
+    githubDiscussions:
+      url: https://github.com/guidanti/github-discussions-fetcher
+      # https://github.com/backstage/community-plugins/pull/1744
+
 catalog:
   providers:
     githubOrg:

packages/app/package.json

@@ -16,6 +16,9 @@
   "dependencies": {
     "@app/plugin-expandable-toc": "0.0.0",
     "@app/plugin-toc-fix2": "0.0.0",
+    "@backstage-community/plugin-github-actions": "^0.6.16",
+    "@backstage-community/plugin-stack-overflow": "^0.1.30",
+    "@backstage-community/plugin-tech-radar": "^0.7.4",
     "@backstage/app-defaults": "^1.5.12",
     "@backstage/catalog-model": "^1.7.0",
     "@backstage/cli": "^0.28.2",
@@ -34,6 +37,7 @@
     "@backstage/plugin-permission-react": "^0.4.27",
     "@backstage/plugin-scaffolder": "^1.26.2",
     "@backstage/plugin-search": "^1.4.18",
+    "@backstage/plugin-search-common": "^1.2.15",
     "@backstage/plugin-search-react": "^1.8.1",
     "@backstage/plugin-techdocs": "^1.11.0",
     "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.16",
@@ -58,10 +62,7 @@
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "react-use": "^17.2.4",
-    "styled-components": "^6.0.0-rc.3",
-    "@backstage-community/plugin-github-actions": "^0.6.16",
-    "@backstage-community/plugin-stack-overflow": "^0.1.30",
-    "@backstage-community/plugin-tech-radar": "^0.7.4"
+    "styled-components": "^6.0.0-rc.3"
   },
   "devDependencies": {
     "@backstage/test-utils": "^1.7.0",

packages/app/src/components/search/GithubDiscussionsSearchResultListItem.tsx

@@ -0,0 +1,133 @@
+import React, { ReactNode } from 'react';
+import Box from '@material-ui/core/Box';
+import Chip from '@material-ui/core/Chip';
+import Divider from '@material-ui/core/Divider';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import { Link } from '@backstage/core-components';
+import { ResultHighlight } from '@backstage/plugin-search-common';
+import { HighlightedSearchResultText } from '@backstage/plugin-search-react';
+import { SearchDocument } from '@backstage/plugin-search-common';
+import { EntityRefLink } from '@backstage/plugin-catalog-react';
+
+export interface GithubDiscussionsDocument extends SearchDocument {
+  author: string;
+  category: string;
+  labels: {
+    name: string;
+    color: string;
+  }[];
+  comments: {
+    author: string;
+    bodyText: string;
+    replies: {
+      author: string;
+      bodyText: string;
+    }[];
+  }[];
+}
+
+const useStyles = makeStyles(theme => ({
+  item: {
+    alignItems: 'center',
+  },
+  box: {
+    flexWrap: 'wrap',
+  },
+  itemText: {
+    width: '100%',
+    wordBreak: 'break-all',
+    marginBottom: '1rem',
+  },
+  user: {
+    display: 'inline-flex',
+    margin: theme.spacing(1),
+  },
+}));
+
+/**
+ * Props for {@link GithubDiscussionsSearchResultListItem}.
+ *
+ * @public
+ */
+export interface GithubDiscussionsSearchResultListItemProps {
+  icon?: ReactNode;
+  result?: GithubDiscussionsDocument;
+  highlight?: ResultHighlight;
+  lineClamp?: number;
+}
+
+/** @public */
+export function GithubDiscussionsSearchResultListItem(
+  props: GithubDiscussionsSearchResultListItemProps,
+) {
+  const { result, highlight, icon, lineClamp } = props;
+  const classes = useStyles();
+  if (!result) return null;
+
+  return (
+    <>
+      <ListItem className={classes.item}>
+        {icon && <ListItemIcon>{icon}</ListItemIcon>}
+        <Box className={classes.box}>
+          <ListItemText
+            className={classes.itemText}
+            primaryTypographyProps={{ variant: 'h6' }}
+            primary={
+              <Link noTrack to={result.location}>
+                {highlight?.fields.title ? (
+                  <HighlightedSearchResultText
+                    text={highlight.fields.title}
+                    preTag={highlight.preTag}
+                    postTag={highlight.postTag}
+                  />
+                ) : (
+                  result.title
+                )}
+              </Link>
+            }
+            secondary={
+              <Typography
+                component="span"
+                style={{
+                  display: '-webkit-box',
+                  WebkitBoxOrient: 'vertical',
+                  WebkitLineClamp: lineClamp,
+                  overflow: 'hidden',
+                }}
+                color="textSecondary"
+                variant="body2"
+              >
+                {highlight?.fields.text ? (
+                  <HighlightedSearchResultText
+                    text={highlight.fields.text}
+                    preTag={highlight.preTag}
+                    postTag={highlight.postTag}
+                  />
+                ) : (
+                  result.text
+                )}
+              </Typography>
+            }
+          />
+          <Box>
+            {result.author && (
+              <div className={classes.user}>
+                <EntityRefLink entityRef={`user:default/${result.author}`} />
+              </div>
+            )}
+            {result.category && <Chip label={result.category} size="small" />}
+            {result.labels.length > 0 &&
+              result.labels.map(({ name }) => {
+                return <Chip key={name} label={name} size="small" />;
+              })}
+          </Box>
+        </Box>
+      </ListItem>
+      <Divider />
+    </>
+  );
+}

packages/app/src/components/search/SearchResultCustomList.tsx

@@ -1,64 +1,83 @@
 import React from 'react';
 
 import { List } from '@material-ui/core';
-import { SearchResult, DefaultResultListItem } from '@backstage/plugin-search-react';
+import {
+  SearchResult,
+  DefaultResultListItem,
+} from '@backstage/plugin-search-react';
 
 import { CatalogSearchResultListItem } from '@backstage/plugin-catalog';
-import { StackOverflowSearchResultListItem, StackOverflowIcon } from '@backstage-community/plugin-stack-overflow';
+import {
+  StackOverflowSearchResultListItem,
+  StackOverflowIcon,
+} from '@backstage-community/plugin-stack-overflow';
 import { CatalogIcon, DocsIcon } from '@backstage/core-components';
 import { TechDocsSearchResultCustomListItem } from './TechDocsSearchResultCustomListItem';
+import {
+  GithubDiscussionsSearchResultListItem,
+  GithubDiscussionsDocument,
+} from './GithubDiscussionsSearchResultListItem';
+import { GitHubIcon } from '@backstage/core-components';
 
 const SearchResultCustomList = () => {
-    return (
-        <SearchResult>
-            {({ results }) => (
-                <List>
-                  {results.map(({ type, document, highlight, rank }) => {
-                    switch (type) {
-                      case 'software-catalog':
-                        return (
-                          <CatalogSearchResultListItem
-                            key={document.location}
-                            result={document}
-                            highlight={highlight}
-                            rank={rank}
-                            icon={<CatalogIcon />}
-                          />
-                        );
-                      case 'techdocs':
-                        return (
-                          <TechDocsSearchResultCustomListItem
-                            key={document.location}
-                            result={document}                            
-                            highlight={highlight}
-                            rank={rank}
-                            asListItem={true}
-                            icon={<DocsIcon />}
-                          />
-                        );
-                      case 'stack-overflow':
-                        return (
-                          <StackOverflowSearchResultListItem
-                            key={document.location}
-                            result={document}
-                            icon={<StackOverflowIcon />}
-                          />
-                        );
-                      default:
-                        return (
-                          <DefaultResultListItem
-                            key={document.location}
-                            result={document}
-                            highlight={highlight}
-                            rank={rank}
-                          />
-                        );
-                    }
-                  })}
-                </List>
-              )}
-        </SearchResult>
-    )
-}
+  return (
+    <SearchResult>
+      {({ results }) => (
+        <List>
+          {results.map(({ type, document, highlight, rank }) => {
+            switch (type) {
+              case 'software-catalog':
+                return (
+                  <CatalogSearchResultListItem
+                    key={document.location}
+                    result={document}
+                    highlight={highlight}
+                    rank={rank}
+                    icon={<CatalogIcon />}
+                  />
+                );
+              case 'techdocs':
+                return (
+                  <TechDocsSearchResultCustomListItem
+                    key={document.location}
+                    result={document}
+                    highlight={highlight}
+                    rank={rank}
+                    asListItem
+                    icon={<DocsIcon />}
+                  />
+                );
+              case 'stack-overflow':
+                return (
+                  <StackOverflowSearchResultListItem
+                    key={document.location}
+                    result={document}
+                    icon={<StackOverflowIcon />}
+                  />
+                );
+              case 'github-discussions':
+                return (
+                  <GithubDiscussionsSearchResultListItem
+                    result={document as GithubDiscussionsDocument}
+                    highlight={highlight}
+                    icon={<GitHubIcon />}
+                  />
+                );
+              default:
+                return (
+                  <DefaultResultListItem
+                    key={document.location}
+                    result={document}
+                    highlight={highlight}
+                    rank={rank}
+                  />
+                );
+            }
+          })}
+        </List>
+      )}
+    </SearchResult>
+  );
+};
 
-export const searchResultCustomList = <SearchResultCustomList />;
+export const searchResultCustomList = <SearchResultCustomList />;

packages/backend/package.json

@@ -16,6 +16,7 @@
     "build-image": "docker build ../.. -f Dockerfile --tag backstage"
   },
   "dependencies": {
+    "@backstage-community/plugin-search-backend-module-github-discussions": "file:./search-collator-0.6.0.tgz",
     "@backstage-community/plugin-stack-overflow-backend": "^0.2.22",
     "@backstage/backend-common": "^0.25.0",
     "@backstage/backend-defaults": "^0.5.2",

packages/backend/src/index.ts

@@ -22,6 +22,12 @@ backend.add(import('@backstage/plugin-search-backend-module-techdocs'));
 backend.add(
   import('@backstage/plugin-search-backend-module-stack-overflow-collator'),
 );
+backend.add(
+  import(
+    '@backstage-community/plugin-search-backend-module-github-discussions'
+  ),
+);
+
 backend.add(import('@backstage/plugin-techdocs-backend'));
 
 backend.add(import('@backstage/plugin-permission-backend'));