[Guided onboarding] Setup guide panel component

[alisonelizabeth]

This PR polishes the setup guide button and dropdown panel to align with latest design.

Addresses #138557, #139751

How to test

1. Start up Kibana with the example plugins enabled: yarn start --run-examples
2. Navigate to /app/guidedOnboardingExample
3. You can click the "Search" guide example to trigger the guide

What's missing

This PR is the first step to polish the setup guide component. There is additional work that will be addressed in follow-up PRs:

• "Continue" vs. "Start" button per step; the current implementation always shows the "Start" button label. We need to make changes to our state management logic before we can support this. ([Guided onboarding] "Continue" vs. "Start" button #139752)
• Conditional progress bar. We need to make changes to our state logic in order to hide the progress bar when the guide is open, but not yet started. ([Guided onboarding] Conditionally show progress bar #140978)
• "Done" state ([Guided onboarding] Support "done" state in dropdown panel #140976)
• "Exit setup guide" confirmation modal. The current link is a no-op. ([Guided onboarding] "Quit guide" functionality #139804)
• Display confetti on step completion w/ proper animation ([Guided onboarding] Display confetti on step completion #139743)
• Design improvements to completed/inactive steps ([Guided onboarding] Support inactive/completed steps #140981)

Screenshots

[alisonelizabeth]

I renamed this interface and other areas in the code to "setupGuide..." to better align with the name of the actual component. However, if you feel this causes more confusion than not (i.e., the plugin is still called guided_onboarding), I can revert this change.

[yuliacech]

Hi @alisonelizabeth, thanks a lot for cleaning up the code! Changes LGTM.
About the naming of the variables and components: I think the word "setup" is a bit confusing because for me it has something to do with the plugin setup. So for the component I'm thinking if "checklist" might be better? And for the state, for now "GuidedOnboardingState" seems clearer to me. Maybe though we could use "guided setup" in both cases instead?

[alisonelizabeth]

Thanks @yuliacech for the review!

I ended up leaving GuidedOnboardingState named as-is. I think it's out of scope for this particular PR. We can reassess as we continue working on this if it makes sense to rename or not. All the component-related work I updated to use the term "guide-" to keep it simple.

I also added some very lightweight component tests. I expect to build upon these as we continue working on this project.

[elasticmachine]

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

[alisonelizabeth]

@elasticmachine merge upstream

[cindychangy]

@alisonelizabeth: I checked this locally and overall it looks good to me 🙂, there are two things I wanted to note (please ignore if these are to be added later):

• Currently when a step is open, the other steps are not expandable when clicked, but we would like them to be. We want the user to be able to view the details of the other steps but only be able to start the current step as that one will be the only one with the start button.

• There are some custom stylings for the panel located in a global stylesheet. Sorry on my end, if that was unclear. This file has styles that control the accordion titles to be black when active and gray when inactive and the progress labels.

[alisonelizabeth]

Thanks for the feedback @cindychangy!

Currently when a step is open, the other steps are not expandable when clicked, but we would like them to be. We want the user to be able to view the details of the other steps but only be able to start the current step as that one will be the only one with the start button.

Thanks for pointing this out! I will address this in a follow-up PR. I've opened #141223 to track misc design feedback.

This file has styles that control the accordion titles to be black when active and gray when inactive and the progress labels.

👍 This should be addressed as part of #140981. Let me know if I missed anything though in the issue description.

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: abcd23a

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
guidedOnboarding	13	16	+3

Page load bundle

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

id	before	after	diff
guidedOnboarding	11.7KB	15.5KB	+3.8KB

History

• 💚 Build #74285 succeeded 7827580
• 💔 Build #74181 failed 7d9c075
• 💚 Build #74097 succeeded c48c551
• 💚 Build #73515 succeeded 838b0c3
• 💔 Build #73496 failed bac8664
• 💔 Build #73484 failed 85ee1ab

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