適用於 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'
  ] }
}