Part 2: Call a Jira API

Using the @forge/bridge package, you'll learn how to make REST calls to an authenticated Jira endpoint.

Make an API call

In this section, you'll modify your app to call the Jira REST API. Using the requestJira function from the @forge/bridge package, you'll get the comments on a Jira issue in the form of an array and print the number of comments to the console.

The @forge/bridge package simplifies HTTP operations and contains other Forge APIs such as the Storage and Properties APIs. For this tutorial, you'll also use the UI Kit hook useProductContext to get context information about the Jira issue the app is on.

1. In the app's top-level directory make sure your tunnel is running:

   1
   2
   forge tunnel
   

2. Navigate to the src/frontend directory and open the index.jsx file. Import the requestJira from @forge/bridge package by adding the following to the top of the file:

   1
   2
   import { requestJira } from '@forge/bridge';
   

3. Copy the following code to create a function that calls the Jira REST API by using the requestJira function:

   1
   2
   const fetchCommentsForIssue = async (issueIdOrKey) => {
     const res = await requestJira(`/rest/api/3/issue/${issueIdOrKey}/comment`);
     const data = await res.json();
     return data.comments;
   };
   

   This function takes an issueIdOrKey to call the REST API with path /rest/api/3/issue/${issueIdOrKey}/comment.

4. We need to get the ID of the issue we are currently on, which is stored in the product context.

   1. To get the current product context, we import the useProductContext hook from @forge/react:

      1
      2
      import ForgeReconciler, { Text, useProductContext } from '@forge/react';
      

   2. Modify the start of the App component so it automatically retrieves the context:

      1
      2
      const App = () => {
        const context = useProductContext();
      
      
        const fetchCommentsForIssue = async () => {
          // extract issue ID instead expecting one from function input
          const issueId = context?.extension.issue.id;
        
          // modify to take issueId variable
          const res = await requestJira(`/rest/api/3/issue/${issueId}/comment`);
          const data = await res.json();
          return data.comments;
        };
      

5. Modify the start of the App function to add a comments variable to store the comments data:

   1
   2
   const App = () => {
     const context = useProductContext();
   
     // add these code to keep track of comments
     const [comments, setComments] = React.useState();
     console.log(`Number of comments on this issue: ${comments?.length}`);
   

6. Add the following code inside App, below the fetchCommentsForIssue function, so it automatically runs when context finishes loading and updates the data stored in comments:

   1
   2
   React.useEffect(() => {
     if (context) {
       // extract issue ID from the context
       const issueId = context.extension.issue.id;
   
       fetchCommentsForIssue(issueId).then(setComments);
     }
   }, [context]);
   

   This code uses the issue ID to call fetchCommentsForIssue, then updates the data stored in comments

Your index.jsx file should look like the following:

1
2
import React from 'react';
import ForgeReconciler, { Text, useProductContext } from '@forge/react';
import { requestJira } from '@forge/bridge';

const App = () => {
  const context = useProductContext();

  // add these code to keep track of comments
  const [comments, setComments] = React.useState();
  console.log(`Number of comments on this issue: ${comments?.length}`);

  const fetchCommentsForIssue = async () => {
    // extract issue ID instead expecting one from function input
    const issueId = context?.extension.issue.id;
  
    // modify to take issueId variable
    const res = await requestJira(`/rest/api/3/issue/${issueId}/comment`);
    const data = await res.json();
    return data.comments;
  };

  React.useEffect(() => {
    if (context) {
      // extract issue ID from the context
      const issueId = context.extension.issue.id;

      fetchCommentsForIssue().then(setComments);
    }
  }, [context]);

  return (
    <>
      // This UI will be updated in the next part of this tutorial to display number of comments onto the screen
      <Text>Hello world!</Text>
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Enable usage analytics (optional)

If you haven't enabled usage analytics yet, we recommend you do so using following command:

1
2
forge settings set usage-analytics true

This command provides the consent required by Forge to collect data about your app's deployments and installations (including error data). This, in turn, helps us monitor the overall performance and reliability of Forge. The collected data also helps us make better decisions on improving Forge's feature set and performance.

For information about how Atlassian collects and handles your data, read our Privacy Policy.

Test your app

1. Create a new Jira issue, or open the one you created earlier.
2. Add a comment to the Jira issue. For example, a comment with Hello from the comments.
3. Refresh the Jira issue view.
4. Check the output of the app in your browser's developer console. The number of comments on the issue displays as follows:

   1
   2
   Number of comments on this issue: 1
   

When you save the index.jsx file, the tunnel output in the developer console may display a permission-scope-required error. To address this, you'll need to add the required permissions first and this is covered in the next section.

Set required permissions

Your app calls a remote resource; namely, the Jira REST API. As such, you'll need to grant your app the right permissions. To do this, you'll need to add the required OAuth 2.0 scope to the app's manifest.

In the steps below, you'll do this by using the forge lint command. This command will automatically add the required scope to your manifest.yml file (in this case, read:jira-work).

1. Run the following command:

   1
   2
   forge lint --fix
   

2. Whenever you change permissions, you must upgrade the app's installation. Stop your tunnel process and run these commands to deploy and install your change:

   1
   2
   forge deploy
   forge install --upgrade
   

3. Start the tunnel again:

   1
   2
   forge tunnel
   

Next step

In the next tutorial, you'll learn how to make changes to your app's frontend using the UI Kit components of Forge.