What can we help you with?

Git UI app

 

monday-dev-banner (2).png

 

Who can use this feature:
Available only for monday dev

 

The GitHub Integration that you already know and love can be integrated into your monday dev workflows. But what if we told you that you could view real-time synced data from GitHub directly within your board? That's exactly what we want to present to you with the GitHub UI app!

 

What is GitHub UI?

GitHub UI is an app that can be added as a widget within your item card view to preview data from your GitHub repositories. You can customize the app to show all of your GitHub branches, commits, pull requests, and the CI/CD status for every one of your development tasks. It is synced with your GitHub account to show you only real-time data. 

 

How to set it up

Open up the item card of any of the items on your board and click the "+" to add Git UI from the Item Views Center. The app will open up as a new Git UI tab. Now, simply click Connect to GitHub. Group 64 (75).png

 

Note: If the app has not been pre-configured to the board you want to use it on, simply click the '+' and select Git UI from the Item Views Center. 

 

You'll be redirected to the GitHub page pictured below, where you can click Install to continue. Group 64 (76).png

 

You are then given the option to sync all repositories or to select specific repositories and then click Install if you agree to the terms. 

 

Note: It's important to note that the permissions listed here are required by GitHub. Under no circumstances does approving these permissions grant monday.com access to sensitive data within your GitHub account.

 

Group 64 (77).png

When you reach the following screen listing permissions, click Authorize to continue. Once again, we want you to note that monday.com will only have access to general account information and activity, but will never have access to read the data you upload to GitHub. Group 64 (78).png

 

Click the "x" in the top-right corner of the pop-up screen to start using the app right in the item card where you started the flow! 

 

How does it work?

Using the Item ID Column, you can connect the items on your board to issues and pull requests in GitHub. Let's take a look at how it works.

 

Tip: If you need help adding and setting up the Item ID Column or want to learn more about it, check out this article

 

The Item ID Column will automatically assign a random ID number to each of the items or subitems in your board. You can copy this ID to your clipboard by simply clicking the number, as shown below. download (29).gif

 

You can now paste the ID number into either the name or description of any pull request or issue. Using the ID number generated by monday.com will create the link between a pull request or issue in GitHub and the right monday dev item.Group 64 (84).png 

Tip: You can connect existing issues and pull requests by editing them to add the item ID. 

 

Now you can see the issue you created under the Issues tab in the relevant item card. Group 64 (80).png

 

What information is displayed?

The data displayed in the GitHub UI app is categorized into tabs that include Pull requests, Issues,  Branches, and Commits

 

Pull requests

The Pull requests tab lists each pull request in the style of a monday dev item. Though you can't interact with the columns, all of the important information is visible. The requests are listed vertically and the relevant information is listed horizontally under the following columns:

 

Show me the columns! 
  • Title - the name of the pull request, which is also a direct link to the file in GitHub
  • Repository - which repository the changes are from
  • Status - the working status of the request
  • Author - the requestor
  • Reviewers - the individuals or team that is set to review changes
  • Labels - the label associated with the pull request
  • Changes - a live count of the number of changes made
  • Last updated - a live indication of how long ago the last changes were made

 

Group 64 (83).png

 

Note: If a team member uses the same email address with GitHub and with monday dev, the GitHub UI app will apply the user's monday dev profile picture under the Author and Reviewers columns. 

 

Issues

The Issues tab lists all issues that have been labeled with the same item ID. They are structured like items just as the pull requests are, and are organized by the following columns:

 

Show me the columns! 
  • Title - the name of issue, which is also a direct link to the file in GitHub
  • Repository - which repository the issue is from
  • Number - how many issues are present
  • Status - the working status of the issue
  • Author - the creator of the issue
  • Assignees - the individuals or team that is assigned to solve the issue
  • Labels - the label associated with the issue
  • Created at - the time or date on which the issue was created
  • Last updated - a live indication of how long ago the issue was created

 

Group 64 (85).png

 

Branches

The Branches tab shows all of the branches related to any given item in your board. They are organized into the following columns: 

 

Show me the columns! 
  • Name - the file name of the branch, directly linked to the branch in GitHub
  • Repository - which repository this branch is from
  • Author - the creator of the branch
  • Base branch - the originating branch 
  • Commits - how many commits there have been to this branch
  • Last Updated - a live indication of how long ago the last changes were made
  • Pull request - a link to either create a new pull request, or a link to the existing pull request in GitHub

 

Group 64 (81).png

We've included a script that automatically creates a branch connected to your item, meaning you don't have to manually input your item ID to connect the two. 

 

Tip: You can create a new pull request by clicking the Create PR button under the Pull request column in the Branches tab. You'll see it appear instantly in GitHub as well as in your "Pull requests" tab!

 

Commits

The Commits tab shows all of the branches related to any given item in your board. They are organized into the following columns: 

 

Show me the columns! 
  • Message - the message about this commit
  • Repository - which repository this commit is from
  • Branch - which branch this commit is located on
  • Author - the creator of the branch
  • Created at - the time of creation

 

Group 64 (82).png

Summarize your data

While the itemized list of all of your issues, pull requests, and branches gives you specific details, the Summary view will show you a visual breakdown of the aggregated data in your GitHub app! 

To show your app's summary, click the 3-dot menu at the top right corner of your app and then click Settings, as shown below. Group 64 (87).png

 

Click on the dropdown menu under Select Git UI view and select Summary. Now you can see all of your data organized into:

  • Pull requests - the number of requests and a battery-style representation of their statuses
  • Issues - the number of issues and a battery-style representation of their statuses
  • Stakeholders - the number of stakeholders and their monday profile pictures
  • Duration - the total amount of time all of this data has been open for

Group 64 (88).png

 

Tip: You can hover over any of the battery charts to see what status each color represents and how many items are labeled with each status. If you hover over a profile picture the name of the stakeholder is displayed, and if you hover over the duration you can see the start and end dates for this period!

 

If you have any questions, please reach out to our team right here. We’re available 24/7 and happy to help.