Avoid double-triggering of survey and additional prompts

Feature Description

Let’s make sure the prompt doesn’t show when there’s a second prompt on a different part of the dashboard (e.g. in the future this could happen with the UXR study recruitment form).

---

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

Acceptance criteria

• When a remote-controlled survey is being displayed, no remote-controlled top notification (i.e. from core/site/data/notifications) must be displayed at the same time.
  • In other words, the surveys always take precedence. Furthermore, since the notifications are cached on the client-side, they can still easily be displayed again on next page load.
  • Technically, if a survey is being rendered, it needs to be ensured the site notifications state in the data store is emptied or kept empty to avoid those notifications from appearing.

Implementation Brief

1. Use some state to determine whether or not a survey is being displayed. getCurrentSurvey() (this already exists) https://github.com/google/site-kit-wp/blob/38a001c4b564a9cf0b5c4fcccaf8f97c187ed00e/assets/js/googlesitekit/datastore/user/surveys.js#L157

2. Make some changes assets/js/components/legacy-notifications/dashboard-core-site-alerts.js

• Copy the file to assets/js/components/legacy-notifications/DashboardCoreSiteAlerts.js

• Set a timeout to only render content after 5 seconds, though returning null doesn’t need to block.

• Refactor it to a stateless functional component, instead of the call to getNotifications() from assets/js/components/legacy-notifications/site/get-notifications.js, use the getNotifications() selector window.googlesitekit.data.stores['core/site'].selectors.getNotifications().

• After the five seconds timeout completes, add another call to the getCurrentSurvey() in case a remote survey has come in and if it returns a survey, return null, otherwise implemenent the remainder of the return statement as per the legacy render function.

• Combining the changes from above, we do the following:

• When the component loads, start the 5s timer,

• If getCurrentSurvey() returns a survey, we return null and don’t render notifications.

• If we don’t have a survey, we call getNotifications,

• After the 5s have passed, we once more call getCurrentSurvey(), if it returns a survey, we return null, otherwise we return the notifications as per the current render() function of the legacy dashboard-core-site-alerts.

1. Remove the assets/js/components/legacy-notifications/site/get-notifications.js and assets/js/components/legacy-notifications/dashboard-core-site-alerts.js files, any tests for them.

2. Update components/legacy-notifications/index.js to call the new Component in const addCoreSiteNotifications = createAddToFilter( <DashboardCoreSiteAlerts />);

3. Create storybook component stories for assets/js/components/notifications/DashboardCoreSiteAlerts.js

Test Coverage

Update tests/e2e/specs/dashboard/notifications.test.js to cover the following scenarios:

• surveys and notifications to display, the notifications should not display.
• no current survey but one appearing in 3 seconds, the notifications should not display.
• no current survey but one appearing in 6 seconds, the notifications should display.

Visual Regression Changes

• Add VRT for the storybook stories.

QA Brief

• Storybook components cover off the scenarios for render / no render of the component depending on presence of surveys, so see https://google.github.io/site-kit-wp/storybook/pull/3603/?path=/story/components-dashboardcoresitealerts--notification-cta-with-survey-longer-delay (when merged the link will be https://google.github.io/site-kit-wp/storybook/develop/?path=/story/components-dashboardcoresitealerts--notification-cta-with-survey-longer-delay )
• You can also reproduce the same scenario by triggering notifications and surveys the same way that the storybook story does in https://github.com/google/site-kit-wp/blob/67ddf556799b060cd8910123bcd0e4579afd0ad8/assets/js/components/legacy-notifications/DashboardCoreSiteAlerts.stories.js#L87-L91

Changelog entry

• Don’t show notifications if a user survey has already been displayed.

[Hazlitte]

@tofumatt Yes if the User Survey shows up within 5 seconds the notification is not displayed.

[ivankruchkoff]

@aaemnnosttv updated to call notifications before the 5s are up.

Moved the component to the legacy-notifications, my rationale for the notifications folder was that this new component is a refactored functional component rather than the legacy class based, but I can see the rationale for moving it as a block of functionality.

Back over to you for review @aaemnnosttv.