Skip to content

eXa-online/storybook-addon-jira

 
 

Repository files navigation

JIRA addon for Storybook

This addon makes JIRA ticket information visible and linked within your stories.

screenshot

Usage

Just add the ticket ID as a parameter to your component story like this:

export default {
  title: "Example/Button",
  component: Button,
  parameters: {
    jira: {
      id: 'RING-1020'
    }
  },
};

Installation

  1. To add this addon to your storybook configuration, first run yarn add @exa-online/storybook-jira-addon.

  2. Then add it to the addons array in main.js:

    addons: [
      "storybook-jira-addon"
    ],
  3. You will need to add the following values to your .env file.:

    `STORYBOOK_JIRA_API_ENDPOINT` This will be the API endpoint for obtaining ticket data from JIRA. This will be something like: `https://.atlassian.net/rest/api/latest/issue`
    `STORYBOOK_JIRA_PERSONAL_ACCESS_TOKEN` To use this addon, you will need to generate an API token for your JIRA account. This can be acquired [here](https://id.atlassian.com/manage-profile/security/api-tokens).
    `STORYBOOK_JIRA_BASE_URL` This will be something like: `https://.atlassian.net/browse`.
  4. Within storybook you then need to run some middleware to set up the api. To do this, add a middleware.js file in your .storybook folder. To use authenticated requests for fetching JIRA API and secured avatar images, this file needs to contain the following code:

    module.exports = function expressMiddleware(router) {
    
      router.get('/jira/api', (req, res) => {
          const myHeaders = new Headers()
          myHeaders.append("Authorization", `Bearer ${process.env?.STORYBOOK_JIRA_PERSONAL_ACCESS_TOKEN}`)
          myHeaders.append("Content-Type", "application/json")
        
          const myInit = {
            method: 'GET',
            headers: myHeaders,
            redirect: 'follow',
          }
    
          const myRequest = new Request(`${process.env.STORYBOOK_JIRA_API_ENDPOINT}/${req.query?.ticketId}`)
          fetch(myRequest, myInit)
            .then(response => response.json())
            .then(result => {
              res.send(result)
            })
            .catch(error => console.log('error', error));
      })
    
      router.get('/jira/avatar', (req, res) => {
        const myHeaders = new Headers()
        myHeaders.append("Authorization", `Bearer ${process.env.STORYBOOK_JIRA_PERSONAL_ACCESS_TOKEN}`)
      
        const myInit = {
          method: 'GET',
          headers: myHeaders,
          redirect: 'follow',
        }
    
        const myRequest = new Request(req.query?.url)
        return fetch(myRequest, myInit)
          
          .then(response => response.blob())
          .then((blob) => {
            res.type(blob.type)
            blob.arrayBuffer().then((buf) => {
              res.send(Buffer.from(buf))
            })
          })
          .catch(error => console.log('error', error));
      })
    }

    You might need to still add node-fetch to your dev dependencies by running yarn add node-fetch -D.

Deploying to netlify

When deploying to netlify, you can get the addon working by adding a serverless function.

To do this I recommend taking the steps below:

  1. Create a new file called netlify/functions/get-ticket-data.js

    Creating this file in a different folder is possible, but requires additional configuration in the Netlify UI.

  2. add the code below to get-ticket-data.js:

const fetch = require('node-fetch');

exports.handler = async function (event, context) {
  
  const myHeaders = new fetch.Headers();
  const authHeader = `Basic ${Buffer.from(`${process.env.STORYBOOK_JIRA_USERNAME}:${process.env.STORYBOOK_JIRA_API_KEY}`).toString('base64')}`
  myHeaders.append("Authorization", authHeader);

  const requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };

  const ticketData = await fetch(`${process.env.STORYBOOK_JIRA_API_ENDPOINT}/${event.queryStringParameters.ticketId}`, requestOptions)
  .then(response => response.text())
  .then(result => {
    return result
  })
  .catch(error => console.log('error', error));
  
  return {
    statusCode: 200,
    body: JSON.stringify(ticketData)
  }
}
  1. Add the same environment variables to Netlify as well as this new one for the created endpoint:
    `STORYBOOK_MIDDLEWARE_JIRA_ENDPOINT` In this case this will be: `/.netlify/functions/get-ticket-data`

Read more about setting up serverless functions in Netlify here.

About

An extra panel to show JIRA tickets concerning certain components.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 80.6%
  • MDX 10.3%
  • JavaScript 4.7%
  • CSS 4.3%
  • HTML 0.1%