2

I'm looking to create an Angular 7 app that utilizes the Jira issue collector to submit issues directly to their respective projects.

When I build the app the way it is now, nothing happens. When I move the code from method "submitIssue" to under "ngOnInIt" directly the issue collector dialogue comes up. Where should the code snippet be added?

Any assistance would be greatly appreciated. Thank you!

Jira Code Snippet Example

// Requires jQuery!
jQuery.ajax({
    url: "https://<domain>.atlassian.net/s/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com",
    type: "get",
    cache: true,
    dataType: "script"
});

 window.ATL_JQ_PAGE_PROPS =  {
    "triggerFunction": function(showCollectorDialog) {
        //Requires that jQuery is available! 
        jQuery("#myCustomTrigger").click(function(e) {
            e.preventDefault();
            showCollectorDialog();
        });
    }};

This is my array that populates the cards with different projects and buttons on my issue collector component.

db-data.ts

export const PROJECTS: any = [

    {
        id: 1,
        title: 'Project Title',
        /** The url is taken directly from the issue collector section within the Jira project. Link below is modified
         * for security purposes. */
        url: 'https://<domain>.atlassian.net/s/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com'
    },
    {
        id: 2,
        title: 'Project Title',
        /** The url is taken directly from the issue collector section within the Jira project. Link below is modified
         * for security purposes. */
        url: 'https://<domain>.atlassian.net/s/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com'
    },

];


export function findCourseById(projectId:number) {
    return PROJECTS.find(project => project.id === projectId);


}

jira-card.component.ts

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { Project } from 'src/app/model/project';
import { PROJECTS } from 'src/db-data';
import { projection } from '@angular/core/src/render3';
import * as $ from 'jquery';

declare global {
  interface Window { ATL_JQ_PAGE_PROPS: any; }
}

window.ATL_JQ_PAGE_PROPS = window.ATL_JQ_PAGE_PROPS || {};

@Component({
  selector: 'app-jira-card',
  templateUrl: './jira-card.component.html',
  styleUrls: ['./jira-card.component.scss']
})

export class JiraCardComponent implements OnInit {

  @Input()
  project: Project;

  constructor() { }

   ngOnInit() {}

   submitIssue() {

            // Requires jQuery!
            jQuery.ajax({
              url: this.project.url,
              type: 'get',
              cache: true,
              dataType: 'script'
            });
    
        window.ATL_JQ_PAGE_PROPS =  {
        "triggerFunction": function(showCollectorDialog) {
          jQuery("#submit").on('click', function(e) {
            e.preventDefault();
            showCollectorDialog();
          });
        }};
       }
   }

jira-card.component.html

<div class="main-div">
  <mat-card class="jira-card">
      <mat-card-header>
        <mat-card-title>{{ project.title }}</mat-card-title>
        <mat-card-subtitle></mat-card-subtitle>
      </mat-card-header>
      <mat-card-actions>
        <button mat-raised-button id (click)="submitIssue()" id="#submit">Submit Issue</button>
      </mat-card-actions>
    </mat-card>
</div>
Community
  • 1
  • 1
sgovernale
  • 21
  • 1
  • 3

3 Answers3

5

Make showCollectorDialog function global in index.html

<script type="text/javascript" src="<jira-issue-collector-URL>"></script>
<script>
  window.ATL_JQ_PAGE_PROPS = {
    triggerFunction: function(showCollectorDialog) {
      window.showCollectorDialog = showCollectorDialog
    }
  };
</script>

Then invoke it in some.component.ts:

submitIssue() {
  (window as any).showCollectorDialog()
}
leshkin
  • 356
  • 5
  • 10
1

Do this

Your button in the html file:

<a class="nav-link waves-light" mdbWavesEffect (click)="openFeedbackModal()">

TypeScript file:

openFeedbackModal(){
  $.ajax({
    url: your url,
    type: "get",
    cache: true,
    dataType: "script"
  });
      
  window.ATL_JQ_PAGE_PROPS =  {
    "triggerFunction": function(showCollectorDialog) {
      showCollectorDialog();
    }
  };
}

And, that's it

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Mohammad Tishad
  • 11
  • 1
  • This works but Just wanted to add that we also need to set the custom trigger on in the jira issue tracker settings as mentioned https://support.atlassian.com/jira-cloud-administration/docs/customize-the-jira-issue-collector/ . I somehow missed this step which took me a few hours to find out . – Tarmah Jun 01 '23 at 21:21
0

Both answers mentioned https://stackoverflow.com/a/74832047/6894272 and https://stackoverflow.com/a/58881256/6894272 work but Just wanted to add that we also need to set the custom trigger on in the jira issue tracker settings as mentioned https://support.atlassian.com/jira-cloud-administration/docs/customize-the-jira-issue-collector/ . I somehow missed this step which took me a few hours to find out

Tarmah
  • 139
  • 6