Add the "What's new?" empty state
- Dominant language
- JavaScript
- Stars
- 1.4k
- Forks
- 383
- Avg merge
- 4d 14h
- Merged PRs (30d)
- 77
Description
## 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](https://docs.google.com/document/d/1sLWcimi6eZqbK4YXVCZtO0ZrfrDV7Ub218Hu_vpwmyI/edit?tab=t.0#heading=h.33xfx558eblg) section in the design doc, and the [design](https://www.figma.com/design/7gBBIQhrIvLicLinAt9vta/Feature-Discovery-Hub?node-id=827-19376) 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 (#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 (#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](https://www.figma.com/design/7gBBIQhrIvLicLinAt9vta/Feature-Discovery-Hub?node-id=831-8159&t=gyJGalWnAypVxKdj-4) from Figma as an SVG from Figma. Lazily import with `lazy()`.
- Define an `onClickEmpty()` that navigates to `#/all-services` with `navigate = useNavigate()`.
- If `getWhatsNewFeatures()` (#13321) resolves to empty, in place of the features list:
- Render the SVG inside `` and ``, consistent with other SVGs.
- Render title as a ``.
- Render description as a `
`.
- Render "Explore features" as a ``.
- [ ] 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 (#13321).
## QA Brief
-
## Changelog entry
-
Contributor guide
Research direction
Start in assets/js/components/feature-discovery/whats-new/WhatsNewTab.tsx and review how other SVGs use lazy(), Suspense, and MediaErrorHandler. Add the empty-state behavior and navigation described in the acceptance criteria, then update assets/sass/components/feature-discovery/_googlesitekit-whats-new.scss. Add WhatsNewTab coverage for an empty result and button navigation, plus a no-features VRT reference.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, testing
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100