Storybook 的 JIRA 插件

此插件使 JIRA 票证信息在您的故事中可见并可链接。

用法

只需将票证 ID 作为参数添加到您的组件故事中，如下所示

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

安装

1. 要将此插件添加到您的 Storybook 配置中，请先运行 yarn add storybook-jira-addon。

2. 然后将其添加到 main.js 中的 addons 数组中

   addons: [
     "storybook-jira-addon"
   ],
   

3. 您需要将以下值添加到您的 .env 文件中。

4. 然后，您需要在 Storybook 中运行一些中间件来设置 API。为此，请在您的 .storybook 文件夹中添加一个 middleware.js 文件。要使用基本身份验证，此文件需要包含以下代码

   const fetch = require("node-fetch");
   
   module.exports = function expressMiddleware (router) {
     router.get('/api', (req, res) => {
   
         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'
         };
   
         fetch(`${process.env.STORYBOOK_JIRA_API_ENDPOINT}/${req.query?.ticketId}`, requestOptions)
           .then(response => response.json())
           .then(result => {
             res.send(result)
           })
           .catch(error => console.log('error', error));
     })
   }
   

   或者，您可以使用 OAuth 设置身份验证，如 这里 所述。

   您可能还需要通过运行 yarn add node-fetch -D 将 node-fetch 添加到您的开发依赖项中。

部署到 Netlify

部署到 Netlify 时，您可以通过添加一个无服务器函数来使插件正常工作。

为此，我建议您执行以下步骤

1. 创建一个名为 netlify/functions/get-ticket-data.js 的新文件

   可以在不同的文件夹中创建此文件，但这需要在 Netlify UI 中进行额外的配置。

2. 将以下代码添加到 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)
  }
}

3. 将相同的环境变量添加到 Netlify 以及这个为创建的端点创建的新环境变量

在此处了解有关在 Netlify 中设置无服务器函数的更多信息。

其他配置

为了使特定子票证状态的选项卡保持持久，即使没有子票证具有该状态，也可以在 .storybook/preview.js 中定义状态选项，如下所示。此数组还将定义状态在进度条中显示的顺序。

export const parameters = {
  jira: { persistentTabs: [
    'To do', 'In progress', 'Done'
  ] }
}