Create a status nudge button in Github (8 min)

I don’t know about you, but I struggle with communicating through GitHub sometimes. As a developer, I do a lot of work there, but I can’t keep up with the comments 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!

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

I chose the “New issue” button, but you can select any other one.

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!

You’ll also want to specify which sites you want this button to appear on. In this case, we only want it to appear on GitHub.

Now we need to add another brick to get the username of the person clicking the button (aka, who is logged in).

Click the + button underneath your Button Brick to add another brick.

Search for the Simulate DOM Event Brick, and then click + Add.

Click into the selector box to see a pointer button appear. Click that, and you can then select the profile button from the top right corner of your GitHub page…

… or copy the code below in the `selector` box.

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

In the Event field, select the click option.

This is what your configuration should look like.

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

Once again, select the + below your other brick to add another brick. This time search for the Wait for a DOM element brick, then press + Add.

Again, you can select (with the pointer button) OR type this into the field.

.user-profile-link strong

Your settings should look like this

You can leave the max wait time field blank.

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

Select the + below your other bricks to add another brick. Search for the Extract from Page brick, then press + Add.

Edit the property name (I called it username to make it easy to reference, but you can call it whatever you like), and for the value, use the same value you used in the last brick.

.user-profile-link strong

You can also change the output at the top to gh to more easily reference that later.

Now we need to close the profile menu, so the page returns to its standard look. This brick should look exactly like the one we made in step 1. Rather than adding another brick, we can copy the one we already made! Go to the Simulate a DOM brick, click the copy clipboard icon at the top of the bricks, and then paste it below the Extract from Page Reader.

And now you’ve opened the modal, gotten the username, and closed it! You’ll be able to reference the GitHub username with {{@gh.username}}! (But more on that in a few steps.)

We will give the user a way to select their action on the issue and provide an additional note before sending it to Slack.

We’ll add a “Show a modal or sidebar form” brick to do that. Select the + below your other bricks to add another brick. Search for the Show a modal or sidebar form brick, then press + Add.

Give the form a title, such as Update Status in Slack. You can add a description if you want or leave it blank.

Now, let’s create a status drop-down field for this form. Give it a name that you’ll use to reference the value later. I chose status. Update the Label value to update the text above the field. You can see the preview on the right side of the page if you’re wondering what it will look like.

You can add a field description or leave it blank.

Next, select an Input Type. I will choose Dropdown so people can quickly pick a status rather than have to write one. Add options by clicking the Add Item button. Set a default one to be the one you think would be most commonly used, perhaps something like “working on”. This is how your first field might look.

Add one more field by scrolling back to the top and selecting the + Add new field button. Call it message, and change the input type to Paragraph Text.

Your form should now look like this:

Finally, update the “Submit Button Text” to say “Send update” instead of “Submit”.

Now we just need to ship it off to Slack!

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

Time to plug it all into Slack!

You’ll need to set up a Slack integration if you haven’t already. You can do that by clicking the link below the Slack field. It’s as simple as going to the Integration page in the Admin Console, selecting + Add Integration, searing for Slack, and following the prompts to approve and connect your Slack workspace, like this.

Time to plug all our data into the format of a message! You can style the message however you want, but I prefer to style it like this.

Feel free to copy and paste that block if you don’t want to type it out.

Set the channel you’d like these updates posted to. Make sure to include the # in the name (or an @ if it’s a DM).

Now click save, and go try it out!

Head over to any Github issue and you should see that new button on the page. Click it, select a status, add a message if you want, click send, then go check slack for your message!

If you’re still stuck after that, head to the PixieBrix Slack Community, and someone will jump in to help you!