Build the dashboard header pill (AddFeaturesButton) #13358

Feature Description

The dashboard is where users spend their time in Site Kit, so it's where the way into the hub belongs: an Add features button in the dashboard header, sitting with the date range selector and the sharing controls, offering the hub at the moment a user is already thinking about their site.

This issue adds that button, on both the main dashboard and the entity dashboard. It carries a small red dot whenever the user has new features they haven't seen. What decides whether the dot is there is the same new-feature count behind the wp-admin menu badge and the What's new? list (#13246). Once the user has been to What's new? (#13321) the dot is gone, and the button remains as a permanent, quiet way back in.

The overlay that draws attention to this button when it first appears is a separate issue (#13360).

For reference, see the Entry points & new-feature indicators section in the design doc, and the header button design in Figma.

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

Acceptance criteria

• An Add features button is added to the Site Kit header on both the main dashboard and the entity dashboard, alongside the date range selector and the dashboard sharing button, positioned as the design shows.
• Clicking it navigates to the hub.
• It carries a small red dot when the user has features that are new and that they haven't seen yet (Implement the newness model & derived selectors #13246), and no dot when they don't.
• The dot follows that count: once the user has visited What's new? (Build the "What's new?" tab #13321), or dismissed the features listed there (Add the dismiss-with-feedback menu #13357), the dot is gone the next time a dashboard is loaded.
• It's styled as a colour pill, standing out from the neighbouring header controls, per the Figma design — including how it appears at the viewport sizes the dashboard header supports.
• It's shown only to authenticated users, and only when the featureDiscoveryHub feature flag is enabled.
• Its label and its dot are conveyed to screen readers, so a user who can't see the dot is still told there's something new.

Implementation Brief

• Create assets/svg/icons/plus-heavy.svg
  • Extract icon from Figma as an SVG. The icon should be edge-to-edge of the canvas.
• Create assets/js/components/feature-discovery/AddFeaturesButton.tsx:
  • Import assets/svg/icons/plus-heavy.svg as PlusHeavy.
  • Render nothing if ! select( CORE_USER ).hasCapability( PERMISSION_MANAGE_OPTIONS ) or ! useFeature( 'featureDiscoveryHub' ).
  • Generate an ID for a descriptive element, ariaDescribedBy with useInstanceId().
  • Define hasNewFeatures as MODULES_READER_REVENUE_MANAGER.getNewFeatureCount() > 0 (Implement the newness model & derived selectors #13246).
  • Render an <a /> with:
    • getAdminURL( 'googlesitekit-features' ) as href.
    • googlesitekit-add-features-button as className.
    • <Icon icon={PlusHeavy} size={13} />.
    • Add features text in <Typography type={TYPE_LABEL} size={SIZE_SMALL} />.
    • aria-describedby as ariaDescribedBy if hasNewFeatures.
  • Outside of the link, if hasNewFeatures, render a <span> with:
    • id as ariaDescribedBy.
    • New features available text in <VisuallyHidden />.
  • Render a wrapper <div /> around the link and span.
• In assets/js/components/DashboardMainApp.js
  • Render <AddFeaturesButton /> inside <Header />.
• In assets/js/components/DashboardEntityApp.js
  • Render <AddFeaturesButton /> inside <Header />.
• Create assets/sass/components/global/_googlesitekit-add-features-button.scss
  • Style the button according to the Figma design.
  • Style the span as the red dot, positioned over the link, using the wrapper for relative positioning. The text should be visually hidden.
  • Below $bp-wpAdminBarTablet visually hide the Add features text and display the button as a 36x36 circle in line with the other icons.

Test Coverage

• Add unit test coverage for AddFeaturesButton, verifying its conditional visibility and the rendering of the badge when there are new features.
• Add VRT stories for AddFeaturesButton with and without the badge.
• Update VRT references for existing stories that show the dashboard header.

QA Brief

• Set up Site Kit with the featureDiscoveryHub feature flag enabled.
• Confirm that the Add features button appears in the header as per the AC.
• Additionally:
  • Check that the button's interactive states match those on the Figma design system.
  • Confirm the button appears in the features menu shown in mobile and tablet viewports, as per Figma, which is also now shown on the entity dashboard.
• The button will initially appear with the red dot present. To simulate visiting the "What's new?" tab which will clear the newness state for all new features, run the following snippet in the dev console:

items = googlesitekit.data
	.select( 'core/feature-discovery' )
	.getFeatures()
	.reduce(
		( items, { slug } ) => [
			...items,
			{ slug: `feature-discovery-new-${ slug }`, expiresInSeconds: 1 },
		],
		[]
	);

googlesitekit.data.dispatch( 'core/user' ).setExpirableItemTimers( items );

Changelog entry

• Add an Add features button to the dashboard header with a badge for new features.