[🔥AUDIT🔥] Ensure that Chromatic builds are not triggered on release P…

…Rs (#2061)

🖍 _This is an audit!_ 🖍

## Summary:

After a new Release PR was created, I noticed that the Chromatic build was still
triggered (right after marking the build as skipped). This PR updates the
Chromatic workflows to avoid triggering on release PRs for once and for all, and
only auto-accept changes on `main` pushes.

Also took the opportunity to fix an issue where the Chromatic build was not
being triggered after moving a normal PR from "draft" to "ready for review".

Issue: XXX-XXXX

## Test plan:

Verify that the chromatic builds are no longer triggered on release PRs and
instead are skipped.

Also verify that chromatic builds are still auto-approved on `main` pushes.

Author: jandrade

Auditors: #wonder-blocks

Required Reviewers:

Approved By:

Checks: ✅ codecov/project, ✅ Chromatic - Get results on non-draft regular PRs (ubuntu-latest, 16.x), ✅ Test (ubuntu-latest, 16.x, 2/2), ✅ Lint (ubuntu-latest, 16.x), ✅ Test (ubuntu-latest, 16.x, 1/2), ✅ Check build sizes (ubuntu-latest, 16.x), ✅ Chromatic - Build on non-draft regular PRs / chromatic (ubuntu-latest, 16.x), ⏭  Chromatic - Skip on Release PR (changesets), ✅ gerald, ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ⏭  dependabot

Pull Request URL: #2061

.github/workflows/chromatic-build.yml

@@ -6,7 +6,7 @@ on:
   workflow_call:
     inputs:
       # Determines which Chromatic step to run.
-      # One of: "review" | "dependabot" | "release".
+      # One of: "review" | "bot" | "main".
       target:
         required: true
         type: string
@@ -64,6 +64,9 @@ jobs:
     - name: Checking out latest commit
       uses: actions/checkout@v2
       with:
+        # This makes Actions fetch all Git history so that Chromatic can track
+        # baselines with the correct commits.
+        # see: https://www.chromatic.com/docs/branching-and-baselines
         fetch-depth: 0
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v2
@@ -107,4 +110,17 @@ jobs:
         exitZeroOnChanges: true
         # Skip Chromatic tests, but mark the Release PR as passing. It avoids
         # blocking this PR due to required merge checks.
-        skip: true
+        skip: true
+
+    # (if) Run this step on the main branch.
+    - name: Auto-accept Chromatic build on main branch.
+      if: ${{ inputs.target == 'main' }}
+      uses: chromaui/action@v1
+      with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+        projectToken: ${{ secrets.projectToken }}
+        storybookBuildDir: storybook-static
+        autoAcceptChanges: true
+        # Generate snapshots for only changed stories
+        # See: https://www.chromatic.com/docs/turbosnap
+        onlyChanged: true

.github/workflows/chromatic-pr.yml

@@ -1,6 +1,10 @@
 name: Chromatic - Pull Request
 
-on: pull_request
+on:
+  pull_request:
+    # This allows us to run the workflow on PRs from when they move from draft
+    # to non-draft.
+    types: [edited, opened, synchronize, reopened]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}

.github/workflows/chromatic-push.yml

@@ -1,16 +1,31 @@
 name: Chromatic - Push
 
-on: push
+on:
+  push:
+    branches:
+      - main
+      - 'dependabot/**'
 
 jobs:
 
   # ------- Dependabot PRs --------
   chromatic_dependabot:
-    # (else) Run this step on dependabot PRs.
+    # (if) Run this step on dependabot PRs.
     if: github.actor == 'dependabot[bot]'
     name: Chromatic - Skip on dependabot PRs (push)
     uses: ./.github/workflows/chromatic-build.yml
     with:
       target: 'bot'
     secrets:
       projectToken: ${{ secrets.CHROMATIC_APP_CODE }}
+
+  # ------- main branch --------
+  chromatic_main:
+    # (else) Run this step on the main branch.
+    if: github.ref_name == 'main'
+    name: Chromatic - Auto-approve on main (push)
+    uses: ./.github/workflows/chromatic-build.yml
+    with:
+      target: 'main'
+    secrets:
+      projectToken: ${{ secrets.CHROMATIC_APP_CODE }}

.github/workflows/node-ci-push.yml

@@ -68,45 +68,3 @@ jobs:
       with:
         token: ${{ secrets.CODECOV_TOKEN }}
         files: ./coverage/coverage-final.json
-
-  chromatic:
-    needs: [prime_cache_primary]
-    name: Update Chromatic
-    env:
-      CI: true
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        # Use a matrix as it means we get the version info in the job name
-        # which is very helpful.
-        os: [ubuntu-latest]
-        node-version: [16.x]
-    steps:
-    - uses: actions/checkout@v2
-      with:
-          # This makes Actions fetch all Git history so that Chromatic can
-          # track baselines with the correct commits
-          # see: https://www.chromatic.com/docs/branching-and-baselines
-          fetch-depth: 0
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node-version }}
-
-    # Cache and install dependencies
-    - name: Install & cache node_modules
-      uses: Khan/actions@shared-node-cache-v0
-      with:
-        node-version: ${{ matrix.node-version }}
-
-    - name: Build all packages
-      run: yarn build
-    - name: Build Storybook
-      run: yarn build:storybook
-    - name: Publish to Chromatic
-      uses: chromaui/action@v1
-      with:
-        token: ${{ secrets.GITHUB_TOKEN }}
-        projectToken: ${{ secrets.CHROMATIC_APP_CODE }}
-        autoAcceptChanges: true
-        storybookBuildDir: storybook-static