Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Sep 6, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 73 additions & 9 deletions .github/workflows/chromatic.yml
Original file line number Diff line number Diff line change
@@ -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