Update Text import paths: component library/ by georgewrmarshall · Pull Request #19987 · MetaMask/metamask-extension

georgewrmarshall · 2023-07-12T22:05:56Z

Explanation

Currently, there are deprecated instances of the Text component that use the JavaScript version of the Box component. This PR updates those deprecated import paths to the new component in the component-library/ folder as well as updating some components and PropTypes to utilize the TypeScript version of the Box component correctly

Part of Update deprecated Text import paths #19986

Dependency: Updating Text component to use TS Box #19949

Screenshots/Screencaps

I have added Before/After screencasts to ensure no visual regressions have occurred to components with some significant updates other than snapshot updates in the code comments

Manual Testing Steps

Go to the latest build of storybook in this PR
Check all components don't have visual regressions against the hosted storybook GitHub page

Pre-merge author checklist

I've clearly explained:
- What problem this PR is solving
- How this problem was solved
- How reviewers can test my changes
Sufficient automated test coverage has been added

Pre-merge reviewer checklist

Manual testing (e.g. pull and build branch, run in browser, test code being changed)
PR is linked to the appropriate GitHub issue
IF this PR fixes a bug in the release milestone, add this PR to the release milestone

If further QA is required (e.g. new feature, complex testing steps, large refactor), add the Extension QA Board label.

In this case, a QA Engineer approval will be be required.

github-actions · 2023-07-12T22:06:07Z

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.

codecov · 2023-07-12T23:25:43Z

Codecov Report

Merging #19987 (ddd968b) into develop (343cde9) will increase coverage by 0.01%.
The diff coverage is 100.00%.

@@             Coverage Diff             @@
##           develop   #19987      +/-   ##
===========================================
+ Coverage    69.41%   69.42%   +0.01%     
===========================================
  Files          990      990              
  Lines        37418    37418              
  Branches     10039    10039              
===========================================
+ Hits         25973    25976       +3     
+ Misses       11445    11442       -3

Impacted Files	Coverage Δ
...nents/component-library/banner-base/banner-base.js	`100.00% <ø> (ø)`
...ponents/component-library/banner-tip/banner-tip.js	`100.00% <ø> (ø)`
...nents/component-library/button-base/button-base.js	`100.00% <ø> (ø)`
...components/component-library/checkbox/checkbox.tsx	`88.46% <ø> (ø)`
...omponents/component-library/help-text/help-text.js	`89.47% <ø> (ø)`
ui/components/component-library/input/input.js	`100.00% <ø> (ø)`
ui/components/component-library/label/label.js	`100.00% <ø> (ø)`
...ts/component-library/modal-header/modal-header.tsx	`100.00% <ø> (ø)`
...component-library/picker-network/picker-network.js	`100.00% <ø> (ø)`
...omponent-library/popover-header/popover-header.tsx	`100.00% <ø> (ø)`
... and 4 more

... and 2 files with indirect coverage changes

metamaskbot · 2023-07-12T23:34:43Z

Builds ready [3c5e281]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 2, 3, 4, 5
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1507 ± 49 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	104	157	117	12	6
		domContentLoaded	1387	1837	1507	101	49
		load	1387	1837	1507	101	49
		domInteractive	1387	1837	1507	101	49

Bundle size diffs

background: 0 bytes
ui: 12292 bytes
common: 0 bytes

metamaskbot · 2023-07-14T19:10:50Z

Builds ready [b1fba90]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 2, 3, 4, 5
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1586 ± 60 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	110	166	128	16	8
		domContentLoaded	1406	1933	1586	126	60
		load	1406	1933	1586	126	60
		domInteractive	1406	1933	1586	126	60

Bundle size diffs

background: 0 bytes
ui: -1562 bytes
common: 0 bytes

georgewrmarshall · 2023-07-14T20:45:33Z

Avatars

Before/After screencast showing no visual regressions for all avatar components

Before

before.avatars.mov

After

after.avatars.mov

georgewrmarshall · 2023-07-14T21:31:06Z

PropTypes will be resolved in TS migration of this component #18886

georgewrmarshall · 2023-07-14T21:43:58Z

This was used because the Box didn't accept 0 values this has now been resolved in the TS version of the Box so it's no longer needed

georgewrmarshall · 2023-07-14T21:45:51Z

Buttons

Before/After screencast showing no visual regressions for all button components

Before

button.before.mov

After

button.after.mov

metamaskbot · 2023-07-14T22:05:30Z

Builds ready [e7e7483]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 2, 3, 4, 5
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1424 ± 28 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	94	158	114	17	8
		domContentLoaded	1308	1569	1423	57	28
		load	1308	1569	1424	57	28
		domInteractive	1308	1569	1423	57	28

Bundle size diffs

background: 0 bytes
ui: -1644 bytes
common: 0 bytes

garrettbear

LGTM. Lots of snapshot updates 😅

georgewrmarshall · 2023-07-14T23:02:24Z

Banners

Before

before.banner.mov

After

after.banner.mov

georgewrmarshall · 2023-07-14T23:07:30Z

Forms

Before

form.before.2.mov

form.before.mov

After

Screen.Recording.2023-07-14.at.3.29.30.PM.mov

metamaskbot · 2023-07-17T19:55:05Z

Builds ready [ddd968b]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5
- common: 0, 1, 2, 3, 4, 5
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- inpage: inpage
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1488 ± 30 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	107	144	119	10	5
		domContentLoaded	1402	1673	1488	63	30
		load	1402	1673	1488	63	30
		domInteractive	1402	1673	1488	63	30

Bundle size diffs

background: 0 bytes
ui: -1644 bytes
common: 0 bytes

georgewrmarshall force-pushed the part/19986/update-text-import-paths-component-library branch 2 times, most recently from 347fc43 to a3a4602 Compare July 12, 2023 22:07

georgewrmarshall added team-design-system All issues relating to design system in Extension DO-NOT-MERGE Pull requests that should not be merged labels Jul 12, 2023

georgewrmarshall self-assigned this Jul 12, 2023

georgewrmarshall force-pushed the part/19986/update-text-import-paths-component-library branch from a3a4602 to 3c5e281 Compare July 12, 2023 23:01

georgewrmarshall force-pushed the part/19986/update-text-import-paths-component-library branch 2 times, most recently from b5cf715 to b1fba90 Compare July 14, 2023 18:39

georgewrmarshall removed the DO-NOT-MERGE Pull requests that should not be merged label Jul 14, 2023

georgewrmarshall marked this pull request as ready for review July 14, 2023 19:05

georgewrmarshall requested a review from a team as a code owner July 14, 2023 19:05

georgewrmarshall requested review from darkwing and garrettbear July 14, 2023 19:05

georgewrmarshall commented Jul 14, 2023

View reviewed changes

georgewrmarshall force-pushed the part/19986/update-text-import-paths-component-library branch 2 times, most recently from 3f5ef57 to c55c362 Compare July 14, 2023 21:25

georgewrmarshall commented Jul 14, 2023

View reviewed changes

garrettbear previously approved these changes Jul 14, 2023

View reviewed changes

georgewrmarshall commented Jul 14, 2023

View reviewed changes

georgewrmarshall added the needs-ux-ds-review label Jul 14, 2023

georgewrmarshall mentioned this pull request Jul 12, 2023

Update deprecated Text import paths #19986

Closed

darkwing previously approved these changes Jul 17, 2023

View reviewed changes

georgewrmarshall added 9 commits July 17, 2023 12:24

Updating component-librar import paths

6ae7965

Updating snapshots

d11cff8

Updates to AvatarBase story

41e29ed

Updates to avatar and checkbox

e6bdfb0

Updating last of the deprecated import paths

ef55690

Updating component-library snapshots from button-base

22b7e70

Updating snapshots from rest of codebase to do with button-base

7e3f8e4

Removing unneeded CSS

7ab142b

Updating snapshots

ddd968b

georgewrmarshall dismissed stale reviews from darkwing and garrettbear via ddd968b July 17, 2023 19:24

georgewrmarshall force-pushed the part/19986/update-text-import-paths-component-library branch from e7e7483 to ddd968b Compare July 17, 2023 19:24

georgewrmarshall requested review from darkwing and garrettbear July 17, 2023 19:41

darkwing approved these changes Jul 17, 2023

View reviewed changes

garrettbear approved these changes Jul 17, 2023

View reviewed changes

georgewrmarshall merged commit 5d17f86 into develop Jul 17, 2023

georgewrmarshall deleted the part/19986/update-text-import-paths-component-library branch July 17, 2023 21:00

github-actions Bot locked and limited conversation to collaborators Jul 17, 2023

metamaskbot added the release-10.35.0 Issue or pull request that will be included in release 10.35.0 label Jul 17, 2023

Conversation

georgewrmarshall commented Jul 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation

Screenshots/Screencaps

Manual Testing Steps

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Jul 12, 2023

Uh oh!

codecov Bot commented Jul 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

metamaskbot commented Jul 12, 2023

Uh oh!

metamaskbot commented Jul 14, 2023

Uh oh!

georgewrmarshall Jul 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Avatars

Before

After

Uh oh!

georgewrmarshall Jul 14, 2023

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 14, 2023

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 14, 2023

Choose a reason for hiding this comment

Buttons

Before

After

Uh oh!

metamaskbot commented Jul 14, 2023

Uh oh!

garrettbear left a comment

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jul 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Banners

Before

After

Uh oh!

georgewrmarshall Jul 14, 2023

Choose a reason for hiding this comment

Forms

Before

After

Uh oh!

metamaskbot commented Jul 17, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

georgewrmarshall commented Jul 12, 2023 •

edited

Loading

codecov Bot commented Jul 12, 2023 •

edited

Loading

georgewrmarshall Jul 14, 2023 •

edited

Loading

georgewrmarshall Jul 14, 2023 •

edited

Loading