Implement Idea Hub module feature tour(s)

Once the Idea Hub module is set up, a feature tour should be added to explain the new functionality. Potentially, another feature tour with a single tooltip should be added also on the Site Kit settings screen, to point to the new Idea Hub module when it’s not yet activated.

---

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

Acceptance criteria

A new tooltip tour ideaHubModule should be displayed on the Site Kit dashboard if the ideaHubModule feature flag is enabled. Additional requirements to show the tooltip:

• The Idea Hub module is active.
• The user has successfully completed Idea Hub setup.
• There are “new” ideas available in the Idea Hub widget.

Under these conditions, a tour of 3 tooltips should be displayed the next time the user logs in, to explain the following key concepts: * Where ideas come from and how frequently they refresh * How to start a draft * How to manage ideas (save & dismiss)

Tooltip 1

• Position: near heading of the Idea Hub widget
• Heading: Get inspiration for new topics to write about!
• Body: These ideas are based on unanswered searches related to the content of your site. They are organised by topics and will refresh every 2-3 days.

Tooltip 2

• Position: point to the “start a draft” icon
• Heading: Start a draft
• Body: Found an interesting idea you want to write about? Create a draft! You can always get back to it later on the Posts page.

Tooltip 3

• Position: point to the “save for later” and “dismiss” icons
• Heading: Save for later or dismiss
• Body: If you’re not ready to create a draft about an idea just yet, add it to your “Saved” list and revisit later. If you don’t like an idea, you can dismiss it from your list.

Implementation Brief

• Create a new file assets/js/feature-tours/idea-hub-module.js that exports an object with the following properties:

  • slug should be ideaHubModule;
  • contexts should be an array with VIEW_CONTEXT_DASHBOARD value;
  • version should be 1.36.0; - with an @TODO - change this version if the launch version for the feature changes.
  • checkRequirements should check the following:
    • Idea Hub Module is active ["core/modules"].selectors.isModuleActive('idea-hub')
    • The user has successfully completed Idea Hub setup. - ["core/modules"].selectors.isModuleConnected('idea-hub')
    • There are “new” ideas available in the Idea Hub widget. ["modules/idea-hub"].selectors.getNewIdeas()
  • steps should be an array with three items:
  • target selector: .googlesitekit-idea-hub__title see: assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/index.js
  • title should be Get inspiration for new topics to write about!;
  • content should be These ideas are based on unanswered searches related to the content of your site. They are organised by topics and will refresh every N days.;
  • target selector: .googlesitekit-idea-hub__actions--create, this should be the first one and needs to be added to assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/Idea.js in https://github.com/google/site-kit-wp/blob/66de0dde8f218887787ce87cd224ef53edcf707e/assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/Idea.js#L119
  • title should be Start a draft;
  • content should be Found an interesting idea you want to write about? Create a draft! You can always get back to it later on the Posts page;
  • target selector: .mdc-button googlesitekit-idea-hub__actions--pin see: assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/Idea.js
  • title should be Save for later or dismiss;
  • content should be If you're not ready to create a draft about an idea just yet, add it to your "Saved" list and revisit later. If you don’t like an idea, you can dismiss it from your list.;

• Add your tour to assets/js/feature-tours/index.js, loading it conditionally based on whether or not the feature flag ideaHubModule is enabled.

Test out your tooltip, you may need to play around with placement param for each step to ensure the tooltip is in a good position.

Addd new storybook story for the tooltip tour in https://google.github.io/site-kit-wp/storybook/develop/?path=/story/modules-idea-hub-widgets-dashboardideaswidget--ready see the following as an example: https://google.github.io/site-kit-wp/storybook/main/?path=/story/global--tourtooltips

Test Coverage

• Update backstop VRT to cover the new tooltip tour.

Visual Regression Changes

• Added new tests as above.

QA Brief

• Set up a site with the ideaHubModule feature flag enabled, and add the tester plug in.
• Install the Test Idea Hub connection plugin (shared in Slack) to force connect Idea Hub
• Use the tester plugin to set the Site Kit version to 1.36.0 so that only the Idea Hub feature tour runs.
• Go to the dashboard, see the Idea Hub feature tour.
• Verify that the ACs are met.
• Visit Storybook and view the new story at ?path=/story/modules-idea-hub-feature-tour--default-feature-tour for additional checking.

Changelog entry

• Add a new feature tour for the Idea Hub widget.

[felixarntz]

@ivankruchkoff

The user has successfully completed Idea Hub setup. - what criteria can we use here? I think isActive + hasIdeas from the surrounding points will cover it off.

It is sufficient here to check whether the module is “connected” in addition to “active” - “connected” essentially means the setup is complete.

Can we point at two items in a tooltip? Or is the supplied target sufficient (pin icon)

Yes, pointing to the pin icon is sufficient. The idea is to just point to the general area (just in case there’s a selector for e.g. a div that wraps both icons - but if not, pointing to the pin icon works too).

I saw that we don’t add storybook for each step of each tour and backstop screenshots in #2739 or #2847 makes sense to me to add these and that way we can catch regressions since I imagine we won’t see them often when testing.

I think it’s sufficient for now to create a single Storybook story that allows to walk through the tooltip tour (e.g. similar to https://google.github.io/site-kit-wp/storybook/main/?path=/story/global--tourtooltips). We don’t need a story for each tooltip - although your point is valid, but we need to revisit our Backstop implementation and what we include there anyway, so let’s not focus on that too much for now.

Regarding the rest of the ACs:

version should be 1.29.0;

Let’s set this to 1.36.0 for now - this may still change later, it should eventually have the version where this feature will launch. Can you therefore note in the IB to also add a TODO comment on it?

The only thing missing from the IB is to consider the ideaHubModule feature flag. The entire feature tour definition should only be added to the array if that feature flag is active.

Other than those pieces, the IB looks good. Some general feedback, you don’t need to re-iterate on all pieces of copy etc which is already defined in the ACs - you can just reference it, e.g. “set copy for each tooltip per the ACs”. That results on less writing needed for you, and it also avoids confusion, should the AC worrding be slightly amended before execution, which by having it in the IB would require double work to change it.

[wpdarren]

QA Update: Pass ✅

• Verified that tooltip 1 is near heading of the Idea Hub widget, with a heading of Get inspiration for new topics to write about!and body These ideas are based on unanswered searches related to the content of your site. They are organised by topics and will refresh every 2-3 days.

• Verified that tooltip 2 points to the “start a draft” icon with a heading of Start a draft and a body Found an interesting idea you want to write about? Create a draft! You can always get back to it later on the Posts page.

• Verified that tooltip 3 points to the “save for later” and “dismiss” icons, with a heading of Save for later or dismiss and body If you're not ready to create a draft about an idea just yet, add it to your "Saved" list and revisit later. If you don’t like an idea, you can dismiss it from your list.