[7.x] [Logs UI] Replace custom auto-completion component with shared QueryStringInput (#85973) (#86431)

Backports the following commits to 7.x:
 - [Logs UI] Replace custom auto-completion component with shared QueryStringInput (#85973)

x-pack/plugins/infra/public/apps/common_providers.tsx

@@ -7,7 +7,10 @@
 import { ApolloClient } from 'apollo-client';
 import { AppMountParameters, CoreStart } from 'kibana/public';
 import React, { useMemo } from 'react';
-import { useUiSetting$ } from '../../../../../src/plugins/kibana_react/public';
+import {
+  useUiSetting$,
+  KibanaContextProvider,
+} from '../../../../../src/plugins/kibana_react/public';
 import { EuiThemeProvider } from '../../../observability/public';
 import { TriggersAndActionsUIPublicPluginStart } from '../../../triggers_actions_ui/public';
 import { createKibanaContextForPlugin } from '../hooks/use_kibana';
@@ -16,21 +19,26 @@ import { ApolloClientContext } from '../utils/apollo_context';
 import { HeaderActionMenuProvider } from '../utils/header_action_menu_provider';
 import { NavigationWarningPromptProvider } from '../utils/navigation_warning_prompt';
 import { TriggersActionsProvider } from '../utils/triggers_actions_context';
+import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 
 export const CommonInfraProviders: React.FC<{
   apolloClient: ApolloClient<{}>;
+  appName: string;
+  storage: Storage;
   triggersActionsUI: TriggersAndActionsUIPublicPluginStart;
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
-}> = ({ apolloClient, children, triggersActionsUI, setHeaderActionMenu }) => {
+}> = ({ apolloClient, children, triggersActionsUI, setHeaderActionMenu, appName, storage }) => {
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
   return (
     <TriggersActionsProvider triggersActionsUI={triggersActionsUI}>
       <ApolloClientContext.Provider value={apolloClient}>
         <EuiThemeProvider darkMode={darkMode}>
-          <HeaderActionMenuProvider setHeaderActionMenu={setHeaderActionMenu}>
-            <NavigationWarningPromptProvider>{children}</NavigationWarningPromptProvider>
-          </HeaderActionMenuProvider>
+          <DataUIProviders appName={appName} storage={storage}>
+            <HeaderActionMenuProvider setHeaderActionMenu={setHeaderActionMenu}>
+              <NavigationWarningPromptProvider>{children}</NavigationWarningPromptProvider>
+            </HeaderActionMenuProvider>
+          </DataUIProviders>
         </EuiThemeProvider>
       </ApolloClientContext.Provider>
     </TriggersActionsProvider>
@@ -52,3 +60,9 @@ export const CoreProviders: React.FC<{
     </KibanaContextProviderForPlugin>
   );
 };
+
+const DataUIProviders: React.FC<{ appName: string; storage: Storage }> = ({
+  appName,
+  children,
+  storage,
+}) => <KibanaContextProvider services={{ appName, storage }}>{children}</KibanaContextProvider>;

x-pack/plugins/infra/public/apps/logs_app.tsx

@@ -11,6 +11,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
 import { AppMountParameters } from '../../../../../src/core/public';
+import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 import '../index.scss';
 import { NotFoundPage } from '../pages/404';
 import { LinkToLogsPage } from '../pages/link_to/link_to_logs';
@@ -26,6 +27,7 @@ export const renderApp = (
   { element, history, setHeaderActionMenu }: AppMountParameters
 ) => {
   const apolloClient = createApolloClient(core.http.fetch);
+  const storage = new Storage(window.localStorage);
 
   prepareMountElement(element);
 
@@ -33,6 +35,7 @@ export const renderApp = (
     <LogsApp
       apolloClient={apolloClient}
       core={core}
+      storage={storage}
       history={history}
       plugins={plugins}
       setHeaderActionMenu={setHeaderActionMenu}
@@ -51,15 +54,18 @@ const LogsApp: React.FC<{
   history: History<unknown>;
   plugins: InfraClientStartDeps;
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
-}> = ({ apolloClient, core, history, plugins, setHeaderActionMenu }) => {
+  storage: Storage;
+}> = ({ apolloClient, core, history, plugins, setHeaderActionMenu, storage }) => {
   const uiCapabilities = core.application.capabilities;
 
   return (
     <CoreProviders core={core} plugins={plugins}>
       <CommonInfraProviders
         apolloClient={apolloClient}
-        triggersActionsUI={plugins.triggersActionsUi}
+        appName="Logs UI"
         setHeaderActionMenu={setHeaderActionMenu}
+        storage={storage}
+        triggersActionsUI={plugins.triggersActionsUi}
       >
         <Router history={history}>
           <Switch>

x-pack/plugins/infra/public/apps/metrics_app.tsx

@@ -11,6 +11,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
 import { AppMountParameters } from '../../../../../src/core/public';
+import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 import '../index.scss';
 import { NotFoundPage } from '../pages/404';
 import { LinkToMetricsPage } from '../pages/link_to/link_to_metrics';
@@ -28,6 +29,7 @@ export const renderApp = (
   { element, history, setHeaderActionMenu }: AppMountParameters
 ) => {
   const apolloClient = createApolloClient(core.http.fetch);
+  const storage = new Storage(window.localStorage);
 
   prepareMountElement(element);
 
@@ -38,6 +40,7 @@ export const renderApp = (
       history={history}
       plugins={plugins}
       setHeaderActionMenu={setHeaderActionMenu}
+      storage={storage}
     />,
     element
   );
@@ -53,15 +56,18 @@ const MetricsApp: React.FC<{
   history: History<unknown>;
   plugins: InfraClientStartDeps;
   setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
-}> = ({ apolloClient, core, history, plugins, setHeaderActionMenu }) => {
+  storage: Storage;
+}> = ({ apolloClient, core, history, plugins, setHeaderActionMenu, storage }) => {
   const uiCapabilities = core.application.capabilities;
 
   return (
     <CoreProviders core={core} plugins={plugins}>
       <CommonInfraProviders
         apolloClient={apolloClient}
-        triggersActionsUI={plugins.triggersActionsUi}
+        appName="Metrics UI"
         setHeaderActionMenu={setHeaderActionMenu}
+        storage={storage}
+        triggersActionsUI={plugins.triggersActionsUi}
       >
         <Router history={history}>
           <Switch>

x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx

@@ -4,16 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  EuiFieldSearch,
-  EuiFieldSearchProps,
-  EuiOutsideClickDetector,
-  EuiPanel,
-} from '@elastic/eui';
+import { EuiFieldSearch, EuiOutsideClickDetector, EuiPanel } from '@elastic/eui';
 import React from 'react';
-
-import { euiStyled } from '../../../../observability/public';
 import { QuerySuggestion } from '../../../../../../src/plugins/data/public';
+import { euiStyled } from '../../../../observability/public';
 import { composeStateUpdaters } from '../../utils/typed_react';
 import { SuggestionItem } from './suggestion_item';
 
@@ -64,7 +58,7 @@ export class AutocompleteField extends React.Component<
     return (
       <EuiOutsideClickDetector onOutsideClick={this.handleBlur}>
         <AutocompleteContainer>
-          <FixedEuiFieldSearch
+          <EuiFieldSearch
             fullWidth
             disabled={disabled}
             inputRef={this.handleChangeInputRef}
@@ -304,14 +298,6 @@ const withUnfocused = (state: AutocompleteFieldState) => ({
   isFocused: false,
 });
 
-const FixedEuiFieldSearch: React.FC<
-  React.InputHTMLAttributes<HTMLInputElement> &
-    EuiFieldSearchProps & {
-      inputRef?: (element: HTMLInputElement | null) => void;
-      onSearch: (value: string) => void;
-    }
-> = EuiFieldSearch as any;
-
 const AutocompleteContainer = euiStyled.div`
   position: relative;
 `;

x-pack/plugins/infra/public/pages/logs/stream/page_toolbar.tsx

@@ -7,21 +7,19 @@
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
-
-import { AutocompleteField } from '../../../components/autocomplete_field';
+import { Query, QueryStringInput } from '../../../../../../../src/plugins/data/public';
 import { Toolbar } from '../../../components/eui';
 import { LogCustomizationMenu } from '../../../components/logging/log_customization_menu';
+import { LogDatepicker } from '../../../components/logging/log_datepicker';
 import { LogHighlightsMenu } from '../../../components/logging/log_highlights_menu';
-import { LogHighlightsState } from '../../../containers/logs/log_highlights/log_highlights';
 import { LogTextScaleControls } from '../../../components/logging/log_text_scale_controls';
 import { LogTextWrapControls } from '../../../components/logging/log_text_wrap_controls';
-import { LogFlyout } from '../../../containers/logs/log_flyout';
-import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
 import { LogFilterState } from '../../../containers/logs/log_filter';
+import { LogFlyout } from '../../../containers/logs/log_flyout';
+import { LogHighlightsState } from '../../../containers/logs/log_highlights/log_highlights';
 import { LogPositionState } from '../../../containers/logs/log_position';
-import { WithKueryAutocompletion } from '../../../containers/with_kuery_autocompletion';
-import { LogDatepicker } from '../../../components/logging/log_datepicker';
 import { useLogSourceContext } from '../../../containers/logs/log_source';
+import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
 
 export const LogsToolbar = () => {
   const { derivedIndexPattern } = useLogSourceContext();
@@ -58,33 +56,31 @@ export const LogsToolbar = () => {
     <Toolbar>
       <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="s">
         <EuiFlexItem>
-          <WithKueryAutocompletion indexPattern={derivedIndexPattern}>
-            {({ isLoadingSuggestions, loadSuggestions, suggestions }) => (
-              <AutocompleteField
-                isLoadingSuggestions={isLoadingSuggestions}
-                isValid={isFilterQueryDraftValid}
-                loadSuggestions={loadSuggestions}
-                disabled={isStreaming}
-                onChange={(expression: string) => {
-                  setSurroundingLogsId(null);
-                  setLogFilterQueryDraft(expression);
-                }}
-                onSubmit={(expression: string) => {
-                  setSurroundingLogsId(null);
-                  applyLogFilterQuery(expression);
-                }}
-                placeholder={i18n.translate(
-                  'xpack.infra.logsPage.toolbar.kqlSearchFieldPlaceholder',
-                  { defaultMessage: 'Search for log entries… (e.g. host.name:host-1)' }
-                )}
-                suggestions={suggestions}
-                value={filterQueryDraft ? filterQueryDraft.expression : ''}
-                aria-label={i18n.translate('xpack.infra.logsPage.toolbar.kqlSearchFieldAriaLabel', {
-                  defaultMessage: 'Search for log entries',
-                })}
-              />
-            )}
-          </WithKueryAutocompletion>
+          <QueryStringInput
+            disableLanguageSwitcher={true}
+            iconType="search"
+            indexPatterns={[derivedIndexPattern]}
+            isInvalid={!isFilterQueryDraftValid}
+            onChange={(expression: Query) => {
+              if (typeof expression.query === 'string') {
+                setSurroundingLogsId(null);
+                setLogFilterQueryDraft(expression.query);
+              }
+            }}
+            onSubmit={(expression: Query) => {
+              if (typeof expression.query === 'string') {
+                setSurroundingLogsId(null);
+                applyLogFilterQuery(expression.query);
+              }
+            }}
+            placeholder={i18n.translate('xpack.infra.logsPage.toolbar.kqlSearchFieldPlaceholder', {
+              defaultMessage: 'Search for log entries… (e.g. host.name:host-1)',
+            })}
+            query={{
+              query: filterQueryDraft?.expression ?? '',
+              language: filterQueryDraft?.kind ?? 'kuery',
+            }}
+          />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <LogCustomizationMenu>

x-pack/plugins/translations/translations/ja-JP.json

@@ -9484,7 +9484,6 @@
     "xpack.infra.logsPage.noLoggingIndicesDescription": "追加しましょう！",
     "xpack.infra.logsPage.noLoggingIndicesInstructionsActionLabel": "セットアップの手順を表示",
     "xpack.infra.logsPage.noLoggingIndicesTitle": "ログインデックスがないようです。",
-    "xpack.infra.logsPage.toolbar.kqlSearchFieldAriaLabel": "ログエントリーを検索",
     "xpack.infra.logsPage.toolbar.kqlSearchFieldPlaceholder": "ログエントリーを検索中… (例: host.name:host-1)",
     "xpack.infra.metricDetailPage.awsMetricsLayout.cpuUtilSection.percentSeriesLabel": "パーセント",
     "xpack.infra.metricDetailPage.awsMetricsLayout.cpuUtilSection.sectionLabel": "CPU 使用状況",

x-pack/plugins/translations/translations/zh-CN.json

@@ -9494,7 +9494,6 @@
     "xpack.infra.logsPage.noLoggingIndicesDescription": "让我们添加一些！",
     "xpack.infra.logsPage.noLoggingIndicesInstructionsActionLabel": "查看设置说明",
     "xpack.infra.logsPage.noLoggingIndicesTitle": "似乎您没有任何日志索引。",
-    "xpack.infra.logsPage.toolbar.kqlSearchFieldAriaLabel": "搜索日志条目",
     "xpack.infra.logsPage.toolbar.kqlSearchFieldPlaceholder": "搜索日志条目……（例如 host.name:host-1）",
     "xpack.infra.metricDetailPage.awsMetricsLayout.cpuUtilSection.percentSeriesLabel": "百分比",
     "xpack.infra.metricDetailPage.awsMetricsLayout.cpuUtilSection.sectionLabel": "CPU 使用率",