Implement Idea Hub dashboard notification informing about the module

A Site Kit dashboard notification should be displayed to inform users about the new Idea Hub module if they have access to it. See the Figma file for UI design.

---

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

Acceptance criteria

• A new notification component IdeaHubModuleNotification should be implemented which prompts the user to activate the Idea Hub module.
  • The overall notice should look similar to this Figma design (no need to follow pixel-perfect/design a new component, but follow what we already have in other notifications), except for the buttons which should be left-aligned like we have in all other notifications.
  • Clicking the primary button should activate the Idea Hub module and then redirect to OAuth/module setup as usual.
  • Clicking the dismiss button should dismiss the notice persistently by storing the dismissal on the server-side. This should use the same implementation that #3360 has established, however it must use a different identifier (i.e. the dismissals for the notification and the widget CTA should be kept separate, even though they are for a rather similar purpose - we want to make sure people don’t “accidentally” dismiss one; they should see both).
  • Notification graphic: The Idea Hub module icon.
  • Notification heading: Get new ideas to write about based on what people are searching for
  • Notification text: Set up Idea Hub to get topic suggestions based on unanswered searches that match your site’s topic.
  • Notification button texts: Set up / Dismiss
• The above notification should be shown on the Site Kit dashboard under the following conditions:
  • The ideaHubModule feature flag is enabled.
  • The Idea Hub module is not active.
  • The success feedback notification about having connected Site Kit or activated a module is not there (we want to avoid showing both together - it is okay though to show this one alongside any remote core/site/data/notifications notifications).

Implementation Brief

• Once #3360 has been merged.
• Create assets/js/components/notifications/IdeaHubModuleNotification.js which exports the IdeaHubModuleNotification functional component with the following details:
  • Create a constant for will be the predefined ID of the notification.
  • Check if the module is active by quering the modules data store via the getModule function, passing idea-hub as paramter and checking the active property from the result. If active is not true, return null.
  • Check if the notification has been dismissed by querying the user data store via the isItemDismissed selector, passing the ID defined in the first bullet point. If the item has been dismissed, return null.
  • Internally IdeaHubModuleNotification uses the Notification component with the following main prop values:
    • title, description, ctaLabel, SmallImageSVG as defined in the AC.
    • format should be small
    • type should be win-success
    • onCTAClick: more below.
    • onDismiss more below.
  • Add the handleCTAClick function which is the value for the onCTAClick prop. The function should redirect the user to the module setup screen. To get the module setup URL, query the module’s data store via the getAdminReauthURL selector. Then dispatch the navigateTo action of the core/location data store to redirect the user. An example can be found in CompleteModuleActivationCTA.
  • Add the handleOnDismiss function which is the value for the onDismiss prop. The function should dispatch the dismissItem action of the user data store, passing a notification ID defined in the first bullet point as parameter.
• Using `assets/js/components/legacy-notifications/index.js,
  • import the IdeaHubModuleNotification component and create a variable by calling createAddToFilter with the component as parameter as it is done for the UserInputPromptNotification.
  • The IdeaHubModuleNotification component must be hooked to the googlesitekit.DashboardNotifications filter (similar to what’s been done with the UserInputPromptNotification) based on the following conditions:
    • Check if the ideaHubModule feature flag is enabled by using the isFeatureEnabled function.
    • Check if notification and setup are null, which means there are no setup notifications being shown at the same time.

Test Coverage

• No new tests to be added.

Visual Regression Changes

• N/A

QA Brief

• Visit the “Modules -> Idea Hub -> Notications -> ModuleNotification -> Ready”
• The title, description, image should be as per the AC.
• Enable the ideaHubModule feature flag and don’t connect the module.
• A notification with details as per the AC should appear on the main dashboard prompting the user to connect Idea Hub.
• If dismissed, check if the following XHR is made to /wp-json/google-site-kit/v1/core/user/data/dismiss-item

Changelog entry

• Add Idea Hub dashboard notification to inform users about new Idea Hub module.

[asvinb]

Thanks @wpdarren A follow up PR has been created: https://github.com/google/site-kit-wp/pull/3739

[wpdarren]

QA Update: ✅

Verified:

• The notice looks similar to this Figma design with the buttons left-aligned.

• Clicking the set up button sends the user to the connect service page.

• Can view the Notification graphic: The Idea Hub module icon.
• Can view the Notification heading Get new ideas to write about based on what people are searching for
• Can view the Notification text Set up Idea Hub to get topic suggestions based on unanswered searches that match your site’s topic.
• Can view the Notification button texts: Set up / Dismiss
• Clicking the dismiss button dismisses the notice.

Additional checks: made sure that the notice appeared correctly for our primary supported browsers, i.e. Firefox, Safari and also mobile devices on Android and iOS.