Description
Proposed Changes
- Add a feature flag and modernise the
Video
summary details page
- Extend the Horizontal bar component and its card component to:
- render additional value columns by accepting a new parameter
- add an option for an alternate header displaying column names below the card’s title
- update the width of the value column to accommodate larger numbers (a fixed width is needed for the label ellipsis)
- add an option for a flexible name of the main item column (value column name is already flexible)
- hide displaying data is loading property is passed (unlike other components, Videos summary page already have partial data when navigating to a page but still loads more)
I plan to update click events for each number in a separate PR.
Testing Instructions
- Navigate to the main Stats page on the live branch
- append
?flags=stats/new-video-summary
to the URL
- visit
Videos
summary page by clicking View all
on the component on the Traffic
page
- make sure that the component loads properly
- Bonus: smoke test other horizontal bar component on different screen sizes
Before |
After |
|
|
Pre-merge Checklist
- Has the general commit checklist been followed? (PCYsg-hS-p2)
- Have you written new tests for your changes?
- Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
- Have you checked for TypeScript, React or other console errors?
- Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
- Have we added the “[Status] String Freeze” label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For changes affecting Jetpack: Have we added the “[Status] Needs Privacy Updates” label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?
Related to #71018
Unfortunately, no screenshots were provided by the developer.