[Guided onboarding] Implement quit guide functionality #142542

alisonelizabeth · 2022-10-04T00:07:17Z

This PR implements the "Exit setup guide" functionality in the guide dropdown panel. Once the user confirms to quit a guide, an API request is made to delete the SO that is storing the guide's state.

Fixes #139804

How to test

Enable guided onboarding via your kibana.dev.yml file: guidedOnboarding.ui: true
Start up Kibana with the example plugins enabled: yarn start --run-examples
Navigate to /app/guidedOnboardingExample
Click the "Start search guide" button to trigger the guide
Click the "Quit setup guide" link at the button of the dropdown panel and verify modal displays.
Confirm clicking "Cancel" or the "x" icon closes the modal and maintains the guide state.
Confirm clicking "Quit guide" exits the guide. The Setup guide button should be disabled (behavior will change once [Guided onboarding] Setup guide button show/hide behavior #141129 is implemented). Also, if you navigate back to /app/guidedOnboardingExample the Search guide should say "Continue".

Screenshots

// Loading state while API request is in progress

gchaps · 2022-10-04T20:57:51Z

@kellyemurphy can you please review the copy in this PR?

kellyemurphy · 2022-10-04T21:05:09Z

src/plugins/guided_onboarding/public/components/quit_guide_modal.tsx

+      setIsDeleting(false);
+      notifications.toasts.addError(error, {
+        title: i18n.translate('guidedOnboarding.quitGuideModal.errorToastTitle', {
+          defaultMessage: 'There was an error quitting the guide. Please try again.',


Do we want them to try again right away or should they wait a moment?

Hmm... good question. I suppose it depends on the actual error. Do we have general guidelines around error messages when an API request fails?

The error message guidance that we've provided the platform (cloud) team in the past is that we want to A. tell them what happened, B. tell them what they can do about it, and C. only use please when we are asking for their patience. This message meets those guidelines, but it's just a matter of timing.

src/plugins/guided_onboarding/public/components/quit_guide_modal.tsx

…al.tsx Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co>

…-ref HEAD~1..HEAD --fix'

…ng/quit_modal

elasticmachine · 2022-10-05T15:59:46Z

Pinging @elastic/platform-onboarding (Team:Journey/Onboarding)

cindychangy

Thanks @alisonelizabeth, LGTM!

yuliacech

Thanks a lot for implementing this functionality, @alisonelizabeth!
The UI changes LGTM but I'm not sure if we should delete the progress of the guide though. I thought when the use quits the guide, the state of the guided onboarding is set to something like "inactive" so that we know that the button is not shown in the header anymore. But if the user comes back to the landing page, they can see their previous progress on all guides. And they could continue a guide from the step where they left.
If we delete the state, I'm not sure how we would handle when the user comes back to the landing page and tries to restart a guide, wdyt?

alisonelizabeth · 2022-10-06T16:58:35Z

The UI changes LGTM but I'm not sure if we should delete the progress of the guide though. I thought when the use quits the guide, the state of the guided onboarding is set to something like "inactive" so that we know that the button is not shown in the header anymore. But if the user comes back to the landing page, they can see their previous progress on all guides. And they could continue a guide from the step where they left.
If we delete the state, I'm not sure how we would handle when the user comes back to the landing page and tries to restart a guide, wdyt?

That's a great question. @osmanis @cindychangy @bojanasan can you weigh in here? Based on the copy ("Quit this guide and discard progress?"), I thought the state would be discarded. However, I can't seem to find that in the design spec, so I might have made an assumption there 😅. If we do want to preserve the state, we should probably tweak the copy.

cindychangy · 2022-10-10T08:53:36Z

Good catch, @yuliacech is correct that when a user quits the guide - it should save their state. We have a page on the prototype to show this situation. If a user re-visits the landing page they should see their progress of all the guides, and the buttons will show different text based on that ("View guide", "Continue"...).

@alisonelizabeth: I agree given this, the copy should be tweaked as "discard progress" might be confusing if we are saving their state. @kellyemurphy do you have a suggestion on how to best tweak the title message: "Quit this guide and discard progress?".

…ng/quit_modal

alisonelizabeth · 2022-10-10T13:35:13Z

Thanks @cindychangy! For now, I've changed the modal title to simply: "Quit this guide?". @kellyemurphy let me know if you'd like me to make any further changes.

@yuliacech would you mind taking another look when you have time? I updated the functionality via dc79bce.

kibana-ci · 2022-10-10T14:32:56Z

💚 Build Succeeded

Buildkite Build
Commit: dc79bce

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`guidedOnboarding`	16	17	+1

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`guidedOnboarding`	16.6KB	17.6KB	+1.0KB

History

💛 Build #78365 was flaky 8e59be9
💚 Build #78189 succeeded d45c83d
💚 Build #78106 succeeded 0577a89
💔 Build #78061 failed c5a1fb4
💚 Build #77768 succeeded ae79b74

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

yuliacech

Thanks a lot, @alisonelizabeth! Latest changes LGTM 👍

alisonelizabeth · 2022-10-10T16:26:04Z

I'm going to go ahead and merge this PR. I can follow-up with a separate PR if there are any additional copy changes.

create quit modal component

ae79b74

alisonelizabeth added release_note:skip Skip the PR/issue when compiling release notes Team:Journey/Onboarding Platform Journey Onboarding team labels Oct 4, 2022

alisonelizabeth added 2 commits October 4, 2022 13:46

add delete api

c5a1fb4

add tests

0577a89

gchaps added the ui-copy Review of UI copy with docs team is recommended label Oct 4, 2022

kellyemurphy reviewed Oct 4, 2022

View reviewed changes

src/plugins/guided_onboarding/public/components/quit_guide_modal.tsx Outdated Show resolved Hide resolved

kellyemurphy reviewed Oct 4, 2022

View reviewed changes

src/plugins/guided_onboarding/public/components/quit_guide_modal.tsx Outdated Show resolved Hide resolved

alisonelizabeth and others added 6 commits October 4, 2022 21:10

Update src/plugins/guided_onboarding/public/components/quit_guide_mod…

d529025

…al.tsx Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co>

Update src/plugins/guided_onboarding/public/components/quit_guide_mod…

ba4036f

…al.tsx Co-authored-by: Kelly Murphy <kelly.murphy@elastic.co>

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

d45c83d

…-ref HEAD~1..HEAD --fix'

Merge branch 'main' of github.com:elastic/kibana into guided_onboardi…

976c02d

…ng/quit_modal

cleanup

57dcbcc

fix tests

8e59be9

alisonelizabeth marked this pull request as ready for review October 5, 2022 15:24

alisonelizabeth requested a review from a team as a code owner October 5, 2022 15:24

alisonelizabeth requested review from yuliacech and cindychangy October 5, 2022 15:24

cindychangy approved these changes Oct 6, 2022

View reviewed changes

yuliacech reviewed Oct 6, 2022

View reviewed changes

alisonelizabeth added 2 commits October 10, 2022 08:40

Merge branch 'main' of github.com:elastic/kibana into guided_onboardi…

e0a705f

…ng/quit_modal

address review feedback

dc79bce

yuliacech approved these changes Oct 10, 2022

View reviewed changes

alisonelizabeth merged commit 32d912e into elastic:main Oct 10, 2022

alisonelizabeth deleted the guided_onboarding/quit_modal branch October 10, 2022 16:26

kibanamachine added v8.6.0 backport:skip This commit does not require backporting labels Oct 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Guided onboarding] Implement quit guide functionality #142542

[Guided onboarding] Implement quit guide functionality #142542

alisonelizabeth commented Oct 4, 2022 •

edited

Loading

gchaps commented Oct 4, 2022

kellyemurphy Oct 4, 2022

alisonelizabeth Oct 5, 2022 •

edited

Loading

kellyemurphy Oct 5, 2022

elasticmachine commented Oct 5, 2022

cindychangy left a comment

yuliacech left a comment

alisonelizabeth commented Oct 6, 2022 •

edited

Loading

cindychangy commented Oct 10, 2022 •

edited

Loading

alisonelizabeth commented Oct 10, 2022

kibana-ci commented Oct 10, 2022

yuliacech left a comment

alisonelizabeth commented Oct 10, 2022

[Guided onboarding] Implement quit guide functionality #142542

[Guided onboarding] Implement quit guide functionality #142542

Conversation

alisonelizabeth commented Oct 4, 2022 • edited Loading

How to test

Screenshots

gchaps commented Oct 4, 2022

kellyemurphy Oct 4, 2022

Choose a reason for hiding this comment

alisonelizabeth Oct 5, 2022 • edited Loading

Choose a reason for hiding this comment

kellyemurphy Oct 5, 2022

Choose a reason for hiding this comment

elasticmachine commented Oct 5, 2022

cindychangy left a comment

Choose a reason for hiding this comment

yuliacech left a comment

Choose a reason for hiding this comment

alisonelizabeth commented Oct 6, 2022 • edited Loading

cindychangy commented Oct 10, 2022 • edited Loading

alisonelizabeth commented Oct 10, 2022

kibana-ci commented Oct 10, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Page load bundle

History

yuliacech left a comment

Choose a reason for hiding this comment

alisonelizabeth commented Oct 10, 2022

alisonelizabeth commented Oct 4, 2022 •

edited

Loading

alisonelizabeth Oct 5, 2022 •

edited

Loading

alisonelizabeth commented Oct 6, 2022 •

edited

Loading

cindychangy commented Oct 10, 2022 •

edited

Loading