Eui: [EuiSearchBar] Allow bad query string

[nickofthyme]

In kibana I am updating the advanced settings page to sync the search text to the query URL search params (https://github.com/elastic/kibana/pull/81829). This allows the URL to possibly be formatted incorrectly. Thus, running Query.parse('category:(accessibility))') will throw an error.

I am testing Query.parse before passing to EuiSearchBar and displaying a warning toast in case of an error. But it would be nice to still update the value of the search bar input element. The only workaround is to set the query to ''.

I would like to propose the query prop as a string allows an incorrectly formatted (aka _bad_) query string. Currently, passing a bad string will throw an error inside the EuiSearchBar component with no checks on the parsing failure.

https://github.com/elastic/eui/blob/05b3de41656f9e69e0517c56c5344c2b3c035b1d/src/components/search_bar/search_bar.tsx#L101-L103

[chandlerprall]

Looks like the initial state construction for EuiSearchBar needs to get a try/catch that correctly populates the query text & any error.

https://github.com/elastic/eui/blob/bca59468fda3fd29e5176d9ddd375c26b918651f/src/components/search_bar/search_bar.tsx#L122-L127

[Dishebh]

@chandlerprall, should I just pass an empty string in case if query.text is undefined?
node.js queryText: query.text | ''

Also, I'm not sure if I correctly understand the issue, @nickofthyme, can you please give an example of a _bad_ query string so I can reproduce the error you mentioned?

[nickofthyme]

@Dishebh Yeah, I think '' should be the fallback query when no Query nor string is passed to either defaultQuery or query. I'm not sure if that's already handled.

This issue is focused on the bad query. An example would be 'key:())' note the extra ) at the end.

[chandlerprall]

should I just pass an empty string in case if query.text is undefined?

Should be able to use the provided string in defaultQuery in the error state, something like:

try {
  const query = parseQuery(props.defaultQuery || props.query, props);
  this.state = {
    query,
    queryText: query.text,
    error: null,
  };
} catch(e) {
  this.state = {
    query: parseQuery(''),
    queryText: props.defaultQuery, // I believe this will error in TypeScript, need to very it is a string and still fallback to empty string
    error: e.toString(), // maybe e.message? maybe just e?
  };
}