diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 8595d6d07..bc7e2c975 100644 --- a/.github/workflows/chromatic.yml +++ b/.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/pull-request-comment-trigger@v1.1.0 + 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,22 +73,43 @@ 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/request-action@v2.x + 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: @@ -55,3 +117,5 @@ jobs: # 👇 Chromatic projectToken, refer to the manage page to obtain it. projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} onlyChanged: true + branchName: ${{ env.ISOMER_BRANCH_NAME }} + autoAcceptChanges: develop