Watcher Search Breaks when using Special Character

[bhoskins7]

Kibana version: 7.16.2

Elasticsearch version: 7.16.2

Server OS version: N/A

Browser version: Chrome

Browser OS version: Latest

Original install method (e.g. download page, yum, from source, etc.): Download Page & Cloud

Describe the bug: When searching for watches in Cluster Management > Watcher using special characters (#!%$*) the page goes blank

Steps to reproduce:

1. Navigate to Cluster Management > Watcher
2. Search a watch using a special character in UI
3. Hit Enter

Expected behavior:

Screenshots (if relevant):

[elasticmachine]

Pinging @elastic/platform-deployment-management (Team:Deployment Management)

[octavioranieri-zz]

It also fails when searching for anything that starts with or which is interpreted as an operator and throws the following in the console.

kbn-ui-shared-deps-npm.dll.js:447 Uncaught e {message: 'To use OR in a text search, put it inside quotes: …close the words in parenthesis: (foo:bar or bar).', expected: null, found: null, location: {…}, name: 'SyntaxError', …}

The workaround for that is to paste the word directly instead of typing in the search bar.

Below example of searching for "orthopedic".

[AndrewMcQuerry]

Same issue observed on 7.16.3 and 8.1.0 as well.

All of the following special characters seem to trigger this uncaught exception.

! @ # $ % ^ & + = [ ] { } ; ' " , ? < > \ |

{
    "message": "Expected \"(\", \"-\", \"is:\", end of input, field, term, or whitespace but \"|\" found.",
    "expected": [
        {
            "type": "other",
            "description": "whitespace"
        },
        {
            "type": "other",
            "description": "whitespace"
        },
        {
            "type": "literal",
            "text": "-",
            "ignoreCase": false
        },
        {
            "type": "other",
            "description": "whitespace"
        },
        {
            "type": "literal",
            "text": "(",
            "ignoreCase": false
        },
        {
            "type": "other",
            "description": "whitespace"
        },
        {
            "type": "literal",
            "text": "-",
            "ignoreCase": false
        },
        {
            "type": "other",
            "description": "whitespace"
        },
        {
            "type": "literal",
            "text": "is:",
            "ignoreCase": false
        },
        {
            "type": "other",
            "description": "field"
        },
        {
            "type": "other",
            "description": "whitespace"
        },
        {
            "type": "literal",
            "text": "-",
            "ignoreCase": false
        },
        {
            "type": "other",
            "description": "whitespace"
        },
        {
            "type": "other",
            "description": "term"
        },
        {
            "type": "other",
            "description": "whitespace"
        },
        {
            "type": "end"
        }
    ],
    "found": "|",
    "location": {
        "start": {
            "offset": 0,
            "line": 1,
            "column": 1
        },
        "end": {
            "offset": 1,
            "line": 1,
            "column": 2
        }
    },
    "name": "SyntaxError"
}

[hp0620]

Same issue reported in 8.7.1 as well.

Special Character searches returns a blank page.

Screen.Recording.2023-06-21.at.7.40.29.PM.mov

[alisonelizabeth]

Related improvement in EUI: elastic/eui#7175