Integrate Jira issue collectors within topic buttons

Community wiki Administrators
1

Hello :wave:

I started implementing Issue collectors in our forum today and wanted to share the super simple theme component I created.

In the end, it will look like this.


What you need

  • A Jira issue collector
  • Some JS knowledge

Grabbing the issue collector ID

For the collector to work we need it’S ID.

1465Ă—318 23.3 KB

Go to the issue collector of your choice and grab the collectorId parameter from the url

https://tosdr.atlassian.net/secure/ViewCollector!default.jspa?projectKey=BE&collectorId=176cb88e

In my Case it is 176cb88e

Create a new theme component

and use the following code in the </head> section

Replace the following keys with its values

  • MY_COLLECTOR_ID → 176cb88e
  • REPLACE_ME_AJAX → The script source from the " Embedding this issue collector" → “Embed in JavaScript” section of your Jira issue collector
  • MY_PROJECT_KEY → With your issue collector’s project key, if you intend to insert multiple issue collectors.
<script type="text/discourse-plugin" version="0.8">
api.decorateCooked(() => {
    window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
        'MY_COLLECTOR_ID': {
            "triggerFunction": function(showCollectorDialog) {
                jQuery(document).on('click', "[data-wrap='jira-bug-MY_PROJECT_KEY'] > p", function(e) {
                    e.preventDefault();
                    showCollectorDialog();
                });
            }
        }
    });
});
</script>
<script>
$(document).ready(function() {
    jQuery.ajax({
        url: "REPLACE_ME_AJAX",
        type: "get",
        cache: true,
        dataType: "script"
    });
});
</script>

I have created only 2 CSS buttons for my needs, feel free to add more

[data-wrap*="jira-bug-"] {
    p {
        border-radius: 2em;
    	box-sizing: border-box;
    	display: inline-flex;
    	align-items: center;
    	justify-content: center;
    	margin: 0;
    	padding: 0.53em 0.8em;
    	border: none;
    	font-weight: normal;
    	margin: 1px;
    	font-size: var(--font-0);
    	line-height: normal;
    	color: var(--primary-low);
    	background: var(--danger);
    	cursor: pointer;
    	transition: all 0.25s;
    }
    p:hover {
     	color: #000;
    	background: #fff;
    	border-color: #0060df;
    }
}

[data-wrap*="jira-feature"] {
    p {
        border-radius: 2em;
    	box-sizing: border-box;
    	display: inline-flex;
    	align-items: center;
    	justify-content: center;
    	margin: 0;
    	padding: 0.53em 0.8em;
    	border: none;
    	margin: 1px;
    	font-weight: normal;
    	font-size: var(--font-0);
    	line-height: normal;
    	color: var(--secondary-low);
    	background: var(--success-medium);
    	cursor: pointer;
    	transition: all 0.25s;
    }
    p:hover {
     	color: #000;
    	background: #fff;
    	border-color: #0060df;
    }
}

Now onto embedding the issue collector onto posts:

[wrap=jira-bug-MY_PROJECT_KEY]
:bug: Report a bug
[/wrap]


[wrap=jira-feature-MY_PROJECT_KEY]
:bulb: Suggest a feature
[/wrap]

Thats it! Now you got a working issue collector as a button in your post!

3 Likes