JSPM

  • Created
  • Published
  • Downloads 4338
  • Score
    100M100P100Q140623F
  • License Apache-2.0

Package Exports

  • @roadiehq/backstage-plugin-jira
  • @roadiehq/backstage-plugin-jira/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@roadiehq/backstage-plugin-jira) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Jira Plugin for Backstage

a Jira plugin for Backstage.

Features

  • Show project details and tasks
  • Activity Stream

How to add Jira project dependency to Backstage app

  1. If you have standalone app (i.e., you didn't clone this repo), then do
cd packages/app
yarn add @roadiehq/backstage-plugin-jira
  1. Add proxy config:
// app-config.yaml
proxy:
  '/jira/api':
    target: <JIRA_URL>
    headers:
      Authorization:
        $env: JIRA_TOKEN
      Accept: 'application/json'
      Content-Type: 'application/json'
      X-Atlassian-Token: 'no-check'
      # This is a workaround since Jira APIs reject browser origin requests. Any dummy string without whitespace works.
      User-Agent: "AnyRandomString"
  1. Set img-src in Content Security Policy
// app-config.yaml
backend:
  # ...
  csp:
    img-src:
      # "'self'" and 'data' are from the backstage default but must be set since img-src is overriden
      - "'self'"
      - 'data:'
      # Allow your Jira instance for @roadiehq/backstage-plugin-jira
      - 'JIRA_URL'
  1. Add plugin component to your Backstage instance:
// packages/app/src/components/catalog/EntityPage.tsx
import { EntityJiraOverviewCard, isJiraAvailable } from '@roadiehq/backstage-plugin-jira';

const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    ...
    <EntitySwitch>
      <EntitySwitch.Case if={isJiraAvailable}>
        <Grid item md={6}>
          <EntityJiraOverviewCard />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
  </Grid>
);

How to use Jira plugin in Backstage

  1. Add annotation to the yaml config file of a component:
metadata:
  annotations:
    jira/project-key: <example-jira-project-key>
    jira/component: <example-component> # optional, you might skip value to fetch data for all components
    jira/token-type: Bearer # optional, used for Activity stream feed. If you are using Basic auth you can skip this. 

Even though you can use Bearer token please keep in mind that Activity stream feed will only contain entries that are visible to anonymous users. In order to view restricted content you will need to authenticate via Basic authentication, as described in official documentation (https://developer.atlassian.com/server/framework/atlassian-sdk/consuming-an-activity-streams-feed/#authentication).

  1. Get and provide JIRA_TOKEN as env variable:
    1. Obtain your personal token from Jira: https://id.atlassian.com/manage-profile/security/api-tokens
    2. Create a base64-encoded string by converting "your-atlassian-account-mail:your-jira-token", for example jira-mail@example.com:hTBgqVcrcxRYpT5TCzTA9C0F converts to amlyYS1tYWlsQGV4YW1wbGUuY29tOmhUQmdxVmNyY3hSWXBUNVRDelRBOUMwRg==
    3. Save the environmental variable JIRA_TOKEN with Basic prefix, eg: JIRA_TOKEN='Basic amlyYS1tYWlsQGV4YW1wbGUuY29tOmhUQmdxVmNyY3hSWXBUNVRDelRBOUMwRg=='