Jira Server AUI button spinner not working

Jira Development Jira Server
1

Jira server version: 7.12.3
Compatible AUI version: 7.9.9

Hey, I have been developing a Jira server plugin and I have come across this problem.

I want to use the spinner when I click in a button to refresh my web panel information.

I added the dependency to the web resources with the right context:

<web-resource key="customer-insight-app-plugin-resources" name="customer-insight-app-plugin Web Resources">
    <dependency>com.atlassian.auiplugin:aui-spinner</dependency>
    <resource type="download" name="customer-insight-app-plugin.css" location="/css/customer-insight-app-plugin.css"/>
    <resource type="download" name="customer-insight-app-plugin.js" location="/js/customer-insight-app-plugin.js"/>
    <context>jira.view.issue</context>
  </web-resource>

Then, in the template, I requested the resource this way:

$webResourceManager.requireResource("com.atlassian.auiplugin:aui-spinner")
<button id="test-button-id" class="aui-button">TEST</button>

In my js file:

AJS.toInit(function () {
     var observers2 = new MutationObserver(function (mutations) {
            AJS.$("#test-button-id").unbind("click");
            AJS.$("#test-button-id").click(function (e) {
                var that = this;
                if (!that.isBusy()) {
                    that.busy();

                    setTimeout(function() {
                        that.idle();
                    }, 2000);
                }
            });
    }).observe(document.querySelector('body'), {childList: true});
});

According to the documentation linked above this is the right way to activate the animation, but i get this error every time:
Uncaught TypeError: d.isBusy is not a function

I’m probably not loading the dependency right…
Thank you in advance.

Best regards,

António Melo

2

Hi @antonio.melo,

The behaviour for adding spinners to buttons is exposed through the com.atlassian.auiplugin:aui-buttons web-resource. Include that one instead of the spinner resource, then it should start working.

Using a mutation observer to unbind and rebind an event handler to your button on every single change in your document seems very expensive. You could use a delegate event handler to avoid unnecessary code. A delegate event handler also avoids the need to wait until DomContentLoaded for the behaviour to start working. The following snippet should be equivalent:

AJS.$(document).on("click", "#test-button-id", function (e) {
                var that = this;
                if (!that.isBusy()) {
                    that.busy();

                    setTimeout(function() {
                        that.idle();
                    }, 2000);
                }
});
3

I have the exact same problem with a plugin I’m writing for bamboo 6.8.0 (AUI 7.9.9). No matter what resources I loaded, I always got the busy is not a function error. Using the browser I could see that ${webResourceManager.getResourceTags("com.atlassian.auiplugin:aui-buttons")} only results in a single CSS link being inserted - no JavaScript.

To debug this I unpacked auiplugin-7.9.9.jar file and found the missing javascript which was in ./src/js/aui/button.js. This file is referenced in META-INF/plugin-descriptor/es6.xml using key name internal-src-js-aui-button. I was able to load the missing JavaScript in my .ftl file with ${webResourceManager.getResourceTags("com.atlassian.auiplugin:internal-src-js-aui-button")}.

This made the spinner buttons work but also gave JavaScript errors due to duplicate library loading. This was because com.atlassian.auiplugin:internal-src-js-aui-button has dependencies on several other scripts and probably shouldn’t be called in either since its named internal.

In the end, I got this working by:

  1. Extract auiplugin-7.9.9.jar and copy src/js/aui/button.js inside my plugin to src/main/resources/js
  2. Add <resource type="download" name="button.js" location="/js/button.js"/> to the plugin web-resources in atlassian-plugin.xml
  3. Make sure the .ftl file loads the bundle
  4. After adding the JavaScript file, I got YUI Compress syntax errors, so I had to add <compressResources>false</compressResources> to pom.xml in the <configuration> for bamboo-maven-plugin

After making these changes, the example code works great. Hopefully this helps someone. Is there a simpler way to just load the buttons.js script without keeping my own copy?