Get the issue id/key from within a plugin using forge

Forge
,
1

Hello,

I’m new to Jira plugin development and I have a very simple issue, that I cannot solve. I couldn’t find any solutions and couldn’t fix it myself.

So, I create a forge app:

? Select a category: UI Kit
? Select a product: Jira
? Select a template: jira-issue-panel

In the backend, I try to get the issue key:

import Resolver from '@forge/resolver';
import api from '@forge/api';

const resolver = async ({ context }) => {
  try {
    // Get the issue key using the context object
    const issueKey = context.issue.key;

    // Return the issue key to the frontend
    return {
      issueKey: issueKey
    };
  } catch (error) {
    console.error('Error retrieving issue key:', error);
    return {
      error: 'Could not retrieve issue key.'
    };
  }
};

export const run = resolver;

In the frontend, I try to get it:

import { view, Text, Fragment, useState, useEffect } from '@forge/ui';
import api from '@forge/api';

const App = () => {
  const [issueKey, setIssueKey] = useState(null);  // Store the issue key

  // Fetch the issue key from the backend
  useEffect(() => {
    const fetchIssueKey = async () => {
      try {
        const res = await api.asUser().requestJira('/rest/api/3/issue/' + context.issue.key);  // Fetch the issue key using Jira API
        const data = await res.json();
        setIssueKey(data.key);  // Set the issue key in the frontend state
      } catch (error) {
        console.error('Error fetching issue key:', error);
        setIssueKey('Error retrieving issue key');
      }
    };

    fetchIssueKey();  // Call the function when the component loads
  }, []);

  return (
    <Fragment>
      <Text>The issue key is: {issueKey || 'Loading...'}</Text>
    </Fragment>
  );
};

export const run = view(App);

I get the error:

Error: Bundling failed: Module not found: Error: Can't resolve 'async_hooks' in '/home/user/source/jira/cbreq/node_modules/@forge/api/out/api', Module not found: Error: Can't resolve 'buffer' in '/home/user/source/jira/cbreq/node_modules/safe-buffer'*

*BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.*
*This is no longer the case. Verify if you need this module and configure a polyfill for it.*

*If you want to include a polyfill, you need to:*
*        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'*
*        - install 'buffer'*
*If you don't want to include a polyfill, you can use an empty module like this:*
*        resolve.fallback: { "buffer": false }

I tried it in so many different ways to get the key, but nothing works. Isn’t there a very basic example that works? I’m doing this since 8 hours and cannot figure it out. Please help.

2

Hi Andrew and Welcome

From the app front end in UI kit, you should use view.getContext() but this is an async function so you’ll need to handle that, as the forge App can’t be an async function.

One of the easier ways to do this is to use a react useEffect hook, for example:

const [key, setKey] = useState(null);

 useEffect(() => {
   const getKey = async() => {
     const context = await view.getContext();
     setKey(context.extension.issue.key);
   }

 getKey();
}, []);

and then in your apps return statement:

return (
    <>
        <Text>{key ? key : 'Loading...'}</Text>
    </>
  );

This code is from the second part of the Build your first app tutorial in Forge Quest.

To learn more about react hooks in Forge, you also might find A Deeper Look at Hooks in Forge - Work Life by Atlassian interesting.

if this helps, please mark it as the solution.

if you’re still stuck let me know.

Cheers
Mel

1 Like
3

Hi Mel,

thanks for your response. I already managed to draw some text, thats not an issue. The issue is that I cannot seem to get and render the issue id/issue key.

I tried it in many different ways, but none works and I believe it should be quite a simple example to do this, thats why I wanted to ask the community.

Thank you very much,
Kind Regards

4

Hello @AndrewSwoncen

Part of the reason why the request to the REST API isn’t working is that you haven’t provided a route for the requestJira() function:

requestJira(route'/rest/api/3/issue/' + context.issue.key);

so the URL path to the endpoint has not been properly constructed.

5

Ahh, sorry @AndrewSwoncen I forgot to modify my example code so it was getting the theme and not the issue key. Apologies for he confusion.

However, on inspecting your code a little more closely, I also see that you’re using the UI Kit 1 version, rather than the latest version of UI Kit. UI Kit 1 is now in the deprecation period. This version will no longer be supported or functional after 28 Feb 2025.

I think this might also be causing some confusion as most of our docs refer to the latest version of UI Kit - Is it possible you have an old version of the forge CLI installed?

I’d recommend upgrading to the latest forge cli version using

npm install -g @forge/cli@latest

Then, create your app using forge create and select the options as per your post above.

This will ensure you are no longer using @forge/ui which is in the process of being deprecated.

Once you’ve created the new app with the up to date version of UI kit, please see my response above which I’ve edited it to be clearer.

Finally, if you’re looking to learn more about building apps on Forge, you may find Forge Quest useful - it includes more in depth tutorials that guide you through different aspects of Forge.

Cheers!
Mel

1 Like