Chromatic #2759
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Workflow name | |
| name: "Chromatic" | |
| # Event for the workflow | |
| 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: | |
| # Operating System | |
| runs-on: ubuntu-latest | |
| # Only run if the user is not a bot | |
| if: ${{ !endsWith(github.actor , 'bot') }} | |
| environment: staging | |
| # Job steps | |
| steps: | |
| # 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 | |
| - 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: | | |
| frontend: | |
| - 'src/components/**' | |
| - 'src/layouts/**' | |
| - '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: ${{ env.ISOMER_RUN_CHROMATIC_BUILD == 'true' }} | |
| uses: actions/setup-node@v3 | |
| with: | |
| node-version: "18.x" | |
| cache: "npm" | |
| - name: Install dependencies | |
| if: ${{ env.ISOMER_RUN_CHROMATIC_BUILD == 'true' }} | |
| run: npm ci | |
| - 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: ${{ 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 |