Skip to content

Commit 4ababd8

Browse files
hussam-i-amhussam-i-am
authored
Deploy preview with VRT/AAT reports (Take Two) (#5537)
* Revert "revert: restore deploy preview behavior (#5536)" This reverts commit 15270ac. * Add pull_request check
1 parent 6bc30bf commit 4ababd8

9 files changed

+311
-34
lines changed

‎.github/workflows/ci.yml

+4
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ jobs:
170170
path: playwright-report
171171
- name: check vrt-runner job status
172172
if: ${{ needs.vrt-runner.result == 'failure' }}
173+
continue-on-error: true
173174
run: exit 1
174175

175176
vrt-runner-all-flags:
@@ -246,6 +247,7 @@ jobs:
246247
path: playwright-report
247248
- name: check vrt-runner-all-flags job status
248249
if: ${{ needs.vrt-runner-all-flags.result == 'failure' }}
250+
continue-on-error: true
249251
run: exit 1
250252

251253
aat-runner:
@@ -318,6 +320,7 @@ jobs:
318320
path: playwright-report
319321
- name: Check aat-runner job status
320322
if: ${{ needs.aat-runner.result == 'failure' }}
323+
continue-on-error: true
321324
run: exit 1
322325

323326
aat-runner-all-flags:
@@ -394,6 +397,7 @@ jobs:
394397
path: playwright-report
395398
- name: Check aat-runner-all-flags job status
396399
if: ${{ needs.aat-runner-all-flags.result == 'failure' }}
400+
continue-on-error: true
397401
run: exit 1
398402

399403
build-components-json:

‎.github/workflows/deploy_preview.yml

+1-31
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ jobs:
1010
build:
1111
if: ${{ github.event.pull_request.head.repo.full_name == 'primer/react' }}
1212
runs-on: ubuntu-latest
13+
1314
steps:
1415
- name: Checkout repository
1516
uses: actions/checkout@v4
@@ -45,34 +46,3 @@ jobs:
4546
uses: actions/deploy-pages@v4
4647
with:
4748
preview: true
48-
49-
deploy-storybook:
50-
name: Preview Storybook
51-
if: ${{ github.event.pull_request.head.repo.full_name == 'primer/react' }}
52-
needs: deploy-preview
53-
permissions:
54-
deployments: write
55-
runs-on: ubuntu-latest
56-
steps:
57-
- uses: chrnorm/[email protected]
58-
name: Create GitHub deployment for storybook
59-
id: storybook
60-
with:
61-
token: ${{ secrets.GITHUB_TOKEN }}
62-
environment: storybook-preview-${{ github.event.number }}
63-
environment_url: '${{ needs.deploy-preview.outputs.deployment_url }}/storybook'
64-
- name: Update storybook deployment status (success)
65-
if: success()
66-
uses: chrnorm/[email protected]
67-
with:
68-
token: ${{ secrets.GITHUB_TOKEN }}
69-
environment-url: '${{ needs.deploy-preview.outputs.deployment_url }}/storybook'
70-
state: 'success'
71-
deployment-id: ${{ steps.storybook.outputs.deployment_id }}
72-
- name: Update storybook deployment status (failure)
73-
if: failure()
74-
uses: chrnorm/[email protected]
75-
with:
76-
token: ${{ secrets.GITHUB_TOKEN }}
77-
state: 'failure'
78-
deployment-id: ${{ steps.storybook.outputs.deployment_id }}

‎.github/workflows/deploy_preview_with_reports.yml

+238
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
name: Deploy Preview (with VRT/AAT reports)
2+
on:
3+
workflow_run:
4+
workflows: [CI]
5+
types:
6+
- completed
7+
8+
concurrency:
9+
group: ${{ github.workflow }}-${{ github.ref }}
10+
cancel-in-progress: true
11+
12+
jobs:
13+
build:
14+
if: ${{ always() && github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.head_repository.full_name == 'primer/react' }}
15+
runs-on: ubuntu-latest
16+
17+
steps:
18+
- name: Checkout repository
19+
uses: actions/checkout@v4
20+
- name: Set up Node.js
21+
uses: actions/setup-node@v4
22+
with:
23+
node-version: 22
24+
cache: 'npm'
25+
- name: Install dependencies
26+
run: npm ci
27+
- name: Build docs preview
28+
run: npm run build:docs:preview_with_reports
29+
- name: Download VRT reports (All flags enabled)
30+
uses: actions/download-artifact@v4
31+
with:
32+
name: vrt-all-flags
33+
path: docs/public/vrt-all-flags
34+
github-token: ${{ secrets.GITHUB_TOKEN }}
35+
repository: ${{ github.event.workflow_run.head_repository.full_name }}
36+
run-id: ${{ github.event.workflow_run.id }}
37+
- name: Download VRT reports (No flags enabled)
38+
uses: actions/download-artifact@v4
39+
with:
40+
name: vrt-no-flag
41+
path: docs/public/vrt-no-flag
42+
github-token: ${{ secrets.GITHUB_TOKEN }}
43+
repository: ${{ github.event.workflow_run.head_repository.full_name }}
44+
run-id: ${{ github.event.workflow_run.id }}
45+
- name: Download AAT reports (All flags enabled)
46+
uses: actions/download-artifact@v4
47+
with:
48+
name: axe-all-flags
49+
path: docs/public/aat-all-flags
50+
github-token: ${{ secrets.GITHUB_TOKEN }}
51+
repository: ${{ github.event.workflow_run.head_repository.full_name }}
52+
run-id: ${{ github.event.workflow_run.id }}
53+
- name: Download AAT reports (No flags enabled)
54+
uses: actions/download-artifact@v4
55+
with:
56+
name: axe
57+
path: docs/public/aat-no-flag
58+
github-token: ${{ secrets.GITHUB_TOKEN }}
59+
repository: ${{ github.event.workflow_run.head_repository.full_name }}
60+
run-id: ${{ github.event.workflow_run.id }}
61+
- uses: actions/upload-pages-artifact@v3
62+
with:
63+
name: github-pages
64+
path: docs/public
65+
66+
deploy-preview:
67+
if: ${{ github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.head_repository.full_name == 'primer/react' }}
68+
needs: build
69+
permissions:
70+
pages: write
71+
id-token: write
72+
environment:
73+
name: github-pages
74+
url: ${{ steps.deployment.outputs.page_url }}
75+
outputs:
76+
deployment_url: ${{ steps.deployment.outputs.page_url }}
77+
runs-on: ubuntu-latest
78+
steps:
79+
- name: Deploy to GitHub Pages
80+
id: deployment
81+
uses: actions/deploy-pages@v4
82+
with:
83+
preview: true
84+
85+
deploy-storybook:
86+
name: Preview Storybook
87+
if: ${{ github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.head_repository.full_name == 'primer/react' }}
88+
needs: deploy-preview
89+
permissions:
90+
deployments: write
91+
runs-on: ubuntu-latest
92+
steps:
93+
- uses: chrnorm/[email protected]
94+
name: Create GitHub deployment for storybook
95+
id: storybook
96+
with:
97+
token: ${{ secrets.GITHUB_TOKEN }}
98+
environment: storybook-preview-${{ github.event.workflow_run.event.number }}
99+
environment-url: '${{ needs.deploy-preview.outputs.deployment_url }}storybook'
100+
- name: Update storybook deployment status (success)
101+
if: success()
102+
uses: chrnorm/[email protected]
103+
with:
104+
token: ${{ secrets.GITHUB_TOKEN }}
105+
environment-url: '${{ needs.deploy-preview.outputs.deployment_url }}storybook'
106+
state: 'success'
107+
deployment-id: ${{ steps.storybook.outputs.deployment_id }}
108+
- name: Update storybook deployment status (failure)
109+
if: failure()
110+
uses: chrnorm/[email protected]
111+
with:
112+
token: ${{ secrets.GITHUB_TOKEN }}
113+
state: 'failure'
114+
deployment-id: ${{ steps.storybook.outputs.deployment_id }}
115+
116+
deploy-vrt-no-flag:
117+
name: VRT (No flags enabled)
118+
if: ${{ github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.head_repository.full_name == 'primer/react' }}
119+
needs: [deploy-preview]
120+
permissions:
121+
deployments: write
122+
runs-on: ubuntu-latest
123+
steps:
124+
- uses: chrnorm/[email protected]
125+
name: Create GitHub deployment for vrt-no-flag
126+
id: vrt-no-flag
127+
with:
128+
token: ${{ secrets.GITHUB_TOKEN }}
129+
environment: vrt-no-flag-${{ github.event.workflow_run.head_branch }}
130+
environment-url: '${{ needs.deploy-preview.outputs.deployment_url }}vrt-no-flag'
131+
- name: Update vrt-no-flag deployment status (success)
132+
if: success()
133+
uses: chrnorm/[email protected]
134+
with:
135+
token: ${{ secrets.GITHUB_TOKEN }}
136+
environment-url: '${{ needs.deploy-preview.outputs.deployment_url }}vrt-no-flag'
137+
state: 'success'
138+
deployment-id: ${{ steps.vrt-no-flag.outputs.deployment_id }}
139+
- name: Update vrt-no-flag deployment status (failure)
140+
if: failure()
141+
uses: chrnorm/[email protected]
142+
with:
143+
token: ${{ secrets.GITHUB_TOKEN }}
144+
state: 'failure'
145+
deployment-id: ${{ steps.vrt-no-flag.outputs.deployment_id }}
146+
147+
deploy-vrt-all-flags:
148+
name: VRT (All flags enabled)
149+
if: ${{ github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.head_repository.full_name == 'primer/react' }}
150+
needs: deploy-preview
151+
permissions:
152+
deployments: write
153+
runs-on: ubuntu-latest
154+
steps:
155+
- uses: chrnorm/[email protected]
156+
name: Create GitHub deployment for vrt-all-flags
157+
id: vrt-all-flags
158+
with:
159+
token: ${{ secrets.GITHUB_TOKEN }}
160+
environment: vrt-all-flags-${{ github.event.workflow_run.event.number }}
161+
environment-url: '${{ needs.deploy-preview.outputs.deployment_url }}vrt-all-flags'
162+
- name: Update vrt-all-flags deployment status (success)
163+
if: success()
164+
uses: chrnorm/[email protected]
165+
with:
166+
token: ${{ secrets.GITHUB_TOKEN }}
167+
environment-url: '${{ needs.deploy-preview.outputs.deployment_url }}vrt-all-flags'
168+
state: 'success'
169+
deployment-id: ${{ steps.vrt-all-flags.outputs.deployment_id }}
170+
- name: Update vrt-all-flags deployment status (failure)
171+
if: failure()
172+
uses: chrnorm/[email protected]
173+
with:
174+
token: ${{ secrets.GITHUB_TOKEN }}
175+
state: 'failure'
176+
deployment-id: ${{ steps.vrt-all-flags.outputs.deployment_id }}
177+
178+
deploy-aat-no-flag:
179+
name: AAT (No flags enabled)
180+
if: ${{ github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.head_repository.full_name == 'primer/react' }}
181+
needs: deploy-preview
182+
permissions:
183+
deployments: write
184+
runs-on: ubuntu-latest
185+
steps:
186+
- uses: chrnorm/[email protected]
187+
name: Create GitHub deployment for aat-no-flag
188+
id: aat-no-flag
189+
with:
190+
token: ${{ secrets.GITHUB_TOKEN }}
191+
environment: aat-no-flag-${{ github.event.workflow_run.event.number }}
192+
environment-url: '${{ needs.deploy-preview.outputs.deployment_url }}aat-no-flag'
193+
- name: Update aat-no-flag deployment status (success)
194+
if: success()
195+
uses: chrnorm/[email protected]
196+
with:
197+
token: ${{ secrets.GITHUB_TOKEN }}
198+
environment-url: '${{ needs.deploy-preview.outputs.deployment_url }}aat-no-flag'
199+
state: 'success'
200+
deployment-id: ${{ steps.aat-no-flag.outputs.deployment_id }}
201+
- name: Update aat-no-flag deployment status (failure)
202+
if: failure()
203+
uses: chrnorm/[email protected]
204+
with:
205+
token: ${{ secrets.GITHUB_TOKEN }}
206+
state: 'failure'
207+
deployment-id: ${{ steps.aat-no-flag.outputs.deployment_id }}
208+
209+
deploy-aat-all-flags:
210+
name: AAT (All flags enabled)
211+
if: ${{ github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.head_repository.full_name == 'primer/react' }}
212+
needs: deploy-preview
213+
permissions:
214+
deployments: write
215+
runs-on: ubuntu-latest
216+
steps:
217+
- uses: chrnorm/[email protected]
218+
name: Create GitHub deployment for aat-all-flags
219+
id: aat-all-flags
220+
with:
221+
token: ${{ secrets.GITHUB_TOKEN }}
222+
environment: aat-all-flags-${{ github.event.workflow_run.event.number }}
223+
environment-url: '${{ needs.deploy-preview.outputs.deployment_url }}aat-all-flags'
224+
- name: Update aat-all-flags deployment status (success)
225+
if: success()
226+
uses: chrnorm/[email protected]
227+
with:
228+
token: ${{ secrets.GITHUB_TOKEN }}
229+
environment-url: '${{ needs.deploy-preview.outputs.deployment_url }}aat-all-flags'
230+
state: 'success'
231+
deployment-id: ${{ steps.aat-all-flags.outputs.deployment_id }}
232+
- name: Update aat-all-flags deployment status (failure)
233+
if: failure()
234+
uses: chrnorm/[email protected]
235+
with:
236+
token: ${{ secrets.GITHUB_TOKEN }}
237+
state: 'failure'
238+
deployment-id: ${{ steps.aat-all-flags.outputs.deployment_id }}

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,11 @@
1616
"start": "concurrently npm:start:*",
1717
"start:storybook": "npm run start:storybook -w @primer/react",
1818
"build:storybook": "script/build-storybook",
19+
"build:storybook:preview": "script/build-storybook preview",
20+
"build:storybook:preview_with_reports": "script/build-storybook preview_with_reports",
1921
"build:docs": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs",
2022
"build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview",
23+
"build:docs:preview_with_reports": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview_with_reports",
2124
"build:components.json": "npm run build:components.json -w @primer/react",
2225
"lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
2326
"lint:css": "stylelint --rd -q '**/*.css'",

‎packages/react/.storybook/index.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Primer Preview Page</title>
7+
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
8+
</head>
9+
<body class="p-3">
10+
<div class="Header">
11+
<h1>Primer Preview Page</h1>
12+
</div>
13+
<div class="p-2 m-2 d-flex flex-column">
14+
<ul class="filter-list">
15+
<li><a class="filter-item" href="./storybook" class="btn-link mb-2">Storybook</a></li>
16+
</ul>
17+
</div>
18+
<div class="color-bg-attention p-2 m-2 rounded border color-border-severe-emphasis">
19+
Visual Regression Testing (VRT) and Automated Accessibility Testing (AAT) results are pending...
20+
</div>
21+
</body>
22+
</html>

‎packages/react/.storybook/index_with_reports.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Primer Preview Page</title>
8+
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
9+
</head>
10+
11+
<body class="p-3">
12+
<div class="Header">
13+
<h1>Primer Preview Page</h1>
14+
</div>
15+
<div class="p-2 m-2 d-flex flex-column">
16+
<ul class="filter-list">
17+
<li><a class="filter-item" href="./storybook" class="btn-link mb-2">Storybook</a></li>
18+
<li><a class="filter-item" href="./vrt-no-flag" class="btn-link mb-2">Visual Regression Testing</a></li>
19+
<li><a class="filter-item" href="./vrt-all-flags" class="btn-link mb-2">Visual Regression Testing (All Flags
20+
Enabled)</a></li>
21+
<li><a class="filter-item" href="./aat-no-flag" class="btn-link mb-2">Automated Accessibility Testing</a></li>
22+
<li><a class="filter-item" href="./aat-all-flags" class="btn-link mb-2">Automated Accessibility Testing (All Flags
23+
Enabled)</a></li>
24+
</ul>
25+
</div>
26+
</body>
27+
28+
</html>

‎packages/react/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
"build:storybook": "storybook build",
4343
"build:docs": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs",
4444
"build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview",
45+
"build:docs:preview_with_reports": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview_with_reports",
4546
"build:components.json": "tsx script/components-json/build.ts",
4647
"build:precompile-color-schemes": "tsx script/precompile-color-schemes.ts",
4748
"storybook": "storybook",

0 commit comments

Comments
 (0)