Backstage GitHub Pull Requests Board Plugin

Install the frontend package

1. From your Backstage root folder run

   Copy

   yarn --cwd packages/app add @backstage-community/plugin-github-pull-requests-board

2. This plugin has no backend package to install

Configure GitHub auth in app config

1. Add a GitHub auth provider in app config

   Copy

   auth:
     providers:
       github:
         development:
           clientId: ${GITHUB_CLIENT_ID}
           clientSecret: ${GITHUB_CLIENT_SECRET}

2. Make sure your GitHub app grants read only permission for Pull Requests

3. Add a GitHub integration entry if you use GitHub com or GitHub Enterprise

   Copy

   integrations:
     github:
       - host: github.com

Add the card to the Group page classic frontend

1. Open packages/app/src/components/catalog/EntityPage.tsx

2. Import the card

   Copy

   import { EntityTeamPullRequestsCard } from '@backstage-community/plugin-github-pull-requests-board';

3. Render it on the Group page Overview route

   Copy

   import React from 'react';
   import { Grid } from '@material-ui/core';
   import { EntityLayout } from '@backstage/plugin-catalog';
   import { EntityGroupProfileCard, EntityMembersListCard, EntityOwnershipCard } from '@backstage/plugin-catalog';
   import { Entity } from '@backstage/catalog-model';
   import { useEntity } from '@backstage/plugin-catalog-react';
   import { EntityTeamPullRequestsCard } from '@backstage-community/plugin-github-pull-requests-board';
   
   const GroupOverviewContent = () => {
     const { entity } = useEntity();
     return (
       <Grid container spacing={3}>
         <Grid item xs={12} md={6}>
           <EntityGroupProfileCard variant="gridItem" />
         </Grid>
         <Grid item xs={12} md={6}>
           <EntityOwnershipCard variant="gridItem" />
         </Grid>
         <Grid item xs={12}>
           <EntityMembersListCard />
         </Grid>
         <Grid item xs={12}>
           <EntityTeamPullRequestsCard />
         </Grid>
       </Grid>
     );
   };
   
   export const groupPage = (
     <EntityLayout>
       <EntityLayout.Route path="/" title="Overview">
         <GroupOverviewContent />
       </EntityLayout.Route>
     </EntityLayout>
   );

Optional limit the number of pull requests per repo

<Grid item xs={12}>
  <EntityTeamPullRequestsCard pullRequestLimit={5} />
</Grid>

Add a Pull Requests tab classic frontend

1. Open packages/app/src/components/catalog/EntityPage.tsx

2. Import the content component

   Copy

   import { EntityTeamPullRequestsContent } from '@backstage-community/plugin-github-pull-requests-board';

3. Add a new route under the Group page

   Copy

   import React from 'react';
   import { EntityLayout } from '@backstage/plugin-catalog';
   import { EntityTeamPullRequestsContent } from '@backstage-community/plugin-github-pull-requests-board';
   
   export const groupPage = (
     <EntityLayout>
       <EntityLayout.Route path="/" title="Overview">
         {/* your overview content */}
       </EntityLayout.Route>
       <EntityLayout.Route path="/pull-requests" title="Pull Requests">
         <EntityTeamPullRequestsContent />
       </EntityLayout.Route>
     </EntityLayout>
   );

Optional limit the number of pull requests per repo on the tab

<EntityTeamPullRequestsContent pullRequestLimit={5} />

Use the new frontend system

1. Open packages/app/src/App.tsx

2. Import the plugin feature from the alpha entry point

   Copy

   import githubPullRequestsPlugin from '@backstage-community/plugin-github-pull-requests-board/alpha';

3. Add it to the features array

   Copy

   import { createApp } from '@backstage/app-defaults';
   
   export const app = createApp({
     features: [
       githubPullRequestsPlugin,
     ],
   });

4. Place the UI where you want users to see it
   You can still use the same card or content components shown above in your Entity page files

Where this shows up in your app

• The card shows on the Group Overview page when you add EntityTeamPullRequestsCard to the Group layout
• The tab shows on the Group page when you add EntityTeamPullRequestsContent under the Pull Requests route

What the plugin reads

• Open pull requests across repositories owned by the team for the current Group entity
• It uses the signed in user session from the GitHub auth provider
  Make sure the provider has read only permission for Pull Requests