Jira Issue Collector window not opening from custom trigger

[Aaron Chen]

We would like to standardize and collect feedback from our users when they use our site, so we implemented the Jira Issue Collector.  Initially, I tried some of the default options, and while they did work, we had concerns about the way they interfered with the layout of our site.  Therefore, I tried the custom approach.  Unfortunately, the custom trigger does not appear to be working.  While the default buttons do stop being injected into the site, it appears that the trigger function is never utilized by the Atlassian JS.

Project information:

We use the React JS library, version 16.9.  We are migrating away from React Native Web currently.  We don't normally use jQuery, but for the sake of making the JIC work, I included it.

Things I have tried:

The Jira admin has given me two code snippets to try: one for HTML, and one for JavaScript.  I've noticed that, while they have the same `collectorId` value,  they apparently grab different scripts.  The HTML one generates a default button.  The JavaScript one appears to do nothing.

Some searching on the internet has led me to a jsFiddle with a working example of the JIC using a custom trigger.  (http://jsfiddle.net/gustaff_weldon/kpLvakmr/)  Substituting the JS source from the HTML code snippet causes one of the default buttons to be injected.  Substituting the JS source from the JS code snippet does nothing.  I'm not sure what else is required for it to work, but it is not a good sign to me.

Code:

This code is present in all views after authentication.  The below is a .tsx file:

import React from 'react';
import styled from 'styled-components';
import { Portal } from "@material-ui/core";
import jQuery from 'jquery';

const FeedbackButton = styled.a`
  ...
`;

const ELEMENT_ID = 'jira-feedback-button';
const WINDOW_VAR_NAME = 'jiraIssueCollector';

window['ATL_JQ_PAGE_PROPS'] =  {
  "triggerFunction": function(showCollectorDialog) {
    // Requires that jQuery is available!
    jQuery(`#${ELEMENT_ID}`).click(function(e) {
      e.preventDefault();
      showCollectorDialog();
    });
  }};

const JIRAIssueCollector = () => {

  const setCollector = () => {
    const appElement = document.querySelector('body');
    if (appElement) {
      const snippet = document.createElement('script');
      // snippet.async = true;
      snippet.type = 'text/javascript';
      snippet.src = 'https://foobar.atlassian.net/...';
      appElement.appendChild(snippet);
    }
  };

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

  return (
    <Portal>
      <FeedbackButton href="#" id={ELEMENT_ID}>
        Provide Feedback
      </FeedbackButton>
    </Portal>
  );
};

export default JIRAIssueCollector;

What am I doing wrong?  Is it a problem with my code?  Or is it a legitimate issue with the downloaded script?  And is it possible to integrate the custom trigger JIC without jQuery?

EDIT: The HTML code snippet suddenly started working to our expectations.  I want to say that there was something we did on our end that got it to finally work, but unfortunately I don't know what it was.  This issue can be considered closed.

[Deleted user]

Hi Aaron,

I am doing the same thing on my material/styled component react project.

Could you please share the react component code you used to do this?  

Thanks,

Jason