Looking for working example of requestJira with Forge UI Kit 2

Forge Forge UI Kit and Custom UI
1

Hi,
I can’t make work the example for Product APIs provided in https://developer.atlassian.com/platform/forge/ui-kit-2/compare/
The declaration part is missing and I also wonder how to get the ‘route’, because it is not supposed to come from forge/api…
Thanks for your help!

import api, { route } from "@forge/api";
import { requestJira } from '@forge/bridge';
import React from 'react';

export const fetchHasPermission = async (permission) => {
  const res = await requestJira(route`/rest/api/3/mypermissions?permissions=${permission}`);
  const data = await res.json();
  return data.permissions[permission].havePermission;
1 Like
2

Apologies, the example in that guide is wrong. You don’t need ‘route’ for requestJira in UI Kit 2. We’ll fix that asap.

In UI Kit 2, you use the Forge bridge as documented here e.g.

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

const response = await requestJira('/rest/api/3/issue/ISSUE-1');
console.log(await response.text());

So your example would be more like

import { requestJira } from '@forge/bridge';
import React from 'react';

export const fetchHasPermission = async (permission) => {
  const res = await requestJira(`/rest/api/3/mypermissions?permissions=${permission}`);
  const data = await res.json();
  return data.permissions[permission].havePermission;

Sorry again!

1 Like
3

Thank you Adam, I saw that you have updated the doc!

The direct call works for me (first code sample you gave). But from App(), it does not.
My index.jsx is:

import React, { useState } from 'react';
import { requestJira } from '@forge/bridge';

const App = () => {
  const isAdministrator = useState(async () => await fetchHasPermission("ADMINISTER"))[0]

  return (
    <>
      <Text>Is administrator: {isAdministrator}</Text>
    </>
  );
};

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

I get a ’ Minified React error #31’ ( Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.), but I can’t find a way to fix it.

4

This is what I finally found, with an example before the App() and one inside.

I don’t know if I should use “useEffect” each time a requestJira is involved, but this is currently the only way I found. What do you think?

import React, { useEffect, useState } from 'react';
import { requestJira } from '@forge/bridge';
import { fetchHasPermission } from "../components/users"

const isAdministrator = await fetchHasPermission("ADMINISTER");
console.log('My permission: ' + isAdministrator)

const App = () => {
  const [id, setId] = useState(null);

  useEffect(async () => {
    const response = await requestJira('/rest/api/3/issue/TP-3');
    const issue = await response.json();
    console.log(issue)
    setId(issue.id)
  }, []);

  return (
    <>
      <Text>Is administrator: {isAdministrator ? 'Yes' : 'No'}</Text>
      <Text>Issue Id: {id ? {id} : 'Loading...'}</Text>
    </>
  );
};

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