用於 Storybook 的 JIRA 擴充功能

此擴充功能可讓 JIRA 工單資訊在您的 stories 中可見並連結。

用法

只需將工單 ID 作為參數添加到您的元件 story，如下所示

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

安裝

1. 要將此擴充功能新增至您的 Storybook 配置，請先執行 yarn add @exa-online/storybook-jira-addon。

2. 然後將它新增到 main.js 中的 addons 陣列。

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

3. 您需要將以下值新增至您的 .env 檔案。

4. 在 Storybook 中，您還需要執行一些中介軟體來設定 API。為此，請在您的 .storybook 資料夾中新增一個 middleware.js 檔案。若要使用已驗證的請求來獲取 JIRA API 和安全的頭像圖片，此檔案需要包含以下程式碼

   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));
     })
   }
   

   您可能仍然需要執行 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 中設定無伺服器函數的資訊。