[Security Solution][Data View Manager] Allow passing data view to query bar

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

@@ -21,10 +21,10 @@ import { createStubDataView } from '@kbn/data-views-plugin/common/data_view.stub
 import { fields } from '@kbn/data-views-plugin/common/mocks';
 import { useKibana } from '../../lib/kibana';
 
-const getMockIndexPattern = () => ({
+const getMockIndexPattern = (id: string = '1234') => ({
   ...createStubDataView({
     spec: {
-      id: '1234',
+      id,
       title: 'logstash-*',
       fields: ((): DataViewFieldMap => {
         const fieldMap: DataViewFieldMap = Object.create(null);
@@ -37,6 +37,8 @@ const getMockIndexPattern = () => ({
   }),
 });
 
+const mockDataView = getMockIndexPattern('data-view-id');
+
 const mockUiSettingsForFilterManager = coreMock.createStart().uiSettings;
 jest.mock('../../lib/kibana');
 
@@ -86,6 +88,7 @@ describe('QueryBar ', () => {
     mockOnChangeQuery.mockClear();
     mockOnSubmitQuery.mockClear();
     mockOnSavedQuery.mockClear();
+    mockClearInstanceCache.mockClear();
   });
 
   test('check if we format the appropriate props to QueryBar', async () => {
@@ -129,6 +132,69 @@ describe('QueryBar ', () => {
     });
   });
 
+  test('use data view directly if index pattern prop is a data view', async () => {
+    await act(async () => {
+      const wrapper = await getWrapper(
+        <Proxy
+          dateRangeFrom={DEFAULT_FROM}
+          dateRangeTo={DEFAULT_TO}
+          hideSavedQuery={false}
+          indexPattern={mockDataView}
+          isRefreshPaused={true}
+          filterQuery={{ query: 'here: query', language: 'kuery' }}
+          filterManager={new FilterManager(mockUiSettingsForFilterManager)}
+          filters={[]}
+          onChangedQuery={mockOnChangeQuery}
+          onSubmitQuery={mockOnSubmitQuery}
+          onSavedQuery={mockOnSavedQuery}
+        />
+      );
+
+      await waitFor(() => {
+        wrapper.update();
+        const { ...searchBarProps } = wrapper.find(SearchBar).props();
+        expect((searchBarProps?.indexPatterns ?? [{ id: 'unknown' }])[0].id).toEqual(
+          mockDataView.id
+        );
+      });
+
+      wrapper.unmount();
+      expect(mockClearInstanceCache).not.toHaveBeenCalled();
+    });
+  });
+
+  test('do not clear cache when preventCacheClearOnUnmount is true', async () => {
+    await act(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}
+          preventCacheClearOnUnmount={true}
+        />
+      );
+
+      await waitFor(() => {
+        wrapper.update();
+        const { ...searchBarProps } = wrapper.find(SearchBar).props();
+        expect((searchBarProps?.indexPatterns ?? [{ id: 'unknown' }])[0].id).toEqual(
+          getMockIndexPattern().id
+        );
+      });
+
+      wrapper.unmount();
+      expect(mockClearInstanceCache).not.toHaveBeenCalled();
+    });
+  });
+
   // FLAKY: https://github.com/elastic/kibana/issues/132659
   describe.skip('#onQuerySubmit', () => {
     test(' is the only reference that changed when filterQuery props get updated', async () => {

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

@@ -20,14 +20,13 @@ import { Storage } from '@kbn/kibana-utils-plugin/public';
 import { css, Global } from '@emotion/react';
 import { useKibana } from '../../lib/kibana';
 import { convertToQueryType } from './convert_to_query_type';
-import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
 
 export interface QueryBarComponentProps {
   dataTestSubj?: string;
   dateRangeFrom?: string;
   dateRangeTo?: string;
   hideSavedQuery?: boolean;
-  indexPattern: DataViewBase;
+  indexPattern: DataView | DataViewBase;
   isLoading?: boolean;
   isRefreshPaused?: boolean;
   filterQuery: Query;
@@ -41,6 +40,7 @@ export interface QueryBarComponentProps {
   displayStyle?: SearchBarProps['displayStyle'];
   isDisabled?: boolean;
   bubbleSubmitEvent?: boolean;
+  preventCacheClearOnUnmount?: boolean;
 }
 
 export const isDataView = (obj: unknown): obj is DataView =>
@@ -87,8 +87,8 @@ export const QueryBar = memo<QueryBarComponentProps>(
     displayStyle,
     isDisabled,
     bubbleSubmitEvent,
+    preventCacheClearOnUnmount = false,
   }) => {
-    const newDataViewPickerEnabled = useIsExperimentalFeatureEnabled('newDataViewPickerEnabled');
     const { data } = useKibana().services;
     const [dataView, setDataView] = useState<DataView>();
     const onQuerySubmit = useCallback(
@@ -160,11 +160,12 @@ export const QueryBar = memo<QueryBarComponentProps>(
         createDataView();
       }
       return () => {
-        if (dv?.id && !newDataViewPickerEnabled) {
+        // Cache needs to be cleared in certain instances where ad-hoc dataviews are created, like rule creation
+        if (dv?.id && !preventCacheClearOnUnmount) {
           data.dataViews.clearInstanceCache(dv?.id);
         }
       };
-    }, [data.dataViews, indexPattern, isEsql, newDataViewPickerEnabled]);
+    }, [data.dataViews, indexPattern, isEsql, preventCacheClearOnUnmount]);
 
     const searchBarFilters = useMemo(() => {
       if (isDataView(indexPattern) || isEsql) {

x-pack/solutions/security/plugins/security_solution/public/common/components/search_bar/index.tsx

@@ -42,6 +42,8 @@ import { hostsActions } from '../../../explore/hosts/store';
 import { networkActions } from '../../../explore/network/store';
 import { useSyncSearchBarUrlParams } from '../../hooks/search_bar/use_sync_search_bar_url_param';
 import { useSyncTimerangeUrlParam } from '../../hooks/search_bar/use_sync_timerange_url_param';
+import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
+import { useDataView } from '../../../data_view_manager/hooks/use_data_view';
 
 interface SiemSearchBarProps {
   id: InputsModelId.global | InputsModelId.timeline;
@@ -98,6 +100,9 @@ export const SearchBarComponent = memo<SiemSearchBarProps & PropsFromRedux>(
       dispatch(networkActions.setNetworkTablesActivePageToZero());
     }, [dispatch]);
 
+    const newDataViewPickerEnabled = useIsExperimentalFeatureEnabled('newDataViewPickerEnabled');
+    const { dataView: experimentalDataView } = useDataView();
+
     useSyncSearchBarUrlParams();
     useSyncTimerangeUrlParam();
 
@@ -302,12 +307,19 @@ export const SearchBarComponent = memo<SiemSearchBarProps & PropsFromRedux>(
     }, []);
 
     const dataViews: DataView[] | null = useMemo(() => {
+      if (newDataViewPickerEnabled) {
+        if (experimentalDataView) {
+          return [experimentalDataView];
+        }
+        return null;
+      }
+
       if (sourcererDataView != null) {
         return [new DataView({ spec: sourcererDataView, fieldFormats })];
       } else {
         return null;
       }
-    }, [sourcererDataView, fieldFormats]);
+    }, [sourcererDataView, fieldFormats, newDataViewPickerEnabled, experimentalDataView]);
 
     const onTimeRangeChange = useCallback(
       ({ dateRange }: { dateRange: TimeRange }) => {

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

@@ -15,6 +15,7 @@ import type { FilterManager, SavedQuery, SavedQueryTimeFilter } from '@kbn/data-
 import styled from '@emotion/styled';
 import type { DataViewSpec } from '@kbn/data-views-plugin/common';
 import { useEnableExperimental } from '../../../../common/hooks/use_experimental_features';
+import { useDataView } from '../../../../data_view_manager/hooks/use_data_view';
 import { useDataViewSpec } from '../../../../data_view_manager/hooks/use_data_view_spec';
 import { InputsModelId } from '../../../../common/store/inputs/constants';
 import { SourcererScopeName } from '../../../../sourcerer/store/model';
@@ -119,13 +120,21 @@ export const QueryBarTimeline = memo<QueryBarTimelineComponentProps>(
       useSourcererDataView(SourcererScopeName.timeline);
 
     const { newDataViewPickerEnabled } = useEnableExperimental();
+    const { dataView: experimentalDataView } = useDataView(SourcererScopeName.timeline);
     const { dataViewSpec: experimentalDataViewSpec } = useDataViewSpec(SourcererScopeName.timeline);
     const experimentalBrowserFields = useBrowserFields(SourcererScopeName.timeline);
 
     const dataViewSpec: DataViewSpec = useMemo(
       () => (newDataViewPickerEnabled ? experimentalDataViewSpec : oldSourcererDataViewSpec),
       [experimentalDataViewSpec, newDataViewPickerEnabled, oldSourcererDataViewSpec]
     );
+    const dataViewBase = useMemo(() => dataViewSpecToViewBase(dataViewSpec), [dataViewSpec]);
+    const dataView = useMemo(
+      () =>
+        newDataViewPickerEnabled && experimentalDataView ? experimentalDataView : dataViewBase,
+      [newDataViewPickerEnabled, experimentalDataView, dataViewBase]
+    );
+
     const browserFields = useMemo(
       () => (newDataViewPickerEnabled ? experimentalBrowserFields : oldBrowserFields),
       [experimentalBrowserFields, newDataViewPickerEnabled, oldBrowserFields]
@@ -138,10 +147,8 @@ export const QueryBarTimeline = memo<QueryBarTimelineComponentProps>(
     });
     const queryBarFilters = useMemo(() => getNonDropAreaFilters(filters), [filters]);
 
-    const indexPattern = useMemo(() => dataViewSpecToViewBase(dataViewSpec), [dataViewSpec]);
-
     const [dataProvidersDsl, setDataProvidersDsl] = useState<string>(
-      convertKueryToElasticSearchQuery(buildGlobalQuery(dataProviders, browserFields), indexPattern)
+      convertKueryToElasticSearchQuery(buildGlobalQuery(dataProviders, browserFields), dataViewBase)
     );
     const savedQueryServices = useSavedQueryServices();
 
@@ -155,11 +162,11 @@ export const QueryBarTimeline = memo<QueryBarTimelineComponentProps>(
                 kind,
                 expression,
               },
-              serializedQuery: convertKueryToElasticSearchQuery(expression, indexPattern),
+              serializedQuery: convertKueryToElasticSearchQuery(expression, dataViewBase),
             },
           })
         ),
-      [dispatch, indexPattern, timelineId]
+      [dispatch, dataViewBase, timelineId]
     );
 
     useEffect(() => {
@@ -173,10 +180,10 @@ export const QueryBarTimeline = memo<QueryBarTimelineComponentProps>(
       setDataProvidersDsl(
         convertKueryToElasticSearchQuery(
           buildGlobalQuery(dataProviders, browserFields),
-          indexPattern
+          dataViewBase
         )
       );
-    }, [dataProviders, browserFields, indexPattern]);
+    }, [dataProviders, browserFields, dataViewBase]);
 
     useEffect(() => {
       if (fromStr != null && toStr != null) {
@@ -286,7 +293,7 @@ export const QueryBarTimeline = memo<QueryBarTimelineComponentProps>(
       [dataProvidersDsl, savedQueryId, savedQueryServices]
     );
 
-    if (!indexPattern) {
+    if (!dataView) {
       return null;
     }
 
@@ -296,7 +303,7 @@ export const QueryBarTimeline = memo<QueryBarTimelineComponentProps>(
           dateRangeFrom={dateRangeFrom}
           dateRangeTo={dateRangeTo}
           hideSavedQuery={kqlMode === 'search'}
-          indexPattern={indexPattern}
+          indexPattern={dataView}
           isRefreshPaused={isRefreshPaused}
           filterQuery={filterQueryConverted}
           filterManager={filterManager}
@@ -307,6 +314,7 @@ export const QueryBarTimeline = memo<QueryBarTimelineComponentProps>(
           onSavedQuery={onSavedQuery}
           dataTestSubj={'timelineQueryInput'}
           displayStyle="inPage"
+          preventCacheClearOnUnmount={newDataViewPickerEnabled}
         />
       </SearchBarContainer>
     );