Create a status nudge button in Github

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

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!

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

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

The following steps are written instructions from the video above.

1. Start with a Button Brick

First, navigate to an issue in GitHub. Feel free to use this URL as an example. Open the PixieBrix Page Editor (fn + F12 on your keyboard, then select the PixieBrix tab).

Add a Button starter brick. Click "Add" then choose button.

Click the arrow to select a button on GitHub that you want to duplicate. I chose the “New issue” button, but you can select any other one.

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.

2. Grab the Username

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

a) 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.

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.

b) Add the “Wait for a DOM element” brick

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.

c) Add the Extract from Page brick

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.

d) Copy the Simulate DOM Event brick from above.

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.)

3. Select a status and add a message

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!

4. 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 ✅

• Optional message to go with a status ✅

Time to plug it all into Slack!

1. Add the Slack Send Simple Message brick.

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.

{{@gh.username}} is {{@form.status}} <{{@input.url}}|{{@input.title}}> {{@form.message}}

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!

🐛 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 it's 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

🙋 Need some help with building? Head over to the Slack Community, and we’ll gladly help you!