feat: re-introduce comment-based trigger for Chromatic (#1468)

.github/workflows/chromatic.yml

@@ -2,27 +2,68 @@
 name: "Chromatic"
 
 # Event for the workflow
-on: push
+on:
+  issue_comment:
+    types: [created, edited]
+
+  push:
+    branches:
+      - develop
 
 env:
+  # The full comment text to match to trigger this workflow
+  ISOMER_TRIGGER_COMMENT: "!run chromatic"
+  # The slug for the Isomer core team
+  ISOMER_CORE_TEAM_SLUG: core
+  # Use GitHub Token
+  GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
   # Required for the chromatic action
   REACT_APP_BACKEND_URL: "https://cms-api.isomer.gov.sg/v1"
 
 # List of jobs
 jobs:
-  chromatic-deployment:
+  chromatic:
     # Operating System
     runs-on: ubuntu-latest
-    # Only run if the user is not a bot and there are changes
+    # Only run if the user is not a bot
     if: ${{ !endsWith(github.actor , 'bot') }}
     environment: staging
     # Job steps
     steps:
-      - uses: actions/checkout@v3
+      # Determine if the PR comment should trigger the Chromatic build
+      - name: Check if user is part of Isomer core team (PR comment)
+        if: ${{ github.event_name == 'issue_comment' && github.event.issue.pull_request }}
+        uses: tspascoal/get-user-teams-membership@v1
+        id: checkUserMember
+        with:
+          username: ${{ github.actor }}
+          team: ${{ env.ISOMER_CORE_TEAM_SLUG }}
+          GITHUB_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }} # requires read:org
+
+      - name: Check for trigger words (in PR comment)
+        if: ${{ github.event_name == 'issue_comment' && github.event.issue.pull_request }}
+        uses: khan/[email protected]
+        id: check
         with:
+          trigger: "${{ env.ISOMER_TRIGGER_COMMENT }}"
+          prefix_only: "true"
+          reaction: "+1"
+
+      - name: Checkout repository (pull request)
+        if: ${{ github.event_name == 'issue_comment' }}
+        uses: actions/checkout@v3
+        with:
+          ref: refs/pull/${{ github.event.issue.number }}/head
           fetch-depth: 0 # 👈 Required to retrieve git history
 
-      - uses: dorny/paths-filter@v2
+      - name: Checkout repository (push)
+        if: ${{ github.event_name == 'push' }}
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # 👈 Required to retrieve git history
+
+      - name: Check for changes
+        uses: dorny/paths-filter@v2
         id: filter
         with:
           filters: |
@@ -32,26 +73,49 @@ jobs:
               - 'src/theme/**'
               - 'src/styles/**'
 
+      - name: Set environment variable to run Chromatic build
+        if: ${{ (github.event_name == 'push' || (steps.check.outputs.triggered == 'true' && github.event_name == 'issue_comment' && github.event.issue.pull_request)) && steps.filter.outputs.frontend == 'true' }}
+        run: echo "ISOMER_RUN_CHROMATIC_BUILD=true" >> $GITHUB_ENV
+
       # This extra step is not in the original chromatic workflow.
       # This is to pin the version of node (18.x) used.
       - name: Setup Node.js
-        if: ${{ steps.filter.outputs.frontend == 'true' }}
+        if: ${{ env.ISOMER_RUN_CHROMATIC_BUILD == 'true' }}
         uses: actions/setup-node@v3
         with:
           node-version: "18.x"
           cache: "npm"
 
       - name: Install dependencies
-        if: ${{ steps.filter.outputs.frontend == 'true' }}
+        if: ${{ env.ISOMER_RUN_CHROMATIC_BUILD == 'true' }}
         run: npm ci
 
-        # 👇 Adds Chromatic as a step in the workflow
+      - name: Get pull request information (for pull requests)
+        if: ${{ env.ISOMER_RUN_CHROMATIC_BUILD == 'true' && github.event_name == 'issue_comment' }}
+        uses: octokit/[email protected]
+        id: get_pull_request
+        with:
+          route: GET /repos/{repository}/pulls/{pull_number}
+          repository: ${{ github.repository }} # isomerpages/isomercms-frontend
+          pull_number: ${{ github.event.issue.number }}
+
+      - name: Save branch name as environment variable (for pull requests)
+        if: ${{ env.ISOMER_RUN_CHROMATIC_BUILD == 'true' && github.event_name == 'issue_comment' }}
+        run: echo "ISOMER_BRANCH_NAME=${{ fromJSON(steps.get_pull_request.outputs.data).head.ref }}" >> $GITHUB_ENV
+
+      - name: Save branch name as environment variable (for push)
+        if: ${{ env.ISOMER_RUN_CHROMATIC_BUILD == 'true' && github.event_name == 'push' }}
+        run: echo "ISOMER_BRANCH_NAME=${{ github.ref_name }}" >> $GITHUB_ENV
+
+      # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
-        if: ${{ steps.filter.outputs.frontend == 'true' }}
+        if: ${{ env.ISOMER_RUN_CHROMATIC_BUILD == 'true' }}
         uses: chromaui/action@v1
         # Chromatic GitHub Action options
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           onlyChanged: true
+          branchName: ${{ env.ISOMER_BRANCH_NAME }}
+          autoAcceptChanges: develop