Add Google Account details to user menu dropdown

[aaemnnosttv]

Feature Description

In #5724 we updated the tooltip content for the user menu to expose the connected Google account details, like name and email as well as extended our existing infrastructure to capture the users name which wasn't previously stored.

This issue is about extending the contents of the dropdown with these details for consistency with other Google products which often show a larger avatar, followed by the users full name and account email.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The user menu for signed in users should be updated to to match the Figma design. (as of writing this AC, the design has some corrections pending.)
  • The header of the menu should include the user's avatar, full name, and email address at the top of the menu dropdown when opened as seen in the design.
  • The menu items should be styled accordingly with the icons from the design.
• The spacing, typography, font and background color etc should follow the design (or closely match the design while using our SCSS tokens in the plugin).

Implementation Brief

• Move assets/js/components/UserMenu.js to assets/js/components/UserMenu/index.js and update references if needed.
• Create assets/js/components/UserMenu/Details.js which exports the Details functional component.
  • It should render the user picture, full name and email.
  • To get the above values, query the core/user datastore via the getPicture, getFullName and getEmail selectors respectively.
  • Style the component as per the design.
    • Extra attention to the white background color and rounded corners.
• Using assets/js/components/UserMenu/index.js,
  • Include the Details component in first position of menuItems array.
  • Add an additional custom class name to Menu to style the dropdown as per the designs since the Menu component is reusable and we don't want all the Menus to inherit the styles.
  • Add the icons from the designs as inline SVG for the existing 2 menu items.
    • The icons and text can be wrapped within a span tag with a custom class name for styling purposes.
    • SVGs should be added in the assets/svg/icons folder.
  • Update handleMenuItemSelect to handle the situation where the user clicks on the first element in the menu, i.e Details. Nothing should happen and the cursor style should not be a pointer, not there should be any indication that the menu item is clickable.

Test Coverage

• No new tests to be added.
• VRT might need to be updated.

QA Brief

• Go to the Site Kit dashboard.
• Click on your display picture on the right end of the header to open the user menu dropdown.
• Verify that the design of the user menu dropdown is same as the Figma designs.
• Verify that it includes the user avatar, full name, and email.
• Verify that the newly added details section does not appear as actionable, i.e. nothing happens when hovering/clicking on it.
• Verify that the remaining menu items appear according to the design, with icons.
• Note: The Figma designs use some color tokens from GM3, which aren't yet available in our codebase. Their GM2 counterparts have been used for now. You may notice the following color differences:
  • GM3/sys/light/on-surface (#1F1F1F) -> $c-surfaces-on-surface (#161b18)
  • GM3/sys/light/on-surface-variant (#444746) -> $c-surfaces-on-surface-variant (#6c726e)
• Verify the UserMenu Storybook story.
• Verify the issues raised here have been addressed.

Changelog entry

• Update the user menu to display Google account details.

[aaemnnosttv]

@felixarntz do we want to refine this one a bit more as discussed to include stylistic changes to the other items in the menu (e.g. adding icons) or should this be still limited to adding the user details?

[felixarntz]

@aaemnnosttv IMO we should go with fully replicating the appearance of the Analytics user dropdown (see screenshot).

The user details could look almost 100% like this (minus "Privacy Policy" link, the content could be vertically centered so that it still looks right without that). And for our actions below, I'd say adding icons to get that visual parity would be good.

[aaemnnosttv]

@felixarntz added initial ACs here, can you have a look? Also we'll want to define the icons used.

[eclarke1]

We have been liaising with UX on this one Seba produced the following Figma file which has been reviewed by @marrrmarrr
Next steps here for @felixarntz to review ACs and Figma design I believe so assigning there.

[felixarntz]

@marrrmarrr I'm a bit confused by the new Figma design. I thought we were aligning with the existing Google services like Analytics? The Figma design now looks different, more importantly though it comes with actions in the dropdown that we don't have. The icons we were speaking about are still missing though. Can you clarify?

[sebastianmantel]

@felixarntz Im sure that the analytics dropdown will be changed soon as its using GM1/2 styles. The one that I made had the same layout and styles from the search console UI. This option has GM3 styles and looks more aligned with our GM2+ system.

.

That said, I just found out that Google One is updating the dropdown. Here is the new view:

I think we should use the same one. Thoughts?

[sebastianmantel]

@marrrmarrr I just updated the UI with some other icons. Take a look and let me know what do you think. https://www.figma.com/file/jV9HznsU4ZseiLKZ0CDb80/AccountDropdown?node-id=0%3A1&t=AiLhXtkx3SjuhIPK-1

[mxbclang]

@marrrmarrr Following up on this one. :)

[wpdarren]

QA Update: ❌

@nfmohit this is looking great. I do have a few minor UI differences to the figma designs.

1. The web account particle (the white area with name and email address) has very slight different dimensions. 319x69 pixels on my test site but on the figma design it is 320x97 pixels. I'm not sure it makes a difference for 1 pixel but wanted to highlight it here.

2. There does seem to be more padding/space around the manage sites and disconnect elements. When I look at the figma the total size is 335x236 but on figma it is 335x201

3. The icons SVG are 24x24 pixels on my test site but on figma they should be slightly different sizes. Not sure if this is the part of cause of the difference I see in point 2 above.

When comparing like for like, the main difference seems to be the padding around all the elements in the manage sites and disconnect elements, with my site being larger than figma. It's a noticeable difference.

4. I wanted to call out that we do not have any mobile figma designs for the user menu dropdown. I have completed some initial testing on different devices and the design looks fine, but will wait to complete a more thorough test on browserstack until we've looked at the differences in points 1, 2 and 3.

[nfmohit]

Very interesting findings, thank you @wpdarren!

The web account particle (the white area with name and email address) has very slight different dimensions. 319x69 pixels on my test site but on the figma design it is 320x97 pixels. I'm not sure it makes a difference for 1 pixel but wanted to highlight it here.

The 1-pixel difference here is due to the decimal differences in the line height of the text. However, the implementation is using the correct tokens according to Figma for the line heights, and hence we can overlook this.

There does seem to be more padding/space around the manage sites and disconnect elements. When I look at the figma the total size is 335x236 but on figma it is 335x201

You're right. I think I misunderstood the padding specified in the design as margin and added spacing around the menu items. I have opened a follow-up PR #6516, which fixes this. The total size should now be 335x200 pixels (1-px difference due to the above).

The icons SVG are 24x24 pixels on my test site but on figma they should be slightly different sizes. Not sure if this is the part of cause of the difference I see in point 2 above.

While this isn't a cause of the difference above, I have updated the icon sizes to be more aligned with the designs.

[wpdarren]

QA Update: ⚠️

@nfmohit I noticed on an avatar with a white background that the border is 1px, but the colour is slightly different shade than on the figma design. The UserMenu story highlights this the best I find. On my avatar in the screenshot below you don't notice it as much. In the figma it mentions solid #20212421

Not sure if I am being overly picky here, and it looks fine, but wondered what your thoughts are?

[nfmohit]

Hi @wpdarren! Thank you for raising your findings.

As you can see in the Figma design, the border colour #202124 has an opacity of 13%. Also, if you take a look at the CSS code generated in Figma for the border colour, it is the same as the implemented one:

Figma:

Implementation:

Let me know if it looks good. Thanks!

[wpdarren]

QA Update: ✅

@nfmohit apologies for wasting your time there! Thank you for clarifying that though.

Verified:

• The design of the user menu dropdown is same as the Figma designs.
  • It includes the user avatar, full name, and email.
• The newly added details section does not appear as actionable, i.e. nothing happens when hovering/clicking on it.
• The remaining menu items appear according to the design, with icons.
• The UserMenu Storybook story looks as expected
• The issues raised above have been fixed.
• The menu options work as expected for managing sites and disconnecting Site Kit.

Tested on desktop and small screen sizes on our supported browsers.

Screenshots

[wpdarren]

@aaemnnosttv I wanted to add an observation here.

Bethany shared a screenshot in Slack of the user menu dropdown and the full name was missing off it.

They reset Site Kit and the name appeared. I have tried to recreate it but unsuccessfully.

Here's a screencast I have created which shows my site in action.

Was on 1.93.0, Site Kit was connected and when I switch to the main branch the full name appears.

usm.mp4

Thought I would leave this comment in case you spotted anything during approval process.

c.c. @nfmohit @bethanylang @mohitwp