[Security Solution] Remove filterQueryDraft in favor of SearchBar internal draft state

x-pack/plugins/security_solution/public/common/components/query_bar/index.test.tsx

@@ -182,72 +182,6 @@ describe('QueryBar ', () => {
     });
   });
 
-  describe('state', () => {
-    test('clears draftQuery when filterQueryDraft has been cleared', async () => {
-      const wrapper = await getWrapper(
-        <Proxy
-          dateRangeFrom={DEFAULT_FROM}
-          dateRangeTo={DEFAULT_TO}
-          hideSavedQuery={false}
-          indexPattern={mockIndexPattern}
-          isRefreshPaused={true}
-          filterQuery={{ query: '', language: 'kuery' }}
-          filterQueryDraft={{ expression: 'host.name', kind: 'kuery' }}
-          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-          filters={[]}
-          onChangedQuery={mockOnChangeQuery}
-          onSubmitQuery={mockOnSubmitQuery}
-          onSavedQuery={mockOnSavedQuery}
-        />
-      );
-
-      let queryInput = wrapper.find(QueryBar).find('textarea[data-test-subj="queryInput"]');
-      queryInput.simulate('change', { target: { value: 'host.name:*' } });
-
-      wrapper.update();
-      queryInput = wrapper.find(QueryBar).find('textarea[data-test-subj="queryInput"]');
-      expect(queryInput.props().children).toBe('host.name:*');
-
-      wrapper.setProps({ filterQueryDraft: null });
-      wrapper.update();
-      queryInput = wrapper.find(QueryBar).find('textarea[data-test-subj="queryInput"]');
-
-      expect(queryInput.props().children).toBe('');
-    });
-  });
-
-  describe('#onQueryChange', () => {
-    test(' is the only reference that changed when filterQueryDraft props get updated', async () => {
-      const wrapper = await getWrapper(
-        <Proxy
-          dateRangeFrom={DEFAULT_FROM}
-          dateRangeTo={DEFAULT_TO}
-          hideSavedQuery={false}
-          indexPattern={mockIndexPattern}
-          isRefreshPaused={true}
-          filterQuery={{ query: 'here: query', language: 'kuery' }}
-          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
-          filters={[]}
-          onChangedQuery={mockOnChangeQuery}
-          onSubmitQuery={mockOnSubmitQuery}
-          onSavedQuery={mockOnSavedQuery}
-        />
-      );
-      const searchBarProps = wrapper.find(SearchBar).props();
-      const onChangedQueryRef = searchBarProps.onQueryChange;
-      const onSubmitQueryRef = searchBarProps.onQuerySubmit;
-      const onSavedQueryRef = searchBarProps.onSavedQueryUpdated;
-
-      const queryInput = wrapper.find(QueryBar).find('textarea[data-test-subj="queryInput"]');
-      queryInput.simulate('change', { target: { value: 'hello: world' } });
-      wrapper.update();
-
-      expect(onChangedQueryRef).not.toEqual(wrapper.find(SearchBar).props().onQueryChange);
-      expect(onSubmitQueryRef).toEqual(wrapper.find(SearchBar).props().onQuerySubmit);
-      expect(onSavedQueryRef).toEqual(wrapper.find(SearchBar).props().onSavedQueryUpdated);
-    });
-  });
-
   describe('#onQuerySubmit', () => {
     test(' is the only reference that changed when filterQuery props get updated', async () => {
       const wrapper = await getWrapper(

x-pack/plugins/security_solution/public/common/components/query_bar/index.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { memo, useState, useEffect, useMemo, useCallback } from 'react';
+import React, { memo, useMemo, useCallback } from 'react';
 import deepEqual from 'fast-deep-equal';
 
 import {
@@ -19,7 +19,6 @@ import {
   SavedQueryTimeFilter,
 } from '../../../../../../../src/plugins/data/public';
 import { Storage } from '../../../../../../../src/plugins/kibana_utils/public';
-import { KueryFilterQuery } from '../../store';
 
 export interface QueryBarComponentProps {
   dataTestSubj?: string;
@@ -30,14 +29,13 @@ export interface QueryBarComponentProps {
   isLoading?: boolean;
   isRefreshPaused?: boolean;
   filterQuery: Query;
-  filterQueryDraft?: KueryFilterQuery;
   filterManager: FilterManager;
   filters: Filter[];
-  onChangedQuery: (query: Query) => void;
+  onChangedQuery?: (query: Query) => void;
   onSubmitQuery: (query: Query, timefilter?: SavedQueryTimeFilter) => void;
   refreshInterval?: number;
-  savedQuery?: SavedQuery | null;
-  onSavedQuery: (savedQuery: SavedQuery | null) => void;
+  savedQuery?: SavedQuery;
+  onSavedQuery: (savedQuery: SavedQuery | undefined) => void;
 }
 
 export const QueryBar = memo<QueryBarComponentProps>(
@@ -49,7 +47,6 @@ export const QueryBar = memo<QueryBarComponentProps>(
     isLoading = false,
     isRefreshPaused,
     filterQuery,
-    filterQueryDraft,
     filterManager,
     filters,
     onChangedQuery,
@@ -59,15 +56,6 @@ export const QueryBar = memo<QueryBarComponentProps>(
     onSavedQuery,
     dataTestSubj,
   }) => {
-    const [draftQuery, setDraftQuery] = useState(filterQuery);
-
-    useEffect(() => {
-      // Reset draftQuery when `Create new timeline` is clicked
-      if (filterQueryDraft == null) {
-        setDraftQuery(filterQuery);
-      }
-    }, [filterQuery, filterQueryDraft]);
-
     const onQuerySubmit = useCallback(
       (payload: { dateRange: TimeRange; query?: Query }) => {
         if (payload.query != null && !deepEqual(payload.query, filterQuery)) {
@@ -79,19 +67,11 @@ export const QueryBar = memo<QueryBarComponentProps>(
 
     const onQueryChange = useCallback(
       (payload: { dateRange: TimeRange; query?: Query }) => {
-        if (payload.query != null && !deepEqual(payload.query, draftQuery)) {
-          setDraftQuery(payload.query);
+        if (onChangedQuery && payload.query != null && !deepEqual(payload.query, filterQuery)) {
           onChangedQuery(payload.query);
         }
       },
-      [draftQuery, onChangedQuery, setDraftQuery]
-    );
-
-    const onSaved = useCallback(
-      (newSavedQuery: SavedQuery) => {
-        onSavedQuery(newSavedQuery);
-      },
-      [onSavedQuery]
+      [filterQuery, onChangedQuery]
     );
 
     const onSavedQueryUpdated = useCallback(
@@ -111,7 +91,7 @@ export const QueryBar = memo<QueryBarComponentProps>(
           language: savedQuery.attributes.query.language,
         });
         filterManager.setFilters([]);
-        onSavedQuery(null);
+        onSavedQuery(undefined);
       }
     }, [filterManager, onSubmitQuery, onSavedQuery, savedQuery]);
 
@@ -125,8 +105,6 @@ export const QueryBar = memo<QueryBarComponentProps>(
     const CustomButton = <>{null}</>;
     const indexPatterns = useMemo(() => [indexPattern], [indexPattern]);
 
-    const searchBarProps = savedQuery != null ? { savedQuery } : {};
-
     return (
       <SearchBar
         customSubmitButton={CustomButton}
@@ -136,12 +114,12 @@ export const QueryBar = memo<QueryBarComponentProps>(
         indexPatterns={indexPatterns}
         isLoading={isLoading}
         isRefreshPaused={isRefreshPaused}
-        query={draftQuery}
+        query={filterQuery}
         onClearSavedQuery={onClearSavedQuery}
         onFiltersUpdated={onFiltersUpdated}
         onQueryChange={onQueryChange}
         onQuerySubmit={onQuerySubmit}
-        onSaved={onSaved}
+        onSaved={onSavedQuery}
         onSavedQueryUpdated={onSavedQueryUpdated}
         refreshInterval={refreshInterval}
         showAutoRefreshOnly={false}
@@ -152,8 +130,9 @@ export const QueryBar = memo<QueryBarComponentProps>(
         showSaveQuery={true}
         timeHistory={new TimeHistory(new Storage(localStorage))}
         dataTestSubj={dataTestSubj}
-        {...searchBarProps}
+        savedQuery={savedQuery}
       />
     );
   }
 );
+QueryBar.displayName = 'QueryBar';

x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx

@@ -149,10 +149,6 @@ const state: State = {
             serializedQuery:
               '{"bool":{"should":[{"exists":{"field":"host.name"}}],"minimum_should_match":1}}',
           },
-          filterQueryDraft: {
-            kind: 'kuery',
-            expression: 'host.name : *',
-          },
         },
       },
     },

x-pack/plugins/security_solution/public/common/lib/keury/index.ts

@@ -16,8 +16,6 @@ import {
 
 import { JsonObject } from '../../../../../../../src/plugins/kibana_utils/public';
 
-import { KueryFilterQuery } from '../../store';
-
 export const convertKueryToElasticSearchQuery = (
   kueryExpression: string,
   indexPattern?: IIndexPattern
@@ -57,17 +55,6 @@ export const escapeQueryValue = (val: number | string = ''): string | number =>
   return val;
 };
 
-export const isFromKueryExpressionValid = (kqlFilterQuery: KueryFilterQuery | null): boolean => {
-  if (kqlFilterQuery && kqlFilterQuery.kind === 'kuery') {
-    try {
-      esKuery.fromKueryExpression(kqlFilterQuery.expression);
-    } catch (err) {
-      return false;
-    }
-  }
-  return true;
-};
-
 const escapeWhitespace = (val: string) =>
   val.replace(/\t/g, '\\t').replace(/\r/g, '\\r').replace(/\n/g, '\\n');
 

x-pack/plugins/security_solution/public/common/mock/global_state.ts

@@ -220,7 +220,7 @@ export const mockGlobalState: State = {
         isSelectAllChecked: false,
         isLoading: false,
         kqlMode: 'filter',
-        kqlQuery: { filterQuery: null, filterQueryDraft: null },
+        kqlQuery: { filterQuery: null },
         loadingEventIds: [],
         title: '',
         timelineType: TimelineType.default,

x-pack/plugins/security_solution/public/common/mock/timeline_results.ts

@@ -2128,7 +2128,6 @@ export const mockTimelineModel: TimelineModel = {
   kqlMode: 'filter',
   kqlQuery: {
     filterQuery: null,
-    filterQueryDraft: null,
   },
   itemsPerPage: 25,
   itemsPerPageOptions: [10, 25, 50, 100],
@@ -2235,7 +2234,6 @@ export const defaultTimelineProps: CreateTimelineProps = {
     kqlMode: 'filter',
     kqlQuery: {
       filterQuery: { kuery: { expression: '', kind: 'kuery' }, serializedQuery: '' },
-      filterQueryDraft: { expression: '', kind: 'kuery' },
     },
     loadingEventIds: [],
     noteIds: [],