From ac50d044fd0fe9f57c3a860247d4b2245e0aa56c Mon Sep 17 00:00:00 2001
From: Swapnil M Mane <swapnilmmane@gmail.com>
Date: Tue, 22 Oct 2024 15:47:25 +0530
Subject: [PATCH 1/3] feat: added a workflow to preview Storybook using
 Chromatic

Developers can trigger this workflow by commenting /storybook on pull requests
or by manually running it for a specific branch via the GitHub Actions tab.
---
 .github/workflows/chromaticStorybook.yml | 80 ++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 .github/workflows/chromaticStorybook.yml

diff --git a/.github/workflows/chromaticStorybook.yml b/.github/workflows/chromaticStorybook.yml
new file mode 100644
index 0000000000..e7fbcc691b
--- /dev/null
+++ b/.github/workflows/chromaticStorybook.yml
@@ -0,0 +1,80 @@
+name: 'Chromatic - Storybook Preview'
+
+# The events that will trigger the action
+on:
+  # Trigger the workflow when a comment is created on an issue or pull request
+  issue_comment:
+    types: [created]
+  # Allow the workflow to be run manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  chromatic:
+    # Only run the job if the comment contains '/storybook' OR it's triggered manually
+    if: github.event_name == 'workflow_dispatch' || github.event.comment.body == '/storybook'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Default Branch
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install hub
+        run: |
+          sudo apt-get install -y hub
+
+      # Fetch pull request details if event is issue_comment and it's a pull request
+      - name: Fetch PR details using hub
+        id: fetch_pr
+        if: github.event.issue.pull_request
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          pr_number=${{ github.event.issue.number }}
+          head_branch=$(hub pr show "$pr_number" -f '%H') # Head branch (source)
+          echo "head_branch=$head_branch" >> $GITHUB_ENV
+
+      # Checkout the PR's head branch if it's a pull request; otherwise, use the branch on which the action is triggered manually.
+      - name: Checkout the PR's head branch if it's a pull request; otherwise, use the branch on which the action is triggered manually.
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          # Conditionally checkout based on event type and use hub fetched branch if needed.
+          ref: |
+            ${{ github.event_name == 'workflow_dispatch' && github.ref_name || env.head_branch }}
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Post Install
+        run: yarn postinstall
+
+      - name: Build
+        run: yarn build:quick
+
+      # Run Chromatic Action
+      - name: Run Chromatic
+        id: chromatic
+        uses: chromaui/action@v1
+        with:
+          # Chromatic projectToken, see https://storybook.js.org/tutorials/design-systems-for-developers/react/en/review/ to obtain it
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          workingDir: packages/admin-ui
+
+      # Create or update a comment on PR with the Storybook URL
+      - name: Comment on PR with Storybook URL
+        uses: peter-evans/create-or-update-comment@v2
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.issue.number || github.event.pull_request.number }}
+          body: |
+            🚀 **Storybook Preview**
+            You can preview the Storybook by visiting the link below:
+
+            [Storybook Preview URL](${{ steps.chromatic.outputs.storybookUrl }})
\ No newline at end of file

From a99ca7b03d8ac71df177bb268e5c02be1823c1aa Mon Sep 17 00:00:00 2001
From: Swapnil M Mane <swapnilmmane@gmail.com>
Date: Tue, 29 Oct 2024 16:22:33 +0530
Subject: [PATCH 2/3] chore: removed unused postinstall step from workflow

---
 .github/workflows/chromaticStorybook.yml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/.github/workflows/chromaticStorybook.yml b/.github/workflows/chromaticStorybook.yml
index e7fbcc691b..d441069e48 100644
--- a/.github/workflows/chromaticStorybook.yml
+++ b/.github/workflows/chromaticStorybook.yml
@@ -51,9 +51,6 @@ jobs:
       - name: Install Dependencies
         run: yarn
 
-      - name: Post Install
-        run: yarn postinstall
-
       - name: Build
         run: yarn build:quick
 

From 2df428d3244aa7afdb92c9f5c879aeed77cbf098 Mon Sep 17 00:00:00 2001
From: Swapnil M Mane <swapnilmmane@gmail.com>
Date: Thu, 31 Oct 2024 16:24:05 +0530
Subject: [PATCH 3/3] fix: add a check to skip comment when manually triggering
 workflow on a branch

During manual (workflow_dispatch) runs on a branch, there was no pull request,
but the comment step looked for a pull request number.
This change skips the comment step for manual triggers when no PR is available.
---
 .github/workflows/chromaticStorybook.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/chromaticStorybook.yml b/.github/workflows/chromaticStorybook.yml
index d441069e48..ddb8c09527 100644
--- a/.github/workflows/chromaticStorybook.yml
+++ b/.github/workflows/chromaticStorybook.yml
@@ -66,6 +66,7 @@ jobs:
 
       # Create or update a comment on PR with the Storybook URL
       - name: Comment on PR with Storybook URL
+        if: github.event_name != 'workflow_dispatch' || github.event.issue.number
         uses: peter-evans/create-or-update-comment@v2
         with:
           token: ${{ secrets.GITHUB_TOKEN }}