preview.yaml

name: preview

on:
  workflow_run:
    workflows: ["build"]
    types:
      - completed

permissions:
  contents: read
  pull-requests: write
  checks: write

jobs:
  preview:
    if: ${{ github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.event == 'pull_request' }}
    runs-on: ubuntu-latest
    timeout-minutes: 2
    outputs:
      pr: ${{ steps.pr.outputs.result }}
      check_id: ${{ steps.check.outputs.result }}
    steps:
      - name: Create PR check
        uses: actions/github-script@v7
        id: check
        with:
          script: |
            const response = await github.rest.checks.create({
              name: 'preview',
              head_sha: '${{ github.event.workflow_run.head_sha }}',
              status: 'in_progress',
              output: {
                title: 'Preview deployment',
                summary: 'In Progress',
              },
              owner: 'commaai',
              repo: '${{ github.event.repository.name }}',
            })
            return response.data.id

      - uses: actions/checkout@v4
      - uses: oven-sh/setup-bun@v1

      - name: Download build artifacts
        uses: actions/download-artifact@v4
        with:
          name: build-artifacts-${{ github.event.workflow_run.id }}
          path: ./dist
          run-id: ${{ github.event.workflow_run.id }}
          github-token: ${{ secrets.GITHUB_TOKEN }}

      - name: Find PR number
        id: pr
        uses: actions/github-script@v7
        with:
          retries: 3
          script: |
            const response = await github.rest.search.issuesAndPullRequests({
              q: 'repo:${{ github.repository }} is:pr sha:${{ github.event.workflow_run.head_sha }}',
            })
            const items = response.data.items
            if (items.length < 1) {
              console.error('No PRs found')
              return
            }
            const pullRequestNumber = items[0].number
            console.info('Pull request number is', pullRequestNumber)
            return pullRequestNumber

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          apiToken: ${{ secrets.CLOUDFLARE_PAGES_TOKEN }}
          command: pages deploy dist --project-name=connect --branch=${{ steps.pr.outputs.result }} --commit-dirty=true

      - name: Checkout ci-artifacts
        uses: actions/checkout@v4
        with:
          repository: commaai/ci-artifacts
          ssh-key: ${{ secrets.CI_ARTIFACTS_DEPLOY_KEY }}
          path: ${{ github.workspace }}/ci-artifacts
          ref: master

      - name: take screenshots
        run: node src/ci/screenshots.cjs https://${{ steps.pr.outputs.result }}.connect-d5y.pages.dev ${{ github.workspace }}/ci-artifacts

      - name: Push Screenshots
        working-directory: ${{ github.workspace }}/ci-artifacts
        run: |
          git checkout -b new-connect/pr-${{ steps.pr.outputs.result }}
          git config user.name "GitHub Actions Bot"
          git config user.email "<>"
          git add .
          git commit -m "screenshots for PR #${{ steps.pr.outputs.result }}"
          git push origin new-connect/pr-${{ steps.pr.outputs.result }} --force

      - name: Comment URL on PR
        uses: thollander/actions-comment-pull-request@v2
        with:
          message: |
            <!-- _(run_id **${{ github.run_id }}**)_ -->

            # deployed preview: https://${{ steps.pr.outputs.result }}.connect-d5y.pages.dev

            Welcome to new-connect! Make sure to:
            * read the [contributing guidelines](https://github.com/commaai/new-connect?tab=readme-ov-file#contributing)
            * mark your PR as a draft until it's ready to review
            * post the preview on [Discord](https://discord.comma.ai); feedback from users will speedup the PR review

            ### Mobile
            <table>
              <tr>
                <td><img src="https://raw.githubusercontent.com/commaai/ci-artifacts/new-connect/pr-${{ steps.pr.outputs.result }}/Login-mobile.playwright.png"></td>
                <td><img src="https://raw.githubusercontent.com/commaai/ci-artifacts/new-connect/pr-${{ steps.pr.outputs.result }}/RouteActivity-mobile.playwright.png"></td>
                <td><img src="https://raw.githubusercontent.com/commaai/ci-artifacts/new-connect/pr-${{ steps.pr.outputs.result }}/RouteList-mobile.playwright.png"></td>
                <td><img src="https://raw.githubusercontent.com/commaai/ci-artifacts/new-connect/pr-${{ steps.pr.outputs.result }}/SettingsActivity-mobile.playwright.png"></td>
              </tr>
            </table>

            ### Desktop
            <table>
              <tr>
                <td><img src="https://raw.githubusercontent.com/commaai/ci-artifacts/new-connect/pr-${{ steps.pr.outputs.result }}/Login-desktop.playwright.png"></td>
                <td><img src="https://raw.githubusercontent.com/commaai/ci-artifacts/new-connect/pr-${{ steps.pr.outputs.result }}/RouteActivity-desktop.playwright.png"></td>
                <td><img src="https://raw.githubusercontent.com/commaai/ci-artifacts/new-connect/pr-${{ steps.pr.outputs.result }}/RouteList-desktop.playwright.png"></td>
                <td><img src="https://raw.githubusercontent.com/commaai/ci-artifacts/new-connect/pr-${{ steps.pr.outputs.result }}/SettingsActivity-desktop.playwright.png"></td>
              </tr>
            </table>
          comment_tag: run_id
          pr_number: ${{ steps.pr.outputs.result }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

  update_pr_check:
    needs: preview
    if: always() && github.event.workflow_run.event == 'pull_request'
    runs-on: ubuntu-latest
    steps:
    - name: Update PR check
      uses: actions/github-script@v7
      with:
        script: |
          github.rest.checks.update({
            check_run_id: ${{ needs.preview.outputs.check_id }},
            name: 'preview',
            head_sha: '${{ github.event.workflow_run.head_sha }}',
            status: 'completed',
            conclusion: '${{ needs.preview.result }}',
            output: {
              title: 'Preview deployment',
              summary: 'Result: ${{ needs.preview.result }}',
            },
            owner: 'commaai',
            repo: '${{ github.event.repository.name }}',
          })