Github Search Module For Github Issues

workspaces/github-issues/.changeset/friendly-panthers-worry.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-search-backend-module-github-issues': minor
+---
+
+Added new search backend module for indexing github issues.

workspaces/github-issues/plugins/github-issues/README.md

@@ -56,6 +56,29 @@ const RenderGitHubIssuesCard = () => (
 );
 ```
 
+### Search integration
+
+It's also possible to enable indexing of Github Issues from your organazation by implementing the github issues [search backend module](plugins/search-backend-module-github-issues).
+
+You can then add the `GithubSearchResultListItem` to your `SearchPage.tsx` inside the `SearchResult` component
+
+### Imports:
+
+```tsx
+import { GithubSearchResultListItem } from '@backstage-community/plugin-search-github';
+import { GitHubIcon } from '@backstage/core-components';
+```
+
+### Add the component
+
+```tsx
+<SearchResult>
+  <GithubSearchResultListItem icon={<GitHubIcon />} />
+</SearchResult>
+```
+
+![alt text](image.png)
+
 ## Configuration
 
 Both `GithubIssuesPage` and `GithubIssuesCard` provide default configuration. It is ready to use out of the box.

workspaces/github-issues/plugins/github-issues/package.json

@@ -43,6 +43,8 @@
     "@backstage/integration": "^1.15.0",
     "@backstage/integration-react": "^1.1.32",
     "@backstage/plugin-catalog-react": "^1.13.1",
+    "@backstage/plugin-search-common": "^1.2.14",
+    "@backstage/plugin-search-react": "^1.8.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",

workspaces/github-issues/plugins/github-issues/src/components/GithubIssues/GithubIssuesSearchResultListItem/GithubIssuesSearchResultListItem.tsx

@@ -0,0 +1,110 @@
+/*
+ * Copyright 2024 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 { Link } from '@backstage/core-components';
+import {
+  IndexableDocument,
+  ResultHighlight,
+} from '@backstage/plugin-search-common';
+import { HighlightedSearchResultText } from '@backstage/plugin-search-react';
+import Box from '@material-ui/core/Box';
+import Chip from '@material-ui/core/Chip';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import { makeStyles } from '@material-ui/core/styles';
+import React, { ReactNode } from 'react';
+
+const useStyles = makeStyles(
+  {
+    flexContainer: {
+      flexWrap: 'wrap',
+    },
+    itemText: {
+      width: '100%',
+      wordBreak: 'break-all',
+      marginBottom: '1rem',
+    },
+  },
+  { name: 'GithubIssuesSearchResultListItemItem' },
+);
+
+/**
+ * Props for {@link GithubIssuesSearchResultListItemItem}.
+ *
+ * @public
+ */
+export interface GithubIssuesSearchResultListItemItemProps {
+  icon?: ReactNode | ((result: IndexableDocument) => ReactNode);
+  result?: IndexableDocument;
+  highlight?: ResultHighlight;
+  rank?: number;
+}
+
+/**  @public */
+export function GithubIssuesSearchResultListItemItem(
+  props: GithubIssuesSearchResultListItemItemProps,
+) {
+  const result = props.result as any;
+
+  const classes = useStyles();
+
+  if (!result) return null;
+
+  return (
+    <>
+      {props.icon && (
+        <ListItemIcon>
+          {typeof props.icon === 'function' ? props.icon(result) : props.icon}
+        </ListItemIcon>
+      )}
+      <div className={classes.flexContainer}>
+        <ListItemText
+          className={classes.itemText}
+          primaryTypographyProps={{ variant: 'h6' }}
+          primary={
+            <Link noTrack to={result.location}>
+              {props.highlight?.fields.title ? (
+                <HighlightedSearchResultText
+                  text={props.highlight.fields.title}
+                  preTag={props.highlight.preTag}
+                  postTag={props.highlight.postTag}
+                />
+              ) : (
+                result.title
+              )}
+            </Link>
+          }
+          secondary={
+            props.highlight?.fields.text ? (
+              <HighlightedSearchResultText
+                text={props.highlight.fields.text}
+                preTag={props.highlight.preTag}
+                postTag={props.highlight.postTag}
+              />
+            ) : (
+              result.text
+            )
+          }
+        />
+        <Box>
+          {result.labels?.map((tag: string) => (
+            <Chip label={tag} size="small" />
+          ))}
+        </Box>
+      </div>
+    </>
+  );
+}

workspaces/github-issues/plugins/github-issues/src/components/GithubIssues/GithubIssuesSearchResultListItem/index.ts

@@ -0,0 +1 @@
+export * from './GithubIssuesSearchResultListItem';

workspaces/github-issues/plugins/github-issues/src/plugin.ts

@@ -65,3 +65,17 @@ export const GithubIssuesPage = githubIssuesPlugin.provide(
     mountPoint: rootRouteRef,
   }),
 );
+
+/** @public */
+export const GithubIssuesSearchResultListItem: (
+  props: SearchResultListItemExtensionProps<GithubIssuesSearchResultListItemItemProps>,
+) => JSX.Element | null = searchGithubPlugin.provide(
+  createSearchResultListItemExtension({
+    name: 'GithubIssuesSearchResultListItem',
+    component: () =>
+      import('./components/GithubIssuesSearchResultListItemItem').then(
+        m => m.GithubIssuesSearchResultListItemItem,
+      ),
+    predicate: result => result.type === 'github',
+  }),
+);

workspaces/github-issues/plugins/search-backend-module-github-issues/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

workspaces/github-issues/plugins/search-backend-module-github-issues/README.md

@@ -0,0 +1,55 @@
+# @backstage-community/plugin-search-backend-module-github-issues
+
+This search module for GitHub indexes GitHub issues and makes them searchable inside your Backstage instance. This allows for better transparency and exposes your issues to a wider audience, facilitating better communication of help wanted for open-source projects within your organization.
+
+## Installation
+
+To configure the plugin using the new backend system:
+
+1. In the `packages/backend/src/index.ts` file, add the following:
+
+   ```typescript
+   import { createBackend } from '@backstage/backend-defaults';
+
+   const backend = createBackend();
+
+   backend.add(
+     import('@backstage-community/plugin-search-backend-module-github-issues'),
+   );
+
+   backend.start();
+   ```
+
+## Configuration
+
+### Environment Variables
+
+To configure the module, you need to set the following environment variables:
+
+- **`search.collators.github.org`** The organztion to which we make the search.
+- **`search.collators.github.query`** The actual query string used to make a search at the github api. Example: is:issue is:open org:backstage
+
+### GitHub Credentials
+
+#### Token
+
+**Important:** The GitHub token, which is necessary for authentication, should be managed within your Backstage integrations configuration. The token must be added to your GitHub integration settings, and the plugin will retrieve it through the `GithubCredentialsProvider`.
+
+Ensure that your GitHub integration in the Backstage configuration includes the necessary token for the `GithubCredentialsProvider` to work correctly.
+
+#### App
+
+You can also authenticate using your github app. [Read more here.](https://backstage.io/docs/integrations/github/github-apps)
+
+**Note**: If you're using the app method, you'll have to ensure that the org is inside the allowedInstallationOwners.
+
+### YAML Configuration Example
+
+```yaml
+search:
+  collators:
+    github:
+      org: backstage
+      host: github.com
+      query: is:issue is:open org:backstage
+```

workspaces/github-issues/plugins/search-backend-module-github-issues/config.d.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright 2023 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 { SchedulerServiceTaskScheduleDefinitionConfig } from '@backstage/backend-plugin-api';
+
+export interface Config {
+  search?: {
+    collators?: {
+      /**
+       * Configuration options for `@community-plugins/search-backend-module-github` collator.
+       */
+      github?: {
+        /**
+         * The target that this provider should consume.
+         *
+         * @example "https://github.com/backstage"
+         */
+        org: string;
+        /**
+         * The host configuration for the GitHub instance to search.
+         *
+         * @default 'github.com'
+         */
+        host?: string;
+        /**
+         * The schedule for how often to run the collation job.
+         *
+         * @default { frequency: { minutes: 10 }, timeout: { minutes: 15 }, initialDelay: { seconds: 3 } }
+         */
+        schedule?: SchedulerServiceTaskScheduleDefinitionConfig;
+        /**
+         * Query to search for issues. For more information on the query syntax, see the GitHub documentation.
+         * @see https://docs.github.com/en/github/searching-for-information-on-github/searching-issues-and-pull-requests
+         *
+         * @example 'is:issue is:open org:backstage'
+         *
+         */
+        query: string;
+      };
+    };
+  };
+}

workspaces/github-issues/plugins/search-backend-module-github-issues/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@backstage-community/plugin-search-backend-module-github-issues",
+  "description": "The github-issues backend module for the search plugin.",
+  "version": "0.1.0",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.cjs.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "backend-plugin-module"
+  },
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/backend-plugin-api": "^1.0.0",
+    "@backstage/config": "^1.2.0",
+    "@backstage/integration": "^1.15.0",
+    "@backstage/plugin-search-backend-node": "^1.3.2",
+    "@backstage/plugin-search-common": "^1.2.14",
+    "@octokit/graphql": "^5.0.0",
+    "fetch-mock": "^11.1.5"
+  },
+  "devDependencies": {
+    "@backstage/backend-test-utils": "^1.0.0",
+    "@backstage/cli": "^0.27.1",
+    "@octokit/graphql-schema": "^15.25.0",
+    "msw": "^1.0.0"
+  },
+  "files": [
+    "config.d.ts",
+    "dist"
+  ],
+  "configSchema": "config.d.ts"
+}