Add Configurable Input Controls to Custom Github Actions with Github Actions Toolkit Core
In this lesson, you'll learn how to configure a custom Github Action to intake input controls using workflow configurations. We'll use the getInput method from the Github Action Toolkit package Core to configure an input property and use it to dynamically set the character we fetch a quote for from a Futurama Character API.
Colby Fayock: [0:00] We're going to start off with the GitHub Action that logs a character quote from Futurama. Inside our code, we're using Axios to reach out to the API to grab a quote from Dr. Zoidberg. But the API supports multiple character, so what if we wanted to let them choose who they want?
[0:12] GitHub provides an Action's package called toolkit which allows us to easily create some core functionality for our Action. With those packages, we're going to use core. Here, we can use the input functionality to get an input that we can use for our Action.
[0:25] To get started, we're going to add that package with yarn add @actions/core and save it as a dev dependency. Once it's installed, we want to use it. We're going to say const core = require('@actions/core').
[0:36] The first thing we want to do is get a character name. We're going to say const character = core.getInput. We're going to call that input name character. To test that out, we can console.log that out, so console.log(character).
[0:50] If we try to run that file, we can see that we don't get anything for that console.log. First of all, we're not providing any input. Also, we're running this as a Node file, so we don't have the input to grab it from. In order to add that as an option for our workflow, we need to set up a new property in our action.yaml file.
[1:05] Inside that file, we're going to say property inputs. We're going to define our character input. We're going to set a description. We're going to say our Futurama character. Finally, as a default, we're going to say dr-zoidberg.
[1:18] Now in our test hello world file, let's use that. Under our Action we're going to say with, we're going to say character, let's use Bender. Before we push out those changes, let's go yarn build so we can make sure we have an up-to-date file.
[1:30] Once our Action runs, we can see it logging out Bender. Our quote's not using that yet, so let's use it. Inside this file, we're going to start by changing these quotes to template literals so that we can use that variable right in our path. Here, let's change dr-zoidberg to character.
[1:44] We can test that again, but we see an error. We can't provide that input from GitHub Actions, this is undefined. We're querying a guy that doesn't exist.
[1:53] Excess, I'd like to also set a default inside the code itself. We can say const DEFAULT_CHARACTER, and we can also say that's equal to dr-zoidberg. Then inside our code, if we can't find this getInput and have a valid response, we can just say || DEFAULT_CHARACTER. If we run our code again, we can now see our quote.
[2:10] Now that we're ready to go again, we can run yarn build to make sure we have an up-to-date file. Once we push that out to GitHub, we can see our job run where we can see our new quote from Bender.
[2:19] In review, we wanted to give an option to our hook to use any character from the API. To do this, we imported the @actions/core package where we used it to get an input called character.
[2:27] Inside our action.yaml file, we made sure to set up that inputs value to grab that character. In our test workflow, we also made sure to set that character to Bender. Once we pushed out all those changes, we can see our job run and log out a quote from Bender.