KQL Parse error look incorrect due to text wrapping in toast notification

[Bargs]

Kibana version: master, haven't checked if it was introduced earlier

KQL parse errors were originally developed to be displayed in the old notification area at the top of the application. This was important because the arrow pointing at the location of the error depended on the text not wrapping. At some point those errors were updated to be displayed in a toast, and now they look broken:

Per the toast guidelines in the EUI docs we should probably display an abbreviated error message in the toast with a button to display the full message including the arrow in a larger modal.

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[elasticmachine]

Pinging @elastic/kibana-app-arch (Team:AppArch)

[flash1293]

I think I fixed that as part of a different PR, will check and report back.

[lukasolson]

Just checked, this is still an issue.

[elasticmachine]

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

[kertal]

Works as expected in Discover

Seems it could be improved in Lens

Seems it could need improvement on a Dashboard (Lens and saved searches displayed here)

[kertal]

I checked if it's an easy fix, but I think just enabling newlines in the markdown component doesn't make this error message More useful

Also the used Markdown renderer is marked to be deprecated:

/** @deprecated use Markdown from @kbn/shared-ux-markdown */

Removing from @elastic/kibana-data-discovery ownership since it needs work on the embeddable rendering, that's not just a little fix

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[elasticmachine]

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

[kertal]

removing Feature:Search & Feature:KQL tags, because it's about how multi line errors are rendered

[davismcphee]

fyi, this is how we make it work in the Discover error:

white-space: break-spaces;
font-family: ${euiTheme.font.familyCode};

[stratoula]

@kertal can you help me with this? I see this in main, it should be displayed differently?

[kertal]

@stratoula I can't see if there's a newline in this example ... like here

Since the text align is left, and the newline is rendered, the last part of the error, this ascii arrow makes sense. it wouldn't if it was als rendered without newlines, and centered

[davismcphee]

@stratoula @kertal It's also necessary to use font-family: ${euiTheme.font.familyCode}; on the text to enable a monospace font, or the arrow still won't line up.

Misaligned
//()dfdsfsdf
--^

Aligned

//()dfdsfsdf
--^

[ThomThomson]

I'm not sure that this is an issue that we could fix on the Dashboard side. Aren't the errors there are surfaced on the Dashboard arising from the Lens / Saved search Embeddables?

[stratoula]

@ThomThomson have you checked maps?

[ThomThomson]

Ah hah, good call! I will swap this from feature:dashboard to feature:maps. Should be an easy fix

[davismcphee]

@ThomThomson This might not be related to Dashboard directly, but it does seem to be related to embeddables. The issue isn't with the errors themselves, it's the component displaying them which seems to be src/plugins/embeddable/public/lib/panel/embeddable_panel_error.tsx. If that component used the CSS linked in my comment, it should fix the issue on the embeddables side.