lite-screenshots.yml

name: Lite UI Screenshots

# Asks a pull request that touches Lite's CSS for before/after screenshots, in
# one comment. It mentions nobody and renders nothing itself.
#
# It applies no label. pr-labeler marks any pull request with CSS in it `CSS`,
# which says what the diff contains, not what the author owes. Plenty of CSS
# changes show nothing on screen — a renamed token, a moved rule — and the
# author is the one who can tell, so the comment asks for screenshots only if
# the change is visible. `screenshots needed` is there for a human to apply by
# hand when they do want them.
#
# Asking is a one-time event, deliberately: a reminder that repeats is a
# reminder people mute. This job used to apply `screenshots needed` itself, and
# before that pr-labeler did — which runs on every push and only ever adds, so
# the label returned on the push that landed the screenshots and read as though
# they were never given. A request cannot live there; a description can.
#
# Capturing them in CI was tried and abandoned: under the bare X server on the
# Linux runners this Electron build paints a frame on load and not reliably
# afterwards, so three of eight surfaces hung indefinitely regardless of whether
# the capture went through Playwright or the DevTools protocol directly. The
# same spec passes on a developer machine, so capture lives there — see the
# `lite-screenshots` skill.
#
# This job renders nothing, so it cannot fail that way.

on:
  pull_request:
    types: [opened, synchronize, reopened, labeled, ready_for_review]

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

permissions:
  contents: read

jobs:
  changes:
    # Nobody is being asked to review a draft yet, so nothing asks it for
    # screenshots. `ready_for_review` above is what picks it up later.
    if: github.event.pull_request.draft == false
    runs-on: ubuntu-latest
    outputs:
      css: ${{ steps.filter.outputs.css }}
    steps:
      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
        with:
          persist-credentials: false
      - uses: dorny/paths-filter@ceb8a2b8f2d89434be7ff52d3de7ec3738c5cc9d # v4.0.3
        id: filter
        with:
          filters: |
            css:
              - 'apps/lite/ui/**/*.css'
              - 'packages/ui-react/**/*.css'

  remind:
    needs: changes
    # The paths filter is what makes the job run on its own. The label term
    # covers a human applying `screenshots needed` by hand to opt in a change
    # the glob misses, such as a layout change with no CSS in it.
    #
    # `screenshots` means they were already posted — typically by the
    # `lite-screenshots` skill while the pull request was still a draft — so
    # there is nothing to ask for.
    if: >-
      github.event.pull_request.head.repo.full_name == github.repository &&
      github.event.pull_request.draft == false &&
      !contains(github.event.pull_request.labels.*.name, 'screenshots') &&
      (contains(github.event.pull_request.labels.*.name, 'screenshots needed') ||
       needs.changes.outputs.css == 'true')
    runs-on: ubuntu-latest
    permissions:
      pull-requests: write
    env:
      PR: ${{ github.event.pull_request.number }}
      REPO: ${{ github.repository }}
      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      CSS: ${{ needs.changes.outputs.css }}
    steps:
      # One comment, put up once. Nothing here edits or re-posts on later pushes.
      #
      # The comment is the record of having asked, so it guards itself. A
      # screenshots comment (posted by the `lite-screenshots` skill) is the
      # record of having answered, and guards it the same way in case the
      # `screenshots` label was missed.
      - name: Ask for screenshots
        run: |
          marker="<!-- lite-screenshots-reminder -->"
          answered="<!-- lite-screenshots"
          state="$(gh api "repos/${REPO}/issues/${PR}/comments" --paginate \
            --jq "map(.body) | if any(startswith(\"${marker}\")) then \"asked\"
                  elif any(startswith(\"${answered}\")) then \"answered\" else \"\" end")"
          case "$state" in
            asked) echo "Already asked."; exit 0 ;;
            answered) echo "Screenshots already posted."; exit 0 ;;
          esac
          if [ "$CSS" = "true" ]; then
            why="This pull request changes Lite's CSS. If the change shows on screen, before/after screenshots"
            after="Add the \`screenshots\` label"
          else
            # No CSS in the diff, so a human applied `screenshots needed` by hand.
            why="This pull request is labelled \`screenshots needed\`. Before/after screenshots"
            after="Swap the label for \`screenshots\`"
          fi
          cat > /tmp/comment.md <<EOF
          ${marker}
          ${why} make it reviewable without checking the branch out — drag them into a comment, or use the \`lite-screenshots\` skill in this repository. ${after} once they are posted. Asked once; later pushes will not repeat it.
          EOF
          gh api -X POST "repos/${REPO}/issues/${PR}/comments" \
            --input <(jq -Rs '{body: .}' /tmp/comment.md) --silent
          echo "Asked for screenshots on #${PR}."