## Summary
- Adds `@argos-ci/storybook` vitest plugin to `twenty-ui` for automatic
screenshot capture during vitest storybook tests
- Uploads captured screenshots (PNG, ~5MB) as a CI artifact instead of
passing the full storybook build
- Updates the visual regression dispatch workflow to pass
`mode=argos-screenshots` to ci-privileged, which then uploads
screenshots to Argos via CLI
This replaces the 10-minute Storybook screenshot capture with a ~30s
vitest browser-mode approach. The heavy screenshot work happens on free
public runners, while ci-privileged only handles the Argos API upload
(keeping secrets private).
## Architecture
```
twenty (public, free runners) ci-privileged (private)
───────────────────────────── ────────────────────────
1. Build storybook-static 4. Download screenshots artifact
2. Vitest captures screenshots 5. `argos upload` → Argos API
3. Upload screenshots artifact 6. Poll for results
7. Post PR comment
```
## Test plan
- [x] Verified locally: vitest captures 225 screenshots in ~28s
- [x] Verified `@argos-ci/cli upload` successfully creates Argos build
from captured screenshots
- [x] Argos diffs computed and results visible via API
- [ ] CI runs end-to-end on a PR
152 lines
6.2 KiB
YAML
152 lines
6.2 KiB
YAML
name: Visual Regression Dispatch
|
|
|
|
# Uses workflow_run to dispatch visual regression to ci-privileged.
|
|
# This runs in the context of the base repo (not the fork), so it has
|
|
# access to secrets — making it work for external contributor PRs.
|
|
|
|
on:
|
|
workflow_run:
|
|
workflows: ['CI Front', 'CI UI']
|
|
types: [completed]
|
|
|
|
permissions:
|
|
actions: read
|
|
pull-requests: read
|
|
|
|
jobs:
|
|
dispatch:
|
|
if: >-
|
|
github.event.workflow_run.event == 'pull_request' &&
|
|
github.event.workflow_run.conclusion == 'success'
|
|
runs-on: ubuntu-latest
|
|
timeout-minutes: 5
|
|
steps:
|
|
- name: Determine project and artifact name
|
|
id: project
|
|
uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
|
|
with:
|
|
script: |
|
|
const workflowName = context.payload.workflow_run.name;
|
|
if (workflowName === 'CI Front') {
|
|
core.setOutput('project', 'twenty-front');
|
|
core.setOutput('artifact_name', 'storybook-static');
|
|
core.setOutput('tarball_name', 'storybook-twenty-front-tarball');
|
|
core.setOutput('tarball_file', 'storybook-twenty-front.tar.gz');
|
|
core.setOutput('mode', 'storybook-tarball');
|
|
} else if (workflowName === 'CI UI') {
|
|
core.setOutput('project', 'twenty-ui');
|
|
core.setOutput('artifact_name', 'argos-screenshots-twenty-ui');
|
|
core.setOutput('tarball_name', 'argos-screenshots-twenty-ui-tarball');
|
|
core.setOutput('tarball_file', 'argos-screenshots-twenty-ui.tar.gz');
|
|
core.setOutput('mode', 'argos-screenshots');
|
|
} else {
|
|
core.setFailed(`Unexpected workflow: ${workflowName}`);
|
|
}
|
|
|
|
- name: Check if artifact exists
|
|
id: check-artifact
|
|
uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
|
|
with:
|
|
script: |
|
|
const artifactName = '${{ steps.project.outputs.artifact_name }}';
|
|
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 === artifactName);
|
|
core.setOutput('exists', found ? 'true' : 'false');
|
|
|
|
if (!found) {
|
|
core.info(`Artifact "${artifactName}" not found in run ${runId} — build was likely skipped`);
|
|
}
|
|
|
|
- name: Get PR number
|
|
if: steps.check-artifact.outputs.exists == 'true'
|
|
id: pr-info
|
|
uses: actions/github-script@f28e40c7f34bde8b3046d885e986cb6290c5673b # v7.1.0
|
|
with:
|
|
script: |
|
|
const headBranch = context.payload.workflow_run.head_branch;
|
|
const headRepo = context.payload.workflow_run.head_repository;
|
|
|
|
// workflow_run.pull_requests is empty for fork PRs,
|
|
// so fall back to searching by head label (owner:branch)
|
|
let pullRequests = context.payload.workflow_run.pull_requests;
|
|
let prNumber;
|
|
|
|
if (pullRequests && pullRequests.length > 0) {
|
|
prNumber = pullRequests[0].number;
|
|
} else {
|
|
const headLabel = `${headRepo.owner.login}:${headBranch}`;
|
|
core.info(`pull_requests is empty (likely a fork PR), searching by head label: ${headLabel}`);
|
|
|
|
const { data: prs } = await github.rest.pulls.list({
|
|
owner: context.repo.owner,
|
|
repo: context.repo.repo,
|
|
state: 'open',
|
|
head: headLabel,
|
|
per_page: 1,
|
|
});
|
|
|
|
if (prs.length > 0) {
|
|
prNumber = prs[0].number;
|
|
}
|
|
}
|
|
|
|
if (!prNumber) {
|
|
core.info('No pull request found for this workflow run — skipping');
|
|
core.setOutput('has_pr', 'false');
|
|
return;
|
|
}
|
|
|
|
core.setOutput('pr_number', prNumber);
|
|
core.setOutput('has_pr', 'true');
|
|
core.info(`PR #${prNumber}`);
|
|
|
|
- name: Download artifact from triggering run
|
|
if: steps.check-artifact.outputs.exists == 'true' && steps.pr-info.outputs.has_pr == 'true'
|
|
uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
|
|
with:
|
|
name: ${{ steps.project.outputs.artifact_name }}
|
|
path: artifact-content
|
|
run-id: ${{ github.event.workflow_run.id }}
|
|
github-token: ${{ github.token }}
|
|
|
|
- name: Package artifact as tarball
|
|
if: steps.check-artifact.outputs.exists == 'true' && steps.pr-info.outputs.has_pr == 'true'
|
|
run: tar -czf /tmp/${{ steps.project.outputs.tarball_file }} -C artifact-content .
|
|
|
|
- name: Upload tarball
|
|
if: steps.check-artifact.outputs.exists == 'true' && steps.pr-info.outputs.has_pr == 'true'
|
|
uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
|
|
with:
|
|
name: ${{ steps.project.outputs.tarball_name }}
|
|
path: /tmp/${{ steps.project.outputs.tarball_file }}
|
|
retention-days: 1
|
|
|
|
- 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 }}
|
|
RUN_ID: ${{ github.run_id }}
|
|
REPOSITORY: ${{ github.repository }}
|
|
PROJECT: ${{ steps.project.outputs.project }}
|
|
BRANCH: ${{ github.event.workflow_run.head_branch }}
|
|
COMMIT: ${{ github.event.workflow_run.head_sha }}
|
|
MODE: ${{ steps.project.outputs.mode }}
|
|
run: |
|
|
gh api repos/twentyhq/ci-privileged/dispatches \
|
|
-f event_type=visual-regression \
|
|
-f "client_payload[pr_number]=$PR_NUMBER" \
|
|
-f "client_payload[run_id]=$RUN_ID" \
|
|
-f "client_payload[repo]=$REPOSITORY" \
|
|
-f "client_payload[project]=$PROJECT" \
|
|
-f "client_payload[branch]=$BRANCH" \
|
|
-f "client_payload[commit]=$COMMIT" \
|
|
-f "client_payload[mode]=$MODE"
|