screenshot-test.yml

name: Checking Component Screenshots

on:
  push:
    branches: [main]
  pull_request:
    branches:
      - main
      - 'release/*'

permissions:
  contents: read
  statuses: write
  pull-requests: write
  id-token: write

concurrency:
  group: screenshots-${{ github.event.pull_request.number || github.sha }}
  cancel-in-progress: true

jobs:
  screenshots:
    name: Checking Component Screenshots
    runs-on: ubuntu-latest
    continue-on-error: true # TODO(hediet): Remove once screenshot pipeline is stable
    steps:
      - name: Checkout
        uses: actions/checkout@v6

      - name: Setup Node.js
        uses: actions/setup-node@v6
        with:
          node-version-file: .nvmrc

      - name: Install dependencies
        run: npm ci --ignore-scripts
        env:
          ELECTRON_SKIP_BINARY_DOWNLOAD: 1
          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

      - name: Install build dependencies
        run: npm ci
        working-directory: build

      - name: Install rspack dependencies
        run: npm ci
        working-directory: build/rspack

      - name: Copy codicons
        run: cp node_modules/@vscode/codicons/dist/codicon.ttf src/vs/base/browser/ui/codicons/codicon/codicon.ttf

      - name: Transpile source
        run: npm run transpile-client

      - name: Install Playwright Chromium
        run: npx playwright install chromium

      - name: Capture screenshots
        run: ./node_modules/.bin/component-explorer render --project ./test/componentFixtures/component-explorer.json

      - name: Check blocks-ci screenshots
        id: blocks-ci
        run: |
          node build/lib/screenshotBlocksCi.ts \
            test/componentFixtures/.screenshots/current/manifest.json \
            test/componentFixtures/blocks-ci-screenshots.md \
            https://hediet-screenshots.azurewebsites.net \
            > /tmp/blocks-ci-updated.md 2>/tmp/blocks-ci-stderr.txt \
            && echo "match=true" >> "$GITHUB_OUTPUT" \
            || {
              echo "match=false" >> "$GITHUB_OUTPUT"
              cat /tmp/blocks-ci-stderr.txt >&2
              CONTENT=$(cat /tmp/blocks-ci-updated.md)
              echo "content<<BLOCKS_CI_EOF" >> "$GITHUB_OUTPUT"
              echo "$CONTENT" >> "$GITHUB_OUTPUT"
              echo "BLOCKS_CI_EOF" >> "$GITHUB_OUTPUT"
            }

      - name: Upload screenshots
        uses: actions/upload-artifact@v7
        with:
          name: screenshots
          path: test/componentFixtures/.screenshots/current/

      - name: Get OIDC token
        id: oidc
        run: |
          TOKEN=$(curl -sS -H "Authorization: bearer $ACTIONS_ID_TOKEN_REQUEST_TOKEN" \
            "$ACTIONS_ID_TOKEN_REQUEST_URL&audience=https://hediet-screenshots.azurewebsites.net" \
            | jq -r .value)
          echo "::add-mask::$TOKEN"
          echo "token=$TOKEN" >> "$GITHUB_OUTPUT"

      - name: Upload screenshots to service
        run: |
          cd test/componentFixtures/.screenshots/current
          zip -qr "$GITHUB_WORKSPACE/screenshots.zip" .
          curl -sS -f -X POST "https://hediet-screenshots.azurewebsites.net/upload" \
            -H "Content-Type: application/zip" \
            -H "Authorization: Bearer $SCREENSHOT_SERVICE_TOKEN" \
            --data-binary @"$GITHUB_WORKSPACE/screenshots.zip"
        env:
          SCREENSHOT_SERVICE_TOKEN: ${{ steps.oidc.outputs.token }}

      - name: Diff screenshots against merge base
        id: diff
        if: github.event_name == 'pull_request'
        run: |
          BODY=$(node build/lib/screenshotDiffReport.ts \
            https://hediet-screenshots.azurewebsites.net \
            ${{ github.repository_owner }} \
            ${{ github.event.repository.name }} \
            ${{ github.event.pull_request.base.sha }} \
            ${{ github.sha }})
          if [ -n "$BODY" ]; then
            echo "has_changes=true" >> "$GITHUB_OUTPUT"
            echo "body<<SCREENSHOT_EOF" >> "$GITHUB_OUTPUT"
            echo "$BODY" >> "$GITHUB_OUTPUT"
            echo "SCREENSHOT_EOF" >> "$GITHUB_OUTPUT"
          else
            echo "No screenshot changes to report."
          fi
          if [ -f .tmp/screenshotDiffReport.json ]; then
            echo "::group::Compare response JSON"
            cat .tmp/screenshotDiffReport.json
            echo "::endgroup::"
          fi
        continue-on-error: true
        env:
          SCREENSHOT_SERVICE_TOKEN: ${{ steps.oidc.outputs.token }}

      - name: Post PR comment
        if: github.event_name == 'pull_request' && (steps.diff.outputs.has_changes == 'true' || steps.blocks-ci.outputs.match == 'false')
        uses: actions/github-script@v8
        with:
          script: |
            const marker = '<!-- screenshot-diff-report -->';
            let body = process.env.COMMENT_BODY || '';
            const blocksCiContent = process.env.BLOCKS_CI_CONTENT;

            if (blocksCiContent) {
              if (body) { body += '\n\n---\n\n'; }
              body += '### blocks-ci screenshots changed\n\n';
              body += 'Replace the contents of `test/componentFixtures/blocks-ci-screenshots.md` with:\n\n';
              body += '<details>\n<summary>Updated blocks-ci-screenshots.md</summary>\n\n';
              body += '```md\n' + blocksCiContent + '\n```\n\n';
              body += '</details>';
            }

            body = marker + '\n' + body;

            const { data: comments } = await github.rest.issues.listComments({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: context.issue.number,
              per_page: 100,
            });
            const existing = comments.find(c => c.body?.startsWith(marker));

            if (existing) {
              await github.rest.issues.updateComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                comment_id: existing.id,
                body,
              });
            } else {
              await github.rest.issues.createComment({
                owner: context.repo.owner,
                repo: context.repo.repo,
                issue_number: context.issue.number,
                body,
              });
            }
        env:
          COMMENT_BODY: ${{ steps.diff.outputs.body }}
          BLOCKS_CI_CONTENT: ${{ steps.blocks-ci.outputs.content }}

      - name: Fail if blocks-ci hashes changed
        if: steps.blocks-ci.outputs.match == 'false'
        run: |
          echo "::error::blocks-ci screenshot hashes do not match committed file. See PR comment for updated content."
          exit 1

      # - name: Compare screenshots
      #   id: compare
      #   run: |
      #     ./node_modules/.bin/component-explorer screenshot:compare \
      #       --project ./test/componentFixtures \
      #       --report ./test/componentFixtures/.screenshots/report
      #   continue-on-error: true

      # - name: Prepare explorer artifact
      #   run: |
      #     mkdir -p /tmp/explorer-artifact/screenshot-report
      #     cp -r build/vite/dist/* /tmp/explorer-artifact/
      #     if [ -d test/componentFixtures/.screenshots/report ]; then
      #       cp -r test/componentFixtures/.screenshots/report/* /tmp/explorer-artifact/screenshot-report/
      #     fi

      # - name: Upload explorer artifact
      #   uses: actions/upload-artifact@v7
      #   with:
      #     name: component-explorer
      #     path: /tmp/explorer-artifact/

      # - name: Upload screenshot report
      #   if: steps.compare.outcome == 'failure'
      #   uses: actions/upload-artifact@v7
      #   with:
      #     name: screenshot-diff
      #     path: |
      #       test/componentFixtures/.screenshots/current/
      #       test/componentFixtures/.screenshots/report/

      # - name: Set check title
      #   env:
      #     GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      #   run: |
      #     REPORT="test/componentFixtures/.screenshots/report/report.json"
      #     STATE="success"
      #     if [ -f "$REPORT" ]; then
      #       CHANGED=$(node -e "const r = require('./$REPORT'); console.log(r.summary.added + r.summary.removed + r.summary.changed)")
      #       TITLE="⚠ ${CHANGED} screenshots changed"
      #       BLOCKS_CI=$(node -e "
      #         const r = require('./$REPORT');
      #         const blocking = Object.entries(r.fixtures).filter(([, f]) =>
      #           f.status !== 'unchanged' && (f.labels || []).includes('blocks-ci')
      #         );
      #         if (blocking.length > 0) {
      #           console.log(blocking.map(([name]) => name).join(', '));
      #         }
      #       ")
      #       if [ -n "$BLOCKS_CI" ]; then
      #         STATE="failure"
      #         TITLE="❌ ${CHANGED} screenshots changed (blocks CI: ${BLOCKS_CI})"
      #       fi
      #     else
      #       TITLE="✅ Screenshots match"
      #     fi

      #     SHA="${{ github.event.pull_request.head.sha || github.sha }}"
      #     DETAILS_URL="https://hediet-ghartifactpreview.azurewebsites.net/${{ github.repository }}/run/${{ github.run_id }}/component-explorer/___explorer.html?report=./screenshot-report/report.json&search=changed"

      #     gh api "repos/${{ github.repository }}/statuses/$SHA" \
      #       --input - <<EOF || echo "::warning::Could not create commit status (expected for fork PRs)"
      #     {"state":"$STATE","target_url":"$DETAILS_URL","description":"$TITLE","context":"Component Screenshots"}
      #     EOF

      # - name: Post PR comment
      #   if: github.event_name == 'pull_request'
      #   env:
      #     GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      #   run: |
      #     COMMENT_MARKER="<!-- screenshot-report -->"
      #     BODY="$COMMENT_MARKER"$'\n'
      #
      #     if [ -f test/componentFixtures/.screenshots/report.md ]; then
      #       BODY+=$(cat test/componentFixtures/.screenshots/report.md)
      #       BODY+=$'\n\n'
      #       BODY+="📦 [Download the \`screenshot-diff\` artifact](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}) to review images."
      #     else
      #       BODY+="## Screenshots ✅"$'\n\n'
      #       BODY+="No visual changes detected."
      #     fi
      #
      #     # Find existing comment
      #     EXISTING=$(gh api "repos/${{ github.repository }}/issues/${{ github.event.pull_request.number }}/comments" \
      #       --paginate --jq ".[] | select(.body | startswith(\"$COMMENT_MARKER\")) | .id" | head -1)
      #
      #     if [ -n "$EXISTING" ]; then
      #       gh api "repos/${{ github.repository }}/issues/comments/$EXISTING" -X PATCH -f body="$BODY"
      #     else
      #       gh pr comment "${{ github.event.pull_request.number }}" --body "$BODY"
      #     fi