🚀

Create a Status Nudge Button in Github (10 min)

🍎

Before you begin this tutorial, make sure you've completed the Quick Start Guide

I don’t know about you but I really struggle with communicating through GitHub sometimes. As a developer, I do a lot of work there, but I can’t keep up with comments in there. (Maybe I just haven’t figured out how to configure my Github notification settings… but that seems like another post entirely 😂 )

At PixieBrix, we developed a way to click one button when we're inside an issue on Github and it sends a message to Slack letting the team know what we're working on. (This was built with PixieBrix, of course!)

Here's how it looks!

Want to build this for your teams? It’s just a couple of steps.

Prefer to watch a video instead of read the step by step? We've got a video walkalong here!

Start with a Button Brick

  1. First, navigate to this URL Open the PixieBrix page editor (F12 on your keyboard) Add a button brick, and click the arrow to select a button on GitHub. I wanted to use the bright green one that looks like “new issue”, so I went ahead and grabbed that but you can grab another one.
image

2.. Set the caption to “Send Status” - you can name it whatever you’d like, this is just the text that shows up on the button so it won’t impact any of the other steps!

image

You’ll also want to specify which sites you want to see this on. I just want to see it on Github.

Grab the Username

Okay buckle up cause this is the hardest part of the whole thing, but I promise if you just follow these steps one at a time, you’ll be okay!

  1. Add the “Simulate a DOM event” brick.
📢

Wondering what we’re doing here? We’re clicking the profile button so it shows your username at the top right! Go ahead and try it out for yourself and see.

You can then select the profile button, or you can just copy the code below in the `selector` box.

[aria-label='View\ profile\ and\ more']

Then for the event option select “click”.

This is what it should look like (click to zoom):

image

  1. Add the “Wait for a DOM element” brick

We need to wait a second for the profile menu to load before looking for the username, so we just add this brick and tell it what we’re waiting for.

Again, you can select (with the blue pointer button)OR you can just type what I’ve got here.

.user-profile-link strong

image

If you want, you can define a max wait time, but I just left this part blank and it seems to work fine.

  1. Add the Jquery Selector Reader brick

Now we need to go look for the value of that specific element! (Aka… the GitHub username!) Basically, what we’re saying here is “hey remember that thing I told you to wait for it to load? Well, it loaded. Can you go look up what it is and save that as a value I can reference later?”

Just add a property (I called it username to make it easy to reference, but you can call it whatever you like), and for the value, you just need to use the exact same value you used in the last brick.

.user-profile-link strong

I also changed the output at the top to gh so that I could reference that more easily later. Once you do these changes, your brick should look like this.

image
  1. Add one last “Simulate a DOM event’ Brick

Now we just need to close the profile menu so the page goes back to normal! This brick should look exactly like the one we made in step 1, so follow those same steps.

image

And that’s all! You’ll now be able to reference the GitHub username with {{@gh.username}} ! (But more on that in a few steps.)

Select a status and add a message

You could go straight to Slack at this point and just send a message saying “Brittany is working on this issue”, but I wanted to get a little fancier. I wanted to give the user a way to select from different types of statuses and also be able to add a message or additional notes before posting to Slack.

To do that, I added two “Show a modal or sidebar form” bricks. In the first one, I created a dropdown list of options where the user could describe exactly what action they were taking on the issue. (I also made it look more fun with emojis 🎉.)

In the first brick, I added a new field called “status” and set it to a dropdown input type. I then created a handful of options describing the different things I might be doing on an issue.

image

I also updated the “Submit Button Text” to say “Next” instead of “Submit(to make it more clear there was another step involved after this.)

I made sure the output for this brick was “form”.

Then in my other brick, I confirmed the output at the top was form2 and added another field called “message” that was a “paragraph type”.

image

Send all the data to Slack

We’ve got all sorts of data now! Let’s review:

  • Github username ✅
  • Github URL and title of issue (from the context in the first brick) ✅
  • Status ✅
  • Additional message to go with a status ✅

Time to plug it all into Slack!

Add the “Send a Slack message” brick.

If you haven’t already, you’ll need to add the Incoming Webhooks app to your Slack workspace.

🔈 You can skip this step if you join our PixieBrix community because we already created a webhook for you - this way you can see your messages appear in our #webhook channel!

To join our community click here and use the webhook below!

https://hooks.slack.com/services/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

Alternatively - create your own webhook from scratch! Go to https://app.slack.com/apps-manage/T9S72BDRA and in the top right select your workspace. Then search for the “Incoming Webhooks” app and add it! Once you do that, you’ll be able to generate a URL for posting data to your Slack workspace. Grab that URL and head back to PixieBrix.

In the hookURL section, paste that link.

Next up you can configure the botName and iconEmoji if you want, or you can leave those blank!

Lastly, set the channel you want to post this in. I typed the name here - don’t forget the # ! (If I wanted to get fancier, I could have made a dropdown modal option that let you select which channel to post this in, but for my use case, I just wanted it to go to one channel.)

And now for the trickiest part, you’ll need to map out all your data. If you’ve followed along and named all your outputs and variables exactly as I did, you should be able to copy and paste this.

<https://www.github.com/{{@gh.username}}|{{@gh.username}}> is {{@form.status}} 
<{{{@input.url}}}|{{{@input.title}}}> {{@form2.message}}

If that doesn’t work (and you’ll find out real soon!), then likely something went a little wonky in here.

image

Now click save, and go try it out! Head over to Github and you should see that new button on the  If it doesn’t work, keep reading for some debugging tips.

Not working? Here’s a checklist for debugging

  • Did you grant PixieBrix permission to view the page? Hit refresh on the page while you have the page inspector open and see if something pops up asking you to grant access.
  • Use the “Window alert” brick as a “console.log” where you can type in variables and see what PixieBrix thinks its returning. If it’s not returning the right thing there, then you need to change your variable.
  • Make sure you have the right syntax on your fields.
    • Creating a URL in the slack message is <URL|text>
    • Variables should have two {{ around them and an @ symbol at the front
  • Make sure you have the right name of the `output` section where you’re referencing the variable
  • When in doubt, try to pull out all these pieces and build one at a time. Forget about the GitHub username, just start with the status and see if you can make that map, then the GitHub URL, then the GitHub username, etc. Take everything out and slowly add it back in to see what doesn’t work.

If you’re still stuck after that, post in the PixieBrix community and someone will jump in to help you out!

Prefer to watch this instead of read along? Here's a video tutorial!

If you prefer to watch a video instead, follow along here: