Add Feature Tour to Dashboard Sharing

Feature Description

We should add a feature tour for the new Dashboard Sharing features, in line with what’s in the design doc/Figma mockups.

---

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

Acceptance criteria

• A new feature tour for Dashboard Sharing should be added that includes a single overlay that highlights the new Dashboard Sharing button: https://www.figma.com/file/i04x83uA9U8HHBANlhS7Db/Dashboard-Sharing?node-id=737%3A17896
• There should be a tour focused on the element/button that shows the Dashboard Sharing modal with the text:
  • New! Dashboard sharing in the heading
  • Share a view-only version of your dashboard with other WordPress roles in the body
  • Got it as the dismissal button

Implementation Brief

• Create assets/js/feature-tours/dashboard-sharing.js which will contain the dashboard sharing feature tour.
• Code can be copied over from assets/js/feature-tours/help-visibility.js with the following changes:
  • Replace helpVisibility by dashboardSharing
  • context should be VIEW_CONTEXT_DASHBOARD
  • version should be 1.85.0 (a version far in the future, see this comment: https://github.com/google/site-kit-wp/issues/5328#issuecomment-1154442987)
    • Add a TODO item noting this version should be changed when the feature flag is removed to the actual upcoming version when the flag is removed.
  • gaEventCategory should be ${ viewContext }_dashboard-sharing [TBD]
  • The steps array should contain only one item with the following details:
    • target should be .googlesitekit-sharing-settings__button
    • title and content as per the AC.
    • placement should be bottom-start
  • Add checkRequirements which should be a function that checks whether the dashboardSharing feature flag is enabled, via the isFeatureEnabled function.
• Update assets/js/feature-tours/index.js to include the new feature tour.

Test Coverage

• No new tests to be added.

QA Brief

• QAing this would require going to the Site Kit Dashboard and making sure a feature tour tooltip appears targeting the Dashboard Sharing settings button which includes the text mentioned in the AC.
• The dashboardSharing feature flag needs to be turned on in the tester plugin for this to show up.
• Note that the UI can be a little different than the actual Figma design to keep it consistent with the other feature tours. Sometimes the Figma designs are out of sync with our code base. As a result, the difference is expected.

Changelog entry

• Add a feature tour for the dashboard sharing.

[aaemnnosttv]

Great thanks!

Regarding the tour, we discussed extending this with additional steps earlier today that would include the sharing settings. I’ll open a new issue for investigation as a potential follow-up to this one.

IB ✅

[tofumatt]

Oh, right on, makes sense.

Cool, I’ve put a far-future version in there for now and added a note about the reasoning/comment 👍🏻

I figured 1.85.0 was fine, but if it should be adjusted in either direction and the IB’s otherwise fine feel free to do that 🙂