Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Discover] Inline toast error message in Discover main #149488

Closed
kertal opened this issue Jan 25, 2023 · 1 comment · Fixed by #152311
Closed

[Discover] Inline toast error message in Discover main #149488

kertal opened this issue Jan 25, 2023 · 1 comment · Fixed by #152311
Assignees
@davismcphee
Labels
Feature:Discover Discover Application impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. loe:medium Medium Level of Effort Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL.

Comments

@kertal
Copy link
Member

kertal commented Jan 25, 2023 •
edited
Loading

No more toasts when there are errors in the data fetching from ES should be displayed, when there's no previous results being displayed it could look like this (similar to the current state), except the "Show error message" should not "replay" the toast, but should show the modal showing the details of the error:

Image

Image

When there are previous results, the error callout should be displayed on top of the displayed table, also there should be a link triggering the error modal:

Image

Image

The same pattern should be applied when

  • The classic table is the default table
  • The saved search embeddable is rendered on a dashboard

Context

The suggestion was given and drafted in #146242

  1. If there are multiple errors, we recommend to use icon + Popover + a number badge to show how many errors it returned with a Popover to explain those errors further with detailed reasons. [Option 1 on the screenshot]
  2. If there’s only 1 error, we could use Callout so users see the reason right away. [Option 2 on the screenshot]

Discover_-_Elastic

Also something to look out is the use of colour for error state may better be Danger colour to emphasize that is an error not warning.

Another note we would consider in the future that may involve with the  table/data grid work to determine if this is part of the sharing component potentially (or not), Option 2 appears outside of the datagrid vs. Option 1 ships within etc.

WIP, will add more info about this

Originally posted by @yiyangliu9286 in #146242 (comment)
@botelastic botelastic bot added the needs-team Issues missing a team label label Jan 25, 2023
@kertal kertal added Feature:Discover Discover Application Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. labels Jan 25, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

@botelastic botelastic bot removed the needs-team Issues missing a team label label Jan 25, 2023
@kertal kertal added impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. loe:medium Medium Level of Effort labels Jan 25, 2023
This was referenced Feb 2, 2023
Open
Closed
@lukasolson lukasolson mentioned this issue Feb 8, 2023
Closed
@davismcphee davismcphee mentioned this issue Feb 13, 2023
Closed
@kertal kertal mentioned this issue Feb 22, 2023
Closed
@davismcphee davismcphee mentioned this issue Feb 28, 2023
Merged
9 tasks
@davismcphee davismcphee mentioned this issue Mar 10, 2023
Closed
davismcphee added a commit that referenced this issue Mar 20, 2023
@davismcphee @kibanamachine
[Discover] Inline data fetching errors (#152311)
26f0f52 
## Summary

**Note: If your team's review is requested on this PR related to
notification service changes, it's likely because somewhere in your
codebase `NotificationsSetup` was being passed to a function/component
requiring `NotificationsStart` or vice versa. The interfaces were
previously identical so it didn't matter, but an additional function was
added to `NotificationsStart` in this PR that created type errors which
needed to be resolved.**

This PR updates Discover to use inline error messages for data fetching
errors instead of toasts.

For most error messages, the title and full message will be displayed
inline as well as a "Show details" button which opens the standard error
dialog. For errors which have special handling and render custom content
instead of just the error message, the custom content will be rendered
in the callout body for the "No results" state, or rendered in a popover
when clicking the "Show details" button for the banner-style error
display.

No results with regular error message:
<img width="1825" alt="no_results"
src="https://user-images.githubusercontent.com/25592674/224198715-a9131e5c-4bc6-436f-a40a-b1596d44a60c.png">

Banner-style with regular error message:
<img width="1820" alt="inline"
src="https://user-images.githubusercontent.com/25592674/223456957-20690161-3df6-4954-9a49-96a71c01b74b.png">

Banner-style with regular error message in mobile:
<img width="404" alt="inline_mobile"
src="https://user-images.githubusercontent.com/25592674/223457106-a09c3d1e-2f66-4060-9888-21edb8504d70.png">

Standard error dialog:
<img width="1363" alt="error_dialog"
src="https://user-images.githubusercontent.com/25592674/223457178-ec9c2280-4df1-444a-94c7-a8d0580a8f9e.png">

No results with overridden content:
<img width="1705" alt="no_results_override"
src="https://user-images.githubusercontent.com/25592674/224198770-fea0ed31-ce15-4c77-bcb4-4f14c696c4d4.png">

Banner-style with overridden content modal:
<img width="1368" alt="modal"
src="https://user-images.githubusercontent.com/25592674/224198816-cbbe8765-a665-472f-8542-1ac108f2c100.png">

Resolves #149488.

### Checklist

- [x] 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)
- [ ]
~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials~
- [x] [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
- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] ~Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))~
- [ ] ~If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <[email protected]>
@thomasneirynck thomasneirynck mentioned this issue Apr 10, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@davismcphee davismcphee

Labels
Feature:Discover Discover Application impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. loe:medium Medium Level of Effort Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Discover] Inline data fetching errors davismcphee/kibana
3 participants
@kertal @elasticmachine @davismcphee