feat: MCv1 Permissions: Site Connections Tooltip #23189

vthomas13 · 2024-02-26T22:14:31Z

Description

A follow-up PR to add tooltips to ConnectionListItem.

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/1980

Manual testing steps

Open Metamask
Connect to a dapp on at least 8 accounts
Go To "All Permissions" screen from the global menu item
Hover over an Account AvatarGroup
Verify that the tooltip shows a maximum of 7 accounts with blockies/jazzicons and has a "+X more" representing the accounts we could not show in the tooltip.

Screenshots/Recordings

Before

No tooltip

After

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 · 2024-02-26T22:14:46Z

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.

brad-decker · 2024-02-26T22:23:02Z

Look, just because I'm turning 40 this year isn't any reason to bring the 80's into this repo.

metamaskbot · 2024-02-27T23:06:59Z

Builds ready [f4c4145]

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
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1227 ± 400 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	70	227	148	43	21
		domContentLoaded	11	78	38	22	11
		load	57	1929	1227	832	400
		domInteractive	11	78	38	22	11

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

background: 0 Bytes (0.00%)
ui: 1.97 KiB (0.03%)
common: 131 Bytes (0.00%)

codecov · 2024-02-27T23:07:05Z

Codecov Report

Attention: Patch coverage is 85.00000% with 3 lines in your changes are missing coverage. Please review.

Project coverage is 68.67%. Comparing base (dec5421) to head (06ec366).

Files	Patch %	Lines
...connection-list-tooltip/connection-list-tooltip.js	87.50%	2 Missing ⚠️
ui/selectors/selectors.js	66.67%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #23189      +/-   ##
===========================================
+ Coverage    68.66%   68.67%   +0.01%     
===========================================
  Files         1105     1106       +1     
  Lines        43338    43353      +15     
  Branches     11586    11590       +4     
===========================================
+ Hits         29758    29771      +13     
- Misses       13580    13582       +2

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

NidhiKJha

Looking good. But I think we need to refactor the code here as this is gonna be a new component https://www.notion.so/metamask-consensys/Amon-Hen-components-readiness-check-in-9dd393e209004d079e26d4fffea80f88?pvs=4#3f5e7ae6ba2f4e8586ddb5f58dd0211e

ui/components/multichain/pages/permissions-page/connection-list-item.js

metamaskbot · 2024-02-28T16:12:58Z

Builds ready [6b6e251]

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
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (793 ± 418 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	57	167	110	26	13
		domContentLoaded	10	51	23	11	5
		load	45	2074	793	870	418
		domInteractive	10	51	23	11	5

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

background: 0 Bytes (0.00%)
ui: 1.97 KiB (0.03%)
common: 131 Bytes (0.00%)

metamaskbot · 2024-02-29T20:08:42Z

Builds ready [4969ae6]

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
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (803 ± 476 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	66	291	134	63	30
		domContentLoaded	9	96	33	28	14
		load	53	2496	803	991	476
		domInteractive	9	96	33	28	14

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

background: 0 Bytes (0.00%)
ui: 1.97 KiB (0.03%)
common: 131 Bytes (0.00%)

metamaskbot · 2024-03-01T16:35:21Z

Builds ready [d7aa769]

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
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1251 ± 415 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	78	222	139	43	21
		domContentLoaded	13	74	33	17	8
		load	65	2133	1251	863	415
		domInteractive	13	74	33	17	8

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

background: 0 Bytes (0.00%)
ui: 3.6 KiB (0.05%)
common: 131 Bytes (0.00%)

DDDDDanica · 2024-03-01T19:02:30Z

...ponents/multichain/pages/permissions-page/connection-list-tooltip/connection-list-tooltip.js

@@ -0,0 +1,128 @@
+import React from 'react';


Can we have it typescript one?

This may have to be addressed in a future PR. I have a WIP branch based off this branch, so it's really an awkward time to do TS conversion. Definitely afterwards though.

Can you add a ticket for this conversion ticket and tackle it after another branch?

ui/components/multichain/pages/permissions-page/connection-list-item.js

metamaskbot · 2024-03-05T18:47:41Z

Builds ready [80ab9e3]

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
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (954 ± 427 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	63	217	105	36	17
		domContentLoaded	10	63	24	17	8
		load	58	2184	954	889	427
		domInteractive	10	63	24	17	8

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

background: 0 Bytes (0.00%)
ui: 3.6 KiB (0.05%)
common: 131 Bytes (0.00%)

...ponents/multichain/pages/permissions-page/connection-list-tooltip/connection-list-tooltip.js

…em tests

metamaskbot · 2024-03-07T19:59:09Z

Builds ready [06ec366]

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
- content-script: 0
- contentscript: contentscript
- disable-console: disable-console
- policy-load: policy-load
- sentry-install: sentry-install
- ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1126 ± 405 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	77	173	122	30	14
		domContentLoaded	10	79	31	20	10
		load	64	1977	1126	843	405
		domInteractive	10	79	31	20	10

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

background: 0 Bytes (0.00%)
ui: 3.63 KiB (0.05%)
common: 131 Bytes (0.00%)

vthomas13 force-pushed the 1980-tooltip branch from 616c5c4 to 632f6e1 Compare February 26, 2024 22:26

vthomas13 added team-extension-ux team-core-extension-ux Core Extension UX team needs-assets-ux-review A shared label between the Assets and UX team to flag PRs ready for consolidated team review. labels Feb 27, 2024

vthomas13 requested review from NidhiKJha and darkwing February 27, 2024 19:50

vthomas13 changed the title ~~1980 tooltip~~ feat: MCv1 Permissions: Site Connections Tooltip Feb 27, 2024

vthomas13 force-pushed the 1980-tooltip branch from adc4451 to b33ae92 Compare February 27, 2024 21:37

vthomas13 marked this pull request as ready for review February 27, 2024 22:28

vthomas13 requested a review from a team as a code owner February 27, 2024 22:28

NidhiKJha requested changes Feb 28, 2024

View reviewed changes

ui/components/multichain/pages/permissions-page/connection-list-item.js Outdated Show resolved Hide resolved

ui/components/multichain/pages/permissions-page/connection-list-item.js Outdated Show resolved Hide resolved

vthomas13 force-pushed the 1980-tooltip branch from f4c4145 to 6b6e251 Compare February 28, 2024 15:50

vthomas13 force-pushed the 1980-tooltip branch from 6b6e251 to 4969ae6 Compare February 28, 2024 19:03

vthomas13 force-pushed the 1980-tooltip branch from 4969ae6 to 1ecc191 Compare February 29, 2024 20:36

vthomas13 requested a review from NidhiKJha February 29, 2024 20:43

vthomas13 force-pushed the 1980-tooltip branch 2 times, most recently from 6031ae4 to d7aa769 Compare March 1, 2024 15:37

metamaskbot added the needs-dev-review PR needs reviews from other engineers (in order to receive required approvals) label Mar 1, 2024

DDDDDanica reviewed Mar 1, 2024

View reviewed changes

darkwing reviewed Mar 5, 2024

View reviewed changes

ui/components/multichain/pages/permissions-page/connection-list-item.js Show resolved Hide resolved

darkwing previously approved these changes Mar 5, 2024

View reviewed changes

DDDDDanica previously approved these changes Mar 5, 2024

View reviewed changes

NidhiKJha previously approved these changes Mar 6, 2024

View reviewed changes

darkwing previously approved these changes Mar 7, 2024

View reviewed changes

vthomas13 force-pushed the 1980-tooltip branch from 80ab9e3 to c0d7528 Compare March 7, 2024 16:55

jonybur reviewed Mar 7, 2024

View reviewed changes

...ponents/multichain/pages/permissions-page/connection-list-tooltip/connection-list-tooltip.js Outdated Show resolved Hide resolved

vthomas13 dismissed stale reviews from NidhiKJha and darkwing via 51e0680 March 7, 2024 17:40

vthomas13 requested review from NidhiKJha, darkwing and jonybur March 7, 2024 17:50

jonybur approved these changes Mar 7, 2024

View reviewed changes

darkwing approved these changes Mar 7, 2024

View reviewed changes

vthomas13 added 11 commits March 7, 2024 14:21

feat: add avatarType to AvatarGroupProps

a7d9969

moving avatarType up into component level

87b692c

fix: hiding avatargroup on snaps, adding key to avatar group

9e7d813

wip tooltip

4d6b28b

Add connectedAccounts message and update ConnectionListItem component

c4a0df9

Add delay and duration to tooltip trigger; fix storybook

4e02ff0

Fix connection list item rendering issue

a71f918

Update text colors in ConnectionListItem component

9581b81

Add new components for connection list tooltip and connection list it…

28a77e9

…em tests

Remove console.log statement in ConnectionListItem test

04a20a0

Refactor connection list tooltip rendering logic

06ec366

vthomas13 force-pushed the 1980-tooltip branch from 51e0680 to 06ec366 Compare March 7, 2024 19:21

vthomas13 merged commit 65769f1 into develop Mar 7, 2024

vthomas13 deleted the 1980-tooltip branch March 7, 2024 19:54

github-actions bot locked and limited conversation to collaborators Mar 7, 2024

github-actions bot removed the needs-dev-review PR needs reviews from other engineers (in order to receive required approvals) label Mar 7, 2024

metamaskbot added the release-11.14.0 Issue or pull request that will be included in release 11.14.0 label Mar 7, 2024

feat: MCv1 Permissions: Site Connections Tooltip #23189

feat: MCv1 Permissions: Site Connections Tooltip #23189

Uh oh!

Conversation

vthomas13 commented Feb 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Feb 26, 2024

Uh oh!

brad-decker commented Feb 26, 2024

Uh oh!

metamaskbot commented Feb 27, 2024

Uh oh!

codecov bot commented Feb 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

NidhiKJha left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

metamaskbot commented Feb 28, 2024

Uh oh!

metamaskbot commented Feb 29, 2024

Uh oh!

metamaskbot commented Mar 1, 2024

Uh oh!

DDDDDanica Mar 1, 2024

Choose a reason for hiding this comment

Uh oh!

vthomas13 Mar 1, 2024

Choose a reason for hiding this comment

Uh oh!

DDDDDanica Mar 5, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

metamaskbot commented Mar 5, 2024

Uh oh!

Uh oh!

metamaskbot commented Mar 7, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

vthomas13 commented Feb 26, 2024 •

edited

Loading

codecov bot commented Feb 27, 2024 •

edited

Loading