Picker network updates #21301

georgewrmarshall · 2023-10-10T16:11:12Z

Description

In the new designs for Amon Hen the network picker(PickerNetwork) has been moved to inside of the tabs and needs to be full width. The current PickerNetwork requires some style updates to allow for this change

This PR updates the PickerNetwork component styles and props to allow for this updated design. It uses the pattern of inversion of control to allow for the label wrapper component to be accessed through a prop called labelProps. It also updates the unit tests to include coverage for this change as well as updates the documentation and stories to provide examples.

Manual testing steps

Go to the storybook build of this PR
Search PickerNetwork
See that there are no visual regressions
Check the updated documentation and Width story

Screenshots/Recordings

Before

before.mov

After

after.mov

Other instances of PickerNetwork without visual regressions

Showing new-network-info modal with some deprecated components replaced and flex box added

Test coverage 100%

Related issues

https://github.com/MetaMask/metamask-extension/pull/21220/files#diff-afc7617dc1347d665d4f7a058e9ea8ac686f5ad520874a293f6e27e7c50f9568

Pre-merge author checklist

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 · 2023-10-10T16:12:01Z

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.

MaxwellDG · 2023-10-10T18:50:00Z

@georgewrmarshall I take this as I should close #20825 #21051 and #21083. When this PR is completed I'll redo them to match the update

test/e2e/tests/add-custom-network.spec.js

ui/components/ui/new-network-info/index.scss

ui/components/ui/new-network-info/new-network-info.js

georgewrmarshall · 2023-10-10T20:38:53Z

ui/components/ui/new-network-info/new-network-info.stories.js

+
+export const DefaultStory = () => <NewNetworkInfo />;
+
+DefaultStory.storyName = 'Default';


Adding storybook file for new-network-info component for easy review and revision

georgewrmarshall · 2023-10-11T13:15:50Z

ui/components/ui/new-network-info/new-network-info.js

 import Button from '../button';
 import Popover from '../popover';


Will replace these in another PR

…el prop Text wrapper as well as removing the max width styles. Replacing some deprecated components in NewNetworkInfo modal

georgewrmarshall · 2023-10-11T18:26:42Z

test/e2e/tests/add-custom-network.spec.js

@@ -458,7 +458,7 @@ describe('Custom network', function () {
          });
          // verify network switched
          const networkDisplayed = await driver.findElement({
-            tag: 'p',
+            tag: 'span',


Changed the wrapping html element of the text from a p to span tag in the PickerNetwork

georgewrmarshall · 2023-10-11T18:26:47Z

test/e2e/tests/custom-rpc-history.spec.js

@@ -70,7 +70,7 @@ describe('Stores custom RPC history', function () {
          '.networks-tab__add-network-form-footer .btn-primary',
        );

-        await driver.findElement({ text: networkName, tag: 'p' });
+        await driver.findElement({ text: networkName, tag: 'span' });


Changed the wrapping html element of the text from a p to span tag in the PickerNetwork

…erNetwork

georgewrmarshall · 2023-10-12T12:22:48Z

test/e2e/tests/switch-custom-network.spec.js

@@ -88,7 +88,7 @@ describe('Switch ethereum chain', function () {
        await driver.switchToWindow(extension);

        const currentNetworkName = await driver.findElement({
-          tag: 'p',
+          tag: 'span',


Changed the wrapping html element of the text from a p to span tag in the PickerNetwork

MaxwellDG · 2023-10-12T17:30:56Z

@georgewrmarshall I take this as I should close #20825 #21051 and #21083. When this PR is completed I'll redo them to match the update

@georgewrmarshall Do you agree? Should they be redone after these changes?

codecov · 2023-10-13T07:39:28Z

Codecov Report

All modified lines are covered by tests ✅

Comparison is base (d6d324b) 68.61% compared to head (dbbf64e) 68.61%.
Report is 7 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #21301   +/-   ##
========================================
  Coverage    68.61%   68.61%           
========================================
  Files         1020     1020           
  Lines        40929    40929           
  Branches     10920    10920           
========================================
  Hits         28080    28080           
  Misses       12849    12849

Files	Coverage Δ
...omponent-library/picker-network/picker-network.tsx	`100.00% <ø> (ø)`
...components/ui/new-network-info/new-network-info.js	`81.58% <ø> (ø)`

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

metamaskbot · 2023-10-13T07:49:54Z

Builds ready [dbbf64e]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-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
- common: 0, 1, 2, 3, 4, 5, 6
- 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 (1209 ± 391 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	84	151	107	20	10
		domContentLoaded	69	158	101	24	11
		load	80	2058	1209	815	391
		domInteractive	69	158	101	24	11

Bundle size diffs

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

georgewrmarshall added the team-design-system All issues relating to design system in Extension label Oct 10, 2023

georgewrmarshall self-assigned this Oct 10, 2023

georgewrmarshall removed their assignment Oct 10, 2023

georgewrmarshall commented Oct 10, 2023

View reviewed changes

test/e2e/tests/add-custom-network.spec.js Outdated Show resolved Hide resolved

georgewrmarshall commented Oct 10, 2023

View reviewed changes

ui/components/ui/new-network-info/index.scss Outdated Show resolved Hide resolved

georgewrmarshall commented Oct 10, 2023

View reviewed changes

ui/components/ui/new-network-info/new-network-info.js Outdated Show resolved Hide resolved

georgewrmarshall commented Oct 10, 2023

View reviewed changes

georgewrmarshall force-pushed the picker-network-updates branch from 3fb25d1 to de72074 Compare October 11, 2023 13:14

georgewrmarshall commented Oct 11, 2023

View reviewed changes

georgewrmarshall self-assigned this Oct 11, 2023

georgewrmarshall requested review from darkwing and garrettbear October 11, 2023 13:18

georgewrmarshall force-pushed the picker-network-updates branch 2 times, most recently from f71e092 to 2532b37 Compare October 11, 2023 15:26

Updates to the PickerNetwork component to allow for access to the lab…

36e19cd

…el prop Text wrapper as well as removing the max width styles. Replacing some deprecated components in NewNetworkInfo modal

georgewrmarshall force-pushed the picker-network-updates branch from 2532b37 to 36e19cd Compare October 11, 2023 18:25

georgewrmarshall commented Oct 11, 2023

View reviewed changes

darkwing previously approved these changes Oct 11, 2023

View reviewed changes

NidhiKJha previously approved these changes Oct 12, 2023

View reviewed changes

Updating e2e test with changed tag for switch-custom-network for Pick…

c2abed2

…erNetwork

georgewrmarshall dismissed stale reviews from NidhiKJha and darkwing via c2abed2 October 12, 2023 12:12

georgewrmarshall commented Oct 12, 2023

View reviewed changes

Merge branch 'develop' into picker-network-updates

440bb6e

darkwing added the needs-ux-ds-review label Oct 12, 2023

darkwing mentioned this pull request Oct 12, 2023

UX: Multichain: Move PickerNetwork to Wallet Tabs #21220

Closed

14 tasks

Merge branch 'develop' into picker-network-updates

dbbf64e

darkwing approved these changes Oct 12, 2023

View reviewed changes

vthomas13 approved these changes Oct 12, 2023

View reviewed changes

georgewrmarshall marked this pull request as ready for review October 13, 2023 07:37

georgewrmarshall requested a review from a team as a code owner October 13, 2023 07:37

georgewrmarshall merged commit 8646a76 into develop Oct 13, 2023
9 checks passed

georgewrmarshall deleted the picker-network-updates branch October 13, 2023 08:46

github-actions bot locked and limited conversation to collaborators Oct 13, 2023

metamaskbot added the release-11.5.0 Issue or pull request that will be included in release 11.5.0 label Oct 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Picker network updates #21301

Picker network updates #21301

georgewrmarshall commented Oct 10, 2023 •

edited

Loading

github-actions bot commented Oct 10, 2023

MaxwellDG commented Oct 10, 2023

georgewrmarshall Oct 10, 2023 •

edited

Loading

georgewrmarshall Oct 11, 2023

georgewrmarshall Oct 11, 2023

georgewrmarshall Oct 11, 2023

georgewrmarshall Oct 12, 2023

MaxwellDG commented Oct 12, 2023 •

edited

Loading

codecov bot commented Oct 13, 2023 •

edited

Loading

metamaskbot commented Oct 13, 2023


		export const DefaultStory = () => <NewNetworkInfo />;

		DefaultStory.storyName = 'Default';

		import Button from '../button';
		import Popover from '../popover';

Picker network updates #21301

Picker network updates #21301

Conversation

georgewrmarshall commented Oct 10, 2023 • edited Loading

Description

Manual testing steps

Screenshots/Recordings

Before

After

Related issues

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Oct 10, 2023

MaxwellDG commented Oct 10, 2023

georgewrmarshall Oct 10, 2023 • edited Loading

Choose a reason for hiding this comment

georgewrmarshall Oct 11, 2023

Choose a reason for hiding this comment

georgewrmarshall Oct 11, 2023

Choose a reason for hiding this comment

georgewrmarshall Oct 11, 2023

Choose a reason for hiding this comment

georgewrmarshall Oct 12, 2023

Choose a reason for hiding this comment

MaxwellDG commented Oct 12, 2023 • edited Loading

codecov bot commented Oct 13, 2023 • edited Loading

Codecov Report

metamaskbot commented Oct 13, 2023

georgewrmarshall commented Oct 10, 2023 •

edited

Loading

georgewrmarshall Oct 10, 2023 •

edited

Loading

MaxwellDG commented Oct 12, 2023 •

edited

Loading

codecov bot commented Oct 13, 2023 •

edited

Loading