Patch React Joyride to support tooltip target.

[techanvil]

Feature Description

In order to accommodate the Setup Flow Refresh dashboard tour requirements, we’ll need to extend the functionality of the react-joyride NPM package.

We need the ability to point a step’s tooltip to an element within the step’s highlighted area. There is an open PR to react-joyride that adds this functionality in two lines of code, however it looks like react-joyride is no longer actively maintained.

So, we’ll use patch-package to patch these lines of code in react-joyride. Note that we’re already using patch-package to patch @wordpress/data.

For reference, see the React Joyride section in the Design Doc.

---

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

Acceptance criteria

• The react-joyride NPM package is patched to support the ability to point a step’s tooltip to an element within the step’s highlighted area.

Implementation Brief

See the implementation guide in the Design Doc for guidelines on how to implement this issue.

• [ ] Update the index.mjs file inside node-modules/react-joyride/dist/
  • [ ] In the render() method of the JoyrideStep component
    • [ ] Update the target variable to make it find the floater target and fallback to the step target (i.e target = getElement(step.floaterProps?.target) || getElement(step.target))
    • [ ] In the returned object, update target: step.target to target, so that it uses the target variable we just updated
• [ ] Run npx patch-package react-joyride to create the patch
• [ ] Update the TourTooltips stories to showcase this change. We can achieve that by updating the fourth step.
  • [ ] Change the class of the highlighted anchor tag from step-4 to step-4-anchor
  • [ ] Move the step-4 class to the .googlesitekit-table-overflow div so that it becomes the main target
  • [ ] Update the fourth step props to include a floaterProps props with the target .step-4-anchor.

{
	target: '.step-4',
	title: ...,
	content: ...,
	floaterProps: {
		target: '.step-4-anchor',
	},
},

Test Coverage

• No new tests needed.

QA Brief

• Open the TourTooltips story, click through to the fourth step and confirm that the tooltip points to the third row in the table.

Changelog entry

• Add support for feature tour tooltips to point to a specific element.

[techanvil]

IB ✅

[mohitwp]

QA Update ❌

• Tested story TourTooltips story
• Verified that on desktop, tablets and small mobile fourth step tooltip points to the third row in the table as expected.

Issue - @techanvil I noticed that on large mobile viewports, the fourth-step tooltip points to the fourth row instead of the third. Interestingly, this doesn’t happen on small mobile viewports. Could you please check?

Large Mobile Viewport

Small mobile

PASS CASES

Tablet viewports

[techanvil]

Hey @mohitwp, good spot!

This seems to be a glitch that's only occurring in Storybook when the story is embedded in an iframe. If you open the story in a separate window and set the viewport width to the large mobile width, the fourth step correctly points to the third row.

I think we can pass this, but should keep an eye on the tour in mobile viewports when we start using this functionality in the plugin.

[mohitwp]

QA Update ✅

Thanks @techanvil !

• Tested story TourTooltips story
• Verified that on desktop, tablets and small mobile fourth step tooltip points to the third row in the table as expected.

Tablet viewports

Small mobile