Using Issue collector in React

[BRUCE HAMMOND]

I can get Jira issue collector to work in a Confluence page, but not in React.  Can you tell me how to do it in React?

[Andy Heinzer · Accepted solution]

Hi Bruce,

I understand that you are building a react app and are wanting to include a Jira Issue collector within it.  While I have not done this myself, I found another thread here is Community that appears to have a solution.  Check out https://community.atlassian.com/t5/Jira-questions/Jira-issue-collector-for-react-app/qaq-p/1411911

That thread appears to contain a couple of different approaches to getting this to work.

I hope that helps.

Andy

[BRUCE HAMMOND]

That solution pops up the issue collector on a new window and I want it to pop-up on the current window because the new window doesn't close when the issue is submitted.  I found a solution that does though as below.

import React from 'react';
import jQuery from 'jquery';
import {Row, Col, Button} from 'reactstrap'

const ELEMENT_ID = 'jira-feedback-button';
const WINDOW_VAR_NAME = 'jiraIssueCollector';
window['ATL_JQ_PAGE_PROPS'] = {
  "triggerFunction": function(showCollectorDialog) {
    jQuery(`#${ELEMENT_ID}`).click(function(e) {
      console.log('triggerFunction')
      e.preventDefault();
      showCollectorDialog();
    });
  }};

const JIRAIssueCollector = () => {
  const setCollector = () => {
    const appElement = document.querySelector('body');
    if (appElement) {
      console.log('loading issue collector');
      const snippet = document.createElement('script');
      snippet.type = 'text/javascript';
      snippet.src = "YOUR ISSUE COLLECTOR URL";
      appElement.appendChild(snippet);
    }
  };

  if (!window[WINDOW_VAR_NAME]) {
    setCollector();
    window[WINDOW_VAR_NAME] = this;
  }

  return (
    <Row>
      <Col>
        <Button href="#" color="primary" id={ELEMENT_ID}>
          Provide Feedback
        </Button>
      </Col>
    </Row>
  );
};

export default JIRAIssueCollector;

[Marc]

Thks Bruce it's working like a charm for me.

[Meddy Lebrun]

Without using Jquery in a React environment :

document.getElementById(ELEMENT_ID).addEventListener('click', function (e) {
  e.preventDefault();
  showCollectorDialog();
});