Collaborating Outside of GitHub: Getting Trello and GitHub Integrated

Trello is a collaboration tool used to organize projects into boards, lists, and cards. It’s inspired by the Kanban scheduling system popularized by Toyota. Kanban is Japanese for signboard. The idea is to have a board that provides a view of a proj­ect’s status and progress at a glance.

Often, a tool like Trello is combined with GitHub to manage a project. A project team may use Trello to manage the entire project, but use GitHub to host the code and assign specific code issues to developers. A card in Trello might correspond to multiple GitHub issues.

GitHub Project Boards are essentially Trello with GitHub already integrated into it. However, Project Boards within GitHub aren’t always the right fit for your team. Some teams have nondeveloper folks who don’t want to have to learn GitHub and may already be using Trello. Typically, it’s best to have all your proj­ect management in one place, so if that should be outside of GitHub, in Trello for example, you can still make it a part of your developer workflow with this integration.

A GitHub integration (what Trello calls a power-up) for Trello connects cards to GitHub issues, pull requests, and branches. In the next section, we walk through setting up the GitHub power-up.

1. Installing the GitHub power-up

The following installation instructions assume that you’ve already signed up for https://trello.com and created a project board:

If you’ve never used Trello, you can visit its guides at https://trello.com/en-US/guide. It is similar to GitHub Project Boards (see Chapter 3). For specific help on creating a board and cards, visit https://trello.com/guide/create- a-board.html.

  1. With a board open, make sure the menu is open.

If not, click in the top right to show the menu.

  1. Click the Power-Ups section of the menu, as shown in Figure 12-9. Clicking the Power-Ups button brings up a search dialog box for power-ups.
  2. Search for GitHub to find GitHub related power-ups.
  3. Click the Add button for the GitHub power-up to enable it.

Just like for any application, Trello may have GitHub power-ups (extensions/ integrations) that are built by GitHub and some that are built by other folks. Since GitHub’s API is public, folks can often create power-ups/extensions of their own. Be sure you’re always aware of the author of the power-up/ extension when you’re installing it. You may very well want to install from a third-party developer instead of GitHub itself because the features might be different. Regardless, you should make sure you’re aware of that choice. Don’t assume anything with “GitHub” in the title is made by GitHub the company.

  1. After you enable the power-up, click the gear icon in the corner to configure it.

You see a menu with the option to disable the power-up, or authorize it.

  1. Click Authorize Account.

An option to link your GitHub account appears.

  1. Click Link Your GitHub Account.

GitHub.com launches in your browser and prompts you to Authorize Trello, as shown in Figure 12-10.

Before clicking the Authorize trello button, make sure to click the Grant button next to any organizations that you want to connect with Trello. In my case, I’ll grant Trello access to the thewecanzone organization and then click the Authorize trello button to make the power-up active.

2. Using the GitHub power-up

The GitHub power-up is accessed via the power-up button on the back of any Trello card. If you haven’t already, go ahead and create a couple of cards.

To use the GitHub power-up on your Trello board, follow these steps:

  1. Click the card to access the back of the card.

Figure 12-11 shows a card that we created. The GitHub power-up shows up in the bottom right corner.

  1. Click the GitHub Power-Up button.

Four menu options appear:

  • Attach Branch
  • Attach Commit
  • Attach Issue
  • Attach Pull Request

  1. Click Attach Issue to bring up a repository search dialog box.
  2. Find the repository that contains the issue you want to attach to the card.

After you select the repository, you see a list of issues, as shown in Figure 12-12. You can also search for issues.

Clicking the issue from the drop-down list attaches it to the Trello card. After you attach the issue, the issue is displayed on the back of the Trello card.

A Trello card may be attached to multiple GitHub items. For example, repeat the previous steps, but choose Attach Pull Request instead of Attach Issue to attach a pull request to an issue. When you are done, you see both an issue and a pull request attached to the Trello card, as shown in Figure 12-13.

The front of the card shows a couple icons that indicate that this card is attached to GitHub. It shows an Octocat icon with a count of GitHub items attached to the card. It also shows pull request icon with a count to indicate the number of pull requests attached, as shown in Figure 12-14.

When you visit the issue or pull request on GitHub.com, you can see that the attachment is bidirectional. The GitHub issue now has a link to the trello card, as shown in Figure 12-15.

Source: Guthals Sarah, Haack Phil (2019), GitHub for Dummies, Wiley.

Leave a Reply

Your email address will not be published. Required fields are marked *