How to load web resource in web-panel in JIRA 8

[Kaustubh Agarwal]

for Jira Server 8.

I have a web resource module which I want to load as part of the vm in a web-panel.

atlassian-plugin.xml:

<web-panel key="bonfireGFWebPanel" location="atl.gh.issue.details.tab" weight="10">
<context-provider class="com.atlassian.bonfire.contextproviders.GreenFireContextProvider"/>
<resource name="view" type="velocity" location="/templates/bonfire/web/greenfire/greenfire-web-panel.vm"/>
<resource type="download" name="icon.png" location="includes/images/icons/capture_icon_grey_16.png" />
<label key="bonfire.gf.web.panel" />
<tooltip key="bonfire.gf.web.panel" />
</web-panel>

<web-resource key="greenfire-assets">
<resource type="download" name="greenfire-tab.css" location="includes/css/greenfire/greenfire-tab.css" />
<resource type="download" name="greenfire-tab.js" location="includes/js/greenfire/greenfire-tab.js"/>
<context>greenfire_resources</context>
</web-resource>

In my vm file, I have already tried to use:

$webResourceManager.requireResourcesForContext("greenfire_resources")

#requireResource("com.atlassian.bonfire.plugin:greenfire-assets")

Both of the above ways do not work. Neither the css, nor the js seem to be applied on the page.

A push in the correct direction would be helpful.

[Tim Sebastian]

Hi Kaustubh,

you are definitely on the right track.
Ideally, you can import them via:

$webResourceManager.requireResource("com.atlassian.bonfire.plugin:greenfire-assets")

However, some issues are shown async, and this means it requires you to also load them from within the frontend.
You might need to add this to your velocity file:

<script>
WRM.require("wr!com.atlassian.bonfire.plugin:greenfire-assets");
</script>

Tim Sebastian

[Tobias Binna]

@Tim Sebastian I always struggled with contexts and getting resources to load where they need to.

Tired both your solutions but the resources defined in the context do not load. I am not sure what I am doing wrong or where to find reliable information to better understand how this is supposed to work. XML definitions are generated by atlassian-webresource-webpack-plugin

The community is full of suggestions but it usually ends up being more like trial and error that could go on for days. Would be good if there is somewhere some documentation that explains the concept and how to do this.

Any pointers would be much appreciated.

[Tim Sebastian]

Hi Tobias,

Do you try to load a resource or a context with the above-shown snippets?

If you could show me the snippet you use to try to load the resources I might help.

[Tobias Binna]

You make a good and important point. I tried to load the context 🤦‍♂️ With requireResourcesForContext it works. Or also with requireResource but then by using the resource key prepended with the plugin key - as shown in your example above.