[Guided onboarding] Add error handling to the header button #146437
Assignees
Labels
enhancement
New value added to drive a business result
Team:Journey/Onboarding
Platform Journey Onboarding team
v8.7.0
Comments
yuliacech
added
enhancement
|
Pinging @elastic/platform-onboarding (Team:Journey/Onboarding) |
2 tasks
yuliacech
added a commit
that referenced
this issue
Dec 15, 2022
## Summary Fixes #146437 Fixes #139799 This PR adds a loading state indicator to the landing page when a user clicks the "view/continue guide" button. It also adds a loading indicator to the header button and to the dropdown panel (step buttons). This is implemented via a new observable in the api service `isLoading$` which is being updated every time a request is sent to the guided onboarding API. There is also a new error section in the panel that is displayed when the plugin state is `error` or the guide config is not found. _Note for copy reviewers_: Could you please have a look at the new text is in the screenshot "Error state in the panel"? ### Screenshots/screencasts #### Landing page buttons https://user-images.githubusercontent.com/6585477/207427764-a17cdc9a-1b85-4a47-aaa5-6fabc193c99e.mov Note: the loading indicator blocks individual buttons, so the user could click view one guide and before the request completes and the panel is shown, they could click to view another guide. Instead we could consider blocking all buttons at once on the landing page. #### Header button and panel https://user-images.githubusercontent.com/6585477/207428327-7465a5e3-a395-42d1-aa6b-32d339194a00.mov #### Error state in the panel <img width="535" alt="Screenshot 2022-12-15 at 15 11 04" src="https://user-images.githubusercontent.com/6585477/207883802-09e44b62-cfb3-484a-9db8-3832b1683729.png"> Note: since the api service logic prevents it from sending multiple requests once the plugin state or guide config has been initialized from the backend, the user can't retry the request. That is why the button in the error panel reloads the page. ### How to test I recommend using [tweak](https://tweak-extension.com/) browser extension to simulate errors in API requests. Here are 2 requests I'm mocking for the tests: <img width="778" alt="Screenshot 2022-12-13 at 20 54 33" src="https://user-images.githubusercontent.com/6585477/207431207-03eb71c0-60b0-4d9f-ad30-0ecc092707ac.png"> <img width="782" alt="Screenshot 2022-12-13 at 20 52 02" src="https://user-images.githubusercontent.com/6585477/207430965-7f2bb370-cc43-459e-ab14-bfc92ce504dd.png"> ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios Co-authored-by: kibanamachine <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
In #145728 we added an error status to the guided onboarding plugin. We need to add an indicator to the UI to inform the user that an error occurred when loading the plugin state from the backend.
The text was updated successfully, but these errors were encountered: