test for revisions to canonical/vanilla-framework#5089

.github/pr-percy-prepare.yml

@@ -0,0 +1,42 @@
+name: "Prepare Percy build"
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  copy_artifact:
+    name: Copy changed files to GHA artifact
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+        with:
+          sparse-checkout: |
+            templates/docs/examples/
+            scss/
+
+      - name: Make artifact directory
+        run: mkdir -p artifact
+
+        # Archive the PR number associated with this workflow since it won't be available in the base workflow context
+        # https://github.com/orgs/community/discussions/25220
+      - name: Archive PR data
+        if: github.event_name=='pull_request'
+        working-directory: artifact
+        run: |
+          echo ${{ github.event.number }} > pr_num.txt
+          echo ${{ github.event.pull_request.head.sha }} > pr_head_sha.txt
+
+      - name: Compress artifact
+        working-directory: artifact
+        run: |
+          cp -R ../templates/docs/examples/ ../scss/ .
+          tar -czf build.tar.gz *
+
+      - name: Upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: "web-artifact-${{ github.run_id }}"
+          path: artifact/build.tar.gz

.github/pr-percy-snapshots.yml

@@ -0,0 +1,141 @@
+name: "Percy screenshots"
+
+on:
+  workflow_run:
+    workflows:
+      - "Prepare Percy build"
+    types:
+      - completed
+
+jobs:
+  upload:
+    name: Build project with proposed changes & take Percy snapshots
+    if: github.event.workflow_run.conclusion=='success'
+    runs-on: ubuntu-latest
+    outputs:
+      pr_head_sha: ${{ steps.get_pr_data.outputs.sha }}
+      percy_build_link: ${{ steps.percy_snapshot.outputs.build_link }}
+      percy_org_id: ${{ steps.percy_snapshot.outputs.org_id }}
+      percy_build_id: ${{ steps.percy_snapshot.outputs.build_id }}
+    steps:
+      - name: Checkout SCM
+        uses: actions/checkout@v4
+
+      - name: Download artifact from workflow run
+        uses: actions/download-artifact@v4
+        with:
+          name: "web-artifact-${{ github.event.workflow_run.id }}"
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          repository: ${{ github.event.workflow_run.repository.full_name }}
+          run-id: ${{ github.event.workflow_run.id }}
+
+      - name: Replace SCM files with artifact files
+        run: |
+          set -e
+          rm -rf templates/docs/examples/ scss/
+          tar xzf build.tar.gz
+          rm build.tar.gz
+          mv examples/ templates/docs/.
+
+      - name: Install Python
+        uses: actions/setup-python@v5.1.0
+        with:
+          python-version: 3.10.14
+
+      - name: Install NodeJS
+        uses: actions/setup-node@v4.0.2
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: yarn && pip3 install -r requirements.txt
+
+      - name: Build
+        run: yarn build
+
+      - name: Start testing server
+        env:
+          SECRET_KEY: local_development_fake_key
+        run: ./entrypoint 0.0.0.0:8101 &
+
+      - name: Wait for server availability
+        run: |
+          set -e
+          sleep_interval_secs=2
+          max_wait_time_secs=30
+          wait_time_secs=0
+          while [ "$wait_time_secs" -lt "$max_wait_time_secs" ]; do
+            if curl -s localhost:8101/_status/check -I; then
+              echo "Server is up!"
+              break
+            else
+              wait_time_secs=$((wait_time_secs + sleep_interval_secs))
+              if [ "$wait_time_secs" -ge "$max_wait_time_secs" ]; then
+                echo "[TIMEOUT ERROR]: Local testing server failed to respond within $max_wait_time_secs seconds!"
+                exit 1
+              else
+                echo "Waiting for server to start..."
+                sleep "$sleep_interval_secs"
+              fi
+            fi
+          done
+
+      - name: Get PR data
+        if: github.event.workflow_run.event=='pull_request'
+        id: get_pr_data
+        run: |
+          set -e
+          echo "sha=$(cat pr_head_sha.txt)" >> $GITHUB_OUTPUT
+          echo "pr=$(cat pr_num.txt)" >> $GITHUB_OUTPUT
+
+      - name: Take snapshots & upload to Percy
+        id: percy_snapshot
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_WRITE }}
+          # This identifies the diff by name in the percy diffs list
+          PERCY_BRANCH: "pull/${{ steps.get_pr_data.outputs.pr }}"
+          PERCY_COMMIT: ${{ steps.get_pr_data.outputs.sha }}
+          PERCY_CLIENT_ERROR_LOGS: false
+        run: |
+          set -e
+          # Start a percy build and capture the stdout
+          percy_output=$(yarn percy)
+          
+          # Extract the build link from the stdout of the snapshot command
+          build_link=$(echo "$percy_output" | sed -n 's/.*Finalized build #.*: \(https:\/\/percy.io\/[^ ]*\).*/\1/p')
+          
+          # Using '/' to split the $build_link, extract the organization and build identifiers
+          org_id=$(echo "$build_link" | cut -d '/' -f 4)
+          build_id=$(echo "$build_link" | cut -d '/' -f 7)
+          
+          echo "build_link=$build_link" >> $GITHUB_OUTPUT
+          echo "org_id=$org_id" >> $GITHUB_OUTPUT
+          echo "build_id=$build_id" >> $GITHUB_OUTPUT
+          echo "Percy build created at $build_link"
+
+  # Add a check to the PR to show that screenshots were sent to Percy
+  # https://docs.github.com/en/rest/checks/runs?apiVersion=2022-11-28#create-a-check-run
+  apply_pr_check:
+    name: Apply PR check
+    needs: upload
+    if: github.event.workflow_run.event=='pull_request'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Apply PR check
+        id: create_check_run
+        uses: octokit/request-action@v2.x
+        with:
+          route: POST /repos/${{github.repository}}/check-runs
+          owner: octokit
+          repo: request-action
+          name: "percy_upload"
+          head_sha: ${{ needs.upload.outputs.pr_head_sha }}
+          status: completed
+          conclusion: success
+          details_url: ${{ needs.upload.outputs.percy_build_link }}
+          output: |
+            title: "Percy build"
+            summary: "Percy build #${{ needs.upload.outputs.percy_build_id }} created"
+            text: "Percy build was created at ${{ needs.upload.outputs.percy_build_link }}"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/create-percy-snapshots.yml

@@ -1,15 +1,16 @@
-name: "Create Percy screenshots"
+name: "Percy screenshots"
 
 on:
   workflow_run:
     workflows:
-      - "Upload artifacts for Percy screenshots"
+      - "Prepare Percy build"
     types:
       - completed
 
 jobs:
   upload:
     name: Build project with proposed changes & take Percy snapshots
+    if: github.event.workflow_run.conclusion=='success'
     runs-on: ubuntu-latest
     outputs:
       pr_head_sha: ${{ steps.get_pr_data.outputs.sha }}
@@ -45,16 +46,6 @@ jobs:
           echo "sha=$(cat pr_head_sha.txt)" >> $GITHUB_OUTPUT
           echo "pr=$(cat pr_num.txt)" >> $GITHUB_OUTPUT
 
-      - name: Verify that triggering workflow run passed
-        run: |
-          set -e
-          if [[ "${{ github.event.workflow_run.conclusion }}" != "success" ]]; then
-            echo "Previous workflow run was not successful."
-            exit 1
-          else
-            echo "Previous workflow run was successful."
-          fi
-
       - name: Move artifact files into place to replace SCM
         run: |
           set -e
@@ -111,30 +102,35 @@ jobs:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_WRITE }}
           # This identifies the diff in the percy diffs list
           PERCY_BRANCH: "pull/${{ steps.get_pr_data.outputs.pr }}"
-          #PERCY_BRANCH: "${{ github.event.workflow_run.head_repository.full_name }}/${{ github.event.workflow_run.head_branch }}"
-          #PERCY_PULL_REQUEST: ${{ steps.get_pr_data.outputs.pr }}
           PERCY_COMMIT: ${{ steps.get_pr_data.outputs.sha }}
           PERCY_CLIENT_ERROR_LOGS: false
         run: |
           set -e
+          
+          # Start a percy build and capture the stdout
           percy_output=$(yarn percy)
           
+          # Fail if the Percy stdout contains "Build not created"
           if [[ $percy_output =~ "Build not created" ]]; then
             echo "Build not created."
             exit 1
           else
             echo "Build created successfully"
+            echo $percy_output
           fi
-          
+
+          # Extract the build link from the stdout of the snapshot command
           build_link=$(echo "$percy_output" | sed -n 's/.*Finalized build #.*: \(https:\/\/percy.io\/[^ ]*\).*/\1/p')
+          
+          # Using '/' to split the $build_link, extract the organization and build identifiers
           org_id=$(echo "$build_link" | cut -d '/' -f 4)
           build_id=$(echo "$build_link" | cut -d '/' -f 7)
           
           echo "build_link=$build_link" >> $GITHUB_OUTPUT
           echo "org_id=$org_id" >> $GITHUB_OUTPUT
           echo "build_id=$build_id" >> $GITHUB_OUTPUT
           
-          echo "Percy build $build_id created at $build_link"
+          echo "Percy build created at $build_link"
 
       - name: Wait for Percy build to complete
         run: npx percy build:wait --build ${{ steps.percy_snapshot.outputs.build_id }}
@@ -145,26 +141,28 @@ jobs:
       - name: Get Percy build results
         id: percy_build_results
         run: |
+          # Fetch Percy build details
           response=$(curl --request GET \
           	--url https://percy.io/api/v1/builds/${{ steps.percy_snapshot.outputs.build_id }} \
             --header "Authorization: Token ${{ secrets.PERCY_TOKEN_READ }}"
           )
-
+          
+          # Extract attributes of build and remove quotes
           build_state=$(echo $response | jq '.data.attributes."state"' | tr -d '"')
           review_state=$(echo $response | jq '.data.attributes."review-state"' | tr -d '"')
           review_state_reason=$(echo $response | jq '.data.attributes."review-state-reason"' | tr -d '"')
           num_snapshots=$(echo $response | jq '.data.attributes."total-snapshots"' | tr -d '"')
-          
+
           echo "build state $build_state"
           echo "review_state $review_state"
           echo "review_state_reason $review_state_reason"
           echo "num_snapshots $num_snapshots"
-          
+
           echo "build_state=$build_state" >> $GITHUB_OUTPUT
           echo "review_state=$review_state" >> $GITHUB_OUTPUT
           echo "review_state_reason=$review_state_reason" >> $GITHUB_OUTPUT
           echo "num_snapshots=$num_snapshots" >> $GITHUB_OUTPUT
-          
+
           if [ "$review_state" != "approved" ]; then
             echo "Percy diffs were detected."
             exit 1

.github/workflows/upload-diff-files.yml

@@ -1,4 +1,4 @@
-name: "Upload artifacts for Percy screenshots"
+name: "Prepare Percy build"
 
 on:
   pull_request: