Wim Deblauwe

Wim Deblauwe

Wim Deblauwe

Wim Deblauwe

JIRA Speakeasy extension to show 'key - summary' in an inline dialog

Posted at — Jul 1, 2011

We use JIRA at works to track issues (duh :)). What I need to do a lot is copy the key and summary of an issue to use as a checkin comment. If you copy paste it from an issue page you end up with this:

PRJ-234

This is the summary of the issue

But what I really want is this:

PRJ-234 - This is the summary of the issue

I have been meaning to give Speakeasy a try, so this seemed like a perfect candidate. After quite some experimentation and looking a few examples, I came up with the following:

/**
 * The main module
 *
 * @context atl.general
 */

var $ = require('speakeasy/jquery').jQuery;

$(document).ready(function () {
    var key = $("#key-val").text();
    var summary = $("#issue_header_summary:first").text();

    var inlineDialog = AJS.InlineDialog(AJS.$("#key-val"), 1,
        function (content, trigger, showPopup) {
            var dialogContent = '<div id="key-summary-popup">' + key + ' - ' + summary + '</div>';
            inlineDialog.refresh();
            $(content).html(dialogContent);
            showPopup();
        },
        {
            onHover: true, hideDelay: 1000
        }
    );
});

I am using an AUI Inline Dialog to show the content, so I can easily copy/paste it.

This is what it looks like in action if you hover over the issue key:

screenshot 019

The code is fairly straight forward if you know jQuery (which I did not before I tried to do this thing).

First, we need to find the actual key and summary text on the page so we can put them in the inline dialog:

var key = $("#key-val").text();

var summary = $("#issue_header_summary:first").text();

I used the Chrome developer console to find the id’s for the html elements. There is no specific id on the element that has the summary, but in the version of JIRA I tried (4.3.2) it was on the first child of the 'issue_header_summary' element.

The other part of the code is showing an inline dialog with the dynamically generated div. The documentation does not show how to do this, I took it from one of the examples.

Finally, add a splash of CSS to make it look nicer:

#key-summary-popup {
    padding: 5px;
}

I cannot seem to upload a zip file to this blog, so email me if you want the extension for your own use.

If you want to be notified in the future about new articles, as well as other interesting things I'm working on, join my mailing list!
I send emails quite infrequently, and will never share your email address with anyone else.