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)
This commit is contained in:
Raphaël Bosi
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user