[ES|QL] Improve error messages

[andreadelrio]

The usability testing lead by @alexmarhaba (from Nov 2023 to Jan 2024) found that the error messages for ES|QL are unconstructive and difficult to read. This is due to content, visual design and visual hierarchy issues. More details of some of the issues identified so far follow:

1. Key information is buried in text
2. Vague title occupies a lot of space
3. “View details” button often shows repeated information (up to three times)
4. Opportunities for helpful suggestions missed
5. For non-fatal errors (such as Unknown column) the prominence of the danger message box (EuiEmptyPrompt) and its generic title might lead users to think they’ve hit a fatal error. This can be quite confusing for them especially as they're getting familiar with the language.

🔜 Design suggestions to follow

[elasticmachine]

Pinging @elastic/kibana-visualizations (Team:Visualizations)

[elasticmachine]

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

[stratoula]

Thanx @andreadelrio for creating this after our discussion! Yes I think a redesign on our error strategy will be beneficial for Discover and the ES|QL editor.I am pinging both teams here as I feel is a common effort task!

If we find error messages coming from ES that need changes, I will talk with the team to take care of them.

[elasticmachine]

Pinging @elastic/kibana-esql (Team:ESQL)

[andreadelrio]

As discussed in our bi-weekly sync, there are several technical limitations to improve these error messages and we don't know when there'll be bandwidth to prioritize this. Given this, below is a suggestion with relatively small changes to improve this in the short term. Proposal

Alternative layout (let's try both and see what feels better)

• [ ] Use a EuiCallOut in small size right below the editor instead of EuiEmptyPrompt.
• [ ] If possible, use EuiCode to format keywords. This will help users parse errors.
• [ ] Remove the field list when there’s an error.
• [ ] Remove “View details” button.

[!IMPORTANT] The above suggestion is only for errors like mismatch input, unknown column or unknown function. For errors such as code 502 it is recommended we continue using EuiEmptyPrompt. In all error scenarios, we should stop showing the field list.

[!NOTE] A Figma file with a complete inventory of common ES|QL errors as well as mid-term and long-term suggestions can be found here.