JIRA

An extra panel to show JIRA tickets concerning certain components.

View on Github

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.:

  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:

Read more about setting up serverless functions in Netlify here.

Made by
  • suelje
    suelje
Work with
    Angular
    Ember
    HTML
    Preact
    React
    React native
    Svelte
    Vue
    Web Components
Tags