Implement UI for new PSI widget

[felixarntz]

Feature Description

As a follow-up to #1636, this issue is about implementing the exact UI from the mock.

---

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

Acceptance criteria

• The new PSI widget implemented in #1636 should have UI as in the mock.
• Material components should be used where applicable.

Implementation Brief

• Update the a newly created component from #1636 called DashboardPageSpeed at assets/js/modules/pagespeed-insights/dashboard/dashboard-widget-web-vitals.js. The component should:

  • Display Web Vitals Metrics for both "In the Lab" and "In the Field", and "Mobile/Desktop" (See Figma Mockup).
  • Track the state of which tab is selected both "mobile/desktop" and "In the Lab/In the field" (states should be independent)
  • Pass the data retrieved from the PageSpeed Insights data store as props into <LabReportMetrics> and <FieldReportMetrics>
  • Use a <Layout> component with no header prop to wrap:
  • <header> (see below)
  • a <section> which wraps <LabReportMetrics> or <FieldReportMetrics> (conditionally rendered based on the data source)

• Create a <header> inside <Layout> which should:

  • Implement the "In the Lab" and "In the Field" tabs with @material/react-tab-bar to switch between the vitals for each scenario utilizing callbacks with setDataSrcField and setDataSrcLab
  • Use a re-usable mobile/desktop switcher component, called DeviceSizeTabBar (see below) which will trigger callbacks to call: setStrategyMobile and setStrategyDesktop

• The LabReportMetricscomponent should:

  • Accept reportData as a prop.
  • display the following items as <div> rows:
  • Row 1: "Lab data is useful for debugging performance issues, as it is collected in a controlled environment." and "Learn More" external arrow link.
  • Row 5: "View details at" and "PageSpeed Insights" external arrow link.
  • display the following metrics as rows in a <table>, styled to look the same as Rows 1 & 5 (this should have an invisible <th> which indiates the types of data):
  • Row 2: Total Blocking Time metric (for "In the Lab" only)
  • Row 3: Largest Contentful Paint metric (both)
  • Row 4: Cumulative Layout Shift metric (both)

• The FieldReportMetricscomponent should:

  • Accept reportData as a prop.
  • display the following items as <div> rows:
  • Row 1: "Lab data is useful for debugging performance issues, as it is collected in a controlled environment." and "Learn More" external arrow link.
  • Row 5: "View details at" and "PageSpeed Insights" external arrow link.
  • display the following metrics as rows in a <table>, styled to look the same as Rows 1 & 5 (this should have an invisible <th> which indiates the types of data):
  • Row 2: First Input Delay metric
  • Row 3: Largest Contentful Paint metric
  • Row 4: Cumulative Layout Shift metric
  • Display the "Field data unavailable" message with accompanying text if the data is not present.

• Create a re-usable component called DeviceSizeTabBar (open to better names for this) in assets/js/components/device-size-tab-bar.js which should:

  • Allow a user to toggle between different device sizes, (currently just mobile/desktop) represented by the icons used in the Figma file.
  • Receive a callback function from its parent, which will be triggered when the user selects a different size, its parent can use this to perform an action (in this case, switching the set of web vitals metrics it is showing with setStrategyMobile and setStrategyDesktop).

• Note: We'll save implementation of the tooltip by the "Speed" module title for another issue.

QA Brief

Changelog entry

• Implement tabbed UI for new web vitals widget separating between mobile and desktop as well as lab and field data.

[jqlee85]

@felixarntz @aaemnnosttv made a pass at the IB here. Let me know if you've got changes or if it needs a higher level of detail.

[felixarntz]

@jqlee85 This looks very solid, IB ✅

[felixarntz]

@jqlee85 This is now unblocked as #1662 has been merged to develop.

[cole10up]

Tested

Installed release candidate zip, activated SK and PSI

Noticed:

• After activation and setup, defaults to mobile metrics. Should we default to desktop metrics?
• Missing periods after copy explanations. Based off the copy above "Lab data is a snapshot of how..." ending in a period should we adjust each metric explanation copy to end with a period?
• Cumulative Layout Shift is missing 'ms' or 's' identifier next to the metric. I would expect some millisecond or second next to any metric equal or greater than 0.

Passed desktop view and mobile view.

Sending back to CR for review

[jqlee85]

@cole10up thanks for the testing. Regarding the those points:

• I believe the default is meant to be mobile, is that correct @marrrmarrr ?
• Using the mocks as reference, I think these are meant to remain without periods.
• Cumulative Layout Shift is a fraction, not a measure of time, so it shouldn't have any units.

[aaemnnosttv]

@cole10up - to follow up on what @jqlee85 said

After activation and setup, defaults to mobile metrics. Should we default to desktop metrics?

The default should be mobile. I thought this was in the ACs but apparently it is only in the IB for https://github.com/google/site-kit-wp/issues/1636 which is the issue that handled all of the behavior for the component (this one is just about matching the UI/design).

Regarding the other two points, @jqlee85 is correct.

---

There is a typo to fix that @jqlee85 found, but if you want to look at the copy in Figma, the design is slightly out of sync and you'll need to reference the comments for the current.

[cole10up]

Retested

While testing, noticed setting up PSI from the settings page, the user is directed to the dashboard where the page jumps to an odd spot.

Sending back to CR

[cole10up]

Retested

Verified setup auto scroll no longer occurs:

Checked functionality, typo fix, uninstalling and reinstalling.

Passed QA ✅