[Spacetime] [Dashboard] Add tour to Dashboard

[Heenawter]

Closes https://github.com/elastic/kibana-team/issues/506

Summary

In our previous Spacetime project, the HELP! team worked on adding a tour to Discover - however, as part of this, we found some limitations with the old EUITour component. Since these issues are now more-or-less resolved, as part of our new Spacetime project, the HELP! team decided to continue this work and add a tour to Dashboard.

View mode tour

The first thing we wanted to do was highlight the Edit button when the user is in View mode - in user testing, it was found that users often didn't know that they had to hit this button in order to start making changes. This is what we consider to be our single-step view mode tour, and it will be started automatically when the user first opens any dashboard in View mode:

2022-04-29_DashboardViewTour.mp4

Note that there are two ways that this tour can be dismissed:

1. The user hits the "Close tour" button at the bottom of the callout or
2. The user enters Edit mode from View mode - this is the scenario that is shown in the video above. Note that, if the user's first time opening a dashboard is in Edit mode, then they switch to View mode for the first time, they should still see the view mode tour.

Edit mode tour

The second thing we wanted to do was highlight some of the most useful features in Edit mode - this is a multi-step tour that will start automatically when the user first opens any dashboard in Edit mode:

2022-04-29_DashboardEditTour.mp4

Things to consider

• We might want certain actions to trigger the tour progressing to the next step - for example, for step one of the Edit mode tour, we could automatically progress to the next step once the user adds a new visualization. However, the time constraints of this project meant I couldn't tackle this - for now, only the View mode tour has a special way of progressing.
• Note that step two of the View mode tour requires there to be at least one panel so that the tour can target the first gear icon that it sees - because of this, if there are no panels present when the user clicks "Next" on step one, they will automatically be jumped to step three.
• The same logic applies to the controls button - if the controls button is not present (because they do not have the new controls enabled), the footer on the fourth step will instead say "End tour" and the last step will be skipped.

Collaborators

@andreadelrio @gchaps @KOTungseth @teresaalvarezsoler

Checklist

Delete any items that are not applicable to this PR.

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[kibana-ci]

💔 Build Failed

• Buildkite Build
• Commit: c6def54
• Interpreting CI Failures
• Storybooks Preview
• Webpack Bundle Analyzer

Failed CI Steps

• Default CI Group #4
• Default CI Group #4
• Default CI Group #16
• Default CI Group #16
• OSS CI Group #2
• OSS CI Group #2
• OSS CI Group #3
• OSS CI Group #3
• OSS CI Group #4
• OSS CI Group #4
• OSS CI Group #10
• OSS CI Group #10
• OSS Firefox Tests
• OSS Firefox Tests
• Linting

Test Failures

• [job] [logs] OSS CI Group #4 / dashboard app using legacy data dashboard panel context menu saved search object edit menu "before all" hook for "should be one panel on dashboard"
• [job] [logs] OSS CI Group #4 / dashboard app using legacy data dashboard panel context menu saved search object edit menu "before all" hook for "should be one panel on dashboard"
• [job] [logs] OSS CI Group #10 / dashboard elements dashboard elements ciGroup10 Controls Dashboard options list integration Interactions between options list and dashboard Options List dashboard validation Can mark selections invalid with Query
• [job] [logs] OSS CI Group #10 / dashboard elements dashboard elements ciGroup10 Controls Dashboard options list integration Interactions between options list and dashboard Options List dashboard validation Can mark selections invalid with Query
• [job] [logs] Default CI Group #16 / lens app lens table on dashboard should sort a table by column in dashboard edit mode
• [job] [logs] Default CI Group #16 / lens app lens table on dashboard should sort a table by column in dashboard edit mode
• [job] [logs] Default CI Group #4 / lens app TSVB to Lens Dashboard to TSVB to Lens should convert a by reference TSVB viz to a Lens viz
• [job] [logs] Default CI Group #4 / lens app TSVB to Lens Dashboard to TSVB to Lens should convert a by reference TSVB viz to a Lens viz

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
dashboard	266	271	+5

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
dashboard	301.4KB	311.3KB	+9.9KB

History

• 💔 Build #41545 failed 9c5f98642d6f4eda597294734f0924206a2568ae
• 💔 Build #41261 failed 278ac86e2f0d97ea605322c80f1b428379532dd3
• 💔 Build #41229 failed b3e5e15e676647ae1037c2358d58c43670703de5
• 💔 Build #41022 failed 2e6e65435675da28fdde873e97f1c6efe1f057fe

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @Heenawter

[Heenawter]

Continuing this effort in a cleaned up PR here: #131960 🔥