JIRA addon for Storybook
This addon makes JIRA ticket information visible and linked within your stories.
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
-
To add this addon to your storybook configuration, first run
yarn add @exa-online/storybook-jira-addon
. -
Then add it to the
addons
array inmain.js
:addons: [ "storybook-jira-addon" ],
-
You will need to add the following values to your
.env
file.: -
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 runningyarn 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:
-
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.
-
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)
}
}
- 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.
- suelje