Storybook 的 JIRA 插件

此插件使 JIRA 问题单信息在您的 stories 中可见并可链接。

用法

只需将问题单 ID 作为参数添加到您的组件 story 中，如下所示

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'
  ] }
}