feat: add Argos visual regression for twenty-new-ui (#21262)

## Summary - Add `ci-new-ui.yaml` workflow mirroring `ci-ui.yaml` for `twenty-new-ui` (lint, typecheck, test, Storybook build, Storybook test with screenshot capture) - Update `visual-regression-dispatch.yaml` to watch both `CI UI` and `CI New UI` workflows, with dispatches for three Argos projects: 1. **Self-hosted twenty-ui pixel diff** (existing, unchanged) 2. **Self-hosted twenty-new-ui pixel diff** (new) -- standard regression against main 3. **Self-hosted twenty-ui vs twenty-new-ui comparison** (new) -- cross-package visual parity - Add "Visual regression" documentation section to `twenty-new-ui/README.md` with local dev workflow (argos-tunnel via super CLI + `storybook:visual-diff`) - Resolve open question 4 in README (Argos confirmed as visual regression tool) ## Companion PR Requires companion PR on `twentyhq/ci-privileged` for the new `visual-regression-cloud` dispatch handler, upload script, and post-comment logic. ## Manual setup After merging both PRs, create two Argos projects on argos.twenty-internal.com: - `twenty-new-ui` (pixel diff) - `twenty-ui-vs-new-ui` (cross-package comparison, auto-approved branch: main) Add secrets `ARGOS_TOKEN_NEW_UI` and `ARGOS_TOKEN_COMPARISON` to ci-privileged. ## Test plan - [ ] Verify `CI New UI` workflow triggers on twenty-new-ui changes - [ ] Verify screenshot artifact `argos-screenshots-twenty-new-ui` is uploaded - [ ] Verify dispatch sends `visual-regression-cloud` events to ci-privileged - [ ] Verify existing `CI UI` → self-hosted Argos flow is unchanged
2026-06-08 13:04:52 +02:00
parent 79c9c75776
commit b0d29689d2
3 changed files with 317 additions and 57 deletions
@@ -0,0 +1,106 @@
+name: CI New UI
+
+on:
+  pull_request:
+  merge_group:
+  push:
+    branches: [main]
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
+
+jobs:
+  changed-files-check:
+    if: github.event_name == 'pull_request'
+    uses: ./.github/workflows/changed-files.yaml
+    with:
+      files: |
+        package.json
+        yarn.lock
+        packages/twenty-new-ui/**
+        packages/twenty-shared/**
+  new-ui-task:
+    needs: changed-files-check
+    if: needs.changed-files-check.outputs.any_changed == 'true'
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        task: [lint, typecheck, test]
+    steps:
+      - name: Fetch custom Github Actions and base branch history
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+        with:
+          fetch-depth: 10
+      - name: Install dependencies
+        uses: ./.github/actions/yarn-install
+      - name: Run ${{ matrix.task }}
+        run: npx nx ${{ matrix.task }} twenty-new-ui
+  new-ui-sb-build:
+    needs: changed-files-check
+    if: >-
+      always() &&
+      (github.event_name == 'push' ||
+      needs.changed-files-check.outputs.any_changed == 'true')
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - name: Fetch custom Github Actions and base branch history
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+        with:
+          fetch-depth: 10
+      - name: Install dependencies
+        uses: ./.github/actions/yarn-install
+      - name: Build storybook
+        run: npx nx storybook:build twenty-new-ui
+      - name: Upload storybook build
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: storybook-twenty-new-ui
+          path: packages/twenty-new-ui/storybook-static
+          retention-days: 1
+  new-ui-sb-test:
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    needs: new-ui-sb-build
+    if: always() && needs.new-ui-sb-build.result == 'success'
+    steps:
+      - name: Fetch custom Github Actions and base branch history
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+        with:
+          fetch-depth: 10
+      - name: Install dependencies
+        uses: ./.github/actions/yarn-install
+      - name: Build dependencies
+        run: npx nx build twenty-shared
+      - name: Download storybook build
+        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
+        with:
+          name: storybook-twenty-new-ui
+          path: packages/twenty-new-ui/storybook-static
+      - name: Install Playwright
+        run: |
+          cd packages/twenty-new-ui
+          npx playwright install
+      - name: Run storybook tests
+        run: npx nx storybook:test twenty-new-ui
+      - name: Upload screenshots for visual regression
+        if: always() && !cancelled()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: argos-screenshots-twenty-new-ui
+          path: packages/twenty-new-ui/screenshots
+          retention-days: 1
+  ci-new-ui-status-check:
+    if: always() && !cancelled()
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    needs: [changed-files-check, new-ui-task, new-ui-sb-build, new-ui-sb-test]
+    steps:
+      - name: Fail job if any needs failed
+        if: contains(needs.*.result, 'failure')
+        run: exit 1
@@ -3,10 +3,13 @@ name: Visual Regression Dispatch
 # Dispatches visual regression processing to ci-privileged after CI completes.
 # Runs in the context of the base repo (not the fork) so it has access to secrets,
 # making it work for external contributor PRs.
+#
+# All dispatches use the same event_type=visual-regression with project/artifact_name
+# in the payload. ci-privileged routes to the correct Argos project based on these.

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

 permissions:
@@ -15,19 +18,37 @@ permissions:
  pull-requests: read

 jobs:
-  dispatch-pr:
-    if: >-
-      github.event.workflow_run.event == 'pull_request' &&
-      github.event.workflow_run.conclusion == 'success'
+  resolve-context:
+    if: github.event.workflow_run.conclusion == 'success'
    runs-on: ubuntu-latest
    timeout-minutes: 5
+    outputs:
+      workflow_name: ${{ steps.context.outputs.workflow_name }}
+      artifact_name: ${{ steps.context.outputs.artifact_name }}
+      has_artifact: ${{ steps.check-artifact.outputs.exists }}
+      is_pr: ${{ steps.pr-info.outputs.has_pr }}
+      pr_number: ${{ steps.pr-info.outputs.pr_number }}
+      merge_base_sha: ${{ steps.merge-base.outputs.sha }}
    steps:
+      - name: Resolve workflow context
+        id: context
+        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
+        with:
+          script: |
+            const name = context.payload.workflow_run.name;
+            const artifactName = name === 'CI New UI'
+              ? 'argos-screenshots-twenty-new-ui'
+              : 'argos-screenshots-twenty-ui';
+            core.setOutput('workflow_name', name);
+            core.setOutput('artifact_name', artifactName);
+            core.info(`Workflow: ${name}, artifact: ${artifactName}`);
+
      - name: Check if screenshots artifact exists
        id: check-artifact
        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
        with:
          script: |
-            const artifactName = 'argos-screenshots-twenty-ui';
+            const artifactName = '${{ steps.context.outputs.artifact_name }}';
            const runId = context.payload.workflow_run.id;

            const { data: artifacts } = await github.rest.actions.listWorkflowRunArtifacts({
@@ -44,7 +65,9 @@ jobs:
            }

      - name: Get PR number
-        if: steps.check-artifact.outputs.exists == 'true'
+        if: >-
+          steps.check-artifact.outputs.exists == 'true' &&
+          github.event.workflow_run.event == 'pull_request'
        id: pr-info
        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
        with:
@@ -111,73 +134,152 @@ jobs:
              core.setOutput('sha', '');
            }

+  # ── Dispatch: twenty-ui pixel diff (CI UI, PRs + main) ──
+  dispatch-twenty-ui:
+    needs: resolve-context
+    if: >-
+      needs.resolve-context.outputs.workflow_name == 'CI UI' &&
+      needs.resolve-context.outputs.has_artifact == 'true'
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
      - name: Dispatch to ci-privileged
-        if: steps.check-artifact.outputs.exists == 'true' && steps.pr-info.outputs.has_pr == 'true'
        env:
          GH_TOKEN: ${{ secrets.CI_PRIVILEGED_DISPATCH_TOKEN }}
-          PR_NUMBER: ${{ steps.pr-info.outputs.pr_number }}
+          PR_NUMBER: ${{ needs.resolve-context.outputs.pr_number }}
          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 }}
-          REFERENCE_COMMIT: ${{ steps.merge-base.outputs.sha }}
+          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[pr_number]=$PR_NUMBER"
+            -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[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: cross-comparison baseline (CI UI on main → twenty-ui-vs-new-ui) ──
+  dispatch-comparison-baseline:
+    needs: resolve-context
+    if: >-
+      needs.resolve-context.outputs.workflow_name == 'CI UI' &&
+      needs.resolve-context.outputs.has_artifact == 'true' &&
+      github.event.workflow_run.event == 'push' &&
+      github.event.workflow_run.head_branch == 'main'
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - name: Dispatch to ci-privileged (comparison baseline)
+        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 }}
+          ARTIFACT_NAME: ${{ needs.resolve-context.outputs.artifact_name }}
+        run: |
+          gh api repos/twentyhq/ci-privileged/dispatches \
+            --method POST \
+            -f event_type=visual-regression \
+            -f "client_payload[project]=twenty-ui-vs-new-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"
+
+  # ── Dispatch: cross-comparison PR (CI New UI on PRs → twenty-ui-vs-new-ui) ──
+  dispatch-comparison-pr:
+    needs: resolve-context
+    if: >-
+      needs.resolve-context.outputs.workflow_name == 'CI New UI' &&
+      needs.resolve-context.outputs.has_artifact == 'true' &&
+      needs.resolve-context.outputs.is_pr == 'true' &&
+      github.event.workflow_run.event == 'pull_request'
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - name: Dispatch to ci-privileged (comparison PR)
+        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-ui-vs-new-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"
+            -f "client_payload[pr_number]=$PR_NUMBER"
+          )
+
          if [ -n "$REFERENCE_COMMIT" ]; then
            ARGS+=(-f "client_payload[reference_commit]=$REFERENCE_COMMIT")
          fi

          gh api repos/twentyhq/ci-privileged/dispatches "${ARGS[@]}"
-
-  dispatch-main:
-    if: >-
-      github.event.workflow_run.event == 'push' &&
-      github.event.workflow_run.head_branch == 'main' &&
-      github.event.workflow_run.conclusion == 'success'
-    runs-on: ubuntu-latest
-    timeout-minutes: 5
-    steps:
-      - name: Check if screenshots artifact exists
-        id: check-artifact
-        uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
-        with:
-          script: |
-            const runId = context.payload.workflow_run.id;
-            const { data: artifacts } = await github.rest.actions.listWorkflowRunArtifacts({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              run_id: runId,
-            });
-
-            const found = artifacts.artifacts.some(a => a.name === 'argos-screenshots-twenty-ui');
-            core.setOutput('exists', found ? 'true' : 'false');
-
-            if (!found) {
-              core.info(`Artifact not found in run ${runId} — skipping`);
-            }
-
-      - name: Dispatch to ci-privileged
-        if: steps.check-artifact.outputs.exists == 'true'
-        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 }}
-        run: |
-          gh api repos/twentyhq/ci-privileged/dispatches \
-            --method POST \
-            -f event_type=visual-regression \
-            -f "client_payload[run_id]=$WORKFLOW_RUN_ID" \
-            -f "client_payload[repo]=$REPOSITORY" \
-            -f "client_payload[branch]=$BRANCH" \
-            -f "client_payload[commit]=$COMMIT"