Build the entry-point callout (`FeatureDiscoveryCallout`)
- Dominant language
- JavaScript
- Stars
- 1.4k
- Forks
- 383
- Avg merge
- 4d 12h
- Merged PRs (30d)
- 80
Description
## Feature Description
A new button in a header users have learned to skim past can go unnoticed for a long time. The callout is the one nudge that fixes that: a small overlay pointing at the new **Add features** button (#13358), saying what's behind it, dismissed with **Got it** and not shown again.
This issue adds it. It appears on the dashboards, where the button is, and not in the hub — a user who's already in the hub has found it. It's the hub's only announcement: there's no feature tour, the hub being a discovery surface itself, and beyond this the red dot and menu count do the quiet, ongoing work of telling a user there's something new (#13358, #13359).
For reference, see the [Entry points & new-feature indicators](https://docs.google.com/document/d/1sLWcimi6eZqbK4YXVCZtO0ZrfrDV7Ub218Hu_vpwmyI/edit?tab=t.0#heading=h.iwgxt6wulwk) section in the design doc, and the [entry-point callout design](https://www.figma.com/design/7gBBIQhrIvLicLinAt9vta/Feature-Discovery-Hub?node-id=756-19764) in Figma.
---------------
_Do not alter or remove anything below. The following sections will be managed by moderators only._
## Acceptance criteria
- A callout overlay is shown on the dashboards, anchored to the **Add features** button (#13358) with its pointer at the button, reading:
- *"Unlock more Site Kit features"*
- *"Discover new ways to earn revenue, understand your visitors, and improve your visibility in Search, all in one place."*
- a **Got it** button.
- Where there isn't room to anchor it beside the button — on small viewports — it falls back to the position Site Kit's other overlay notifications use, at the bottom of the screen.
- **Got it** dismisses it, and the dismissal is permanent: it isn't shown to that user again, on either dashboard.
- It's shown only where the button it points at is shown: the main dashboard and the entity dashboard, not the hub itself.
- It's shown only to administrators, and only when the `featureDiscoveryHub` feature flag is enabled.
- It takes its turn among the dashboard's other overlay notifications, so a user is never shown two overlays at once.
- The callout matches the Figma design.
## Implementation Brief
- [ ] In `assets/js/components/feature-discovery/`:
- Create `FeatureDiscoveryCallout.tsx`.
- Export a notification slug constant, e.g. `FEATURE_DISCOVERY_CALLOUT_NOTIFICATION = 'feature_discovery_callout_notification'`.
- Render the component as a thin wrapper around `OverlayNotification`, following the pattern used by `PDFIntroductionOverlayNotification` and `SetUpEmailReportingOverlayNotification`:
- Accept the standard notification component props, `id` and `Notification`.
- Render `` around ``.
- Pass `notificationID={ id }`.
- Pass `anchorID` for the Add features button created in #13358, using its shared selector/class, `.googlesitekit-add-features-button`.
- Pass `className="googlesitekit-feature-discovery-callout"` for any callout-specific styling.
- Use the title `Unlock more Site Kit features`.
- Use the description `Discover new ways to earn revenue, understand your visitors, and improve your visibility in Search, all in one place.`.
- Use `dismissButton={ { label: __( 'Got it', 'google-site-kit' ) } }`.
- Export the callout illustration asset from the Figma design, e.g. `assets/svg/graphics/feature-discovery-callout.svg`, and pass it as both `GraphicDesktop` and `GraphicMobile` unless the design requires separate assets.
- [ ] Rely on `OverlayNotification` for Popper anchoring, pointer placement, RTL skidding, and the small-viewport fallback to the standard bottom overlay position; do not add separate positioning logic in `FeatureDiscoveryCallout`.
- [ ] In `assets/js/googlesitekit/notifications/register-defaults.js`:
- Import `FeatureDiscoveryCallout` and `FEATURE_DISCOVERY_CALLOUT_NOTIFICATION`.
- Register the callout in `DEFAULT_NOTIFICATIONS`:
- `Component: FeatureDiscoveryCallout`.
- `priority: PRIORITY.SETUP_CTA_LOW`, unless product/design explicitly needs it ordered before another setup CTA overlay.
- `areaSlug: NOTIFICATION_AREAS.OVERLAYS`.
- `groupID: NOTIFICATION_GROUPS.SETUP_CTAS`, so it participates in the existing one-overlay-at-a-time queue rendered by `SetupCTAOverlays`.
- `viewContexts: [ VIEW_CONTEXT_MAIN_DASHBOARD, VIEW_CONTEXT_ENTITY_DASHBOARD ]`.
- `isDismissible: true`, so clicking `Got it` writes the persistent dismissed-items key for this notification slug.
- `featureFlag: 'featureDiscoveryHub'`.
- `checkRequirements: asyncRequireAll( requireSetupCTAsNotHidden(), requireCapability( PERMISSION_MANAGE_OPTIONS ) )`.
- Add `PERMISSION_MANAGE_OPTIONS` to the `CORE_USER` constants import if it is not already imported.
- [ ] In the relevant Sass entry for overlay/card styling:
- Add minimal `.googlesitekit-feature-discovery-callout` styles needed to match the Figma design, keeping shared layout, spacing, arrow, and fallback positioning in the existing `OverlayCard` / `OverlayNotification` styles.
- Size and align the feature-discovery graphic to match the design on desktop and small viewports.
### Test Coverage
- Add unit test coverage for `FeatureDiscoveryCallout`, following existing overlay notification tests:
- Verify the title, description, illustration, and `Got it` button render when the notification is queued.
- Verify the notification anchors when an element with `.googlesitekit-add-features-button` exists, by asserting the anchored overlay/Popper classes are present.
- Verify clicking `Got it` dismisses the notification by posting the `FEATURE_DISCOVERY_CALLOUT_NOTIFICATION` slug to dismissed items.
- Verify the notification does not render after the dismissed-items response includes its slug.
- Add/extend `register-defaults` coverage to confirm the notification is enabled only for main and entity dashboard admin contexts when `featureDiscoveryHub` is enabled, and is not registered for view-only or hub contexts.
- Add story for `FeatureDiscoveryCallout` component.
## QA Brief
-
## Changelog entry
-
Contributor guide
Research direction
Start with the existing PDFIntroductionOverlayNotification and SetUpEmailReportingOverlayNotification patterns under assets/js/components/feature-discovery/, then inspect OverlayNotification and SetupCTAOverlays. Implement the registration in assets/js/googlesitekit/notifications/register-defaults.js, add the callout styles and illustration, and follow existing overlay tests and stories. Done means the acceptance criteria and specified dashboard, flag, capability, dismissal, anchoring, and queue behavior are covered.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, sass, typescript
- Domain
- design, frontend, testing
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 70/100