build: setup initial secure visual regression workflow

sbb-design-systems · Apr 26, 2024 · e4349b4 · e4349b4
1 parent 85b770d
commit e4349b4
Showing 1 changed file with 108 additions and 20 deletions.
diff --git a/.github/workflows/continuous-integration-secure.yml b/.github/workflows/continuous-integration-secure.yml
@@ -8,10 +8,13 @@ on:
     workflows: [Continuous Integration]
     types: [completed]
 
-permissions:
-  deployments: write
-  packages: write
-  pull-requests: write
+env:
+  IMAGE_REPO_PREVIEW: ghcr.io/${{ github.repository }}/storybook-preview
+  IMAGE_REPO_VISUAL_REGRESSION: ghcr.io/${{ github.repository }}/visual-regression
+  PR_NUMBER: ${{ github.event.workflow_run.pull_requests[0] != null && github.event.workflow_run.pull_requests[0].number || '' }}
+  VISUAL_REQUIRED: 'pr: visual review required'
+  VISUAL_APPROVED: 'pr: visual review approved'
+  DIFF_URL: https://lyne-visual-regression-diff-pr{}.app.sbb.ch
 
 jobs:
   preview-image:
@@ -23,9 +26,10 @@ jobs:
           github.event.workflow_run.head_branch == 'main'
         )
       )
-    env:
-      PR_NUMBER: ${{ github.event.workflow_run.pull_requests[0] != null && github.event.workflow_run.pull_requests[0].number || '' }}
-      IMAGE_REPO: ghcr.io/${{ github.repository }}/storybook-preview
+    permissions:
+      deployments: write
+      packages: write
+      pull-requests: write
     steps:
       - uses: actions/checkout@v4
       - uses: actions/download-artifact@v4
@@ -42,7 +46,7 @@ jobs:
         uses: actions/github-script@v7
         with:
           script: |
-            const environment = process.env.PR_NUMBER ? `preview-pr${process.env.PR_NUMBER}` : 'preview-main';
+            const environment = process.env.PR_NUMBER ? `preview-pr${process.env.PR_NUMBER}` : 'main';
             const payload = { owner: context.repo.owner, repo: context.repo.repo, environment };
             const { data: deployment } = await github.rest.repos.createDeployment({
               ...payload,
@@ -59,30 +63,26 @@ jobs:
             return environment;
           result-encoding: string
 
-      - name: 'Container: Login to GitHub Container Repository'
-        run: echo ${{ secrets.GITHUB_TOKEN }} | docker login ghcr.io --username ${{ github.actor }} --password-stdin
-      - name: 'Container: Build image'
-        run: docker build -t $IMAGE_REPO:${{ steps.tag-name.outputs.result }} .
+      - name: 'Container: Build and preview image'
+        run: |
+          echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin
+          docker build --tag $IMAGE_REPO_PREVIEW:${{ steps.tag-name.outputs.result }} .
+          docker push $IMAGE_REPO_PREVIEW:${{ steps.tag-name.outputs.result }}
         env:
           DOCKER_BUILDKIT: 1
-      - name: 'Container: Publish image'
-        run: docker push $IMAGE_REPO:${{ steps.tag-name.outputs.result }}
 
       - name: "Add 'preview-available' label"
         if: env.PR_NUMBER != ''
         # This label is used for filtering deployments in ArgoCD
-        uses: actions-ecosystem/action-add-labels@v1
-        with:
-          labels: preview-available
-          number: ${{ env.PR_NUMBER }}
+        run: gh issue edit ${{ env.PR_NUMBER }} --repo ${{ github.repository }} --add-label "preview-available"
 
   codecov:
     runs-on: ubuntu-latest
     if: >
       github.event.workflow_run.event == 'pull_request' &&
       github.event.workflow_run.conclusion == 'success'
-    env:
-      PR_NUMBER: ${{ github.event.workflow_run.pull_requests[0] != null && github.event.workflow_run.pull_requests[0].number || '' }}
+    permissions:
+      pull-requests: write
     steps:
       - uses: actions/checkout@v4
       - uses: actions/download-artifact@v4
@@ -100,3 +100,91 @@ jobs:
           override_pr: ${{ env.PR_NUMBER }}
           fail_ci_if_error: true
           verbose: true
+
+  visual-regression:
+    runs-on: ubuntu-latest
+    if: >
+      github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.conclusion == 'success'
+    permissions:
+      checks: write
+      packages: write
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: yarn
+      - run: yarn install --frozen-lockfile --non-interactive
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: visual-regression-screenshots
+          path: dist/screenshots/
+          run-id: ${{ github.event.workflow_run.id }}
+          github-token: ${{ secrets.GH_ACTIONS_ARTIFACT_DOWNLOAD }}
+
+      - name: Build diff-app
+        run: yarn build:diff-app
+
+      - name: Create check if changed
+        uses: actions/github-script@v7
+        id: screenshot-check
+        with:
+          script: |
+            const { readdirSync, readFileSync } = await import('fs');
+
+            // If we have no screenshots, we do not need to create a check or containers.
+            if (!readdirSync('dist/screenshots').length) {
+              return 'empty';
+            }
+
+            const diffUrl = process.env.DIFF_URL.replace('{}', process.env.PR_NUMBER);
+            const diffInfo = JSON.parse(readFileSync('dist/diff.json', 'utf8'));
+            let previousDiffInfo = {};
+            try {
+              const response = await fetch(diffUrl + 'diff.json');
+              if (response.ok) {
+                previousDiffInfo = await response.json();
+              }
+            } catch {}
+
+            // If the diff hash is the same as previously, we do not need to update the state or containers.
+            if (diffInfo.hash === previousDiffInfo.hash) {
+              return 'no-change';
+            }
+
+            const { data: deployment } = await github.rest.checks.create(({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              name: 'Visual Regression Check',
+              head_sha: context.payload.workflow_run.head_sha,
+              status: 'in_progress',
+              details_url: diffUrl,
+              output: {
+                title: 'Visual Regression Check',
+                summary: diffUrl,
+                text: `Changes: ${diffInfo.changedAmount}\nNew: ${diffInfo.newAmount}`,
+              }
+            });
+
+            return 'changed';
+          result-encoding: string
+
+      - name: Remove labels when no failed screenshots exist
+        if: steps.screenshot-check.outputs.result == 'empty'
+        run: gh issue edit $PR_NUMBER --remove-label "$VISUAL_REQUIRED"
+
+      - name: Add label and create container
+        if: steps.screenshot-check.outputs.result == 'changed'
+        run: |
+          echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin
+          docker build --tag $IMAGE_REPO_VISUAL_REGRESSION:pr$PR_NUMBER .
+          docker push $IMAGE_REPO_VISUAL_REGRESSION:pr$PR_NUMBER
+
+          gh issue edit $PR_NUMBER --remove-label "$VISUAL_APPROVED"
+          gh issue edit $PR_NUMBER --add-label "$VISUAL_REQUIRED"
+          gh issue edit $PR_NUMBER --add-label "visual-regression-diff-available"
+        env:
+          DOCKER_BUILDKIT: 1