Serverless Kanban Board for GitHub Issues

Why waste time and money paying for a Ticket Tracker when you already work in GitHub? Now, you don't have to.

• Features
  • Multiple Repositories
  • Linked Issues and Pull Requests
  • Real-Time Collaboration
  • Filtering
  • Milestone Planning
  • Moving Cards
  • Task Lists
  • CI Status and Merge Conflict
  • Burnup Chart
  • Issue Images
  • Pull Request to non-default branch
  • Batch-Edit Labels in Multiple Repositories
  • Review Filtering
  • Add and Remove Reactions
• Examples
• Development
  • How Does it Work?
• TODO List

Features

Multiple Repositories

Multiple Repositories in an organization can be shown on a board (from different organizations too!). The repository is shown in gray next to the Issue number.

Linked Issues and Pull Requests

Just add #123 or orgName/RepoName#123 to the Issue or Pull Request body and linked Issues will show up with the column they are in, both below the Card and in the preview popup.

Real-Time Collaboration

By clicking the :pencil2: icon next to the card title, multiple people can edit the Issue Body at once (ie in a meeting), and when editing is done, one person clicks Save to GitHub.

Features:

• send anyone the link to edit
• real-time preview of Markdown
• references to Issues show with their state and board column
• Sequence, State, Gantt, and other diagrams are supported (using mermaid)

Filtering

• cards can be filtered by label, milestone, board column, or user
• filters can be inclusive as well as exclusive

Milestone Planning

When doing Milestone (or Sprint) planning there is a view to easily move cards into milestones

Moving Cards

Cards can be dragged from one column to the next

Task Lists

By using the - [ ] notation in the body of an Issue or Pull Request, the progress of an Issue is shown in the top-right corner of a Card.

CI Status and Merge Conflict

• CI Status shows up as a green :heavy_check_mark: or a red :x: on the top-right corner of a card
• Merge conflicts are shown with a yellow :warning: and have a diagonal striped background

Burnup Chart

Why Burnup instead of Burndown?

Shows a burnup chart for a Milestone (ie "Sprint" or "Iteration"). If you use select multiple repositories it will include all of them.

It also skips when nothing was opened or closed that day/month/year (useful to see weekends or holidays).

Issue Images

If an Issue or Pull Request contains an image then it will be shown in the Issue

Pull Request to non-default branch

Sometimes Pull Requests go to a branch other than the main branch. This makes it clear when that happens.

Batch-Edit Labels in Multiple Repositories

If you need to rename a column or remove a duplicate label you can get to this page from the Settings dropdown next to the filter link.

Review Filtering

Reviews can be filtered by pull request author, review author and meta-review author.

Add and Remove Reactions

You can add or remove your own reactions directly on gh-board.

Examples

Just specify a GitHub repository in the URL and off you go!

• openstax/tutor-js
• openstax/tutor-js + tutor-server (multiple repositories)
• huboard/huboard
• jquery/jquery
• Or wildcards! (must be logged in) using http://philschatz.com/gh-board/#/r/openstax:tutor-js|*

Development

• npm start to start up the dev server and go to http://localhost:8080
• npm run build to generate the JS and CSS files in ./dist

How Does it Work?

• JavaScript calls the GitHub API and pulls in the Issues for a given repository.
  • Since there is no server to do OAuth, people need to provide a GitHub token which is stored in localStorage
• It uses the first repository to get the Issue Labels and Milestones.
• There are special Labels which represent the board columns (in the format # - Column Title)
• To be a "Good API Citizen" gh-board uses eTags provided by GitHub and saves them in localStorage (or IndexedDB)

Hosting your own Forked Version

1. create a fork
2. switch to the gh-pages branch
3. make a commit and push it to gh-pages (to trigger GitHub to start hosting the files)
4. go to https://${USERNAME}.github.io/gh-board/

To make edits and push them up on GitHub

1. make edits in the src directory in master
2. commit your changes
3. run npm run deploy

To update your fork with the upstream (this repo)

1. git pull https://github.com/philschatz/gh-board.git master
2. run npm run deploy

TODO List

• [x] combine Issue and the Pull Requests that fixes it
• [x] handle dragging in multiple repos:
  1. auto-create the label in the new repo (confirm first)
• [x] add checkbox for selecting multiple repos in dashboard
• [x] select between Issue-centric and PullRequest-centric view
• [x] support milestone (sprint) planning by making each milestone a column
• [x] show labels unique to each repository
• [x] linked Issues & PR's should include the title
• [x] collaboratively edit Milestones and any GitHub file by going to /p-file/:repoOwner/:repoName/:branch/path-to-file
• [x] add a list view in addition to a board
  • [ ] Sort by Due At, Updated At, and ascending/descending
• [ ] add a way to add labels/milestones to an Issue (autocreate the label/milestone in the repo)
• [ ] cache issues-updated-since requests and CI status requests in Session Storage instead of IndexedDB so they can be cleared easier
• [ ] add effort labels XS, S, M, L, XL
• [ ] add GitHub search