[Management] Highlight query in results for index pattern creation wizard

[chrisronline]

Fixes #16297

16297

This PR fixes a visual regression where we used to highlight the query within the results in the table. For example, if you query for ki and one of the results is kibana, the ki part of kibana will appear bold.

Other Fix

This PR also fixes an undocumented issue where typing in . will result in an error which isn't desired. That query is technically invalid, but there isn't a reason to show the same error as we show when the user typed in an illegal character. The fix for this warranted removing isIndexPatternQueryValid and replacing it with containsIllegalCharacters.

Previously:

Now:

Backporting

This needs to be backported to 6.2.1, but only part of the React code is in 6.2 so I'll just backport 920c59e and 2416dd8

/cc @cjcenizal

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[chrisronline]

jenkin, test this

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[jen-huang]

The fixes are as promised, but I noticed some smaller UI issues. When there are illegal characters, the "Index Pattern" label and input field border are blue instead of red. The label becomes red if I click on it. The label and border also become red if I focus away from the page (to any other window), but returns to blue once I focus on the page again. See recording from Chrome:

[chrisronline]

Nice catch @jen-huang!

It seems the focused state is overriding the error state. Is that intentional @snide or @cjcenizal ?

[cjcenizal]

@chrisronline @jen-huang Yes, this is intentional. For accessibility, the focused state should override other states so you can always tell which part of the UI has focus.

[chrisronline]

Thanks for clarifying @cjcenizal!

[jen-huang]

LGTM after the clarifications 😸

[chrisronline]

Backport

6.x: 4b04332