chore: improve chromatic CI (#18014)

BrunoQuaresma · web-flow · commit e8306cc79036 · 2025-05-23T15:10:06.000-03:00
Following [this Chromatic guide](https://www.chromatic.com/docs/turbosnap-best-practices) to improve our Chromatic jobs.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -24,7 +24,7 @@ jobs:
       docs-only: ${{ steps.filter.outputs.docs_count == steps.filter.outputs.all_count }}
       docs: ${{ steps.filter.outputs.docs }}
       go: ${{ steps.filter.outputs.go }}
-      ts: ${{ steps.filter.outputs.ts }}
+      site: ${{ steps.filter.outputs.site }}
       k8s: ${{ steps.filter.outputs.k8s }}
       ci: ${{ steps.filter.outputs.ci }}
       db: ${{ steps.filter.outputs.db }}
@@ -92,9 +92,8 @@ jobs:
             gomod:
               - "go.mod"
               - "go.sum"
-            ts:
+            site:
               - "site/**"
-              - "Makefile"
             k8s:
               - "helm/**"
               - "scripts/Dockerfile"
@@ -774,7 +773,7 @@ jobs:
   test-js:
     runs-on: ${{ github.repository_owner == 'coder' && 'depot-ubuntu-22.04-8' || 'ubuntu-latest' }}
     needs: changes
-    if: needs.changes.outputs.ts == 'true' || needs.changes.outputs.ci == 'true' || github.ref == 'refs/heads/main'
+    if: needs.changes.outputs.site == 'true' || needs.changes.outputs.ci == 'true' || github.ref == 'refs/heads/main'
     timeout-minutes: 20
     steps:
       - name: Harden Runner
@@ -805,7 +804,7 @@ jobs:
           #- premium: true
           #  name: test-e2e-premium
     # Skip test-e2e on forks as they don't have access to CI secrets
-    if: (needs.changes.outputs.go == 'true' || needs.changes.outputs.ts == 'true' || needs.changes.outputs.ci == 'true' || github.ref == 'refs/heads/main') && !(github.event.pull_request.head.repo.fork)
+    if: (needs.changes.outputs.go == 'true' || needs.changes.outputs.site == 'true' || needs.changes.outputs.ci == 'true' || github.ref == 'refs/heads/main') && !(github.event.pull_request.head.repo.fork)
     timeout-minutes: 20
     name: ${{ matrix.variant.name }}
     steps:
@@ -874,11 +873,13 @@ jobs:
           path: ./site/test-results/**/debug-pprof-*.txt
           retention-days: 7
 
+  # Reference guide:
+  # https://www.chromatic.com/docs/turbosnap-best-practices/#run-with-caution-when-using-the-pull_request-event
   chromatic:
     # REMARK: this is only used to build storybook and deploy it to Chromatic.
     runs-on: ubuntu-latest
     needs: changes
-    if: needs.changes.outputs.ts == 'true' || needs.changes.outputs.ci == 'true'
+    if: needs.changes.outputs.site == 'true' || needs.changes.outputs.ci == 'true'
     steps:
       - name: Harden Runner
         uses: step-security/harden-runner@0634a2670c59f64b4a01f0f96f84700a4088b9f0 # v2.12.0
@@ -888,9 +889,10 @@ jobs:
       - name: Checkout
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
-          # Required by Chromatic for build-over-build history, otherwise we
-          # only get 1 commit on shallow checkout.
+          # 👇 Ensures Chromatic can read your full git history
           fetch-depth: 0
+          # 👇 Tells the checkout which commit hash to reference
+          ref: ${{ github.event.pull_request.head.ref }}
 
       - name: Setup Node
         uses: ./.github/actions/setup-node
@@ -900,7 +902,7 @@ jobs:
       # the check to pass. This is desired in PRs, but not in mainline.
       - name: Publish to Chromatic (non-mainline)
         if: github.ref != 'refs/heads/main' && github.repository_owner == 'coder'
-        uses: chromaui/action@30b6228aa809059d46219e0f556752e8672a7e26 # v11.11.0
+        uses: chromaui/action@1cfa065cbdab28f6ca3afaeb3d761383076a35aa # v11.29.0
         env:
           NODE_OPTIONS: "--max_old_space_size=4096"
           STORYBOOK: true
@@ -915,6 +917,7 @@ jobs:
           projectToken: 695c25b6cb65
           workingDir: "./site"
           storybookBaseDir: "./site"
+          storybookConfigDir: "./site/.storybook"
           # Prevent excessive build runs on minor version changes
           skip: "@(renovate/**|dependabot/**)"
           # Run TurboSnap to trace file dependencies to related stories
@@ -931,7 +934,7 @@ jobs:
       # infinitely "in progress" in mainline unless we re-review each build.
       - name: Publish to Chromatic (mainline)
         if: github.ref == 'refs/heads/main' && github.repository_owner == 'coder'
-        uses: chromaui/action@30b6228aa809059d46219e0f556752e8672a7e26 # v11.11.0
+        uses: chromaui/action@1cfa065cbdab28f6ca3afaeb3d761383076a35aa # v11.29.0
         env:
           NODE_OPTIONS: "--max_old_space_size=4096"
           STORYBOOK: true
@@ -944,6 +947,7 @@ jobs:
           projectToken: 695c25b6cb65
           workingDir: "./site"
           storybookBaseDir: "./site"
+          storybookConfigDir: "./site/.storybook"
           # Run TurboSnap to trace file dependencies to related stories
           # and tell chromatic to only take snapshots of relevant stories
           onlyChanged: true
