[Security Solution] Fix Timeline search field is not wiped out when c…

…reating a new timeline (#68499)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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

@@ -185,6 +185,47 @@ describe('QueryBar ', () => {
     });
   });
 
+  describe('state', () => {
+    test('clears draftQuery when filterQueryDraft has been cleared', () => {
+      const KibanaWithStorageProvider = createKibanaContextProviderMock();
+
+      const Proxy = (props: QueryBarComponentProps) => (
+        <TestProviders>
+          <KibanaWithStorageProvider services={{ storage: { get: jest.fn() } }}>
+            <QueryBar {...props} />
+          </KibanaWithStorageProvider>
+        </TestProviders>
+      );
+
+      const wrapper = mount(
+        <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}
+        />
+      );
+
+      const queryInput = wrapper.find(QueryBar).find('input[data-test-subj="queryInput"]');
+      queryInput.simulate('change', { target: { value: 'host.name:*' } });
+
+      expect(queryInput.html()).toContain('value="host.name:*"');
+
+      wrapper.setProps({ filterQueryDraft: null });
+      wrapper.update();
+
+      expect(queryInput.html()).toContain('value=""');
+    });
+  });
+
   describe('#onQueryChange', () => {
     test(' is the only reference that changed when filterQueryDraft props get updated', () => {
       const KibanaWithStorageProvider = createKibanaContextProviderMock();

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

@@ -19,6 +19,7 @@ import {
   SavedQueryTimeFilter,
 } from '../../../../../../../src/plugins/data/public';
 import { Storage } from '../../../../../../../src/plugins/kibana_utils/public';
+import { KueryFilterQuery } from '../../store';
 
 export interface QueryBarComponentProps {
   dataTestSubj?: string;
@@ -29,6 +30,7 @@ export interface QueryBarComponentProps {
   isLoading?: boolean;
   isRefreshPaused?: boolean;
   filterQuery: Query;
+  filterQueryDraft?: KueryFilterQuery;
   filterManager: FilterManager;
   filters: Filter[];
   onChangedQuery: (query: Query) => void;
@@ -47,6 +49,7 @@ export const QueryBar = memo<QueryBarComponentProps>(
     isLoading = false,
     isRefreshPaused,
     filterQuery,
+    filterQueryDraft,
     filterManager,
     filters,
     onChangedQuery,
@@ -59,8 +62,11 @@ export const QueryBar = memo<QueryBarComponentProps>(
     const [draftQuery, setDraftQuery] = useState(filterQuery);
 
     useEffect(() => {
-      setDraftQuery(filterQuery);
-    }, [filterQuery]);
+      // Reset draftQuery when `Create new timeline` is clicked
+      if (filterQueryDraft == null) {
+        setDraftQuery(filterQuery);
+      }
+    }, [filterQuery, filterQueryDraft]);
 
     const onQuerySubmit = useCallback(
       (payload: { dateRange: TimeRange; query?: Query }) => {

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

@@ -291,6 +291,7 @@ export const QueryBarTimeline = memo<QueryBarTimelineComponentProps>(
         indexPattern={indexPattern}
         isRefreshPaused={isRefreshPaused}
         filterQuery={filterQueryConverted}
+        filterQueryDraft={filterQueryDraft}
         filterManager={filterManager}
         filters={queryBarFilters}
         onChangedQuery={onChangedQuery}