Add the "What's new?" empty state #13327

Feature Description

What's new? runs dry for two kinds of user: somebody who has just caught up — read, set up or dismissed everything that was new to them — and somebody who has been away long enough that the features they missed have aged out. Either way the tab has nothing to list, and today (#13321) that leaves them looking at a blank tab.

This issue gives them somewhere to go instead: a reassurance that they're up to date, and a route to the rest of the catalog, where the features they haven't set up yet are always listed.

For reference, see the Empty state section in the design doc, and the design in Figma.

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

Acceptance criteria

• Where the What's new? tab (Build the "What's new?" tab #13321) has nothing to list, the feature list is replaced by a centred empty state: an illustration, the heading "You're up to date!", and the body "There are no new feature announcements right now, but you can explore other features that will help you grow your site".
• The empty state is shown whatever the reason the tab is empty — nothing new has been released for this user, or everything that was new has been seen and aged out, dismissed, or set up.
• The empty state carries an Explore features button, which takes the user to the All services and features tab.
• The empty state stands in for the feature list only. Anything shown above the list is unaffected — in particular the auto-updates notice (Surface the auto-updates CTA notice in the hub #13323) still appears above the empty state where it applies.
• A new illustration asset is added for the empty state.
• The empty state matches the Figma design.

Implementation Brief

• In assets/js/components/feature-discovery/whats-new/WhatsNewTab.tsx
  • Export the graphic asset from Figma as an SVG from Figma. Lazily import with lazy().
  • Define an onClickEmpty() that navigates to #/all-services with navigate = useNavigate().
  • If getWhatsNewFeatures() (Build the "What's new?" tab #13321) resolves to empty, in place of the features list:
    • Render the SVG inside <Suspense /> and <MediaErrorHandler />, consistent with other SVGs.
    • Render title as a <Typography as="h2" size={SIZE_SMALL} type={TYPE_HEADLINE} />.
    • Render description as a <P>.
    • Render "Explore features" as a <Button onClick={ onClickEmpty }>.
• In assets/sass/components/feature-discovery/_googlesitekit-whats-new.scss
  • Add styles for the empty state.

Test Coverage

• Add coverage for WhatsNewTab to verify that the empty state is rendered if getWhatsNewFeatures() resolves as empty, and that the button navigates when clicked.
• Add VRT reference for the WhatsNewTab story with no features (Build the "What's new?" tab #13321).

QA Brief

• Enable featureDiscoveryHub feature flag in the plugin.
• Go to Site Kit > Add features > What's new tab
• Make sure that the tab is empty and the design matches the Figma design.

Changelog entry

• Add the empty state for the "What's new?" tab in the Feature Discovery Hub.