Can't display issuetype icon with custom image

Forge Forge UI Kit and Custom UI
, , ,
6

While I patiently wait for that fix, I managed a very hacky workaround and I’ll post here just in case anyone needs to do something similar and doesn’t have time to wait until Atlassian fixes the issue.

Based on another post, Requesting binary data with requestJira when using the Forge Bridge, I learned that forge functions are able to fetch the binary contents without being changed. With that knowledged, I wrote the following forge function (not frontend, this a “backend” function, defined in a forge module).

import api, {route} from "@forge/api";
const resolver = new Resolver();
resolver.define('requestJiraAsDataUrl', async(req) => {
    let restApi = req.payload.restApi
    let response =  await api.asUser().requestJira(route `${restApi}`, {})
    let contentType = response.headers.get('content-type')
    const arrayBuffer = await response.arrayBuffer();
    const base64 = Buffer.from(arrayBuffer).toString('base64')
    return `data:${contentType};base64,${base64}`
})

This function can be invoked from the CustomUI using @forge/bridge invoke function, like this:

let dataUrl:string = await invoke("requestJiraAsDataUrl", 
  {restApi: "/rest/api/2/universal_avatar/view/type/issuetype/avatar/10552?size=medium"})

Notice that you should not pass the whole avatar URL, you must strip down everything up to /rest.

This invocation will return the dataUrl for the given resource. That will be something like

data:image/png;charset=UTF-8;base64,iVBORw0KGgoAAAANSUhEUgAAADA...

This works because await api.asUser().requestJira has the required credentials in the request to fetch image.

Of course, it would be so much better if the api returned image URLs with the required tokens, so I could just set that URL directly into the img.src, but at least this solution will get you moving.

Cheers

1 Like