Forge CustomUI problem in issue glance

Forge
, ,
1

Hi,
Our application which shows an Atlasskit Dropdown in a CustomUI started not to function properly without any change from our side. Pressing on Dropdown does nothing other than changing background to show it is pressed. I have created a simple application and I have observed that it is specific to issue glances. My test app just have a custom UI and shows a basic Atlaskit dropdown. If I change module from “jira:issueGlance” to “jira:issuePanel” dropdown is displayed when clicked. Is there anyone experiencing similar problem?
Thanks

2

This sounds like it might be an issue related to AtlasKit and not Forge. I’m seeing the issue glance panel load from the template without a problem:

image
image2624×1528 164 KB

Curious, do other AtlasKit components fail in the issue glance or is it specifically the dropdown?

1 Like
3

Testing a step further and I haven’t been able to reproduce. I added a very simple Dropdown from Atlaskit:

import React from 'react';

import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';

function App() {


  return (
    <DropdownMenu trigger="Page actions" triggerType="button">
      <DropdownItemGroup>
        <DropdownItem>Edit</DropdownItem>
        <DropdownItem>Share</DropdownItem>
        <DropdownItem>Move</DropdownItem>
        <DropdownItem>Clone</DropdownItem>
        <DropdownItem>Delete</DropdownItem>
        <DropdownItem>Report</DropdownItem>
      </DropdownItemGroup>
    </DropdownMenu>
  );

}

export default App;

And am seeing it work as expected:

image
image924×828 26.1 KB

Are you seeing any errors in the console when you go to the issue glance?

1 Like
4

Thanks @Bentley, I have found the issue after seeing your exact same code works. It turns out height of iframe is only equal to height of button and there is no space for showing menu items. This wasn’t the case previously, I haven’t changed the code. I think now I’m required to provide a height somewhere. Thanks for your help.

image
image1641×662 173 KB

2 Likes
5

Hi @bentley,
I have an additional question and I really appreciate if you can take a look at it. I have pasted “Atlaskit Dropdown” sample code from Atlaskit into sample todo app. It is the exact same code with yours. Why is it displaying only 32px height and clipping dropdown part in my case and displaying complete dropdown in your case? Is there a setting which I’m missing. Note that it was a working app until this week, I haven’t changed anything.

import React from 'react';
import Spinner from '@atlaskit/spinner';
import Avatar from '@atlaskit/avatar';
import Lozenge from '@atlaskit/lozenge';
import {DateTimePicker} from '@atlaskit/datetime-picker';

import DropdownMenu, {DropdownItem, DropdownItemGroup} from '@atlaskit/dropdown-menu';

function App() {
  return (
        <DropdownMenu trigger="Page actions" triggerType="button">
          <DropdownItemGroup>
            <DropdownItem>Edit</DropdownItem>
            <DropdownItem>Share</DropdownItem>
            <DropdownItem>Move</DropdownItem>
            <DropdownItem>Clone</DropdownItem>
            <DropdownItem>Delete</DropdownItem>
            <DropdownItem>Report</DropdownItem>
          </DropdownItemGroup>
        </DropdownMenu>
  );
}

export default App;

  jira:issueGlance:
    - key: todo-panel
      resource: main
      resolver:
        function: resolver
      title: Todos
      label: Todos

image
image1573×1182 320 KB

6

Are you pulling in any custom styles on your index.html?

Here is what mine looks like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

And for more context, I’m using Chrome 92.

And I just confirmed that it works as expected in both the individual issue view as well as pulling the issue up in a modal.

image
image4170×1324 241 KB

1 Like
7

Thanks for sharing your code @bentley. I have used a very similar index.html. I have removed all extra left over from sample todo app. My index.html has following additional line, and without it, custom ui is not displayed at all.

<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline'" />

I’m still suspecting there are different versions of Forge deployed to different cloud sites and it may be causing this behavioral differences. Because it started to happen without us changing any code.

8

I’m punching outside of my working knowledge here, but I’d guess that this is actually related to a feature flag inside of Jira, not Forge. Maybe something related to next-gen projects? Do you happen to know if your Jira project is a next gen project?

9

No, it is a “company-managed” project. I have set a minimum size for surrounding div and it solved my problem for now. Thanks for taking your time and helping me to solve this issue.

2 Likes
10

I have suspicion that I have a similar problem with shrunk issue glance component – height is reduced to the height of all inner elements with white-space below, and not stretched to full height.
However, I need further investigation of this issue.