raulfdm / gh-open-prs

Dashboard to track projects PR's from an organization

Github Open PRs

Simple Page to track open PR's for specifics projects.

Before start

This project uses Github GraphQL API. Differently from their REST API, it requires you being Authenticated.

Generating a Token

In their documentation, they said you need the same kind of token as required for CLI's (check it here).

However, I would say, you get the follow permissions:

[x] repo (you need all in order to handle private proj.)
  [x] repo:status
  [x] repo:status
  [x] repo_deployment
  [x] public_repo
  [x] repo:invite
...

[x] admin:org
  [ ] write:org
  [x] read:org
...

Why? Just because this app does not need any right to write things, only read organization repositories.

How to use

Track your Repos

Basically you need to fill:

• Organization name;
• Repositories name split by comma;
• Github Token API

Then press search and everything will load :)

All your settings will be saved via Cookies since the Token (and maybe your repository names) are a sensitive information.

Filter by label

To only see specific label, you just need to click in the ones you don't have to see.

In order to keep the selection even if you close the App, this filter is saved via localStorage:

key: `pr_tracker_label_by_repo`
value: { <repoId>: <labelId>[] }

Cleaning up

If you want to remove all your data, it's only about:

1. open the app
2. Open your console
3. Application
4. Clear Site Data (must be localStorage and Cookies)

Development

The same as any modern JS app:

1. Fork/clone this project;
2. navigate inside the folder;
3. run pnpm to install dependencies;
4. then boot the server by running pnpm run dev

Then your app will be available at http://localhost:3000

Stack

• NextJS
• TypeScript
• ApolloClient
• Styled Components

Issues

Maybe this is just the beginning. Feel free to report issues, come up with suggestions or improvements. PR's are always open! :)

License

MIT

gh-open-prs's Issues

Fix background transparency

Currently the background-color from repo is transparent:

Add global filter my PR name

Also to avoid cmd + f to search for something, will be quite nice have a input field to filter based on ALL PR's title

Refactor README

The core settings has been changed from app config to on flight settings.

Rewrite everything.

VERY NICE TO HAVE: Show all repositories from an org and ask user to select which one to show

Get logo from Organization instead ask logo link

Refactor Project :)

The code itself can be much better.

Responsive image not working on Safari

Possible solution:

• https://stackoverflow.com/questions/43668836/responsive-image-not-working-on-safari-mac-and-safari-iphone
• philipwalton/flexbugs#173

Add Settings Panel

The idea here is to have a panel above the repositories where you can fill:

• Github API Token
• Org name
• Repos you want to listening in

And you press a button "Fetch" and it get all open PRs for those branches.

Also it saves in query param, where people can share across dev teams.

Add filtering by labels

It'll be quite nice to filter by label, like click in a label (out of PR list) and only show those..

Add a button to clean cookies and local storage

Better than ask user to clean via dev tools