Create Issues from Directus with GitHub

Speaker 0: At the bottom of almost every page in our documentation, we have this little custom built widget, which we use to gather feedback on what's good and what isn't so good and needs improvement. And all of this data ends up in a director's project, which we periodically look through. And then anything that needs actioning, we create issues for in the director's repository. Now, in today's episode of quick connect, we're going to build a little connection to GitHub that automates the act of adding of taking feedback in direct us and turning it into issues. So I'm really excited to show this to you.

I've created this little sample repository. So there's my username, phase on overload slash sample repo. I'm pointing that out because it's included a little later on. In this little sample directors project I have, I've set up the following data model. The idea is that content is the user's actual feedback that they type, and then we will add a button to the side of the item.

And then when we click on it, we will add an issue to that repository automatically after gathering a little actionable summary manually. And then we will populate it here. We'll go off to GitHub, make the issue, and return the issue number here so we can click right through to it. And the only thing we need for today other than, of course, the director's project is a personal access token from GitHub. There are loads of ways you can authenticate.

We're gonna use these fine grained personal access tokens. You provide the access to the repository, and the only permission we require is read and write on issues because that's all this token is going to do. I've done this ahead of time. So with that, I think we're ready to get started. So over in Directus, let's create our flow.

We're going to call this one add feedback item to GitHub. And in the trigger setup, we're gonna make this a manual trigger on the feedback collection, only on the item pages. Now there's a difference between a piece of feedback and the remedial action, and issues describe the remedial action that needs to take place. So we're gonna use a confirmation dialogue here. We're going to add 1 input.

I'm going to call this input summary or maybe title. Yeah. Title. That will just be a string input and save. So now if we go to an item, we see here over on the side, there is this flow, add feedback item to GitHub.

You click it, and it pops up this box where we can gather a title. For example, if we go find this very valid piece of feedback, which we got recently, I can add item feedback to GitHub. The issue is there are no docs on connecting an existing database. So the remedial action would be add docs on connecting existing databases. Right?

Run flow on current item. Let's go to our flow and refresh it, and we'll see the one invocation of this flow. We see here that inside of the body, we have the title, which is what we entered into that box just now. And we have the key, the unique identifier for that piece of feedback in the director's collection. Now what isn't visible here is the actual feedback itself, which is important.

So what we need to now do is go from the just having this key to having the entire feedback object. We'll do that with a read data, read data, operation. I think we'll call this one feedback. We'll give it full permissions from the feedback collection, and we want to access trigger dot body dot keys 0. So that's that ID.

If we hit save now, this feedback operation will return the full object, including the including the content itself. Let's just quickly test that. Click this button. We'll paste in the title. We'll refresh the flow.

So we get the new log. Let me see in the second payload, we get the content here. That'll be important to add into the context of the issue. Now we're actually gonna go off to GitHub, and we're gonna add this issue to our repository. So we'll call this 1 GitHub, and we'll make a web request.

This should be a post request to the following API endpoint. /repos/username slash repository slash issues. And what we need to do is add a header to identify ourselves. This is where that personal access token is gonna come in. Authorization bearer space personal access token.

Save. And now in the request body, we can add some additional, information for the issue. Now there's quite a lot we can add here. I think we're gonna keep it quite minimal for the sake of this episode of quick connect. We will add a title.

And what we'll do for the title is we will use that prompt that we entered. So trigger dot body dot title. And let's actually add the users, let's add the users feedback as written in the body in the actual, like, comments that goes with the PR. Let's make it a quote so it's clear. This is marked down now, and we want feedback dot content.

Let's just make this really clear. We'll add a couple of new lines, and we'll say this feedback was provided, via the docs feedback widget. Just so it's clear that this is a quote and where that quote has come from. Let's, let's remove that with underscore in the key and hit save. Let's save that.

Let's add this feedback again, and let's run flow on current item. Let's go back to our issues for this repository and hit refresh, and we see that the new item has been successfully created. And in there, there's the quote, and then there is the, the additional text. We can do lots when we create an issue, including adding labels, adding to projects, but you can refer to the API documentation, about these extra bits and what's suitable for your use case. Now this, this issue is issue number 7.

Let's refresh and look at the logs, of that issue. Oh, that's the first time. This is the latest time. And we see this big payload has come back inside of data here. We have the title, which was our little summary that we typed in, and we also have the issue number 7.

Just before continuing, I just wanna note that inside of these little button links here, I've added a view on GitHub button, which is specifically linked to that repository. So that is the repository name, and it'll append the issue number. So what we wanna store an issue is just the number. Let's add one final operation here. Let's make this an update data, operation to feedback, full access.

Once again, we're gonna update the trigger dot, trigger dot body dot keys 0. That's it. And the payload that we're gonna add here, what we're actually gonna update with is the summary, which is our remedial action. You could choose to call this action, but, you know, it's called summary here. So that's gonna be the trigger dot body dot title what we entered in that pop up box and the issue number itself.

GitHub. And the reason we can call it GitHub is that was the name of the operation, which returned the data dot data dot number. So let's hit save. And now we should be able to hang out just in here. Let's, pick another piece of feedback here.

We will add this feedback to GitHub, clarify extension location, run flow on current item. Oh, we got a little undefined there, so something's wrong. The issue is indeed 8, which is great. There was one issue there. The summary is undefined.

So let's just dig into that for a moment. The value we want is in payload body title. Let's update this. Trigger 2 g's dot body dot title. That was just a little typo there.

So let's do this once more. This one's kind of already done. Let's do this one again. Here we are. Oh, not there.

We'll run the flow. Boom. There we go. So that's the summary we typed in. That's the issue number.

We click the button. The issue is open, and now there's this lovely link between where feedback is provided and tracking the remedial action. The other nice thing about this, of course, is inside of our items, we can do a filter. So we can say, hey. I only want to show where, you know, the issue is empty.

IE, these are the items that still require some form of of response if appropriate. So, yeah, this was a huge amount of fun. It was just a little quick project, which I think is gonna actually enrich my day to day life. So I'm quite chuffed about that. Thank you so much for joining me in QuickConnect.

It's been a pleasure. Have a wonderful day. Bye for now.