Merge branch 'refs/heads/main' into refactor-typo

sbb-design-systems · Apr 29, 2024 · 0310f47 · 0310f47
2 parents 1675081 + bbf1b3b
commit 0310f47
Show file tree

Hide file tree

Showing 3 changed files with 373 additions and 321 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
diff --git a/package.json b/package.json
@@ -61,12 +61,12 @@
   "devDependencies": {
     "@commitlint/cli": "19.3.0",
     "@commitlint/config-conventional": "19.2.2",
-    "@custom-elements-manifest/analyzer": "0.9.6",
+    "@custom-elements-manifest/analyzer": "0.9.8",
     "@custom-elements-manifest/to-markdown": "0.1.0",
     "@eslint/eslintrc": "3.0.2",
     "@eslint/js": "9.1.1",
     "@lit-labs/testing": "0.2.3",
-    "@lit/react": "1.0.4",
+    "@lit/react": "1.0.5",
     "@open-wc/lit-helpers": "0.7.0",
     "@open-wc/testing": "4.0.0",
     "@sbb-esta/lyne-design-tokens": "0.6.0",
@@ -82,8 +82,8 @@
     "@types/glob": "8.1.0",
     "@types/mocha": "10.0.6",
     "@types/node": "20.12.7",
-    "@types/react": "18.2.79",
-    "@types/react-dom": "18.2.25",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "7.7.1",
     "@typescript-eslint/parser": "7.7.1",
     "@web/test-runner": "0.18.1",
@@ -103,7 +103,7 @@
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-yml": "1.14.0",
     "glob": "10.3.12",
-    "globals": "15.0.0",
+    "globals": "15.1.0",
     "husky": "9.0.11",
     "lint-staged": "15.2.2",
     "lit-analyzer": "2.0.3",
@@ -112,8 +112,8 @@
     "playwright": "1.43.1",
     "postcss": "8.4.38",
     "prettier": "3.2.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "rollup-plugin-postcss-lit": "2.1.0",
     "sass": "1.75.0",
     "sinon": "17.0.1",