[8.10] [ML] Fix query bar not switching from KQL to Lucene and vice v…

…ersa in Anomaly explorer (#163625) (#164247)

# Backport

This will backport the following commits from `main` to `8.10`:
- [[ML] Fix query bar not switching from KQL to Lucene and vice versa in
Anomaly explorer
(#163625)](#163625)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Quynh Nguyen
(Quinn)","email":"43350163+qn895@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-08-18T16:52:25Z","message":"[ML]
Fix query bar not switching from KQL to Lucene and vice versa in Anomaly
explorer
(#163625)","sha":"5cfb693701a3b26d3ea9c4879707135cf23a1e84","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix",":ml","Feature:Anomaly
Detection","v8.10.0","v8.11.0"],"number":163625,"url":"#163625
Fix query bar not switching from KQL to Lucene and vice versa in Anomaly
explorer
(#163625)","sha":"5cfb693701a3b26d3ea9c4879707135cf23a1e84"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"main","label":"v8.10.0","labelRegex":"^v8.10.0$","isSourceBranch":true,"state":"MERGED","url":"#163625
Fix query bar not switching from KQL to Lucene and vice versa in Anomaly
explorer
(#163625)","sha":"5cfb693701a3b26d3ea9c4879707135cf23a1e84"}},{"branch":"8.11","label":"v8.11.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Quynh Nguyen (Quinn) <43350163+qn895@users.noreply.github.com>

x-pack/plugins/ml/public/application/explorer/components/explorer_query_bar/explorer_query_bar.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { FC, useState, useEffect } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import { EuiCode, EuiInputPopover } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { fromKueryExpression, luceneStringToDsl, toElasticsearchQuery } from '@kbn/es-query';
@@ -78,23 +78,16 @@ export function getKqlQueryValues({
 }
 
 function getInitSearchInputState({
-  filterActive,
   queryString,
+  searchInput,
 }: {
-  filterActive: boolean;
   queryString?: string;
+  searchInput?: Query;
 }) {
-  if (queryString !== undefined && filterActive === true) {
-    return {
-      language: SEARCH_QUERY_LANGUAGE.KUERY,
-      query: queryString,
-    };
-  } else {
-    return {
-      query: '',
-      language: DEFAULT_QUERY_LANG,
-    };
-  }
+  return {
+    language: searchInput?.language ?? DEFAULT_QUERY_LANG,
+    query: queryString ?? '',
+  };
 }
 
 interface ExplorerQueryBarProps {
@@ -129,18 +122,17 @@ export const ExplorerQueryBar: FC<ExplorerQueryBarProps> = ({
   } = services;
 
   // The internal state of the input query bar updated on every key stroke.
-  const [searchInput, setSearchInput] = useState<Query>(
-    getInitSearchInputState({ filterActive, queryString })
-  );
+  const [searchInput, setSearchInput] = useState<Query>(getInitSearchInputState({ queryString }));
   const [queryErrorMessage, setQueryErrorMessage] = useState<QueryErrorMessage | undefined>(
     undefined
   );
 
   useEffect(
     function updateSearchInputFromFilter() {
-      setSearchInput(getInitSearchInputState({ filterActive, queryString }));
+      setSearchInput(getInitSearchInputState({ queryString, searchInput }));
     },
-    [filterActive, queryString]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [queryString, searchInput.language]
   );
 
   const searchChangeHandler = (query: Query) => {