feat: add search feature #25170

salimtb · 2024-06-10T10:58:14Z

Description

Add filter search for popular network list

Related issues

Fixes:

Manual testing steps

Click on the network logo
you should be able to filter on network add using search input

Screenshots/Recordings

Before

before-search.mov

After

after-search.mov

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 · 2024-06-10T10:58:27Z

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 · 2024-06-10T17:30:03Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 65.63%. Comparing base (59a805a) to head (b71e51e).
Report is 5 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #25170      +/-   ##
===========================================
+ Coverage    65.61%   65.63%   +0.01%     
===========================================
  Files         1373     1374       +1     
  Lines        54523    54538      +15     
  Branches     14282    14281       -1     
===========================================
+ Hits         35774    35792      +18     
+ Misses       18749    18746       -3

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

metamaskbot · 2024-06-10T17:43:53Z

Builds ready [fc0081f]

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, 5
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (135 ± 183 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	68	148	85	16	8
		domContentLoaded	8	21	11	3	2
		load	40	1796	135	381	183
		domInteractive	8	21	11	3	2

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: -25.32 KiB (-0.73%)
ui: 8.91 KiB (0.13%)
common: 25.41 KiB (0.40%)

darkwing

I'm still seeing scrolling:

Screen.Recording.2024-06-10.at.6.22.26.PM.mov

ui/components/multichain/network-list-menu/network-list-search/network-list-search.tsx

ui/components/multichain/network-list-menu/network-list-menu.js

darkwing · 2024-06-10T23:30:28Z

This also looks weird:

metamaskbot · 2024-06-11T11:18:36Z

Builds ready [3e00485]

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, 5
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (863 ± 755 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	77	399	162	82	39
		domContentLoaded	9	74	31	21	10
		load	41	5323	863	1572	755
		domInteractive	8	74	31	21	10

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: -25.32 KiB (-0.73%)
ui: 8.71 KiB (0.13%)
common: 25.41 KiB (0.40%)

metamaskbot · 2024-06-11T16:37:38Z

Builds ready [3c4cb01]

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, 5
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (147 ± 201 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	66	247	90	39	19
		domContentLoaded	8	39	12	6	3
		load	39	1970	147	419	201
		domInteractive	8	39	12	6	3

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: -25.32 KiB (-0.73%)
ui: 8.59 KiB (0.12%)
common: 25.41 KiB (0.40%)

bergeron · 2024-06-11T16:51:33Z

I see 1 weird behavior. When I fully backspace my search query, the focus is lost from the search box so I cannot type again. Focus seems to jump to the current network.

Screen.Recording.2024-06-11.at.9.50.01.AM.mov

bergeron · 2024-06-11T18:17:56Z

It also seems undesirable that the test networks aren't included in the search? They don't hide when you type something different, and it say "no networks found" even though test networks are shown

darkwing · 2024-06-11T22:05:39Z

Good point Brian! I do think we should include test networks in search

darkwing · 2024-06-11T22:24:07Z

I see 1 weird behavior. When I fully backspace my search query, the focus is lost from the search box so I cannot type again. Focus seems to jump to the current network.

Testing with prod version the cursor stays in place, so I think this is an undesired bug with this PR

salimtb · 2024-06-13T08:53:44Z

It also seems undesirable that the test networks aren't included in the search? They don't hide when you type something different, and it say "no networks found" even though test networks are shown

@bergeron Fixed ✅

salimtb · 2024-06-13T08:54:56Z

Good point Brian! I do think we should include test networks in search

Test network are now included

comments resolved

metamaskbot · 2024-06-13T10:31:51Z

Builds ready [b71e51e]

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, 5
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (42 ± 1 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	62	87	75	7	3
		domContentLoaded	8	11	9	1	0
		load	38	48	42	2	1
		domInteractive	8	11	9	1	0

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 1.71 KiB (0.02%)
common: 0 Bytes (0.00%)

salimtb added team-assets INVALID-PR-TEMPLATE PR's body doesn't match template needs-assets-ux-review A shared label between the Assets and UX team to flag PRs ready for consolidated team review. labels Jun 10, 2024

salimtb requested a review from a team as a code owner June 10, 2024 10:58

metamaskbot removed the INVALID-PR-TEMPLATE PR's body doesn't match template label Jun 10, 2024

salimtb marked this pull request as draft June 10, 2024 11:00

salimtb changed the title ~~Add search feature~~ feat: add search feature Jun 10, 2024

salimtb force-pushed the add-search-feature branch from 475e919 to 2c0bfae Compare June 10, 2024 13:47

salimtb changed the base branch from develop to add-popular-network-list-modal June 10, 2024 13:47

salimtb force-pushed the add-search-feature branch from 2c0bfae to fc0081f Compare June 10, 2024 16:26

darkwing previously requested changes Jun 10, 2024

View reviewed changes

ui/components/multichain/network-list-menu/network-list-search/network-list-search.tsx Outdated Show resolved Hide resolved

ui/components/multichain/network-list-menu/network-list-search/network-list-search.tsx Outdated Show resolved Hide resolved

darkwing reviewed Jun 10, 2024

View reviewed changes

ui/components/multichain/network-list-menu/network-list-menu.js Show resolved Hide resolved

salimtb force-pushed the add-popular-network-list-modal branch 3 times, most recently from dcf526b to 2a850e0 Compare June 11, 2024 09:34

salimtb force-pushed the add-search-feature branch from fc0081f to 3e00485 Compare June 11, 2024 10:25

salimtb requested a review from darkwing June 11, 2024 10:27

salimtb marked this pull request as ready for review June 11, 2024 12:01

salimtb force-pushed the add-search-feature branch 2 times, most recently from 6f35f63 to 3c4cb01 Compare June 11, 2024 16:03

Base automatically changed from add-popular-network-list-modal to develop June 11, 2024 18:09

salimtb force-pushed the add-search-feature branch 3 times, most recently from 592fc2d to 66bf6e3 Compare June 13, 2024 08:53

salimtb force-pushed the add-search-feature branch from 66bf6e3 to de40a51 Compare June 13, 2024 09:26

salimtb added 2 commits June 13, 2024 11:29

feat: add search feature

761977f

fix: fix PR comments

b71e51e

salimtb force-pushed the add-search-feature branch from de40a51 to b71e51e Compare June 13, 2024 09:30

darkwing approved these changes Jun 13, 2024

View reviewed changes

bergeron approved these changes Jun 13, 2024

View reviewed changes

salimtb merged commit 1d92608 into develop Jun 13, 2024
74 checks passed

salimtb deleted the add-search-feature branch June 13, 2024 16:00

github-actions bot locked and limited conversation to collaborators Jun 13, 2024

metamaskbot added the release-12.1.0 Issue or pull request that will be included in release 12.1.0 label Jun 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add search feature #25170

feat: add search feature #25170

salimtb commented Jun 10, 2024 •

edited

Loading

github-actions bot commented Jun 10, 2024

codecov bot commented Jun 10, 2024 •

edited

Loading

metamaskbot commented Jun 10, 2024

darkwing left a comment

darkwing commented Jun 10, 2024

metamaskbot commented Jun 11, 2024

metamaskbot commented Jun 11, 2024

bergeron commented Jun 11, 2024

bergeron commented Jun 11, 2024 •

edited

Loading

darkwing commented Jun 11, 2024

darkwing commented Jun 11, 2024

salimtb commented Jun 13, 2024 •

edited

Loading

salimtb commented Jun 13, 2024

metamaskbot commented Jun 13, 2024

feat: add search feature #25170

feat: add search feature #25170

Conversation

salimtb commented Jun 10, 2024 • edited Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Jun 10, 2024

codecov bot commented Jun 10, 2024 • edited Loading

Codecov Report

metamaskbot commented Jun 10, 2024

darkwing left a comment

Choose a reason for hiding this comment

darkwing commented Jun 10, 2024

metamaskbot commented Jun 11, 2024

metamaskbot commented Jun 11, 2024

bergeron commented Jun 11, 2024

bergeron commented Jun 11, 2024 • edited Loading

darkwing commented Jun 11, 2024

darkwing commented Jun 11, 2024

salimtb commented Jun 13, 2024 • edited Loading

salimtb commented Jun 13, 2024

metamaskbot commented Jun 13, 2024

salimtb commented Jun 10, 2024 •

edited

Loading

codecov bot commented Jun 10, 2024 •

edited

Loading

bergeron commented Jun 11, 2024 •

edited

Loading

salimtb commented Jun 13, 2024 •

edited

Loading