Work Item Hierarchy Field application now available

[#1]

I’m a big fan of Jira Plans and in particular the additional work item hierarchy levels that it provides. These can be used to help co-ordinate and report progress on large projects involving multiple teams.

Unfortunately I find that some users won't interact with Plans very often because there can be no obvious link from the board they're working on to the plans where it is used.

The breadcrumb trail in the work item details screen only shows the immediate parent and project and is very much aimed towards standard users that do not have access to the additional hierarchy levels afforded to premium users.

As a consequence most users don’t immediately understand how work “ladders up” to higher level objectives.

I decided to put together an application to address this challenge...

Ideally I would have liked to have swapped out the existing breadcrumb trail but that’s not currently possible. I considered the various Forge extension points on the work item details page and in the end decided that for maximum prominence / minimum clicks it would be best to create a custom field.

The application was written using UI Kit and only took a couple of hours from start to finish and really shows the power of the Forge platform !!

The app simply grabs the work item from the extension context that Forge provides and uses the REST API to iteratively walk up the parent links until it runs out of ancestors.

These are then rendered as links into the field.

If your team uses Jira Plans then you might find this a useful add-on.

The application is available for free on the marketplace here: https://marketplace.atlassian.com/apps/3518614169/work-item-hierarchy-field

Post installation setup instructions can be found here: https://draperd.atlassian.net/wiki/external/ZGQ4YTgxOGJiM2VjNDg1NDg0ZWU0MWUzMWZmYzMzZjU 

[Vikrant Yadav]

Great Custom field @Dave  
We can easily see All Level of Hierarchy on view screen

[Josh]

@Dave this is really interesting and helpful!

[Debbie Jolley]

This is such a useful app @Dave 

Not sure if it's something funky our end, but the display isn't resolving nicely for me :-( (ticket names redacted)

[Dave]

Thanks for the feedback @Debbie Jolley ... are those work item type icons custom by any chance? This might be a known issue with the image rendering (I believe there is an open bug for this) but I'll look into this - I really appreciate the feedback on this though.

It looks like the Epic icon is rendering fine and is an out-of-the-box icon which is why it probably renders ok.... I'll dig into this today and see if I can reproduce and come up with a workaround or fix.

Again, I really appreciate you letting me know! This kind of feedback is so helpful! 

[Debbie Jolley]

@Dave thanks for getting back to me.
Programme and Workstream are definitely icons we downloaded from the web - I thought Theme was one of the standard ones but it doesn't look like the new style so am not 100% sure (see attached image)

[Debbie Jolley]

Hi @Dave 

Just coming back to this as a perfect use case for the app came up in discussion earlier in the week.
I was wondering if you've managed to find a fix or workaround for the image rendering yet?

Thanks

[Dave]

Hey @Debbie Jolley .... unfortunately I've not had any time to take a look at this as I've been snowed under with regular work and this is a side-project for me. I've not been able to reproduce the problem on my instance which makes it hard to verify any fix I add. I'll endeavour to take a look at this next week though - thanks for your patience!

[Dave]

@Debbie Jolley It would be really helpful if you could let me know what the broken image URL is ... you don't have to include your domain name if it's included (just swap it out for X.atlassian.net)

Also, are you using a custom domain at all? There are some workarounds that can manipulate the URL, but I need to make sure that any transformation function will work for your use case.

Thanks!

[Dave]

@Debbie Jolley I've gone ahead and pushed a speculative fix that might resolve the problem. Can you give it a try and let me know if it works? 

[Debbie Jolley]

@Dave 

I loved coming on line this morning to see your comments - and follow your brain process from I'll look at it next week, to hey why not take a look now while I'm thinking about it lol

So it was only right that I took at look at it today - and it looks so much better and it's now usable for us (see below).

Thank you again for creating a really usable app, and for responding to and addressing my feedback :-) 

[Dave]

Thanks @Debbie Jolley ... I really appreciate you letting me know that's it fixed the problem! I don't suppose it would be possible to trouble you for a short review on the marketplace would it? https://marketplace.atlassian.com/apps/3518614169/work-item-hierarchy-field?tab=reviews 

This would be really helpful for me! 

For anyone interested... there is a known issue here and I've reached out to the Forge team to let them know and it actually a known issue (see https://ecosystem.atlassian.net/browse/FRGE-680 ) 

The workaround I came up with was to create this function to attempt to convert the problematic URLs that I then call on all image sources:

const convertUrl = (url: string) => {

  let iconUrl = url;
  try {
    if (url.startsWith("https://api.atlassian.com/")) {
      const domain = window.location.ancestorOrigins[0];
      const imageUrl = new URL(iconUrl);
      const convertedImageUrl = `${domain}/rest/api/${imageUrl.pathname.split("/rest/api/")[1]}${imageUrl.search}`;
      iconUrl = convertedImageUrl;
    }
  } catch (e) {
    console.log("Could not convert image URL");
  }
  return iconUrl;
};