Issues with inlinedialogs on the issue navigator

Jira Development Jira Cloud
,
1

So I’m trying to integrate an inline dialog on the search page to display a form similar to the ‘Share this search by emailing other users’ one and ran into several issues.

  1. After opening the dialog, clicking anywhere within it immediately closes the dialog. Which would be fine for a dropdown but not for a form.

  2. I’ve tried to work around the issue by setting the persist option to true and actively closing the dialog with AP.inlineDialog.hide(). This solves the aforementioned instant closing issue but feels inconsistent as the dialog can’t be closed by clicking outside it or on the icon which opened it anymore. Furthermore, if the dialog got closed with the JS call the icon keeps the gray background until ESC is pressed.

  3. If the dialog has been opened once and the user clicks on an issue and then navigates back to the search view, the dialog won’t open at all until the page is reloaded. Which I feel is very problematic.

  4. When the Dialog is opened the icon button becomes gray, making the icon indistinguishable from the button. Is there a way to have a light icon for the open state which would still be legible?

  5. When the Dialog is closed its iframe will be hidden but not unloaded. So when it is opened again it unhides the Dialog and displays potentially stale data. Is there a way to detect the re-opening of the dialog​ in JS?

I’d be really happy to get any pointers to solve these issues.

Thanks,
Daniel

atlassian-connect.json excerpt:

...
 "webItems": [
      {
        "key": "download-icon",
        "location": "jira.navigator.pluggable.items",
        "cacheable": true,
        "context": "addon",
        "url": "/index.html",
        "target": {
          "type": "inlinedialog",
          "options": {
            "persistent": true,
            "width": "320px",
            "height": "180px"
          }
        },
        "tooltip": {
          "value": "Download all attachments"
        },
        "icon": {
          "width": 16,
          "height": 16,
          "url": "/download-icon.svg"
        },
        "name": {
          "value": "Download all attachments"
        }
      },
...
2 Likes