roadiehq/backstage-plugin-github-pull-requests

View and interact with GitHub Pull Requests on Backstage

backstage-plugin-github-pull-requests's Issues

No ApiProvider available in react context

I have tried to add this to our instance of backstage in local and getting this error :

index.esm.js?9424:formatted:112 Uncaught Error: No ApiProvider available in react context
    at useApiHolder (index.esm.js?9424:formatted:112)
    at useApi (index.esm.js?9424:formatted:119)
    at usePullRequestsStatistics (index.esm.js?8287:274)
    at PullRequestsStats (index.esm.js?8287:317)

Does it need any additional config to be added or does it expect any other plugin to be installed already ?

GitHub authentication based on access token / github application

Feature Suggestion

Right now, this plugin is depend on GitHub authentication, which is not something I am planning on using.
I would like this plugin to use the GitHub integration credentials (PAT for example) instead of relaying on the auth method.

Latest Backstage release (release-2021-05-27) breaks this plugin

When trying to navigate to the Pull Requests tab, the page crashes with the following error/stacktrace:

Uncaught TypeError: Cannot read property 'metadata' of undefined
    at isGithubPullRequestsAvailable (index.esm.js?b593:396)
    at Router (index.esm.js?b593:400)
    at renderWithHooks (react-dom.development.js?9f10:14804)
    at mountIndeterminateComponent (react-dom.development.js?9f10:17483)
    at beginWork (react-dom.development.js?9f10:18597)
    at HTMLUnknownElement.callCallback (react-dom.development.js?9f10:189)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?9f10:238)
    at invokeGuardedCallback (react-dom.development.js?9f10:293)
    at beginWork$1 (react-dom.development.js?9f10:23204)
    at performUnitOfWork (react-dom.development.js?9f10:22158)
react-dom.development.js?9f10:19528 The above error occurred in the <Router> component:
    in Router (created by RoutableExtension(Router))
    in RoutableExtension(Router) (created by Extension(Component))
    in Suspense (created by Extension(Component))
    in Extension(Component) (at EntityPage.tsx:124)
    in article (created by Content)
    in Content (created by RoutedTabs)
    in RoutedTabs (created by EntityLayout)
    in div (created by Page)
    in ThemeProvider (created by Page)
    in Page (created by EntityLayout)
    in EntityLayout (at EntityPage.tsx:118)
    in EntitySwitch (at EntityPage.tsx:154)
    in EntitySwitch (at EntityPage.tsx:272)
    in Outlet (created by CatalogEntityPage)
    in EntityLoaderProvider (created by CatalogEntityPage)
    in CatalogEntityPage (created by RoutableExtension(CatalogEntityPage))
    in RoutableExtension(CatalogEntityPage) (created by Extension(Component))
    in Suspense (created by Extension(Component))
    in Extension(Component) (at App.tsx:72)
    in Route (at App.tsx:72)
    in FlatRoutes (at App.tsx:69)
    in div (created by SidebarPage)
    in SidebarPage (at App.tsx:67)
    in Route (created by AppRouter)
    in Routes (created by AppRouter)
    in SignInPageWrapper (created by AppRouter)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppRouter)
    in AppRouter (at App.tsx:66)
    in RoutingProvider (created by Provider)
    in CssBaseline (created by WithStyles(CssBaseline))
    in WithStyles(CssBaseline) (created by AppThemeProvider)
    in ThemeProvider (created by AppThemeProvider)
    in AppThemeProvider (created by Provider)
    in AppContextProvider (created by Provider)
    in ApiProvider (created by Provider)
    in Provider (at App.tsx:63)
    in App (at src/index.tsx:6)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js?9f10:19528
scheduler.development.js?2f5b:178 Uncaught TypeError: Cannot read property 'metadata' of undefined
    at isGithubPullRequestsAvailable (index.esm.js?b593:396)
    at Router (index.esm.js?b593:400)
    at renderWithHooks (react-dom.development.js?9f10:14804)
    at mountIndeterminateComponent (react-dom.development.js?9f10:17483)
    at beginWork (react-dom.development.js?9f10:18597)
    at HTMLUnknownElement.callCallback (react-dom.development.js?9f10:189)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?9f10:238)
    at invokeGuardedCallback (react-dom.development.js?9f10:293)
    at beginWork$1 (react-dom.development.js?9f10:23204)
    at performUnitOfWork (react-dom.development.js?9f10:22158)

Expected Behavior

Plugin should work as expected and show PRs.

Current Behavior

Plugin displays a white page.

Possible Solution

Steps to Reproduce

Use this plugin with the latest Backstage release and navigate to the Pull Requests tab.

Context

Latest backstage release:
https://github.com/backstage/backstage/releases/tag/release-2021-05-27

Your Environment

N/A

Color of table headings differs for ID and CREATOR headings

Expected Behavior

All table headings have the same format, in particular having the same color.

Current Behavior

Super trivial, but I happened to notice that the table header words "ID" and "CREATOR" are in a slightly different color than the others. When light mode, they are normally black text but these two are dark grey. When dark mode, they are normally white text but these two are light grey.

Possible Solution

It seems the table generator wraps <Box> around the values for those columns when displaying the rows, I wonder if that somehow affects the header as well.

Steps to Reproduce

1. Use @roadiehq/[email protected]
2. View the table
3. Look at the table heading and squint your eyes 👀 😁

Context

Your Environment

• Plugin Version (version of this software e.g. v0.4.3): 0.6.3
• Backstage version (e.g. 0.1.1-alpha23): Latest from master (backstage/backstage@0451ac9)
• NodeJS Version (e.g. v12): 12.16.2
• Operating System and Version (e.g. Ubuntu 14.04): Windows 10 1909 WSL2 Ubuntu 18.04
• Browser Information (e.g. chrome 85): Microsoft Edge (Chrome engine 87)

yarn tsc errors

Expected Behavior

yarn tsc compiles

Current Behavior

yarn tsc gives 4 errors:

$ yarn tsc
yarn run v1.22.10
$ tsc
node_modules/@roadiehq/backstage-plugin-github-pull-requests/src/index.ts:25:8 - error TS2307: Cannot find module './plugin' or its corresponding type declarations.

25 } from './plugin';
          ~~~~~~~~~~

node_modules/@roadiehq/backstage-plugin-github-pull-requests/src/index.ts:26:15 - error TS2307: Cannot find module './api' or its corresponding type declarations.

26 export * from './api';
                 ~~~~~~~

node_modules/@roadiehq/backstage-plugin-github-pull-requests/src/index.ts:37:8 - error TS2307: Cannot find module './components/Router' or its corresponding type declarations.

37 } from './components/Router';
          ~~~~~~~~~~~~~~~~~~~~~

node_modules/@roadiehq/backstage-plugin-github-pull-requests/src/index.ts:43:8 - error TS2307: Cannot find module './components/PullRequestsStatsCard' or its corresponding type declarations.

43 } from './components/PullRequestsStatsCard';
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 4 errors.

error Command failed with exit code 2.

Possible Solution

A difference I saw - with 0.6.4 the npm module's package.json has the following at the top :

"main": "dist/index.esm.js",
"types": "dist/index.d.ts",

With 0.7.5 it is:

"main": "src/index.ts",
"types": "src/index.ts"

Steps to Reproduce

1. Create a new backstage app instance with npx @backstage/create-app
2. Run through README.md in this repo
3. Run yarn install && yarn tsc

Context

I was upgrading from 0.6.4 to 0.7.5 after the backstage release today.

Your Environment

Latest versions of backstage: cli, core, plugins etc

• Plugin Version (version of this software e.g. v0.4.3): 0.7.5
• Backstage version (e.g. 0.1.1-alpha23): release-2021-02-18
• NodeJS Version (e.g. v12): v14.15.4
• Operating System and Version (e.g. Ubuntu 14.04): Windows 10

Draft pull requests should be identifiable

One of these PRs is a draft. It would be useful to be able to tell this from the interface.

Error: No ApiProvider available in react context

Expected Behavior

Page renders

Current Behavior

Page not rendering, with the console error: Error: No ApiProvider available in react context

Possible Solution\

n/a

Steps to Reproduce

1. Follow the instructions in the README
2. visit component/x/pull-requests

Your Environment

• Plugin Version (version of this software e.g. v0.4.3): v0.7.6
• Backstage version (e.g. 0.1.1-alpha23): 0.6.0
• NodeJS Version (e.g. v12): v14
• Operating System and Version (e.g. Ubuntu 14.04): Docker node:14-buster
• Browser Information (e.g. chrome 85): chrome 88

Is there any plan of adding a Widget to this?

Hi, i was wondering if there is any plan to add a Widget to this plugin to be able to integrate it into the backstage catalog plugin.

I want to have it as an tab inside the catalog view.

Thanks!

Change Pull Requests Statistics card to load data from the github.com/project-slug annotation

Feature Suggestion

The PullRequestsStatsCard should use the github.com/project-slug to display the relevant statistics. Currently, the PullRequestsPage and it's PullRequestsTable components use an entity's defined github.com/project-slug however the stats card actually uses the location where the entity is defined.

For example, I temporarily defined an entity on my local file system for testing, loading it using the locations in app-config.yaml. In this entity I identified a real github.com/project-slug. When viewing the entity, the pull requests table displays properly, but the status card is empty as it seems to believe there are no PRs.

Similarly, I tried putting an entity in one repo called repoA, but defining the entity's slug as a DIFFERENT repo called repoB. Doing this results in the same - I see the pull request stats card displaying for repoA, but the pull requests TABLE is for repoB.

Ideally, they should be sourced from the slug. (personal opinion)

Possible Implementation

I believe the usePullRequestsStatistics hook needs to be updated to lookup the annotation on the entity, rather than the source location of the entity which is the same way the table does it?

https://github.com/RoadieHQ/backstage-plugin-github-pull-requests/blob/main/src/components/usePullRequestsStatistics.ts

Context

This would help define consistent information for more complex configurations where it may not be that every single entity is always in the same repo as the code it represents.

I wasn't sure if this was an enhancement (to change the current method) or a bug (to ensure the two components use the same data. 😁

Pull request statistics calculation on small repos are broken

When viewing pull request statistics on a very small repo, the mathematic calculations don't fully work.

Expected Behavior

Obtain PR statistics for any repo, regardless if it has a lot of PRs or none. In my use case of 2 open PRs and none closed/merged, I'd assume the average time to close should still be able to be calculated, but the merged to closed ratio instead of being NaN% should default to 0%.

Current Behavior

On a new repo I have, the homepage widget is broken. I tested with no PRs, one, and two, and the maths just expects that I've merged at least one. But it seems to be dividing by zero, thus resulting in NaN.

Possible Solution

• Average time when no PRs have ever been merged in a repo could be "Never".
• For ratio, a check if the divisor is zero should default to the display just being 0%.

Steps to Reproduce

1. Create an empty repo
2. Add a catalog yaml
3. Onboard to backstage
4. View the stats panel

Context

Likely should get some test cases in there where the number results back from the GitHub API would have the varying numbers 0 open, 0 closed / 5 open, 0 closed / 5 open, 15 closed, that sort of thing.

Your Environment

• Plugin Version (version of this software e.g. v0.4.3): 0.6.1
• Backstage version (e.g. 0.1.1-alpha23): 0.2.0
• NodeJS Version (e.g. v12): 12.16.2
• Operating System and Version (e.g. Ubuntu 14.04): Windows 10 1909, WSL2, Ubuntu 18.04
• Browser Information (e.g. chrome 85): Microsoft Edge (Chrome engine 86)

Release latest changes which updates backstage dependencies

Context

We are trying to override the Support Button config to point to custom slack channel rather than backstage.
This feature is available in the latest version of @backstage/[email protected]

This change has already been made in your repo but not been released yet.

npm registry does not have latest release 0.6.5 (or 0.6.6)

Expected Behavior

I should be able to download version 0.6.5 from npm registry

Current Behavior

only version 0.6.4 available.

Context

I'm getting warning about duplicate packages and outdated dependencies.

Your Environment

• Plugin Version (version of this software e.g. v0.4.3): 0.6.4
• Backstage version (e.g. 0.1.1-alpha23): latest release
• NodeJS Version (e.g. v12): 12
• Operating System and Version (e.g. Ubuntu 14.04): win 10
• Browser Information (e.g. chrome 85): chrome

Github PR plugin does not seem to work for private repo

Added the RoadieHQ/backstage-plugin-github-pull-requests version 0.6.2 via npm manager.

Expected Behavior

After the Github SSO login, I expect the PR details to be displayed from my private repo. The GITHUB_TOKEN that is set here to be accepted by the plugin

integrations:
  github:
    - host: github.com
      apiBaseUrl: https://api.github.com
      token:
        $env: GITHUB_TOKEN

Current Behavior

It allowed to SSO into Github but the plugin doesn't accept the github token. The result of this is I get a 404 Not found and it seems it is passing some sort of an authentication key which is not mine or not set in the GITHUB_TOKEN

backstage-plugin-github-pull-requests/src/api/GithubPullRequestsClient.ts

Line 43 in 301c329

const pullRequestResponse = await new Octokit({ auth: token, ...(baseUrl && {baseUrl}) }).pulls.list({

Steps to Reproduce

1. Add the RoadieHQ/backstage-plugin-github-pull-requests version 0.6.2 in app package.jso and plugin.ts
2. Set the github_token in the app-config.yaml which is

integrations:
  github:
    - host: github.com
      apiBaseUrl: https://api.github.com
      token:
        $env: GITHUB_TOKEN
catalog:
  rules:
    - allow: [Component, API, Group, User, Template, Location]
  locations:
    - type: file
      target: /app/catalog-info.yaml
  processors:
    githubOrg:
      providers:
        - target: https://github.com
          token:
            $env: GITHUB_TOKEN
scaffolder:
  github:
    token:
      $env: GITHUB_TOKEN
    visibility: private # or 'internal' or 'private'

auth:
  providers:
    github:
      development:
        clientId:
          $env: AUTH_GITHUB_CLIENT_ID
        clientSecret:
          $env: AUTH_GITHUB_CLIENT_SECRET`

Context

This doesn't let me use any of the Github PR related features.

Your Environment

• Plugin Version : 0.6.2
• Backstage version : 0.3.0
• NodeJS Version (e.g. v12): v 12
• Operating System and Version (e.g. Ubuntu 14.04): Mac OS
• Browser Information (e.g. chrome 85): Chrome v86

Font influences search bar position

First of all, thank you so much for creating this plugin and making it open source!

As you can see in the picture I stumbled into an issue when using the plugin while I has configured backstage to use another font (Poppins).

So steps to reproduce:

• Follow this guide https://backstage.io/docs/getting-started/app-custom-theme
• Add and configure plugin-github-pull-requests

GitHub PRs should work for private GitHub repos

Reported by a user:

I tried out the pull requests plugin the other day. Worked fine for public repo's but couldn't get it to read private ones. I'm not sure if this is because I created a github oauth app under my username and not my orgs. Have you tried reading from private repos?

Please try to reproduce. If it doesn't work, please ensure the PRs plugin can read from private repos.

Add pull request status (open/closed) to PR table

Feature Suggestion

On the pull request table, there are three very nice filter buttons to show open, closed, or all pull requests. However, when you pick the "all", you can't actually tell which category the PRs fall into.

Possible Implementation

As an equivalent to the GitHub interface, when viewing all PRs without looking at status, the icon indicates the PR is either green or purple:

Suggest showing an icon according to the status would be great, but even just a simple column with the status could be useful as well.

Context