feat: migrate storybook to gh actions #29929

itsyoboieltr · 2025-01-27T19:50:32Z

Description

This PR migrates the storybook jobs from CircleCI to GitHub Actions.

Related issues

Fixes: #29447

Manual testing steps

Everything should work the same as before

Screenshots/Recordings

Not applicable

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

github-actions · 2025-01-27T19:50:45Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

metamaskbot · 2025-01-27T20:32:39Z

Builds ready [37ae14b]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1598 ± 28 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1492	1724	1603	58	28
		domContentLoaded	1483	1704	1579	55	26
		load	1493	1723	1598	57	28
		domInteractive	23	102	37	23	11
		backgroundConnect	10	54	25	15	7
		firstReactRender	15	72	32	23	11
		getState	4	50	8	10	5
		initialActions	0	0	0	0	0
		loadScripts	1047	1254	1142	44	21
		setupStore	6	60	13	15	7
		uiStartup	1664	2038	1834	82	39

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

itsyoboieltr · 2025-01-27T20:40:23Z

.github/workflows/build-storybook.yml

+      - name: Deploy storybook
+        # For a `pull_request` event, the branch is `github.head_ref``.
+        # For a `push` event, the branch is `github.ref_name`.
+        if: ${{ (github.head_ref || github.ref_name) == 'main' }}


Should we test deployment too? not entirely sure if it is safe to run it randomly for testing.

Its probably okay to merge without, as long as we know about when it will be merged in so we can revert quickly if it breaks things 😅

.github/workflows/publish-prerelease.yml

development/highlights/index.js

development/highlights/storybook.js

development/metamaskbot-build-announce.js

metamaskbot · 2025-01-27T21:40:54Z

Builds ready [b996dd6]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1809 ± 69 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	396	2140	1745	342	164
		domContentLoaded	1562	2109	1778	134	64
		load	1570	2146	1809	144	69
		domInteractive	24	117	49	30	15
		backgroundConnect	10	83	30	22	11
		firstReactRender	16	94	38	25	12
		getState	5	74	19	22	11
		initialActions	0	1	0	0	0
		loadScripts	1120	1608	1314	117	56
		setupStore	8	64	18	18	9
		uiStartup	1816	2617	2070	195	93

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

highlights:

storybook

ui/components/app/account-list-item/account-list-item.stories.js

itsyoboieltr · 2025-01-27T21:46:37Z

Did one test without highlights and one with highlights. Both seem to still work. Didn't test deployment.

metamaskbot · 2025-01-27T22:22:12Z

Builds ready [e040c24]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1617 ± 55 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1430	1864	1622	122	59
		domContentLoaded	1387	1801	1593	109	52
		load	1431	1865	1617	116	55
		domInteractive	23	112	46	26	12
		backgroundConnect	9	72	23	18	9
		firstReactRender	15	85	41	26	13
		getState	4	55	14	16	8
		initialActions	0	1	0	0	0
		loadScripts	988	1362	1173	104	50
		setupStore	7	58	13	13	6
		uiStartup	1671	2554	1887	204	98

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

hjetpoluru

LGTM

georgewrmarshall

Excellent work! We may be able to use some of this for the https://github.com/MetaMask/metamask-design-system repo as well. Thank you! LGTM!

Checked Storybook build of PR works ✅

development/highlights/storybook.js

itsyoboieltr · 2025-01-28T17:49:18Z

development/metamaskbot-build-announce.js

-    }
-  } catch (error) {
-    console.error(`Error constructing highlight results: '${error}'`);
-  }


Removed because it is unused.

More context here https://consensys.slack.com/archives/CTQAGKY5V/p1738084571209129, and here #29929 (comment)

metamaskbot · 2025-01-28T18:25:43Z

Builds ready [b787356]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1743 ± 83 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	528	2273	1695	318	153
		domContentLoaded	1405	2207	1710	158	76
		load	1413	2282	1743	172	83
		domInteractive	23	107	37	20	10
		backgroundConnect	10	136	39	32	15
		firstReactRender	15	97	39	27	13
		getState	5	69	19	18	9
		initialActions	0	1	0	0	0
		loadScripts	992	1731	1253	146	70
		setupStore	8	13	10	1	1
		uiStartup	1599	2496	1988	201	97

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 0 Bytes (0.00%)
common: 0 Bytes (0.00%)

georgewrmarshall

🔥

davidmurdoch

Since we aren't testing the new deploy step in this PR, let's immediately check that the deploy worked as soon as this merges, and revert quickly if it's a problem.

Gudahtt · 2025-01-29T15:04:23Z

Looks like the deploy is failing with an auth error

feat: migrate storybook to gh actions

f8bf4bb

itsyoboieltr self-assigned this Jan 27, 2025

metamaskbot added the team-extension-platform Extension Platform team label Jan 27, 2025

feat: id-token permission

37ae14b

itsyoboieltr commented Jan 27, 2025

View reviewed changes

fix: cleanup

ba01e27

itsyoboieltr force-pushed the feat/migrate-storybook branch from 9d84f0c to ba01e27 Compare January 27, 2025 21:43

itsyoboieltr marked this pull request as ready for review January 27, 2025 21:43

itsyoboieltr requested a review from a team as a code owner January 27, 2025 21:43

itsyoboieltr requested review from davidmurdoch, danjm and Gudahtt January 27, 2025 21:45

Update main.yml

e040c24

hjetpoluru requested a review from georgewrmarshall January 28, 2025 14:52

hjetpoluru previously approved these changes Jan 28, 2025

View reviewed changes

georgewrmarshall previously approved these changes Jan 28, 2025

View reviewed changes

development/highlights/storybook.js Outdated Show resolved Hide resolved

feat: remove highlights

9ba17d2

itsyoboieltr dismissed stale reviews from georgewrmarshall and hjetpoluru via 9ba17d2 January 28, 2025 17:45

itsyoboieltr commented Jan 28, 2025

View reviewed changes

itsyoboieltr requested review from hjetpoluru and georgewrmarshall January 28, 2025 17:50

fix: deps

b787356

georgewrmarshall approved these changes Jan 28, 2025

View reviewed changes

davidmurdoch approved these changes Jan 28, 2025

View reviewed changes

itsyoboieltr added this pull request to the merge queue Jan 29, 2025

Merged via the queue into main with commit a9d90e5 Jan 29, 2025
70 checks passed

itsyoboieltr deleted the feat/migrate-storybook branch January 29, 2025 08:49

github-actions bot locked and limited conversation to collaborators Jan 29, 2025

metamaskbot added the release-12.12.0 Issue or pull request that will be included in release 12.12.0 label Jan 29, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: migrate storybook to gh actions #29929

feat: migrate storybook to gh actions #29929

itsyoboieltr commented Jan 27, 2025 •

edited by github-actions bot

Loading

github-actions bot commented Jan 27, 2025

metamaskbot commented Jan 27, 2025

itsyoboieltr Jan 27, 2025

davidmurdoch Jan 28, 2025

metamaskbot commented Jan 27, 2025

itsyoboieltr commented Jan 27, 2025 •

edited

Loading

metamaskbot commented Jan 27, 2025

hjetpoluru left a comment

georgewrmarshall left a comment •

edited

Loading

itsyoboieltr Jan 28, 2025 •

edited

Loading

itsyoboieltr Jan 28, 2025

metamaskbot commented Jan 28, 2025

georgewrmarshall left a comment

davidmurdoch left a comment

Gudahtt commented Jan 29, 2025

feat: migrate storybook to gh actions #29929

feat: migrate storybook to gh actions #29929

Conversation

itsyoboieltr commented Jan 27, 2025 • edited by github-actions bot Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Jan 27, 2025

metamaskbot commented Jan 27, 2025

itsyoboieltr Jan 27, 2025

Choose a reason for hiding this comment

davidmurdoch Jan 28, 2025

Choose a reason for hiding this comment

metamaskbot commented Jan 27, 2025

highlights:

itsyoboieltr commented Jan 27, 2025 • edited Loading

metamaskbot commented Jan 27, 2025

hjetpoluru left a comment

Choose a reason for hiding this comment

georgewrmarshall left a comment • edited Loading

Choose a reason for hiding this comment

itsyoboieltr Jan 28, 2025 • edited Loading

Choose a reason for hiding this comment

itsyoboieltr Jan 28, 2025

Choose a reason for hiding this comment

metamaskbot commented Jan 28, 2025

georgewrmarshall left a comment

Choose a reason for hiding this comment

davidmurdoch left a comment

Choose a reason for hiding this comment

Gudahtt commented Jan 29, 2025

itsyoboieltr commented Jan 27, 2025 •

edited by github-actions bot

Loading

itsyoboieltr commented Jan 27, 2025 •

edited

Loading

georgewrmarshall left a comment •

edited

Loading

itsyoboieltr Jan 28, 2025 •

edited

Loading