ISSUE_QUICK_ADD_CLICKED and React

Jira Development Jira Cloud
1

I am unsure where to add the code snippet to listen for the ISSUE_QUICK_ADD_CLICKED event in a react app so that a dialog is displayed when the panel is hidden.

If the panel is already rendered the event is received and the dialog shown. So currently the user has to click the button once to show the panel then a second time to get the dialog.

This static react app (no database) was developed from atlaskit-starter - to get all the benefits of the modern UI capabilities. New to react and cloud, migrating from server to cloud.

2

The start up time for react means the first event is always missed.

Using breakpoints in the debugger in Chrome I can confirm the event is received (by all.js). I have been able to have registered a callback to receive the event by placing the following in a static js file and loading it before the all.js.

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="/test.js"></script>
  <script src="https://connect-cdn.atl-paas.net/all-debug.js" async></script>
</head>
<body>
  <div id="app-root"></div>
</body>
</html>

var once = 0;

if (location.hash === "#/test") {
  Object.defineProperty(window, "AP", {
    configurable: true,
    set(v) {
      Object.defineProperty(window, "AP", {
        configurable: true, enumerable: true, writable: true, value: v });
      if (!once) {
        window.AP.events.on('ISSUE_QUICK_ADD_CLICKED', function(event) {
          // display a dialog when quick add button was clicked. event = { isNewToIssue: boolean }
          // isNewToIssue is true if this is first time content panel being added to current issue.
          // isNewToIssue is false if content panel is already on issue view, and it is selected.
          window.AP.dialog.create({
            key: 'my-dialog',
            width: '500px',
            height: '200px',
            chrome: true,
            header: JSON.stringify(event)
          });
          console.log("window.AP.dialog.create");
        });
        once++;
        console.log("window.AP.events.on");
      }
    }
  });
};

Using the above the dialog is always shown, but now there is a side effect that the event is fired 6 times, when the panel is first shown, creating 6 instances of the dialog.

Edit: Accepting that the event is called multiple times, I added a Boolean to say the dialog is being shown, and clear it in a close callback.

3

Now I notice there is already an open issue for the multiple events,
https://jira.atlassian.com/browse/JRACLOUD-70241