feat(tours): Introduce a Tours API via hooks/context

[leeandher]

This PR introduces a system for building out in-product tours. It's a bit verbose, but I think it's fairly extensible and could be used elsewhere in the app, not just issue details.

Update: A lot of what I'd previously written had become outdated so I'd just check out the story book instead.

todo

• Add a stories file
• Add a test file tourContext.spec.tsx
• Add a test file components.spec.tsx

[codecov]

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
9639	1	9638	4

View the top 1 failed test(s) by shortest run time

AutofixSteps renders output stream when last step is processing

Stack Traces | 1.08s run time

Error: Unable to find an element with the text: Processing message. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
...
    at waitForWrapper (.../sentry/sentry/node_modules/@.../dom/dist/wait-for.js:163:27)
    at Object.<anonymous> (.../events/autofix/autofixSteps.spec.tsx:91:44)
    at Promise.then.completed (.../sentry/sentry/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/sentry/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at _runTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:121:9)
    at run (.../sentry/sentry/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (.../sentry/sentry/node_modules/jest-runner/build/testWorker.js:106:12)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

[codecov]

Bundle Report

Changes will increase total bundle size by 27.71kB (0.07%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
app-webpack-bundle-array-push	41.71MB	27.71kB (0.07%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: app-webpack-bundle-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
chunks/app_actionCreators_redirectToProject_tsx-app_actionCreators_sudoModal_tsx-app_components_aler-ee9c33.*.js	46 bytes	452.36kB	0.01%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_projectDetail_index_tsx.4fbb931ea409db43f854.js (New)	129.73kB	129.73kB	100.0% 🚀
entrypoints/app.js	61 bytes	109.07kB	0.06%
chunks/app_views_stories_index_tsx.*.js	150 bytes	43.4kB	0.35%
chunks/app_components_charts_eventsRequest_tsx-app_components_feedback_widget_us*kWidget_tsx--fbb1b9.ba1088eb6f169d8900c5.js (New)	31.1kB	31.1kB	100.0% 🚀
chunks/app_components_tours_tour_stories_tsx.*.js (New)	27.46kB	27.46kB	100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_performance_transactionSummary-51d702.2ce80af7635308798103.js (New)	25.69kB	25.69kB	100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-feae7d.6b1947a10e02a99a849f.js (New)	24.18kB	24.18kB	100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-c5fefe.3b74299e2a3582152a61.js (New)	17.41kB	17.41kB	100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_gridEditable_sortLink_tsx-d372f4.3703bfe7b3625e1214a2.js (New)	16.21kB	16.21kB	100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-f61270.af7e2a37369ba745fc41.js (New)	13.36kB	13.36kB	100.0% 🚀
chunks/app_components_charts_lineChart_tsx-app_components_feedback_widget_us*kWidget_tsx-app_-26fc43.eedda9b175f05657db4b.js (New)	12.34kB	12.34kB	100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_projectDetail_index_tsx.552edbaab65367bd32a4.js (Deleted)	-129.73kB	0 bytes	-100.0% 🗑️
chunks/app_components_charts_eventsRequest_tsx-app_components_feedback_widget_us*kWidget_tsx--fbb1b9.cf06900e4f7fcc86a111.js (Deleted)	-31.1kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_performance_transactionSummary-51d702.aa01909c631e36113d41.js (Deleted)	-25.69kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-feae7d.cd5d875f0e4327c0c148.js (Deleted)	-24.18kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-c5fefe.dbc5cb7f824f5b39405e.js (Deleted)	-17.41kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_gridEditable_sortLink_tsx-d372f4.ce48f2b5da4beb27a438.js (Deleted)	-16.21kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-f61270.cef1f8878f1f42052bc0.js (Deleted)	-13.36kB	0 bytes	-100.0% 🗑️
chunks/app_components_charts_lineChart_tsx-app_components_feedback_widget_us*kWidget_tsx-app_-26fc43.cba87ab54956e52d7281.js (Deleted)	-12.34kB	0 bytes	-100.0% 🗑️

Files in chunks/app_actionCreators_redirectToProject_tsx-app_actionCreators_sudoModal_tsx-app_components_aler-ee9c33.*.js:

• ./app/utils/theme/theme.tsx → Total Size: 141.34kB

[malwilley]

I think this is looking great! Thanks for being so quick to respond to all the feedback @leeandher 💯

[sentry-io]

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

• ‼️ Error: Must be used within a TourContextProvider useIssueDetailsTour(issueDetailsTour.tsx) View Issue
• ‼️ Error: Must be used within a TourContextProvider useIssueDetailsTour(issueDetailsTour.tsx) View Issue
• ‼️ Error: Must be used within a TourContextProvider TourElement(components.tsx) View Issue
• ‼️ Error: Must be used within a TourContextProvider TourElement(components.tsx) View Issue
• ‼️ Error: Must be used within a TourContextProvider useIssueDetailsTour(issueDetailsTour.tsx) View Issue

_{Did you find this useful? React with a 👍 or 👎}