How to configure ngx-jira-issue-collector to open in a new browser tab?

Other Questions Jira
1

I’m working on an Angular app and using the ngx-jira-issue-collector package. It’s working fine, but I want to change how it opens. Right now, it shows up in a modal window. I’d like it to open in a new tab instead.

Here’s what I’ve got so far:

let issueCollectorSettings = {
  serverUrl: 'https://jiraserver.mycompany.com',
  collectorCode: 'abc456',
  defaultFields: {
    title: 'Bug Report'
  },
  customFieldsFn: () => ({
    details: 'Please describe the issue here'
  })
};

<div>
  <button (click)="openIssueCollector()">Report Issue</button>
  <ngx-jira-issue-collector [settings]="issueCollectorSettings" #issueCollector></ngx-jira-issue-collector>
</div>

I tried using the direct link from the modal, but it’s not working quite right. The fields aren’t getting filled in, and the close button doesn’t work.

Is there a better way to do this? How can I make the issue collector open in a new tab and still work properly? Any help would be great!

2

While the previous answer offers a good workaround, there’s another approach worth considering. Instead of completely abandoning the ngx-jira-issue-collector package, you could leverage its API to get the best of both worlds.

Try modifying your openIssueCollector() method like this:

openIssueCollector() {
  this.issueCollector.getIssueCollectorUrl().subscribe(url => {
    window.open(url, '_blank');
  });
}

This method uses the package’s built-in functionality to generate the correct URL, including all your custom fields and settings. It then opens that URL in a new tab.

This approach maintains the package’s benefits while achieving your goal of opening in a new tab. It’s more maintainable and less prone to breaking if Jira’s URL structure changes in the future. Just ensure you’re using the latest version of ngx-jira-issue-collector for best compatibility.

3

I’ve actually faced a similar challenge with ngx-jira-issue-collector in one of my projects. From my experience, the package doesn’t natively support opening in a new tab, as it’s designed for in-page interactions.

However, I found a workaround that might help. Instead of using the package’s built-in functionality, you can create a custom button that opens a pre-filled Jira issue form in a new tab. Here’s how I did it:

  1. First, construct the Jira issue URL with your server and project details.
  2. Add query parameters to pre-fill fields.
  3. Use window.open() to launch this URL in a new tab.

Here’s a rough example of how the openIssueCollector() method could look:

openIssueCollector() {
  const baseUrl = 'https://jiraserver.mycompany.com/secure/CreateIssue.jspa';
  const params = new URLSearchParams({
    pid: 'your_project_id',
    issuetype: 'your_issue_type_id',
    summary: 'Bug Report',
    description: 'Please describe the issue here'
  });
  window.open(`${baseUrl}?${params}`, '_blank');
}

This approach gives you more control over the process and ensures it opens in a new tab. The downside is you’ll need to manually handle any custom fields or logic you had in your original setup. But in my case, it was worth the trade-off for the improved user experience.

4

hey, i’ve had this issue b4. try this:

in ur component.ts file, add:

@ViewChild('issueCollector') issueCollector: any;

openIssueCollector() {
  const url = this.issueCollector.getIssueCollectorUrl();
  window.open(url, '_blank');
}

this should open the collector in a new tab with all ur settings. lmk if it works!