[Uptime] Convert kuery bar to ts (#70310)

Co-authored-by: Elastic Machine <[email protected]>

x-pack/plugins/uptime/public/components/overview/alerts/__tests__/alert_monitor_status.test.tsx

@@ -17,10 +17,6 @@ describe('alert monitor status component', () => {
         timerangeUnit: 'h',
         timerangeCount: 21,
       },
-      autocomplete: {
-        addQuerySuggestionProvider: jest.fn(),
-        getQuerySuggestions: jest.fn(),
-      },
       enabled: true,
       hasFilters: false,
       isOldAlert: true,
@@ -45,12 +41,6 @@ describe('alert monitor status component', () => {
           />
           <KueryBar
             aria-label="Input that allows filtering criteria for the monitor status alert"
-            autocomplete={
-              Object {
-                "addQuerySuggestionProvider": [MockFunction],
-                "getQuerySuggestions": [MockFunction],
-              }
-            }
             data-test-subj="xpack.uptime.alerts.monitorStatus.filterBar"
             defaultKuery="monitor.id: foo"
             shouldUpdateUrl={false}

x-pack/plugins/uptime/public/components/overview/alerts/alert_monitor_status.tsx

@@ -7,7 +7,6 @@
 import React, { useState } from 'react';
 import { EuiCallOut, EuiSpacer, EuiHorizontalRule } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { DataPublicPluginSetup } from 'src/plugins/data/public';
 import * as labels from './translations';
 import { FiltersExpressionSelectContainer, StatusExpressionSelect } from './monitor_expressions';
 import { AddFilterButton } from './add_filter_btn';
@@ -17,7 +16,6 @@ import { KueryBar } from '..';
 
 export interface AlertMonitorStatusProps {
   alertParams: { [key: string]: any };
-  autocomplete: DataPublicPluginSetup['autocomplete'];
   enabled: boolean;
   hasFilters: boolean;
   isOldAlert: boolean;
@@ -57,7 +55,6 @@ export const AlertMonitorStatusComponent: React.FC<AlertMonitorStatusProps> = (p
 
       <KueryBar
         aria-label={labels.ALERT_KUERY_BAR_ARIA}
-        autocomplete={props.autocomplete}
         defaultKuery={alertParams.search}
         shouldUpdateUrl={shouldUpdateUrl}
         updateDefaultKuery={(value: string) => setAlertParams('search', value)}

x-pack/plugins/uptime/public/components/overview/alerts/alerts_containers/alert_monitor_status.tsx

@@ -7,7 +7,6 @@
 import React, { useMemo, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
-import { DataPublicPluginSetup } from 'src/plugins/data/public';
 import { isRight } from 'fp-ts/lib/Either';
 import {
   selectMonitorStatusAlert,
@@ -32,7 +31,6 @@ import { useUpdateKueryString } from '../../../../hooks';
 
 interface Props {
   alertParams: { [key: string]: any };
-  autocomplete: DataPublicPluginSetup['autocomplete'];
   enabled: boolean;
   numTimes: number;
   setAlertParams: (key: string, value: any) => void;
@@ -43,7 +41,6 @@ interface Props {
 }
 
 export const AlertMonitorStatus: React.FC<Props> = ({
-  autocomplete,
   enabled,
   numTimes,
   setAlertParams,
@@ -122,7 +119,6 @@ export const AlertMonitorStatus: React.FC<Props> = ({
   return (
     <AlertMonitorStatusComponent
       alertParams={alertParams}
-      autocomplete={autocomplete}
       enabled={enabled}
       hasFilters={!!overviewFilters?.filters}
       isOldAlert={isOldAlert}

x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar.tsx

@@ -10,17 +10,18 @@ import { EuiCallOut } from '@elastic/eui';
 import styled from 'styled-components';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Typeahead } from './typeahead';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { useSearchText, useUrlParams } from '../../../hooks';
 import {
   esKuery,
   IIndexPattern,
   QuerySuggestion,
-  DataPublicPluginSetup,
 } from '../../../../../../../src/plugins/data/public';
 import { useIndexPattern } from './use_index_pattern';
 
 const Container = styled.div`
   margin-bottom: 4px;
+  position: relative;
 `;
 
 interface State {
@@ -35,7 +36,6 @@ function convertKueryToEsQuery(kuery: string, indexPattern: IIndexPattern) {
 
 interface Props {
   'aria-label': string;
-  autocomplete: DataPublicPluginSetup['autocomplete'];
   defaultKuery?: string;
   'data-test-subj': string;
   shouldUpdateUrl?: boolean;
@@ -44,7 +44,6 @@ interface Props {
 
 export function KueryBar({
   'aria-label': ariaLabel,
-  autocomplete: autocompleteService,
   defaultKuery,
   'data-test-subj': dataTestSubj,
   shouldUpdateUrl,
@@ -53,6 +52,12 @@ export function KueryBar({
   const { loading, index_pattern: indexPattern } = useIndexPattern();
   const { updateSearchText } = useSearchText();
 
+  const {
+    services: {
+      data: { autocomplete },
+    },
+  } = useKibana();
+
   const [state, setState] = useState<State>({
     suggestions: [],
     isLoadingIndexPattern: true,
@@ -80,7 +85,7 @@ export function KueryBar({
 
   const indexPatternMissing = loading && !indexPattern;
 
-  async function onChange(inputValue: string, selectionStart: number) {
+  async function onChange(inputValue: string, selectionStart: number | null) {
     if (!indexPattern) {
       return;
     }
@@ -94,7 +99,7 @@ export function KueryBar({
 
     try {
       const suggestions = (
-        (await autocompleteService.getQuerySuggestions({
+        (await autocomplete.getQuerySuggestions({
           language: 'kuery',
           indexPatterns: [indexPattern],
           query: inputValue,
@@ -111,8 +116,7 @@ export function KueryBar({
             },
           ],
         })) || []
-      ).filter((suggestion) => !startsWith(suggestion.text, 'span.'));
-
+      ).filter((suggestion: QuerySuggestion) => !startsWith(suggestion.text, 'span.'));
       if (currentRequest !== currentRequestCheck) {
         return;
       }
@@ -155,8 +159,8 @@ export function KueryBar({
   return (
     <Container>
       <Typeahead
-        aria-label={ariaLabel}
-        data-test-subj={dataTestSubj}
+        ariaLabel={ariaLabel}
+        dataTestSubj={dataTestSubj}
         disabled={indexPatternMissing}
         isLoading={isLoadingSuggestions || loading}
         initialValue={defaultKuery || kuery}