Help with Forge Custom UI AtlasKit and Styling

Forge
1

I am trying to use @atlaskit in my custom UI and having no luck. Could someone please help with what I might be missing? (public git repo of sample code at GitHub - decreelabs/simple-custom-ui: Custom UI example from Atlassian Forge)

  1. forge create (chose Custom UI and jira project pane)
  2. npm install styled-components
  3. Updated the permissions to include ‘unsafe-inline’ and ‘unsafe-hashes’

However, I get the below error.

  • Refused to apply inline style because it violates the following Content Security Policy directive: “style-src ‘self’”

When I try to use components like Spinner even after installing @atlaskit/spinner, throws errors.

Also, when I try to use or from the UI Kit, get the below error.

  • Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Any help would be really appreciated. Thanks in advance.

1 Like
2

In my manifest i have declared this

permissions:
 content:
    styles:
      - 'unsafe-inline'

and this is the index.html file

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline'" />
    <title>React App</title>
    <style>
      body { overflow: hidden; }
    </style>
  </head>

hope this helps.

8 Likes
3

That fixed it. Many thanks @ChristosMoysiadis.

1 Like