Update CI: Argos visual regression for twenty-front storybook (#21454)

## What Adds Argos visual regression for `twenty-front`, reusing the storybook CI already builds and the existing sharded test matrix. Stories in the `modules` and `pages` scopes are captured as PNGs during `front-sb-test`, merged into one artifact, and pixel-diffed against `main` on the self-hosted Argos with results posted as a PR comment — same pipeline as `twenty-ui` (#21210 / #21262). ## How - **Capture**: `@argos-ci/storybook` vitest plugin, same setup as `twenty-ui`. Skipped for `performance` stories (nondeterministic profiling reports). Freezes framer-motion to avoid flaky diffs (#21412). - **Sharding**: each modules/pages shard uploads a partial artifact; a new `front-sb-screenshots` job merges them into `argos-screenshots-twenty-front` (`overwrite: true` so re-runs work). - **Baselines**: `CI Front` now runs on `push: main` — Argos resolves base builds by exact merge-base commit, so every main commit needs a build (#21217/#21222 pattern). Main pushes get a per-SHA concurrency group so back-to-back merges can't cancel queued runs and leave baseline gaps; the `performance` scope is dropped on push. - **Dispatch**: `visual-regression-dispatch.yaml` watches `CI Front` → `project=twenty-front`. ## Rollout - ✅ Prod Argos project `twenty-front` created (id 68) + `ARGOS_TOKEN_FRONT` secret set - ⬜ Merge the twentyhq/ci-privileged companion PR **before** this one - First PR builds show as *orphan* until the first main push creates a baseline (expected, same as the twenty-ui rollout)
2026-06-12 15:36:16 +02:00
parent ab7c760872
commit c4453923f0
14 changed files with 97 additions and 57 deletions
@@ -3,12 +3,14 @@ name: CI Front
 on:
  pull_request:
  merge_group:
+  push:
+    branches: [main]

 permissions:
  contents: read

 concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
+  group: ${{ github.workflow }}-${{ github.ref }}${{ github.ref == 'refs/heads/main' && format('-{0}', github.sha) || '' }}
  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}

 env:
@@ -18,7 +20,7 @@ env:

 jobs:
  changed-files-check:
-    if: github.event_name != 'merge_group'
+    if: github.event_name == 'pull_request'
    uses: ./.github/workflows/changed-files.yaml
    with:
      files: |
@@ -33,7 +35,10 @@ jobs:
        !packages/twenty-sdk/package.json
  front-sb-build:
    needs: changed-files-check
-    if: needs.changed-files-check.outputs.any_changed == 'true'
+    if: >-
+      always() &&
+      (github.event_name == 'push' ||
+      needs.changed-files-check.outputs.any_changed == 'true')
    timeout-minutes: 30
    runs-on: ubuntu-latest-8-cores
    env:
@@ -65,11 +70,12 @@ jobs:
    timeout-minutes: 30
    runs-on: ubuntu-latest
    needs: front-sb-build
+    if: always() && needs.front-sb-build.result == 'success'
    strategy:
      fail-fast: false
      matrix:
        shard: [1, 2, 3, 4]
-        storybook_scope: [modules, pages, performance]
+        storybook_scope: ${{ github.event_name == 'push' && fromJSON('["modules", "pages"]') || fromJSON('["modules", "pages", "performance"]') }}
    env:
      SHARD_COUNTER: 4
      REACT_APP_SERVER_BASE_URL: http://localhost:3000
@@ -119,6 +125,14 @@ jobs:
          npx http-server packages/twenty-front/storybook-static --port 6006 --silent &
          timeout 30 bash -c 'until curl -sf http://localhost:6006 > /dev/null 2>&1; do sleep 1; done'
          npx nx storybook:test twenty-front --configuration=${{ matrix.storybook_scope }} --shard=${{ matrix.shard }}/${{ env.SHARD_COUNTER }}
+      - name: Upload screenshots for visual regression
+        if: always() && !cancelled() && matrix.storybook_scope != 'performance'
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: argos-screenshots-twenty-front-${{ matrix.storybook_scope }}-${{ matrix.shard }}
+          path: packages/twenty-front/screenshots
+          retention-days: 1
+          overwrite: true
      # - name: Rename coverage file
      #   run: |
      #     if [ -f "packages/twenty-front/coverage/storybook/coverage-final.json" ]; then
@@ -160,6 +174,25 @@ jobs:
  #         npx nyc merge coverage-artifacts ${{ env.PATH_TO_COVERAGE }}/coverage-storybook.json
  #     - name: Checking coverage
  #       run: npx nx storybook:coverage twenty-front --checkCoverage=true --configuration=${{ matrix.storybook_scope }}
+  front-sb-screenshots:
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    needs: front-sb-test
+    if: always() && needs.front-sb-test.result == 'success'
+    steps:
+      - name: Download shard screenshot artifacts
+        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
+        with:
+          pattern: argos-screenshots-twenty-front-*
+          merge-multiple: true
+          path: screenshots
+      - name: Upload merged screenshots artifact
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: argos-screenshots-twenty-front
+          path: screenshots
+          retention-days: 1
+          overwrite: true
  front-task:
    needs: changed-files-check
    if: needs.changed-files-check.outputs.any_changed == 'true'
@@ -235,6 +268,7 @@ jobs:
        # merge-reports-and-check-coverage,
        front-sb-test,
        front-sb-build,
+        front-sb-screenshots,
      ]
    steps:
      - name: Fail job if any needs failed
@@ -10,7 +10,7 @@ permissions:
  contents: read

 concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
+  group: ${{ github.workflow }}-${{ github.ref }}${{ github.ref == 'refs/heads/main' && format('-{0}', github.sha) || '' }}
  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}

 jobs:
@@ -10,7 +10,7 @@ permissions:
  contents: read

 concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
+  group: ${{ github.workflow }}-${{ github.ref }}${{ github.ref == 'refs/heads/main' && format('-{0}', github.sha) || '' }}
  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}

 jobs:
@@ -9,7 +9,7 @@ name: Visual Regression Dispatch

 on:
  workflow_run:
-    workflows: ['CI UI', 'CI New UI']
+    workflows: ['CI UI', 'CI New UI', 'CI Front']
    types: [completed]

 permissions:
@@ -24,6 +24,7 @@ jobs:
    timeout-minutes: 5
    outputs:
      workflow_name: ${{ steps.context.outputs.workflow_name }}
+      project: ${{ steps.context.outputs.project }}
      artifact_name: ${{ steps.context.outputs.artifact_name }}
      has_artifact: ${{ steps.check-artifact.outputs.exists }}
      is_pr: ${{ steps.pr-info.outputs.has_pr }}
@@ -36,12 +37,17 @@ jobs:
        with:
          script: |
            const name = context.payload.workflow_run.name;
-            const artifactName = name === 'CI New UI'
-              ? 'argos-screenshots-twenty-new-ui'
-              : 'argos-screenshots-twenty-ui';
+            const projectByWorkflow = {
+              'CI UI': 'twenty-ui',
+              'CI New UI': 'twenty-new-ui',
+              'CI Front': 'twenty-front',
+            };
+            const project = projectByWorkflow[name] ?? 'twenty-ui';
+            const artifactName = `argos-screenshots-${project}`;
            core.setOutput('workflow_name', name);
+            core.setOutput('project', project);
            core.setOutput('artifact_name', artifactName);
-            core.info(`Workflow: ${name}, artifact: ${artifactName}`);
+            core.info(`Workflow: ${name}, project: ${project}, artifact: ${artifactName}`);

      - name: Check if screenshots artifact exists
        id: check-artifact
@@ -134,18 +140,17 @@ jobs:
              core.setOutput('sha', '');
            }

-  # ── Dispatch: twenty-ui pixel diff (CI UI, PRs + main) ──
-  dispatch-twenty-ui:
+  # ── Dispatch: pixel diff for the triggering workflow's project (PRs + main) ──
+  dispatch-pixel-diff:
    needs: resolve-context
-    if: >-
-      needs.resolve-context.outputs.workflow_name == 'CI UI' &&
-      needs.resolve-context.outputs.has_artifact == 'true'
+    if: needs.resolve-context.outputs.has_artifact == 'true'
    runs-on: ubuntu-latest
    timeout-minutes: 5
    steps:
      - name: Dispatch to ci-privileged
        env:
          GH_TOKEN: ${{ secrets.CI_PRIVILEGED_DISPATCH_TOKEN }}
+          PROJECT: ${{ needs.resolve-context.outputs.project }}
          PR_NUMBER: ${{ needs.resolve-context.outputs.pr_number }}
          WORKFLOW_RUN_ID: ${{ github.event.workflow_run.id }}
          REPOSITORY: ${{ github.repository }}
@@ -157,47 +162,7 @@ jobs:
          ARGS=(
            --method POST
            -f event_type=visual-regression
-            -f "client_payload[project]=twenty-ui"
-            -f "client_payload[artifact_name]=$ARTIFACT_NAME"
-            -f "client_payload[run_id]=$WORKFLOW_RUN_ID"
-            -f "client_payload[repo]=$REPOSITORY"
-            -f "client_payload[branch]=$BRANCH"
-            -f "client_payload[commit]=$COMMIT"
-          )
-
-          if [ -n "$PR_NUMBER" ]; then
-            ARGS+=(-f "client_payload[pr_number]=$PR_NUMBER")
-          fi
-          if [ -n "$REFERENCE_COMMIT" ]; then
-            ARGS+=(-f "client_payload[reference_commit]=$REFERENCE_COMMIT")
-          fi
-
-          gh api repos/twentyhq/ci-privileged/dispatches "${ARGS[@]}"
-
-  # ── Dispatch: twenty-new-ui pixel diff (CI New UI, PRs + main) ──
-  dispatch-twenty-new-ui:
-    needs: resolve-context
-    if: >-
-      needs.resolve-context.outputs.workflow_name == 'CI New UI' &&
-      needs.resolve-context.outputs.has_artifact == 'true'
-    runs-on: ubuntu-latest
-    timeout-minutes: 5
-    steps:
-      - name: Dispatch to ci-privileged
-        env:
-          GH_TOKEN: ${{ secrets.CI_PRIVILEGED_DISPATCH_TOKEN }}
-          WORKFLOW_RUN_ID: ${{ github.event.workflow_run.id }}
-          REPOSITORY: ${{ github.repository }}
-          BRANCH: ${{ github.event.workflow_run.head_branch }}
-          COMMIT: ${{ github.event.workflow_run.head_sha }}
-          PR_NUMBER: ${{ needs.resolve-context.outputs.pr_number }}
-          REFERENCE_COMMIT: ${{ needs.resolve-context.outputs.merge_base_sha }}
-          ARTIFACT_NAME: ${{ needs.resolve-context.outputs.artifact_name }}
-        run: |
-          ARGS=(
-            --method POST
-            -f event_type=visual-regression
-            -f "client_payload[project]=twenty-new-ui"
+            -f "client_payload[project]=$PROJECT"
            -f "client_payload[artifact_name]=$ARTIFACT_NAME"
            -f "client_payload[run_id]=$WORKFLOW_RUN_ID"
            -f "client_payload[repo]=$REPOSITORY"