[Security Solution] Replace sourcerer in EQL tab with dataview picker

x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/eql/header/index.test.tsx

@@ -19,6 +19,7 @@ describe('Eql Header', () => {
     timelineId: TimelineId.test,
     timelineFullScreen: false,
     setTimelineFullScreen: jest.fn(),
+    newDataViewPickerEnabled: false,
   } as EqlTabHeaderProps;
 
   describe('rendering', () => {

x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/eql/header/index.tsx

@@ -18,14 +18,22 @@ import type { TimelineFullScreen } from '../../../../../../common/containers/use
 import { EqlQueryBarTimeline } from '../../../query_bar/eql';
 import { Sourcerer } from '../../../../../../sourcerer/components';
 import { StyledEuiFlyoutHeader, TabHeaderContainer } from '../../shared/layout';
+import { DataViewPicker } from '../../../../../../data_view_manager/components/data_view_picker';
 
 export type EqlTabHeaderProps = {
   activeTab: TimelineTabs;
   timelineId: string;
+  newDataViewPickerEnabled: boolean;
 } & TimelineFullScreen;
 
 export const EqlTabHeader = memo(
-  ({ activeTab, setTimelineFullScreen, timelineFullScreen, timelineId }: EqlTabHeaderProps) => (
+  ({
+    activeTab,
+    setTimelineFullScreen,
+    timelineFullScreen,
+    timelineId,
+    newDataViewPickerEnabled,
+  }: EqlTabHeaderProps) => (
     <>
       <EuiFlexItem grow={false}>
         <StyledEuiFlyoutHeader data-test-subj={`${activeTab}-tab-flyout-header`} hasBorder={false}>
@@ -43,7 +51,12 @@ export const EqlTabHeader = memo(
               />
             )}
             <EuiFlexItem grow={false}>
-              {activeTab === TimelineTabs.eql && <Sourcerer scope={SourcererScopeName.timeline} />}
+              {activeTab === TimelineTabs.eql &&
+                (newDataViewPickerEnabled ? (
+                  <DataViewPicker scope={SourcererScopeName.timeline} />
+                ) : (
+                  <Sourcerer scope={SourcererScopeName.timeline} />
+                ))}
             </EuiFlexItem>
             <EuiFlexItem>
               <SuperDatePicker width="auto" id={InputsModelId.timeline} timelineId={timelineId} />

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

@@ -48,6 +48,8 @@ import { useNotesInFlyout } from '../../properties/use_notes_in_flyout';
 import { NotesFlyout } from '../../properties/notes_flyout';
 import { DocumentEventTypes, NotesEventTypes } from '../../../../../common/lib/telemetry';
 import { TimelineRefetch } from '../../refetch_timeline';
+import { useDataViewSpec } from '../../../../../data_view_manager/hooks/use_data_view_spec';
+import { useSelectedPatterns } from '../../../../../data_view_manager/hooks/use_selected_patterns';
 
 export type Props = TimelineTabCommonProps & PropsFromRedux;
 
@@ -76,12 +78,28 @@ export const EqlTabContentComponent: React.FC<Props> = ({
   const { query: eqlQuery = '', ...restEqlOption } = eqlOptions;
   const { portalNode: eqlEventsCountPortalNode } = useEqlEventsCountPortal();
   const { setTimelineFullScreen, timelineFullScreen } = useTimelineFullScreen();
+
+  const newDataViewPickerEnabled = useIsExperimentalFeatureEnabled('newDataViewPickerEnabled');
   const {
-    dataViewId,
-    loading: loadingSourcerer,
-    selectedPatterns,
-    sourcererDataView,
+    dataViewId: oldDataViewId,
+    loading: oldSourcererLoading,
+    selectedPatterns: oldSelectedPatterns,
+    sourcererDataView: oldSourcererDataView,
   } = useSourcererDataView(SourcererScopeName.timeline);
+
+  const { dataViewSpec: experimentalDataView, status } = useDataViewSpec(
+    SourcererScopeName.timeline
+  );
+  const experimentalSelectedPatterns = useSelectedPatterns(SourcererScopeName.timeline);
+  const experimentalDataViewId = experimentalDataView.id ?? null;
+
+  const dataViewId = newDataViewPickerEnabled ? experimentalDataViewId : oldDataViewId;
+  const dataViewLoading = newDataViewPickerEnabled ? status !== 'ready' : oldSourcererLoading;
+  const sourcererDataView = newDataViewPickerEnabled ? experimentalDataView : oldSourcererDataView;
+  const selectedPatterns = newDataViewPickerEnabled
+    ? experimentalSelectedPatterns
+    : oldSelectedPatterns;
+
   const { augmentedColumnHeaders, timelineQueryFieldsFromColumns } = useTimelineColumns(columns);
 
   const getManageTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
@@ -96,12 +114,12 @@ export const EqlTabContentComponent: React.FC<Props> = ({
 
   const canQueryTimeline = useCallback(
     () =>
-      loadingSourcerer != null &&
-      !loadingSourcerer &&
+      dataViewLoading != null &&
+      !dataViewLoading &&
       !isEmpty(start) &&
       !isEmpty(end) &&
       !isBlankTimeline,
-    [end, isBlankTimeline, loadingSourcerer, start]
+    [end, isBlankTimeline, dataViewLoading, start]
   );
 
   const [dataLoadingState, { events, inspect, totalCount, loadNextBatch, refreshedAt, refetch }] =
@@ -236,10 +254,11 @@ export const EqlTabContentComponent: React.FC<Props> = ({
           setTimelineFullScreen={setTimelineFullScreen}
           timelineFullScreen={timelineFullScreen}
           timelineId={timelineId}
+          newDataViewPickerEnabled={newDataViewPickerEnabled}
         />
       </EuiFlexGroup>
     ),
-    [activeTab, setTimelineFullScreen, timelineFullScreen, timelineId]
+    [activeTab, newDataViewPickerEnabled, setTimelineFullScreen, timelineFullScreen, timelineId]
   );
 
   const NotesFlyoutMemo = useMemo(() => {