From 78cfc744be512d8bc72efc276f70bf5722304ebb Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Tue, 16 Jan 2024 14:46:46 -0500
Subject: [PATCH 01/65] wip udt

---
 .../common/experimental_features.ts           |   4 +
 .../data_table/data_table.tsx                 | 592 ++++++++++++++++++
 .../data_table/use_control_columns.tsx        | 198 ++++++
 3 files changed, 794 insertions(+)
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/data_table.tsx
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/use_control_columns.tsx

diff --git a/x-pack/plugins/security_solution/common/experimental_features.ts b/x-pack/plugins/security_solution/common/experimental_features.ts
index f0417b55ccc30c..b437f5374d1f8b 100644
--- a/x-pack/plugins/security_solution/common/experimental_features.ts
+++ b/x-pack/plugins/security_solution/common/experimental_features.ts
@@ -175,6 +175,10 @@ export const allowedExperimentalValues = Object.freeze({
    *
    */
   timelineEsqlTabDisabled: false,
+  /*
+   * Enables Discover components, UnifiedFieldList and UnifiedDataTable in Timeline.
+   */
+  unifiedComponentsInTimelineEnabled: true,
 });
 
 type ExperimentalConfigKeys = Array<keyof ExperimentalFeatures>;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/data_table.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/data_table.tsx
new file mode 100644
index 00000000000000..29313fced9fa3b
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/data_table.tsx
@@ -0,0 +1,592 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  type EuiDataGridCellValueElementProps,
+  type EuiDataGridControlColumn,
+  type EuiDataGridCustomBodyProps,
+  type EuiDataGridProps,
+} from '@elastic/eui';
+import React, { memo, useMemo, useCallback, useState, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { generateFilters } from '@kbn/data-plugin/public';
+import type { DataViewField } from '@kbn/data-plugin/common';
+import { flattenHit } from '@kbn/data-plugin/common';
+import { DataView } from '@kbn/data-views-plugin/public';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+import type { UnifiedDataTableSettingsColumn } from '@kbn/unified-data-table';
+import { UnifiedDataTable, useColumns, DataLoadingState } from '@kbn/unified-data-table';
+import type { SortOrder } from '@kbn/saved-search-plugin/public';
+import { popularizeField } from '@kbn/unified-data-table/src/utils/popularize_field';
+import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
+import { RowRendererId } from '../../../../../../common/api/timeline';
+import { getAllFieldsByName } from '../../../../../common/containers/source';
+import { StatefulEventContext } from '../../../../../common/components/events_viewer/stateful_event_context';
+import type {
+  ExpandedDetailTimeline,
+  ExpandedDetailType,
+  SetEventsDeleted,
+  SetEventsLoading,
+} from '../../../../../../common/types';
+import type { TimelineItem } from '../../../../../../common/search_strategy';
+import { useKibana } from '../../../../../common/lib/kibana';
+import { defaultHeaders } from '../../body/column_headers/default_headers';
+import type {
+  ColumnHeaderOptions,
+  OnChangePage,
+  RowRenderer,
+  SortColumnTimeline,
+  ToggleDetailPanel,
+} from '../../../../../../common/types/timeline';
+import { TimelineId, TimelineTabs } from '../../../../../../common/types/timeline';
+import type { State, inputsModel } from '../../../../../common/store';
+import { SourcererScopeName } from '../../../../../common/store/sourcerer/model';
+import { useSourcererDataView } from '../../../../../common/containers/sourcerer';
+import { activeTimeline } from '../../../../containers/active_timeline_context';
+import { DetailsPanel } from '../../../side_panel';
+import { getDefaultControlColumn } from '../../body/control_columns';
+import { useLicense } from '../../../../../common/hooks/use_license';
+import { SecurityCellActionsTrigger } from '../../../../../actions/constants';
+import { Actions } from '../../../../../common/components/header_actions/actions';
+import { getColumnHeaderUnified } from '../../body/column_headers/helpers';
+import { eventIsPinned } from '../../body/helpers';
+import { getFormattedFields } from '../body/renderers/formatted_field_udt';
+import { timelineBodySelector } from '../../body/selectors';
+import ToolbarAdditionalControls from './toolbar_additional_controls';
+import { StyledTimelineUnifiedDataTable, StyledEuiProgress } from './styles';
+import CustomGridBodyControls from './render_custom_body';
+import RowDetails from './row_details';
+import { timelineDefaults } from '../../../../store/defaults';
+import { timelineActions } from '../../../../store';
+import { NOTES_BUTTON_CLASS_NAME } from '../../properties/helpers';
+
+export const SAMPLE_SIZE_SETTING = 500;
+const DataGridMemoized = React.memo(UnifiedDataTable);
+
+interface Props {
+  columns: ColumnHeaderOptions[];
+  rowRenderers: RowRenderer[];
+  timelineId: string;
+  itemsPerPage: number;
+  itemsPerPageOptions: number[];
+  sort: SortColumnTimeline[];
+  events: TimelineItem[];
+  refetch: inputsModel.Refetch;
+  onFieldEdited: () => void;
+  totalCount: number;
+  onEventClosed: (args: ToggleDetailPanel) => void;
+  expandedDetail: ExpandedDetailTimeline;
+  showExpandedDetails: boolean;
+  onChangePage: OnChangePage;
+  activeTab: TimelineTabs;
+  dataLoadingState: DataLoadingState;
+  updatedAt: number;
+  isTextBasedQuery?: boolean;
+}
+
+/* eslint-disable react/display-name */
+export const TimelineDataTableComponent: React.FC<Props> = memo(
+  ({
+    columns,
+    activeTab,
+    timelineId,
+    itemsPerPage,
+    itemsPerPageOptions,
+    rowRenderers,
+    sort,
+    events,
+    onFieldEdited,
+    refetch,
+    dataLoadingState,
+    totalCount,
+    onEventClosed,
+    showExpandedDetails,
+    expandedDetail,
+    onChangePage,
+    updatedAt,
+    isTextBasedQuery = false,
+  }) => {
+    const dispatch = useDispatch();
+
+    // Store context in state rather than creating object in provider value={} to prevent re-renders caused by a new object being created
+    const [activeStatefulEventContext] = useState({
+      timelineID: timelineId,
+      enableHostDetailsFlyout: true,
+      enableIpDetailsFlyout: true,
+      tabType: activeTab,
+    });
+
+    const {
+      services: {
+        uiSettings,
+        fieldFormats,
+        dataViews,
+        storage,
+        dataViewFieldEditor,
+        notifications: { toasts: toastsService },
+        application: { capabilities },
+        theme,
+        data: dataPluginContract,
+      },
+    } = useKibana();
+
+    const isEnterprisePlus = useLicense().isEnterprise();
+
+    const [expandedDoc, setExpandedDoc] = useState<DataTableRecord & TimelineItem>();
+    const [fetchedPage, setFechedPage] = useState<number>(0);
+
+    // const [sampleSize, setSampleSize] = useState<number>(SAMPLE_SIZE_SETTING);
+    const { browserFields, runtimeMappings, sourcererDataView } = useSourcererDataView(
+      SourcererScopeName.timeline
+    );
+    const dataView = useMemo(() => {
+      if (sourcererDataView != null) {
+        return new DataView({ spec: sourcererDataView, fieldFormats });
+      } else {
+        return undefined;
+      }
+    }, [sourcererDataView, fieldFormats]);
+    const showTimeCol = useMemo(() => !!dataView && !!dataView.timeFieldName, [dataView]);
+    const defaultColumns = useMemo(() => {
+      return columns.map((c) => c.id);
+    }, [columns]);
+    const tableSettings = useMemo(
+      () => ({
+        columns: columns.reduce((v, s) => {
+          if (s.initialWidth) {
+            v[s.id] = { width: s.initialWidth };
+          }
+          return v;
+        }, {} as Record<string, UnifiedDataTableSettingsColumn>),
+      }),
+      [columns]
+    );
+    // const [notesMap, setNotesMap] = useState<NotesMap>({});
+    const trGroupRef = useRef<HTMLDivElement | null>(null);
+
+    const {
+      timeline: {
+        eventIdToNoteIds,
+        loadingEventIds,
+        selectedEventIds,
+        filterManager,
+        pinnedEventIds,
+        excludedRowRendererIds,
+        rowHeight,
+        sampleSize,
+        notesMap,
+      } = timelineDefaults,
+    } = useSelector((state: State) => timelineBodySelector(state, timelineId));
+
+    const { leadingControlColumns, expandedRowTrailingColumns } = useControlColumns();
+    // const { activeStep, isTourShown, incrementStep } = useTourContext();
+
+    /* const isTourAnchor = useMemo(
+        () =>
+          isTourShown(SecurityStepId.alertsCases) &&
+          eventType === 'signal' &&
+          isDetectionsAlertsTable(timelineId) &&
+          ariaRowindex === 1,
+        [isTourShown, ariaRowindex, eventType, timelineId]
+      );
+      const onExpandEvent = useCallback(() => {
+        if (
+          isTourAnchor &&
+          activeStep === AlertsCasesTourSteps.expandEvent &&
+          isTourShown(SecurityStepId.alertsCases)
+        ) {
+          incrementStep(SecurityStepId.alertsCases);
+        }
+        onEventDetailsPanelOpened();
+      }, [activeStep, incrementStep, isTourAnchor, isTourShown, onEventDetailsPanelOpened]);*/
+
+    /* const onRowSelected: OnRowSelected = useCallback(
+        ({ eventIds, isSelected }: { eventIds: string[]; isSelected: boolean }) => {
+          dispatch(
+            timelineActions.setSelected({
+              id,
+              eventIds: getEventIdToDataMapping(data, eventIds, queryFields),
+              isSelected,
+              isSelectAllChecked:
+                isSelected && Object.keys(selectedEventIds).length + 1 === data.length,
+            })
+          );
+        },
+        [data, dispatch, id, queryFields, selectedEventIds]
+      );*/
+
+    const discoverGridRows: Array<DataTableRecord & TimelineItem> = useMemo(
+      () =>
+        events.map(({ _id, _index, ecs, data }) => {
+          const _source = ecs as unknown as Record<string, unknown>;
+          const hit = { _id, _index: String(_index), _source };
+          return {
+            _id,
+            id: _id,
+            data,
+            ecs,
+            raw: hit,
+            flattened: flattenHit(hit, dataView, {
+              includeIgnoredValues: true,
+            }),
+          };
+        }),
+      [events, dataView]
+    );
+
+    const setEventsLoading = useCallback<SetEventsLoading>(
+      ({ eventIds, isLoading }) => {
+        dispatch(timelineActions.setEventsLoading({ id: timelineId, eventIds, isLoading }));
+      },
+      [dispatch, timelineId]
+    );
+
+    const setEventsDeleted = useCallback<SetEventsDeleted>(
+      ({ eventIds, isDeleted }) => {
+        dispatch(timelineActions.setEventsDeleted({ id: timelineId, eventIds, isDeleted }));
+      },
+      [dispatch, timelineId]
+    );
+
+    // Event details
+    const handleOnEventDetailPanelOpened = useCallback(
+      (eventData: DataTableRecord & TimelineItem) => {
+        const updatedExpandedDetail: ExpandedDetailType = {
+          panelView: 'eventDetail',
+          params: {
+            eventId: eventData.id,
+            indexName: eventData._index ?? '', // TODO: fix type error
+            refetch,
+          },
+        };
+
+        dispatch(
+          timelineActions.toggleDetailPanel({
+            ...updatedExpandedDetail,
+            tabType: TimelineTabs.query,
+            id: timelineId,
+          })
+        );
+
+        activeTimeline.toggleExpandedDetail({ ...updatedExpandedDetail });
+      },
+      [dispatch, refetch, timelineId]
+    );
+
+    const handleOnPanelClosed = useCallback(() => {
+      if (
+        expandedDetail[TimelineTabs.query]?.panelView &&
+        timelineId === TimelineId.active &&
+        showExpandedDetails
+      ) {
+        activeTimeline.toggleExpandedDetail({});
+      }
+      setExpandedDoc(undefined);
+      onEventClosed({ tabType: TimelineTabs.query, id: timelineId });
+    }, [onEventClosed, timelineId, expandedDetail, showExpandedDetails]);
+
+    const onSetExpandedDoc = useCallback(
+      (newDoc?: DataTableRecord) => {
+        if (newDoc) {
+          const timelineDoc = discoverGridRows.find((r) => r.id === newDoc.id);
+          setExpandedDoc(timelineDoc);
+          if (timelineDoc) {
+            handleOnEventDetailPanelOpened(timelineDoc);
+          }
+        } else {
+          handleOnPanelClosed();
+        }
+      },
+      [discoverGridRows, handleOnEventDetailPanelOpened, handleOnPanelClosed]
+    );
+
+    const toggleShowNotesEvent = useCallback(
+      (eventId: string) => {
+        const row = notesMap[eventId];
+        if (row?.isAddingNote !== true) {
+          dispatch(
+            timelineActions.setNotesMap({
+              id: timelineId,
+              notesMap: {
+                ...notesMap,
+                [eventId]: { ...row, isAddingNote: true },
+              },
+            })
+          );
+          setTimeout(() => {
+            const notesButtonElement = trGroupRef.current?.querySelector<HTMLButtonElement>(
+              `.${NOTES_BUTTON_CLASS_NAME}`
+            );
+            notesButtonElement?.focus();
+          }, 0);
+        }
+      },
+      [notesMap, dispatch, timelineId]
+    );
+
+    // Sorting
+    const sortingColumns = useMemo(() => {
+      return (
+        (sort?.map((sortingCol) => [
+          sortingCol.columnId,
+          sortingCol.sortDirection as 'asc' | 'desc',
+        ]) as SortOrder[]) || []
+      );
+    }, [sort]);
+    const onSort = useCallback(
+      (nextSort: string[][]) => {
+        dispatch(
+          timelineActions.updateSort({
+            id: timelineId,
+            sort: nextSort.map(
+              ([id, direction]) =>
+                ({
+                  columnId: id,
+                  columnType: 'keyword',
+                  sortDirection: direction,
+                } as SortColumnTimeline)
+            ),
+          })
+        );
+      },
+      [dispatch, timelineId]
+    );
+
+    // Row renderers
+    const enabledRowRenderers = useMemo(() => {
+      if (
+        excludedRowRendererIds &&
+        excludedRowRendererIds.length === Object.keys(RowRendererId).length
+      )
+        return [];
+
+      if (!excludedRowRendererIds) return rowRenderers;
+
+      return rowRenderers.filter((rowRenderer) => !excludedRowRendererIds.includes(rowRenderer.id));
+    }, [excludedRowRendererIds, rowRenderers]);
+
+    const getRowRendererBody = useCallback(
+      ({
+        Cell,
+        visibleRowData,
+        visibleColumns,
+        setCustomGridBodyProps,
+      }: EuiDataGridCustomBodyProps) => (
+        <CustomGridBodyControls
+          discoverGridRows={discoverGridRows}
+          Cell={Cell}
+          visibleColumns={visibleColumns}
+          visibleRowData={visibleRowData}
+          setCustomGridBodyProps={setCustomGridBodyProps}
+          enabledRowRenderers={enabledRowRenderers}
+          timelineId={timelineId}
+        />
+      ),
+      [discoverGridRows, enabledRowRenderers, timelineId]
+    );
+
+    // Columns management
+    const { onSetColumns } = useColumns({
+      capabilities,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      dataView: dataView!,
+      dataViews,
+      setAppState: (newState: { columns: string[]; sort?: string[][] }) => {
+        if (newState.sort) {
+          onSort(newState.sort);
+        } else {
+          const columnsStates = newState.columns.map((columnId) =>
+            getColumnHeaderUnified(columnId, defaultHeaders)
+          );
+          dispatch(timelineActions.updateColumns({ id: timelineId, columns: columnsStates }));
+        }
+      },
+      useNewFieldsApi: true,
+      columns: defaultColumns,
+      sort: sortingColumns,
+    });
+
+    const onColumnResize = useCallback(
+      ({ columnId, width }: { columnId: string; width: number }) => {
+        dispatch(
+          timelineActions.updateColumnWidth({
+            columnId,
+            id: timelineId,
+            width, // initialWidth?
+          })
+        );
+      },
+      [dispatch, timelineId]
+    );
+
+    const onResizeDataGrid = useCallback(
+      (colSettings) => {
+        onColumnResize({ columnId: colSettings.columnId, width: Math.round(colSettings.width) });
+      },
+      [onColumnResize]
+    );
+
+    const onAddFilter = useCallback(
+      (field: DataViewField | string, values: unknown, operation: '+' | '-') => {
+        if (dataView && filterManager) {
+          const fieldName = typeof field === 'string' ? field : field.name;
+          popularizeField(dataView, fieldName, dataViews, capabilities);
+          const newFilters = generateFilters(filterManager, field, values, operation, dataView);
+          return filterManager.addFilters(newFilters);
+        }
+      },
+      [filterManager, dataView, dataViews, capabilities]
+    );
+
+    const onChangeItemsPerPage = useCallback(
+      (itemsChangedPerPage) =>
+        dispatch(
+          timelineActions.updateItemsPerPage({ id: timelineId, itemsPerPage: itemsChangedPerPage })
+        ),
+      [dispatch, timelineId]
+    );
+
+    const browserFieldsByName = useMemo(() => getAllFieldsByName(browserFields), [browserFields]);
+
+    const customColumnRenderers = useMemo(
+      () =>
+        getFormattedFields({
+          dataTableRows: discoverGridRows,
+          scopeId: 'timeline',
+          headers: columns,
+          browserFieldsByName,
+        }),
+      [browserFieldsByName, columns, discoverGridRows]
+    );
+
+    const handleFetchMoreRecords = useCallback(() => {
+      onChangePage(fetchedPage + 1);
+      setFechedPage(fetchedPage + 1);
+    }, [fetchedPage, onChangePage]);
+
+    const additionalControls = useMemo(
+      () => <ToolbarAdditionalControls timelineId={timelineId} updatedAt={updatedAt} />,
+      [timelineId, updatedAt]
+    );
+
+    const cellActionsMetadata = useMemo(() => ({ scopeId: timelineId }), [timelineId]);
+
+    const onUpdateSampleSize = useCallback(
+      (newSampleSize: number) => {
+        if (newSampleSize !== sampleSize) {
+          dispatch(timelineActions.updateSampleSize({ id: timelineId, sampleSize: newSampleSize }));
+          refetch();
+        }
+      },
+      [dispatch, sampleSize, timelineId, refetch]
+    );
+
+    const onUpdateRowHeight = useCallback(
+      (newRowHeight: number) => {
+        if (newRowHeight !== rowHeight) {
+          dispatch(timelineActions.updateRowHeight({ id: timelineId, rowHeight: newRowHeight }));
+        }
+      },
+      [dispatch, rowHeight, timelineId]
+    );
+
+    const services = useMemo(() => {
+      return {
+        theme,
+        fieldFormats,
+        storage,
+        toastNotifications: toastsService,
+        uiSettings,
+        dataViewFieldEditor,
+        data: dataPluginContract,
+      };
+    }, [
+      theme,
+      fieldFormats,
+      storage,
+      toastsService,
+      uiSettings,
+      dataViewFieldEditor,
+      dataPluginContract,
+    ]);
+
+    if (!dataView) {
+      return null;
+    }
+
+    return (
+      <StatefulEventContext.Provider value={activeStatefulEventContext}>
+        <StyledTimelineUnifiedDataTable>
+          {(dataLoadingState === DataLoadingState.loading ||
+            dataLoadingState === DataLoadingState.loadingMore) && (
+            <StyledEuiProgress data-test-subj="discoverDataGridUpdating" size="xs" color="accent" />
+          )}
+          <DataGridMemoized
+            ariaLabelledBy="timelineDocumentsAriaLabel"
+            className={'udtTimeline'}
+            columns={defaultColumns}
+            expandedDoc={expandedDoc}
+            dataView={dataView}
+            loadingState={dataLoadingState}
+            onFilter={onAddFilter as DocViewFilterFn}
+            onResize={onResizeDataGrid}
+            onSetColumns={onSetColumns}
+            onSort={!isTextBasedQuery ? onSort : undefined}
+            rows={discoverGridRows}
+            sampleSizeState={sampleSize || 500}
+            onUpdateSampleSize={onUpdateSampleSize}
+            setExpandedDoc={onSetExpandedDoc}
+            settings={tableSettings}
+            showTimeCol={showTimeCol}
+            isSortEnabled={true}
+            sort={sortingColumns}
+            rowHeightState={3}
+            isPlainRecord={isTextBasedQuery}
+            rowsPerPageState={itemsPerPage}
+            onUpdateRowsPerPage={onChangeItemsPerPage}
+            onUpdateRowHeight={onUpdateRowHeight}
+            onFieldEdited={onFieldEdited}
+            cellActionsTriggerId={SecurityCellActionsTrigger.DEFAULT}
+            services={services}
+            visibleCellActions={3}
+            externalCustomRenderers={customColumnRenderers}
+            renderDocumentView={() => <></>}
+            externalControlColumns={leadingControlColumns as unknown as EuiDataGridControlColumn[]}
+            externalAdditionalControls={additionalControls}
+            trailingControlColumns={expandedRowTrailingColumns}
+            renderCustomGridBody={getRowRendererBody}
+            rowsPerPageOptions={itemsPerPageOptions}
+            showFullScreenButton={false}
+            useNewFieldsApi={true}
+            maxDocFieldsDisplayed={50}
+            consumer="timeline"
+            totalHits={totalCount}
+            onFetchMoreRecords={handleFetchMoreRecords}
+            configRowHeight={3}
+            showMultiFields={true}
+            cellActionsMetadata={cellActionsMetadata}
+          />
+          {showExpandedDetails && (
+            <DetailsPanel
+              browserFields={browserFields}
+              handleOnPanelClosed={handleOnPanelClosed}
+              runtimeMappings={runtimeMappings}
+              tabType={TimelineTabs.query}
+              scopeId={timelineId}
+              isFlyoutView
+            />
+          )}
+        </StyledTimelineUnifiedDataTable>
+      </StatefulEventContext.Provider>
+    );
+  }
+);
+
+export const TimelineDataTable = React.memo(TimelineDataTableComponent);
+// eslint-disable-next-line import/no-default-export
+export { TimelineDataTable as default };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/use_control_columns.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/use_control_columns.tsx
new file mode 100644
index 00000000000000..291266f5f33d40
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/use_control_columns.tsx
@@ -0,0 +1,198 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+import { useDispatch, useSelector } from 'react-redux';
+import { type EuiDataGridCellValueElementProps, type EuiDataGridProps } from '@elastic/eui';
+import type { State, inputsModel } from '../../../../../common/store';
+import type {
+  RowRenderer,
+  SetEventsDeleted,
+  SetEventsLoading,
+} from '../../../../../../common/types';
+import type { TimelineItem } from '../../../../../../common/search_strategy';
+import { timelineBodySelector } from '../../body/selectors';
+import { timelineActions } from '../../../../store';
+import { useLicense } from '../../../../../common/hooks/use_license';
+import { Actions } from '../../../../../common/components/header_actions/actions';
+import { getDefaultControlColumn } from '../../body/control_columns';
+import { eventIsPinned } from '../../body/helpers';
+import { NOTES_BUTTON_CLASS_NAME } from '../../properties/helpers';
+import { timelineDefaults } from '../../../../store/defaults';
+import RowDetails from './row_details';
+
+export interface UseControlColumns {
+  enabledRowRenderers: RowRenderer[];
+  expandedDoc: (DataTableRecord & TimelineItem) | undefined;
+  gridRows: Array<DataTableRecord & TimelineItem>;
+  refetch: inputsModel.Refetch;
+  timelineId: string;
+  trGroupRef: React.MutableRefObject<HTMLDivElement | null>;
+}
+
+export const useControlColumns = ({
+  enabledRowRenderers,
+  expandedDoc,
+  gridRows,
+  refetch,
+  timelineId,
+  trGroupRef,
+}: UseControlColumns) => {
+  const dispatch = useDispatch();
+  const isEnterprisePlus = useLicense().isEnterprise();
+  const ACTION_BUTTON_COUNT = isEnterprisePlus ? 6 : 5;
+
+  const {
+    timeline: {
+      eventIdToNoteIds,
+      loadingEventIds,
+      selectedEventIds,
+      pinnedEventIds,
+      notesMap,
+    } = timelineDefaults,
+  } = useSelector((state: State) => timelineBodySelector(state, timelineId));
+
+  const setEventsLoading = useCallback<SetEventsLoading>(
+    ({ eventIds, isLoading }) => {
+      dispatch(timelineActions.setEventsLoading({ id: timelineId, eventIds, isLoading }));
+    },
+    [dispatch, timelineId]
+  );
+
+  const setEventsDeleted = useCallback<SetEventsDeleted>(
+    ({ eventIds, isDeleted }) => {
+      dispatch(timelineActions.setEventsDeleted({ id: timelineId, eventIds, isDeleted }));
+    },
+    [dispatch, timelineId]
+  );
+
+  const toggleShowNotesEvent = useCallback(
+    (eventId: string) => {
+      const row = notesMap[eventId];
+      if (row?.isAddingNote !== true) {
+        dispatch(
+          timelineActions.setNotesMap({
+            id: timelineId,
+            notesMap: {
+              ...notesMap,
+              [eventId]: { ...row, isAddingNote: true },
+            },
+          })
+        );
+        setTimeout(() => {
+          const notesButtonElement = trGroupRef.current?.querySelector<HTMLButtonElement>(
+            `.${NOTES_BUTTON_CLASS_NAME}`
+          );
+          notesButtonElement?.focus();
+        }, 0);
+      }
+    },
+    [notesMap, dispatch, timelineId]
+  );
+
+  const leadingControlColumns = useMemo(() => {
+    return getDefaultControlColumn(ACTION_BUTTON_COUNT).map((column) => {
+      return {
+        ...column,
+        headerCellProps: {
+          ...column.headerCellProps,
+        },
+        rowCellRender: ({
+          columnId,
+          colIndex,
+          rowIndex,
+          setCellProps,
+        }: EuiDataGridCellValueElementProps) => {
+          const { id, ecs, data } = gridRows[rowIndex];
+          const toggleNotes = () => toggleShowNotesEvent(id);
+
+          return (
+            <Actions
+              ariaRowindex={rowIndex}
+              columnId={columnId}
+              data={data}
+              index={colIndex}
+              rowIndex={rowIndex}
+              setEventsDeleted={setEventsDeleted}
+              checked={Object.keys(selectedEventIds).includes(id)}
+              isEventPinned={eventIsPinned({
+                eventId: id,
+                pinnedEventIds,
+              })}
+              columnValues={column.columnValues ?? ''}
+              ecsData={ecs}
+              eventId={id}
+              expandedDoc={expandedDoc}
+              setCellProps={setCellProps}
+              eventIdToNoteIds={eventIdToNoteIds}
+              loadingEventIds={loadingEventIds}
+              onRowSelected={column.onRowSelected ? column.onRowSelected : () => {}}
+              showCheckboxes={column.showCheckboxes ?? false}
+              // showNotes={showNotes[id]}
+              timelineId={timelineId}
+              toggleShowNotes={toggleNotes}
+              refetch={refetch}
+              setEventsLoading={setEventsLoading}
+              isUnifiedDataTable={true}
+              onEventDetailsPanelOpened={() => {}}
+            />
+          );
+        },
+        headerCellRender: () => <></>,
+      };
+    });
+  }, [
+    ACTION_BUTTON_COUNT,
+    gridRows,
+    setEventsDeleted,
+    selectedEventIds,
+    pinnedEventIds,
+    eventIdToNoteIds,
+    loadingEventIds,
+    timelineId,
+    refetch,
+    setEventsLoading,
+    expandedDoc,
+    toggleShowNotesEvent,
+  ]);
+
+  // The custom row details is actually a trailing control column cell with
+  // a hidden header. This is important for accessibility and markup reasons
+  // @see https://fuschia-stretch.glitch.me/ for more
+  const expandedRowTrailingColumns: EuiDataGridProps['trailingControlColumns'] = useMemo(
+    () => [
+      {
+        id: 'timeline-unified-data-table-expanded-row',
+        width: 0, // The header cell should be visually hidden, but available to screen readers
+        headerCellRender: () => <></>,
+        headerCellProps: { className: 'euiScreenReaderOnly' },
+        // The footer cell can be hidden to both visual & SR users, as it does not contain meaningful information
+        footerCellProps: { style: { display: 'none' } },
+        // When rendering this custom cell, we'll want to override
+        // the automatic width/heights calculated by EuiDataGrid
+        rowCellRender: ({ setCellProps, rowIndex }) => {
+          return (
+            <RowDetails
+              event={gridRows[rowIndex]}
+              rowIndex={rowIndex}
+              setCellProps={setCellProps}
+              timelineId={timelineId}
+              enabledRowRenderers={enabledRowRenderers}
+            />
+          );
+        },
+      },
+    ],
+    [gridRows, timelineId, enabledRowRenderers]
+  );
+
+  return useMemo(
+    () => ({ leadingControlColumns, expandedRowTrailingColumns }),
+    [leadingControlColumns, expandedRowTrailingColumns]
+  );
+};

From 7eb5b4d86ef8bc4ee6b68c69262d0587433e0c9f Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Mon, 22 Jan 2024 12:41:19 -0500
Subject: [PATCH 02/65] use control columns completed

---
 .../data_table/data_table.tsx                 | 87 +++++--------------
 1 file changed, 21 insertions(+), 66 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/data_table.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/data_table.tsx
index 29313fced9fa3b..62a262acf62750 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/data_table.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/data_table.tsx
@@ -6,10 +6,8 @@
  */
 
 import {
-  type EuiDataGridCellValueElementProps,
   type EuiDataGridControlColumn,
   type EuiDataGridCustomBodyProps,
-  type EuiDataGridProps,
 } from '@elastic/eui';
 import React, { memo, useMemo, useCallback, useState, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -30,8 +28,6 @@ import { StatefulEventContext } from '../../../../../common/components/events_vi
 import type {
   ExpandedDetailTimeline,
   ExpandedDetailType,
-  SetEventsDeleted,
-  SetEventsLoading,
 } from '../../../../../../common/types';
 import type { TimelineItem } from '../../../../../../common/search_strategy';
 import { useKibana } from '../../../../../common/lib/kibana';
@@ -49,21 +45,16 @@ import { SourcererScopeName } from '../../../../../common/store/sourcerer/model'
 import { useSourcererDataView } from '../../../../../common/containers/sourcerer';
 import { activeTimeline } from '../../../../containers/active_timeline_context';
 import { DetailsPanel } from '../../../side_panel';
-import { getDefaultControlColumn } from '../../body/control_columns';
-import { useLicense } from '../../../../../common/hooks/use_license';
 import { SecurityCellActionsTrigger } from '../../../../../actions/constants';
-import { Actions } from '../../../../../common/components/header_actions/actions';
 import { getColumnHeaderUnified } from '../../body/column_headers/helpers';
-import { eventIsPinned } from '../../body/helpers';
 import { getFormattedFields } from '../body/renderers/formatted_field_udt';
 import { timelineBodySelector } from '../../body/selectors';
 import ToolbarAdditionalControls from './toolbar_additional_controls';
 import { StyledTimelineUnifiedDataTable, StyledEuiProgress } from './styles';
 import CustomGridBodyControls from './render_custom_body';
-import RowDetails from './row_details';
 import { timelineDefaults } from '../../../../store/defaults';
 import { timelineActions } from '../../../../store';
-import { NOTES_BUTTON_CLASS_NAME } from '../../properties/helpers';
+import { useControlColumns } from './use_control_columns';
 
 export const SAMPLE_SIZE_SETTING = 500;
 const DataGridMemoized = React.memo(UnifiedDataTable);
@@ -135,8 +126,6 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
       },
     } = useKibana();
 
-    const isEnterprisePlus = useLicense().isEnterprise();
-
     const [expandedDoc, setExpandedDoc] = useState<DataTableRecord & TimelineItem>();
     const [fetchedPage, setFechedPage] = useState<number>(0);
 
@@ -171,11 +160,7 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
 
     const {
       timeline: {
-        eventIdToNoteIds,
-        loadingEventIds,
-        selectedEventIds,
         filterManager,
-        pinnedEventIds,
         excludedRowRendererIds,
         rowHeight,
         sampleSize,
@@ -183,7 +168,6 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
       } = timelineDefaults,
     } = useSelector((state: State) => timelineBodySelector(state, timelineId));
 
-    const { leadingControlColumns, expandedRowTrailingColumns } = useControlColumns();
     // const { activeStep, isTourShown, incrementStep } = useTourContext();
 
     /* const isTourAnchor = useMemo(
@@ -239,19 +223,27 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
       [events, dataView]
     );
 
-    const setEventsLoading = useCallback<SetEventsLoading>(
-      ({ eventIds, isLoading }) => {
-        dispatch(timelineActions.setEventsLoading({ id: timelineId, eventIds, isLoading }));
-      },
-      [dispatch, timelineId]
-    );
+    // Row renderers
+    const enabledRowRenderers = useMemo(() => {
+      if (
+        excludedRowRendererIds &&
+        excludedRowRendererIds.length === Object.keys(RowRendererId).length
+      )
+        return [];
 
-    const setEventsDeleted = useCallback<SetEventsDeleted>(
-      ({ eventIds, isDeleted }) => {
-        dispatch(timelineActions.setEventsDeleted({ id: timelineId, eventIds, isDeleted }));
-      },
-      [dispatch, timelineId]
-    );
+      if (!excludedRowRendererIds) return rowRenderers;
+
+      return rowRenderers.filter((rowRenderer) => !excludedRowRendererIds.includes(rowRenderer.id));
+    }, [excludedRowRendererIds, rowRenderers]);
+
+    const { leadingControlColumns, expandedRowTrailingColumns } = useControlColumns({
+      enabledRowRenderers,
+      expandedDoc,
+      gridRows: discoverGridRows,
+      refetch,
+      timelineId,
+      trGroupRef,
+    });
 
     // Event details
     const handleOnEventDetailPanelOpened = useCallback(
@@ -305,30 +297,6 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
       [discoverGridRows, handleOnEventDetailPanelOpened, handleOnPanelClosed]
     );
 
-    const toggleShowNotesEvent = useCallback(
-      (eventId: string) => {
-        const row = notesMap[eventId];
-        if (row?.isAddingNote !== true) {
-          dispatch(
-            timelineActions.setNotesMap({
-              id: timelineId,
-              notesMap: {
-                ...notesMap,
-                [eventId]: { ...row, isAddingNote: true },
-              },
-            })
-          );
-          setTimeout(() => {
-            const notesButtonElement = trGroupRef.current?.querySelector<HTMLButtonElement>(
-              `.${NOTES_BUTTON_CLASS_NAME}`
-            );
-            notesButtonElement?.focus();
-          }, 0);
-        }
-      },
-      [notesMap, dispatch, timelineId]
-    );
-
     // Sorting
     const sortingColumns = useMemo(() => {
       return (
@@ -357,19 +325,6 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
       [dispatch, timelineId]
     );
 
-    // Row renderers
-    const enabledRowRenderers = useMemo(() => {
-      if (
-        excludedRowRendererIds &&
-        excludedRowRendererIds.length === Object.keys(RowRendererId).length
-      )
-        return [];
-
-      if (!excludedRowRendererIds) return rowRenderers;
-
-      return rowRenderers.filter((rowRenderer) => !excludedRowRendererIds.includes(rowRenderer.id));
-    }, [excludedRowRendererIds, rowRenderers]);
-
     const getRowRendererBody = useCallback(
       ({
         Cell,

From 5dff62fb22d4191a7639d91ac6b881f37920a995 Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Wed, 24 Jan 2024 15:49:26 -0500
Subject: [PATCH 03/65] wip column

---
 .../common/api/timeline/model/api.ts          |   2 +
 .../sourcerer/get_sourcerer_data_view.tsx     |  35 ++
 .../common/lib/cell_actions/field_value.tsx   |  42 +-
 .../body/renderers/formatted_field.tsx        |   8 +-
 .../body/renderers/formatted_field_udt.tsx    | 452 ++++++++++++++++++
 .../body/renderers/get_formatted_field.ts     |  97 ++++
 .../data_table/data_table.tsx                 | 183 ++++---
 7 files changed, 708 insertions(+), 111 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/public/common/components/sourcerer/get_sourcerer_data_view.tsx
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_field.ts

diff --git a/x-pack/plugins/security_solution/common/api/timeline/model/api.ts b/x-pack/plugins/security_solution/common/api/timeline/model/api.ts
index 5237772ef5e1c1..ea2eabcd1b5e17 100644
--- a/x-pack/plugins/security_solution/common/api/timeline/model/api.ts
+++ b/x-pack/plugins/security_solution/common/api/timeline/model/api.ts
@@ -266,6 +266,8 @@ export enum RowRendererId {
   zeek = 'zeek',
 }
 
+export const AvailableRowRendererCount = Object.keys(RowRendererId).length;
+
 const RowRendererIdRuntimeType = stringEnum(RowRendererId, 'RowRendererId');
 
 /**
diff --git a/x-pack/plugins/security_solution/public/common/components/sourcerer/get_sourcerer_data_view.tsx b/x-pack/plugins/security_solution/public/common/components/sourcerer/get_sourcerer_data_view.tsx
new file mode 100644
index 00000000000000..30c727b2727563
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/sourcerer/get_sourcerer_data_view.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useMemo } from 'react';
+import { DataView } from '@kbn/data-views-plugin/public';
+import { useSourcererDataView } from '../../containers/sourcerer';
+import { useKibana } from '../../lib/kibana';
+import { SourcererScopeName } from '../../store/sourcerer/model';
+
+// TODO: Define what the difference is between this and the sourcererDataView returned
+// from useSourcererDataView
+export const useGetScopedSourcererDataView = ({
+  sourcererScope,
+}: {
+  sourcererScope: SourcererScopeName;
+}) => {
+  const {
+    services: { fieldFormats },
+  } = useKibana();
+  const { sourcererDataView } = useSourcererDataView(sourcererScope);
+
+  const dataView = useMemo(() => {
+    if (sourcererDataView != null) {
+      return new DataView({ spec: sourcererDataView, fieldFormats });
+    } else {
+      return undefined;
+    }
+  }, [sourcererDataView, fieldFormats]);
+
+  return dataView;
+};
diff --git a/x-pack/plugins/security_solution/public/common/lib/cell_actions/field_value.tsx b/x-pack/plugins/security_solution/public/common/lib/cell_actions/field_value.tsx
index 087732479c3014..1207d1887756f4 100644
--- a/x-pack/plugins/security_solution/public/common/lib/cell_actions/field_value.tsx
+++ b/x-pack/plugins/security_solution/public/common/lib/cell_actions/field_value.tsx
@@ -8,7 +8,7 @@
 import type { EuiDataGridColumnCellActionProps } from '@elastic/eui';
 import { head, getOr, get, isEmpty } from 'lodash/fp';
 import React, { useMemo } from 'react';
-
+import type { BrowserField, TimelineItem } from '@kbn/timelines-plugin/common';
 import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
 import { getPageRowIndex } from '@kbn/securitysolution-data-table';
 import type { ColumnHeaderOptions } from '../../../../common/types';
@@ -18,6 +18,7 @@ import { FormattedFieldValue } from '../../../timelines/components/timeline/body
 import { parseValue } from '../../../timelines/components/timeline/body/renderers/parse_value';
 import { EmptyComponent, getLinkColumnDefinition } from './helpers';
 import { getField, getFieldKey } from '../../../helpers';
+import { DataTableRecord } from '@kbn/discover-utils/types';
 
 const useFormattedFieldProps = ({
   rowIndex,
@@ -26,6 +27,7 @@ const useFormattedFieldProps = ({
   columnId,
   header,
   data,
+  unifiedDataTableRow,
 }: {
   rowIndex: number;
   data: TimelineNonEcsData[][];
@@ -33,20 +35,22 @@ const useFormattedFieldProps = ({
   header?: ColumnHeaderOptions;
   columnId: string;
   pageSize: number;
+  unifiedDataTableRow?: DataTableRecord & TimelineItem;
 }) => {
   const pageRowIndex = getPageRowIndex(rowIndex, pageSize);
-  const ecs = ecsData[pageRowIndex];
-  const link = getLinkColumnDefinition(columnId, header?.type, header?.linkField);
-  const linkField = header?.linkField ? header?.linkField : link?.linkField;
-  const linkValues = header && getOr([], linkField ?? '', ecs);
-  const eventId = (header && get('_id' ?? '', ecs)) || '';
+
   const rowData = useMemo(() => {
     return {
-      data: data[pageRowIndex],
+      data: unifiedDataTableRow ? unifiedDataTableRow.data : data[pageRowIndex],
       fieldName: columnId,
     };
-  }, [pageRowIndex, columnId, data]);
+  }, [pageRowIndex, columnId, data, unifiedDataTableRow]);
+  const ecs = unifiedDataTableRow ? unifiedDataTableRow.ecs :  ecsData[pageRowIndex];
 
+  const link = getLinkColumnDefinition(columnId, header?.type, header?.linkField);
+  const linkField = header?.linkField ? header?.linkField : link?.linkField;
+  const linkValues = header && getOr([], linkField ?? '', ecs);
+  const eventId = (header && get('_id' ?? '', ecs)) || '';
   const values = useGetMappedNonEcsValue(rowData);
   const value = parseValue(head(values));
   const title = values && values.length > 1 ? `${link?.label}: ${value}` : link?.label;
@@ -71,6 +75,7 @@ const useFormattedFieldProps = ({
       values,
       title,
       linkValue: head<string>(normalizedLinkValue),
+
     };
   } else {
     return {
@@ -88,27 +93,35 @@ const useFormattedFieldProps = ({
   }
 };
 
+
+
 export const FieldValueCell = ({
+  browserFieldsByName,
   data,
   ecsData,
   header,
   scopeId,
   pageSize,
   closeCellPopover,
+  unifiedDataTableRows,
 }: {
+  browserFieldsByName?: { [fieldName: string]: Partial<BrowserField> },
   data: TimelineNonEcsData[][];
   ecsData: Ecs[];
   header?: ColumnHeaderOptions;
   scopeId: string;
   pageSize: number;
   closeCellPopover?: () => void;
+  unifiedDataTableRows?: Array<DataTableRecord & TimelineItem>;
 }) => {
-  if (header !== undefined) {
+  if (header !== undefined || browserFieldsByName) {
     return function FieldValue({
       rowIndex,
       columnId,
       Component,
     }: EuiDataGridColumnCellActionProps) {
+      let columnHeader = browserFieldsByName ? browserFieldsByName[columnId] : header;
+      const unifiedDataTableRow = unifiedDataTableRows ? unifiedDataTableRows[rowIndex] : undefined;
       const {
         pageRowIndex,
         link,
@@ -120,10 +133,13 @@ export const FieldValueCell = ({
         fieldFormat,
         fieldType,
         linkValue,
-      } = useFormattedFieldProps({ rowIndex, pageSize, ecsData, columnId, header, data });
+      } = useFormattedFieldProps({ unifiedDataTableRow, rowIndex, pageSize, ecsData, columnId, header: columnHeader, data });
 
       const showEmpty = useMemo(() => {
         const hasLink = link !== undefined && values && !isEmpty(value);
+        if (unifiedDataTableRow) {
+          return hasLink !== true;
+        }
         if (pageRowIndex >= data.length) {
           return true;
         } else {
@@ -133,14 +149,14 @@ export const FieldValueCell = ({
 
       return showEmpty === false ? (
         <FormattedFieldValue
-          Component={Component}
+          Component={unifiedDataTableRow ? undefined : Component}
           contextId={`expanded-value-${columnId}-row-${pageRowIndex}-${scopeId}`}
           eventId={eventId}
           fieldFormat={fieldFormat}
-          isAggregatable={header.aggregatable ?? false}
+          isAggregatable={columnHeader?.aggregatable ?? false}
           fieldName={fieldName}
           fieldType={fieldType}
-          isButton={true}
+          isButton={unifiedDataTableRow ? false : true}
           isDraggable={false}
           value={value}
           truncate={false}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx
index 7062fc7afbb78c..53d0178676f4b1 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field.tsx
@@ -64,6 +64,7 @@ const FormattedFieldValueComponent: React.FC<{
   eventId: string;
   isAggregatable?: boolean;
   isObjectArray?: boolean;
+  isUnifiedDataTable?: boolean,
   fieldFormat?: string;
   fieldName: string;
   fieldType?: string;
@@ -82,6 +83,7 @@ const FormattedFieldValueComponent: React.FC<{
   eventId,
   fieldFormat,
   isAggregatable = false,
+  isUnifiedDataTable,
   fieldName,
   fieldType = '',
   isButton,
@@ -122,9 +124,10 @@ const FormattedFieldValueComponent: React.FC<{
         className={classNames}
         fieldName={fieldName}
         value={value}
-        tooltipProps={{ position: 'bottom', className: dataGridToolTipOffset }}
+        tooltipProps={isUnifiedDataTable ? undefined : { position: 'bottom', className: dataGridToolTipOffset }}
       />
     );
+    if (isUnifiedDataTable) return date;
     return isDraggable ? (
       <DefaultDraggable
         field={fieldName}
@@ -285,7 +288,7 @@ const FormattedFieldValueComponent: React.FC<{
       title,
       value,
     });
-  } else if (columnNamesNotDraggable.includes(fieldName) || !isDraggable) {
+  } else if (isUnifiedDataTable || columnNamesNotDraggable.includes(fieldName) || !isDraggable) {
     return truncate && !isEmpty(value) ? (
       <TruncatableText data-test-subj="truncatable-message">
         <EuiToolTip
@@ -310,6 +313,7 @@ const FormattedFieldValueComponent: React.FC<{
       <span data-test-subj={`formatted-field-${fieldName}`}>{value}</span>
     );
   } else {
+    // This should not be reached for the unified data table
     const contentValue = getOrEmptyTagFromValue(value);
     const content = truncate ? <TruncatableText>{contentValue}</TruncatableText> : contentValue;
     return (
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
new file mode 100644
index 00000000000000..9c9b13a47860bd
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
@@ -0,0 +1,452 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+/* eslint-disable complexity */
+
+import type { EuiButtonEmpty, EuiButtonIcon, EuiDataGridCellValueElementProps } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+import { head, getOr, get, isEmpty, isNumber } from 'lodash/fp';
+import React, { useMemo } from 'react';
+
+import type { BrowserField, ColumnHeaderOptions, TimelineItem } from '@kbn/timelines-plugin/common';
+import {} from '@kbn/timelines-plugin/common';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+import { EndpointAgentStatusById } from '../../../../../common/components/endpoint/endpoint_agent_status';
+import { INDICATOR_REFERENCE } from '../../../../../../common/cti/constants';
+import { Bytes, BYTES_FORMAT } from './bytes';
+import { Duration, EVENT_DURATION_FIELD_NAME } from '../../../duration';
+import { FormattedDate } from '../../../../../common/components/formatted_date';
+import { FormattedIp } from '../../../formatted_ip';
+import { Port } from '../../../../../explore/network/components/port';
+import { PORT_NAMES } from '../../../../../explore/network/components/port/helpers';
+import { TruncatableText } from '../../../../../common/components/truncatable_text';
+import {
+  DATE_FIELD_TYPE,
+  HOST_NAME_FIELD_NAME,
+  USER_NAME_FIELD_NAME,
+  IP_FIELD_TYPE,
+  MESSAGE_FIELD_NAME,
+  EVENT_MODULE_FIELD_NAME,
+  RULE_REFERENCE_FIELD_NAME,
+  SIGNAL_RULE_NAME_FIELD_NAME,
+  REFERENCE_URL_FIELD_NAME,
+  EVENT_URL_FIELD_NAME,
+  SIGNAL_STATUS_FIELD_NAME,
+  AGENT_STATUS_FIELD_NAME,
+  GEO_FIELD_TYPE,
+} from './constants';
+import { RenderRuleName, renderEventModule, renderUrl } from './formatted_field_helpers';
+import { RuleStatus } from './rule_status';
+import { HostName } from './host_name';
+import { UserName } from './user_name';
+import {
+  EmptyComponent,
+  getLinkColumnDefinition,
+} from '../../../../../common/lib/cell_actions/helpers';
+import { useGetMappedNonEcsValue } from '../data_driven_columns';
+import { parseValue } from './parse_value';
+import { getField, getFieldKey } from '../../../../../helpers';
+
+// simple black-list to prevent dragging and dropping fields such as message name
+const columnNamesNotDraggable = [MESSAGE_FIELD_NAME];
+
+export const useFormattedFieldProps = ({
+  dataTableRow,
+  columnId,
+  header,
+}: {
+  dataTableRow: DataTableRecord & TimelineItem;
+  header?: ColumnHeaderOptions;
+  columnId: string;
+}) => {
+  const ecs = dataTableRow.ecs;
+  const link = getLinkColumnDefinition(columnId, header?.type, header?.linkField);
+  const linkField = header?.linkField ? header?.linkField : link?.linkField;
+  const linkValues = header && getOr([], linkField ?? '', ecs);
+  const eventId = (header && get('_id' ?? '', ecs)) || '';
+  const rowData = useMemo(() => {
+    return {
+      data: dataTableRow,
+      fieldName: columnId,
+    };
+  }, [columnId, dataTableRow]);
+
+  const values = useGetMappedNonEcsValue({ data: rowData.data.data, fieldName: rowData.fieldName });
+  const value = parseValue(head(values));
+  const title = values && values.length > 1 ? `${link?.label}: ${value}` : link?.label;
+  // if linkField is defined but link values is empty, it's possible we are trying to look for a column definition for an old event set
+  if (linkField !== undefined && linkValues.length === 0 && values !== undefined) {
+    const normalizedLinkValue = getField(ecs, linkField);
+    const normalizedLinkField = getFieldKey(ecs, linkField);
+    const normalizedColumnId = getFieldKey(ecs, columnId);
+    const normalizedLink = getLinkColumnDefinition(
+      normalizedColumnId,
+      header?.type,
+      normalizedLinkField
+    );
+    return {
+      link: normalizedLink,
+      eventId,
+      fieldFormat: header?.format || '',
+      fieldName: normalizedColumnId,
+      fieldType: header?.type || '',
+      value: parseValue(head(normalizedColumnId)),
+      values,
+      title,
+      linkValue: head<string>(normalizedLinkValue),
+    };
+  } else {
+    return {
+      link,
+      eventId,
+      fieldFormat: header?.format || '',
+      fieldName: columnId,
+      fieldType: header?.type || '',
+      value,
+      values,
+      title,
+      linkValue: head<string>(linkValues),
+    };
+  }
+};
+
+const FieldValueCell = (
+  dataTableRows: Array<DataTableRecord & TimelineItem>,
+  scopeId: string,
+  browserFieldsByName: { [fieldName: string]: Partial<BrowserField> },
+  closeCellPopover?: () => void
+) => {
+  return function FieldValue(props: EuiDataGridCellValueElementProps) {
+    const header = browserFieldsByName[props.columnId] as ColumnHeaderOptions;
+    const { link, eventId, value, values, title, fieldName, fieldFormat, fieldType, linkValue } =
+      useFormattedFieldProps({
+        dataTableRow: dataTableRows[props.rowIndex],
+        columnId: props.columnId,
+        header,
+      });
+
+    const showEmpty = useMemo(() => {
+      const hasLink = link !== undefined && values && !isEmpty(value);
+      return hasLink !== true;
+    }, [link, value, values]);
+
+    return (header.linkField && showEmpty === false) || !header.linkField ? (
+      <FormattedFieldValue
+        contextId={`expanded-value-${props.columnId}-row-${props.rowIndex}-${scopeId}`}
+        eventId={eventId}
+        fieldFormat={fieldFormat}
+        isAggregatable={header?.aggregatable ?? false}
+        fieldName={fieldName}
+        fieldType={fieldType}
+        isButton={false}
+        isDraggable={false}
+        value={value}
+        truncate={false}
+        title={title}
+        linkValue={linkValue}
+        onClick={closeCellPopover}
+      />
+    ) : (
+      // data grid expects each cell action always return an element, it crashes if returns null
+      EmptyComponent
+    );
+  };
+};
+
+export const getFormattedFields = ({
+  dataTableRows,
+  headers,
+  scopeId,
+  closeCellPopover,
+  browserFieldsByName,
+}: {
+  dataTableRows: Array<DataTableRecord & TimelineItem>;
+  headers?: ColumnHeaderOptions[];
+  scopeId: string;
+  closeCellPopover?: () => void;
+  browserFieldsByName: { [fieldName: string]: Partial<BrowserField> };
+}) => {
+  const ipFieldTypeFields =
+    headers
+      ?.filter((h) => browserFieldsByName[h.id] && browserFieldsByName[h.id].type === IP_FIELD_TYPE)
+      .map((c) => c.id) ?? [];
+  const geoFieldTypeFields =
+    headers
+      ?.filter(
+        (h) => browserFieldsByName[h.id] && browserFieldsByName[h.id].type === GEO_FIELD_TYPE
+      )
+      .map((c) => c.id) ?? [];
+  const byteFormattedFields =
+    headers
+      ?.filter(
+        (h) => browserFieldsByName[h.id] && browserFieldsByName[h.id].format === BYTES_FORMAT
+      )
+      .map((c) => c.id) ?? [];
+  return [
+    ...PORT_NAMES,
+    EVENT_DURATION_FIELD_NAME,
+    HOST_NAME_FIELD_NAME,
+    USER_NAME_FIELD_NAME,
+    SIGNAL_RULE_NAME_FIELD_NAME,
+    EVENT_MODULE_FIELD_NAME,
+    SIGNAL_STATUS_FIELD_NAME,
+    AGENT_STATUS_FIELD_NAME,
+    RULE_REFERENCE_FIELD_NAME,
+    REFERENCE_URL_FIELD_NAME,
+    EVENT_URL_FIELD_NAME,
+    INDICATOR_REFERENCE,
+    ...ipFieldTypeFields,
+    ...geoFieldTypeFields,
+    ...byteFormattedFields,
+    ...columnNamesNotDraggable,
+  ].reduce(
+    (
+      obj: Record<string, (props: EuiDataGridCellValueElementProps) => React.ReactNode>,
+      field: string
+    ) => {
+      obj[field] = FieldValueCell(dataTableRows, scopeId, browserFieldsByName, closeCellPopover);
+      return obj;
+    },
+    {}
+  );
+};
+
+const FormattedFieldValueComponent: React.FC<{
+  asPlainText?: boolean;
+  /** `Component` is only used with `EuiDataGrid`; the grid keeps a reference to `Component` for show / hide functionality */
+  Component?: typeof EuiButtonEmpty | typeof EuiButtonIcon;
+  contextId: string;
+  eventId: string;
+  isAggregatable?: boolean;
+  isObjectArray?: boolean;
+  fieldFormat?: string;
+  fieldName: string;
+  fieldType?: string;
+  isButton?: boolean;
+  isDraggable?: boolean;
+  onClick?: () => void;
+  onClickAriaLabel?: string;
+  title?: string;
+  truncate?: boolean;
+  value: string | number | undefined | null;
+  linkValue?: string | null | undefined;
+}> = ({
+  asPlainText,
+  Component,
+  contextId,
+  eventId,
+  fieldFormat,
+  isAggregatable = false,
+  fieldName,
+  fieldType = '',
+  isButton,
+  isObjectArray = false,
+  isDraggable = true,
+  onClick,
+  onClickAriaLabel,
+  title,
+  truncate = true,
+  value,
+  linkValue,
+}) => {
+  if (isObjectArray || asPlainText) {
+    return <span data-test-subj={`formatted-field-${fieldName}`}>{value}</span>;
+  } else if (fieldType === IP_FIELD_TYPE) {
+    return (
+      <FormattedIp
+        Component={Component}
+        eventId={eventId}
+        contextId={contextId}
+        fieldName={fieldName}
+        fieldType={fieldType}
+        isAggregatable={isAggregatable}
+        isButton={isButton}
+        isDraggable={isDraggable}
+        value={!isNumber(value) ? value : String(value)}
+        onClick={onClick}
+        title={title}
+        truncate={truncate}
+      />
+    );
+  } else if (fieldType === GEO_FIELD_TYPE) {
+    return <>{value}</>;
+  } else if (fieldType === DATE_FIELD_TYPE) {
+    const classNames = truncate ? 'eui-textTruncate eui-alignMiddle' : undefined;
+    return isDraggable ? (
+      <FormattedDate className={classNames} fieldName={fieldName} value={value} />
+    ) : (
+      <FormattedDate className={classNames} fieldName={fieldName} value={value} />
+    );
+  } else if (PORT_NAMES.some((portName) => fieldName === portName)) {
+    return (
+      <Port
+        Component={Component}
+        contextId={contextId}
+        eventId={eventId}
+        fieldName={fieldName}
+        fieldType={fieldType}
+        isAggregatable={isAggregatable}
+        isDraggable={isDraggable}
+        title={title}
+        value={`${value}`}
+      />
+    );
+  } else if (fieldName === EVENT_DURATION_FIELD_NAME) {
+    return (
+      <Duration
+        contextId={contextId}
+        eventId={eventId}
+        fieldName={fieldName}
+        fieldType={fieldType}
+        isAggregatable={isAggregatable}
+        isDraggable={isDraggable}
+        value={`${value}`}
+      />
+    );
+  } else if (fieldName === HOST_NAME_FIELD_NAME) {
+    return (
+      <HostName
+        Component={Component}
+        contextId={contextId}
+        eventId={eventId}
+        fieldType={fieldType}
+        isAggregatable={isAggregatable}
+        fieldName={fieldName}
+        isDraggable={isDraggable}
+        isButton={isButton}
+        onClick={onClick}
+        title={title}
+        value={value}
+      />
+    );
+  } else if (fieldName === USER_NAME_FIELD_NAME) {
+    return (
+      <UserName
+        Component={Component}
+        contextId={contextId}
+        eventId={eventId}
+        fieldName={fieldName}
+        fieldType={fieldType}
+        isAggregatable={isAggregatable}
+        isDraggable={isDraggable}
+        isButton={isButton}
+        onClick={onClick}
+        title={title}
+        value={value}
+      />
+    );
+  } else if (fieldFormat === BYTES_FORMAT) {
+    return (
+      <Bytes
+        contextId={contextId}
+        eventId={eventId}
+        fieldName={fieldName}
+        fieldType={fieldType}
+        isAggregatable={isAggregatable}
+        isDraggable={isDraggable}
+        value={`${value}`}
+      />
+    );
+  } else if (fieldName === SIGNAL_RULE_NAME_FIELD_NAME) {
+    return (
+      <RenderRuleName
+        Component={Component}
+        contextId={contextId}
+        eventId={eventId}
+        fieldName={fieldName}
+        fieldType={fieldType}
+        isAggregatable={isAggregatable}
+        isDraggable={isDraggable}
+        isButton={isButton}
+        onClick={onClick}
+        linkValue={linkValue}
+        title={title}
+        truncate={truncate}
+        value={value}
+      />
+    );
+  } else if (fieldName === EVENT_MODULE_FIELD_NAME) {
+    return renderEventModule({
+      contextId,
+      eventId,
+      fieldName,
+      fieldType,
+      isAggregatable,
+      isDraggable,
+      linkValue,
+      truncate,
+      value,
+    });
+  } else if (fieldName === SIGNAL_STATUS_FIELD_NAME) {
+    return (
+      <RuleStatus
+        contextId={contextId}
+        eventId={eventId}
+        fieldName={fieldName}
+        fieldType={fieldType}
+        isAggregatable={isAggregatable}
+        isDraggable={isDraggable}
+        value={value}
+        onClick={onClick}
+        onClickAriaLabel={onClickAriaLabel}
+        iconType={isButton ? 'arrowDown' : undefined}
+        iconSide={isButton ? 'right' : undefined}
+      />
+    );
+  } else if (fieldName === AGENT_STATUS_FIELD_NAME) {
+    return (
+      <EndpointAgentStatusById
+        endpointAgentId={String(value ?? '')}
+        data-test-subj="endpointHostAgentStatus"
+      />
+    );
+  } else if (
+    [
+      RULE_REFERENCE_FIELD_NAME,
+      REFERENCE_URL_FIELD_NAME,
+      EVENT_URL_FIELD_NAME,
+      INDICATOR_REFERENCE,
+    ].includes(fieldName)
+  ) {
+    return renderUrl({
+      contextId,
+      Component,
+      eventId,
+      fieldName,
+      fieldType,
+      isAggregatable,
+      isDraggable,
+      truncate,
+      title,
+      value,
+    });
+  } else {
+    return truncate && !isEmpty(value) ? (
+      <TruncatableText data-test-subj="truncatable-message">
+        <EuiToolTip
+          data-test-subj="message-tool-tip"
+          content={
+            <EuiFlexGroup direction="column" gutterSize="none">
+              <EuiFlexItem grow={false}>
+                <span>{fieldName}</span>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <span>{value}</span>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          }
+        >
+          <span data-test-subj={`formatted-field-${fieldName}`}>{value}</span>
+        </EuiToolTip>
+      </TruncatableText>
+    ) : (
+      <span data-test-subj={`formatted-field-${fieldName}`}>{value}</span>
+    );
+  }
+};
+
+export const FormattedFieldValue = React.memo(FormattedFieldValueComponent);
\ No newline at end of file
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_field.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_field.ts
new file mode 100644
index 00000000000000..62fb80a2e82e74
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_field.ts
@@ -0,0 +1,97 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+/* eslint-disable complexity */
+
+import type { EuiDataGridCellValueElementProps } from '@elastic/eui';
+import React from 'react';
+import type { BrowserField, ColumnHeaderOptions, TimelineItem } from '@kbn/timelines-plugin/common';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+
+import { INDICATOR_REFERENCE } from '../../../../../../common/cti/constants';
+import { BYTES_FORMAT } from './bytes';
+import { EVENT_DURATION_FIELD_NAME } from '../../../duration';
+import { PORT_NAMES } from '../../../../../explore/network/components/port/helpers';
+import {
+  HOST_NAME_FIELD_NAME,
+  USER_NAME_FIELD_NAME,
+  IP_FIELD_TYPE,
+  MESSAGE_FIELD_NAME,
+  EVENT_MODULE_FIELD_NAME,
+  RULE_REFERENCE_FIELD_NAME,
+  SIGNAL_RULE_NAME_FIELD_NAME,
+  REFERENCE_URL_FIELD_NAME,
+  EVENT_URL_FIELD_NAME,
+  SIGNAL_STATUS_FIELD_NAME,
+  AGENT_STATUS_FIELD_NAME,
+  GEO_FIELD_TYPE,
+} from './constants';
+import { FieldValueCell } from '../../../../../common/lib/cell_actions/field_value';
+
+// simple black-list to prevent dragging and dropping fields such as message name
+const columnNamesNotDraggable = [MESSAGE_FIELD_NAME];
+
+// Used by the UnifiedDataTable
+
+export const getFormattedFields = ({
+  unifiedDataTableRows,
+  headers,
+  scopeId,
+  closeCellPopover,
+  browserFieldsByName,
+}: {
+  unifiedDataTableRows: Array<DataTableRecord & TimelineItem>;
+  headers?: ColumnHeaderOptions[];
+  scopeId: string;
+  closeCellPopover?: () => void;
+  browserFieldsByName: { [fieldName: string]: Partial<BrowserField> };
+}) => {
+  const ipFieldTypeFields =
+    headers
+      ?.filter((h) => browserFieldsByName[h.id] && browserFieldsByName[h.id].type === IP_FIELD_TYPE)
+      .map((c) => c.id) ?? [];
+  const geoFieldTypeFields =
+    headers
+      ?.filter(
+        (h) => browserFieldsByName[h.id] && browserFieldsByName[h.id].type === GEO_FIELD_TYPE
+      )
+      .map((c) => c.id) ?? [];
+  const byteFormattedFields =
+    headers
+      ?.filter(
+        (h) => browserFieldsByName[h.id] && browserFieldsByName[h.id].format === BYTES_FORMAT
+      )
+      .map((c) => c.id) ?? [];
+  return [
+    ...PORT_NAMES,
+    EVENT_DURATION_FIELD_NAME,
+    HOST_NAME_FIELD_NAME,
+    USER_NAME_FIELD_NAME,
+    SIGNAL_RULE_NAME_FIELD_NAME,
+    EVENT_MODULE_FIELD_NAME,
+    SIGNAL_STATUS_FIELD_NAME,
+    AGENT_STATUS_FIELD_NAME,
+    RULE_REFERENCE_FIELD_NAME,
+    REFERENCE_URL_FIELD_NAME,
+    EVENT_URL_FIELD_NAME,
+    INDICATOR_REFERENCE,
+    ...ipFieldTypeFields,
+    ...geoFieldTypeFields,
+    ...byteFormattedFields,
+    ...columnNamesNotDraggable,
+  ].reduce(
+    (
+      obj: Record<string, (props: EuiDataGridCellValueElementProps) => React.ReactNode>,
+      field: string
+    ) => {
+      obj[field] = FieldValueCell({ unifiedDataTableRows, scopeId, browserFieldsByName, closeCellPopover });
+      return obj;
+    },
+    {}
+  );
+};
+
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/data_table.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/data_table.tsx
index 62a262acf62750..59c5aae64bea13 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/data_table.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/data_table.tsx
@@ -5,30 +5,24 @@
  * 2.0.
  */
 
-import {
-  type EuiDataGridControlColumn,
-  type EuiDataGridCustomBodyProps,
-} from '@elastic/eui';
+import { type EuiDataGridControlColumn, type EuiDataGridCustomBodyProps } from '@elastic/eui';
 import React, { memo, useMemo, useCallback, useState, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { generateFilters } from '@kbn/data-plugin/public';
 import type { DataViewField } from '@kbn/data-plugin/common';
 import { flattenHit } from '@kbn/data-plugin/common';
-import { DataView } from '@kbn/data-views-plugin/public';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
 import type { UnifiedDataTableSettingsColumn } from '@kbn/unified-data-table';
 import { UnifiedDataTable, useColumns, DataLoadingState } from '@kbn/unified-data-table';
 import type { SortOrder } from '@kbn/saved-search-plugin/public';
 import { popularizeField } from '@kbn/unified-data-table/src/utils/popularize_field';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
-import { RowRendererId } from '../../../../../../common/api/timeline';
+import type { DataView } from '@kbn/data-views-plugin/public';
+import { AvailableRowRendererCount } from '../../../../../../common/api/timeline';
 import { getAllFieldsByName } from '../../../../../common/containers/source';
 import { StatefulEventContext } from '../../../../../common/components/events_viewer/stateful_event_context';
-import type {
-  ExpandedDetailTimeline,
-  ExpandedDetailType,
-} from '../../../../../../common/types';
+import type { ExpandedDetailTimeline, ExpandedDetailType } from '../../../../../../common/types';
 import type { TimelineItem } from '../../../../../../common/search_strategy';
 import { useKibana } from '../../../../../common/lib/kibana';
 import { defaultHeaders } from '../../body/column_headers/default_headers';
@@ -47,7 +41,7 @@ import { activeTimeline } from '../../../../containers/active_timeline_context';
 import { DetailsPanel } from '../../../side_panel';
 import { SecurityCellActionsTrigger } from '../../../../../actions/constants';
 import { getColumnHeaderUnified } from '../../body/column_headers/helpers';
-import { getFormattedFields } from '../body/renderers/formatted_field_udt';
+import { getFormattedFields } from '../../body/renderers/unified_components/formatted_field';
 import { timelineBodySelector } from '../../body/selectors';
 import ToolbarAdditionalControls from './toolbar_additional_controls';
 import { StyledTimelineUnifiedDataTable, StyledEuiProgress } from './styles';
@@ -55,11 +49,12 @@ import CustomGridBodyControls from './render_custom_body';
 import { timelineDefaults } from '../../../../store/defaults';
 import { timelineActions } from '../../../../store';
 import { useControlColumns } from './use_control_columns';
+import { useGetScopedSourcererDataView } from '../../../../../common/components/sourcerer/get_sourcerer_data_view';
 
 export const SAMPLE_SIZE_SETTING = 500;
 const DataGridMemoized = React.memo(UnifiedDataTable);
 
-interface Props {
+interface CommonDataTableProps {
   columns: ColumnHeaderOptions[];
   rowRenderers: RowRenderer[];
   timelineId: string;
@@ -80,10 +75,15 @@ interface Props {
   isTextBasedQuery?: boolean;
 }
 
+interface DataTableProps extends CommonDataTableProps {
+  dataView: DataView
+}
+
 /* eslint-disable react/display-name */
-export const TimelineDataTableComponent: React.FC<Props> = memo(
+export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
   ({
     columns,
+    dataView,
     activeTab,
     timelineId,
     itemsPerPage,
@@ -130,31 +130,23 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
     const [fetchedPage, setFechedPage] = useState<number>(0);
 
     // const [sampleSize, setSampleSize] = useState<number>(SAMPLE_SIZE_SETTING);
-    const { browserFields, runtimeMappings, sourcererDataView } = useSourcererDataView(
-      SourcererScopeName.timeline
-    );
-    const dataView = useMemo(() => {
-      if (sourcererDataView != null) {
-        return new DataView({ spec: sourcererDataView, fieldFormats });
-      } else {
-        return undefined;
-      }
-    }, [sourcererDataView, fieldFormats]);
+    const { browserFields, runtimeMappings } = useSourcererDataView(SourcererScopeName.timeline);
+
     const showTimeCol = useMemo(() => !!dataView && !!dataView.timeFieldName, [dataView]);
-    const defaultColumns = useMemo(() => {
-      return columns.map((c) => c.id);
+    const tableSettings = useMemo(() => {
+      const columnSettings = columns.reduce((memo, item) => {
+        if (item.initialWidth) {
+          memo[item.id] = { width: item.initialWidth };
+        }
+        return memo;
+      }, {} as Record<string, UnifiedDataTableSettingsColumn>);
+
+      return {
+        columns: columnSettings,
+      };
     }, [columns]);
-    const tableSettings = useMemo(
-      () => ({
-        columns: columns.reduce((v, s) => {
-          if (s.initialWidth) {
-            v[s.id] = { width: s.initialWidth };
-          }
-          return v;
-        }, {} as Record<string, UnifiedDataTableSettingsColumn>),
-      }),
-      [columns]
-    );
+    const defaultColumnIds = useMemo(() => columns.map((c) => c.id), [columns]);
+
     // const [notesMap, setNotesMap] = useState<NotesMap>({});
     const trGroupRef = useRef<HTMLDivElement | null>(null);
 
@@ -204,7 +196,7 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
         [data, dispatch, id, queryFields, selectedEventIds]
       );*/
 
-    const discoverGridRows: Array<DataTableRecord & TimelineItem> = useMemo(
+    const tableRows: Array<DataTableRecord & TimelineItem> = useMemo(
       () =>
         events.map(({ _id, _index, ecs, data }) => {
           const _source = ecs as unknown as Record<string, unknown>;
@@ -223,29 +215,48 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
       [events, dataView]
     );
 
-    // Row renderers
-    const enabledRowRenderers = useMemo(() => {
-      if (
-        excludedRowRendererIds &&
-        excludedRowRendererIds.length === Object.keys(RowRendererId).length
-      )
-        return [];
+    ///////////// ROW RENDERERS START ///////////////
 
+    const enabledRowRenderers = useMemo(() => {
       if (!excludedRowRendererIds) return rowRenderers;
+      if (excludedRowRendererIds.length === AvailableRowRendererCount) {
+        return [];
+      }
 
       return rowRenderers.filter((rowRenderer) => !excludedRowRendererIds.includes(rowRenderer.id));
     }, [excludedRowRendererIds, rowRenderers]);
 
+    const getRowRendererBody = useCallback(
+      ({
+        Cell,
+        visibleRowData,
+        visibleColumns,
+        setCustomGridBodyProps,
+      }: EuiDataGridCustomBodyProps) => (
+        <CustomGridBodyControls
+          tableRows={tableRows}
+          Cell={Cell}
+          visibleColumns={visibleColumns}
+          visibleRowData={visibleRowData}
+          setCustomGridBodyProps={setCustomGridBodyProps}
+          enabledRowRenderers={enabledRowRenderers}
+          timelineId={timelineId}
+        />
+      ),
+      [tableRows, enabledRowRenderers, timelineId]
+    );
+
     const { leadingControlColumns, expandedRowTrailingColumns } = useControlColumns({
       enabledRowRenderers,
       expandedDoc,
-      gridRows: discoverGridRows,
+      gridRows: tableRows,
       refetch,
       timelineId,
       trGroupRef,
     });
 
-    // Event details
+    //////////////// START FLYOUT DETAILS ////////////////
+
     const handleOnEventDetailPanelOpened = useCallback(
       (eventData: DataTableRecord & TimelineItem) => {
         const updatedExpandedDetail: ExpandedDetailType = {
@@ -285,7 +296,7 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
     const onSetExpandedDoc = useCallback(
       (newDoc?: DataTableRecord) => {
         if (newDoc) {
-          const timelineDoc = discoverGridRows.find((r) => r.id === newDoc.id);
+          const timelineDoc = tableRows.find((r) => r.id === newDoc.id);
           setExpandedDoc(timelineDoc);
           if (timelineDoc) {
             handleOnEventDetailPanelOpened(timelineDoc);
@@ -294,62 +305,39 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
           handleOnPanelClosed();
         }
       },
-      [discoverGridRows, handleOnEventDetailPanelOpened, handleOnPanelClosed]
+      [tableRows, handleOnEventDetailPanelOpened, handleOnPanelClosed]
     );
 
-    // Sorting
-    const sortingColumns = useMemo(() => {
-      return (
-        (sort?.map((sortingCol) => [
-          sortingCol.columnId,
-          sortingCol.sortDirection as 'asc' | 'desc',
-        ]) as SortOrder[]) || []
-      );
+    //////////////// START SORTING ////////////////
+
+    const sortingColumns: SortOrder[] = useMemo(() => {
+      return sort ? sort.map((sortingCol) => [sortingCol.columnId, sortingCol.sortDirection]) : [];
     }, [sort]);
+
     const onSort = useCallback(
       (nextSort: string[][]) => {
         dispatch(
           timelineActions.updateSort({
             id: timelineId,
-            sort: nextSort.map(
-              ([id, direction]) =>
-                ({
-                  columnId: id,
-                  columnType: 'keyword',
-                  sortDirection: direction,
-                } as SortColumnTimeline)
-            ),
+            sort: nextSort.map(([id, direction]) => {
+              const currentColumn = columns.find((column) => column.id === id);
+              const columnType = currentColumn ? currentColumn.type : 'keyword';
+              return {
+                columnId: id,
+                columnType,
+                sortDirection: direction,
+              } as SortColumnTimeline;
+            }),
           })
         );
       },
       [dispatch, timelineId]
     );
 
-    const getRowRendererBody = useCallback(
-      ({
-        Cell,
-        visibleRowData,
-        visibleColumns,
-        setCustomGridBodyProps,
-      }: EuiDataGridCustomBodyProps) => (
-        <CustomGridBodyControls
-          discoverGridRows={discoverGridRows}
-          Cell={Cell}
-          visibleColumns={visibleColumns}
-          visibleRowData={visibleRowData}
-          setCustomGridBodyProps={setCustomGridBodyProps}
-          enabledRowRenderers={enabledRowRenderers}
-          timelineId={timelineId}
-        />
-      ),
-      [discoverGridRows, enabledRowRenderers, timelineId]
-    );
-
     // Columns management
     const { onSetColumns } = useColumns({
       capabilities,
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      dataView: dataView!,
+      dataView,
       dataViews,
       setAppState: (newState: { columns: string[]; sort?: string[][] }) => {
         if (newState.sort) {
@@ -362,7 +350,7 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
         }
       },
       useNewFieldsApi: true,
-      columns: defaultColumns,
+      columns: defaultColumnIds,
       sort: sortingColumns,
     });
 
@@ -400,9 +388,7 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
 
     const onChangeItemsPerPage = useCallback(
       (itemsChangedPerPage) =>
-        dispatch(
-          timelineActions.updateItemsPerPage({ id: timelineId, itemsPerPage: itemsChangedPerPage })
-        ),
+        dispatch(timelineActions.updateItemsPerPage({ id: timelineId, itemsPerPage: itemsChangedPerPage })),
       [dispatch, timelineId]
     );
 
@@ -411,12 +397,12 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
     const customColumnRenderers = useMemo(
       () =>
         getFormattedFields({
-          dataTableRows: discoverGridRows,
+          dataTableRows: tableRows,
           scopeId: 'timeline',
           headers: columns,
           browserFieldsByName,
         }),
-      [browserFieldsByName, columns, discoverGridRows]
+      [browserFieldsByName, columns, tableRows]
     );
 
     const handleFetchMoreRecords = useCallback(() => {
@@ -484,7 +470,7 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
           <DataGridMemoized
             ariaLabelledBy="timelineDocumentsAriaLabel"
             className={'udtTimeline'}
-            columns={defaultColumns}
+            columns={defaultColumnIds}
             expandedDoc={expandedDoc}
             dataView={dataView}
             loadingState={dataLoadingState}
@@ -492,7 +478,7 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
             onResize={onResizeDataGrid}
             onSetColumns={onSetColumns}
             onSort={!isTextBasedQuery ? onSort : undefined}
-            rows={discoverGridRows}
+            rows={tableRows}
             sampleSizeState={sampleSize || 500}
             onUpdateSampleSize={onUpdateSampleSize}
             setExpandedDoc={onSetExpandedDoc}
@@ -542,6 +528,11 @@ export const TimelineDataTableComponent: React.FC<Props> = memo(
   }
 );
 
-export const TimelineDataTable = React.memo(TimelineDataTableComponent);
-// eslint-disable-next-line import/no-default-export
+export const TimelineDataTable: React.FC<CommonDataTableProps> = memo((props) => {
+  const dataView = useGetScopedSourcererDataView({ sourcererScope: SourcererScopeName.timeline });
+  return  dataView ? <TimelineDataTableComponent dataView={dataView} {...props} /> : <div>{'TO DO: SHOW ERROR COMPONENT'}</div>
+})
+
+
+
 export { TimelineDataTable as default };

From 72cfff55c459073e8f236309d05e06c5adf1f279 Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Fri, 26 Jan 2024 14:54:49 -0500
Subject: [PATCH 04/65] got table visible

---
 .../timeline/body/column_headers/helpers.ts   |  11 +
 ...atted_field.ts => get_formatted_fields.ts} |  11 +-
 .../timeline/query_tab_content/index.tsx      | 296 ++++++-----
 .../data_table/{data_table.tsx => index.tsx}  |  14 +-
 .../data_table/last_updated.tsx               |  41 ++
 .../data_table/render_custom_body.tsx         | 191 +++++++
 .../data_table/row_details.tsx                | 152 ++++++
 .../toolbar_additional_controls.tsx           |  99 ++++
 .../data_table/translations.ts                |  57 +++
 .../unified_components/default_headers.tsx    |  50 ++
 .../timeline/unified_components/index.tsx     | 481 ++++++++++++++++++
 .../unified_components/resizable_layout.tsx   |  85 ++++
 .../timeline/unified_components/styles.tsx    | 148 ++++++
 .../public/timelines/containers/index.tsx     |  37 +-
 14 files changed, 1536 insertions(+), 137 deletions(-)
 rename x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/{get_formatted_field.ts => get_formatted_fields.ts} (93%)
 rename x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/{data_table.tsx => index.tsx} (97%)
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/render_custom_body.tsx
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/row_details.tsx
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/default_headers.tsx
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/styles.tsx

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.ts
index 0ecfcb16f71265..6022f1c2b78196 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.ts
@@ -64,3 +64,14 @@ export const getColumnHeader = (
   initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   ...(defaultHeaders.find((c) => c.id === fieldName) ?? {}),
 });
+
+
+
+export const getUnifiedDataTableColumnHeader = (
+  fieldName: string,
+  defaultHeaders: ColumnHeaderOptions[]
+): ColumnHeaderOptions => ({
+  columnHeaderType: defaultColumnHeaderType,
+  id: fieldName,
+  ...(defaultHeaders.find((c) => c.id === fieldName) ?? {}),
+});
\ No newline at end of file
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_field.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_fields.ts
similarity index 93%
rename from x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_field.ts
rename to x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_fields.ts
index 62fb80a2e82e74..a5b954e2654024 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_field.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_fields.ts
@@ -88,10 +88,17 @@ export const getFormattedFields = ({
       obj: Record<string, (props: EuiDataGridCellValueElementProps) => React.ReactNode>,
       field: string
     ) => {
-      obj[field] = FieldValueCell({ unifiedDataTableRows, scopeId, browserFieldsByName, closeCellPopover });
+      obj[field] = FieldValueCell({
+        data: [],
+        ecsData: [],
+        pageSize: 0,
+        unifiedDataTableRows,
+        scopeId,
+        browserFieldsByName,
+        closeCellPopover,
+      });
       return obj;
     },
     {}
   );
 };
-
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
index 308ba6038ec5e5..a1d14ed8ed2f67 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
@@ -14,7 +14,7 @@ import {
   EuiBadge,
 } from '@elastic/eui';
 import { isEmpty } from 'lodash/fp';
-import React, { useMemo, useEffect, useCallback } from 'react';
+import React, { useMemo, useEffect, useCallback, useState } from 'react';
 import styled from 'styled-components';
 import type { Dispatch } from 'redux';
 import type { ConnectedProps } from 'react-redux';
@@ -24,6 +24,9 @@ import { InPortal } from 'react-reverse-portal';
 
 import { FilterManager } from '@kbn/data-plugin/public';
 import { getEsQueryConfig } from '@kbn/data-plugin/common';
+import { DataLoadingState } from '@kbn/unified-data-table';
+import { RootDragDropProvider } from '@kbn/dom-drag-drop';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import type { ControlColumnProps } from '../../../../../common/types';
 import { InputsModelId } from '../../../../common/store/inputs/constants';
 import { useInvalidFilterQuery } from '../../../../common/hooks/use_invalid_filter_query';
@@ -54,13 +57,20 @@ import { timelineDefaults } from '../../../store/defaults';
 import { useSourcererDataView } from '../../../../common/containers/sourcerer';
 import { useTimelineEventsCountPortal } from '../../../../common/hooks/use_timeline_events_count';
 import type { TimelineModel } from '../../../store/model';
-import { useTimelineFullScreen } from '../../../../common/containers/use_full_screen';
 import { DetailsPanel } from '../../side_panel';
-import { ExitFullScreen } from '../../../../common/components/exit_full_screen';
 import { getDefaultControlColumn } from '../body/control_columns';
 import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
 import { useLicense } from '../../../../common/hooks/use_license';
 import { HeaderActions } from '../../../../common/components/header_actions/header_actions';
+import { UnifiedTimelineComponent } from '../unified_components';
+import { defaultUdtHeaders } from '../unified_components/default_headers';
+import { StyledTableFlexGroup, StyledTableFlexItem } from '../unified_components/styles';
+import { activeTimeline } from '../../../containers/active_timeline_context';
+
+const TimelineHeaderContainer = styled.div`
+  margin-top: 6px;
+`;
+
 const QueryTabHeaderContainer = styled.div`
   width: 100%;
 `;
@@ -72,10 +82,6 @@ const StyledEuiFlyoutHeader = styled(EuiFlyoutHeader)`
   box-shadow: none;
   display: flex;
   flex-direction: column;
-
-  &.euiFlyoutHeader {
-    ${({ theme }) => `padding: ${theme.eui.euiSizeS} 0 0 0;`}
-  }
 `;
 
 const StyledEuiFlyoutBody = styled(EuiFlyoutBody)`
@@ -178,12 +184,17 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   timerangeKind,
 }) => {
   const dispatch = useDispatch();
+  const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
+    'unifiedComponentsInTimelineEnabled'
+  );
+
+  const [pageRows, setPageRows] = useState<TimelineItem[][]>([]);
+  const rows = useMemo(() => pageRows.flat(), [pageRows]);
   const { portalNode: timelineEventsCountPortalNode } = useTimelineEventsCountPortal();
-  const { setTimelineFullScreen, timelineFullScreen } = useTimelineFullScreen();
   const {
     browserFields,
     dataViewId,
-    loading: loadingSourcerer,
+    loading: isSourcererLoading,
     indexPattern,
     runtimeMappings,
     // important to get selectedPatterns from useSourcererDataView
@@ -196,11 +207,11 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   const ACTION_BUTTON_COUNT = isEnterprisePlus ? 6 : 5;
 
   const getManageTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
-  const currentTimeline = useDeepEqualSelector((state) =>
+
+  const { sampleSize = 10, filterManager: activeFilterManager } = useDeepEqualSelector((state) =>
     getManageTimeline(state, timelineId ?? TimelineId.active)
   );
 
-  const activeFilterManager = currentTimeline.filterManager;
   const filterManager = useMemo(
     () => activeFilterManager ?? new FilterManager(uiSettings),
     [activeFilterManager, uiSettings]
@@ -243,20 +254,29 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   const canQueryTimeline = useMemo(
     () =>
       combinedQueries != null &&
-      loadingSourcerer != null &&
-      !loadingSourcerer &&
+      isSourcererLoading != null &&
+      !isSourcererLoading &&
       !isEmpty(start) &&
       !isEmpty(end) &&
       combinedQueries?.filterQuery !== undefined,
-    [combinedQueries, end, loadingSourcerer, start]
+    [combinedQueries, end, isSourcererLoading, start]
   );
 
-  const getTimelineQueryFields = () => {
-    const columnsHeader = isEmpty(columns) ? defaultHeaders : columns;
-    const columnFields = columnsHeader.map((c) => c.id);
+  const columnsHeader = useMemo(() => {
+    return isEmpty(columns)
+      ? unifiedComponentsInTimelineEnabled
+        ? defaultUdtHeaders
+        : defaultHeaders
+      : columns;
+  }, [columns, unifiedComponentsInTimelineEnabled]);
 
-    return [...columnFields, ...requiredFieldsForActions];
-  };
+  const defaultColumns = useMemo(() => {
+    return columnsHeader.map((c) => c.id);
+  }, [columnsHeader]);
+
+  const getTimelineQueryFields = useCallback(() => {
+    return [...defaultColumns, ...requiredFieldsForActions];
+  }, [defaultColumns]);
 
   const timelineQuerySortField = sort.map(({ columnId, columnType, esTypes, sortDirection }) => ({
     field: columnId,
@@ -274,9 +294,14 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     );
   }, [dispatch, filterManager, timelineId]);
 
+  const limit = useMemo(
+    () => (unifiedComponentsInTimelineEnabled ? sampleSize : itemsPerPage),
+    [itemsPerPage, unifiedComponentsInTimelineEnabled, sampleSize]
+  );
+
   const [
-    isQueryLoading,
-    { events, inspect, totalCount, pageInfo, loadPage, refreshedAt, refetch },
+    dataLoadingState,
+    { events, inspect, totalCount, refetch, loadPage, pageInfo, refreshedAt },
   ] = useTimelineEvents({
     dataViewId,
     endDate: end,
@@ -285,7 +310,7 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     id: timelineId,
     indexNames: selectedPatterns,
     language: kqlQuery.language,
-    limit: itemsPerPage,
+    limit,
     runtimeMappings,
     skip: !canQueryTimeline,
     sort: timelineQuerySortField,
@@ -293,6 +318,24 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     timerangeKind,
   });
 
+  const isQueryLoading = useMemo(() => {
+    return (
+      dataLoadingState === DataLoadingState.loading ||
+      dataLoadingState === DataLoadingState.loadingMore
+    );
+  }, [dataLoadingState]);
+
+  useEffect(() => {
+    setPageRows((currentPageRows) => {
+      if (pageInfo.activePage !== 0 && currentPageRows[pageInfo.activePage]?.length) {
+        return currentPageRows;
+      }
+      const newPageRows = pageInfo.activePage === 0 ? [] : [...currentPageRows];
+      newPageRows[pageInfo.activePage] = events;
+      return newPageRows;
+    });
+  }, [events, pageInfo.activePage]);
+
   const handleOnPanelClosed = useCallback(() => {
     onEventClosed({ tabType: TimelineTabs.query, id: timelineId });
   }, [onEventClosed, timelineId]);
@@ -301,10 +344,10 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     dispatch(
       timelineActions.updateIsLoading({
         id: timelineId,
-        isLoading: isQueryLoading || loadingSourcerer,
+        isLoading: isQueryLoading || isSourcererLoading,
       })
     );
-  }, [loadingSourcerer, timelineId, isQueryLoading, dispatch]);
+  }, [isSourcererLoading, timelineId, dispatch, dataLoadingState, isQueryLoading]);
 
   const leadingControlColumns = useMemo(
     () =>
@@ -315,6 +358,23 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     [ACTION_BUTTON_COUNT]
   );
 
+  const header = useMemo(
+    () => (
+      <StyledEuiFlyoutHeader data-test-subj={`${activeTab}-tab-flyout-header`} hasBorder={false}>
+        <TimelineHeaderContainer data-test-subj="timelineHeader">
+          <QueryTabHeader
+            filterManager={filterManager}
+            show={show && activeTab === TimelineTabs.query}
+            showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg}
+            status={status}
+            timelineId={timelineId}
+          />
+        </TimelineHeaderContainer>
+      </StyledEuiFlyoutHeader>
+    ),
+    [activeTab, filterManager, show, showCallOutUnauthorizedMsg, status, timelineId]
+  );
+
   // NOTE: The timeline is blank after browser FORWARD navigation (after using back button to navigate to
   // the previous page from the timeline), yet we still see total count. This is because the timeline
   // is not getting refreshed when using browser navigation.
@@ -323,7 +383,11 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   return (
     <>
       <InPortal node={timelineEventsCountPortalNode}>
-        {showEventsCountBadge ? <EventsCountBadge>{totalCount}</EventsCountBadge> : null}
+        {showEventsCountBadge ? (
+          <EventsCountBadge data-test-subj="query_tab_events_count_badge">
+            {totalCount}
+          </EventsCountBadge>
+        ) : null}
       </InPortal>
       <TimelineRefetch
         id={`${timelineId}-${TimelineTabs.query}`}
@@ -333,103 +397,99 @@ export const QueryTabContentComponent: React.FC<Props> = ({
         refetch={refetch}
         skip={!canQueryTimeline}
       />
-      <FullWidthFlexGroup gutterSize="none">
-        <ScrollableFlexItem grow={2}>
-          <StyledEuiFlyoutHeader
-            data-test-subj={`${activeTab}-tab-flyout-header`}
-            hasBorder={false}
-          >
-            <EuiFlexGroup gutterSize="s" direction="column">
-              {timelineFullScreen && setTimelineFullScreen != null && (
-                <EuiFlexItem>
-                  <EuiFlexGroup alignItems="center" gutterSize="s">
-                    <ExitFullScreen
-                      fullScreen={timelineFullScreen}
-                      setFullScreen={setTimelineFullScreen}
-                    />
-                  </EuiFlexGroup>
-                </EuiFlexItem>
-              )}
-              <EuiFlexItem data-test-subj="timeline-date-picker-container">
-                <QueryTabHeaderContainer data-test-subj="timelineHeader">
-                  <QueryTabHeader
-                    filterManager={filterManager}
-                    show={show && activeTab === TimelineTabs.query}
-                    showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg}
-                    status={status}
-                    timelineId={timelineId}
-                  />
-                </QueryTabHeaderContainer>
-              </EuiFlexItem>
-              {/* TODO: This is a temporary solution to hide the KPIs until lens components play nicely with timelines */}
-              {/* https://github.com/elastic/kibana/issues/17156 */}
-              {/* <EuiFlexItem grow={false}> */}
-              {/*   <TimelineKpi timelineId={timelineId} /> */}
-              {/* </EuiFlexItem> */}
-            </EuiFlexGroup>
-          </StyledEuiFlyoutHeader>
-          <EventDetailsWidthProvider>
-            <StyledEuiFlyoutBody
-              data-test-subj={`${TimelineTabs.query}-tab-flyout-body`}
-              className="timeline-flyout-body"
-            >
-              <StatefulBody
-                activePage={pageInfo.activePage}
-                browserFields={browserFields}
-                data={isBlankTimeline ? EMPTY_EVENTS : events}
-                id={timelineId}
-                refetch={refetch}
-                renderCellValue={renderCellValue}
+      {unifiedComponentsInTimelineEnabled ? (
+        <StyledTableFlexGroup direction="column" gutterSize="s">
+          <StyledTableFlexItem grow={false}>{header}</StyledTableFlexItem>
+          <StyledTableFlexItem>
+            <RootDragDropProvider>
+              <UnifiedTimelineComponent
+                columns={columnsHeader}
                 rowRenderers={rowRenderers}
+                timelineId={timelineId}
+                itemsPerPage={itemsPerPage}
+                itemsPerPageOptions={itemsPerPageOptions}
                 sort={sort}
-                tabType={TimelineTabs.query}
-                totalPages={calculateTotalPages({
-                  itemsCount: totalCount,
-                  itemsPerPage,
-                })}
-                leadingControlColumns={leadingControlColumns}
-                trailingControlColumns={trailingControlColumns}
+                events={rows}
+                refetch={refetch}
+                dataLoadingState={dataLoadingState}
+                totalCount={isBlankTimeline ? 0 : totalCount}
+                onEventClosed={onEventClosed}
+                expandedDetail={expandedDetail}
+                showExpandedDetails={showExpandedDetails}
+                onChangePage={loadPage}
+                activeTab={activeTab}
+                updatedAt={refreshedAt}
+                isTextBasedQuery={false}
               />
-            </StyledEuiFlyoutBody>
-
-            <StyledEuiFlyoutFooter
-              data-test-subj={`${TimelineTabs.query}-tab-flyout-footer`}
-              className="timeline-flyout-footer"
-            >
-              {!isBlankTimeline && (
-                <Footer
-                  activePage={pageInfo?.activePage ?? 0}
-                  data-test-subj="timeline-footer"
-                  updatedAt={refreshedAt}
-                  height={footerHeight}
+            </RootDragDropProvider>
+          </StyledTableFlexItem>
+        </StyledTableFlexGroup>
+      ) : (
+        <FullWidthFlexGroup direction="column" gutterSize="s">
+          <ScrollableFlexItem grow={2}>
+            {header}
+            <EventDetailsWidthProvider>
+              <StyledEuiFlyoutBody
+                data-test-subj={`${TimelineTabs.query}-tab-flyout-body`}
+                className="timeline-flyout-body"
+              >
+                <StatefulBody
+                  activePage={pageInfo.activePage}
+                  browserFields={browserFields}
+                  data={isBlankTimeline ? EMPTY_EVENTS : events}
                   id={timelineId}
-                  isLive={isLive}
-                  isLoading={isQueryLoading || loadingSourcerer}
-                  itemsCount={isBlankTimeline ? 0 : events.length}
-                  itemsPerPage={itemsPerPage}
-                  itemsPerPageOptions={itemsPerPageOptions}
-                  onChangePage={loadPage}
-                  totalCount={isBlankTimeline ? 0 : totalCount}
+                  refetch={refetch}
+                  renderCellValue={renderCellValue}
+                  rowRenderers={rowRenderers}
+                  sort={sort}
+                  tabType={TimelineTabs.query}
+                  totalPages={calculateTotalPages({
+                    itemsCount: totalCount,
+                    itemsPerPage,
+                  })}
+                  leadingControlColumns={leadingControlColumns}
+                  trailingControlColumns={trailingControlColumns}
                 />
-              )}
-            </StyledEuiFlyoutFooter>
-          </EventDetailsWidthProvider>
-        </ScrollableFlexItem>
-        {showExpandedDetails && (
-          <>
-            <VerticalRule />
-            <ScrollableFlexItem grow={1}>
-              <DetailsPanel
-                browserFields={browserFields}
-                handleOnPanelClosed={handleOnPanelClosed}
-                runtimeMappings={runtimeMappings}
-                tabType={TimelineTabs.query}
-                scopeId={timelineId}
-              />
-            </ScrollableFlexItem>
-          </>
-        )}
-      </FullWidthFlexGroup>
+              </StyledEuiFlyoutBody>
+              <StyledEuiFlyoutFooter
+                data-test-subj={`${TimelineTabs.query}-tab-flyout-footer`}
+                className="timeline-flyout-footer"
+              >
+                {!isBlankTimeline && (
+                  <Footer
+                    activePage={pageInfo?.activePage ?? 0}
+                    data-test-subj="timeline-footer"
+                    updatedAt={refreshedAt}
+                    height={footerHeight}
+                    id={timelineId}
+                    isLive={isLive}
+                    isLoading={isQueryLoading || isSourcererLoading}
+                    itemsCount={isBlankTimeline ? 0 : events.length}
+                    itemsPerPage={itemsPerPage}
+                    itemsPerPageOptions={itemsPerPageOptions}
+                    onChangePage={loadPage}
+                    totalCount={isBlankTimeline ? 0 : totalCount}
+                  />
+                )}
+              </StyledEuiFlyoutFooter>
+            </EventDetailsWidthProvider>
+          </ScrollableFlexItem>
+          {showExpandedDetails && (
+            <>
+              <VerticalRule />
+              <ScrollableFlexItem grow={1}>
+                <DetailsPanel
+                  browserFields={browserFields}
+                  handleOnPanelClosed={handleOnPanelClosed}
+                  runtimeMappings={runtimeMappings}
+                  tabType={TimelineTabs.query}
+                  scopeId={timelineId}
+                />
+              </ScrollableFlexItem>
+            </>
+          )}
+        </FullWidthFlexGroup>
+      )}
     </>
   );
 };
@@ -532,4 +592,4 @@ const QueryTabContent = connector(
 );
 
 // eslint-disable-next-line import/no-default-export
-export { QueryTabContent as default };
+export { QueryTabContent as default };
\ No newline at end of file
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/data_table.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
similarity index 97%
rename from x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/data_table.tsx
rename to x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index 59c5aae64bea13..f3cd86f9a9bcf2 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/data_table.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -40,11 +40,11 @@ import { useSourcererDataView } from '../../../../../common/containers/sourcerer
 import { activeTimeline } from '../../../../containers/active_timeline_context';
 import { DetailsPanel } from '../../../side_panel';
 import { SecurityCellActionsTrigger } from '../../../../../actions/constants';
-import { getColumnHeaderUnified } from '../../body/column_headers/helpers';
-import { getFormattedFields } from '../../body/renderers/unified_components/formatted_field';
+import { getUnifiedDataTableColumnHeader } from '../../body/column_headers/helpers';
+import { getFormattedFields } from '../../body/renderers/get_formatted_fields';
 import { timelineBodySelector } from '../../body/selectors';
 import ToolbarAdditionalControls from './toolbar_additional_controls';
-import { StyledTimelineUnifiedDataTable, StyledEuiProgress } from './styles';
+import { StyledTimelineUnifiedDataTable, StyledEuiProgress } from '../styles';
 import CustomGridBodyControls from './render_custom_body';
 import { timelineDefaults } from '../../../../store/defaults';
 import { timelineActions } from '../../../../store';
@@ -234,7 +234,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
         setCustomGridBodyProps,
       }: EuiDataGridCustomBodyProps) => (
         <CustomGridBodyControls
-          tableRows={tableRows}
+          unifiedDataTableRows={tableRows}
           Cell={Cell}
           visibleColumns={visibleColumns}
           visibleRowData={visibleRowData}
@@ -344,7 +344,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
           onSort(newState.sort);
         } else {
           const columnsStates = newState.columns.map((columnId) =>
-            getColumnHeaderUnified(columnId, defaultHeaders)
+            getUnifiedDataTableColumnHeader(columnId, defaultHeaders)
           );
           dispatch(timelineActions.updateColumns({ id: timelineId, columns: columnsStates }));
         }
@@ -397,7 +397,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
     const customColumnRenderers = useMemo(
       () =>
         getFormattedFields({
-          dataTableRows: tableRows,
+          unifiedDataTableRows: tableRows,
           scopeId: 'timeline',
           headers: columns,
           browserFieldsByName,
@@ -456,6 +456,8 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       dataPluginContract,
     ]);
 
+    console.log("TABLE ROWS: ", tableRows, dataView);
+
     if (!dataView) {
       return null;
     }
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx
new file mode 100644
index 00000000000000..4fa7eff020dc5e
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+
+import { useEventDetailsWidthContext } from '../../../../../common/components/events_viewer/event_details_width_context';
+import { useKibana } from '../../../../../common/lib/kibana';
+
+export const isCompactFooter = (width: number): boolean => width < 600;
+
+interface FixedWidthLastUpdatedContainerProps {
+  updatedAt: number;
+}
+
+export const FixedWidthLastUpdatedContainer = React.memo<FixedWidthLastUpdatedContainerProps>(
+  ({ updatedAt }) => {
+    const { timelines } = useKibana().services;
+    const width = useEventDetailsWidthContext();
+    const compact = useMemo(() => isCompactFooter(width), [width]);
+
+    return updatedAt > 0 ? (
+      <FixedWidthLastUpdated data-test-subj="fixed-width-last-updated" compact={compact}>
+        {timelines.getLastUpdated({ updatedAt, compact })}
+      </FixedWidthLastUpdated>
+    ) : null;
+  }
+);
+
+FixedWidthLastUpdatedContainer.displayName = 'FixedWidthLastUpdatedContainer';
+
+const FixedWidthLastUpdated = styled.span<{ compact?: boolean }>`
+  width: ${({ compact }) => (!compact ? 200 : 25)}px;
+  overflow: hidden;
+`;
+
+FixedWidthLastUpdated.displayName = 'FixedWidthLastUpdated';
\ No newline at end of file
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/render_custom_body.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/render_custom_body.tsx
new file mode 100644
index 00000000000000..c6e05cf3403cc7
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/render_custom_body.tsx
@@ -0,0 +1,191 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import type { EuiDataGridCustomBodyProps } from '@elastic/eui';
+import { EuiFlexItem } from '@elastic/eui';
+import React, { memo, useMemo } from 'react';
+import { css } from '@emotion/react';
+
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+import { useSelector } from 'react-redux';
+import type { State } from '../../../../../common/store';
+import type { RowRenderer, NotesMap } from '../../../../../../common/types/timeline';
+import { timelineBodySelector } from '../../body/selectors';
+import { StatefulRowRenderer } from '../../body/events/stateful_row_renderer';
+import { EventsTrSupplement } from '../../styles';
+import { formatAlertToEcsSignal } from '../../../../../common/utils/alerts';
+import { timelineDefaults } from '../../../../store/defaults';
+
+interface Props {
+  unifiedDataTableRows: DataTableRecord[];
+  timelineId: string;
+  enabledRowRenderers: RowRenderer[];
+}
+
+interface ExpandedRowProps {
+  ariaRowIndex: number;
+  containerRef: React.MutableRefObject<HTMLDivElement | null>;
+  event: DataTableRecord;
+  lastFocusedAriaColIndex: number;
+  rowRenderers: RowRenderer[];
+  timelineId: string;
+}
+
+const ExpandedRow: React.FC<ExpandedRowProps> = memo(
+  ({ ariaRowIndex, containerRef, event, lastFocusedAriaColIndex, rowRenderers, timelineId }) => {
+    const esHitToTimelineEvent = useMemo(() => {
+      const docFieldsToTimelineItem = event.raw.fields
+        ? Object.entries(event.raw.fields).map(([field, value]) => ({
+            field,
+            value,
+          }))
+        : [];
+      return {
+        ecs: formatAlertToEcsSignal(event.flattened),
+        data: docFieldsToTimelineItem,
+        _id: event.id,
+      };
+    }, [event]);
+    return (
+      <EuiFlexItem grow={false}>
+        <EventsTrSupplement>
+          <StatefulRowRenderer
+            ariaRowindex={ariaRowIndex}
+            containerRef={containerRef}
+            event={esHitToTimelineEvent}
+            lastFocusedAriaColindex={lastFocusedAriaColIndex}
+            rowRenderers={rowRenderers}
+            timelineId={timelineId}
+          />
+        </EventsTrSupplement>
+      </EuiFlexItem>
+    );
+  }
+);
+
+ExpandedRow.displayName = 'ExpandedRow';
+
+interface CellProps {
+  row: DataTableRecord;
+  rowIndex: number;
+  enabledRowRenderers: RowRenderer[];
+  notesMap: NotesMap;
+  eventIdToNoteIds: Record<string, string[]>;
+  Cell: EuiDataGridCustomBodyProps['Cell'];
+  visibleCols: EuiDataGridCustomBodyProps['visibleColumns'];
+}
+
+const UnifiedCell: React.FC<CellProps> = memo(
+  ({ row, rowIndex, visibleCols, Cell, notesMap, enabledRowRenderers, eventIdToNoteIds }) => {
+    return (
+      <div
+        role="row"
+        className="euiDataGridRow"
+        css={css`
+          width: fit-content;
+          left: 0px;
+          right: 0px;
+        `}
+        key={row.id}
+      >
+        <div
+          className="rowCellWrapper"
+          css={css`
+            display: flex;
+          `}
+        >
+          {visibleCols.map((column, colIndex) => {
+            // actions cells
+            if (
+              column.id.includes('timeline') ||
+              column.id === 'openDetails' ||
+              column.id === 'select'
+            ) {
+              return (
+                <Cell
+                  colIndex={colIndex}
+                  visibleRowIndex={rowIndex}
+                  key={`${rowIndex},${colIndex}`}
+                />
+              );
+            }
+            // Render the rest of the cells normally
+            if (column.id !== 'row-details') {
+              // TODO: using renderCellValue to render the draggable cell. We need to fix the styling though
+              return (
+                <Cell
+                  colIndex={colIndex}
+                  visibleRowIndex={rowIndex}
+                  key={`${rowIndex},${colIndex}`}
+                />
+              );
+            }
+            return null;
+          })}
+        </div>
+        {/* {enabledRowRenderers.length > 0 ? (
+          <ExpandedRow
+            ariaRowIndex={rowIndex}
+            containerRef={null}
+            event={row}
+            rowRenderers={enabledRowRenderers}
+            timelineId={'timeline-1'}
+          />
+        ) : null} */}
+        {/* This renders the last row which is our expandableRow and where we put row rendering and notes */}
+        {enabledRowRenderers.length > 0 ||
+        (notesMap && notesMap[row.id] && notesMap[row.id].isAddingNote === true) ||
+        eventIdToNoteIds[row.id] ? (
+          <Cell
+            colIndex={visibleCols.length - 1} // If the row is being shown, it should always be the last index
+            visibleRowIndex={rowIndex}
+          />
+        ) : null}
+      </div>
+    );
+  }
+);
+
+UnifiedCell.displayName = 'UnifiedCell';
+
+export const RenderCustomGridBodyComponent: React.FC<Props & EuiDataGridCustomBodyProps> = ({
+  unifiedDataTableRows,
+  visibleRowData,
+  visibleColumns: visibleCols,
+  Cell,
+  enabledRowRenderers,
+  timelineId,
+}) => {
+  // Ensure we're displaying correctly-paginated rows
+  const visibleRows = unifiedDataTableRows.slice(visibleRowData.startRow, visibleRowData.endRow);
+
+  const { timeline: { eventIdToNoteIds, notesMap } = timelineDefaults } = useSelector(
+    (state: State) => timelineBodySelector(state, timelineId)
+  );
+
+  return (
+    <>
+      {visibleRows.map((row, rowIndex) => {
+        return (
+          <UnifiedCell
+            row={row}
+            rowIndex={rowIndex}
+            key={row.id}
+            notesMap={notesMap}
+            enabledRowRenderers={enabledRowRenderers}
+            visibleCols={visibleCols}
+            eventIdToNoteIds={eventIdToNoteIds}
+            Cell={Cell}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+export const CustomGridBodyComponent = React.memo(RenderCustomGridBodyComponent);
+// eslint-disable-next-line import/no-default-export
+export { CustomGridBodyComponent as default };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/row_details.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/row_details.tsx
new file mode 100644
index 00000000000000..47f4f3fc664f36
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/row_details.tsx
@@ -0,0 +1,152 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React, { useMemo, useCallback, useRef, memo, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import type { EuiDataGridSetCellProps } from '@elastic/eui';
+import type { TimelineItem } from '../../../../../../common/search_strategy';
+import type { State } from '../../../../../common/store';
+import type { RowRenderer } from '../../../../../../common/types/timeline';
+import { appSelectors } from '../../../../../common/store';
+import { useDeepEqualSelector } from '../../../../../common/hooks/use_selector';
+import { EventsTrSupplement } from '../../styles';
+import { NoteCards } from '../../../notes/note_cards';
+import { eventIsPinned } from '../../body/helpers';
+import type { TimelineResultNote } from '../../../open_timeline/types';
+import { timelineBodySelector } from '../../body/selectors';
+import { StatefulRowRenderer } from '../../body/events/stateful_row_renderer';
+import { timelineDefaults } from '../../../../store/defaults';
+import { timelineActions, timelineSelectors } from '../../../../store';
+
+/** This offset begins at two, because the header row counts as "row 1", and aria-rowindex starts at "1" */
+const ARIA_ROW_INDEX_OFFSET = 2;
+
+interface Props {
+  rowIndex: number;
+  event: TimelineItem;
+  setCellProps?: (props: EuiDataGridSetCellProps) => void;
+  timelineId: string;
+  enabledRowRenderers: RowRenderer[];
+}
+
+export const RowDetailsComponent: React.FC<Props> = memo(
+  ({ rowIndex, event, setCellProps, timelineId, enabledRowRenderers }) => {
+    const dispatch = useDispatch();
+    const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
+    const timeline = useDeepEqualSelector((state) =>
+      timelineId ? getTimeline(state, timelineId) : null
+    );
+
+    const onToggleShowNotes = useCallback(() => {
+      const row = timeline?.notesMap[event._id];
+      if (row?.isAddingNote !== false) {
+        dispatch(
+          timelineActions.setNotesMap({
+            id: timelineId,
+            notesMap: {
+              ...timeline?.notesMap,
+              [event._id]: { ...row, isAddingNote: false },
+            },
+          })
+        );
+      }
+    }, [event._id, dispatch, timeline?.notesMap, timelineId]);
+
+    useEffect(() => {
+      if (setCellProps) {
+        setCellProps({ style: { width: '100%', height: 'auto' } });
+      }
+    }, [setCellProps]);
+
+    const { timeline: { eventIdToNoteIds, pinnedEventIds } = timelineDefaults } = useSelector(
+      (state: State) => timelineBodySelector(state, timelineId)
+    );
+
+    const associateNote = useCallback(
+      (noteId: string, eventId: string) => {
+        dispatch(timelineActions.addNoteToEvent({ eventId, id: timelineId, noteId }));
+        const isEventPinned = eventIsPinned({
+          eventId,
+          pinnedEventIds,
+        });
+        if (!isEventPinned) {
+          dispatch(timelineActions.pinEvent({ id: timelineId, eventId: event._id }));
+        }
+      },
+      [dispatch, event._id, pinnedEventIds, timelineId]
+    );
+
+    const getNotesByIds = useMemo(() => appSelectors.notesByIdsSelector(), []);
+    const notesById = useDeepEqualSelector(getNotesByIds);
+    const getNotes = useCallback(
+      (eventId: string) => {
+        const noteIds: string[] = eventIdToNoteIds[eventId] || [];
+        return appSelectors.getNotes(notesById, noteIds).map((note) => ({
+          savedObjectId: note.saveObjectId,
+          note: note.note,
+          noteId: note.id,
+          updated: (note.lastEdit ?? note.created).getTime(),
+          updatedBy: note.user,
+        })) as unknown as TimelineResultNote[];
+      },
+      [eventIdToNoteIds, notesById]
+    );
+
+    const showAddNote = useMemo(() => {
+      return (timeline?.notesMap && timeline?.notesMap[event._id]?.isAddingNote) ?? false;
+    }, [event._id, timeline?.notesMap]);
+
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    // notes here
+    // console.log(eventIdToNoteIds, notesById, getNotes(event._id), notesMap);
+    // The custom row details is actually a trailing control column cell with
+    // a hidden header. This is important for accessibility and markup reasons
+    // @see https://fuschia-stretch.glitch.me/ for more
+    return (
+      <>
+        <EventsTrSupplement
+          className="siemEventsTable__trSupplement--notes"
+          data-test-subj="event-notes-flex-item"
+          $display="block"
+        >
+          <NoteCards
+            ariaRowindex={rowIndex + ARIA_ROW_INDEX_OFFSET}
+            associateNote={(noteId: string) => associateNote(noteId, event._id)}
+            data-test-subj="note-cards"
+            notes={getNotes(event._id)}
+            showAddNote={showAddNote}
+            toggleShowAddNote={() => onToggleShowNotes()}
+            eventIdToNoteIds={eventIdToNoteIds}
+            timelineId={timelineId}
+          />
+        </EventsTrSupplement>
+        {enabledRowRenderers.length > 0 ? (
+          <EuiFlexGroup gutterSize="none" justifyContent="center">
+            <EuiFlexItem grow={false}>
+              <EventsTrSupplement>
+                <StatefulRowRenderer
+                  ariaRowindex={rowIndex + ARIA_ROW_INDEX_OFFSET}
+                  containerRef={containerRef}
+                  event={event}
+                  lastFocusedAriaColindex={rowIndex - 1}
+                  rowRenderers={enabledRowRenderers}
+                  timelineId={timelineId}
+                />
+              </EventsTrSupplement>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        ) : null}
+      </>
+    );
+  }
+);
+RowDetailsComponent.displayName = 'RowDetailsComponent';
+
+export const RowDetails = React.memo(RowDetailsComponent);
+// eslint-disable-next-line import/no-default-export
+export { RowDetails as default };
\ No newline at end of file
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx
new file mode 100644
index 00000000000000..8f6aef6e5400b7
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx
@@ -0,0 +1,99 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
+import React, { useMemo, useCallback } from 'react';
+
+import { isActiveTimeline } from '../../../../../helpers';
+import { TimelineId } from '../../../../../../common/types/timeline';
+import {
+  useGlobalFullScreen,
+  useTimelineFullScreen,
+} from '../../../../../common/containers/use_full_screen';
+import { StatefulRowRenderersBrowser } from '../../../row_renderers_browser';
+import { FixedWidthLastUpdatedContainer } from './last_updated';
+import * as i18n from './translations';
+import { EXIT_FULL_SCREEN_CLASS_NAME } from '../../../../../common/components/exit_full_screen';
+
+export const isFullScreen = ({
+  globalFullScreen,
+  isActiveTimelines,
+  timelineFullScreen,
+}: {
+  globalFullScreen: boolean;
+  isActiveTimelines: boolean;
+  timelineFullScreen: boolean;
+}) =>
+  (isActiveTimelines && timelineFullScreen) || (isActiveTimelines === false && globalFullScreen);
+
+interface Props {
+  timelineId: string;
+  updatedAt: number;
+}
+
+export const ToolbarAdditionalControlsComponent: React.FC<Props> = ({ timelineId, updatedAt }) => {
+  const { timelineFullScreen, setTimelineFullScreen } = useTimelineFullScreen();
+  const { globalFullScreen, setGlobalFullScreen } = useGlobalFullScreen();
+
+  const toggleFullScreen = useCallback(() => {
+    if (timelineId === TimelineId.active) {
+      setTimelineFullScreen(!timelineFullScreen);
+    } else {
+      setGlobalFullScreen(!globalFullScreen);
+    }
+  }, [
+    timelineId,
+    setTimelineFullScreen,
+    timelineFullScreen,
+    setGlobalFullScreen,
+    globalFullScreen,
+  ]);
+  const fullScreen = useMemo(
+    () =>
+      isFullScreen({
+        globalFullScreen,
+        isActiveTimelines: isActiveTimeline(timelineId),
+        timelineFullScreen,
+      }),
+    [globalFullScreen, timelineFullScreen, timelineId]
+  );
+
+  return (
+    <>
+      {' '}
+      <StatefulRowRenderersBrowser data-test-subj="row-renderers-browser" timelineId={timelineId} />
+      <FixedWidthLastUpdatedContainer updatedAt={updatedAt} />
+      <span className="rightPosition">
+        <EuiToolTip content={fullScreen ? i18n.EXIT_FULL_SCREEN : i18n.FULL_SCREEN}>
+          <EuiButtonIcon
+            aria-label={
+              isFullScreen({
+                globalFullScreen,
+                isActiveTimelines: isActiveTimeline(timelineId),
+                timelineFullScreen,
+              })
+                ? i18n.EXIT_FULL_SCREEN
+                : i18n.FULL_SCREEN
+            }
+            className={`${fullScreen ? EXIT_FULL_SCREEN_CLASS_NAME : ''}`}
+            color={fullScreen ? 'text' : 'primary'}
+            data-test-subj={
+              // a full screen button gets created for timeline and for the host page
+              // this sets the data-test-subj for each case so that tests can differentiate between them
+              isActiveTimeline(timelineId) ? 'full-screen-active' : 'full-screen'
+            }
+            iconType="fullScreen"
+            onClick={toggleFullScreen}
+          />
+        </EuiToolTip>
+      </span>
+    </>
+  );
+};
+
+export const ToolbarAdditionalControls = React.memo(ToolbarAdditionalControlsComponent);
+// eslint-disable-next-line import/no-default-export
+export { ToolbarAdditionalControls as default };
\ No newline at end of file
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts
new file mode 100644
index 00000000000000..3ed2b0302dab52
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts
@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const DRAG_DROP_FIELD = i18n.translate('discover.dropZoneTableLabel', {
+  defaultMessage: 'Drop zone to add field as a column to the table',
+});
+
+export const FULL_SCREEN = i18n.translate('xpack.securitySolution.timeline.fullScreenButton', {
+  defaultMessage: 'Enter fullscreen',
+});
+
+export const EXIT_FULL_SCREEN = i18n.translate('xpack.securitySolution.exitFullScreenButton', {
+  defaultMessage: 'Exit fullscreen (esc)',
+});
+
+export const EVENTS = i18n.translate('xpack.securitySolution.footer.events', {
+  defaultMessage: 'Events',
+});
+
+export const OF = i18n.translate('xpack.securitySolution.footer.of', {
+  defaultMessage: 'of',
+});
+
+export const ROWS = i18n.translate('xpack.securitySolution.footer.rows', {
+  defaultMessage: 'rows',
+});
+
+export const LOADING = i18n.translate('xpack.securitySolution.footer.loadingLabel', {
+  defaultMessage: 'Loading',
+});
+
+export const TOTAL_COUNT_OF_EVENTS = i18n.translate(
+  'xpack.securitySolution.footer.totalCountOfEvents',
+  {
+    defaultMessage: 'events',
+  }
+);
+
+export const AUTO_REFRESH_ACTIVE = i18n.translate(
+  'xpack.securitySolution.footer.autoRefreshActiveDescription',
+  {
+    defaultMessage: 'Auto-Refresh Active',
+  }
+);
+
+export const LOADING_EVENTS = i18n.translate(
+  'xpack.securitySolution.footer.loadingEventsDataLabel',
+  {
+    defaultMessage: 'Loading Events',
+  }
+);
\ No newline at end of file
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/default_headers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/default_headers.tsx
new file mode 100644
index 00000000000000..39d96292c4dcbd
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/default_headers.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { ColumnHeaderOptions, ColumnHeaderType } from '../../../../../common/types';
+import { DEFAULT_COLUMN_MIN_WIDTH, DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../body/constants';
+
+export const defaultColumnHeaderType: ColumnHeaderType = 'not-filtered';
+
+export const defaultUdtHeaders: ColumnHeaderOptions[] = [
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: '@timestamp',
+    initialWidth: DEFAULT_DATE_COLUMN_MIN_WIDTH,
+    esTypes: ['date'],
+    type: 'date',
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'message',
+    initialWidth: DEFAULT_COLUMN_MIN_WIDTH * 2,
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'event.category',
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'event.action',
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'host.name',
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'source.ip',
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'destination.ip',
+  },
+  {
+    columnHeaderType: defaultColumnHeaderType,
+    id: 'user.name',
+  },
+];
\ No newline at end of file
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
new file mode 100644
index 00000000000000..885fbff8702c16
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
@@ -0,0 +1,481 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { EuiFlexGroup, EuiFlexItem, EuiHideFor } from '@elastic/eui';
+import React, { useMemo, useCallback, useState, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { generateFilters } from '@kbn/data-plugin/public';
+import type { DataViewField } from '@kbn/data-plugin/common';
+import { DataView } from '@kbn/data-views-plugin/public';
+import type { SortOrder } from '@kbn/saved-search-plugin/public';
+import type { DataLoadingState } from '@kbn/unified-data-table';
+import { useColumns } from '@kbn/unified-data-table';
+import { popularizeField } from '@kbn/unified-data-table/src/utils/popularize_field';
+import type { DropType } from '@kbn/dom-drag-drop';
+import styled from 'styled-components';
+import { DragDrop, DropOverlayWrapper, useDragDropContext } from '@kbn/dom-drag-drop';
+import type {
+  UnifiedFieldListSidebarContainerApi,
+  UnifiedFieldListSidebarContainerProps,
+} from '@kbn/unified-field-list';
+import { FieldsGroupNames, UnifiedFieldListSidebarContainer } from '@kbn/unified-field-list';
+import { i18n } from '@kbn/i18n';
+import type { CoreStart } from '@kbn/core/public';
+import type { EuiTheme } from '@kbn/react-kibana-context-styled';
+import { EventDetailsWidthProvider } from '../../../../common/components/events_viewer/event_details_width_context';
+import type { ExpandedDetailTimeline } from '../../../../../common/types';
+import type { TimelineItem } from '../../../../../common/search_strategy';
+import { useKibana } from '../../../../common/lib/kibana';
+import { defaultHeaders } from '../body/column_headers/default_headers';
+import type {
+  ColumnHeaderOptions,
+  OnChangePage,
+  RowRenderer,
+  SortColumnTimeline,
+  ToggleDetailPanel,
+  TimelineTabs,
+} from '../../../../../common/types/timeline';
+import type { State, inputsModel } from '../../../../common/store';
+import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
+import { useSourcererDataView } from '../../../../common/containers/sourcerer';
+import { getColumnHeader } from '../body/column_headers/helpers';
+import { timelineBodySelector } from '../body/selectors';
+import { StyledPageContentWrapper, StyledMainEuiPanel, StyledSplitFlexItem } from './styles';
+import { DRAG_DROP_FIELD } from './data_table/translations';
+import { TimelineResizableLayout } from './resizable_layout';
+import TimelineDataTable from './data_table';
+import { timelineDefaults } from '../../../store/defaults';
+import { timelineActions } from '../../../store';
+
+const TimelineBodyContainer = styled.div.attrs(({ className = '' }) => ({
+  className: `${className}`,
+}))`
+  width: 100%;
+  height: 100%;
+`;
+
+const DataGridMemoized = React.memo(TimelineDataTable);
+
+const DROP_PROPS = {
+  value: {
+    id: 'dscDropZoneTable',
+    humanData: {
+      label: DRAG_DROP_FIELD,
+    },
+  },
+  order: [1, 0, 0, 0],
+  types: ['field_add'] as DropType[],
+};
+
+const getCreationOptions: UnifiedFieldListSidebarContainerProps['getCreationOptions'] = () => {
+  return {
+    originatingApp: 'security_solution',
+    localStorageKeyPrefix: 'securitySolution',
+    timeRangeUpdatesType: 'timefilter',
+    compressed: true,
+    showSidebarToggleButton: true,
+    disablePopularFields: false,
+    buttonAddFieldToWorkspaceProps: {
+      'aria-label': i18n.translate('discover.fieldChooser.discoverField.addFieldTooltip', {
+        defaultMessage: 'Add field as column',
+      }),
+    },
+    buttonRemoveFieldFromWorkspaceProps: {
+      'aria-label': i18n.translate('discover.fieldChooser.discoverField.removeFieldTooltip', {
+        defaultMessage: 'Remove field from table',
+      }),
+    },
+    onOverrideFieldGroupDetails: (groupName) => {
+      if (groupName === FieldsGroupNames.AvailableFields) {
+        return {
+          helpText: i18n.translate('discover.fieldChooser.availableFieldsTooltip', {
+            defaultMessage: 'Fields available for display in the table.',
+          }),
+        };
+      }
+    },
+    dataTestSubj: {
+      fieldListAddFieldButtonTestSubj: 'dataView-add-field_btn',
+      fieldListSidebarDataTestSubj: 'discover-sidebar',
+      fieldListItemStatsDataTestSubj: 'dscFieldStats',
+      fieldListItemDndDataTestSubjPrefix: 'dscFieldListPanelField',
+      fieldListItemPopoverDataTestSubj: 'discoverFieldListPanelPopover',
+      fieldListItemPopoverHeaderDataTestSubjPrefix: 'discoverFieldListPanel',
+    },
+  };
+};
+
+const SidebarPanelFlexGroup = styled(EuiFlexGroup)`
+  height: 100%;
+
+  .unifiedFieldListSidebar {
+    padding-bottom: ${(props) => (props.theme as EuiTheme).eui.euiSizeS};
+    padding-left: 0px;
+    border-top: 1px solid ${(props) => (props.theme as EuiTheme).eui.euiColorLightShade};
+
+    .unifiedFieldListSidebar__group {
+      .euiFlexItem:last-child {
+        padding-right: ${(props) => (props.theme as EuiTheme).eui.euiSizeS};
+      }
+      .unifiedFieldListSidebar__list {
+        padding-left: 0px;
+      }
+    }
+  }
+`;
+
+export const SAMPLE_SIZE_SETTING = 500;
+
+interface Props {
+  columns: ColumnHeaderOptions[];
+  rowRenderers: RowRenderer[];
+  timelineId: string;
+  itemsPerPage: number;
+  itemsPerPageOptions: number[];
+  sort: SortColumnTimeline[];
+  events: TimelineItem[];
+  refetch: inputsModel.Refetch;
+  totalCount: number;
+  onEventClosed: (args: ToggleDetailPanel) => void;
+  expandedDetail: ExpandedDetailTimeline;
+  showExpandedDetails: boolean;
+  onChangePage: OnChangePage;
+  activeTab: TimelineTabs;
+  dataLoadingState: DataLoadingState;
+  updatedAt: number;
+  isTextBasedQuery?: boolean;
+}
+
+export const UnifiedTimelineComponent: React.FC<Props> = ({
+  columns,
+  activeTab,
+  timelineId,
+  itemsPerPage,
+  itemsPerPageOptions,
+  rowRenderers,
+  sort,
+  events,
+  refetch,
+  dataLoadingState,
+  totalCount,
+  onEventClosed,
+  showExpandedDetails,
+  expandedDetail,
+  onChangePage,
+  updatedAt,
+  isTextBasedQuery,
+}) => {
+  const dispatch = useDispatch();
+  const unifiedFieldListContainerRef = useRef<UnifiedFieldListSidebarContainerApi>(null);
+  const renderId = useRef(1);
+
+  const {
+    services: {
+      uiSettings,
+      fieldFormats,
+      dataViews,
+      dataViewFieldEditor,
+      application: { capabilities },
+      data: dataPluginContract,
+      uiActions,
+      charts,
+      docLinks,
+    },
+  } = useKibana();
+
+  const fieldListSidebarServices: UnifiedFieldListSidebarContainerProps['services'] = useMemo(
+    () => ({
+      fieldFormats,
+      dataViews,
+      dataViewFieldEditor,
+      data: dataPluginContract,
+      uiActions,
+      charts,
+      core: {
+        uiSettings,
+        docLinks,
+      } as CoreStart,
+    }),
+    [
+      fieldFormats,
+      dataViews,
+      dataViewFieldEditor,
+      dataPluginContract,
+      uiActions,
+      charts,
+      uiSettings,
+      docLinks,
+    ]
+  );
+
+  const [sidebarContainer, setSidebarContainer] = useState<HTMLDivElement | null>(null);
+  const [, setMainContainer] = useState<HTMLDivElement | null>(null);
+
+  const { timeline: { filterManager } = timelineDefaults } = useSelector((state: State) =>
+    timelineBodySelector(state, timelineId)
+  );
+
+  const defaultColumns = useMemo(() => {
+    return columns.map((c) => c.id);
+  }, [columns]);
+  const { sourcererDataView } = useSourcererDataView(SourcererScopeName.timeline);
+
+  const dataView = useMemo(() => {
+    if (sourcererDataView != null) {
+      return new DataView({ spec: sourcererDataView, fieldFormats });
+    } else {
+      return undefined;
+    }
+  }, [sourcererDataView, fieldFormats]);
+
+  // Sorting
+  const sortingColumns = useMemo(() => {
+    return (
+      (sort?.map((sortingCol) => [
+        sortingCol.columnId,
+        sortingCol.sortDirection as 'asc' | 'desc',
+      ]) as SortOrder[]) || []
+    );
+  }, [sort]);
+  const onSort = useCallback(
+    (nextSort: string[][]) => {
+      dispatch(
+        timelineActions.updateSort({
+          id: timelineId,
+          sort: nextSort.map(
+            ([id, direction]) =>
+              ({
+                columnId: id,
+                columnType: 'keyword',
+                sortDirection: direction,
+              } as SortColumnTimeline)
+          ),
+        })
+      );
+    },
+    [dispatch, timelineId]
+  );
+
+  const { onAddColumn, onRemoveColumn } = useColumns({
+    capabilities,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    dataView: dataView!,
+    dataViews,
+    setAppState: (newState: { columns: string[]; sort?: string[][] }) => {
+      if (newState.sort) {
+        onSort(newState.sort);
+      } else {
+        const columnsStates = newState.columns.map((columnId) =>
+          getColumnHeader(columnId, defaultHeaders)
+        );
+        dispatch(timelineActions.updateColumns({ id: timelineId, columns: columnsStates }));
+      }
+    },
+    useNewFieldsApi: true,
+    columns: defaultColumns,
+    sort: sortingColumns,
+  });
+
+  const onAddFilter = useCallback(
+    (field: DataViewField | string, values: unknown, operation: '+' | '-') => {
+      if (dataView && filterManager) {
+        const fieldName = typeof field === 'string' ? field : field.name;
+        popularizeField(dataView, fieldName, dataViews, capabilities);
+        const newFilters = generateFilters(filterManager, field, values, operation, dataView);
+        return filterManager.addFilters(newFilters);
+      }
+    },
+    [filterManager, dataView, dataViews, capabilities]
+  );
+
+  const [{ dragging }] = useDragDropContext();
+  const draggingFieldName = dragging?.id;
+
+  const onToggleColumn = useCallback(
+    (columnId: string) => {
+      dispatch(
+        timelineActions.upsertColumn({
+          column: getColumnHeader(columnId, defaultHeaders),
+          id: timelineId,
+          index: 1,
+        })
+      );
+    },
+    [dispatch, timelineId]
+  );
+
+  const isDropAllowed = useMemo(() => {
+    if (!draggingFieldName || defaultColumns.includes(draggingFieldName)) {
+      return false;
+    }
+    return true;
+  }, [draggingFieldName, defaultColumns]);
+
+  const onDropFieldToTable = useCallback(() => {
+    if (draggingFieldName) {
+      onAddColumn(draggingFieldName);
+      onToggleColumn(draggingFieldName);
+    }
+  }, [draggingFieldName, onAddColumn, onToggleColumn]);
+
+  const onAddFieldToWorkspace = useCallback(
+    (field: DataViewField) => {
+      onAddColumn(field.name);
+      onToggleColumn(field.name);
+    },
+    [onAddColumn, onToggleColumn]
+  );
+
+  const onRemoveFieldFromWorkspace = useCallback(
+    (field: DataViewField) => {
+      if (columns.some(({ id }) => id === field.name)) {
+        dispatch(
+          timelineActions.removeColumn({
+            columnId: field.name,
+            id: timelineId,
+          })
+        );
+      }
+      onRemoveColumn(field.name);
+    },
+    [columns, dispatch, onRemoveColumn, timelineId]
+  );
+
+  const onFieldEdited = useCallback(() => {
+    refetch();
+    renderId.current += 1;
+  }, [refetch]);
+
+  const wrappedOnFieldEdited = useCallback(async () => {
+    onFieldEdited();
+  }, [onFieldEdited]);
+
+  const sidebarPanel = useMemo(
+    () => (
+      <SidebarPanelFlexGroup gutterSize="none">
+        <EuiFlexItem>
+          {dataView ? (
+            <UnifiedFieldListSidebarContainer
+              ref={unifiedFieldListContainerRef}
+              showFieldList={true}
+              variant="responsive"
+              getCreationOptions={getCreationOptions}
+              services={fieldListSidebarServices}
+              dataView={dataView}
+              fullWidth
+              allFields={dataView.fields}
+              workspaceSelectedFieldNames={defaultColumns}
+              onAddFieldToWorkspace={onAddFieldToWorkspace}
+              onRemoveFieldFromWorkspace={onRemoveFieldFromWorkspace}
+              onAddFilter={onAddFilter}
+              onFieldEdited={wrappedOnFieldEdited}
+            />
+          ) : null}
+        </EuiFlexItem>
+        <EuiHideFor sizes={['xs', 's']}>
+          <StyledSplitFlexItem grow={false} className="thinBorderSplit" />
+        </EuiHideFor>
+      </SidebarPanelFlexGroup>
+    ),
+    [
+      dataView,
+      defaultColumns,
+      fieldListSidebarServices,
+      onAddFieldToWorkspace,
+      onAddFilter,
+      onRemoveFieldFromWorkspace,
+      wrappedOnFieldEdited,
+    ]
+  );
+
+  const table = useMemo(() => {
+    return (
+      <DataGridMemoized
+        columns={columns}
+        rowRenderers={rowRenderers}
+        timelineId={timelineId}
+        itemsPerPage={itemsPerPage}
+        itemsPerPageOptions={itemsPerPageOptions}
+        sort={sort}
+        events={events}
+        refetch={refetch}
+        onFieldEdited={onFieldEdited}
+        dataLoadingState={dataLoadingState}
+        totalCount={totalCount}
+        onEventClosed={onEventClosed}
+        expandedDetail={expandedDetail}
+        showExpandedDetails={showExpandedDetails}
+        onChangePage={onChangePage}
+        activeTab={activeTab}
+        updatedAt={updatedAt}
+        isTextBasedQuery={isTextBasedQuery}
+      />
+    );
+  }, [
+    activeTab,
+    columns,
+    dataLoadingState,
+    events,
+    expandedDetail,
+    isTextBasedQuery,
+    itemsPerPage,
+    itemsPerPageOptions,
+    onChangePage,
+    onEventClosed,
+    refetch,
+    onFieldEdited,
+    rowRenderers,
+    showExpandedDetails,
+    sort,
+    timelineId,
+    totalCount,
+    updatedAt,
+  ]);
+
+  if (!dataView) {
+    return null;
+  }
+
+  return (
+    <TimelineBodyContainer ref={setSidebarContainer}>
+      <TimelineResizableLayout
+        container={sidebarContainer}
+        unifiedFieldListSidebarContainerApi={unifiedFieldListContainerRef.current}
+        sidebarPanel={sidebarPanel}
+        mainPanel={
+          <StyledPageContentWrapper>
+            <StyledMainEuiPanel
+              role="main"
+              panelRef={setMainContainer}
+              paddingSize="none"
+              borderRadius="none"
+              hasShadow={false}
+              hasBorder={false}
+              color="transparent"
+            >
+              <DragDrop
+                draggable={false}
+                dropTypes={isDropAllowed ? DROP_PROPS.types : undefined}
+                value={DROP_PROPS.value}
+                order={DROP_PROPS.order}
+                onDrop={onDropFieldToTable}
+              >
+                <DropOverlayWrapper isVisible={isDropAllowed}>
+                  <EventDetailsWidthProvider>{table}</EventDetailsWidthProvider>
+                </DropOverlayWrapper>
+              </DragDrop>
+            </StyledMainEuiPanel>
+          </StyledPageContentWrapper>
+        }
+      />
+    </TimelineBodyContainer>
+  );
+};
+
+export const UnifiedTimeline = React.memo(UnifiedTimelineComponent);
+// eslint-disable-next-line import/no-default-export
+export { UnifiedTimeline as default };
\ No newline at end of file
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx
new file mode 100644
index 00000000000000..8790bc1a24581c
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx
@@ -0,0 +1,85 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useEuiTheme, useIsWithinBreakpoints } from '@elastic/eui';
+import {
+  ResizableLayout,
+  ResizableLayoutDirection,
+  ResizableLayoutMode,
+} from '@kbn/resizable-layout';
+import type { UnifiedFieldListSidebarContainerApi } from '@kbn/unified-field-list';
+import type { ReactNode } from 'react';
+import React, { useState } from 'react';
+import { createHtmlPortalNode, InPortal, OutPortal } from 'react-reverse-portal';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+import useObservable from 'react-use/lib/useObservable';
+import { of } from 'rxjs';
+
+export const SIDEBAR_WIDTH_KEY = 'timeline:sidebarWidth';
+
+export const TimelineResizableLayoutComponent = ({
+  container,
+  sidebarPanel,
+  mainPanel,
+  unifiedFieldListSidebarContainerApi,
+}: {
+  container: HTMLElement | null;
+  sidebarPanel: ReactNode;
+  mainPanel: ReactNode;
+  unifiedFieldListSidebarContainerApi: UnifiedFieldListSidebarContainerApi | null;
+}) => {
+  const [sidebarPanelNode] = useState(() =>
+    createHtmlPortalNode({ attributes: { class: 'eui-fullHeight' } })
+  );
+  const [mainPanelNode] = useState(() =>
+    createHtmlPortalNode({ attributes: { class: 'eui-fullHeight' } })
+  );
+
+  const { euiTheme } = useEuiTheme();
+  const minSidebarWidth = euiTheme.base * 13;
+  const defaultSidebarWidth = euiTheme.base * 19;
+  const minMainPanelWidth = euiTheme.base * 30;
+
+  const [sidebarWidth, setSidebarWidth] = useLocalStorage(SIDEBAR_WIDTH_KEY, defaultSidebarWidth);
+
+  const isMobile = useIsWithinBreakpoints(['xs', 's']);
+
+  const isSidebarCollapsed = useObservable(
+    unifiedFieldListSidebarContainerApi?.isSidebarCollapsed$ ?? of(true),
+    true
+  );
+  const layoutMode =
+    isMobile || isSidebarCollapsed ? ResizableLayoutMode.Static : ResizableLayoutMode.Resizable;
+  const layoutDirection = isMobile
+    ? ResizableLayoutDirection.Vertical
+    : ResizableLayoutDirection.Horizontal;
+
+  return (
+    <>
+      <InPortal node={sidebarPanelNode}>{sidebarPanel}</InPortal>
+      <InPortal node={mainPanelNode}>{mainPanel}</InPortal>
+      <ResizableLayout
+        className="dscPageBody__contents"
+        mode={layoutMode}
+        direction={layoutDirection}
+        container={container}
+        fixedPanelSize={sidebarWidth ?? defaultSidebarWidth}
+        minFixedPanelSize={minSidebarWidth}
+        minFlexPanelSize={minMainPanelWidth}
+        fixedPanel={<OutPortal node={sidebarPanelNode} />}
+        flexPanel={<OutPortal node={mainPanelNode} />}
+        resizeButtonClassName="dscSidebarResizeButton"
+        data-test-subj="discoverLayout"
+        onFixedPanelSizeChange={setSidebarWidth}
+      />
+    </>
+  );
+};
+
+export const TimelineResizableLayout = React.memo(TimelineResizableLayoutComponent);
+// eslint-disable-next-line import/no-default-export
+export { TimelineResizableLayout as default };
\ No newline at end of file
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/styles.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/styles.tsx
new file mode 100644
index 00000000000000..0353daaac84462
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/styles.tsx
@@ -0,0 +1,148 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import styled from 'styled-components';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiProgress } from '@elastic/eui';
+import { euiThemeVars } from '@kbn/ui-theme';
+
+export const StyledTableFlexGroup = styled(EuiFlexGroup).attrs(({ className = '' }) => ({
+  className: `${className}`,
+}))`
+  margin: 0;
+  width: 100%;
+  overflow: hidden;
+
+  .dscPageBody__contents {
+    overflow: hidden;
+    height: 100%;
+  }
+`;
+
+export const StyledTableFlexItem = styled(EuiFlexItem).attrs(({ className = '' }) => ({
+  className: `${className}`,
+}))`
+  ${({ theme }) => `margin: 0 ${theme.eui.euiSizeM};`}
+  overflow: hidden;
+`;
+
+export const StyledSplitFlexItem = styled(EuiFlexItem).attrs(({ className = '' }) => ({
+  className: `${className}`,
+}))`
+  border-right: ${euiThemeVars.euiBorderThin};
+`;
+
+export const StyledEuiProgress = styled(EuiProgress)`
+  z-index: 2;
+`;
+
+export const StyledPageContentWrapper = styled.div.attrs(({ className = '' }) => ({
+  className: `${className}`,
+}))`
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+`;
+
+export const StyledMainEuiPanel = styled(EuiPanel).attrs(({ className = '' }) => ({
+  className: `udtPageContent__wrapper ${className}`,
+}))`
+  overflow: hidden; // Ensures horizontal scroll of table
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+export const StyledTimelineUnifiedDataTable = styled.div.attrs(({ className = '' }) => ({
+  className: `unifiedDataTable ${className}`,
+  role: 'rowgroup',
+}))`
+  .udtTimeline [data-gridcell-column-id|='select'] {
+    border-right: none;
+  }
+  .udtTimeline [data-gridcell-column-id|='openDetails'] .euiDataGridRowCell__contentByHeight {
+    margin-top: 3px;
+  }
+
+  .udtTimeline .euiDataGridRowCell--controlColumn {
+    overflow: visible;
+  }
+
+  .udtTimeline [data-gridcell-column-id|='select'] .euiDataGridRowCell__contentByHeight {
+    margin-top: 5px;
+  }
+
+  .udtTimeline
+    .euiDataGridRow:hover
+    .euiDataGridRowCell--lastColumn.euiDataGridRowCell--controlColumn {
+    ${({ theme }) => `background-color: ${theme.eui.colorLightShade};`};
+  }
+
+  .udtTimeline .euiDataGridRowCell--lastColumn.euiDataGridRowCell--controlColumn {
+    ${({ theme }) => `background-color: ${theme.eui.emptyShade};`};
+  }
+
+  .udtTimeline .siemEventsTable__trSupplement--summary {
+    border-radius: 8px;
+  }
+
+  .udtTimeline .euiDataGridRow:has(.buildingBlockType) {
+    background: repeating-linear-gradient(
+      127deg,
+      rgba(245, 167, 0, 0.2),
+      rgba(245, 167, 0, 0.2) 1px,
+      rgba(245, 167, 0, 0.05) 2px,
+      rgba(245, 167, 0, 0.05) 10px
+    );
+  }
+  .udtTimeline .euiDataGridRow:has(.eqlSequence) {
+    .euiDataGridRowCell--firstColumn {
+      ${({ theme }) => `border-left: 4px solid ${theme.eui.euiColorPrimary};`}
+    }
+    background: repeating-linear-gradient(
+      127deg,
+      rgba(0, 107, 180, 0.2),
+      rgba(0, 107, 180, 0.2) 1px,
+      rgba(0, 107, 180, 0.05) 2px,
+      rgba(0, 107, 180, 0.05) 10px
+    );
+  }
+  .udtTimeline .euiDataGridRow:has(.eqlNonSequence) {
+    .euiDataGridRowCell--firstColumn {
+      ${({ theme }) => `border-left: 4px solid ${theme.eui.euiColorAccent};`}
+    }
+    background: repeating-linear-gradient(
+      127deg,
+      rgba(221, 10, 115, 0.2),
+      rgba(221, 10, 115, 0.2) 1px,
+      rgba(221, 10, 115, 0.05) 2px,
+      rgba(221, 10, 115, 0.05) 10px
+    );
+  }
+  .udtTimeline .euiDataGridRow:has(.nonRawEvent) .euiDataGridRowCell--firstColumn {
+    ${({ theme }) => `border-left: 4px solid ${theme.eui.euiColorWarning};`}
+  }
+  .udtTimeline .euiDataGridRow:has(.rawEvent) .euiDataGridRowCell--firstColumn {
+    ${({ theme }) => `border-left: 4px solid ${theme.eui.euiColorLightShade};`}
+  }
+
+  .udtTimeline .rowCellWrapper {
+    display: flex;
+    width: fit-content;
+  }
+
+  .udtTimeline .rightPosition {
+    position: absolute;
+    right: 5px;
+    button {
+      ${({ theme }) => `color: ${theme.eui.euiColorDarkShade};`}
+    }
+  }
+
+  .udtTimeline .euiDataGrid__rightControls {
+    padding-right: 30px;
+  }
+`;
\ No newline at end of file
diff --git a/x-pack/plugins/security_solution/public/timelines/containers/index.tsx b/x-pack/plugins/security_solution/public/timelines/containers/index.tsx
index 19e8e7b92b870b..d58e0e2be2a98a 100644
--- a/x-pack/plugins/security_solution/public/timelines/containers/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/containers/index.tsx
@@ -13,6 +13,7 @@ import { Subscription } from 'rxjs';
 
 import type { DataView } from '@kbn/data-plugin/common';
 import { isRunningResponse } from '@kbn/data-plugin/common';
+import { DataLoadingState } from '@kbn/unified-data-table';
 import type {
   TimelineEqlRequestOptionsInput,
   TimelineEventsAllOptionsInput,
@@ -147,14 +148,14 @@ export const useTimelineEventsHandler = ({
   sort = initSortDefault,
   skip = false,
   timerangeKind,
-}: UseTimelineEventsProps): [boolean, TimelineArgs, TimelineEventsSearchHandler] => {
+}: UseTimelineEventsProps): [DataLoadingState, TimelineArgs, TimelineEventsSearchHandler] => {
   const [{ pageName }] = useRouteSpy();
   const dispatch = useDispatch();
   const { data } = useKibana().services;
   const refetch = useRef<inputsModel.Refetch>(noop);
   const abortCtrl = useRef(new AbortController());
   const searchSubscription$ = useRef(new Subscription());
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState<DataLoadingState>(DataLoadingState.loaded);
   const [activePage, setActivePage] = useState(
     id === TimelineId.active ? activeTimeline.getActivePage() : 0
   );
@@ -219,7 +220,11 @@ export const useTimelineEventsHandler = ({
       const asyncSearch = async () => {
         prevTimelineRequest.current = request;
         abortCtrl.current = new AbortController();
-        setLoading(true);
+        if (activePage === 0) {
+          setLoading(DataLoadingState.loading);
+        } else {
+          setLoading(DataLoadingState.loadingMore);
+        }
         const { endTracking } = startTracking({ name: `${APP_UI_ID} timeline events search` });
         searchSubscription$.current = data.search
           .search<TimelineRequest<typeof language>, TimelineResponse<typeof language>>(request, {
@@ -233,7 +238,7 @@ export const useTimelineEventsHandler = ({
             next: (response) => {
               if (!isRunningResponse(response)) {
                 endTracking('success');
-                setLoading(false);
+                setLoading(DataLoadingState.loaded);
                 setTimelineResponse((prevResponse) => {
                   const newTimelineResponse = {
                     ...prevResponse,
@@ -262,7 +267,7 @@ export const useTimelineEventsHandler = ({
             },
             error: (msg) => {
               endTracking(abortCtrl.current.signal.aborted ? 'aborted' : 'error');
-              setLoading(false);
+              setLoading(DataLoadingState.loaded);
               data.search.showError(msg);
               searchSubscription$.current.unsubscribe();
             },
@@ -276,7 +281,7 @@ export const useTimelineEventsHandler = ({
       ) {
         activeTimeline.setPageName(pageName);
         abortCtrl.current.abort();
-        setLoading(false);
+        setLoading(DataLoadingState.loaded);
 
         if (request.language === 'eql') {
           prevTimelineRequest.current = activeTimeline.getEqlRequest();
@@ -312,7 +317,17 @@ export const useTimelineEventsHandler = ({
       await asyncSearch();
       refetch.current = asyncSearch;
     },
-    [pageName, skip, id, startTracking, data.search, dataViewId, refetchGrid, wrappedLoadPage]
+    [
+      pageName,
+      skip,
+      id,
+      activePage,
+      startTracking,
+      data.search,
+      dataViewId,
+      refetchGrid,
+      wrappedLoadPage,
+    ]
   );
 
   useEffect(() => {
@@ -450,8 +465,8 @@ export const useTimelineEvents = ({
   sort = initSortDefault,
   skip = false,
   timerangeKind,
-}: UseTimelineEventsProps): [boolean, TimelineArgs] => {
-  const [loading, timelineResponse, timelineSearchHandler] = useTimelineEventsHandler({
+}: UseTimelineEventsProps): [DataLoadingState, TimelineArgs] => {
+  const [dataLoadingState, timelineResponse, timelineSearchHandler] = useTimelineEventsHandler({
     dataViewId,
     endDate,
     eqlOptions,
@@ -473,5 +488,5 @@ export const useTimelineEvents = ({
     timelineSearchHandler();
   }, [timelineSearchHandler]);
 
-  return [loading, timelineResponse];
-};
+  return [dataLoadingState, timelineResponse];
+};
\ No newline at end of file

From 258ed5d5064168b257c77e1e4afd34b33e76077a Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Thu, 1 Feb 2024 08:18:54 -0500
Subject: [PATCH 05/65] move query tab to new file

---
 .../__snapshots__/index.test.tsx.snap         | 1315 +++++++++++++++++
 .../header/index.test.tsx                     |  174 +++
 .../query_tab_content_new/header/index.tsx    |  115 ++
 .../query_tab_content_new/header/selectors.ts |   16 +
 .../header/translations.ts                    |   24 +
 .../query_tab_content_new/index.test.tsx      |  241 +++
 .../timeline/query_tab_content_new/index.tsx  |  603 ++++++++
 7 files changed, 2488 insertions(+)
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/__snapshots__/index.test.tsx.snap
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.test.tsx
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.tsx
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/selectors.ts
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/translations.ts
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.test.tsx
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/__snapshots__/index.test.tsx.snap
new file mode 100644
index 00000000000000..92591556d38640
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,1315 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Timeline rendering renders correctly against snapshot 1`] = `
+<QueryTabContentComponent
+  activeTab="query"
+  columns={
+    Array [
+      Object {
+        "aggregatable": true,
+        "category": "base",
+        "columnHeaderType": "not-filtered",
+        "description": "Date/time when the event originated.
+For log events this is the date/time when the event was generated, and not when it was read.
+Required field for all events.",
+        "esTypes": Array [
+          "date",
+        ],
+        "example": "2016-05-23T08:05:34.853Z",
+        "id": "@timestamp",
+        "initialWidth": 190,
+        "type": "date",
+      },
+      Object {
+        "aggregatable": true,
+        "category": "event",
+        "columnHeaderType": "not-filtered",
+        "description": "Severity describes the severity of the event. What the different severity values mean can very different between use cases. It's up to the implementer to make sure severities are consistent across events.",
+        "esTypes": Array [
+          "long",
+        ],
+        "example": "7",
+        "id": "event.severity",
+        "initialWidth": 180,
+        "type": "number",
+      },
+      Object {
+        "aggregatable": true,
+        "category": "event",
+        "columnHeaderType": "not-filtered",
+        "description": "Event category.
+This contains high-level information about the contents of the event. It is more generic than \`event.action\`, in the sense that typically a category contains multiple actions. Warning: In future versions of ECS, we plan to provide a list of acceptable values for this field, please use with caution.",
+        "esTypes": Array [
+          "keyword",
+        ],
+        "example": "user-management",
+        "id": "event.category",
+        "initialWidth": 180,
+        "type": "string",
+      },
+      Object {
+        "aggregatable": true,
+        "category": "event",
+        "columnHeaderType": "not-filtered",
+        "description": "The action captured by the event.
+This describes the information in the event. It is more specific than \`event.category\`. Examples are \`group-add\`, \`process-started\`, \`file-created\`. The value is normally defined by the implementer.",
+        "esTypes": Array [
+          "keyword",
+        ],
+        "example": "user-password-change",
+        "id": "event.action",
+        "initialWidth": 180,
+        "type": "string",
+      },
+      Object {
+        "aggregatable": true,
+        "category": "host",
+        "columnHeaderType": "not-filtered",
+        "description": "Name of the host.
+It can contain what \`hostname\` returns on Unix systems, the fully qualified domain name, or a name specified by the user. The sender decides which value to use.",
+        "esTypes": Array [
+          "keyword",
+        ],
+        "example": "",
+        "id": "host.name",
+        "initialWidth": 180,
+        "type": "string",
+      },
+      Object {
+        "aggregatable": true,
+        "category": "source",
+        "columnHeaderType": "not-filtered",
+        "description": "IP address of the source.
+Can be one or multiple IPv4 or IPv6 addresses.",
+        "esTypes": Array [
+          "ip",
+        ],
+        "example": "",
+        "id": "source.ip",
+        "initialWidth": 180,
+        "type": "ip",
+      },
+      Object {
+        "aggregatable": true,
+        "category": "destination",
+        "columnHeaderType": "not-filtered",
+        "description": "IP address of the destination.
+Can be one or multiple IPv4 or IPv6 addresses.",
+        "esTypes": Array [
+          "ip",
+        ],
+        "example": "",
+        "id": "destination.ip",
+        "initialWidth": 180,
+        "type": "ip",
+      },
+      Object {
+        "aggregatable": true,
+        "category": "destination",
+        "columnHeaderType": "not-filtered",
+        "description": "Bytes sent from the source to the destination",
+        "esTypes": Array [
+          "long",
+        ],
+        "example": "123",
+        "format": "bytes",
+        "id": "destination.bytes",
+        "initialWidth": 180,
+        "type": "number",
+      },
+      Object {
+        "aggregatable": true,
+        "category": "user",
+        "columnHeaderType": "not-filtered",
+        "description": "Short name or login of the user.",
+        "esTypes": Array [
+          "keyword",
+        ],
+        "example": "albert",
+        "id": "user.name",
+        "initialWidth": 180,
+        "type": "string",
+      },
+      Object {
+        "aggregatable": false,
+        "category": "base",
+        "columnHeaderType": "not-filtered",
+        "description": "Each document has an _id that uniquely identifies it",
+        "esTypes": Array [],
+        "example": "Y-6TfmcB0WOhS6qyMv3s",
+        "id": "_id",
+        "initialWidth": 180,
+        "type": "string",
+      },
+      Object {
+        "aggregatable": false,
+        "category": "base",
+        "columnHeaderType": "not-filtered",
+        "description": "For log events the message field contains the log message.
+In other use cases the message field can be used to concatenate different values which are then freely searchable. If multiple messages exist, they can be combined into one message.",
+        "esTypes": Array [
+          "text",
+        ],
+        "example": "Hello World",
+        "id": "message",
+        "initialWidth": 180,
+        "type": "string",
+      },
+    ]
+  }
+  dataProviders={
+    Array [
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 1",
+        "kqlQuery": "",
+        "name": "Provider 1",
+        "queryMatch": Object {
+          "field": "name",
+          "operator": ":",
+          "value": "Provider 1",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 2",
+        "kqlQuery": "",
+        "name": "Provider 2",
+        "queryMatch": Object {
+          "field": "name",
+          "operator": ":",
+          "value": "Provider 2",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 3",
+        "kqlQuery": "",
+        "name": "Provider 3",
+        "queryMatch": Object {
+          "field": "name",
+          "operator": ":",
+          "value": "Provider 3",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 4",
+        "kqlQuery": "",
+        "name": "Provider 4",
+        "queryMatch": Object {
+          "field": "name",
+          "operator": ":",
+          "value": "Provider 4",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 5",
+        "kqlQuery": "",
+        "name": "Provider 5",
+        "queryMatch": Object {
+          "field": "name",
+          "operator": ":",
+          "value": "Provider 5",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 6",
+        "kqlQuery": "",
+        "name": "Provider 6",
+        "queryMatch": Object {
+          "field": "name",
+          "operator": ":",
+          "value": "Provider 6",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 7",
+        "kqlQuery": "",
+        "name": "Provider 7",
+        "queryMatch": Object {
+          "field": "name",
+          "operator": ":",
+          "value": "Provider 7",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 8",
+        "kqlQuery": "",
+        "name": "Provider 8",
+        "queryMatch": Object {
+          "field": "name",
+          "operator": ":",
+          "value": "Provider 8",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 9",
+        "kqlQuery": "",
+        "name": "Provider 9",
+        "queryMatch": Object {
+          "field": "name",
+          "operator": ":",
+          "value": "Provider 9",
+        },
+      },
+      Object {
+        "and": Array [],
+        "enabled": true,
+        "excluded": false,
+        "id": "id-Provider 10",
+        "kqlQuery": "",
+        "name": "Provider 10",
+        "queryMatch": Object {
+          "field": "name",
+          "operator": ":",
+          "value": "Provider 10",
+        },
+      },
+    ]
+  }
+  end="2018-03-24T03:33:52.253Z"
+  expandedDetail={Object {}}
+  filters={Array []}
+  isLive={false}
+  itemsPerPage={5}
+  itemsPerPageOptions={
+    Array [
+      5,
+      10,
+      20,
+    ]
+  }
+  kqlMode="search"
+  kqlQueryExpression=" "
+  kqlQueryLanguage="kuery"
+  onEventClosed={[MockFunction]}
+  renderCellValue={[Function]}
+  rowRenderers={
+    Array [
+      Object {
+        "id": "threat_match",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "auditd",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_dns",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_security_event",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_security_event",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_fim",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_fim",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_fim",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_fim",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_fim",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_fim",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "alerts",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "alerts",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "alerts",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "alerts",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "alerts",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "alerts",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "alerts",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "alerts",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "alerts",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "alerts",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "library",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_fim",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "registry",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_socket",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_socket",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_socket",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_socket",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_socket",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_socket",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_socket",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_security_event",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_security_event",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_security_event",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_fim",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_fim",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_security_event",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_file",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_socket",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system_socket",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "system",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "suricata",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "zeek",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+      Object {
+        "id": "netflow",
+        "isInstance": [Function],
+        "renderRow": [Function],
+      },
+    ]
+  }
+  show={true}
+  showCallOutUnauthorizedMsg={false}
+  showExpandedDetails={false}
+  sort={
+    Array [
+      Object {
+        "columnId": "@timestamp",
+        "columnType": "date",
+        "esTypes": Array [
+          "date",
+        ],
+        "sortDirection": "desc",
+      },
+    ]
+  }
+  start="2018-03-23T18:49:23.132Z"
+  status="active"
+  timelineId="timeline-test"
+  timerangeKind="absolute"
+/>
+`;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.test.tsx
new file mode 100644
index 00000000000000..44d2ee6cd6a546
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.test.tsx
@@ -0,0 +1,174 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+import { coreMock } from '@kbn/core/public/mocks';
+import { mockIndexPattern } from '../../../../../common/mock';
+import { TestProviders } from '../../../../../common/mock/test_providers';
+import { FilterManager } from '@kbn/data-plugin/public';
+import { mockDataProviders } from '../../data_providers/mock/mock_data_providers';
+import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
+
+import { QueryTabHeader } from '.';
+import { TimelineStatus, TimelineType } from '../../../../../../common/api/timeline';
+import { waitFor } from '@testing-library/react';
+import { TimelineId } from '../../../../../../common/types';
+
+const mockUiSettingsForFilterManager = coreMock.createStart().uiSettings;
+
+jest.mock('../../../../../common/lib/kibana');
+
+describe('Header', () => {
+  const indexPattern = mockIndexPattern;
+  const mount = useMountAppended();
+  const getWrapper = async (childrenComponent: JSX.Element) => {
+    const wrapper = mount(childrenComponent);
+    await waitFor(() => wrapper.find('[data-test-subj="timelineCallOutUnauthorized"]').exists());
+    return wrapper;
+  };
+  const props = {
+    browserFields: {},
+    dataProviders: mockDataProviders,
+    filterManager: new FilterManager(mockUiSettingsForFilterManager),
+    indexPattern,
+    onDataProviderEdited: jest.fn(),
+    onDataProviderRemoved: jest.fn(),
+    onToggleDataProviderEnabled: jest.fn(),
+    onToggleDataProviderExcluded: jest.fn(),
+    onToggleDataProviderType: jest.fn(),
+    show: true,
+    showCallOutUnauthorizedMsg: false,
+    status: TimelineStatus.active,
+    timelineId: TimelineId.test,
+    timelineType: TimelineType.default,
+  };
+
+  describe('rendering', () => {
+    test('it renders the data providers when show is true', async () => {
+      const testProps = { ...props, show: true };
+      const wrapper = await getWrapper(
+        <TestProviders>
+          <QueryTabHeader {...testProps} />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="dataProviders"]').exists()).toEqual(true);
+    });
+
+    test('it renders the unauthorized call out providers', async () => {
+      const testProps = {
+        ...props,
+        filterManager: new FilterManager(mockUiSettingsForFilterManager),
+        showCallOutUnauthorizedMsg: true,
+      };
+
+      const wrapper = await getWrapper(
+        <TestProviders>
+          <QueryTabHeader {...testProps} />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="timelineCallOutUnauthorized"]').exists()).toEqual(true);
+    });
+
+    test('it renders the unauthorized call out with correct icon', async () => {
+      const testProps = {
+        ...props,
+        filterManager: new FilterManager(mockUiSettingsForFilterManager),
+        showCallOutUnauthorizedMsg: true,
+      };
+
+      const wrapper = await getWrapper(
+        <TestProviders>
+          <QueryTabHeader {...testProps} />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper.find('[data-test-subj="timelineCallOutUnauthorized"]').first().prop('iconType')
+      ).toEqual('warning');
+    });
+
+    test('it renders the unauthorized call out with correct message', async () => {
+      const testProps = {
+        ...props,
+        filterManager: new FilterManager(mockUiSettingsForFilterManager),
+        showCallOutUnauthorizedMsg: true,
+      };
+
+      const wrapper = await getWrapper(
+        <TestProviders>
+          <QueryTabHeader {...testProps} />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper.find('[data-test-subj="timelineCallOutUnauthorized"]').first().prop('title')
+      ).toEqual(
+        'You can use Timeline to investigate events, but you do not have the required permissions to save timelines for future use. If you need to save timelines, contact your Kibana administrator.'
+      );
+    });
+
+    test('it renders the immutable timeline call out providers', async () => {
+      const testProps = {
+        ...props,
+        filterManager: new FilterManager(mockUiSettingsForFilterManager),
+        showCallOutUnauthorizedMsg: false,
+        status: TimelineStatus.immutable,
+      };
+
+      const wrapper = await getWrapper(
+        <TestProviders>
+          <QueryTabHeader {...testProps} />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="timelineImmutableCallOut"]').exists()).toEqual(true);
+    });
+
+    test('it renders the immutable timeline call out with correct icon', async () => {
+      const testProps = {
+        ...props,
+        filterManager: new FilterManager(mockUiSettingsForFilterManager),
+        showCallOutUnauthorizedMsg: false,
+        status: TimelineStatus.immutable,
+      };
+
+      const wrapper = await getWrapper(
+        <TestProviders>
+          <QueryTabHeader {...testProps} />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper.find('[data-test-subj="timelineImmutableCallOut"]').first().prop('iconType')
+      ).toEqual('warning');
+    });
+
+    test('it renders the immutable timeline call out with correct message', async () => {
+      const testProps = {
+        ...props,
+        filterManager: new FilterManager(mockUiSettingsForFilterManager),
+        showCallOutUnauthorizedMsg: false,
+        status: TimelineStatus.immutable,
+      };
+
+      const wrapper = await getWrapper(
+        <TestProviders>
+          <QueryTabHeader {...testProps} />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper.find('[data-test-subj="timelineImmutableCallOut"]').first().prop('title')
+      ).toEqual(
+        'This prebuilt timeline template cannot be modified. To make changes, please duplicate this template and make modifications to the duplicate template.'
+      );
+    });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.tsx
new file mode 100644
index 00000000000000..553b71705884b1
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.tsx
@@ -0,0 +1,115 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiCallOut, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React, { useMemo } from 'react';
+import type { FilterManager } from '@kbn/data-plugin/public';
+
+import { IS_DRAGGING_CLASS_NAME } from '@kbn/securitysolution-t-grid';
+import styled from '@emotion/styled';
+import { euiThemeVars } from '@kbn/ui-theme';
+
+import type { TimelineStatusLiteralWithNull } from '../../../../../../common/api/timeline';
+import { TimelineStatus, TimelineType } from '../../../../../../common/api/timeline';
+import { timelineSelectors } from '../../../../store';
+import { useDeepEqualSelector } from '../../../../../common/hooks/use_selector';
+import { timelineDefaults } from '../../../../store/defaults';
+import * as i18n from './translations';
+import { StatefulSearchOrFilter } from '../../search_or_filter';
+import { DataProviders } from '../../data_providers';
+
+interface Props {
+  filterManager: FilterManager;
+  show: boolean;
+  showCallOutUnauthorizedMsg: boolean;
+  status: TimelineStatusLiteralWithNull;
+  timelineId: string;
+}
+
+const DataProvidersContainer = styled.div<{ $shouldShowQueryBuilder: boolean }>`
+  position: relative;
+  width: 100%;
+  transition: 0.5s ease-in-out;
+  overflow: hidden;
+
+  ${(props) =>
+    props.$shouldShowQueryBuilder
+      ? `display: block; max-height: 300px; visibility: visible; margin-block-start: 0px;`
+      : `display: block; max-height: 0px; visibility: hidden; margin-block-start:-${euiThemeVars.euiSizeS};`}
+
+  .${IS_DRAGGING_CLASS_NAME} & {
+    display: block;
+    max-height: 300px;
+    visibility: visible;
+    margin-block-start: 0px;
+  }
+`;
+
+const QueryTabHeaderComponent: React.FC<Props> = ({
+  filterManager,
+  show,
+  showCallOutUnauthorizedMsg,
+  status,
+  timelineId,
+}) => {
+  const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
+
+  const getIsDataProviderVisible = useMemo(
+    () => timelineSelectors.dataProviderVisibilitySelector(),
+    []
+  );
+
+  const timelineType = useDeepEqualSelector(
+    (state) => (getTimeline(state, timelineId) ?? timelineDefaults).timelineType
+  );
+
+  const isDataProviderVisible = useDeepEqualSelector(
+    (state) => getIsDataProviderVisible(state, timelineId) ?? timelineDefaults.isDataProviderVisible
+  );
+
+  const shouldShowQueryBuilder = isDataProviderVisible || timelineType === TimelineType.template;
+
+  return (
+    <EuiFlexGroup gutterSize="s" direction="column">
+      <EuiFlexItem>
+        <StatefulSearchOrFilter filterManager={filterManager} timelineId={timelineId} />
+      </EuiFlexItem>
+      {showCallOutUnauthorizedMsg && (
+        <EuiFlexItem>
+          <EuiCallOut
+            data-test-subj="timelineCallOutUnauthorized"
+            title={i18n.CALL_OUT_UNAUTHORIZED_MSG}
+            color="warning"
+            iconType="warning"
+            size="s"
+          />
+        </EuiFlexItem>
+      )}
+      {status === TimelineStatus.immutable && (
+        <EuiFlexItem>
+          <EuiCallOut
+            data-test-subj="timelineImmutableCallOut"
+            title={i18n.CALL_OUT_IMMUTABLE}
+            color="primary"
+            iconType="warning"
+            size="s"
+          />
+        </EuiFlexItem>
+      )}
+      {show ? (
+        <DataProvidersContainer
+          className="data-providers-container"
+          $shouldShowQueryBuilder={shouldShowQueryBuilder}
+        >
+          <DataProviders timelineId={timelineId} />
+        </DataProvidersContainer>
+      ) : null}
+    </EuiFlexGroup>
+  );
+};
+
+export const QueryTabHeader = React.memo(QueryTabHeaderComponent);
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/selectors.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/selectors.ts
new file mode 100644
index 00000000000000..62c0134b966123
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/selectors.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { createSelector } from 'reselect';
+
+import { timelineSelectors } from '../../../../store';
+
+export const getTimelineSaveModalByIdSelector = () =>
+  createSelector(timelineSelectors.selectTimeline, (timeline) => ({
+    showSaveModal: timeline?.showSaveModal ?? false,
+    status: timeline?.status,
+  }));
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/translations.ts
new file mode 100644
index 00000000000000..f90c46d69d2305
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/translations.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const CALL_OUT_UNAUTHORIZED_MSG = i18n.translate(
+  'xpack.securitySolution.timeline.callOut.unauthorized.message.description',
+  {
+    defaultMessage:
+      'You can use Timeline to investigate events, but you do not have the required permissions to save timelines for future use. If you need to save timelines, contact your Kibana administrator.',
+  }
+);
+
+export const CALL_OUT_IMMUTABLE = i18n.translate(
+  'xpack.securitySolution.timeline.callOut.immutable.message.description',
+  {
+    defaultMessage:
+      'This prebuilt timeline template cannot be modified. To make changes, please duplicate this template and make modifications to the duplicate template.',
+  }
+);
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.test.tsx
new file mode 100644
index 00000000000000..1fe1f2ebbfa7d6
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.test.tsx
@@ -0,0 +1,241 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { shallow } from 'enzyme';
+import React from 'react';
+import useResizeObserver from 'use-resize-observer/polyfilled';
+
+import { DefaultCellRenderer } from '../cell_rendering/default_cell_renderer';
+import { defaultHeaders, mockTimelineData } from '../../../../common/mock';
+import '../../../../common/mock/match_media';
+import { TestProviders } from '../../../../common/mock/test_providers';
+
+import type { Props as QueryTabContentComponentProps } from '.';
+import { QueryTabContentComponent } from '.';
+import { defaultRowRenderers } from '../body/renderers';
+import type { Sort } from '../body/sort';
+import { mockDataProviders } from '../data_providers/mock/mock_data_providers';
+import { useMountAppended } from '../../../../common/utils/use_mount_appended';
+import { TimelineId, TimelineTabs } from '../../../../../common/types/timeline';
+import { TimelineStatus } from '../../../../../common/api/timeline';
+import { useTimelineEvents } from '../../../containers';
+import { useTimelineEventsDetails } from '../../../containers/details';
+import { useSourcererDataView } from '../../../../common/containers/sourcerer';
+import { mockSourcererScope } from '../../../../common/containers/sourcerer/mocks';
+import { Direction } from '../../../../../common/search_strategy';
+import * as helpers from '../../../../common/lib/kuery';
+import { waitFor } from '@testing-library/react';
+
+jest.mock('../../../containers', () => ({
+  useTimelineEvents: jest.fn(),
+}));
+jest.mock('../../../containers/details', () => ({
+  useTimelineEventsDetails: jest.fn(),
+}));
+jest.mock('../../fields_browser', () => ({
+  useFieldBrowserOptions: jest.fn(),
+}));
+jest.mock('../body/events', () => ({
+  Events: () => <></>,
+}));
+
+jest.mock('../../../../common/containers/sourcerer');
+jest.mock('../../../../common/containers/sourcerer/use_signal_helpers', () => ({
+  useSignalHelpers: () => ({ signalIndexNeedsInit: false }),
+}));
+
+jest.mock('../../../../common/lib/kuery');
+
+const mockUseResizeObserver: jest.Mock = useResizeObserver as jest.Mock;
+jest.mock('use-resize-observer/polyfilled');
+mockUseResizeObserver.mockImplementation(() => ({}));
+
+jest.mock('../../../../common/lib/kibana');
+
+describe('Timeline', () => {
+  let props = {} as QueryTabContentComponentProps;
+  const sort: Sort[] = [
+    {
+      columnId: '@timestamp',
+      columnType: 'date',
+      esTypes: ['date'],
+      sortDirection: Direction.desc,
+    },
+  ];
+  const startDate = '2018-03-23T18:49:23.132Z';
+  const endDate = '2018-03-24T03:33:52.253Z';
+
+  const mount = useMountAppended();
+  const getWrapper = async (childrenComponent: JSX.Element) => {
+    const wrapper = mount(childrenComponent);
+    await waitFor(() => wrapper.find('[data-test-subj="timelineHeader"]').exists());
+    return wrapper;
+  };
+  beforeEach(() => {
+    (useTimelineEvents as jest.Mock).mockReturnValue([
+      false,
+      {
+        events: mockTimelineData,
+        pageInfo: {
+          activePage: 0,
+          totalPages: 10,
+        },
+      },
+    ]);
+    (useTimelineEventsDetails as jest.Mock).mockReturnValue([false, {}]);
+
+    (useSourcererDataView as jest.Mock).mockReturnValue(mockSourcererScope);
+
+    props = {
+      columns: defaultHeaders,
+      dataProviders: mockDataProviders,
+      end: endDate,
+      expandedDetail: {},
+      filters: [],
+      timelineId: TimelineId.test,
+      isLive: false,
+      itemsPerPage: 5,
+      itemsPerPageOptions: [5, 10, 20],
+      kqlMode: 'search' as QueryTabContentComponentProps['kqlMode'],
+      kqlQueryExpression: ' ',
+      kqlQueryLanguage: 'kuery',
+      onEventClosed: jest.fn(),
+      renderCellValue: DefaultCellRenderer,
+      rowRenderers: defaultRowRenderers,
+      showCallOutUnauthorizedMsg: false,
+      showExpandedDetails: false,
+      sort,
+      start: startDate,
+      status: TimelineStatus.active,
+      timerangeKind: 'absolute',
+      activeTab: TimelineTabs.query,
+      show: true,
+    };
+  });
+
+  // FLAKY: https://github.com/elastic/kibana/issues/156797
+  describe.skip('rendering', () => {
+    let spyCombineQueries: jest.SpyInstance;
+
+    beforeEach(() => {
+      spyCombineQueries = jest.spyOn(helpers, 'combineQueries');
+    });
+    afterEach(() => {
+      spyCombineQueries.mockClear();
+    });
+
+    test('should trim kqlQueryExpression', async () => {
+      await getWrapper(
+        <TestProviders>
+          <QueryTabContentComponent {...props} />
+        </TestProviders>
+      );
+
+      expect(spyCombineQueries.mock.calls[0][0].kqlQuery.query).toEqual(
+        props.kqlQueryExpression.trim()
+      );
+    });
+
+    test('renders correctly against snapshot', () => {
+      const wrapper = shallow(
+        <TestProviders>
+          <QueryTabContentComponent {...props} />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('QueryTabContentComponent')).toMatchSnapshot();
+    });
+
+    test('it renders the timeline header', async () => {
+      const wrapper = await getWrapper(
+        <TestProviders>
+          <QueryTabContentComponent {...props} />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="timelineHeader"]').exists()).toEqual(true);
+    });
+
+    test('it renders the timeline table', async () => {
+      const wrapper = await getWrapper(
+        <TestProviders>
+          <QueryTabContentComponent {...props} />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
+      ).toEqual(true);
+    });
+
+    test('it does NOT render the timeline table when start is empty', async () => {
+      const wrapper = await getWrapper(
+        <TestProviders>
+          <QueryTabContentComponent {...props} start={''} />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
+      ).toEqual(true);
+      expect(wrapper.find('[data-test-subj="events"]').exists()).toEqual(false);
+    });
+
+    test('it does NOT render the timeline table when end is empty', async () => {
+      const wrapper = await getWrapper(
+        <TestProviders>
+          <QueryTabContentComponent {...props} end={''} />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
+      ).toEqual(true);
+      expect(wrapper.find('[data-test-subj="events"]').exists()).toEqual(false);
+    });
+
+    test('it does NOT render the paging footer when you do NOT have any data providers', async () => {
+      const wrapper = await getWrapper(
+        <TestProviders>
+          <QueryTabContentComponent {...props} />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="table-pagination"]').exists()).toEqual(false);
+    });
+
+    it('it shows the timeline footer', async () => {
+      const wrapper = await getWrapper(
+        <TestProviders>
+          <QueryTabContentComponent {...props} />
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="timeline-footer"]').exists()).toEqual(true);
+    });
+
+    test('it does render the timeline table when the source is loading with no events', async () => {
+      (useSourcererDataView as jest.Mock).mockReturnValue({
+        browserFields: {},
+        loading: true,
+        indexPattern: {},
+        selectedPatterns: [],
+        missingPatterns: [],
+      });
+      const wrapper = await getWrapper(
+        <TestProviders>
+          <QueryTabContentComponent {...props} />
+        </TestProviders>
+      );
+
+      expect(
+        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
+      ).toEqual(true);
+      expect(wrapper.find('[data-test-subj="events"]').exists()).toEqual(false);
+    });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx
new file mode 100644
index 00000000000000..1d2527ae641afd
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx
@@ -0,0 +1,603 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyoutHeader,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiBadge,
+} from '@elastic/eui';
+import { isEmpty } from 'lodash/fp';
+import React, { useMemo, useEffect, useCallback, useState } from 'react';
+import styled from 'styled-components';
+import type { Dispatch } from 'redux';
+import type { ConnectedProps } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
+import deepEqual from 'fast-deep-equal';
+import { InPortal } from 'react-reverse-portal';
+
+import { FilterManager } from '@kbn/data-plugin/public';
+import { getEsQueryConfig } from '@kbn/data-plugin/common';
+import { DataLoadingState } from '@kbn/unified-data-table';
+import { RootDragDropProvider } from '@kbn/dom-drag-drop';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
+import type { ControlColumnProps } from '../../../../../common/types';
+import { InputsModelId } from '../../../../common/store/inputs/constants';
+import { useInvalidFilterQuery } from '../../../../common/hooks/use_invalid_filter_query';
+import { timelineActions, timelineSelectors } from '../../../store';
+import type { CellValueElementProps } from '../cell_rendering';
+import type { Direction, TimelineItem } from '../../../../../common/search_strategy';
+import { useTimelineEvents } from '../../../containers';
+import { useKibana } from '../../../../common/lib/kibana';
+import { defaultHeaders } from '../body/column_headers/default_headers';
+import { StatefulBody } from '../body';
+import { Footer, footerHeight } from '../footer';
+import { QueryTabHeader } from './header';
+import { calculateTotalPages } from '../helpers';
+import { combineQueries } from '../../../../common/lib/kuery';
+import { TimelineRefetch } from '../refetch_timeline';
+import type {
+  KueryFilterQueryKind,
+  RowRenderer,
+  ToggleDetailPanel,
+} from '../../../../../common/types/timeline';
+import { TimelineId, TimelineTabs } from '../../../../../common/types/timeline';
+import { requiredFieldsForActions } from '../../../../detections/components/alerts_table/default_config';
+import { EventDetailsWidthProvider } from '../../../../common/components/events_viewer/event_details_width_context';
+import type { inputsModel, State } from '../../../../common/store';
+import { inputsSelectors } from '../../../../common/store';
+import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
+import { timelineDefaults } from '../../../store/defaults';
+import { useSourcererDataView } from '../../../../common/containers/sourcerer';
+import { useTimelineEventsCountPortal } from '../../../../common/hooks/use_timeline_events_count';
+import type { TimelineModel } from '../../../store/model';
+import { DetailsPanel } from '../../side_panel';
+import { getDefaultControlColumn } from '../body/control_columns';
+import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
+import { useLicense } from '../../../../common/hooks/use_license';
+import { HeaderActions } from '../../../../common/components/header_actions/header_actions';
+import { UnifiedTimelineComponent } from '../unified_components';
+import { defaultUdtHeaders } from '../unified_components/default_headers';
+import { StyledTableFlexGroup, StyledTableFlexItem } from '../unified_components/styles';
+import { activeTimeline } from '../../../containers/active_timeline_context';
+
+const TimelineHeaderContainer = styled.div`
+  margin-top: 6px;
+`;
+
+const QueryTabHeaderContainer = styled.div`
+  width: 100%;
+`;
+
+QueryTabHeaderContainer.displayName = 'TimelineHeaderContainer';
+
+const StyledEuiFlyoutHeader = styled(EuiFlyoutHeader)`
+  align-items: stretch;
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledEuiFlyoutBody = styled(EuiFlyoutBody)`
+  overflow-y: hidden;
+  flex: 1;
+
+  .euiFlyoutBody__overflow {
+    overflow: hidden;
+    mask-image: none;
+  }
+
+  .euiFlyoutBody__overflowContent {
+    padding: 0;
+    height: 100%;
+    display: flex;
+  }
+`;
+
+const StyledEuiFlyoutFooter = styled(EuiFlyoutFooter)`
+  background: none;
+  &.euiFlyoutFooter {
+    ${({ theme }) => `padding: ${theme.eui.euiSizeS} 0;`}
+  }
+`;
+
+const FullWidthFlexGroup = styled(EuiFlexGroup)`
+  margin: 0;
+  width: 100%;
+  overflow: hidden;
+`;
+
+const ScrollableFlexItem = styled(EuiFlexItem)`
+  ${({ theme }) => `margin: 0 ${theme.eui.euiSizeM};`}
+  overflow: hidden;
+`;
+
+const SourcererFlex = styled(EuiFlexItem)`
+  align-items: flex-end;
+`;
+
+SourcererFlex.displayName = 'SourcererFlex';
+
+const VerticalRule = styled.div`
+  width: 2px;
+  height: 100%;
+  background: ${({ theme }) => theme.eui.euiColorLightShade};
+`;
+
+VerticalRule.displayName = 'VerticalRule';
+
+const EventsCountBadge = styled(EuiBadge)`
+  margin-left: ${({ theme }) => theme.eui.euiSizeS};
+`;
+
+const isTimerangeSame = (prevProps: Props, nextProps: Props) =>
+  prevProps.end === nextProps.end &&
+  prevProps.start === nextProps.start &&
+  prevProps.timerangeKind === nextProps.timerangeKind;
+
+const compareQueryProps = (prevProps: Props, nextProps: Props) =>
+  prevProps.kqlMode === nextProps.kqlMode &&
+  prevProps.kqlQueryExpression === nextProps.kqlQueryExpression &&
+  deepEqual(prevProps.filters, nextProps.filters);
+
+interface OwnProps {
+  renderCellValue: (props: CellValueElementProps) => React.ReactNode;
+  rowRenderers: RowRenderer[];
+  timelineId: string;
+}
+
+const EMPTY_EVENTS: TimelineItem[] = [];
+
+export type Props = OwnProps & PropsFromRedux;
+
+const trailingControlColumns: ControlColumnProps[] = []; // stable reference
+
+export const QueryTabContentComponent: React.FC<Props> = ({
+  activeTab,
+  columns,
+  dataProviders,
+  end,
+  expandedDetail,
+  filters,
+  timelineId,
+  isLive,
+  itemsPerPage,
+  itemsPerPageOptions,
+  kqlMode,
+  kqlQueryExpression,
+  kqlQueryLanguage,
+  onEventClosed,
+  renderCellValue,
+  rowRenderers,
+  show,
+  showCallOutUnauthorizedMsg,
+  showExpandedDetails,
+  start,
+  status,
+  sort,
+  timerangeKind,
+}) => {
+  const dispatch = useDispatch();
+  const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
+    'unifiedComponentsInTimelineEnabled'
+  );
+
+  const [pageRows, setPageRows] = useState<TimelineItem[][]>([]);
+  const rows = useMemo(() => pageRows.flat(), [pageRows]);
+  const { portalNode: timelineEventsCountPortalNode } = useTimelineEventsCountPortal();
+  const {
+    browserFields,
+    dataViewId,
+    loading: isSourcererLoading,
+    indexPattern,
+    runtimeMappings,
+    // important to get selectedPatterns from useSourcererDataView
+    // in order to include the exclude filters in the search that are not stored in the timeline
+    selectedPatterns,
+  } = useSourcererDataView(SourcererScopeName.timeline);
+
+  const { uiSettings } = useKibana().services;
+  const isEnterprisePlus = useLicense().isEnterprise();
+  const ACTION_BUTTON_COUNT = isEnterprisePlus ? 6 : 5;
+
+  const getManageTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
+
+  const { sampleSize = 10, filterManager: activeFilterManager } = useDeepEqualSelector((state) =>
+    getManageTimeline(state, timelineId ?? TimelineId.active)
+  );
+
+  const filterManager = useMemo(
+    () => activeFilterManager ?? new FilterManager(uiSettings),
+    [activeFilterManager, uiSettings]
+  );
+
+  const esQueryConfig = useMemo(() => getEsQueryConfig(uiSettings), [uiSettings]);
+  const kqlQuery: {
+    query: string;
+    language: KueryFilterQueryKind;
+  } = useMemo(
+    () => ({ query: kqlQueryExpression.trim(), language: kqlQueryLanguage }),
+    [kqlQueryExpression, kqlQueryLanguage]
+  );
+
+  const combinedQueries = combineQueries({
+    config: esQueryConfig,
+    dataProviders,
+    indexPattern,
+    browserFields,
+    filters,
+    kqlQuery,
+    kqlMode,
+  });
+
+  useInvalidFilterQuery({
+    id: timelineId,
+    filterQuery: combinedQueries?.filterQuery,
+    kqlError: combinedQueries?.kqlError,
+    query: kqlQuery,
+    startDate: start,
+    endDate: end,
+  });
+
+  const isBlankTimeline: boolean =
+    isEmpty(dataProviders) &&
+    isEmpty(filters) &&
+    isEmpty(kqlQuery.query) &&
+    combinedQueries?.filterQuery === undefined;
+
+  const canQueryTimeline = useMemo(
+    () =>
+      combinedQueries != null &&
+      isSourcererLoading != null &&
+      !isSourcererLoading &&
+      !isEmpty(start) &&
+      !isEmpty(end) &&
+      combinedQueries?.filterQuery !== undefined,
+    [combinedQueries, end, isSourcererLoading, start]
+  );
+
+  const columnsHeader = useMemo(() => {
+    return isEmpty(columns)
+      ? unifiedComponentsInTimelineEnabled
+        ? defaultUdtHeaders
+        : defaultHeaders
+      : columns;
+  }, [columns, unifiedComponentsInTimelineEnabled]);
+
+  const defaultColumns = useMemo(() => {
+    return columnsHeader.map((c) => c.id);
+  }, [columnsHeader]);
+
+  const getTimelineQueryFields = useCallback(() => {
+    return [...defaultColumns, ...requiredFieldsForActions];
+  }, [defaultColumns]);
+
+  const timelineQuerySortField = sort.map(({ columnId, columnType, esTypes, sortDirection }) => ({
+    field: columnId,
+    direction: sortDirection as Direction,
+    esTypes: esTypes ?? [],
+    type: columnType,
+  }));
+
+  useEffect(() => {
+    dispatch(
+      timelineActions.initializeTimelineSettings({
+        filterManager,
+        id: timelineId,
+      })
+    );
+  }, [dispatch, filterManager, timelineId]);
+
+  const limit = useMemo(
+    () => (unifiedComponentsInTimelineEnabled ? sampleSize : itemsPerPage),
+    [itemsPerPage, unifiedComponentsInTimelineEnabled, sampleSize]
+  );
+
+  const [
+    dataLoadingState,
+    { events, inspect, totalCount, refetch, loadPage, pageInfo, refreshedAt },
+  ] = useTimelineEvents({
+    dataViewId,
+    endDate: end,
+    fields: getTimelineQueryFields(),
+    filterQuery: combinedQueries?.filterQuery,
+    id: timelineId,
+    indexNames: selectedPatterns,
+    language: kqlQuery.language,
+    limit,
+    runtimeMappings,
+    skip: !canQueryTimeline,
+    sort: timelineQuerySortField,
+    startDate: start,
+    timerangeKind,
+  });
+
+  const isQueryLoading = useMemo(() => {
+    return (
+      dataLoadingState === DataLoadingState.loading ||
+      dataLoadingState === DataLoadingState.loadingMore
+    );
+  }, [dataLoadingState]);
+
+  useEffect(() => {
+    setPageRows((currentPageRows) => {
+      if (pageInfo.activePage !== 0 && currentPageRows[pageInfo.activePage]?.length) {
+        return currentPageRows;
+      }
+      const newPageRows = pageInfo.activePage === 0 ? [] : [...currentPageRows];
+      newPageRows[pageInfo.activePage] = events;
+      return newPageRows;
+    });
+  }, [events, pageInfo.activePage]);
+
+  const handleOnPanelClosed = useCallback(() => {
+    onEventClosed({ tabType: TimelineTabs.query, id: timelineId });
+
+    if (
+      expandedDetail[TimelineTabs.query]?.panelView &&
+      timelineId === TimelineId.active &&
+      showExpandedDetails
+    ) {
+      activeTimeline.toggleExpandedDetail({});
+    }
+  }, [onEventClosed, timelineId, expandedDetail, showExpandedDetails]);
+
+  useEffect(() => {
+    dispatch(
+      timelineActions.updateIsLoading({
+        id: timelineId,
+        isLoading: isQueryLoading || isSourcererLoading,
+      })
+    );
+  }, [isSourcererLoading, timelineId, dispatch, dataLoadingState, isQueryLoading]);
+
+  const leadingControlColumns = useMemo(
+    () =>
+      getDefaultControlColumn(ACTION_BUTTON_COUNT).map((x) => ({
+        ...x,
+        headerCellRender: HeaderActions,
+      })),
+    [ACTION_BUTTON_COUNT]
+  );
+
+  const header = useMemo(
+    () => (
+      <StyledEuiFlyoutHeader data-test-subj={`${activeTab}-tab-flyout-header`} hasBorder={false}>
+        <TimelineHeaderContainer data-test-subj="timelineHeader">
+          <QueryTabHeader
+            filterManager={filterManager}
+            show={show && activeTab === TimelineTabs.query}
+            showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg}
+            status={status}
+            timelineId={timelineId}
+          />
+        </TimelineHeaderContainer>
+      </StyledEuiFlyoutHeader>
+    ),
+    [activeTab, filterManager, show, showCallOutUnauthorizedMsg, status, timelineId]
+  );
+
+  // NOTE: The timeline is blank after browser FORWARD navigation (after using back button to navigate to
+  // the previous page from the timeline), yet we still see total count. This is because the timeline
+  // is not getting refreshed when using browser navigation.
+  const showEventsCountBadge = !isBlankTimeline && totalCount >= 0;
+
+  return (
+    <>
+      <InPortal node={timelineEventsCountPortalNode}>
+        {showEventsCountBadge ? (
+          <EventsCountBadge data-test-subj="query_tab_events_count_badge">
+            {totalCount}
+          </EventsCountBadge>
+        ) : null}
+      </InPortal>
+      <TimelineRefetch
+        id={`${timelineId}-${TimelineTabs.query}`}
+        inputId={InputsModelId.timeline}
+        inspect={inspect}
+        loading={isQueryLoading}
+        refetch={refetch}
+        skip={!canQueryTimeline}
+      />
+      {unifiedComponentsInTimelineEnabled ? (
+        <StyledTableFlexGroup direction="column" gutterSize="s">
+          <StyledTableFlexItem grow={false}>{header}</StyledTableFlexItem>
+          <StyledTableFlexItem>
+            <RootDragDropProvider>
+              <UnifiedTimelineComponent
+                columns={columnsHeader}
+                rowRenderers={rowRenderers}
+                timelineId={timelineId}
+                itemsPerPage={itemsPerPage}
+                itemsPerPageOptions={itemsPerPageOptions}
+                sort={sort}
+                events={rows}
+                refetch={refetch}
+                dataLoadingState={dataLoadingState}
+                totalCount={isBlankTimeline ? 0 : totalCount}
+                onEventClosed={onEventClosed}
+                expandedDetail={expandedDetail}
+                showExpandedDetails={showExpandedDetails}
+                onChangePage={loadPage}
+                activeTab={activeTab}
+                updatedAt={refreshedAt}
+                isTextBasedQuery={false}
+              />
+            </RootDragDropProvider>
+          </StyledTableFlexItem>
+        </StyledTableFlexGroup>
+      ) : (
+        <FullWidthFlexGroup direction="column" gutterSize="s">
+          <ScrollableFlexItem grow={2}>
+            {header}
+            <EventDetailsWidthProvider>
+              <StyledEuiFlyoutBody
+                data-test-subj={`${TimelineTabs.query}-tab-flyout-body`}
+                className="timeline-flyout-body"
+              >
+                <StatefulBody
+                  activePage={pageInfo.activePage}
+                  browserFields={browserFields}
+                  data={isBlankTimeline ? EMPTY_EVENTS : events}
+                  id={timelineId}
+                  refetch={refetch}
+                  renderCellValue={renderCellValue}
+                  rowRenderers={rowRenderers}
+                  sort={sort}
+                  tabType={TimelineTabs.query}
+                  totalPages={calculateTotalPages({
+                    itemsCount: totalCount,
+                    itemsPerPage,
+                  })}
+                  leadingControlColumns={leadingControlColumns}
+                  trailingControlColumns={trailingControlColumns}
+                />
+              </StyledEuiFlyoutBody>
+              <StyledEuiFlyoutFooter
+                data-test-subj={`${TimelineTabs.query}-tab-flyout-footer`}
+                className="timeline-flyout-footer"
+              >
+                {!isBlankTimeline && (
+                  <Footer
+                    activePage={pageInfo?.activePage ?? 0}
+                    data-test-subj="timeline-footer"
+                    updatedAt={refreshedAt}
+                    height={footerHeight}
+                    id={timelineId}
+                    isLive={isLive}
+                    isLoading={isQueryLoading || isSourcererLoading}
+                    itemsCount={isBlankTimeline ? 0 : events.length}
+                    itemsPerPage={itemsPerPage}
+                    itemsPerPageOptions={itemsPerPageOptions}
+                    onChangePage={loadPage}
+                    totalCount={isBlankTimeline ? 0 : totalCount}
+                  />
+                )}
+              </StyledEuiFlyoutFooter>
+            </EventDetailsWidthProvider>
+          </ScrollableFlexItem>
+          {showExpandedDetails && (
+            <>
+              <VerticalRule />
+              <ScrollableFlexItem grow={1}>
+                <DetailsPanel
+                  browserFields={browserFields}
+                  handleOnPanelClosed={handleOnPanelClosed}
+                  runtimeMappings={runtimeMappings}
+                  tabType={TimelineTabs.query}
+                  scopeId={timelineId}
+                />
+              </ScrollableFlexItem>
+            </>
+          )}
+        </FullWidthFlexGroup>
+      )}
+    </>
+  );
+};
+
+const makeMapStateToProps = () => {
+  const getShowCallOutUnauthorizedMsg = timelineSelectors.getShowCallOutUnauthorizedMsg();
+  const getTimeline = timelineSelectors.getTimelineByIdSelector();
+  const getKqlQueryTimeline = timelineSelectors.getKqlFilterKuerySelector();
+  const getInputsTimeline = inputsSelectors.getTimelineSelector();
+  const mapStateToProps = (state: State, { timelineId }: OwnProps) => {
+    const timeline: TimelineModel = getTimeline(state, timelineId) ?? timelineDefaults;
+    const input: inputsModel.InputsRange = getInputsTimeline(state);
+    const {
+      activeTab,
+      columns,
+      dataProviders,
+      expandedDetail,
+      filters,
+      itemsPerPage,
+      itemsPerPageOptions,
+      kqlMode,
+      show,
+      sort,
+      status,
+      timelineType,
+    } = timeline;
+    const kqlQueryTimeline = getKqlQueryTimeline(state, timelineId);
+    const timelineFilter = kqlMode === 'filter' ? filters || [] : [];
+
+    // return events on empty search
+    const kqlQueryExpression =
+      isEmpty(dataProviders) &&
+      isEmpty(kqlQueryTimeline?.expression ?? '') &&
+      timelineType === 'template'
+        ? ' '
+        : kqlQueryTimeline?.expression ?? '';
+
+    const kqlQueryLanguage =
+      isEmpty(dataProviders) && timelineType === 'template'
+        ? 'kuery'
+        : kqlQueryTimeline?.kind ?? 'kuery';
+
+    return {
+      activeTab,
+      columns,
+      dataProviders,
+      end: input.timerange.to,
+      expandedDetail,
+      filters: timelineFilter,
+      timelineId,
+      isLive: input.policy.kind === 'interval',
+      itemsPerPage,
+      itemsPerPageOptions,
+      kqlMode,
+      kqlQueryExpression,
+      kqlQueryLanguage,
+      showCallOutUnauthorizedMsg: getShowCallOutUnauthorizedMsg(state),
+      show,
+      showExpandedDetails:
+        !!expandedDetail[TimelineTabs.query] && !!expandedDetail[TimelineTabs.query]?.panelView,
+      sort,
+      start: input.timerange.from,
+      status,
+      timerangeKind: input.timerange.kind,
+    };
+  };
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = (dispatch: Dispatch, { timelineId }: OwnProps) => ({
+  onEventClosed: (args: ToggleDetailPanel) => {
+    dispatch(timelineActions.toggleDetailPanel(args));
+  },
+});
+
+const connector = connect(makeMapStateToProps, mapDispatchToProps);
+
+type PropsFromRedux = ConnectedProps<typeof connector>;
+
+const QueryTabContent = connector(
+  React.memo(
+    QueryTabContentComponent,
+    (prevProps, nextProps) =>
+      compareQueryProps(prevProps, nextProps) &&
+      prevProps.activeTab === nextProps.activeTab &&
+      isTimerangeSame(prevProps, nextProps) &&
+      prevProps.isLive === nextProps.isLive &&
+      prevProps.itemsPerPage === nextProps.itemsPerPage &&
+      prevProps.onEventClosed === nextProps.onEventClosed &&
+      prevProps.show === nextProps.show &&
+      prevProps.showCallOutUnauthorizedMsg === nextProps.showCallOutUnauthorizedMsg &&
+      prevProps.showExpandedDetails === nextProps.showExpandedDetails &&
+      prevProps.status === nextProps.status &&
+      prevProps.timelineId === nextProps.timelineId &&
+      deepEqual(prevProps.columns, nextProps.columns) &&
+      deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
+      deepEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) &&
+      deepEqual(prevProps.sort, nextProps.sort)
+  )
+);
+
+// eslint-disable-next-line import/no-default-export
+export { QueryTabContent as default };
\ No newline at end of file

From 20921dec04da5e51eeb238f445c2f3e69f0e271e Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Thu, 1 Feb 2024 11:35:22 -0500
Subject: [PATCH 06/65] Continued refactor of table code

---
 .../common/types/timeline/index.ts            |   1 +
 x-pack/plugins/security_solution/kibana.jsonc |   1 +
 .../security_solution/public/plugin.tsx       |   1 +
 .../timeline/query_tab_content/index.tsx      | 294 +++++++-----------
 .../timeline/query_tab_content_new/index.tsx  | 216 ++-----------
 .../timeline/tabs_content/index.tsx           |  36 +++
 .../get_fields_list_creation_options.ts       |  43 +++
 .../timeline/unified_components/index.tsx     | 177 ++++-------
 .../unified_components/resizable_layout.tsx   |  11 +-
 .../plugins/security_solution/public/types.ts |   3 +
 .../plugins/security_solution/tsconfig.json   |   6 +
 11 files changed, 301 insertions(+), 488 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/get_fields_list_creation_options.ts

diff --git a/x-pack/plugins/security_solution/common/types/timeline/index.ts b/x-pack/plugins/security_solution/common/types/timeline/index.ts
index e9d482344a28e0..8605b6bba2a788 100644
--- a/x-pack/plugins/security_solution/common/types/timeline/index.ts
+++ b/x-pack/plugins/security_solution/common/types/timeline/index.ts
@@ -31,6 +31,7 @@ export type ToggleDetailPanel = ExpandedDetailType & {
 
 export enum TimelineTabs {
   query = 'query',
+  queryNew = 'queryNew',
   graph = 'graph',
   notes = 'notes',
   pinned = 'pinned',
diff --git a/x-pack/plugins/security_solution/kibana.jsonc b/x-pack/plugins/security_solution/kibana.jsonc
index 99c2f585eb3f7e..3e781290679876 100644
--- a/x-pack/plugins/security_solution/kibana.jsonc
+++ b/x-pack/plugins/security_solution/kibana.jsonc
@@ -51,6 +51,7 @@
       "stackConnectors",
       "discover",
       "notifications",
+      "charts",
       "savedObjects",
       "savedSearch",
       "unifiedDocViewer",
diff --git a/x-pack/plugins/security_solution/public/plugin.tsx b/x-pack/plugins/security_solution/public/plugin.tsx
index e36dcd79917207..e0cb36d05324a1 100644
--- a/x-pack/plugins/security_solution/public/plugin.tsx
+++ b/x-pack/plugins/security_solution/public/plugin.tsx
@@ -208,6 +208,7 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
         telemetry: this.telemetry.start(),
         customDataService,
         topValuesPopover: new TopValuesPopoverService(),
+        charts: startPlugins.charts,
       };
       return services;
     };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
index a1d14ed8ed2f67..9433907d2e3055 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
@@ -14,7 +14,7 @@ import {
   EuiBadge,
 } from '@elastic/eui';
 import { isEmpty } from 'lodash/fp';
-import React, { useMemo, useEffect, useCallback, useState } from 'react';
+import React, { useMemo, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 import type { Dispatch } from 'redux';
 import type { ConnectedProps } from 'react-redux';
@@ -24,9 +24,6 @@ import { InPortal } from 'react-reverse-portal';
 
 import { FilterManager } from '@kbn/data-plugin/public';
 import { getEsQueryConfig } from '@kbn/data-plugin/common';
-import { DataLoadingState } from '@kbn/unified-data-table';
-import { RootDragDropProvider } from '@kbn/dom-drag-drop';
-import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import type { ControlColumnProps } from '../../../../../common/types';
 import { InputsModelId } from '../../../../common/store/inputs/constants';
 import { useInvalidFilterQuery } from '../../../../common/hooks/use_invalid_filter_query';
@@ -57,20 +54,13 @@ import { timelineDefaults } from '../../../store/defaults';
 import { useSourcererDataView } from '../../../../common/containers/sourcerer';
 import { useTimelineEventsCountPortal } from '../../../../common/hooks/use_timeline_events_count';
 import type { TimelineModel } from '../../../store/model';
+import { useTimelineFullScreen } from '../../../../common/containers/use_full_screen';
 import { DetailsPanel } from '../../side_panel';
+import { ExitFullScreen } from '../../../../common/components/exit_full_screen';
 import { getDefaultControlColumn } from '../body/control_columns';
 import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
 import { useLicense } from '../../../../common/hooks/use_license';
 import { HeaderActions } from '../../../../common/components/header_actions/header_actions';
-import { UnifiedTimelineComponent } from '../unified_components';
-import { defaultUdtHeaders } from '../unified_components/default_headers';
-import { StyledTableFlexGroup, StyledTableFlexItem } from '../unified_components/styles';
-import { activeTimeline } from '../../../containers/active_timeline_context';
-
-const TimelineHeaderContainer = styled.div`
-  margin-top: 6px;
-`;
-
 const QueryTabHeaderContainer = styled.div`
   width: 100%;
 `;
@@ -82,6 +72,10 @@ const StyledEuiFlyoutHeader = styled(EuiFlyoutHeader)`
   box-shadow: none;
   display: flex;
   flex-direction: column;
+
+  &.euiFlyoutHeader {
+    ${({ theme }) => `padding: ${theme.eui.euiSizeS} 0 0 0;`}
+  }
 `;
 
 const StyledEuiFlyoutBody = styled(EuiFlyoutBody)`
@@ -184,17 +178,12 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   timerangeKind,
 }) => {
   const dispatch = useDispatch();
-  const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
-    'unifiedComponentsInTimelineEnabled'
-  );
-
-  const [pageRows, setPageRows] = useState<TimelineItem[][]>([]);
-  const rows = useMemo(() => pageRows.flat(), [pageRows]);
   const { portalNode: timelineEventsCountPortalNode } = useTimelineEventsCountPortal();
+  const { setTimelineFullScreen, timelineFullScreen } = useTimelineFullScreen();
   const {
     browserFields,
     dataViewId,
-    loading: isSourcererLoading,
+    loading: loadingSourcerer,
     indexPattern,
     runtimeMappings,
     // important to get selectedPatterns from useSourcererDataView
@@ -207,11 +196,11 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   const ACTION_BUTTON_COUNT = isEnterprisePlus ? 6 : 5;
 
   const getManageTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
-
-  const { sampleSize = 10, filterManager: activeFilterManager } = useDeepEqualSelector((state) =>
+  const currentTimeline = useDeepEqualSelector((state) =>
     getManageTimeline(state, timelineId ?? TimelineId.active)
   );
 
+  const activeFilterManager = currentTimeline.filterManager;
   const filterManager = useMemo(
     () => activeFilterManager ?? new FilterManager(uiSettings),
     [activeFilterManager, uiSettings]
@@ -254,29 +243,20 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   const canQueryTimeline = useMemo(
     () =>
       combinedQueries != null &&
-      isSourcererLoading != null &&
-      !isSourcererLoading &&
+      loadingSourcerer != null &&
+      !loadingSourcerer &&
       !isEmpty(start) &&
       !isEmpty(end) &&
       combinedQueries?.filterQuery !== undefined,
-    [combinedQueries, end, isSourcererLoading, start]
+    [combinedQueries, end, loadingSourcerer, start]
   );
 
-  const columnsHeader = useMemo(() => {
-    return isEmpty(columns)
-      ? unifiedComponentsInTimelineEnabled
-        ? defaultUdtHeaders
-        : defaultHeaders
-      : columns;
-  }, [columns, unifiedComponentsInTimelineEnabled]);
-
-  const defaultColumns = useMemo(() => {
-    return columnsHeader.map((c) => c.id);
-  }, [columnsHeader]);
+  const getTimelineQueryFields = () => {
+    const columnsHeader = isEmpty(columns) ? defaultHeaders : columns;
+    const columnFields = columnsHeader.map((c) => c.id);
 
-  const getTimelineQueryFields = useCallback(() => {
-    return [...defaultColumns, ...requiredFieldsForActions];
-  }, [defaultColumns]);
+    return [...columnFields, ...requiredFieldsForActions];
+  };
 
   const timelineQuerySortField = sort.map(({ columnId, columnType, esTypes, sortDirection }) => ({
     field: columnId,
@@ -294,14 +274,9 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     );
   }, [dispatch, filterManager, timelineId]);
 
-  const limit = useMemo(
-    () => (unifiedComponentsInTimelineEnabled ? sampleSize : itemsPerPage),
-    [itemsPerPage, unifiedComponentsInTimelineEnabled, sampleSize]
-  );
-
   const [
-    dataLoadingState,
-    { events, inspect, totalCount, refetch, loadPage, pageInfo, refreshedAt },
+    isQueryLoading,
+    { events, inspect, totalCount, pageInfo, loadPage, refreshedAt, refetch },
   ] = useTimelineEvents({
     dataViewId,
     endDate: end,
@@ -310,7 +285,7 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     id: timelineId,
     indexNames: selectedPatterns,
     language: kqlQuery.language,
-    limit,
+    limit: itemsPerPage,
     runtimeMappings,
     skip: !canQueryTimeline,
     sort: timelineQuerySortField,
@@ -318,24 +293,6 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     timerangeKind,
   });
 
-  const isQueryLoading = useMemo(() => {
-    return (
-      dataLoadingState === DataLoadingState.loading ||
-      dataLoadingState === DataLoadingState.loadingMore
-    );
-  }, [dataLoadingState]);
-
-  useEffect(() => {
-    setPageRows((currentPageRows) => {
-      if (pageInfo.activePage !== 0 && currentPageRows[pageInfo.activePage]?.length) {
-        return currentPageRows;
-      }
-      const newPageRows = pageInfo.activePage === 0 ? [] : [...currentPageRows];
-      newPageRows[pageInfo.activePage] = events;
-      return newPageRows;
-    });
-  }, [events, pageInfo.activePage]);
-
   const handleOnPanelClosed = useCallback(() => {
     onEventClosed({ tabType: TimelineTabs.query, id: timelineId });
   }, [onEventClosed, timelineId]);
@@ -344,10 +301,10 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     dispatch(
       timelineActions.updateIsLoading({
         id: timelineId,
-        isLoading: isQueryLoading || isSourcererLoading,
+        isLoading: isQueryLoading || loadingSourcerer,
       })
     );
-  }, [isSourcererLoading, timelineId, dispatch, dataLoadingState, isQueryLoading]);
+  }, [loadingSourcerer, timelineId, isQueryLoading, dispatch]);
 
   const leadingControlColumns = useMemo(
     () =>
@@ -358,23 +315,6 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     [ACTION_BUTTON_COUNT]
   );
 
-  const header = useMemo(
-    () => (
-      <StyledEuiFlyoutHeader data-test-subj={`${activeTab}-tab-flyout-header`} hasBorder={false}>
-        <TimelineHeaderContainer data-test-subj="timelineHeader">
-          <QueryTabHeader
-            filterManager={filterManager}
-            show={show && activeTab === TimelineTabs.query}
-            showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg}
-            status={status}
-            timelineId={timelineId}
-          />
-        </TimelineHeaderContainer>
-      </StyledEuiFlyoutHeader>
-    ),
-    [activeTab, filterManager, show, showCallOutUnauthorizedMsg, status, timelineId]
-  );
-
   // NOTE: The timeline is blank after browser FORWARD navigation (after using back button to navigate to
   // the previous page from the timeline), yet we still see total count. This is because the timeline
   // is not getting refreshed when using browser navigation.
@@ -383,11 +323,7 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   return (
     <>
       <InPortal node={timelineEventsCountPortalNode}>
-        {showEventsCountBadge ? (
-          <EventsCountBadge data-test-subj="query_tab_events_count_badge">
-            {totalCount}
-          </EventsCountBadge>
-        ) : null}
+        {showEventsCountBadge ? <EventsCountBadge>{totalCount}</EventsCountBadge> : null}
       </InPortal>
       <TimelineRefetch
         id={`${timelineId}-${TimelineTabs.query}`}
@@ -397,99 +333,103 @@ export const QueryTabContentComponent: React.FC<Props> = ({
         refetch={refetch}
         skip={!canQueryTimeline}
       />
-      {unifiedComponentsInTimelineEnabled ? (
-        <StyledTableFlexGroup direction="column" gutterSize="s">
-          <StyledTableFlexItem grow={false}>{header}</StyledTableFlexItem>
-          <StyledTableFlexItem>
-            <RootDragDropProvider>
-              <UnifiedTimelineComponent
-                columns={columnsHeader}
+      <FullWidthFlexGroup gutterSize="none">
+        <ScrollableFlexItem grow={2}>
+          <StyledEuiFlyoutHeader
+            data-test-subj={`${activeTab}-tab-flyout-header`}
+            hasBorder={false}
+          >
+            <EuiFlexGroup gutterSize="s" direction="column">
+              {timelineFullScreen && setTimelineFullScreen != null && (
+                <EuiFlexItem>
+                  <EuiFlexGroup alignItems="center" gutterSize="s">
+                    <ExitFullScreen
+                      fullScreen={timelineFullScreen}
+                      setFullScreen={setTimelineFullScreen}
+                    />
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+              )}
+              <EuiFlexItem data-test-subj="timeline-date-picker-container">
+                <QueryTabHeaderContainer data-test-subj="timelineHeader">
+                  <QueryTabHeader
+                    filterManager={filterManager}
+                    show={show && activeTab === TimelineTabs.query}
+                    showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg}
+                    status={status}
+                    timelineId={timelineId}
+                  />
+                </QueryTabHeaderContainer>
+              </EuiFlexItem>
+              {/* TODO: This is a temporary solution to hide the KPIs until lens components play nicely with timelines */}
+              {/* https://github.com/elastic/kibana/issues/17156 */}
+              {/* <EuiFlexItem grow={false}> */}
+              {/*   <TimelineKpi timelineId={timelineId} /> */}
+              {/* </EuiFlexItem> */}
+            </EuiFlexGroup>
+          </StyledEuiFlyoutHeader>
+          <EventDetailsWidthProvider>
+            <StyledEuiFlyoutBody
+              data-test-subj={`${TimelineTabs.query}-tab-flyout-body`}
+              className="timeline-flyout-body"
+            >
+              <StatefulBody
+                activePage={pageInfo.activePage}
+                browserFields={browserFields}
+                data={isBlankTimeline ? EMPTY_EVENTS : events}
+                id={timelineId}
+                refetch={refetch}
+                renderCellValue={renderCellValue}
                 rowRenderers={rowRenderers}
-                timelineId={timelineId}
-                itemsPerPage={itemsPerPage}
-                itemsPerPageOptions={itemsPerPageOptions}
                 sort={sort}
-                events={rows}
-                refetch={refetch}
-                dataLoadingState={dataLoadingState}
-                totalCount={isBlankTimeline ? 0 : totalCount}
-                onEventClosed={onEventClosed}
-                expandedDetail={expandedDetail}
-                showExpandedDetails={showExpandedDetails}
-                onChangePage={loadPage}
-                activeTab={activeTab}
-                updatedAt={refreshedAt}
-                isTextBasedQuery={false}
+                tabType={TimelineTabs.query}
+                totalPages={calculateTotalPages({
+                  itemsCount: totalCount,
+                  itemsPerPage,
+                })}
+                leadingControlColumns={leadingControlColumns}
+                trailingControlColumns={trailingControlColumns}
               />
-            </RootDragDropProvider>
-          </StyledTableFlexItem>
-        </StyledTableFlexGroup>
-      ) : (
-        <FullWidthFlexGroup direction="column" gutterSize="s">
-          <ScrollableFlexItem grow={2}>
-            {header}
-            <EventDetailsWidthProvider>
-              <StyledEuiFlyoutBody
-                data-test-subj={`${TimelineTabs.query}-tab-flyout-body`}
-                className="timeline-flyout-body"
-              >
-                <StatefulBody
-                  activePage={pageInfo.activePage}
-                  browserFields={browserFields}
-                  data={isBlankTimeline ? EMPTY_EVENTS : events}
+            </StyledEuiFlyoutBody>
+
+            <StyledEuiFlyoutFooter
+              data-test-subj={`${TimelineTabs.query}-tab-flyout-footer`}
+              className="timeline-flyout-footer"
+            >
+              {!isBlankTimeline && (
+                <Footer
+                  activePage={pageInfo?.activePage ?? 0}
+                  data-test-subj="timeline-footer"
+                  updatedAt={refreshedAt}
+                  height={footerHeight}
                   id={timelineId}
-                  refetch={refetch}
-                  renderCellValue={renderCellValue}
-                  rowRenderers={rowRenderers}
-                  sort={sort}
-                  tabType={TimelineTabs.query}
-                  totalPages={calculateTotalPages({
-                    itemsCount: totalCount,
-                    itemsPerPage,
-                  })}
-                  leadingControlColumns={leadingControlColumns}
-                  trailingControlColumns={trailingControlColumns}
+                  isLive={isLive}
+                  isLoading={isQueryLoading || loadingSourcerer}
+                  itemsCount={isBlankTimeline ? 0 : events.length}
+                  itemsPerPage={itemsPerPage}
+                  itemsPerPageOptions={itemsPerPageOptions}
+                  onChangePage={loadPage}
+                  totalCount={isBlankTimeline ? 0 : totalCount}
                 />
-              </StyledEuiFlyoutBody>
-              <StyledEuiFlyoutFooter
-                data-test-subj={`${TimelineTabs.query}-tab-flyout-footer`}
-                className="timeline-flyout-footer"
-              >
-                {!isBlankTimeline && (
-                  <Footer
-                    activePage={pageInfo?.activePage ?? 0}
-                    data-test-subj="timeline-footer"
-                    updatedAt={refreshedAt}
-                    height={footerHeight}
-                    id={timelineId}
-                    isLive={isLive}
-                    isLoading={isQueryLoading || isSourcererLoading}
-                    itemsCount={isBlankTimeline ? 0 : events.length}
-                    itemsPerPage={itemsPerPage}
-                    itemsPerPageOptions={itemsPerPageOptions}
-                    onChangePage={loadPage}
-                    totalCount={isBlankTimeline ? 0 : totalCount}
-                  />
-                )}
-              </StyledEuiFlyoutFooter>
-            </EventDetailsWidthProvider>
-          </ScrollableFlexItem>
-          {showExpandedDetails && (
-            <>
-              <VerticalRule />
-              <ScrollableFlexItem grow={1}>
-                <DetailsPanel
-                  browserFields={browserFields}
-                  handleOnPanelClosed={handleOnPanelClosed}
-                  runtimeMappings={runtimeMappings}
-                  tabType={TimelineTabs.query}
-                  scopeId={timelineId}
-                />
-              </ScrollableFlexItem>
-            </>
-          )}
-        </FullWidthFlexGroup>
-      )}
+              )}
+            </StyledEuiFlyoutFooter>
+          </EventDetailsWidthProvider>
+        </ScrollableFlexItem>
+        {showExpandedDetails && (
+          <>
+            <VerticalRule />
+            <ScrollableFlexItem grow={1}>
+              <DetailsPanel
+                browserFields={browserFields}
+                handleOnPanelClosed={handleOnPanelClosed}
+                runtimeMappings={runtimeMappings}
+                tabType={TimelineTabs.query}
+                scopeId={timelineId}
+              />
+            </ScrollableFlexItem>
+          </>
+        )}
+      </FullWidthFlexGroup>
     </>
   );
 };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx
index 1d2527ae641afd..c1816c047e985f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx
@@ -6,11 +6,8 @@
  */
 
 import {
-  EuiFlexGroup,
   EuiFlexItem,
   EuiFlyoutHeader,
-  EuiFlyoutBody,
-  EuiFlyoutFooter,
   EuiBadge,
 } from '@elastic/eui';
 import { isEmpty } from 'lodash/fp';
@@ -21,13 +18,10 @@ import type { ConnectedProps } from 'react-redux';
 import { connect, useDispatch } from 'react-redux';
 import deepEqual from 'fast-deep-equal';
 import { InPortal } from 'react-reverse-portal';
-
 import { FilterManager } from '@kbn/data-plugin/public';
 import { getEsQueryConfig } from '@kbn/data-plugin/common';
 import { DataLoadingState } from '@kbn/unified-data-table';
 import { RootDragDropProvider } from '@kbn/dom-drag-drop';
-import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
-import type { ControlColumnProps } from '../../../../../common/types';
 import { InputsModelId } from '../../../../common/store/inputs/constants';
 import { useInvalidFilterQuery } from '../../../../common/hooks/use_invalid_filter_query';
 import { timelineActions, timelineSelectors } from '../../../store';
@@ -35,11 +29,7 @@ import type { CellValueElementProps } from '../cell_rendering';
 import type { Direction, TimelineItem } from '../../../../../common/search_strategy';
 import { useTimelineEvents } from '../../../containers';
 import { useKibana } from '../../../../common/lib/kibana';
-import { defaultHeaders } from '../body/column_headers/default_headers';
-import { StatefulBody } from '../body';
-import { Footer, footerHeight } from '../footer';
 import { QueryTabHeader } from './header';
-import { calculateTotalPages } from '../helpers';
 import { combineQueries } from '../../../../common/lib/kuery';
 import { TimelineRefetch } from '../refetch_timeline';
 import type {
@@ -49,7 +39,6 @@ import type {
 } from '../../../../../common/types/timeline';
 import { TimelineId, TimelineTabs } from '../../../../../common/types/timeline';
 import { requiredFieldsForActions } from '../../../../detections/components/alerts_table/default_config';
-import { EventDetailsWidthProvider } from '../../../../common/components/events_viewer/event_details_width_context';
 import type { inputsModel, State } from '../../../../common/store';
 import { inputsSelectors } from '../../../../common/store';
 import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
@@ -57,15 +46,11 @@ import { timelineDefaults } from '../../../store/defaults';
 import { useSourcererDataView } from '../../../../common/containers/sourcerer';
 import { useTimelineEventsCountPortal } from '../../../../common/hooks/use_timeline_events_count';
 import type { TimelineModel } from '../../../store/model';
-import { DetailsPanel } from '../../side_panel';
-import { getDefaultControlColumn } from '../body/control_columns';
 import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
 import { useLicense } from '../../../../common/hooks/use_license';
-import { HeaderActions } from '../../../../common/components/header_actions/header_actions';
 import { UnifiedTimelineComponent } from '../unified_components';
 import { defaultUdtHeaders } from '../unified_components/default_headers';
 import { StyledTableFlexGroup, StyledTableFlexItem } from '../unified_components/styles';
-import { activeTimeline } from '../../../containers/active_timeline_context';
 
 const TimelineHeaderContainer = styled.div`
   margin-top: 6px;
@@ -84,39 +69,9 @@ const StyledEuiFlyoutHeader = styled(EuiFlyoutHeader)`
   flex-direction: column;
 `;
 
-const StyledEuiFlyoutBody = styled(EuiFlyoutBody)`
-  overflow-y: hidden;
-  flex: 1;
-
-  .euiFlyoutBody__overflow {
-    overflow: hidden;
-    mask-image: none;
-  }
-
-  .euiFlyoutBody__overflowContent {
-    padding: 0;
-    height: 100%;
-    display: flex;
-  }
-`;
 
-const StyledEuiFlyoutFooter = styled(EuiFlyoutFooter)`
-  background: none;
-  &.euiFlyoutFooter {
-    ${({ theme }) => `padding: ${theme.eui.euiSizeS} 0;`}
-  }
-`;
 
-const FullWidthFlexGroup = styled(EuiFlexGroup)`
-  margin: 0;
-  width: 100%;
-  overflow: hidden;
-`;
 
-const ScrollableFlexItem = styled(EuiFlexItem)`
-  ${({ theme }) => `margin: 0 ${theme.eui.euiSizeM};`}
-  overflow: hidden;
-`;
 
 const SourcererFlex = styled(EuiFlexItem)`
   align-items: flex-end;
@@ -152,13 +107,11 @@ interface OwnProps {
   timelineId: string;
 }
 
-const EMPTY_EVENTS: TimelineItem[] = [];
 
 export type Props = OwnProps & PropsFromRedux;
 
-const trailingControlColumns: ControlColumnProps[] = []; // stable reference
 
-export const QueryTabContentComponent: React.FC<Props> = ({
+export const NewQueryTabContentComponent: React.FC<Props> = ({
   activeTab,
   columns,
   dataProviders,
@@ -166,14 +119,12 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   expandedDetail,
   filters,
   timelineId,
-  isLive,
   itemsPerPage,
   itemsPerPageOptions,
   kqlMode,
   kqlQueryExpression,
   kqlQueryLanguage,
   onEventClosed,
-  renderCellValue,
   rowRenderers,
   show,
   showCallOutUnauthorizedMsg,
@@ -184,10 +135,6 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   timerangeKind,
 }) => {
   const dispatch = useDispatch();
-  const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
-    'unifiedComponentsInTimelineEnabled'
-  );
-
   const [pageRows, setPageRows] = useState<TimelineItem[][]>([]);
   const rows = useMemo(() => pageRows.flat(), [pageRows]);
   const { portalNode: timelineEventsCountPortalNode } = useTimelineEventsCountPortal();
@@ -263,12 +210,8 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   );
 
   const columnsHeader = useMemo(() => {
-    return isEmpty(columns)
-      ? unifiedComponentsInTimelineEnabled
-        ? defaultUdtHeaders
-        : defaultHeaders
-      : columns;
-  }, [columns, unifiedComponentsInTimelineEnabled]);
+    return isEmpty(columns) ? defaultUdtHeaders : columns;
+  }, [columns]);
 
   const defaultColumns = useMemo(() => {
     return columnsHeader.map((c) => c.id);
@@ -294,11 +237,6 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     );
   }, [dispatch, filterManager, timelineId]);
 
-  const limit = useMemo(
-    () => (unifiedComponentsInTimelineEnabled ? sampleSize : itemsPerPage),
-    [itemsPerPage, unifiedComponentsInTimelineEnabled, sampleSize]
-  );
-
   const [
     dataLoadingState,
     { events, inspect, totalCount, refetch, loadPage, pageInfo, refreshedAt },
@@ -310,7 +248,7 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     id: timelineId,
     indexNames: selectedPatterns,
     language: kqlQuery.language,
-    limit,
+    limit: sampleSize,
     runtimeMappings,
     skip: !canQueryTimeline,
     sort: timelineQuerySortField,
@@ -336,17 +274,6 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     });
   }, [events, pageInfo.activePage]);
 
-  const handleOnPanelClosed = useCallback(() => {
-    onEventClosed({ tabType: TimelineTabs.query, id: timelineId });
-
-    if (
-      expandedDetail[TimelineTabs.query]?.panelView &&
-      timelineId === TimelineId.active &&
-      showExpandedDetails
-    ) {
-      activeTimeline.toggleExpandedDetail({});
-    }
-  }, [onEventClosed, timelineId, expandedDetail, showExpandedDetails]);
 
   useEffect(() => {
     dispatch(
@@ -357,14 +284,6 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     );
   }, [isSourcererLoading, timelineId, dispatch, dataLoadingState, isQueryLoading]);
 
-  const leadingControlColumns = useMemo(
-    () =>
-      getDefaultControlColumn(ACTION_BUTTON_COUNT).map((x) => ({
-        ...x,
-        headerCellRender: HeaderActions,
-      })),
-    [ACTION_BUTTON_COUNT]
-  );
 
   const header = useMemo(
     () => (
@@ -405,99 +324,32 @@ export const QueryTabContentComponent: React.FC<Props> = ({
         refetch={refetch}
         skip={!canQueryTimeline}
       />
-      {unifiedComponentsInTimelineEnabled ? (
-        <StyledTableFlexGroup direction="column" gutterSize="s">
-          <StyledTableFlexItem grow={false}>{header}</StyledTableFlexItem>
-          <StyledTableFlexItem>
-            <RootDragDropProvider>
-              <UnifiedTimelineComponent
-                columns={columnsHeader}
-                rowRenderers={rowRenderers}
-                timelineId={timelineId}
-                itemsPerPage={itemsPerPage}
-                itemsPerPageOptions={itemsPerPageOptions}
-                sort={sort}
-                events={rows}
-                refetch={refetch}
-                dataLoadingState={dataLoadingState}
-                totalCount={isBlankTimeline ? 0 : totalCount}
-                onEventClosed={onEventClosed}
-                expandedDetail={expandedDetail}
-                showExpandedDetails={showExpandedDetails}
-                onChangePage={loadPage}
-                activeTab={activeTab}
-                updatedAt={refreshedAt}
-                isTextBasedQuery={false}
-              />
-            </RootDragDropProvider>
-          </StyledTableFlexItem>
-        </StyledTableFlexGroup>
-      ) : (
-        <FullWidthFlexGroup direction="column" gutterSize="s">
-          <ScrollableFlexItem grow={2}>
-            {header}
-            <EventDetailsWidthProvider>
-              <StyledEuiFlyoutBody
-                data-test-subj={`${TimelineTabs.query}-tab-flyout-body`}
-                className="timeline-flyout-body"
-              >
-                <StatefulBody
-                  activePage={pageInfo.activePage}
-                  browserFields={browserFields}
-                  data={isBlankTimeline ? EMPTY_EVENTS : events}
-                  id={timelineId}
-                  refetch={refetch}
-                  renderCellValue={renderCellValue}
-                  rowRenderers={rowRenderers}
-                  sort={sort}
-                  tabType={TimelineTabs.query}
-                  totalPages={calculateTotalPages({
-                    itemsCount: totalCount,
-                    itemsPerPage,
-                  })}
-                  leadingControlColumns={leadingControlColumns}
-                  trailingControlColumns={trailingControlColumns}
-                />
-              </StyledEuiFlyoutBody>
-              <StyledEuiFlyoutFooter
-                data-test-subj={`${TimelineTabs.query}-tab-flyout-footer`}
-                className="timeline-flyout-footer"
-              >
-                {!isBlankTimeline && (
-                  <Footer
-                    activePage={pageInfo?.activePage ?? 0}
-                    data-test-subj="timeline-footer"
-                    updatedAt={refreshedAt}
-                    height={footerHeight}
-                    id={timelineId}
-                    isLive={isLive}
-                    isLoading={isQueryLoading || isSourcererLoading}
-                    itemsCount={isBlankTimeline ? 0 : events.length}
-                    itemsPerPage={itemsPerPage}
-                    itemsPerPageOptions={itemsPerPageOptions}
-                    onChangePage={loadPage}
-                    totalCount={isBlankTimeline ? 0 : totalCount}
-                  />
-                )}
-              </StyledEuiFlyoutFooter>
-            </EventDetailsWidthProvider>
-          </ScrollableFlexItem>
-          {showExpandedDetails && (
-            <>
-              <VerticalRule />
-              <ScrollableFlexItem grow={1}>
-                <DetailsPanel
-                  browserFields={browserFields}
-                  handleOnPanelClosed={handleOnPanelClosed}
-                  runtimeMappings={runtimeMappings}
-                  tabType={TimelineTabs.query}
-                  scopeId={timelineId}
-                />
-              </ScrollableFlexItem>
-            </>
-          )}
-        </FullWidthFlexGroup>
-      )}
+      <StyledTableFlexGroup direction="column" gutterSize="s">
+        <StyledTableFlexItem grow={false}>{header}</StyledTableFlexItem>
+        <StyledTableFlexItem>
+          <RootDragDropProvider>
+            <UnifiedTimelineComponent
+              columns={columnsHeader}
+              rowRenderers={rowRenderers}
+              timelineId={timelineId}
+              itemsPerPage={itemsPerPage}
+              itemsPerPageOptions={itemsPerPageOptions}
+              sort={sort}
+              events={rows}
+              refetch={refetch}
+              dataLoadingState={dataLoadingState}
+              totalCount={isBlankTimeline ? 0 : totalCount}
+              onEventClosed={onEventClosed}
+              expandedDetail={expandedDetail}
+              showExpandedDetails={showExpandedDetails}
+              onChangePage={loadPage}
+              activeTab={activeTab}
+              updatedAt={refreshedAt}
+              isTextBasedQuery={false}
+            />
+          </RootDragDropProvider>
+        </StyledTableFlexItem>
+      </StyledTableFlexGroup>
     </>
   );
 };
@@ -567,7 +419,7 @@ const makeMapStateToProps = () => {
   return mapStateToProps;
 };
 
-const mapDispatchToProps = (dispatch: Dispatch, { timelineId }: OwnProps) => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
   onEventClosed: (args: ToggleDetailPanel) => {
     dispatch(timelineActions.toggleDetailPanel(args));
   },
@@ -577,9 +429,9 @@ const connector = connect(makeMapStateToProps, mapDispatchToProps);
 
 type PropsFromRedux = ConnectedProps<typeof connector>;
 
-const QueryTabContent = connector(
+const NewQueryTabContent = connector(
   React.memo(
-    QueryTabContentComponent,
+    NewQueryTabContentComponent,
     (prevProps, nextProps) =>
       compareQueryProps(prevProps, nextProps) &&
       prevProps.activeTab === nextProps.activeTab &&
@@ -600,4 +452,4 @@ const QueryTabContent = connector(
 );
 
 // eslint-disable-next-line import/no-default-export
-export { QueryTabContent as default };
\ No newline at end of file
+export { NewQueryTabContent as default };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
index b5c94ce97f670c..245435827c0496 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
@@ -84,6 +84,7 @@ const AssistantTabContainer = styled.div`
 `;
 
 const QueryTab = tabWithSuspense(lazy(() => import('../query_tab_content')));
+const NewQueryTab = tabWithSuspense(lazy(() => import('../query_tab_content_new')));
 const EqlTab = tabWithSuspense(lazy(() => import('../eql_tab_content')));
 const GraphTab = tabWithSuspense(lazy(() => import('../graph_tab_content')));
 const NotesTab = tabWithSuspense(lazy(() => import('../notes_tab_content')));
@@ -136,6 +137,9 @@ const ActiveTimelineTab = memo<ActiveTimelineTabProps>(
     showTimeline,
   }) => {
     const { hasAssistantPrivilege } = useAssistantAvailability();
+    const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
+      'unifiedComponentsInTimelineEnabled'
+    );  
     const isEsqlSettingEnabled = useKibana().services.configSettings.ESQLEnabled;
     const getTab = useCallback(
       (tab: TimelineTabs) => {
@@ -183,6 +187,18 @@ const ActiveTimelineTab = memo<ActiveTimelineTabProps>(
             timelineId={timelineId}
           />
         </HideShowContainer>
+        {unifiedComponentsInTimelineEnabled && (
+          <HideShowContainer
+            $isVisible={TimelineTabs.queryNew === activeTimelineTab}
+            data-test-subj={`timeline-tab-content-${TimelineTabs.queryNew}`}
+          >
+            <NewQueryTab
+              renderCellValue={renderCellValue}
+              rowRenderers={rowRenderers}
+              timelineId={timelineId}
+            />
+          </HideShowContainer>
+        )}
         {showTimeline && isEsqlSettingEnabled && activeTimelineTab === TimelineTabs.esql && (
           <HideShowContainer
             $isVisible={true}
@@ -291,6 +307,9 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
   sessionViewConfig,
   timelineDescription,
 }) => {
+  const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
+    'unifiedComponentsInTimelineEnabled'
+  );  
   const isEsqlTabInTimelineDisabled = useIsExperimentalFeatureEnabled('timelineEsqlTabDisabled');
   const isEsqlSettingEnabled = useKibana().services.configSettings.ESQLEnabled;
   const { hasAssistantPrivilege } = useAssistantAvailability();
@@ -347,6 +366,11 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
     setActiveTab(TimelineTabs.query);
   }, [setActiveTab]);
 
+  const setQueryNewAsActiveTab = useCallback(() => {
+    setActiveTab(TimelineTabs.queryNew);
+  }, [setActiveTab]);
+
+
   const setEqlAsActiveTab = useCallback(() => {
     setActiveTab(TimelineTabs.eql);
   }, [setActiveTab]);
@@ -406,6 +430,18 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
             <span>{i18n.QUERY_TAB}</span>
             {showTimeline && <TimelineEventsCountBadge />}
           </StyledEuiTab>
+          {unifiedComponentsInTimelineEnabled && (
+            <StyledEuiTab
+              data-test-subj={`timelineTabs-${TimelineTabs.queryNew}`}
+              onClick={setQueryNewAsActiveTab}
+              isSelected={activeTab === TimelineTabs.queryNew}
+              disabled={false}
+              key={TimelineTabs.queryNew}
+            >
+              {/* TODO: USE PROPER I18N here */}
+              <span>{`${i18n.QUERY_TAB}-NEW`}</span>
+            </StyledEuiTab>
+          )}
           {!isEsqlTabInTimelineDisabled && isEsqlSettingEnabled && (
             <StyledEuiTab
               data-test-subj={`timelineTabs-${TimelineTabs.esql}`}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/get_fields_list_creation_options.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/get_fields_list_creation_options.ts
new file mode 100644
index 00000000000000..3fc8f888c2d56f
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/get_fields_list_creation_options.ts
@@ -0,0 +1,43 @@
+import { i18n } from "@kbn/i18n";
+import  { FieldsGroupNames } from "@kbn/unified-field-list";
+import type { UnifiedFieldListSidebarContainerProps } from "@kbn/unified-field-list";
+
+// This is passed to the unified components container to initialize the field list on the left side of the view
+export const getFieldsListCreationOptions: UnifiedFieldListSidebarContainerProps['getCreationOptions'] = () => {
+    return {
+      originatingApp: 'security_solution',
+      localStorageKeyPrefix: 'securitySolution',
+      timeRangeUpdatesType: 'timefilter',
+      compressed: true,
+      showSidebarToggleButton: true,
+      disablePopularFields: false,
+      buttonAddFieldToWorkspaceProps: {
+        'aria-label': i18n.translate('timeline.fieldChooser.timelineField.addFieldTooltip', {
+          defaultMessage: 'Add field as column',
+        }),
+      },
+      buttonRemoveFieldFromWorkspaceProps: {
+        'aria-label': i18n.translate('timeline.fieldChooser.timelineField.removeFieldTooltip', {
+          defaultMessage: 'Remove field from table',
+        }),
+      },
+      onOverrideFieldGroupDetails: (groupName) => {
+        if (groupName === FieldsGroupNames.AvailableFields) {
+          return {
+            helpText: i18n.translate('timeline.fieldChooser.availableFieldsTooltip', {
+              defaultMessage: 'Fields available for display in the table.',
+            }),
+          };
+        }
+      },
+      dataTestSubj: {
+        fieldListAddFieldButtonTestSubj: 'dataView-add-field_btn',
+        fieldListSidebarDataTestSubj: 'timeline-sidebar',
+        fieldListItemStatsDataTestSubj: 'dscFieldStats',
+        fieldListItemDndDataTestSubjPrefix: 'dscFieldListPanelField',
+        fieldListItemPopoverDataTestSubj: 'timelineFieldListPanelPopover',
+        fieldListItemPopoverHeaderDataTestSubjPrefix: 'timelineFieldListPanel',
+      },
+    };
+  };
+  
\ No newline at end of file
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
index 885fbff8702c16..706ceaa5b9eb73 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
@@ -22,8 +22,7 @@ import type {
   UnifiedFieldListSidebarContainerApi,
   UnifiedFieldListSidebarContainerProps,
 } from '@kbn/unified-field-list';
-import { FieldsGroupNames, UnifiedFieldListSidebarContainer } from '@kbn/unified-field-list';
-import { i18n } from '@kbn/i18n';
+import { UnifiedFieldListSidebarContainer } from '@kbn/unified-field-list';
 import type { CoreStart } from '@kbn/core/public';
 import type { EuiTheme } from '@kbn/react-kibana-context-styled';
 import { EventDetailsWidthProvider } from '../../../../common/components/events_viewer/event_details_width_context';
@@ -50,6 +49,7 @@ import { TimelineResizableLayout } from './resizable_layout';
 import TimelineDataTable from './data_table';
 import { timelineDefaults } from '../../../store/defaults';
 import { timelineActions } from '../../../store';
+import { getFieldsListCreationOptions } from './get_fields_list_creation_options';
 
 const TimelineBodyContainer = styled.div.attrs(({ className = '' }) => ({
   className: `${className}`,
@@ -71,44 +71,6 @@ const DROP_PROPS = {
   types: ['field_add'] as DropType[],
 };
 
-const getCreationOptions: UnifiedFieldListSidebarContainerProps['getCreationOptions'] = () => {
-  return {
-    originatingApp: 'security_solution',
-    localStorageKeyPrefix: 'securitySolution',
-    timeRangeUpdatesType: 'timefilter',
-    compressed: true,
-    showSidebarToggleButton: true,
-    disablePopularFields: false,
-    buttonAddFieldToWorkspaceProps: {
-      'aria-label': i18n.translate('discover.fieldChooser.discoverField.addFieldTooltip', {
-        defaultMessage: 'Add field as column',
-      }),
-    },
-    buttonRemoveFieldFromWorkspaceProps: {
-      'aria-label': i18n.translate('discover.fieldChooser.discoverField.removeFieldTooltip', {
-        defaultMessage: 'Remove field from table',
-      }),
-    },
-    onOverrideFieldGroupDetails: (groupName) => {
-      if (groupName === FieldsGroupNames.AvailableFields) {
-        return {
-          helpText: i18n.translate('discover.fieldChooser.availableFieldsTooltip', {
-            defaultMessage: 'Fields available for display in the table.',
-          }),
-        };
-      }
-    },
-    dataTestSubj: {
-      fieldListAddFieldButtonTestSubj: 'dataView-add-field_btn',
-      fieldListSidebarDataTestSubj: 'discover-sidebar',
-      fieldListItemStatsDataTestSubj: 'dscFieldStats',
-      fieldListItemDndDataTestSubjPrefix: 'dscFieldListPanelField',
-      fieldListItemPopoverDataTestSubj: 'discoverFieldListPanelPopover',
-      fieldListItemPopoverHeaderDataTestSubjPrefix: 'discoverFieldListPanel',
-    },
-  };
-};
-
 const SidebarPanelFlexGroup = styled(EuiFlexGroup)`
   height: 100%;
 
@@ -129,6 +91,7 @@ const SidebarPanelFlexGroup = styled(EuiFlexGroup)`
 `;
 
 export const SAMPLE_SIZE_SETTING = 500;
+export const HIDE_FOR_SIZES = ['xs', 's'];
 
 interface Props {
   columns: ColumnHeaderOptions[];
@@ -354,88 +317,6 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
     onFieldEdited();
   }, [onFieldEdited]);
 
-  const sidebarPanel = useMemo(
-    () => (
-      <SidebarPanelFlexGroup gutterSize="none">
-        <EuiFlexItem>
-          {dataView ? (
-            <UnifiedFieldListSidebarContainer
-              ref={unifiedFieldListContainerRef}
-              showFieldList={true}
-              variant="responsive"
-              getCreationOptions={getCreationOptions}
-              services={fieldListSidebarServices}
-              dataView={dataView}
-              fullWidth
-              allFields={dataView.fields}
-              workspaceSelectedFieldNames={defaultColumns}
-              onAddFieldToWorkspace={onAddFieldToWorkspace}
-              onRemoveFieldFromWorkspace={onRemoveFieldFromWorkspace}
-              onAddFilter={onAddFilter}
-              onFieldEdited={wrappedOnFieldEdited}
-            />
-          ) : null}
-        </EuiFlexItem>
-        <EuiHideFor sizes={['xs', 's']}>
-          <StyledSplitFlexItem grow={false} className="thinBorderSplit" />
-        </EuiHideFor>
-      </SidebarPanelFlexGroup>
-    ),
-    [
-      dataView,
-      defaultColumns,
-      fieldListSidebarServices,
-      onAddFieldToWorkspace,
-      onAddFilter,
-      onRemoveFieldFromWorkspace,
-      wrappedOnFieldEdited,
-    ]
-  );
-
-  const table = useMemo(() => {
-    return (
-      <DataGridMemoized
-        columns={columns}
-        rowRenderers={rowRenderers}
-        timelineId={timelineId}
-        itemsPerPage={itemsPerPage}
-        itemsPerPageOptions={itemsPerPageOptions}
-        sort={sort}
-        events={events}
-        refetch={refetch}
-        onFieldEdited={onFieldEdited}
-        dataLoadingState={dataLoadingState}
-        totalCount={totalCount}
-        onEventClosed={onEventClosed}
-        expandedDetail={expandedDetail}
-        showExpandedDetails={showExpandedDetails}
-        onChangePage={onChangePage}
-        activeTab={activeTab}
-        updatedAt={updatedAt}
-        isTextBasedQuery={isTextBasedQuery}
-      />
-    );
-  }, [
-    activeTab,
-    columns,
-    dataLoadingState,
-    events,
-    expandedDetail,
-    isTextBasedQuery,
-    itemsPerPage,
-    itemsPerPageOptions,
-    onChangePage,
-    onEventClosed,
-    refetch,
-    onFieldEdited,
-    rowRenderers,
-    showExpandedDetails,
-    sort,
-    timelineId,
-    totalCount,
-    updatedAt,
-  ]);
-
   if (!dataView) {
     return null;
   }
@@ -445,7 +326,32 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
       <TimelineResizableLayout
         container={sidebarContainer}
         unifiedFieldListSidebarContainerApi={unifiedFieldListContainerRef.current}
-        sidebarPanel={sidebarPanel}
+        sidebarPanel={
+          <SidebarPanelFlexGroup gutterSize="none">
+            <EuiFlexItem>
+              {dataView ? (
+                <UnifiedFieldListSidebarContainer
+                  ref={unifiedFieldListContainerRef}
+                  showFieldList
+                  variant="responsive"
+                  getCreationOptions={getFieldsListCreationOptions}
+                  services={fieldListSidebarServices}
+                  dataView={dataView}
+                  fullWidth
+                  allFields={dataView.fields}
+                  workspaceSelectedFieldNames={defaultColumns}
+                  onAddFieldToWorkspace={onAddFieldToWorkspace}
+                  onRemoveFieldFromWorkspace={onRemoveFieldFromWorkspace}
+                  onAddFilter={onAddFilter}
+                  onFieldEdited={wrappedOnFieldEdited}
+                />
+              ) : null}
+            </EuiFlexItem>
+            <EuiHideFor sizes={HIDE_FOR_SIZES}>
+              <StyledSplitFlexItem grow={false} className="thinBorderSplit" />
+            </EuiHideFor>
+          </SidebarPanelFlexGroup>
+        }
         mainPanel={
           <StyledPageContentWrapper>
             <StyledMainEuiPanel
@@ -465,7 +371,28 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
                 onDrop={onDropFieldToTable}
               >
                 <DropOverlayWrapper isVisible={isDropAllowed}>
-                  <EventDetailsWidthProvider>{table}</EventDetailsWidthProvider>
+                  <EventDetailsWidthProvider>
+                    <DataGridMemoized
+                      columns={columns}
+                      rowRenderers={rowRenderers}
+                      timelineId={timelineId}
+                      itemsPerPage={itemsPerPage}
+                      itemsPerPageOptions={itemsPerPageOptions}
+                      sort={sort}
+                      events={events}
+                      refetch={refetch}
+                      onFieldEdited={onFieldEdited}
+                      dataLoadingState={dataLoadingState}
+                      totalCount={totalCount}
+                      onEventClosed={onEventClosed}
+                      expandedDetail={expandedDetail}
+                      showExpandedDetails={showExpandedDetails}
+                      onChangePage={onChangePage}
+                      activeTab={activeTab}
+                      updatedAt={updatedAt}
+                      isTextBasedQuery={isTextBasedQuery}
+                    />
+                  </EventDetailsWidthProvider>
                 </DropOverlayWrapper>
               </DragDrop>
             </StyledMainEuiPanel>
@@ -478,4 +405,4 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
 
 export const UnifiedTimeline = React.memo(UnifiedTimelineComponent);
 // eslint-disable-next-line import/no-default-export
-export { UnifiedTimeline as default };
\ No newline at end of file
+export { UnifiedTimeline as default };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx
index 8790bc1a24581c..eb90a17b30e76f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx
@@ -21,6 +21,9 @@ import { of } from 'rxjs';
 
 export const SIDEBAR_WIDTH_KEY = 'timeline:sidebarWidth';
 
+// TODO: This is almost a duplicate of the logic here: src/plugins/discover/public/application/main/components/layout/discover_resizable_layout.tsx
+// Should this layout be a shared package or just an accepted dupe since the <ResizeableLayout /> is already shared?
+
 export const TimelineResizableLayoutComponent = ({
   container,
   sidebarPanel,
@@ -49,7 +52,7 @@ export const TimelineResizableLayoutComponent = ({
   const isMobile = useIsWithinBreakpoints(['xs', 's']);
 
   const isSidebarCollapsed = useObservable(
-    unifiedFieldListSidebarContainerApi?.isSidebarCollapsed$ ?? of(true),
+    unifiedFieldListSidebarContainerApi?.sidebarVisibility.isCollapsed$ ?? of(true),
     true
   );
   const layoutMode =
@@ -63,7 +66,7 @@ export const TimelineResizableLayoutComponent = ({
       <InPortal node={sidebarPanelNode}>{sidebarPanel}</InPortal>
       <InPortal node={mainPanelNode}>{mainPanel}</InPortal>
       <ResizableLayout
-        className="dscPageBody__contents"
+        className="timelineUnifiedComponentsBody__contents"
         mode={layoutMode}
         direction={layoutDirection}
         container={container}
@@ -72,8 +75,8 @@ export const TimelineResizableLayoutComponent = ({
         minFlexPanelSize={minMainPanelWidth}
         fixedPanel={<OutPortal node={sidebarPanelNode} />}
         flexPanel={<OutPortal node={mainPanelNode} />}
-        resizeButtonClassName="dscSidebarResizeButton"
-        data-test-subj="discoverLayout"
+        resizeButtonClassName="timelineSidebarResizeButton"
+        data-test-subj="timelineUnifiedComponentsLayout"
         onFixedPanelSizeChange={setSidebarWidth}
       />
     </>
diff --git a/x-pack/plugins/security_solution/public/types.ts b/x-pack/plugins/security_solution/public/types.ts
index bcfeba0b6d9856..f2e6f280ad1900 100644
--- a/x-pack/plugins/security_solution/public/types.ts
+++ b/x-pack/plugins/security_solution/public/types.ts
@@ -56,6 +56,7 @@ import type { DiscoverStart } from '@kbn/discover-plugin/public';
 import type { NavigationPublicPluginStart } from '@kbn/navigation-plugin/public';
 import type { DataViewEditorStart } from '@kbn/data-view-editor-plugin/public';
 import type { UpsellingService } from '@kbn/security-solution-upselling/service';
+import type { ChartsPluginStart } from '@kbn/charts-plugin/public';
 import type { SavedSearchPublicPluginStart } from '@kbn/saved-search-plugin/public';
 import type { ResolverPluginSetup } from './resolver/types';
 import type { Inspect } from '../common/search_strategy';
@@ -138,7 +139,9 @@ export interface StartPlugins {
   navigation: NavigationPublicPluginStart;
   expressions: ExpressionsStart;
   dataViewEditor: DataViewEditorStart;
+  charts: ChartsPluginStart;
   savedSearch: SavedSearchPublicPluginStart;
+  core: CoreStart;
 }
 
 export interface StartPluginsDependencies extends StartPlugins {
diff --git a/x-pack/plugins/security_solution/tsconfig.json b/x-pack/plugins/security_solution/tsconfig.json
index 9a5366d13ad563..4d0cb21a68be11 100644
--- a/x-pack/plugins/security_solution/tsconfig.json
+++ b/x-pack/plugins/security_solution/tsconfig.json
@@ -176,6 +176,12 @@
     "@kbn/react-kibana-mount",
     "@kbn/react-kibana-context-styled",
     "@kbn/unified-doc-viewer-plugin",
+    "@kbn/openapi-generator",
+    "@kbn/unified-data-table",
+    "@kbn/unified-doc-viewer",
+    "@kbn/dom-drag-drop",
+    "@kbn/unified-field-list",
+    "@kbn/resizable-layout",
     "@kbn/shared-ux-error-boundary",
     "@kbn/zod-helpers",
     "@kbn/core-http-common",

From dfde04350944dff23fbe1ca2db717d64f37951cb Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Fri, 9 Feb 2024 14:55:46 +0100
Subject: [PATCH 07/65] fix: add appropriate actions and unified table changes

---
 .../src/components/data_table.scss            |   8 +
 .../src/components/data_table.tsx             |  17 +-
 .../data_table_document_selection.tsx         |   5 +-
 .../components/data_table_expand_button.tsx   |   5 +-
 .../src/utils/get_render_cell_value.tsx       |  39 +-
 .../field_list_sidebar_container.tsx          | 483 +++++++++---------
 .../timeline/query_tab_content/index.tsx      |   2 +-
 .../unified_components/data_table/index.tsx   |  46 +-
 .../public/timelines/store/actions.ts         |  16 +
 .../public/timelines/store/defaults.ts        |   4 +-
 .../public/timelines/store/helpers.ts         |  27 +
 .../public/timelines/store/model.ts           |   4 +
 .../public/timelines/store/reducer.ts         |  35 ++
 13 files changed, 389 insertions(+), 302 deletions(-)

diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss
index 011c8f74995475..67ae70560bb10f 100644
--- a/packages/kbn-unified-data-table/src/components/data_table.scss
+++ b/packages/kbn-unified-data-table/src/components/data_table.scss
@@ -9,6 +9,14 @@
   font-family: $euiCodeFontFamily;
 }
 
+.dscDocsGrid__cell--expanded {
+  background-color: $euiColorHighlight;
+}
+
+.dscDocsGrid__cell--selected {
+  background-color: $euiColorHighlight;
+}
+
 .unifiedDataTable__cellPopover {
   // Fixes https://github.com/elastic/kibana/issues/145216 in Chrome
   .lines-content.monaco-editor-background {
diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx
index 33ff451adc9729..351977b6632a97 100644
--- a/packages/kbn-unified-data-table/src/components/data_table.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table.tsx
@@ -51,7 +51,6 @@ import {
   ValueToStringConverter,
   DataTableColumnTypes,
   CustomCellRenderer,
-  CustomGridColumnsConfiguration,
 } from '../types';
 import { getDisplayedColumns } from '../utils/columns';
 import { convertValueToString } from '../utils/convert_value_to_string';
@@ -330,10 +329,6 @@ export interface UnifiedDataTableProps {
    * An optional settings for a specified fields rendering like links. Applied only for the listed fields rendering.
    */
   externalCustomRenderers?: CustomCellRenderer;
-  /**
-   * An optional settings for customising the column
-   */
-  customGridColumnsConfiguration?: CustomGridColumnsConfiguration;
   /**
    * Name of the UnifiedDataTable consumer component or application
    */
@@ -350,6 +345,12 @@ export interface UnifiedDataTableProps {
    * Optional row line height override. Default is 1.6em.
    */
   rowLineHeightOverride?: string;
+  /**
+   * Custom set of properties used by some actions.
+   * An action might require a specific set of metadata properties to render.
+   * This data is sent directly to actions.
+   */
+  cellActionsMetadata?: Record<string, unknown>;
 }
 
 export const EuiDataGridMemoized = React.memo(EuiDataGrid);
@@ -411,10 +412,11 @@ export const UnifiedDataTable = ({
   componentsTourSteps,
   gridStyleOverride,
   rowLineHeightOverride,
-  customGridColumnsConfiguration,
+  cellActionsMetadata,
 }: UnifiedDataTableProps) => {
   const { fieldFormats, toastNotifications, dataViewFieldEditor, uiSettings, storage, data } =
     services;
+
   const { darkMode } = useObservable(services.theme?.theme$ ?? of(themeDefault), themeDefault);
   const dataGridRef = useRef<EuiDataGridRefProps>(null);
   const [selectedDocs, setSelectedDocs] = useState<string[]>([]);
@@ -649,6 +651,7 @@ export const UnifiedDataTable = ({
     getCellValue,
     triggerId: cellActionsTriggerId,
     dataGridRef,
+    metadata: cellActionsMetadata,
   });
 
   const euiGridColumns = useMemo(
@@ -674,7 +677,6 @@ export const UnifiedDataTable = ({
         columnTypes,
         showColumnTokens,
         headerRowHeight,
-        customGridColumnsConfiguration,
       }),
     [
       onFilter,
@@ -695,7 +697,6 @@ export const UnifiedDataTable = ({
       columnTypes,
       showColumnTokens,
       headerRowHeight,
-      customGridColumnsConfiguration,
     ]
   );
 
diff --git a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx
index db6ed7680b0be0..78f22a1a107899 100644
--- a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx
@@ -19,7 +19,6 @@ import {
   useEuiTheme,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { euiDarkVars as themeDark, euiLightVars as themeLight } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
@@ -40,9 +39,7 @@ export const SelectButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
   useEffect(() => {
     if (expanded && doc && expanded.id === doc.id) {
       setCellProps({
-        style: {
-          backgroundColor: isDarkMode ? themeDark.euiColorHighlight : themeLight.euiColorHighlight,
-        },
+        className: 'dscDocsGrid__cell--selected',
       });
     } else {
       setCellProps({ style: undefined });
diff --git a/packages/kbn-unified-data-table/src/components/data_table_expand_button.tsx b/packages/kbn-unified-data-table/src/components/data_table_expand_button.tsx
index c44ea74791b338..5e7bc861b7821e 100644
--- a/packages/kbn-unified-data-table/src/components/data_table_expand_button.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table_expand_button.tsx
@@ -8,7 +8,6 @@
 
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { EuiButtonIcon, EuiDataGridCellValueElementProps, EuiToolTip } from '@elastic/eui';
-import { euiLightVars as themeLight, euiDarkVars as themeDark } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
 import { UnifiedDataTableContext } from '../table_context';
 
@@ -30,9 +29,7 @@ export const ExpandButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
       });
     } else if (expanded && current && expanded.id === current.id) {
       setCellProps({
-        style: {
-          backgroundColor: isDarkMode ? themeDark.euiColorHighlight : themeLight.euiColorHighlight,
-        },
+        className: 'dscDocsGrid__cell--expanded',
       });
     } else {
       setCellProps({ style: undefined });
diff --git a/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx b/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
index d1806b2c27326d..d8d40f22a378ca 100644
--- a/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
+++ b/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
@@ -8,7 +8,6 @@
 
 import React, { useContext, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
-import { euiLightVars as themeLight, euiDarkVars as themeDark } from '@kbn/ui-theme';
 import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
 import {
   EuiDataGridCellValueElementProps,
@@ -62,32 +61,22 @@ export const getRenderCellValueFn = ({
     const ctx = useContext(UnifiedDataTableContext);
 
     useEffect(() => {
-      if (!externalCustomRenderers) {
-        if (row?.isAnchor) {
-          setCellProps({
-            className: 'dscDocsGrid__cell--highlight',
-          });
-        } else if (ctx.expanded && row && ctx.expanded.id === row.id) {
-          setCellProps({
-            style: {
-              backgroundColor: ctx.isDarkMode
-                ? themeDark.euiColorHighlight
-                : themeLight.euiColorHighlight,
-            },
-          });
-        } else {
-          setCellProps({ style: undefined });
-        }
+      if (row?.isAnchor) {
+        setCellProps({
+          className: 'dscDocsGrid__cell--highlight',
+        });
+      } else if (ctx.expanded && row && ctx.expanded.id === row.id) {
+        setCellProps({
+          className: 'dscDocsGrid__cell--expanded',
+        });
+      } else {
+        setCellProps({ style: undefined });
       }
     }, [ctx, row, setCellProps]);
 
-    if (typeof row === 'undefined') {
-      return <span className={CELL_CLASS}>-</span>;
-    }
-
     if (!!externalCustomRenderers && !!externalCustomRenderers[columnId]) {
       return (
-        <>
+        <span className={CELL_CLASS}>
           {externalCustomRenderers[columnId]({
             rowIndex,
             columnId,
@@ -101,10 +90,14 @@ export const getRenderCellValueFn = ({
             fieldFormats,
             closePopover,
           })}
-        </>
+        </span>
       );
     }
 
+    if (typeof row === 'undefined') {
+      return <span className={CELL_CLASS}>-</span>;
+    }
+
     /**
      * when using the fields api this code is used to show top level objects
      * this is used for legacy stuff like displaying products of our ecommerce dataset
diff --git a/packages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar_container.tsx b/packages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar_container.tsx
index 2d67cf72e83a86..7bf3317aabe22d 100644
--- a/packages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar_container.tsx
+++ b/packages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar_container.tsx
@@ -7,6 +7,7 @@
  */
 
 import React, {
+  memo,
   useCallback,
   useState,
   forwardRef,
@@ -104,260 +105,268 @@ export type UnifiedFieldListSidebarContainerProps = Omit<
  * Desktop: Sidebar view, all elements are visible
  * Mobile: A button to trigger a flyout with all elements
  */
-const UnifiedFieldListSidebarContainer = forwardRef<
-  UnifiedFieldListSidebarContainerApi,
-  UnifiedFieldListSidebarContainerProps
->(function UnifiedFieldListSidebarContainer(props, componentRef) {
-  const {
-    getCreationOptions,
-    services,
-    dataView,
-    workspaceSelectedFieldNames,
-    prependInFlyout,
-    variant = 'responsive',
-    onFieldEdited,
-  } = props;
-  const [stateService] = useState<UnifiedFieldListSidebarContainerStateService>(
-    createStateService({ options: getCreationOptions() })
-  );
-  const { data, dataViewFieldEditor } = services;
-  const [isFieldListFlyoutVisible, setIsFieldListFlyoutVisible] = useState<boolean>(false);
-  const [sidebarVisibility] = useState(() =>
-    getSidebarVisibility({
-      localStorageKey: stateService.creationOptions.localStorageKeyPrefix
-        ? `${stateService.creationOptions.localStorageKeyPrefix}:sidebarClosed`
-        : undefined,
-    })
-  );
-  const isSidebarCollapsed = useObservable(sidebarVisibility.isCollapsed$, false);
+const UnifiedFieldListSidebarContainer = memo(
+  forwardRef<UnifiedFieldListSidebarContainerApi, UnifiedFieldListSidebarContainerProps>(
+    function UnifiedFieldListSidebarContainer(props, componentRef) {
+      const {
+        getCreationOptions,
+        services,
+        dataView,
+        workspaceSelectedFieldNames,
+        prependInFlyout,
+        variant = 'responsive',
+        onFieldEdited,
+      } = props;
+      const [stateService] = useState<UnifiedFieldListSidebarContainerStateService>(
+        createStateService({ options: getCreationOptions() })
+      );
+      const { data, dataViewFieldEditor } = services;
+      const [isFieldListFlyoutVisible, setIsFieldListFlyoutVisible] = useState<boolean>(false);
+      const [sidebarVisibility] = useState(() =>
+        getSidebarVisibility({
+          localStorageKey: stateService.creationOptions.localStorageKeyPrefix
+            ? `${stateService.creationOptions.localStorageKeyPrefix}:sidebarClosed`
+            : undefined,
+        })
+      );
+      const isSidebarCollapsed = useObservable(sidebarVisibility.isCollapsed$, false);
 
-  const canEditDataView =
-    Boolean(dataViewFieldEditor?.userPermissions.editIndexPattern()) ||
-    Boolean(dataView && !dataView.isPersisted());
-  const closeFieldEditor = useRef<() => void | undefined>();
-  const setFieldEditorRef = useCallback((ref: () => void | undefined) => {
-    closeFieldEditor.current = ref;
-  }, []);
+      const canEditDataView =
+        Boolean(dataViewFieldEditor?.userPermissions.editIndexPattern()) ||
+        Boolean(dataView && !dataView.isPersisted());
+      const closeFieldEditor = useRef<() => void | undefined>();
+      const setFieldEditorRef = useCallback((ref: () => void | undefined) => {
+        closeFieldEditor.current = ref;
+      }, []);
 
-  const closeFieldListFlyout = useCallback(() => {
-    setIsFieldListFlyoutVisible(false);
-  }, []);
+      const closeFieldListFlyout = useCallback(() => {
+        setIsFieldListFlyoutVisible(false);
+      }, []);
 
-  const querySubscriberResult = useQuerySubscriber({
-    data,
-    timeRangeUpdatesType: stateService.creationOptions.timeRangeUpdatesType,
-  });
-  const searchMode: SearchMode | undefined = querySubscriberResult.searchMode;
-  const isAffectedByGlobalFilter = Boolean(querySubscriberResult.filters?.length);
+      const querySubscriberResult = useQuerySubscriber({
+        data,
+        timeRangeUpdatesType: stateService.creationOptions.timeRangeUpdatesType,
+      });
+      const searchMode: SearchMode | undefined = querySubscriberResult.searchMode;
+      const isAffectedByGlobalFilter = Boolean(querySubscriberResult.filters?.length);
 
-  const { isProcessing, refetchFieldsExistenceInfo } = useExistingFieldsFetcher({
-    disableAutoFetching: stateService.creationOptions.disableFieldsExistenceAutoFetching,
-    dataViews: searchMode === 'documents' && dataView ? [dataView] : [],
-    query: querySubscriberResult.query,
-    filters: querySubscriberResult.filters,
-    fromDate: querySubscriberResult.fromDate,
-    toDate: querySubscriberResult.toDate,
-    services,
-  });
+      const { isProcessing, refetchFieldsExistenceInfo } = useExistingFieldsFetcher({
+        disableAutoFetching: stateService.creationOptions.disableFieldsExistenceAutoFetching,
+        dataViews: searchMode === 'documents' && dataView ? [dataView] : [],
+        query: querySubscriberResult.query,
+        filters: querySubscriberResult.filters,
+        fromDate: querySubscriberResult.fromDate,
+        toDate: querySubscriberResult.toDate,
+        services,
+      });
 
-  const editField = useMemo(
-    () =>
-      dataView && dataViewFieldEditor && searchMode === 'documents' && canEditDataView
-        ? (fieldName?: string) => {
-            const ref = dataViewFieldEditor.openEditor({
-              ctx: {
-                dataView,
-              },
-              fieldName,
-              onSave: async () => {
-                if (onFieldEdited) {
-                  await onFieldEdited({ editedFieldName: fieldName });
-                }
-              },
-            });
-            setFieldEditorRef(ref);
-            closeFieldListFlyout();
-          }
-        : undefined,
-    [
-      searchMode,
-      canEditDataView,
-      dataViewFieldEditor,
-      dataView,
-      setFieldEditorRef,
-      closeFieldListFlyout,
-      onFieldEdited,
-    ]
-  );
+      const editField = useMemo(
+        () =>
+          dataView && dataViewFieldEditor && searchMode === 'documents' && canEditDataView
+            ? (fieldName?: string) => {
+                const ref = dataViewFieldEditor.openEditor({
+                  ctx: {
+                    dataView,
+                  },
+                  fieldName,
+                  onSave: async () => {
+                    if (onFieldEdited) {
+                      await onFieldEdited({ editedFieldName: fieldName });
+                    }
+                  },
+                });
+                setFieldEditorRef(ref);
+                closeFieldListFlyout();
+              }
+            : undefined,
+        [
+          searchMode,
+          canEditDataView,
+          dataViewFieldEditor,
+          dataView,
+          setFieldEditorRef,
+          closeFieldListFlyout,
+          onFieldEdited,
+        ]
+      );
 
-  const deleteField = useMemo(
-    () =>
-      dataView && dataViewFieldEditor && editField
-        ? (fieldName: string) => {
-            const ref = dataViewFieldEditor.openDeleteModal({
-              ctx: {
-                dataView,
-              },
-              fieldName,
-              onDelete: async () => {
-                if (onFieldEdited) {
-                  await onFieldEdited({ removedFieldName: fieldName });
-                }
-              },
-            });
-            setFieldEditorRef(ref);
-            closeFieldListFlyout();
-          }
-        : undefined,
-    [
-      dataView,
-      setFieldEditorRef,
-      editField,
-      closeFieldListFlyout,
-      dataViewFieldEditor,
-      onFieldEdited,
-    ]
-  );
+      const deleteField = useMemo(
+        () =>
+          dataView && dataViewFieldEditor && editField
+            ? (fieldName: string) => {
+                const ref = dataViewFieldEditor.openDeleteModal({
+                  ctx: {
+                    dataView,
+                  },
+                  fieldName,
+                  onDelete: async () => {
+                    if (onFieldEdited) {
+                      await onFieldEdited({ removedFieldName: fieldName });
+                    }
+                  },
+                });
+                setFieldEditorRef(ref);
+                closeFieldListFlyout();
+              }
+            : undefined,
+        [
+          dataView,
+          setFieldEditorRef,
+          editField,
+          closeFieldListFlyout,
+          dataViewFieldEditor,
+          onFieldEdited,
+        ]
+      );
 
-  useEffect(() => {
-    const cleanup = () => {
-      if (closeFieldEditor?.current) {
-        closeFieldEditor?.current();
-      }
-    };
-    return () => {
-      // Make sure to close the editor when unmounting
-      cleanup();
-    };
-  }, []);
+      useEffect(() => {
+        const cleanup = () => {
+          if (closeFieldEditor?.current) {
+            closeFieldEditor?.current();
+          }
+        };
+        return () => {
+          // Make sure to close the editor when unmounting
+          cleanup();
+        };
+      }, []);
 
-  useImperativeHandle(
-    componentRef,
-    () => ({
-      sidebarVisibility,
-      refetchFieldsExistenceInfo,
-      closeFieldListFlyout,
-      createField: editField,
-      editField,
-      deleteField,
-    }),
-    [sidebarVisibility, refetchFieldsExistenceInfo, closeFieldListFlyout, editField, deleteField]
-  );
+      useImperativeHandle(
+        componentRef,
+        () => ({
+          sidebarVisibility,
+          refetchFieldsExistenceInfo,
+          closeFieldListFlyout,
+          createField: editField,
+          editField,
+          deleteField,
+        }),
+        [
+          sidebarVisibility,
+          refetchFieldsExistenceInfo,
+          closeFieldListFlyout,
+          editField,
+          deleteField,
+        ]
+      );
 
-  if (!dataView) {
-    return null;
-  }
+      if (!dataView) {
+        return null;
+      }
 
-  const commonSidebarProps: UnifiedFieldListSidebarProps = {
-    ...props,
-    searchMode,
-    stateService,
-    isProcessing,
-    isAffectedByGlobalFilter,
-    onEditField: editField,
-    onDeleteField: deleteField,
-    compressed: stateService.creationOptions.compressed ?? false,
-    buttonAddFieldVariant: stateService.creationOptions.buttonAddFieldVariant ?? 'primary',
-  };
+      const commonSidebarProps: UnifiedFieldListSidebarProps = {
+        ...props,
+        searchMode,
+        stateService,
+        isProcessing,
+        isAffectedByGlobalFilter,
+        onEditField: editField,
+        onDeleteField: deleteField,
+        compressed: stateService.creationOptions.compressed ?? false,
+        buttonAddFieldVariant: stateService.creationOptions.buttonAddFieldVariant ?? 'primary',
+      };
 
-  if (stateService.creationOptions.showSidebarToggleButton) {
-    commonSidebarProps.isSidebarCollapsed = isSidebarCollapsed;
-    commonSidebarProps.onToggleSidebar = sidebarVisibility.toggle;
-  }
+      if (stateService.creationOptions.showSidebarToggleButton) {
+        commonSidebarProps.isSidebarCollapsed = isSidebarCollapsed;
+        commonSidebarProps.onToggleSidebar = sidebarVisibility.toggle;
+      }
 
-  const buttonPropsToTriggerFlyout = stateService.creationOptions.buttonPropsToTriggerFlyout;
+      const buttonPropsToTriggerFlyout = stateService.creationOptions.buttonPropsToTriggerFlyout;
 
-  const renderListVariant = () => {
-    return <UnifiedFieldListSidebar {...commonSidebarProps} />;
-  };
+      const renderListVariant = () => {
+        return <UnifiedFieldListSidebar {...commonSidebarProps} />;
+      };
 
-  const renderButtonVariant = () => {
-    return (
-      <>
-        <div className="unifiedFieldListSidebar__mobile">
-          <EuiButton
-            {...buttonPropsToTriggerFlyout}
-            contentProps={{
-              ...buttonPropsToTriggerFlyout?.contentProps,
-              className: 'unifiedFieldListSidebar__mobileButton',
-            }}
-            fullWidth
-            onClick={() => setIsFieldListFlyoutVisible(true)}
-          >
-            <FormattedMessage
-              id="unifiedFieldList.fieldListSidebar.fieldsMobileButtonLabel"
-              defaultMessage="Fields"
-            />
-            <EuiBadge
-              className="unifiedFieldListSidebar__mobileBadge"
-              color={workspaceSelectedFieldNames?.[0] === '_source' ? 'default' : 'accent'}
-            >
-              {!workspaceSelectedFieldNames?.length || workspaceSelectedFieldNames[0] === '_source'
-                ? 0
-                : workspaceSelectedFieldNames.length}
-            </EuiBadge>
-          </EuiButton>
-        </div>
-        {isFieldListFlyoutVisible && (
-          <EuiPortal>
-            <EuiFlyout
-              size="s"
-              onClose={() => setIsFieldListFlyoutVisible(false)}
-              aria-labelledby="flyoutTitle"
-              ownFocus
-            >
-              <EuiFlyoutHeader hasBorder>
-                <EuiTitle size="s">
-                  <h2 id="flyoutTitle">
-                    <EuiLink color="text" onClick={() => setIsFieldListFlyoutVisible(false)}>
-                      <EuiIcon
-                        className="eui-alignBaseline"
-                        aria-label={i18n.translate(
-                          'unifiedFieldList.fieldListSidebar.flyoutBackIcon',
-                          {
-                            defaultMessage: 'Back',
-                          }
-                        )}
-                        type="arrowLeft"
-                      />{' '}
-                      <strong>
-                        {i18n.translate('unifiedFieldList.fieldListSidebar.flyoutHeading', {
-                          defaultMessage: 'Field list',
-                        })}
-                      </strong>
-                    </EuiLink>
-                  </h2>
-                </EuiTitle>
-              </EuiFlyoutHeader>
-              <UnifiedFieldListSidebar
-                {...commonSidebarProps}
-                alwaysShowActionButton={true}
-                buttonAddFieldVariant="primary" // always for the flyout
-                isSidebarCollapsed={undefined}
-                prepend={prependInFlyout?.()}
-              />
-            </EuiFlyout>
-          </EuiPortal>
-        )}
-      </>
-    );
-  };
+      const renderButtonVariant = () => {
+        return (
+          <>
+            <div className="unifiedFieldListSidebar__mobile">
+              <EuiButton
+                {...buttonPropsToTriggerFlyout}
+                contentProps={{
+                  ...buttonPropsToTriggerFlyout?.contentProps,
+                  className: 'unifiedFieldListSidebar__mobileButton',
+                }}
+                fullWidth
+                onClick={() => setIsFieldListFlyoutVisible(true)}
+              >
+                <FormattedMessage
+                  id="unifiedFieldList.fieldListSidebar.fieldsMobileButtonLabel"
+                  defaultMessage="Fields"
+                />
+                <EuiBadge
+                  className="unifiedFieldListSidebar__mobileBadge"
+                  color={workspaceSelectedFieldNames?.[0] === '_source' ? 'default' : 'accent'}
+                >
+                  {!workspaceSelectedFieldNames?.length ||
+                  workspaceSelectedFieldNames[0] === '_source'
+                    ? 0
+                    : workspaceSelectedFieldNames.length}
+                </EuiBadge>
+              </EuiButton>
+            </div>
+            {isFieldListFlyoutVisible && (
+              <EuiPortal>
+                <EuiFlyout
+                  size="s"
+                  onClose={() => setIsFieldListFlyoutVisible(false)}
+                  aria-labelledby="flyoutTitle"
+                  ownFocus
+                >
+                  <EuiFlyoutHeader hasBorder>
+                    <EuiTitle size="s">
+                      <h2 id="flyoutTitle">
+                        <EuiLink color="text" onClick={() => setIsFieldListFlyoutVisible(false)}>
+                          <EuiIcon
+                            className="eui-alignBaseline"
+                            aria-label={i18n.translate(
+                              'unifiedFieldList.fieldListSidebar.flyoutBackIcon',
+                              {
+                                defaultMessage: 'Back',
+                              }
+                            )}
+                            type="arrowLeft"
+                          />{' '}
+                          <strong>
+                            {i18n.translate('unifiedFieldList.fieldListSidebar.flyoutHeading', {
+                              defaultMessage: 'Field list',
+                            })}
+                          </strong>
+                        </EuiLink>
+                      </h2>
+                    </EuiTitle>
+                  </EuiFlyoutHeader>
+                  <UnifiedFieldListSidebar
+                    {...commonSidebarProps}
+                    alwaysShowActionButton={true}
+                    buttonAddFieldVariant="primary" // always for the flyout
+                    isSidebarCollapsed={undefined}
+                    prepend={prependInFlyout?.()}
+                  />
+                </EuiFlyout>
+              </EuiPortal>
+            )}
+          </>
+        );
+      };
 
-  if (variant === 'button-and-flyout-always') {
-    return renderButtonVariant();
-  }
+      if (variant === 'button-and-flyout-always') {
+        return renderButtonVariant();
+      }
 
-  if (variant === 'list-always') {
-    return renderListVariant();
-  }
+      if (variant === 'list-always') {
+        return renderListVariant();
+      }
 
-  return (
-    <>
-      <EuiHideFor sizes={['xs', 's']}>{renderListVariant()}</EuiHideFor>
-      <EuiShowFor sizes={['xs', 's']}>{renderButtonVariant()}</EuiShowFor>
-    </>
-  );
-});
+      return (
+        <>
+          <EuiHideFor sizes={['xs', 's']}>{renderListVariant()}</EuiHideFor>
+          <EuiShowFor sizes={['xs', 's']}>{renderButtonVariant()}</EuiShowFor>
+        </>
+      );
+    }
+  )
+);
 
 // Necessary for React.lazy
 // eslint-disable-next-line import/no-default-export
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
index 9433907d2e3055..308ba6038ec5e5 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
@@ -532,4 +532,4 @@ const QueryTabContent = connector(
 );
 
 // eslint-disable-next-line import/no-default-export
-export { QueryTabContent as default };
\ No newline at end of file
+export { QueryTabContent as default };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index f3cd86f9a9bcf2..959c7db3df87e5 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -76,7 +76,7 @@ interface CommonDataTableProps {
 }
 
 interface DataTableProps extends CommonDataTableProps {
-  dataView: DataView
+  dataView: DataView;
 }
 
 /* eslint-disable react/display-name */
@@ -133,12 +133,13 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
     const { browserFields, runtimeMappings } = useSourcererDataView(SourcererScopeName.timeline);
 
     const showTimeCol = useMemo(() => !!dataView && !!dataView.timeFieldName, [dataView]);
+
     const tableSettings = useMemo(() => {
-      const columnSettings = columns.reduce((memo, item) => {
+      const columnSettings = columns.reduce((acc, item) => {
         if (item.initialWidth) {
-          memo[item.id] = { width: item.initialWidth };
+          acc[item.id] = { width: item.initialWidth };
         }
-        return memo;
+        return acc;
       }, {} as Record<string, UnifiedDataTableSettingsColumn>);
 
       return {
@@ -151,13 +152,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
     const trGroupRef = useRef<HTMLDivElement | null>(null);
 
     const {
-      timeline: {
-        filterManager,
-        excludedRowRendererIds,
-        rowHeight,
-        sampleSize,
-        notesMap,
-      } = timelineDefaults,
+      timeline: { filterManager, excludedRowRendererIds, rowHeight, sampleSize } = timelineDefaults,
     } = useSelector((state: State) => timelineBodySelector(state, timelineId));
 
     // const { activeStep, isTourShown, incrementStep } = useTourContext();
@@ -215,7 +210,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       [events, dataView]
     );
 
-    ///////////// ROW RENDERERS START ///////////////
+    // /////////// ROW RENDERERS START ///////////////
 
     const enabledRowRenderers = useMemo(() => {
       if (!excludedRowRendererIds) return rowRenderers;
@@ -255,7 +250,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       trGroupRef,
     });
 
-    //////////////// START FLYOUT DETAILS ////////////////
+    // ////////////// START FLYOUT DETAILS ////////////////
 
     const handleOnEventDetailPanelOpened = useCallback(
       (eventData: DataTableRecord & TimelineItem) => {
@@ -308,7 +303,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       [tableRows, handleOnEventDetailPanelOpened, handleOnPanelClosed]
     );
 
-    //////////////// START SORTING ////////////////
+    // ////////////// START SORTING ////////////////
 
     const sortingColumns: SortOrder[] = useMemo(() => {
       return sort ? sort.map((sortingCol) => [sortingCol.columnId, sortingCol.sortDirection]) : [];
@@ -331,7 +326,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
           })
         );
       },
-      [dispatch, timelineId]
+      [dispatch, timelineId, columns]
     );
 
     // Columns management
@@ -388,7 +383,9 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
 
     const onChangeItemsPerPage = useCallback(
       (itemsChangedPerPage) =>
-        dispatch(timelineActions.updateItemsPerPage({ id: timelineId, itemsPerPage: itemsChangedPerPage })),
+        dispatch(
+          timelineActions.updateItemsPerPage({ id: timelineId, itemsPerPage: itemsChangedPerPage })
+        ),
       [dispatch, timelineId]
     );
 
@@ -456,8 +453,6 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       dataPluginContract,
     ]);
 
-    console.log("TABLE ROWS: ", tableRows, dataView);
-
     if (!dataView) {
       return null;
     }
@@ -532,9 +527,12 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
 
 export const TimelineDataTable: React.FC<CommonDataTableProps> = memo((props) => {
   const dataView = useGetScopedSourcererDataView({ sourcererScope: SourcererScopeName.timeline });
-  return  dataView ? <TimelineDataTableComponent dataView={dataView} {...props} /> : <div>{'TO DO: SHOW ERROR COMPONENT'}</div>
-})
-
-
-
-export { TimelineDataTable as default };
+  return dataView ? (
+    <TimelineDataTableComponent dataView={dataView} {...props} />
+  ) : (
+    <div>{'TO DO: SHOW ERROR COMPONENT'}</div>
+  );
+});
+
+// eslint-disable-next-line import/no-default-export
+export default TimelineDataTable;
diff --git a/x-pack/plugins/security_solution/public/timelines/store/actions.ts b/x-pack/plugins/security_solution/public/timelines/store/actions.ts
index 8de7d6670e28e8..1dedeb7927a95f 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/actions.ts
+++ b/x-pack/plugins/security_solution/public/timelines/store/actions.ts
@@ -290,3 +290,19 @@ export const setDataProviderVisibility = actionCreator<{
 }>('SET_DATA_PROVIDER_VISIBLITY');
 
 export const setChanged = actionCreator<{ id: string; changed: boolean }>('SET_CHANGED');
+
+export const updateColumnWidth = actionCreator<{
+  columnId: string;
+  id: string;
+  width: number;
+}>('UPDATE_COLUMN_WIDTH');
+
+export const updateRowHeight = actionCreator<{
+  id: string;
+  rowHeight: number;
+}>('UPDATE_ROW_HEIGHT');
+
+export const updateSampleSize = actionCreator<{
+  id: string;
+  sampleSize: number;
+}>('UPDATE_SAMPLE_SIZE');
diff --git a/x-pack/plugins/security_solution/public/timelines/store/defaults.ts b/x-pack/plugins/security_solution/public/timelines/store/defaults.ts
index 9fb94d9f5b1b95..4ec09255df602d 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/defaults.ts
+++ b/x-pack/plugins/security_solution/public/timelines/store/defaults.ts
@@ -16,7 +16,7 @@ import type { SubsetTimelineModel, TimelineModel } from './model';
 const { from: start, to: end } = normalizeTimeRange({ from: '', to: '' }, false);
 
 export const timelineDefaults: SubsetTimelineModel &
-  Pick<TimelineModel, 'eqlOptions' | 'resolveTimelineConfig'> = {
+  Pick<TimelineModel, 'eqlOptions' | 'resolveTimelineConfig' | 'sampleSize' | 'rowHeight'> = {
   activeTab: TimelineTabs.query,
   prevActiveTab: TimelineTabs.query,
   columns: defaultHeaders,
@@ -82,6 +82,8 @@ export const timelineDefaults: SubsetTimelineModel &
   savedSearch: null,
   isDiscoverSavedSearchLoaded: false,
   isDataProviderVisible: false,
+  sampleSize: 500,
+  rowHeight: 1,
 };
 
 export const getTimelineManageDefaults = (id: string) => ({
diff --git a/x-pack/plugins/security_solution/public/timelines/store/helpers.ts b/x-pack/plugins/security_solution/public/timelines/store/helpers.ts
index 5ce65a5b7091b1..43196fcbb2237e 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/store/helpers.ts
@@ -1531,3 +1531,30 @@ export const applyDeltaToTableColumnWidth = ({
     },
   };
 };
+
+export const updateTimelineColumnWidth = ({
+  columnId,
+  id,
+  timelineById,
+  width,
+}: {
+  columnId: string;
+  id: string;
+  timelineById: TimelineById;
+  width: number;
+}): TimelineById => {
+  const timeline = timelineById[id];
+
+  const columns = timeline.columns.map((x) => ({
+    ...x,
+    initialWidth: x.id === columnId ? width : x.initialWidth,
+  }));
+
+  return {
+    ...timelineById,
+    [id]: {
+      ...timeline,
+      columns,
+    },
+  };
+};
diff --git a/x-pack/plugins/security_solution/public/timelines/store/model.ts b/x-pack/plugins/security_solution/public/timelines/store/model.ts
index 0bd6f4806f06bf..16dc4e9c524f82 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/model.ts
+++ b/x-pack/plugins/security_solution/public/timelines/store/model.ts
@@ -142,6 +142,10 @@ export interface TimelineModel {
   isDataProviderVisible: boolean;
   /** used to mark the timeline as unsaved in the UI */
   changed?: boolean;
+  /* row height, used only by unified data table */
+  rowHeight?: number;
+  /* sample size, total record number stored in in memory EuiDataGrid */
+  sampleSize: number;
 }
 
 export type SubsetTimelineModel = Readonly<
diff --git a/x-pack/plugins/security_solution/public/timelines/store/reducer.ts b/x-pack/plugins/security_solution/public/timelines/store/reducer.ts
index 1ae41833a14bba..0f369edd3457c0 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/reducer.ts
+++ b/x-pack/plugins/security_solution/public/timelines/store/reducer.ts
@@ -63,6 +63,9 @@ import {
   setIsDiscoverSavedSearchLoaded,
   setDataProviderVisibility,
   setChanged,
+  updateRowHeight,
+  updateSampleSize,
+  updateColumnWidth,
 } from './actions';
 
 import {
@@ -102,6 +105,7 @@ import {
   applyDeltaToTableColumnWidth,
   updateTimelinePerPageOptions,
   updateTimelineItemsPerPage,
+  updateTimelineColumnWidth,
 } from './helpers';
 
 import type { TimelineState } from './types';
@@ -575,4 +579,35 @@ export const timelineReducer = reducerWithInitialState(initialTimelineState)
       },
     },
   }))
+  .case(updateColumnWidth, (state, { id, columnId, width }) => ({
+    ...state,
+    timelineById: updateTimelineColumnWidth({
+      columnId,
+      id,
+      timelineById: state.timelineById,
+      width,
+    }),
+  }))
+
+  .case(updateSampleSize, (state, { id, sampleSize }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        sampleSize,
+      },
+    },
+  }))
+
+  .case(updateRowHeight, (state, { id, rowHeight }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        rowHeight,
+      },
+    },
+  }))
   .build();

From b1556c73ac500cdc13eeeb2d37144945b37eff45 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Tue, 13 Feb 2024 08:06:12 +0100
Subject: [PATCH 08/65] fix: column auto adjust width

---
 .../timeline/use_init_timeline_url_param.ts   |   6 +-
 .../use_query_timeline_by_id_on_url_change.ts |  16 +-
 .../public/common/mock/global_state.ts        |   1 +
 .../public/common/mock/timeline_results.ts    |   2 +
 .../utils/timeline/use_timeline_click.tsx     |   8 +-
 .../use_investigate_in_timeline.tsx           |  16 +-
 .../rules/use_rule_from_timeline.tsx          |   8 +-
 .../components/recent_timelines/index.tsx     |   8 +-
 .../components/open_timeline/helpers.ts       |  76 +++----
 .../components/open_timeline/index.tsx        |  19 +-
 .../timelines_table/common_columns.tsx        |   6 +-
 .../components/timeline/body/constants.ts     |   2 +-
 .../timeline/eql_tab_content/index.tsx        |  10 +-
 .../timelines/components/timeline/index.tsx   |   9 +-
 .../timeline/pinned_tab_content/index.tsx     |   8 +-
 .../timeline/query_tab_content/index.tsx      |   9 +-
 .../timeline/query_tab_content_new/index.tsx  |  25 +--
 .../unified_components/data_table/index.tsx   |  59 +-----
 .../data_table/render_custom_body.tsx         | 191 -----------------
 .../data_table/row_details.tsx                | 152 --------------
 .../data_table/use_control_columns.tsx        | 198 ------------------
 .../unified_components/default_headers.tsx    |   2 +-
 .../get_fields_list_creation_options.ts       |  17 +-
 .../timeline/unified_components/index.tsx     |   2 +-
 .../timeline/unified_components/styles.tsx    |   2 +-
 .../timelines/containers/index.test.tsx       |   9 +-
 .../timelines/hooks/use_create_timeline.tsx   |   8 +-
 .../public/timelines/store/helpers.test.ts    |   1 +
 .../public/timelines/store/helpers.ts         |   4 +-
 .../store/middlewares/timeline_save.test.ts   |   1 +
 30 files changed, 200 insertions(+), 675 deletions(-)
 delete mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/render_custom_body.tsx
 delete mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/row_details.tsx
 delete mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/use_control_columns.tsx

diff --git a/x-pack/plugins/security_solution/public/common/hooks/timeline/use_init_timeline_url_param.ts b/x-pack/plugins/security_solution/public/common/hooks/timeline/use_init_timeline_url_param.ts
index b82a31ce3ba044..df139a235b8a00 100644
--- a/x-pack/plugins/security_solution/public/common/hooks/timeline/use_init_timeline_url_param.ts
+++ b/x-pack/plugins/security_solution/public/common/hooks/timeline/use_init_timeline_url_param.ts
@@ -23,6 +23,9 @@ import { useIsExperimentalFeatureEnabled } from '../use_experimental_features';
 
 export const useInitTimelineFromUrlParam = () => {
   const dispatch = useDispatch();
+  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+    'unifiedComponentsInTimelineEnabled'
+  );
 
   const isEsqlTabDisabled = useIsExperimentalFeatureEnabled('timelineEsqlTabDisabled');
 
@@ -42,10 +45,11 @@ export const useInitTimelineFromUrlParam = () => {
             dispatch(timelineActions.updateIsLoading(status)),
           updateTimeline: dispatchUpdateTimeline(dispatch),
           savedSearchId: initialState.savedSearchId,
+          useDiscoverComponentsInTimeline,
         });
       }
     },
-    [dispatch, isEsqlTabDisabled]
+    [dispatch, useDiscoverComponentsInTimeline, isEsqlTabDisabled]
   );
 
   useEffect(() => {
diff --git a/x-pack/plugins/security_solution/public/common/hooks/timeline/use_query_timeline_by_id_on_url_change.ts b/x-pack/plugins/security_solution/public/common/hooks/timeline/use_query_timeline_by_id_on_url_change.ts
index a7ecab2d5bb509..94593cbb9b9a70 100644
--- a/x-pack/plugins/security_solution/public/common/hooks/timeline/use_query_timeline_by_id_on_url_change.ts
+++ b/x-pack/plugins/security_solution/public/common/hooks/timeline/use_query_timeline_by_id_on_url_change.ts
@@ -25,6 +25,7 @@ import {
   getQueryStringFromLocation,
 } from '../../utils/global_query_string/helpers';
 import { URL_PARAM_KEY } from '../use_url_state';
+import { useIsExperimentalFeatureEnabled } from '../use_experimental_features';
 
 /**
  * After the initial load of the security solution, timeline is not updated when the timeline URL search value is changed
@@ -46,6 +47,10 @@ export const useQueryTimelineByIdOnUrlChange = () => {
   const timelineIdFromReduxStore = flyoutTimeline?.savedObjectId ?? '';
   const dispatch = useDispatch();
 
+  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+    'unifiedComponentsInTimelineEnabled'
+  );
+
   const [previousTimeline, currentTimeline] = useMemo(() => {
     const oldUrlStateString = getQueryStringKeyValue({
       urlKey: URL_PARAM_KEY.timeline,
@@ -75,9 +80,18 @@ export const useQueryTimelineByIdOnUrlChange = () => {
         updateIsLoading: (status: { id: string; isLoading: boolean }) =>
           dispatch(timelineActions.updateIsLoading(status)),
         updateTimeline: dispatchUpdateTimeline(dispatch),
+        useDiscoverComponentsInTimeline,
       });
     }
-  }, [timelineIdFromReduxStore, dispatch, oldId, newId, activeTab, graphEventId]);
+  }, [
+    timelineIdFromReduxStore,
+    dispatch,
+    oldId,
+    newId,
+    activeTab,
+    graphEventId,
+    useDiscoverComponentsInTimeline,
+  ]);
 };
 
 const getQueryStringKeyValue = ({ search, urlKey }: { search: string; urlKey: string }) =>
diff --git a/x-pack/plugins/security_solution/public/common/mock/global_state.ts b/x-pack/plugins/security_solution/public/common/mock/global_state.ts
index 2de75c414e0f5b..80bc88506bf047 100644
--- a/x-pack/plugins/security_solution/public/common/mock/global_state.ts
+++ b/x-pack/plugins/security_solution/public/common/mock/global_state.ts
@@ -384,6 +384,7 @@ export const mockGlobalState: State = {
         isDiscoverSavedSearchLoaded: false,
         savedSearch: null,
         isDataProviderVisible: true,
+        sampleSize: 500,
       },
     },
     insertTimeline: null,
diff --git a/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts b/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts
index fe8ec46b752c57..b005985b679341 100644
--- a/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts
+++ b/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts
@@ -2034,6 +2034,7 @@ export const mockTimelineModel: TimelineModel = {
   savedSearchId: null,
   savedSearch: null,
   isDataProviderVisible: false,
+  sampleSize: 500,
 };
 
 export const mockDataTableModel: DataTableModel = {
@@ -2217,6 +2218,7 @@ export const defaultTimelineProps: CreateTimelineProps = {
     isDiscoverSavedSearchLoaded: false,
     savedSearch: null,
     isDataProviderVisible: false,
+    sampleSize: 500,
   },
   to: '2018-11-05T19:03:25.937Z',
   notes: null,
diff --git a/x-pack/plugins/security_solution/public/common/utils/timeline/use_timeline_click.tsx b/x-pack/plugins/security_solution/public/common/utils/timeline/use_timeline_click.tsx
index dca72a31414ba6..f0a260c36250b3 100644
--- a/x-pack/plugins/security_solution/public/common/utils/timeline/use_timeline_click.tsx
+++ b/x-pack/plugins/security_solution/public/common/utils/timeline/use_timeline_click.tsx
@@ -13,10 +13,15 @@ import {
 } from '../../../timelines/components/open_timeline/helpers';
 import type { TimelineErrorCallback } from '../../../timelines/components/open_timeline/types';
 import { updateIsLoading as dispatchUpdateIsLoading } from '../../../timelines/store/actions';
+import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
 
 export const useTimelineClick = () => {
   const dispatch = useDispatch();
 
+  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+    'unifiedComponentsInTimelineEnabled'
+  );
+
   const handleTimelineClick = useCallback(
     (timelineId: string, onError: TimelineErrorCallback, graphEventId?: string) => {
       queryTimelineById({
@@ -31,9 +36,10 @@ export const useTimelineClick = () => {
           isLoading: boolean;
         }) => dispatch(dispatchUpdateIsLoading({ id: currentTimelineId, isLoading })),
         updateTimeline: dispatchUpdateTimeline(dispatch),
+        useDiscoverComponentsInTimeline,
       });
     },
-    [dispatch]
+    [dispatch, useDiscoverComponentsInTimeline]
   );
 
   return handleTimelineClick;
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx
index 7b65dc34727a35..833e6860a9cee3 100644
--- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx
@@ -18,6 +18,7 @@ import { useApi } from '@kbn/securitysolution-list-hooks';
 
 import type { Filter } from '@kbn/es-query';
 import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { createHistoryEntry } from '../../../../common/utils/global_query_string/helpers';
 import { timelineDefaults } from '../../../../timelines/store/defaults';
 import { useKibana } from '../../../../common/lib/kibana';
@@ -34,6 +35,8 @@ import { getField } from '../../../../helpers';
 import { useAppToasts } from '../../../../common/hooks/use_app_toasts';
 import { useStartTransaction } from '../../../../common/lib/apm/use_start_transaction';
 import { ALERTS_ACTIONS } from '../../../../common/lib/apm/user_actions';
+import { defaultUdtHeaders } from '../../../../timelines/components/timeline/unified_components/default_headers';
+import { defaultHeaders } from '../../../../timelines/components/timeline/body/column_headers/default_headers';
 
 interface UseInvestigateInTimelineActionProps {
   ecsRowData?: Ecs | Ecs[] | null;
@@ -153,6 +156,10 @@ export const useInvestigateInTimeline = ({
     timelineType: TimelineType.default,
   });
 
+  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+    'unifiedComponentsInTimelineEnabled'
+  );
+
   const createTimeline = useCallback(
     ({ from: fromTimeline, timeline, to: toTimeline, ruleNote }: CreateTimelineProps) => {
       clearActiveTimeline();
@@ -164,6 +171,7 @@ export const useInvestigateInTimeline = ({
         notes: [],
         timeline: {
           ...timeline,
+          columns: useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders,
           filterManager,
           indexNames: timeline.indexNames ?? [],
           show: true,
@@ -172,7 +180,13 @@ export const useInvestigateInTimeline = ({
         ruleNote,
       })();
     },
-    [dispatch, filterManager, updateTimelineIsLoading, clearActiveTimeline]
+    [
+      dispatch,
+      filterManager,
+      updateTimelineIsLoading,
+      clearActiveTimeline,
+      useDiscoverComponentsInTimeline,
+    ]
   );
 
   const investigateInTimelineAlertClick = useCallback(async () => {
diff --git a/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/use_rule_from_timeline.tsx b/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/use_rule_from_timeline.tsx
index ed384929a5fc00..a0f1865e607813 100644
--- a/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/use_rule_from_timeline.tsx
+++ b/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/use_rule_from_timeline.tsx
@@ -10,6 +10,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { i18n } from '@kbn/i18n';
 import type { EqlOptionsSelected } from '@kbn/timelines-plugin/common';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { convertKueryToElasticSearchQuery } from '../../../../common/lib/kuery';
 import { updateIsLoading } from '../../../../timelines/store/actions';
 import { useAppToasts } from '../../../../common/hooks/use_app_toasts';
@@ -51,6 +52,10 @@ export const useRuleFromTimeline = (setRuleQuery: SetRuleQuery): RuleFromTimelin
     SourcererScopeName.timeline
   );
 
+  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+    'unifiedComponentsInTimelineEnabled'
+  );
+
   const isEql = useRef(false);
 
   // selectedTimeline = timeline to set rule from
@@ -205,10 +210,11 @@ export const useRuleFromTimeline = (setRuleQuery: SetRuleQuery): RuleFromTimelin
             isLoading: boolean;
           }) => dispatch(updateIsLoading({ id: currentTimelineId, isLoading })),
           updateTimeline: dispatchUpdateTimeline(dispatch),
+          useDiscoverComponentsInTimeline,
         });
       }
     },
-    [dispatch, onOpenTimeline, selectedTimeline]
+    [dispatch, onOpenTimeline, selectedTimeline, useDiscoverComponentsInTimeline]
   );
 
   const [urlStateInitialized, setUrlStateInitialized] = useState(false);
diff --git a/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx b/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx
index 0e5b4d6903068b..0c09ee9a74f3e4 100644
--- a/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx
@@ -9,6 +9,7 @@ import { EuiHorizontalRule, EuiText } from '@elastic/eui';
 import React, { useCallback, useMemo, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
 import { SortFieldTimeline, TimelineType } from '../../../../common/api/timeline';
 import { useGetAllTimeline } from '../../../timelines/containers/all';
 import {
@@ -44,6 +45,10 @@ const StatefulRecentTimelinesComponent: React.FC<Props> = ({ filterBy }) => {
   );
   const updateTimeline = useMemo(() => dispatchUpdateTimeline(dispatch), [dispatch]);
 
+  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+    'unifiedComponentsInTimelineEnabled'
+  );
+
   const { formatUrl } = useFormatUrl(SecurityPageName.timelines);
   const { navigateToApp } = useKibana().services.application;
   const onOpenTimeline: OnOpenTimeline = useCallback(
@@ -53,9 +58,10 @@ const StatefulRecentTimelinesComponent: React.FC<Props> = ({ filterBy }) => {
         timelineId,
         updateIsLoading,
         updateTimeline,
+        useDiscoverComponentsInTimeline,
       });
     },
-    [updateIsLoading, updateTimeline]
+    [updateIsLoading, updateTimeline, useDiscoverComponentsInTimeline]
   );
 
   const goToTimelines = useCallback(
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
index 5c283aea8c1ec7..392094a7dd69f0 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
@@ -46,10 +46,7 @@ import {
   defaultColumnHeaderType,
   defaultHeaders,
 } from '../timeline/body/column_headers/default_headers';
-import {
-  DEFAULT_DATE_COLUMN_MIN_WIDTH,
-  DEFAULT_COLUMN_MIN_WIDTH,
-} from '../timeline/body/constants';
+import { DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../timeline/body/constants';
 
 import type {
   OpenTimelineResult,
@@ -67,6 +64,7 @@ import {
   DEFAULT_TO_MOMENT,
 } from '../../../common/utils/default_date_settings';
 import { resolveTimeline } from '../../containers/api';
+import { defaultUdtHeaders } from '../timeline/unified_components/default_headers';
 
 export const OPEN_TIMELINE_CLASS_NAME = 'open-timeline';
 
@@ -107,7 +105,7 @@ const parseString = (params: string) => {
   }
 };
 
-const setTimelineColumn = (col: ColumnHeaderResult) =>
+const setTimelineColumn = (col: ColumnHeaderResult, defaultHeadersValue: ColumnHeaderOptions[]) =>
   Object.entries(col).reduce<ColumnHeaderOptions>(
     (acc, [key, value]) => {
       if (key !== 'id' && value != null) {
@@ -119,7 +117,9 @@ const setTimelineColumn = (col: ColumnHeaderResult) =>
       columnHeaderType: defaultColumnHeaderType,
       id: col.id != null ? col.id : 'unknown',
       initialWidth:
-        col.id === '@timestamp' ? DEFAULT_DATE_COLUMN_MIN_WIDTH : DEFAULT_COLUMN_MIN_WIDTH,
+        col.id === '@timestamp'
+          ? DEFAULT_DATE_COLUMN_MIN_WIDTH
+          : defaultHeadersValue.find((defaultCol) => col.id === defaultCol.id)?.initialWidth,
     }
   );
 
@@ -254,13 +254,19 @@ export const getTimelineStatus = (
 export const defaultTimelineToTimelineModel = (
   timeline: TimelineResult,
   duplicate: boolean,
-  timelineType?: TimelineType
+  timelineType?: TimelineType,
+  useDiscoverComponentsInTimeline?: boolean
 ): TimelineModel => {
   const isTemplate = timeline.timelineType === TimelineType.template;
+  const defaultHeadersValue = useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders;
+
   const timelineEntries = {
     ...timeline,
-    columns: timeline.columns != null ? timeline.columns.map(setTimelineColumn) : defaultHeaders,
-    defaultColumns: defaultHeaders,
+    columns:
+      timeline.columns != null
+        ? timeline.columns.map((col) => setTimelineColumn(col, defaultHeadersValue))
+        : defaultHeadersValue,
+    defaultColumns: defaultHeadersValue,
     dateRange:
       timeline.status === TimelineStatus.immutable &&
       timeline.timelineType === TimelineType.template
@@ -301,12 +307,18 @@ export const defaultTimelineToTimelineModel = (
 export const formatTimelineResultToModel = (
   timelineToOpen: TimelineResult,
   duplicate: boolean = false,
-  timelineType?: TimelineType
+  timelineType?: TimelineType,
+  useDiscoverComponentsInTimeline?: boolean
 ): { notes: Note[] | null | undefined; timeline: TimelineModel } => {
   const { notes, ...timelineModel } = timelineToOpen;
   return {
     notes,
-    timeline: defaultTimelineToTimelineModel(timelineModel, duplicate, timelineType),
+    timeline: defaultTimelineToTimelineModel(
+      timelineModel,
+      duplicate,
+      timelineType,
+      useDiscoverComponentsInTimeline
+    ),
   };
 };
 
@@ -328,6 +340,7 @@ export interface QueryTimelineById<TCache> {
   }) => Action<{ id: string; isLoading: boolean }>;
   updateTimeline: DispatchUpdateTimeline;
   savedSearchId?: string;
+  useDiscoverComponentsInTimeline?: boolean; // temporary til fully migrate
 }
 
 export const queryTimelineById = <TCache>({
@@ -342,6 +355,7 @@ export const queryTimelineById = <TCache>({
   updateIsLoading,
   updateTimeline,
   savedSearchId,
+  useDiscoverComponentsInTimeline = false,
 }: QueryTimelineById<TCache>) => {
   updateIsLoading({ id: TimelineId.active, isLoading: true });
   if (timelineId == null) {
@@ -353,6 +367,7 @@ export const queryTimelineById = <TCache>({
       to: DEFAULT_TO_MOMENT.toISOString(),
       timeline: {
         ...timelineDefaults,
+        columns: useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders,
         id: TimelineId.active,
         activeTab: activeTimelineTab,
         show: openTimeline,
@@ -368,11 +383,11 @@ export const queryTimelineById = <TCache>({
         if (!data) return;
 
         const timelineToOpen = omitTypenameInTimeline(data.timeline);
-
         const { timeline, notes } = formatTimelineResultToModel(
           timelineToOpen,
           duplicate,
-          timelineType
+          timelineType,
+          useDiscoverComponentsInTimeline
         );
 
         if (onOpenTimeline != null) {
@@ -435,22 +450,18 @@ export const dispatchUpdateTimeline =
     preventSettingQuery,
   }: UpdateTimeline): (() => void) =>
   () => {
-    let _timeline = timeline;
-    if (duplicate) {
-      _timeline = { ...timeline, updated: undefined, changed: undefined, version: null };
-    }
-    if (!isEmpty(_timeline.indexNames)) {
+    if (!isEmpty(timeline.indexNames)) {
       dispatch(
         sourcererActions.setSelectedDataView({
           id: SourcererScopeName.timeline,
-          selectedDataViewId: _timeline.dataViewId,
-          selectedPatterns: _timeline.indexNames,
+          selectedDataViewId: timeline.dataViewId,
+          selectedPatterns: timeline.indexNames,
         })
       );
     }
     if (
-      _timeline.status === TimelineStatus.immutable &&
-      _timeline.timelineType === TimelineType.template
+      timeline.status === TimelineStatus.immutable &&
+      timeline.timelineType === TimelineType.template
     ) {
       dispatch(
         dispatchSetRelativeRangeDatePicker({
@@ -465,29 +476,24 @@ export const dispatchUpdateTimeline =
       dispatch(dispatchSetTimelineRangeDatePicker({ from, to }));
     }
     dispatch(
-      dispatchAddTimeline({
-        id,
-        timeline: _timeline,
-        resolveTimelineConfig,
-        savedTimeline: duplicate,
-      })
+      dispatchAddTimeline({ id, timeline, resolveTimelineConfig, savedTimeline: duplicate })
     );
     if (
       !preventSettingQuery &&
-      _timeline.kqlQuery != null &&
-      _timeline.kqlQuery.filterQuery != null &&
-      _timeline.kqlQuery.filterQuery.kuery != null &&
-      _timeline.kqlQuery.filterQuery.kuery.expression !== ''
+      timeline.kqlQuery != null &&
+      timeline.kqlQuery.filterQuery != null &&
+      timeline.kqlQuery.filterQuery.kuery != null &&
+      timeline.kqlQuery.filterQuery.kuery.expression !== ''
     ) {
       dispatch(
         dispatchApplyKqlFilterQuery({
           id,
           filterQuery: {
             kuery: {
-              kind: _timeline.kqlQuery.filterQuery.kuery.kind ?? 'kuery',
-              expression: _timeline.kqlQuery.filterQuery.kuery.expression || '',
+              kind: timeline.kqlQuery.filterQuery.kuery.kind ?? 'kuery',
+              expression: timeline.kqlQuery.filterQuery.kuery.expression || '',
             },
-            serializedQuery: _timeline.kqlQuery.filterQuery.serializedQuery || '',
+            serializedQuery: timeline.kqlQuery.filterQuery.serializedQuery || '',
           },
         })
       );
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx
index a7751cfb02d2e2..e039eeb245a681 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx
@@ -9,6 +9,7 @@ import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { encode } from '@kbn/rison';
 
+import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
 import {
   RULE_FROM_EQL_URL_PARAM,
   RULE_FROM_TIMELINE_URL_PARAM,
@@ -58,6 +59,7 @@ import { SourcererScopeName } from '../../../common/store/sourcerer/model';
 import { useSourcererDataView } from '../../../common/containers/sourcerer';
 import { useStartTransaction } from '../../../common/lib/apm/use_start_transaction';
 import { TIMELINE_ACTIONS } from '../../../common/lib/apm/user_actions';
+import { defaultUdtHeaders } from '../timeline/unified_components/default_headers';
 
 interface OwnProps<TCache = object> {
   /** Displays open timeline in modal */
@@ -167,6 +169,10 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
       [dispatch]
     );
 
+    const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+      'unifiedComponentsInTimelineEnabled'
+    );
+
     const {
       customTemplateTimelineCount,
       defaultTimelineCount,
@@ -254,7 +260,7 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
           dispatch(
             dispatchCreateNewTimeline({
               id: TimelineId.active,
-              columns: defaultHeaders,
+              columns: useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders,
               dataViewId,
               indexNames: selectedPatterns,
               show: false,
@@ -265,7 +271,15 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
         await deleteTimelinesByIds(timelineIds, searchIds);
         refetch();
       },
-      [startTransaction, timelineSavedObjectId, refetch, dispatch, dataViewId, selectedPatterns]
+      [
+        startTransaction,
+        timelineSavedObjectId,
+        refetch,
+        dispatch,
+        dataViewId,
+        selectedPatterns,
+        useDiscoverComponentsInTimeline,
+      ]
     );
 
     const onDeleteOneTimeline: OnDeleteOneTimeline = useCallback(
@@ -362,6 +376,7 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
           timelineType: timelineTypeToOpen,
           updateIsLoading,
           updateTimeline,
+          useDiscoverComponentsInTimeline,
         });
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.tsx
index 649dde8664f794..86dd8488a6a081 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.tsx
@@ -70,12 +70,12 @@ export const getCommonColumns = ({
       timelineResult.savedObjectId != null ? (
         <EuiLink
           data-test-subj={`timeline-title-${timelineResult.savedObjectId}`}
-          onClick={() =>
+          onClick={() => {
             onOpenTimeline({
               duplicate: false,
               timelineId: `${timelineResult.savedObjectId}`,
-            })
-          }
+            });
+          }}
         >
           {isUntitled(timelineResult) ? (
             i18n.UNTITLED_TIMELINE
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts
index 23c79faf6d3912..1fa196efea2a0c 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts
@@ -12,4 +12,4 @@ export const DEFAULT_COLUMN_MIN_WIDTH = 180; // px
 export const RESIZED_COLUMN_MIN_WITH = 70; // px
 
 /** The default minimum width of a column of type `date` */
-export const DEFAULT_DATE_COLUMN_MIN_WIDTH = 190; // px
+export const DEFAULT_DATE_COLUMN_MIN_WIDTH = 215; // px
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/eql_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/eql_tab_content/index.tsx
index ee803cad8674ab..6ca5f2bb5f7f1f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/eql_tab_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/eql_tab_content/index.tsx
@@ -22,6 +22,7 @@ import { connect, useDispatch } from 'react-redux';
 import deepEqual from 'fast-deep-equal';
 import { InPortal } from 'react-reverse-portal';
 
+import { DataLoadingState } from '@kbn/unified-data-table';
 import type { ControlColumnProps } from '../../../../../common/types';
 import { InputsModelId } from '../../../../common/store/inputs/constants';
 import { timelineActions, timelineSelectors } from '../../../store';
@@ -192,7 +193,7 @@ export const EqlTabContentComponent: React.FC<Props> = ({
   };
 
   const [
-    isQueryLoading,
+    queryLoadingState,
     { events, inspect, totalCount, pageInfo, loadPage, refreshedAt, refetch },
   ] = useTimelineEvents({
     dataViewId,
@@ -210,6 +211,13 @@ export const EqlTabContentComponent: React.FC<Props> = ({
     timerangeKind,
   });
 
+  const isQueryLoading = useMemo(
+    () =>
+      queryLoadingState === DataLoadingState.loading ||
+      queryLoadingState === DataLoadingState.loadingMore,
+    [queryLoadingState]
+  );
+
   const handleOnPanelClosed = useCallback(() => {
     onEventClosed({ tabType: TimelineTabs.eql, id: timelineId });
   }, [onEventClosed, timelineId]);
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
index c40b54d8cd3b97..8e9ab14126748b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
@@ -12,6 +12,7 @@ import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 
 import { isTab } from '@kbn/timelines-plugin/public';
+import { useIsExperimentalFeatureEnabled } from '../../../common/hooks/use_experimental_features';
 import { useUserPrivileges } from '../../../common/components/user_privileges';
 import { timelineActions, timelineSelectors } from '../../store';
 import { timelineDefaults } from '../../store/defaults';
@@ -31,6 +32,7 @@ import { EXIT_FULL_SCREEN_CLASS_NAME } from '../../../common/components/exit_ful
 import { useResolveConflict } from '../../../common/hooks/use_resolve_conflict';
 import { sourcererSelectors } from '../../../common/store';
 import { TimelineTour } from './tour';
+import { defaultUdtHeaders } from './unified_components/default_headers';
 
 const TimelineTemplateBadge = styled.div`
   background: ${({ theme }) => theme.eui.euiColorVis3_behindText};
@@ -69,6 +71,11 @@ const StatefulTimelineComponent: React.FC<Props> = ({
   timelineId,
 }) => {
   const dispatch = useDispatch();
+
+  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+    'unifiedComponentsInTimelineEnabled'
+  );
+
   const containerElement = useRef<HTMLDivElement | null>(null);
   const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
   const scopeIdSelector = useMemo(() => sourcererSelectors.scopeIdSelector(), []);
@@ -118,7 +125,7 @@ const StatefulTimelineComponent: React.FC<Props> = ({
       dispatch(
         timelineActions.createTimeline({
           id: timelineId,
-          columns: defaultHeaders,
+          columns: useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders,
           dataViewId: selectedDataViewIdSourcerer,
           indexNames: selectedPatternsSourcerer,
           show: false,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx
index 20eff77cfbaec5..98f731d5f7f15e 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx
@@ -14,6 +14,7 @@ import type { ConnectedProps } from 'react-redux';
 import { connect } from 'react-redux';
 import deepEqual from 'fast-deep-equal';
 
+import { DataLoadingState } from '@kbn/unified-data-table';
 import type { ControlColumnProps } from '../../../../../common/types';
 import { timelineActions, timelineSelectors } from '../../../store';
 import type { CellValueElementProps } from '../cell_rendering';
@@ -182,7 +183,7 @@ export const PinnedTabContentComponent: React.FC<Props> = ({
     [sort]
   );
 
-  const [isQueryLoading, { events, totalCount, pageInfo, loadPage, refreshedAt, refetch }] =
+  const [queryLoadingState, { events, totalCount, pageInfo, loadPage, refreshedAt, refetch }] =
     useTimelineEvents({
       endDate: '',
       id: `pinned-${timelineId}`,
@@ -198,6 +199,11 @@ export const PinnedTabContentComponent: React.FC<Props> = ({
       timerangeKind: undefined,
     });
 
+  const isQueryLoading = useMemo(
+    () => [DataLoadingState.loading, DataLoadingState.loadingMore].includes(queryLoadingState),
+    [queryLoadingState]
+  );
+
   const handleOnPanelClosed = useCallback(() => {
     onEventClosed({ tabType: TimelineTabs.pinned, id: timelineId });
   }, [timelineId, onEventClosed]);
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
index 308ba6038ec5e5..bb4b2acc510270 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
@@ -24,6 +24,7 @@ import { InPortal } from 'react-reverse-portal';
 
 import { FilterManager } from '@kbn/data-plugin/public';
 import { getEsQueryConfig } from '@kbn/data-plugin/common';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import type { ControlColumnProps } from '../../../../../common/types';
 import { InputsModelId } from '../../../../common/store/inputs/constants';
 import { useInvalidFilterQuery } from '../../../../common/hooks/use_invalid_filter_query';
@@ -61,6 +62,7 @@ import { getDefaultControlColumn } from '../body/control_columns';
 import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
 import { useLicense } from '../../../../common/hooks/use_license';
 import { HeaderActions } from '../../../../common/components/header_actions/header_actions';
+import { defaultUdtHeaders } from '../unified_components/default_headers';
 const QueryTabHeaderContainer = styled.div`
   width: 100%;
 `;
@@ -265,14 +267,19 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     type: columnType,
   }));
 
+  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+    'unifiedComponentsInTimelineEnabled'
+  );
+
   useEffect(() => {
     dispatch(
       timelineActions.initializeTimelineSettings({
         filterManager,
         id: timelineId,
+        defaultColumns: useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders,
       })
     );
-  }, [dispatch, filterManager, timelineId]);
+  }, [dispatch, filterManager, timelineId, useDiscoverComponentsInTimeline]);
 
   const [
     isQueryLoading,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx
index c1816c047e985f..19df23c66d22a4 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx
@@ -5,11 +5,7 @@
  * 2.0.
  */
 
-import {
-  EuiFlexItem,
-  EuiFlyoutHeader,
-  EuiBadge,
-} from '@elastic/eui';
+import { EuiFlexItem, EuiFlyoutHeader, EuiBadge } from '@elastic/eui';
 import { isEmpty } from 'lodash/fp';
 import React, { useMemo, useEffect, useCallback, useState } from 'react';
 import styled from 'styled-components';
@@ -22,10 +18,10 @@ import { FilterManager } from '@kbn/data-plugin/public';
 import { getEsQueryConfig } from '@kbn/data-plugin/common';
 import { DataLoadingState } from '@kbn/unified-data-table';
 import { RootDragDropProvider } from '@kbn/dom-drag-drop';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { InputsModelId } from '../../../../common/store/inputs/constants';
 import { useInvalidFilterQuery } from '../../../../common/hooks/use_invalid_filter_query';
 import { timelineActions, timelineSelectors } from '../../../store';
-import type { CellValueElementProps } from '../cell_rendering';
 import type { Direction, TimelineItem } from '../../../../../common/search_strategy';
 import { useTimelineEvents } from '../../../containers';
 import { useKibana } from '../../../../common/lib/kibana';
@@ -51,6 +47,7 @@ import { useLicense } from '../../../../common/hooks/use_license';
 import { UnifiedTimelineComponent } from '../unified_components';
 import { defaultUdtHeaders } from '../unified_components/default_headers';
 import { StyledTableFlexGroup, StyledTableFlexItem } from '../unified_components/styles';
+import { defaultHeaders } from '../body/column_headers/default_headers';
 
 const TimelineHeaderContainer = styled.div`
   margin-top: 6px;
@@ -69,10 +66,6 @@ const StyledEuiFlyoutHeader = styled(EuiFlyoutHeader)`
   flex-direction: column;
 `;
 
-
-
-
-
 const SourcererFlex = styled(EuiFlexItem)`
   align-items: flex-end;
 `;
@@ -102,15 +95,12 @@ const compareQueryProps = (prevProps: Props, nextProps: Props) =>
   deepEqual(prevProps.filters, nextProps.filters);
 
 interface OwnProps {
-  renderCellValue: (props: CellValueElementProps) => React.ReactNode;
   rowRenderers: RowRenderer[];
   timelineId: string;
 }
 
-
 export type Props = OwnProps & PropsFromRedux;
 
-
 export const NewQueryTabContentComponent: React.FC<Props> = ({
   activeTab,
   columns,
@@ -228,14 +218,19 @@ export const NewQueryTabContentComponent: React.FC<Props> = ({
     type: columnType,
   }));
 
+  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+    'unifiedComponentsInTimelineEnabled'
+  );
+
   useEffect(() => {
     dispatch(
       timelineActions.initializeTimelineSettings({
         filterManager,
         id: timelineId,
+        defaultColumns: useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders,
       })
     );
-  }, [dispatch, filterManager, timelineId]);
+  }, [dispatch, filterManager, timelineId, useDiscoverComponentsInTimeline]);
 
   const [
     dataLoadingState,
@@ -274,7 +269,6 @@ export const NewQueryTabContentComponent: React.FC<Props> = ({
     });
   }, [events, pageInfo.activePage]);
 
-
   useEffect(() => {
     dispatch(
       timelineActions.updateIsLoading({
@@ -284,7 +278,6 @@ export const NewQueryTabContentComponent: React.FC<Props> = ({
     );
   }, [isSourcererLoading, timelineId, dispatch, dataLoadingState, isQueryLoading]);
 
-
   const header = useMemo(
     () => (
       <StyledEuiFlyoutHeader data-test-subj={`${activeTab}-tab-flyout-header`} hasBorder={false}>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index 959c7db3df87e5..b23722fc322fa8 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { type EuiDataGridControlColumn, type EuiDataGridCustomBodyProps } from '@elastic/eui';
 import React, { memo, useMemo, useCallback, useState, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -19,13 +18,11 @@ import type { SortOrder } from '@kbn/saved-search-plugin/public';
 import { popularizeField } from '@kbn/unified-data-table/src/utils/popularize_field';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import type { DataView } from '@kbn/data-views-plugin/public';
-import { AvailableRowRendererCount } from '../../../../../../common/api/timeline';
 import { getAllFieldsByName } from '../../../../../common/containers/source';
 import { StatefulEventContext } from '../../../../../common/components/events_viewer/stateful_event_context';
 import type { ExpandedDetailTimeline, ExpandedDetailType } from '../../../../../../common/types';
 import type { TimelineItem } from '../../../../../../common/search_strategy';
 import { useKibana } from '../../../../../common/lib/kibana';
-import { defaultHeaders } from '../../body/column_headers/default_headers';
 import type {
   ColumnHeaderOptions,
   OnChangePage,
@@ -45,11 +42,10 @@ import { getFormattedFields } from '../../body/renderers/get_formatted_fields';
 import { timelineBodySelector } from '../../body/selectors';
 import ToolbarAdditionalControls from './toolbar_additional_controls';
 import { StyledTimelineUnifiedDataTable, StyledEuiProgress } from '../styles';
-import CustomGridBodyControls from './render_custom_body';
 import { timelineDefaults } from '../../../../store/defaults';
 import { timelineActions } from '../../../../store';
-import { useControlColumns } from './use_control_columns';
 import { useGetScopedSourcererDataView } from '../../../../../common/components/sourcerer/get_sourcerer_data_view';
+import { defaultUdtHeaders } from '../default_headers';
 
 export const SAMPLE_SIZE_SETTING = 500;
 const DataGridMemoized = React.memo(UnifiedDataTable);
@@ -146,6 +142,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
         columns: columnSettings,
       };
     }, [columns]);
+
     const defaultColumnIds = useMemo(() => columns.map((c) => c.id), [columns]);
 
     // const [notesMap, setNotesMap] = useState<NotesMap>({});
@@ -210,48 +207,6 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       [events, dataView]
     );
 
-    // /////////// ROW RENDERERS START ///////////////
-
-    const enabledRowRenderers = useMemo(() => {
-      if (!excludedRowRendererIds) return rowRenderers;
-      if (excludedRowRendererIds.length === AvailableRowRendererCount) {
-        return [];
-      }
-
-      return rowRenderers.filter((rowRenderer) => !excludedRowRendererIds.includes(rowRenderer.id));
-    }, [excludedRowRendererIds, rowRenderers]);
-
-    const getRowRendererBody = useCallback(
-      ({
-        Cell,
-        visibleRowData,
-        visibleColumns,
-        setCustomGridBodyProps,
-      }: EuiDataGridCustomBodyProps) => (
-        <CustomGridBodyControls
-          unifiedDataTableRows={tableRows}
-          Cell={Cell}
-          visibleColumns={visibleColumns}
-          visibleRowData={visibleRowData}
-          setCustomGridBodyProps={setCustomGridBodyProps}
-          enabledRowRenderers={enabledRowRenderers}
-          timelineId={timelineId}
-        />
-      ),
-      [tableRows, enabledRowRenderers, timelineId]
-    );
-
-    const { leadingControlColumns, expandedRowTrailingColumns } = useControlColumns({
-      enabledRowRenderers,
-      expandedDoc,
-      gridRows: tableRows,
-      refetch,
-      timelineId,
-      trGroupRef,
-    });
-
-    // ////////////// START FLYOUT DETAILS ////////////////
-
     const handleOnEventDetailPanelOpened = useCallback(
       (eventData: DataTableRecord & TimelineItem) => {
         const updatedExpandedDetail: ExpandedDetailType = {
@@ -339,7 +294,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
           onSort(newState.sort);
         } else {
           const columnsStates = newState.columns.map((columnId) =>
-            getUnifiedDataTableColumnHeader(columnId, defaultHeaders)
+            getUnifiedDataTableColumnHeader(columnId, defaultUdtHeaders)
           );
           dispatch(timelineActions.updateColumns({ id: timelineId, columns: columnsStates }));
         }
@@ -470,6 +425,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
             columns={defaultColumnIds}
             expandedDoc={expandedDoc}
             dataView={dataView}
+            showColumnTokens={true}
             loadingState={dataLoadingState}
             onFilter={onAddFilter as DocViewFilterFn}
             onResize={onResizeDataGrid}
@@ -494,10 +450,6 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
             visibleCellActions={3}
             externalCustomRenderers={customColumnRenderers}
             renderDocumentView={() => <></>}
-            externalControlColumns={leadingControlColumns as unknown as EuiDataGridControlColumn[]}
-            externalAdditionalControls={additionalControls}
-            trailingControlColumns={expandedRowTrailingColumns}
-            renderCustomGridBody={getRowRendererBody}
             rowsPerPageOptions={itemsPerPageOptions}
             showFullScreenButton={false}
             useNewFieldsApi={true}
@@ -508,6 +460,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
             configRowHeight={3}
             showMultiFields={true}
             cellActionsMetadata={cellActionsMetadata}
+            externalAdditionalControls={additionalControls}
           />
           {showExpandedDetails && (
             <DetailsPanel
@@ -535,4 +488,4 @@ export const TimelineDataTable: React.FC<CommonDataTableProps> = memo((props) =>
 });
 
 // eslint-disable-next-line import/no-default-export
-export default TimelineDataTable;
+export { TimelineDataTable as default };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/render_custom_body.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/render_custom_body.tsx
deleted file mode 100644
index c6e05cf3403cc7..00000000000000
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/render_custom_body.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-import type { EuiDataGridCustomBodyProps } from '@elastic/eui';
-import { EuiFlexItem } from '@elastic/eui';
-import React, { memo, useMemo } from 'react';
-import { css } from '@emotion/react';
-
-import type { DataTableRecord } from '@kbn/discover-utils/types';
-import { useSelector } from 'react-redux';
-import type { State } from '../../../../../common/store';
-import type { RowRenderer, NotesMap } from '../../../../../../common/types/timeline';
-import { timelineBodySelector } from '../../body/selectors';
-import { StatefulRowRenderer } from '../../body/events/stateful_row_renderer';
-import { EventsTrSupplement } from '../../styles';
-import { formatAlertToEcsSignal } from '../../../../../common/utils/alerts';
-import { timelineDefaults } from '../../../../store/defaults';
-
-interface Props {
-  unifiedDataTableRows: DataTableRecord[];
-  timelineId: string;
-  enabledRowRenderers: RowRenderer[];
-}
-
-interface ExpandedRowProps {
-  ariaRowIndex: number;
-  containerRef: React.MutableRefObject<HTMLDivElement | null>;
-  event: DataTableRecord;
-  lastFocusedAriaColIndex: number;
-  rowRenderers: RowRenderer[];
-  timelineId: string;
-}
-
-const ExpandedRow: React.FC<ExpandedRowProps> = memo(
-  ({ ariaRowIndex, containerRef, event, lastFocusedAriaColIndex, rowRenderers, timelineId }) => {
-    const esHitToTimelineEvent = useMemo(() => {
-      const docFieldsToTimelineItem = event.raw.fields
-        ? Object.entries(event.raw.fields).map(([field, value]) => ({
-            field,
-            value,
-          }))
-        : [];
-      return {
-        ecs: formatAlertToEcsSignal(event.flattened),
-        data: docFieldsToTimelineItem,
-        _id: event.id,
-      };
-    }, [event]);
-    return (
-      <EuiFlexItem grow={false}>
-        <EventsTrSupplement>
-          <StatefulRowRenderer
-            ariaRowindex={ariaRowIndex}
-            containerRef={containerRef}
-            event={esHitToTimelineEvent}
-            lastFocusedAriaColindex={lastFocusedAriaColIndex}
-            rowRenderers={rowRenderers}
-            timelineId={timelineId}
-          />
-        </EventsTrSupplement>
-      </EuiFlexItem>
-    );
-  }
-);
-
-ExpandedRow.displayName = 'ExpandedRow';
-
-interface CellProps {
-  row: DataTableRecord;
-  rowIndex: number;
-  enabledRowRenderers: RowRenderer[];
-  notesMap: NotesMap;
-  eventIdToNoteIds: Record<string, string[]>;
-  Cell: EuiDataGridCustomBodyProps['Cell'];
-  visibleCols: EuiDataGridCustomBodyProps['visibleColumns'];
-}
-
-const UnifiedCell: React.FC<CellProps> = memo(
-  ({ row, rowIndex, visibleCols, Cell, notesMap, enabledRowRenderers, eventIdToNoteIds }) => {
-    return (
-      <div
-        role="row"
-        className="euiDataGridRow"
-        css={css`
-          width: fit-content;
-          left: 0px;
-          right: 0px;
-        `}
-        key={row.id}
-      >
-        <div
-          className="rowCellWrapper"
-          css={css`
-            display: flex;
-          `}
-        >
-          {visibleCols.map((column, colIndex) => {
-            // actions cells
-            if (
-              column.id.includes('timeline') ||
-              column.id === 'openDetails' ||
-              column.id === 'select'
-            ) {
-              return (
-                <Cell
-                  colIndex={colIndex}
-                  visibleRowIndex={rowIndex}
-                  key={`${rowIndex},${colIndex}`}
-                />
-              );
-            }
-            // Render the rest of the cells normally
-            if (column.id !== 'row-details') {
-              // TODO: using renderCellValue to render the draggable cell. We need to fix the styling though
-              return (
-                <Cell
-                  colIndex={colIndex}
-                  visibleRowIndex={rowIndex}
-                  key={`${rowIndex},${colIndex}`}
-                />
-              );
-            }
-            return null;
-          })}
-        </div>
-        {/* {enabledRowRenderers.length > 0 ? (
-          <ExpandedRow
-            ariaRowIndex={rowIndex}
-            containerRef={null}
-            event={row}
-            rowRenderers={enabledRowRenderers}
-            timelineId={'timeline-1'}
-          />
-        ) : null} */}
-        {/* This renders the last row which is our expandableRow and where we put row rendering and notes */}
-        {enabledRowRenderers.length > 0 ||
-        (notesMap && notesMap[row.id] && notesMap[row.id].isAddingNote === true) ||
-        eventIdToNoteIds[row.id] ? (
-          <Cell
-            colIndex={visibleCols.length - 1} // If the row is being shown, it should always be the last index
-            visibleRowIndex={rowIndex}
-          />
-        ) : null}
-      </div>
-    );
-  }
-);
-
-UnifiedCell.displayName = 'UnifiedCell';
-
-export const RenderCustomGridBodyComponent: React.FC<Props & EuiDataGridCustomBodyProps> = ({
-  unifiedDataTableRows,
-  visibleRowData,
-  visibleColumns: visibleCols,
-  Cell,
-  enabledRowRenderers,
-  timelineId,
-}) => {
-  // Ensure we're displaying correctly-paginated rows
-  const visibleRows = unifiedDataTableRows.slice(visibleRowData.startRow, visibleRowData.endRow);
-
-  const { timeline: { eventIdToNoteIds, notesMap } = timelineDefaults } = useSelector(
-    (state: State) => timelineBodySelector(state, timelineId)
-  );
-
-  return (
-    <>
-      {visibleRows.map((row, rowIndex) => {
-        return (
-          <UnifiedCell
-            row={row}
-            rowIndex={rowIndex}
-            key={row.id}
-            notesMap={notesMap}
-            enabledRowRenderers={enabledRowRenderers}
-            visibleCols={visibleCols}
-            eventIdToNoteIds={eventIdToNoteIds}
-            Cell={Cell}
-          />
-        );
-      })}
-    </>
-  );
-};
-
-export const CustomGridBodyComponent = React.memo(RenderCustomGridBodyComponent);
-// eslint-disable-next-line import/no-default-export
-export { CustomGridBodyComponent as default };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/row_details.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/row_details.tsx
deleted file mode 100644
index 47f4f3fc664f36..00000000000000
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/row_details.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-import React, { useMemo, useCallback, useRef, memo, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import type { EuiDataGridSetCellProps } from '@elastic/eui';
-import type { TimelineItem } from '../../../../../../common/search_strategy';
-import type { State } from '../../../../../common/store';
-import type { RowRenderer } from '../../../../../../common/types/timeline';
-import { appSelectors } from '../../../../../common/store';
-import { useDeepEqualSelector } from '../../../../../common/hooks/use_selector';
-import { EventsTrSupplement } from '../../styles';
-import { NoteCards } from '../../../notes/note_cards';
-import { eventIsPinned } from '../../body/helpers';
-import type { TimelineResultNote } from '../../../open_timeline/types';
-import { timelineBodySelector } from '../../body/selectors';
-import { StatefulRowRenderer } from '../../body/events/stateful_row_renderer';
-import { timelineDefaults } from '../../../../store/defaults';
-import { timelineActions, timelineSelectors } from '../../../../store';
-
-/** This offset begins at two, because the header row counts as "row 1", and aria-rowindex starts at "1" */
-const ARIA_ROW_INDEX_OFFSET = 2;
-
-interface Props {
-  rowIndex: number;
-  event: TimelineItem;
-  setCellProps?: (props: EuiDataGridSetCellProps) => void;
-  timelineId: string;
-  enabledRowRenderers: RowRenderer[];
-}
-
-export const RowDetailsComponent: React.FC<Props> = memo(
-  ({ rowIndex, event, setCellProps, timelineId, enabledRowRenderers }) => {
-    const dispatch = useDispatch();
-    const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
-    const timeline = useDeepEqualSelector((state) =>
-      timelineId ? getTimeline(state, timelineId) : null
-    );
-
-    const onToggleShowNotes = useCallback(() => {
-      const row = timeline?.notesMap[event._id];
-      if (row?.isAddingNote !== false) {
-        dispatch(
-          timelineActions.setNotesMap({
-            id: timelineId,
-            notesMap: {
-              ...timeline?.notesMap,
-              [event._id]: { ...row, isAddingNote: false },
-            },
-          })
-        );
-      }
-    }, [event._id, dispatch, timeline?.notesMap, timelineId]);
-
-    useEffect(() => {
-      if (setCellProps) {
-        setCellProps({ style: { width: '100%', height: 'auto' } });
-      }
-    }, [setCellProps]);
-
-    const { timeline: { eventIdToNoteIds, pinnedEventIds } = timelineDefaults } = useSelector(
-      (state: State) => timelineBodySelector(state, timelineId)
-    );
-
-    const associateNote = useCallback(
-      (noteId: string, eventId: string) => {
-        dispatch(timelineActions.addNoteToEvent({ eventId, id: timelineId, noteId }));
-        const isEventPinned = eventIsPinned({
-          eventId,
-          pinnedEventIds,
-        });
-        if (!isEventPinned) {
-          dispatch(timelineActions.pinEvent({ id: timelineId, eventId: event._id }));
-        }
-      },
-      [dispatch, event._id, pinnedEventIds, timelineId]
-    );
-
-    const getNotesByIds = useMemo(() => appSelectors.notesByIdsSelector(), []);
-    const notesById = useDeepEqualSelector(getNotesByIds);
-    const getNotes = useCallback(
-      (eventId: string) => {
-        const noteIds: string[] = eventIdToNoteIds[eventId] || [];
-        return appSelectors.getNotes(notesById, noteIds).map((note) => ({
-          savedObjectId: note.saveObjectId,
-          note: note.note,
-          noteId: note.id,
-          updated: (note.lastEdit ?? note.created).getTime(),
-          updatedBy: note.user,
-        })) as unknown as TimelineResultNote[];
-      },
-      [eventIdToNoteIds, notesById]
-    );
-
-    const showAddNote = useMemo(() => {
-      return (timeline?.notesMap && timeline?.notesMap[event._id]?.isAddingNote) ?? false;
-    }, [event._id, timeline?.notesMap]);
-
-    const containerRef = useRef<HTMLDivElement | null>(null);
-    // notes here
-    // console.log(eventIdToNoteIds, notesById, getNotes(event._id), notesMap);
-    // The custom row details is actually a trailing control column cell with
-    // a hidden header. This is important for accessibility and markup reasons
-    // @see https://fuschia-stretch.glitch.me/ for more
-    return (
-      <>
-        <EventsTrSupplement
-          className="siemEventsTable__trSupplement--notes"
-          data-test-subj="event-notes-flex-item"
-          $display="block"
-        >
-          <NoteCards
-            ariaRowindex={rowIndex + ARIA_ROW_INDEX_OFFSET}
-            associateNote={(noteId: string) => associateNote(noteId, event._id)}
-            data-test-subj="note-cards"
-            notes={getNotes(event._id)}
-            showAddNote={showAddNote}
-            toggleShowAddNote={() => onToggleShowNotes()}
-            eventIdToNoteIds={eventIdToNoteIds}
-            timelineId={timelineId}
-          />
-        </EventsTrSupplement>
-        {enabledRowRenderers.length > 0 ? (
-          <EuiFlexGroup gutterSize="none" justifyContent="center">
-            <EuiFlexItem grow={false}>
-              <EventsTrSupplement>
-                <StatefulRowRenderer
-                  ariaRowindex={rowIndex + ARIA_ROW_INDEX_OFFSET}
-                  containerRef={containerRef}
-                  event={event}
-                  lastFocusedAriaColindex={rowIndex - 1}
-                  rowRenderers={enabledRowRenderers}
-                  timelineId={timelineId}
-                />
-              </EventsTrSupplement>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        ) : null}
-      </>
-    );
-  }
-);
-RowDetailsComponent.displayName = 'RowDetailsComponent';
-
-export const RowDetails = React.memo(RowDetailsComponent);
-// eslint-disable-next-line import/no-default-export
-export { RowDetails as default };
\ No newline at end of file
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/use_control_columns.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/use_control_columns.tsx
deleted file mode 100644
index 291266f5f33d40..00000000000000
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/use_control_columns.tsx
+++ /dev/null
@@ -1,198 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React, { useCallback, useMemo } from 'react';
-import type { DataTableRecord } from '@kbn/discover-utils/types';
-import { useDispatch, useSelector } from 'react-redux';
-import { type EuiDataGridCellValueElementProps, type EuiDataGridProps } from '@elastic/eui';
-import type { State, inputsModel } from '../../../../../common/store';
-import type {
-  RowRenderer,
-  SetEventsDeleted,
-  SetEventsLoading,
-} from '../../../../../../common/types';
-import type { TimelineItem } from '../../../../../../common/search_strategy';
-import { timelineBodySelector } from '../../body/selectors';
-import { timelineActions } from '../../../../store';
-import { useLicense } from '../../../../../common/hooks/use_license';
-import { Actions } from '../../../../../common/components/header_actions/actions';
-import { getDefaultControlColumn } from '../../body/control_columns';
-import { eventIsPinned } from '../../body/helpers';
-import { NOTES_BUTTON_CLASS_NAME } from '../../properties/helpers';
-import { timelineDefaults } from '../../../../store/defaults';
-import RowDetails from './row_details';
-
-export interface UseControlColumns {
-  enabledRowRenderers: RowRenderer[];
-  expandedDoc: (DataTableRecord & TimelineItem) | undefined;
-  gridRows: Array<DataTableRecord & TimelineItem>;
-  refetch: inputsModel.Refetch;
-  timelineId: string;
-  trGroupRef: React.MutableRefObject<HTMLDivElement | null>;
-}
-
-export const useControlColumns = ({
-  enabledRowRenderers,
-  expandedDoc,
-  gridRows,
-  refetch,
-  timelineId,
-  trGroupRef,
-}: UseControlColumns) => {
-  const dispatch = useDispatch();
-  const isEnterprisePlus = useLicense().isEnterprise();
-  const ACTION_BUTTON_COUNT = isEnterprisePlus ? 6 : 5;
-
-  const {
-    timeline: {
-      eventIdToNoteIds,
-      loadingEventIds,
-      selectedEventIds,
-      pinnedEventIds,
-      notesMap,
-    } = timelineDefaults,
-  } = useSelector((state: State) => timelineBodySelector(state, timelineId));
-
-  const setEventsLoading = useCallback<SetEventsLoading>(
-    ({ eventIds, isLoading }) => {
-      dispatch(timelineActions.setEventsLoading({ id: timelineId, eventIds, isLoading }));
-    },
-    [dispatch, timelineId]
-  );
-
-  const setEventsDeleted = useCallback<SetEventsDeleted>(
-    ({ eventIds, isDeleted }) => {
-      dispatch(timelineActions.setEventsDeleted({ id: timelineId, eventIds, isDeleted }));
-    },
-    [dispatch, timelineId]
-  );
-
-  const toggleShowNotesEvent = useCallback(
-    (eventId: string) => {
-      const row = notesMap[eventId];
-      if (row?.isAddingNote !== true) {
-        dispatch(
-          timelineActions.setNotesMap({
-            id: timelineId,
-            notesMap: {
-              ...notesMap,
-              [eventId]: { ...row, isAddingNote: true },
-            },
-          })
-        );
-        setTimeout(() => {
-          const notesButtonElement = trGroupRef.current?.querySelector<HTMLButtonElement>(
-            `.${NOTES_BUTTON_CLASS_NAME}`
-          );
-          notesButtonElement?.focus();
-        }, 0);
-      }
-    },
-    [notesMap, dispatch, timelineId]
-  );
-
-  const leadingControlColumns = useMemo(() => {
-    return getDefaultControlColumn(ACTION_BUTTON_COUNT).map((column) => {
-      return {
-        ...column,
-        headerCellProps: {
-          ...column.headerCellProps,
-        },
-        rowCellRender: ({
-          columnId,
-          colIndex,
-          rowIndex,
-          setCellProps,
-        }: EuiDataGridCellValueElementProps) => {
-          const { id, ecs, data } = gridRows[rowIndex];
-          const toggleNotes = () => toggleShowNotesEvent(id);
-
-          return (
-            <Actions
-              ariaRowindex={rowIndex}
-              columnId={columnId}
-              data={data}
-              index={colIndex}
-              rowIndex={rowIndex}
-              setEventsDeleted={setEventsDeleted}
-              checked={Object.keys(selectedEventIds).includes(id)}
-              isEventPinned={eventIsPinned({
-                eventId: id,
-                pinnedEventIds,
-              })}
-              columnValues={column.columnValues ?? ''}
-              ecsData={ecs}
-              eventId={id}
-              expandedDoc={expandedDoc}
-              setCellProps={setCellProps}
-              eventIdToNoteIds={eventIdToNoteIds}
-              loadingEventIds={loadingEventIds}
-              onRowSelected={column.onRowSelected ? column.onRowSelected : () => {}}
-              showCheckboxes={column.showCheckboxes ?? false}
-              // showNotes={showNotes[id]}
-              timelineId={timelineId}
-              toggleShowNotes={toggleNotes}
-              refetch={refetch}
-              setEventsLoading={setEventsLoading}
-              isUnifiedDataTable={true}
-              onEventDetailsPanelOpened={() => {}}
-            />
-          );
-        },
-        headerCellRender: () => <></>,
-      };
-    });
-  }, [
-    ACTION_BUTTON_COUNT,
-    gridRows,
-    setEventsDeleted,
-    selectedEventIds,
-    pinnedEventIds,
-    eventIdToNoteIds,
-    loadingEventIds,
-    timelineId,
-    refetch,
-    setEventsLoading,
-    expandedDoc,
-    toggleShowNotesEvent,
-  ]);
-
-  // The custom row details is actually a trailing control column cell with
-  // a hidden header. This is important for accessibility and markup reasons
-  // @see https://fuschia-stretch.glitch.me/ for more
-  const expandedRowTrailingColumns: EuiDataGridProps['trailingControlColumns'] = useMemo(
-    () => [
-      {
-        id: 'timeline-unified-data-table-expanded-row',
-        width: 0, // The header cell should be visually hidden, but available to screen readers
-        headerCellRender: () => <></>,
-        headerCellProps: { className: 'euiScreenReaderOnly' },
-        // The footer cell can be hidden to both visual & SR users, as it does not contain meaningful information
-        footerCellProps: { style: { display: 'none' } },
-        // When rendering this custom cell, we'll want to override
-        // the automatic width/heights calculated by EuiDataGrid
-        rowCellRender: ({ setCellProps, rowIndex }) => {
-          return (
-            <RowDetails
-              event={gridRows[rowIndex]}
-              rowIndex={rowIndex}
-              setCellProps={setCellProps}
-              timelineId={timelineId}
-              enabledRowRenderers={enabledRowRenderers}
-            />
-          );
-        },
-      },
-    ],
-    [gridRows, timelineId, enabledRowRenderers]
-  );
-
-  return useMemo(
-    () => ({ leadingControlColumns, expandedRowTrailingColumns }),
-    [leadingControlColumns, expandedRowTrailingColumns]
-  );
-};
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/default_headers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/default_headers.tsx
index 39d96292c4dcbd..b8e7e3fbd630f0 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/default_headers.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/default_headers.tsx
@@ -47,4 +47,4 @@ export const defaultUdtHeaders: ColumnHeaderOptions[] = [
     columnHeaderType: defaultColumnHeaderType,
     id: 'user.name',
   },
-];
\ No newline at end of file
+];
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/get_fields_list_creation_options.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/get_fields_list_creation_options.ts
index 3fc8f888c2d56f..012a1693ec9a7e 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/get_fields_list_creation_options.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/get_fields_list_creation_options.ts
@@ -1,9 +1,17 @@
-import { i18n } from "@kbn/i18n";
-import  { FieldsGroupNames } from "@kbn/unified-field-list";
-import type { UnifiedFieldListSidebarContainerProps } from "@kbn/unified-field-list";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { FieldsGroupNames } from '@kbn/unified-field-list';
+import type { UnifiedFieldListSidebarContainerProps } from '@kbn/unified-field-list';
 
 // This is passed to the unified components container to initialize the field list on the left side of the view
-export const getFieldsListCreationOptions: UnifiedFieldListSidebarContainerProps['getCreationOptions'] = () => {
+export const getFieldsListCreationOptions: UnifiedFieldListSidebarContainerProps['getCreationOptions'] =
+  () => {
     return {
       originatingApp: 'security_solution',
       localStorageKeyPrefix: 'securitySolution',
@@ -40,4 +48,3 @@ export const getFieldsListCreationOptions: UnifiedFieldListSidebarContainerProps
       },
     };
   };
-  
\ No newline at end of file
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
index 706ceaa5b9eb73..6b3e059842595f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
@@ -81,7 +81,7 @@ const SidebarPanelFlexGroup = styled(EuiFlexGroup)`
 
     .unifiedFieldListSidebar__group {
       .euiFlexItem:last-child {
-        padding-right: ${(props) => (props.theme as EuiTheme).eui.euiSizeS};
+        /* padding-right: ${(props) => (props.theme as EuiTheme).eui.euiSizeS}; */
       }
       .unifiedFieldListSidebar__list {
         padding-left: 0px;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/styles.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/styles.tsx
index 0353daaac84462..279284bf004a46 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/styles.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/styles.tsx
@@ -145,4 +145,4 @@ export const StyledTimelineUnifiedDataTable = styled.div.attrs(({ className = ''
   .udtTimeline .euiDataGrid__rightControls {
     padding-right: 30px;
   }
-`;
\ No newline at end of file
+`;
diff --git a/x-pack/plugins/security_solution/public/timelines/containers/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/containers/index.test.tsx
index 13189f4ed77e65..55c55d4b27dc73 100644
--- a/x-pack/plugins/security_solution/public/timelines/containers/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/containers/index.test.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import type { DataLoadingState } from '@kbn/unified-data-table';
 import { renderHook, act } from '@testing-library/react-hooks';
 import type { TimelineArgs, UseTimelineEventsProps } from '.';
 import { initSortDefault, useTimelineEvents } from '.';
@@ -125,7 +126,7 @@ describe('useTimelineEvents', () => {
     await act(async () => {
       const { result, waitForNextUpdate } = renderHook<
         UseTimelineEventsProps,
-        [boolean, TimelineArgs]
+        [DataLoadingState, TimelineArgs]
       >((args) => useTimelineEvents(args), {
         initialProps: { ...props },
       });
@@ -152,7 +153,7 @@ describe('useTimelineEvents', () => {
     await act(async () => {
       const { result, waitForNextUpdate, rerender } = renderHook<
         UseTimelineEventsProps,
-        [boolean, TimelineArgs]
+        [DataLoadingState, TimelineArgs]
       >((args) => useTimelineEvents(args), {
         initialProps: { ...props },
       });
@@ -184,7 +185,7 @@ describe('useTimelineEvents', () => {
     await act(async () => {
       const { result, waitForNextUpdate, rerender } = renderHook<
         UseTimelineEventsProps,
-        [boolean, TimelineArgs]
+        [DataLoadingState, TimelineArgs]
       >((args) => useTimelineEvents(args), {
         initialProps: { ...props },
       });
@@ -227,7 +228,7 @@ describe('useTimelineEvents', () => {
     await act(async () => {
       const { result, waitForNextUpdate, rerender } = renderHook<
         UseTimelineEventsProps,
-        [boolean, TimelineArgs]
+        [DataLoadingState, TimelineArgs]
       >((args) => useTimelineEvents(args), {
         initialProps: {
           ...props,
diff --git a/x-pack/plugins/security_solution/public/timelines/hooks/use_create_timeline.tsx b/x-pack/plugins/security_solution/public/timelines/hooks/use_create_timeline.tsx
index 89e5d74ead7691..452582d540c7af 100644
--- a/x-pack/plugins/security_solution/public/timelines/hooks/use_create_timeline.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/hooks/use_create_timeline.tsx
@@ -20,6 +20,8 @@ import { SourcererScopeName } from '../../common/store/sourcerer/model';
 import { appActions } from '../../common/store/app';
 import type { TimeRange } from '../../common/store/inputs/model';
 import { useDiscoverInTimelineContext } from '../../common/components/discover_in_timeline/use_discover_in_timeline_context';
+import { useIsExperimentalFeatureEnabled } from '../../common/hooks/use_experimental_features';
+import { defaultUdtHeaders } from '../components/timeline/unified_components/default_headers';
 
 export interface UseCreateTimelineParams {
   /**
@@ -48,6 +50,9 @@ export const useCreateTimeline = ({
 }: UseCreateTimelineParams): ((options?: { timeRange?: TimeRange }) => void) => {
   const dispatch = useDispatch();
   const defaultDataViewSelector = useMemo(() => sourcererSelectors.defaultDataViewSelector(), []);
+  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+    'unifiedComponentsInTimelineEnabled'
+  );
   const { id: dataViewId, patternList: selectedPatterns } =
     useDeepEqualSelector(defaultDataViewSelector);
 
@@ -72,7 +77,7 @@ export const useCreateTimeline = ({
       );
       dispatch(
         timelineActions.createTimeline({
-          columns: defaultHeaders,
+          columns: useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders,
           dataViewId,
           id,
           indexNames: selectedPatterns,
@@ -113,6 +118,7 @@ export const useCreateTimeline = ({
       setTimelineFullScreen,
       timelineFullScreen,
       timelineType,
+      useDiscoverComponentsInTimeline,
     ]
   );
 
diff --git a/x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts b/x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts
index 2e3376396fb787..2f117f8cbb4e5e 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts
+++ b/x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts
@@ -135,6 +135,7 @@ const basicTimeline: TimelineModel = {
   savedSearchId: null,
   savedSearch: null,
   isDataProviderVisible: true,
+  sampleSize: 500,
 };
 const timelineByIdMock: TimelineById = {
   foo: { ...basicTimeline },
diff --git a/x-pack/plugins/security_solution/public/timelines/store/helpers.ts b/x-pack/plugins/security_solution/public/timelines/store/helpers.ts
index 43196fcbb2237e..720589253be1dd 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/store/helpers.ts
@@ -1456,7 +1456,7 @@ export const setInitializeTimelineSettings = ({
 }: InitializeTimelineParams): TimelineById => {
   const timeline = timelineById[id];
 
-  return !timeline?.initialized
+  const result = !timeline?.initialized
     ? {
         ...timelineById,
         [id]: {
@@ -1480,6 +1480,8 @@ export const setInitializeTimelineSettings = ({
           ...timelineSettingsProps,
         },
       };
+
+  return result;
 };
 
 interface ApplyDeltaToTableColumnWidth {
diff --git a/x-pack/plugins/security_solution/public/timelines/store/middlewares/timeline_save.test.ts b/x-pack/plugins/security_solution/public/timelines/store/middlewares/timeline_save.test.ts
index a74bf55d7ff190..b37222468e3626 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/middlewares/timeline_save.test.ts
+++ b/x-pack/plugins/security_solution/public/timelines/store/middlewares/timeline_save.test.ts
@@ -178,6 +178,7 @@ describe('Timeline Save Middleware', () => {
         savedSearchId: null,
         savedSearch: null,
         isDataProviderVisible: true,
+        sampleSize: 500,
       };
 
       expect(

From 769d5ce2900c4025bb4dee65a56d6615c25ad54b Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Tue, 13 Feb 2024 12:50:14 +0100
Subject: [PATCH 09/65] fix: Field Formatting

---
 .../body/renderers/formatted_field_udt.tsx    |  2 +-
 .../body/renderers/get_formatted_fields.ts    |  4 +-
 .../timeline/query_tab_content/index.tsx      |  8 +++-
 .../timeline/tabs_content/index.tsx           | 11 ++----
 .../unified_components/data_table/index.tsx   |  5 +--
 .../toolbar_additional_controls.tsx           |  3 +-
 .../containers/active_timeline_context.ts     | 39 +++++++++++++++++++
 7 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
index 9c9b13a47860bd..efa454bc409900 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
@@ -449,4 +449,4 @@ const FormattedFieldValueComponent: React.FC<{
   }
 };
 
-export const FormattedFieldValue = React.memo(FormattedFieldValueComponent);
\ No newline at end of file
+export const FormattedFieldValue = React.memo(FormattedFieldValueComponent);
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_fields.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_fields.ts
index a5b954e2654024..bb2b62e2971ff8 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_fields.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_fields.ts
@@ -5,10 +5,8 @@
  * 2.0.
  */
 
-/* eslint-disable complexity */
-
 import type { EuiDataGridCellValueElementProps } from '@elastic/eui';
-import React from 'react';
+import type React from 'react';
 import type { BrowserField, ColumnHeaderOptions, TimelineItem } from '@kbn/timelines-plugin/common';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
index bb4b2acc510270..9484f08b32229c 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
@@ -24,6 +24,7 @@ import { InPortal } from 'react-reverse-portal';
 
 import { FilterManager } from '@kbn/data-plugin/public';
 import { getEsQueryConfig } from '@kbn/data-plugin/common';
+import { DataLoadingState } from '@kbn/unified-data-table';
 import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import type { ControlColumnProps } from '../../../../../common/types';
 import { InputsModelId } from '../../../../common/store/inputs/constants';
@@ -282,7 +283,7 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   }, [dispatch, filterManager, timelineId, useDiscoverComponentsInTimeline]);
 
   const [
-    isQueryLoading,
+    queryLoadingState,
     { events, inspect, totalCount, pageInfo, loadPage, refreshedAt, refetch },
   ] = useTimelineEvents({
     dataViewId,
@@ -300,6 +301,11 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     timerangeKind,
   });
 
+  const isQueryLoading = useMemo(
+    () => [DataLoadingState.loading, DataLoadingState.loadingMore].includes(queryLoadingState),
+    [queryLoadingState]
+  );
+
   const handleOnPanelClosed = useCallback(() => {
     onEventClosed({ tabType: TimelineTabs.query, id: timelineId });
   }, [onEventClosed, timelineId]);
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
index 245435827c0496..66ff421b1e40ec 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
@@ -139,7 +139,7 @@ const ActiveTimelineTab = memo<ActiveTimelineTabProps>(
     const { hasAssistantPrivilege } = useAssistantAvailability();
     const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
       'unifiedComponentsInTimelineEnabled'
-    );  
+    );
     const isEsqlSettingEnabled = useKibana().services.configSettings.ESQLEnabled;
     const getTab = useCallback(
       (tab: TimelineTabs) => {
@@ -192,11 +192,7 @@ const ActiveTimelineTab = memo<ActiveTimelineTabProps>(
             $isVisible={TimelineTabs.queryNew === activeTimelineTab}
             data-test-subj={`timeline-tab-content-${TimelineTabs.queryNew}`}
           >
-            <NewQueryTab
-              renderCellValue={renderCellValue}
-              rowRenderers={rowRenderers}
-              timelineId={timelineId}
-            />
+            <NewQueryTab rowRenderers={rowRenderers} timelineId={timelineId} />
           </HideShowContainer>
         )}
         {showTimeline && isEsqlSettingEnabled && activeTimelineTab === TimelineTabs.esql && (
@@ -309,7 +305,7 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
 }) => {
   const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
     'unifiedComponentsInTimelineEnabled'
-  );  
+  );
   const isEsqlTabInTimelineDisabled = useIsExperimentalFeatureEnabled('timelineEsqlTabDisabled');
   const isEsqlSettingEnabled = useKibana().services.configSettings.ESQLEnabled;
   const { hasAssistantPrivilege } = useAssistantAvailability();
@@ -370,7 +366,6 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
     setActiveTab(TimelineTabs.queryNew);
   }, [setActiveTab]);
 
-
   const setEqlAsActiveTab = useCallback(() => {
     setActiveTab(TimelineTabs.eql);
   }, [setActiveTab]);
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index b23722fc322fa8..97f4634149f328 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -38,7 +38,7 @@ import { activeTimeline } from '../../../../containers/active_timeline_context';
 import { DetailsPanel } from '../../../side_panel';
 import { SecurityCellActionsTrigger } from '../../../../../actions/constants';
 import { getUnifiedDataTableColumnHeader } from '../../body/column_headers/helpers';
-import { getFormattedFields } from '../../body/renderers/get_formatted_fields';
+import { getFormattedFields } from '../../body/renderers/formatted_field_udt';
 import { timelineBodySelector } from '../../body/selectors';
 import ToolbarAdditionalControls from './toolbar_additional_controls';
 import { StyledTimelineUnifiedDataTable, StyledEuiProgress } from '../styles';
@@ -125,7 +125,6 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
     const [expandedDoc, setExpandedDoc] = useState<DataTableRecord & TimelineItem>();
     const [fetchedPage, setFechedPage] = useState<number>(0);
 
-    // const [sampleSize, setSampleSize] = useState<number>(SAMPLE_SIZE_SETTING);
     const { browserFields, runtimeMappings } = useSourcererDataView(SourcererScopeName.timeline);
 
     const showTimeCol = useMemo(() => !!dataView && !!dataView.timeFieldName, [dataView]);
@@ -349,7 +348,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
     const customColumnRenderers = useMemo(
       () =>
         getFormattedFields({
-          unifiedDataTableRows: tableRows,
+          dataTableRows: tableRows,
           scopeId: 'timeline',
           headers: columns,
           browserFieldsByName,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx
index 8f6aef6e5400b7..76cd4231180452 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx
@@ -63,7 +63,6 @@ export const ToolbarAdditionalControlsComponent: React.FC<Props> = ({ timelineId
 
   return (
     <>
-      {' '}
       <StatefulRowRenderersBrowser data-test-subj="row-renderers-browser" timelineId={timelineId} />
       <FixedWidthLastUpdatedContainer updatedAt={updatedAt} />
       <span className="rightPosition">
@@ -96,4 +95,4 @@ export const ToolbarAdditionalControlsComponent: React.FC<Props> = ({ timelineId
 
 export const ToolbarAdditionalControls = React.memo(ToolbarAdditionalControlsComponent);
 // eslint-disable-next-line import/no-default-export
-export { ToolbarAdditionalControls as default };
\ No newline at end of file
+export { ToolbarAdditionalControls as default };
diff --git a/x-pack/plugins/security_solution/public/timelines/containers/active_timeline_context.ts b/x-pack/plugins/security_solution/public/timelines/containers/active_timeline_context.ts
index 350bedb40b196e..383825da330382 100644
--- a/x-pack/plugins/security_solution/public/timelines/containers/active_timeline_context.ts
+++ b/x-pack/plugins/security_solution/public/timelines/containers/active_timeline_context.ts
@@ -9,6 +9,8 @@ import type {
   TimelineEventsAllOptionsInput,
   TimelineEqlRequestOptionsInput,
 } from '@kbn/timelines-plugin/common';
+import type { ExpandedDetailTimeline, ExpandedDetailType } from '../../../common/types';
+import { TimelineTabs } from '../../../common/types/timeline';
 import type { TimelineArgs } from '.';
 
 /*
@@ -24,6 +26,7 @@ import type { TimelineArgs } from '.';
 
 class ActiveTimelineEvents {
   private _activePage: number = 0;
+  private _expandedDetail: ExpandedDetailTimeline = {};
   private _pageName: string = '';
   private _request: TimelineEventsAllOptionsInput | null = null;
   private _response: TimelineArgs | null = null;
@@ -38,6 +41,42 @@ class ActiveTimelineEvents {
     this._activePage = activePage;
   }
 
+  getExpandedDetail() {
+    return this._expandedDetail;
+  }
+
+  toggleExpandedDetail(expandedDetail: ExpandedDetailType) {
+    const queryTab = TimelineTabs.query;
+    const currentExpandedDetail = this._expandedDetail[queryTab];
+    let isSameExpandedDetail;
+
+    // Check if the stored details matches the incoming detail
+    if (currentExpandedDetail?.panelView === 'eventDetail') {
+      isSameExpandedDetail =
+        expandedDetail?.panelView === 'eventDetail' &&
+        expandedDetail?.params?.eventId === currentExpandedDetail?.params?.eventId;
+    } else if (currentExpandedDetail?.panelView === 'hostDetail') {
+      isSameExpandedDetail =
+        expandedDetail?.panelView === 'hostDetail' &&
+        expandedDetail?.params?.hostName === currentExpandedDetail?.params?.hostName;
+    } else if (currentExpandedDetail?.panelView === 'networkDetail') {
+      isSameExpandedDetail =
+        expandedDetail?.panelView === 'networkDetail' &&
+        expandedDetail?.params?.ip === currentExpandedDetail?.params?.ip;
+    }
+
+    // if so, unset it, otherwise set it
+    if (isSameExpandedDetail) {
+      this._expandedDetail = {};
+    } else {
+      this._expandedDetail = { [queryTab]: { ...expandedDetail } };
+    }
+  }
+
+  setExpandedDetail(expandedDetail: ExpandedDetailTimeline) {
+    this._expandedDetail = expandedDetail;
+  }
+
   getPageName() {
     return this._pageName;
   }

From 1a4b9a4457b1b43d1cefdb4dda212554c839a0cc Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Thu, 15 Feb 2024 07:51:59 +0100
Subject: [PATCH 10/65] fix: flyout issues + rename var

---
 .../field_list_sidebar.tsx                    |    1 +
 .../plugins/insight/use_insight_query.ts      |    9 +-
 .../timeline/use_init_timeline_url_param.ts   |    6 +-
 .../use_query_timeline_by_id_on_url_change.ts |    6 +-
 .../common/lib/cell_actions/field_value.tsx   |   28 +-
 .../utils/timeline/use_timeline_click.tsx     |    6 +-
 .../use_investigate_in_timeline.tsx           |    6 +-
 .../rules/use_rule_from_timeline.tsx          |    6 +-
 .../components/recent_timelines/index.tsx     |    6 +-
 .../components/open_timeline/helpers.ts       |   18 +-
 .../components/open_timeline/index.tsx        |    8 +-
 .../body/renderers/get_formatted_fields.ts    |  102 --
 .../timeline/body/unified_timeline_body.tsx   |   91 ++
 .../timelines/components/timeline/index.tsx   |    4 +-
 .../timeline/query_tab_content/index.tsx      |  134 +-
 .../__snapshots__/index.test.tsx.snap         | 1315 -----------------
 .../header/index.test.tsx                     |  174 ---
 .../query_tab_content_new/header/index.tsx    |  115 --
 .../query_tab_content_new/header/selectors.ts |   16 -
 .../header/translations.ts                    |   24 -
 .../query_tab_content_new/index.test.tsx      |  241 ---
 .../timeline/query_tab_content_new/index.tsx  |  448 ------
 .../timeline/tabs_content/index.tsx           |   31 -
 .../unified_components/data_table/index.tsx   |   13 +-
 .../toolbar_additional_controls.tsx           |   25 +-
 .../timeline/unified_components/index.tsx     |    4 +
 .../timelines/hooks/use_create_timeline.tsx   |    6 +-
 27 files changed, 264 insertions(+), 2579 deletions(-)
 delete mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_fields.ts
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx
 delete mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/__snapshots__/index.test.tsx.snap
 delete mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.test.tsx
 delete mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.tsx
 delete mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/selectors.ts
 delete mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/translations.ts
 delete mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.test.tsx
 delete mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx

diff --git a/packages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar.tsx b/packages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar.tsx
index 2147df7af05ac7..ae2e4b44fcb5c3 100644
--- a/packages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar.tsx
+++ b/packages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar.tsx
@@ -345,6 +345,7 @@ export const UnifiedFieldListSidebarComponent: React.FC<UnifiedFieldListSidebarP
     'data-test-subj':
       stateService.creationOptions.dataTestSubj?.fieldListAddFieldButtonTestSubj ??
       'unifiedFieldListAddField',
+    className: 'unifiedFieldListSidebar__addBtn',
   };
   const buttonAddFieldLabel = i18n.translate(
     'unifiedFieldList.fieldListSidebar.addFieldButtonLabel',
diff --git a/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/use_insight_query.ts b/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/use_insight_query.ts
index ee859c70289b30..ffb5abd39d4a53 100644
--- a/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/use_insight_query.ts
+++ b/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/use_insight_query.ts
@@ -9,6 +9,7 @@ import { useMemo, useState } from 'react';
 import type { Filter } from '@kbn/es-query';
 import { getEsQueryConfig } from '@kbn/data-plugin/common';
 import type { DataProvider } from '@kbn/timelines-plugin/common';
+import { DataLoadingState } from '@kbn/unified-data-table';
 import { TimelineId } from '../../../../../../common/types/timeline';
 import { useKibana } from '../../../../lib/kibana';
 import { combineQueries } from '../../../../lib/kuery';
@@ -64,7 +65,7 @@ export const useInsightQuery = ({
     }
   }, [browserFields, dataProviders, esQueryConfig, hasError, indexPattern, filters]);
 
-  const [isQueryLoading, { events, totalCount }] = useTimelineEvents({
+  const [dataLoadingState, { events, totalCount }] = useTimelineEvents({
     dataViewId,
     fields: ['*'],
     filterQuery: combinedQueries?.filterQuery,
@@ -77,6 +78,12 @@ export const useInsightQuery = ({
       ? { startDate: relativeTimerange?.from, endDate: relativeTimerange?.to }
       : {}),
   });
+
+  const isQueryLoading = useMemo(
+    () => [DataLoadingState.loading, DataLoadingState.loadingMore].includes(dataLoadingState),
+    [dataLoadingState]
+  );
+
   const [oldestEvent] = events;
   const timestamp =
     oldestEvent && oldestEvent.data && oldestEvent.data.find((d) => d.field === '@timestamp');
diff --git a/x-pack/plugins/security_solution/public/common/hooks/timeline/use_init_timeline_url_param.ts b/x-pack/plugins/security_solution/public/common/hooks/timeline/use_init_timeline_url_param.ts
index df139a235b8a00..b0d660fbb29b21 100644
--- a/x-pack/plugins/security_solution/public/common/hooks/timeline/use_init_timeline_url_param.ts
+++ b/x-pack/plugins/security_solution/public/common/hooks/timeline/use_init_timeline_url_param.ts
@@ -23,7 +23,7 @@ import { useIsExperimentalFeatureEnabled } from '../use_experimental_features';
 
 export const useInitTimelineFromUrlParam = () => {
   const dispatch = useDispatch();
-  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+  const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
     'unifiedComponentsInTimelineEnabled'
   );
 
@@ -45,11 +45,11 @@ export const useInitTimelineFromUrlParam = () => {
             dispatch(timelineActions.updateIsLoading(status)),
           updateTimeline: dispatchUpdateTimeline(dispatch),
           savedSearchId: initialState.savedSearchId,
-          useDiscoverComponentsInTimeline,
+          unifiedComponentsInTimelineEnabled,
         });
       }
     },
-    [dispatch, useDiscoverComponentsInTimeline, isEsqlTabDisabled]
+    [dispatch, unifiedComponentsInTimelineEnabled, isEsqlTabDisabled]
   );
 
   useEffect(() => {
diff --git a/x-pack/plugins/security_solution/public/common/hooks/timeline/use_query_timeline_by_id_on_url_change.ts b/x-pack/plugins/security_solution/public/common/hooks/timeline/use_query_timeline_by_id_on_url_change.ts
index 94593cbb9b9a70..808ca2dbdd9705 100644
--- a/x-pack/plugins/security_solution/public/common/hooks/timeline/use_query_timeline_by_id_on_url_change.ts
+++ b/x-pack/plugins/security_solution/public/common/hooks/timeline/use_query_timeline_by_id_on_url_change.ts
@@ -47,7 +47,7 @@ export const useQueryTimelineByIdOnUrlChange = () => {
   const timelineIdFromReduxStore = flyoutTimeline?.savedObjectId ?? '';
   const dispatch = useDispatch();
 
-  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+  const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
     'unifiedComponentsInTimelineEnabled'
   );
 
@@ -80,7 +80,7 @@ export const useQueryTimelineByIdOnUrlChange = () => {
         updateIsLoading: (status: { id: string; isLoading: boolean }) =>
           dispatch(timelineActions.updateIsLoading(status)),
         updateTimeline: dispatchUpdateTimeline(dispatch),
-        useDiscoverComponentsInTimeline,
+        unifiedComponentsInTimelineEnabled,
       });
     }
   }, [
@@ -90,7 +90,7 @@ export const useQueryTimelineByIdOnUrlChange = () => {
     newId,
     activeTab,
     graphEventId,
-    useDiscoverComponentsInTimeline,
+    unifiedComponentsInTimelineEnabled,
   ]);
 };
 
diff --git a/x-pack/plugins/security_solution/public/common/lib/cell_actions/field_value.tsx b/x-pack/plugins/security_solution/public/common/lib/cell_actions/field_value.tsx
index 1207d1887756f4..575f46d2c9a436 100644
--- a/x-pack/plugins/security_solution/public/common/lib/cell_actions/field_value.tsx
+++ b/x-pack/plugins/security_solution/public/common/lib/cell_actions/field_value.tsx
@@ -8,9 +8,10 @@
 import type { EuiDataGridColumnCellActionProps } from '@elastic/eui';
 import { head, getOr, get, isEmpty } from 'lodash/fp';
 import React, { useMemo } from 'react';
-import type { BrowserField, TimelineItem } from '@kbn/timelines-plugin/common';
+import type { TimelineItem } from '@kbn/timelines-plugin/common';
 import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
 import { getPageRowIndex } from '@kbn/securitysolution-data-table';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
 import type { ColumnHeaderOptions } from '../../../../common/types';
 import type { TimelineNonEcsData } from '../../../../common/search_strategy';
 import { useGetMappedNonEcsValue } from '../../../timelines/components/timeline/body/data_driven_columns';
@@ -18,7 +19,6 @@ import { FormattedFieldValue } from '../../../timelines/components/timeline/body
 import { parseValue } from '../../../timelines/components/timeline/body/renderers/parse_value';
 import { EmptyComponent, getLinkColumnDefinition } from './helpers';
 import { getField, getFieldKey } from '../../../helpers';
-import { DataTableRecord } from '@kbn/discover-utils/types';
 
 const useFormattedFieldProps = ({
   rowIndex,
@@ -45,7 +45,7 @@ const useFormattedFieldProps = ({
       fieldName: columnId,
     };
   }, [pageRowIndex, columnId, data, unifiedDataTableRow]);
-  const ecs = unifiedDataTableRow ? unifiedDataTableRow.ecs :  ecsData[pageRowIndex];
+  const ecs = unifiedDataTableRow ? unifiedDataTableRow.ecs : ecsData[pageRowIndex];
 
   const link = getLinkColumnDefinition(columnId, header?.type, header?.linkField);
   const linkField = header?.linkField ? header?.linkField : link?.linkField;
@@ -75,7 +75,6 @@ const useFormattedFieldProps = ({
       values,
       title,
       linkValue: head<string>(normalizedLinkValue),
-
     };
   } else {
     return {
@@ -93,10 +92,7 @@ const useFormattedFieldProps = ({
   }
 };
 
-
-
 export const FieldValueCell = ({
-  browserFieldsByName,
   data,
   ecsData,
   header,
@@ -105,7 +101,6 @@ export const FieldValueCell = ({
   closeCellPopover,
   unifiedDataTableRows,
 }: {
-  browserFieldsByName?: { [fieldName: string]: Partial<BrowserField> },
   data: TimelineNonEcsData[][];
   ecsData: Ecs[];
   header?: ColumnHeaderOptions;
@@ -114,13 +109,12 @@ export const FieldValueCell = ({
   closeCellPopover?: () => void;
   unifiedDataTableRows?: Array<DataTableRecord & TimelineItem>;
 }) => {
-  if (header !== undefined || browserFieldsByName) {
+  if (header !== undefined) {
     return function FieldValue({
       rowIndex,
       columnId,
       Component,
     }: EuiDataGridColumnCellActionProps) {
-      let columnHeader = browserFieldsByName ? browserFieldsByName[columnId] : header;
       const unifiedDataTableRow = unifiedDataTableRows ? unifiedDataTableRows[rowIndex] : undefined;
       const {
         pageRowIndex,
@@ -133,7 +127,15 @@ export const FieldValueCell = ({
         fieldFormat,
         fieldType,
         linkValue,
-      } = useFormattedFieldProps({ unifiedDataTableRow, rowIndex, pageSize, ecsData, columnId, header: columnHeader, data });
+      } = useFormattedFieldProps({
+        unifiedDataTableRow,
+        rowIndex,
+        pageSize,
+        ecsData,
+        columnId,
+        header,
+        data,
+      });
 
       const showEmpty = useMemo(() => {
         const hasLink = link !== undefined && values && !isEmpty(value);
@@ -145,7 +147,7 @@ export const FieldValueCell = ({
         } else {
           return hasLink !== true;
         }
-      }, [link, pageRowIndex, value, values]);
+      }, [link, pageRowIndex, value, values, unifiedDataTableRow]);
 
       return showEmpty === false ? (
         <FormattedFieldValue
@@ -153,7 +155,7 @@ export const FieldValueCell = ({
           contextId={`expanded-value-${columnId}-row-${pageRowIndex}-${scopeId}`}
           eventId={eventId}
           fieldFormat={fieldFormat}
-          isAggregatable={columnHeader?.aggregatable ?? false}
+          isAggregatable={header?.aggregatable ?? false}
           fieldName={fieldName}
           fieldType={fieldType}
           isButton={unifiedDataTableRow ? false : true}
diff --git a/x-pack/plugins/security_solution/public/common/utils/timeline/use_timeline_click.tsx b/x-pack/plugins/security_solution/public/common/utils/timeline/use_timeline_click.tsx
index f0a260c36250b3..aa11b6f78cba2f 100644
--- a/x-pack/plugins/security_solution/public/common/utils/timeline/use_timeline_click.tsx
+++ b/x-pack/plugins/security_solution/public/common/utils/timeline/use_timeline_click.tsx
@@ -18,7 +18,7 @@ import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_fe
 export const useTimelineClick = () => {
   const dispatch = useDispatch();
 
-  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+  const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
     'unifiedComponentsInTimelineEnabled'
   );
 
@@ -36,10 +36,10 @@ export const useTimelineClick = () => {
           isLoading: boolean;
         }) => dispatch(dispatchUpdateIsLoading({ id: currentTimelineId, isLoading })),
         updateTimeline: dispatchUpdateTimeline(dispatch),
-        useDiscoverComponentsInTimeline,
+        unifiedComponentsInTimelineEnabled,
       });
     },
-    [dispatch, useDiscoverComponentsInTimeline]
+    [dispatch, unifiedComponentsInTimelineEnabled]
   );
 
   return handleTimelineClick;
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx
index 833e6860a9cee3..35b48e035fc2ad 100644
--- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx
@@ -156,7 +156,7 @@ export const useInvestigateInTimeline = ({
     timelineType: TimelineType.default,
   });
 
-  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+  const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
     'unifiedComponentsInTimelineEnabled'
   );
 
@@ -171,7 +171,7 @@ export const useInvestigateInTimeline = ({
         notes: [],
         timeline: {
           ...timeline,
-          columns: useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders,
+          columns: unifiedComponentsInTimelineEnabled ? defaultUdtHeaders : defaultHeaders,
           filterManager,
           indexNames: timeline.indexNames ?? [],
           show: true,
@@ -185,7 +185,7 @@ export const useInvestigateInTimeline = ({
       filterManager,
       updateTimelineIsLoading,
       clearActiveTimeline,
-      useDiscoverComponentsInTimeline,
+      unifiedComponentsInTimelineEnabled,
     ]
   );
 
diff --git a/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/use_rule_from_timeline.tsx b/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/use_rule_from_timeline.tsx
index a0f1865e607813..f6e18064cdb185 100644
--- a/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/use_rule_from_timeline.tsx
+++ b/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/use_rule_from_timeline.tsx
@@ -52,7 +52,7 @@ export const useRuleFromTimeline = (setRuleQuery: SetRuleQuery): RuleFromTimelin
     SourcererScopeName.timeline
   );
 
-  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+  const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
     'unifiedComponentsInTimelineEnabled'
   );
 
@@ -210,11 +210,11 @@ export const useRuleFromTimeline = (setRuleQuery: SetRuleQuery): RuleFromTimelin
             isLoading: boolean;
           }) => dispatch(updateIsLoading({ id: currentTimelineId, isLoading })),
           updateTimeline: dispatchUpdateTimeline(dispatch),
-          useDiscoverComponentsInTimeline,
+          unifiedComponentsInTimelineEnabled,
         });
       }
     },
-    [dispatch, onOpenTimeline, selectedTimeline, useDiscoverComponentsInTimeline]
+    [dispatch, onOpenTimeline, selectedTimeline, unifiedComponentsInTimelineEnabled]
   );
 
   const [urlStateInitialized, setUrlStateInitialized] = useState(false);
diff --git a/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx b/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx
index 0c09ee9a74f3e4..01cd73d5da15a3 100644
--- a/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/recent_timelines/index.tsx
@@ -45,7 +45,7 @@ const StatefulRecentTimelinesComponent: React.FC<Props> = ({ filterBy }) => {
   );
   const updateTimeline = useMemo(() => dispatchUpdateTimeline(dispatch), [dispatch]);
 
-  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+  const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
     'unifiedComponentsInTimelineEnabled'
   );
 
@@ -58,10 +58,10 @@ const StatefulRecentTimelinesComponent: React.FC<Props> = ({ filterBy }) => {
         timelineId,
         updateIsLoading,
         updateTimeline,
-        useDiscoverComponentsInTimeline,
+        unifiedComponentsInTimelineEnabled,
       });
     },
-    [updateIsLoading, updateTimeline, useDiscoverComponentsInTimeline]
+    [updateIsLoading, updateTimeline, unifiedComponentsInTimelineEnabled]
   );
 
   const goToTimelines = useCallback(
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
index 392094a7dd69f0..2d207dc60df3e8 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
@@ -255,10 +255,12 @@ export const defaultTimelineToTimelineModel = (
   timeline: TimelineResult,
   duplicate: boolean,
   timelineType?: TimelineType,
-  useDiscoverComponentsInTimeline?: boolean
+  unifiedComponentsInTimelineEnabled?: boolean
 ): TimelineModel => {
   const isTemplate = timeline.timelineType === TimelineType.template;
-  const defaultHeadersValue = useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders;
+  const defaultHeadersValue = unifiedComponentsInTimelineEnabled
+    ? defaultUdtHeaders
+    : defaultHeaders;
 
   const timelineEntries = {
     ...timeline,
@@ -308,7 +310,7 @@ export const formatTimelineResultToModel = (
   timelineToOpen: TimelineResult,
   duplicate: boolean = false,
   timelineType?: TimelineType,
-  useDiscoverComponentsInTimeline?: boolean
+  unifiedComponentsInTimelineEnabled?: boolean
 ): { notes: Note[] | null | undefined; timeline: TimelineModel } => {
   const { notes, ...timelineModel } = timelineToOpen;
   return {
@@ -317,7 +319,7 @@ export const formatTimelineResultToModel = (
       timelineModel,
       duplicate,
       timelineType,
-      useDiscoverComponentsInTimeline
+      unifiedComponentsInTimelineEnabled
     ),
   };
 };
@@ -340,7 +342,7 @@ export interface QueryTimelineById<TCache> {
   }) => Action<{ id: string; isLoading: boolean }>;
   updateTimeline: DispatchUpdateTimeline;
   savedSearchId?: string;
-  useDiscoverComponentsInTimeline?: boolean; // temporary til fully migrate
+  unifiedComponentsInTimelineEnabled?: boolean; // temporary til fully migrate
 }
 
 export const queryTimelineById = <TCache>({
@@ -355,7 +357,7 @@ export const queryTimelineById = <TCache>({
   updateIsLoading,
   updateTimeline,
   savedSearchId,
-  useDiscoverComponentsInTimeline = false,
+  unifiedComponentsInTimelineEnabled = false,
 }: QueryTimelineById<TCache>) => {
   updateIsLoading({ id: TimelineId.active, isLoading: true });
   if (timelineId == null) {
@@ -367,7 +369,7 @@ export const queryTimelineById = <TCache>({
       to: DEFAULT_TO_MOMENT.toISOString(),
       timeline: {
         ...timelineDefaults,
-        columns: useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders,
+        columns: unifiedComponentsInTimelineEnabled ? defaultUdtHeaders : defaultHeaders,
         id: TimelineId.active,
         activeTab: activeTimelineTab,
         show: openTimeline,
@@ -387,7 +389,7 @@ export const queryTimelineById = <TCache>({
           timelineToOpen,
           duplicate,
           timelineType,
-          useDiscoverComponentsInTimeline
+          unifiedComponentsInTimelineEnabled
         );
 
         if (onOpenTimeline != null) {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx
index e039eeb245a681..9835d71f83963a 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.tsx
@@ -169,7 +169,7 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
       [dispatch]
     );
 
-    const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+    const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
       'unifiedComponentsInTimelineEnabled'
     );
 
@@ -260,7 +260,7 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
           dispatch(
             dispatchCreateNewTimeline({
               id: TimelineId.active,
-              columns: useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders,
+              columns: unifiedComponentsInTimelineEnabled ? defaultUdtHeaders : defaultHeaders,
               dataViewId,
               indexNames: selectedPatterns,
               show: false,
@@ -278,7 +278,7 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
         dispatch,
         dataViewId,
         selectedPatterns,
-        useDiscoverComponentsInTimeline,
+        unifiedComponentsInTimelineEnabled,
       ]
     );
 
@@ -376,7 +376,7 @@ export const StatefulOpenTimelineComponent = React.memo<OpenTimelineOwnProps>(
           timelineType: timelineTypeToOpen,
           updateIsLoading,
           updateTimeline,
-          useDiscoverComponentsInTimeline,
+          unifiedComponentsInTimelineEnabled,
         });
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_fields.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_fields.ts
deleted file mode 100644
index bb2b62e2971ff8..00000000000000
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/get_formatted_fields.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import type { EuiDataGridCellValueElementProps } from '@elastic/eui';
-import type React from 'react';
-import type { BrowserField, ColumnHeaderOptions, TimelineItem } from '@kbn/timelines-plugin/common';
-import type { DataTableRecord } from '@kbn/discover-utils/types';
-
-import { INDICATOR_REFERENCE } from '../../../../../../common/cti/constants';
-import { BYTES_FORMAT } from './bytes';
-import { EVENT_DURATION_FIELD_NAME } from '../../../duration';
-import { PORT_NAMES } from '../../../../../explore/network/components/port/helpers';
-import {
-  HOST_NAME_FIELD_NAME,
-  USER_NAME_FIELD_NAME,
-  IP_FIELD_TYPE,
-  MESSAGE_FIELD_NAME,
-  EVENT_MODULE_FIELD_NAME,
-  RULE_REFERENCE_FIELD_NAME,
-  SIGNAL_RULE_NAME_FIELD_NAME,
-  REFERENCE_URL_FIELD_NAME,
-  EVENT_URL_FIELD_NAME,
-  SIGNAL_STATUS_FIELD_NAME,
-  AGENT_STATUS_FIELD_NAME,
-  GEO_FIELD_TYPE,
-} from './constants';
-import { FieldValueCell } from '../../../../../common/lib/cell_actions/field_value';
-
-// simple black-list to prevent dragging and dropping fields such as message name
-const columnNamesNotDraggable = [MESSAGE_FIELD_NAME];
-
-// Used by the UnifiedDataTable
-
-export const getFormattedFields = ({
-  unifiedDataTableRows,
-  headers,
-  scopeId,
-  closeCellPopover,
-  browserFieldsByName,
-}: {
-  unifiedDataTableRows: Array<DataTableRecord & TimelineItem>;
-  headers?: ColumnHeaderOptions[];
-  scopeId: string;
-  closeCellPopover?: () => void;
-  browserFieldsByName: { [fieldName: string]: Partial<BrowserField> };
-}) => {
-  const ipFieldTypeFields =
-    headers
-      ?.filter((h) => browserFieldsByName[h.id] && browserFieldsByName[h.id].type === IP_FIELD_TYPE)
-      .map((c) => c.id) ?? [];
-  const geoFieldTypeFields =
-    headers
-      ?.filter(
-        (h) => browserFieldsByName[h.id] && browserFieldsByName[h.id].type === GEO_FIELD_TYPE
-      )
-      .map((c) => c.id) ?? [];
-  const byteFormattedFields =
-    headers
-      ?.filter(
-        (h) => browserFieldsByName[h.id] && browserFieldsByName[h.id].format === BYTES_FORMAT
-      )
-      .map((c) => c.id) ?? [];
-  return [
-    ...PORT_NAMES,
-    EVENT_DURATION_FIELD_NAME,
-    HOST_NAME_FIELD_NAME,
-    USER_NAME_FIELD_NAME,
-    SIGNAL_RULE_NAME_FIELD_NAME,
-    EVENT_MODULE_FIELD_NAME,
-    SIGNAL_STATUS_FIELD_NAME,
-    AGENT_STATUS_FIELD_NAME,
-    RULE_REFERENCE_FIELD_NAME,
-    REFERENCE_URL_FIELD_NAME,
-    EVENT_URL_FIELD_NAME,
-    INDICATOR_REFERENCE,
-    ...ipFieldTypeFields,
-    ...geoFieldTypeFields,
-    ...byteFormattedFields,
-    ...columnNamesNotDraggable,
-  ].reduce(
-    (
-      obj: Record<string, (props: EuiDataGridCellValueElementProps) => React.ReactNode>,
-      field: string
-    ) => {
-      obj[field] = FieldValueCell({
-        data: [],
-        ecsData: [],
-        pageSize: 0,
-        unifiedDataTableRows,
-        scopeId,
-        browserFieldsByName,
-        closeCellPopover,
-      });
-      return obj;
-    },
-    {}
-  );
-};
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx
new file mode 100644
index 00000000000000..a29bc597c8ce9b
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx
@@ -0,0 +1,91 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { ComponentProps, ReactElement } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
+import { RootDragDropProvider } from '@kbn/dom-drag-drop';
+import { isEmpty } from 'lodash';
+import { StyledTableFlexGroup, StyledTableFlexItem } from '../unified_components/styles';
+import { UnifiedTimelineComponent } from '../unified_components';
+import { defaultUdtHeaders } from '../unified_components/default_headers';
+import type { PaginationInputPaginated, TimelineItem } from '../../../../../common/search_strategy';
+
+interface UnifiedTimelineBodyProps extends ComponentProps<typeof UnifiedTimelineComponent> {
+  header: ReactElement;
+  pageInfo: Pick<PaginationInputPaginated, 'activePage' | 'querySize'>;
+}
+
+export const UnifiedTimelineBody = (props: UnifiedTimelineBodyProps) => {
+  const {
+    header,
+    pageInfo,
+    columns,
+    rowRenderers,
+    timelineId,
+    itemsPerPage,
+    itemsPerPageOptions,
+    sort,
+    events,
+    refetch,
+    dataLoadingState,
+    totalCount,
+    onEventClosed,
+    expandedDetail,
+    showExpandedDetails,
+    onChangePage,
+    activeTab,
+    updatedAt,
+  } = props;
+
+  const [pageRows, setPageRows] = useState<TimelineItem[][]>([]);
+
+  const rows = useMemo(() => pageRows.flat(), [pageRows]);
+
+  useEffect(() => {
+    setPageRows((currentPageRows) => {
+      if (pageInfo.activePage !== 0 && currentPageRows[pageInfo.activePage]?.length) {
+        return currentPageRows;
+      }
+      const newPageRows = pageInfo.activePage === 0 ? [] : [...currentPageRows];
+      newPageRows[pageInfo.activePage] = events;
+      return newPageRows;
+    });
+  }, [events, pageInfo.activePage]);
+
+  const columnsHeader = useMemo(() => {
+    return isEmpty(columns) ? defaultUdtHeaders : columns;
+  }, [columns]);
+
+  return (
+    <StyledTableFlexGroup direction="column" gutterSize="s">
+      <StyledTableFlexItem grow={false}>{header}</StyledTableFlexItem>
+      <StyledTableFlexItem>
+        <RootDragDropProvider>
+          <UnifiedTimelineComponent
+            columns={columnsHeader}
+            rowRenderers={rowRenderers}
+            timelineId={timelineId}
+            itemsPerPage={itemsPerPage}
+            itemsPerPageOptions={itemsPerPageOptions}
+            sort={sort}
+            events={rows}
+            refetch={refetch}
+            dataLoadingState={dataLoadingState}
+            totalCount={totalCount}
+            onEventClosed={onEventClosed}
+            expandedDetail={expandedDetail}
+            showExpandedDetails={showExpandedDetails}
+            onChangePage={onChangePage}
+            activeTab={activeTab}
+            updatedAt={updatedAt}
+            isTextBasedQuery={false}
+          />
+        </RootDragDropProvider>
+      </StyledTableFlexItem>
+    </StyledTableFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
index 8e9ab14126748b..458f7858b8aecf 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
@@ -72,7 +72,7 @@ const StatefulTimelineComponent: React.FC<Props> = ({
 }) => {
   const dispatch = useDispatch();
 
-  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+  const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
     'unifiedComponentsInTimelineEnabled'
   );
 
@@ -125,7 +125,7 @@ const StatefulTimelineComponent: React.FC<Props> = ({
       dispatch(
         timelineActions.createTimeline({
           id: timelineId,
-          columns: useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders,
+          columns: unifiedComponentsInTimelineEnabled ? defaultUdtHeaders : defaultHeaders,
           dataViewId: selectedDataViewIdSourcerer,
           indexNames: selectedPatternsSourcerer,
           show: false,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
index 9484f08b32229c..db993e7d886c5b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
@@ -64,6 +64,8 @@ import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
 import { useLicense } from '../../../../common/hooks/use_license';
 import { HeaderActions } from '../../../../common/components/header_actions/header_actions';
 import { defaultUdtHeaders } from '../unified_components/default_headers';
+import { UnifiedTimelineBody } from '../body/unified_timeline_body';
+
 const QueryTabHeaderContainer = styled.div`
   width: 100%;
 `;
@@ -198,12 +200,18 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   const isEnterprisePlus = useLicense().isEnterprise();
   const ACTION_BUTTON_COUNT = isEnterprisePlus ? 6 : 5;
 
+  const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
+    'unifiedComponentsInTimelineEnabled'
+  );
+
   const getManageTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
+
   const currentTimeline = useDeepEqualSelector((state) =>
     getManageTimeline(state, timelineId ?? TimelineId.active)
   );
 
-  const activeFilterManager = currentTimeline.filterManager;
+  const { filterManager: activeFilterManager, sampleSize } = currentTimeline;
+
   const filterManager = useMemo(
     () => activeFilterManager ?? new FilterManager(uiSettings),
     [activeFilterManager, uiSettings]
@@ -268,22 +276,18 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     type: columnType,
   }));
 
-  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
-    'unifiedComponentsInTimelineEnabled'
-  );
-
   useEffect(() => {
     dispatch(
       timelineActions.initializeTimelineSettings({
         filterManager,
         id: timelineId,
-        defaultColumns: useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders,
+        defaultColumns: unifiedComponentsInTimelineEnabled ? defaultUdtHeaders : defaultHeaders,
       })
     );
-  }, [dispatch, filterManager, timelineId, useDiscoverComponentsInTimeline]);
+  }, [dispatch, filterManager, timelineId, unifiedComponentsInTimelineEnabled]);
 
   const [
-    queryLoadingState,
+    dataLoadingState,
     { events, inspect, totalCount, pageInfo, loadPage, refreshedAt, refetch },
   ] = useTimelineEvents({
     dataViewId,
@@ -293,7 +297,7 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     id: timelineId,
     indexNames: selectedPatterns,
     language: kqlQuery.language,
-    limit: itemsPerPage,
+    limit: unifiedComponentsInTimelineEnabled ? sampleSize : itemsPerPage,
     runtimeMappings,
     skip: !canQueryTimeline,
     sort: timelineQuerySortField,
@@ -302,8 +306,8 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   });
 
   const isQueryLoading = useMemo(
-    () => [DataLoadingState.loading, DataLoadingState.loadingMore].includes(queryLoadingState),
-    [queryLoadingState]
+    () => [DataLoadingState.loading, DataLoadingState.loadingMore].includes(dataLoadingState),
+    [dataLoadingState]
   );
 
   const handleOnPanelClosed = useCallback(() => {
@@ -333,6 +337,80 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   // is not getting refreshed when using browser navigation.
   const showEventsCountBadge = !isBlankTimeline && totalCount >= 0;
 
+  const header = useMemo(
+    () => (
+      <StyledEuiFlyoutHeader data-test-subj={`${activeTab}-tab-flyout-header`} hasBorder={false}>
+        <EuiFlexGroup gutterSize="s" direction="column">
+          {!unifiedComponentsInTimelineEnabled &&
+            timelineFullScreen &&
+            setTimelineFullScreen != null && (
+              <EuiFlexItem>
+                <EuiFlexGroup alignItems="center" gutterSize="s">
+                  <ExitFullScreen
+                    fullScreen={timelineFullScreen}
+                    setFullScreen={setTimelineFullScreen}
+                  />
+                </EuiFlexGroup>
+              </EuiFlexItem>
+            )}
+          <EuiFlexItem data-test-subj="timeline-date-picker-container">
+            <QueryTabHeaderContainer data-test-subj="timelineHeader">
+              <QueryTabHeader
+                filterManager={filterManager}
+                show={show && activeTab === TimelineTabs.query}
+                showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg}
+                status={status}
+                timelineId={timelineId}
+              />
+            </QueryTabHeaderContainer>
+          </EuiFlexItem>
+          {/* TODO: This is a temporary solution to hide the KPIs until lens components play nicely with timelines */}
+          {/* https://github.com/elastic/kibana/issues/17156 */}
+          {/* <EuiFlexItem grow={false}> */}
+          {/*   <TimelineKpi timelineId={timelineId} /> */}
+          {/* </EuiFlexItem> */}
+        </EuiFlexGroup>
+      </StyledEuiFlyoutHeader>
+    ),
+    [
+      activeTab,
+      filterManager,
+      show,
+      showCallOutUnauthorizedMsg,
+      status,
+      timelineId,
+      setTimelineFullScreen,
+      timelineFullScreen,
+      unifiedComponentsInTimelineEnabled,
+    ]
+  );
+
+  if (unifiedComponentsInTimelineEnabled) {
+    return (
+      <UnifiedTimelineBody
+        header={header}
+        columns={columns}
+        rowRenderers={rowRenderers}
+        timelineId={timelineId}
+        itemsPerPage={itemsPerPage}
+        itemsPerPageOptions={itemsPerPageOptions}
+        sort={sort}
+        events={events}
+        refetch={refetch}
+        dataLoadingState={dataLoadingState}
+        totalCount={isBlankTimeline ? 0 : totalCount}
+        onEventClosed={onEventClosed}
+        expandedDetail={expandedDetail}
+        showExpandedDetails={showExpandedDetails}
+        onChangePage={loadPage}
+        activeTab={activeTab}
+        updatedAt={refreshedAt}
+        isTextBasedQuery={false}
+        pageInfo={pageInfo}
+      />
+    );
+  }
+
   return (
     <>
       <InPortal node={timelineEventsCountPortalNode}>
@@ -348,39 +426,7 @@ export const QueryTabContentComponent: React.FC<Props> = ({
       />
       <FullWidthFlexGroup gutterSize="none">
         <ScrollableFlexItem grow={2}>
-          <StyledEuiFlyoutHeader
-            data-test-subj={`${activeTab}-tab-flyout-header`}
-            hasBorder={false}
-          >
-            <EuiFlexGroup gutterSize="s" direction="column">
-              {timelineFullScreen && setTimelineFullScreen != null && (
-                <EuiFlexItem>
-                  <EuiFlexGroup alignItems="center" gutterSize="s">
-                    <ExitFullScreen
-                      fullScreen={timelineFullScreen}
-                      setFullScreen={setTimelineFullScreen}
-                    />
-                  </EuiFlexGroup>
-                </EuiFlexItem>
-              )}
-              <EuiFlexItem data-test-subj="timeline-date-picker-container">
-                <QueryTabHeaderContainer data-test-subj="timelineHeader">
-                  <QueryTabHeader
-                    filterManager={filterManager}
-                    show={show && activeTab === TimelineTabs.query}
-                    showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg}
-                    status={status}
-                    timelineId={timelineId}
-                  />
-                </QueryTabHeaderContainer>
-              </EuiFlexItem>
-              {/* TODO: This is a temporary solution to hide the KPIs until lens components play nicely with timelines */}
-              {/* https://github.com/elastic/kibana/issues/17156 */}
-              {/* <EuiFlexItem grow={false}> */}
-              {/*   <TimelineKpi timelineId={timelineId} /> */}
-              {/* </EuiFlexItem> */}
-            </EuiFlexGroup>
-          </StyledEuiFlyoutHeader>
+          {header}
           <EventDetailsWidthProvider>
             <StyledEuiFlyoutBody
               data-test-subj={`${TimelineTabs.query}-tab-flyout-body`}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/__snapshots__/index.test.tsx.snap
deleted file mode 100644
index 92591556d38640..00000000000000
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/__snapshots__/index.test.tsx.snap
+++ /dev/null
@@ -1,1315 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Timeline rendering renders correctly against snapshot 1`] = `
-<QueryTabContentComponent
-  activeTab="query"
-  columns={
-    Array [
-      Object {
-        "aggregatable": true,
-        "category": "base",
-        "columnHeaderType": "not-filtered",
-        "description": "Date/time when the event originated.
-For log events this is the date/time when the event was generated, and not when it was read.
-Required field for all events.",
-        "esTypes": Array [
-          "date",
-        ],
-        "example": "2016-05-23T08:05:34.853Z",
-        "id": "@timestamp",
-        "initialWidth": 190,
-        "type": "date",
-      },
-      Object {
-        "aggregatable": true,
-        "category": "event",
-        "columnHeaderType": "not-filtered",
-        "description": "Severity describes the severity of the event. What the different severity values mean can very different between use cases. It's up to the implementer to make sure severities are consistent across events.",
-        "esTypes": Array [
-          "long",
-        ],
-        "example": "7",
-        "id": "event.severity",
-        "initialWidth": 180,
-        "type": "number",
-      },
-      Object {
-        "aggregatable": true,
-        "category": "event",
-        "columnHeaderType": "not-filtered",
-        "description": "Event category.
-This contains high-level information about the contents of the event. It is more generic than \`event.action\`, in the sense that typically a category contains multiple actions. Warning: In future versions of ECS, we plan to provide a list of acceptable values for this field, please use with caution.",
-        "esTypes": Array [
-          "keyword",
-        ],
-        "example": "user-management",
-        "id": "event.category",
-        "initialWidth": 180,
-        "type": "string",
-      },
-      Object {
-        "aggregatable": true,
-        "category": "event",
-        "columnHeaderType": "not-filtered",
-        "description": "The action captured by the event.
-This describes the information in the event. It is more specific than \`event.category\`. Examples are \`group-add\`, \`process-started\`, \`file-created\`. The value is normally defined by the implementer.",
-        "esTypes": Array [
-          "keyword",
-        ],
-        "example": "user-password-change",
-        "id": "event.action",
-        "initialWidth": 180,
-        "type": "string",
-      },
-      Object {
-        "aggregatable": true,
-        "category": "host",
-        "columnHeaderType": "not-filtered",
-        "description": "Name of the host.
-It can contain what \`hostname\` returns on Unix systems, the fully qualified domain name, or a name specified by the user. The sender decides which value to use.",
-        "esTypes": Array [
-          "keyword",
-        ],
-        "example": "",
-        "id": "host.name",
-        "initialWidth": 180,
-        "type": "string",
-      },
-      Object {
-        "aggregatable": true,
-        "category": "source",
-        "columnHeaderType": "not-filtered",
-        "description": "IP address of the source.
-Can be one or multiple IPv4 or IPv6 addresses.",
-        "esTypes": Array [
-          "ip",
-        ],
-        "example": "",
-        "id": "source.ip",
-        "initialWidth": 180,
-        "type": "ip",
-      },
-      Object {
-        "aggregatable": true,
-        "category": "destination",
-        "columnHeaderType": "not-filtered",
-        "description": "IP address of the destination.
-Can be one or multiple IPv4 or IPv6 addresses.",
-        "esTypes": Array [
-          "ip",
-        ],
-        "example": "",
-        "id": "destination.ip",
-        "initialWidth": 180,
-        "type": "ip",
-      },
-      Object {
-        "aggregatable": true,
-        "category": "destination",
-        "columnHeaderType": "not-filtered",
-        "description": "Bytes sent from the source to the destination",
-        "esTypes": Array [
-          "long",
-        ],
-        "example": "123",
-        "format": "bytes",
-        "id": "destination.bytes",
-        "initialWidth": 180,
-        "type": "number",
-      },
-      Object {
-        "aggregatable": true,
-        "category": "user",
-        "columnHeaderType": "not-filtered",
-        "description": "Short name or login of the user.",
-        "esTypes": Array [
-          "keyword",
-        ],
-        "example": "albert",
-        "id": "user.name",
-        "initialWidth": 180,
-        "type": "string",
-      },
-      Object {
-        "aggregatable": false,
-        "category": "base",
-        "columnHeaderType": "not-filtered",
-        "description": "Each document has an _id that uniquely identifies it",
-        "esTypes": Array [],
-        "example": "Y-6TfmcB0WOhS6qyMv3s",
-        "id": "_id",
-        "initialWidth": 180,
-        "type": "string",
-      },
-      Object {
-        "aggregatable": false,
-        "category": "base",
-        "columnHeaderType": "not-filtered",
-        "description": "For log events the message field contains the log message.
-In other use cases the message field can be used to concatenate different values which are then freely searchable. If multiple messages exist, they can be combined into one message.",
-        "esTypes": Array [
-          "text",
-        ],
-        "example": "Hello World",
-        "id": "message",
-        "initialWidth": 180,
-        "type": "string",
-      },
-    ]
-  }
-  dataProviders={
-    Array [
-      Object {
-        "and": Array [],
-        "enabled": true,
-        "excluded": false,
-        "id": "id-Provider 1",
-        "kqlQuery": "",
-        "name": "Provider 1",
-        "queryMatch": Object {
-          "field": "name",
-          "operator": ":",
-          "value": "Provider 1",
-        },
-      },
-      Object {
-        "and": Array [],
-        "enabled": true,
-        "excluded": false,
-        "id": "id-Provider 2",
-        "kqlQuery": "",
-        "name": "Provider 2",
-        "queryMatch": Object {
-          "field": "name",
-          "operator": ":",
-          "value": "Provider 2",
-        },
-      },
-      Object {
-        "and": Array [],
-        "enabled": true,
-        "excluded": false,
-        "id": "id-Provider 3",
-        "kqlQuery": "",
-        "name": "Provider 3",
-        "queryMatch": Object {
-          "field": "name",
-          "operator": ":",
-          "value": "Provider 3",
-        },
-      },
-      Object {
-        "and": Array [],
-        "enabled": true,
-        "excluded": false,
-        "id": "id-Provider 4",
-        "kqlQuery": "",
-        "name": "Provider 4",
-        "queryMatch": Object {
-          "field": "name",
-          "operator": ":",
-          "value": "Provider 4",
-        },
-      },
-      Object {
-        "and": Array [],
-        "enabled": true,
-        "excluded": false,
-        "id": "id-Provider 5",
-        "kqlQuery": "",
-        "name": "Provider 5",
-        "queryMatch": Object {
-          "field": "name",
-          "operator": ":",
-          "value": "Provider 5",
-        },
-      },
-      Object {
-        "and": Array [],
-        "enabled": true,
-        "excluded": false,
-        "id": "id-Provider 6",
-        "kqlQuery": "",
-        "name": "Provider 6",
-        "queryMatch": Object {
-          "field": "name",
-          "operator": ":",
-          "value": "Provider 6",
-        },
-      },
-      Object {
-        "and": Array [],
-        "enabled": true,
-        "excluded": false,
-        "id": "id-Provider 7",
-        "kqlQuery": "",
-        "name": "Provider 7",
-        "queryMatch": Object {
-          "field": "name",
-          "operator": ":",
-          "value": "Provider 7",
-        },
-      },
-      Object {
-        "and": Array [],
-        "enabled": true,
-        "excluded": false,
-        "id": "id-Provider 8",
-        "kqlQuery": "",
-        "name": "Provider 8",
-        "queryMatch": Object {
-          "field": "name",
-          "operator": ":",
-          "value": "Provider 8",
-        },
-      },
-      Object {
-        "and": Array [],
-        "enabled": true,
-        "excluded": false,
-        "id": "id-Provider 9",
-        "kqlQuery": "",
-        "name": "Provider 9",
-        "queryMatch": Object {
-          "field": "name",
-          "operator": ":",
-          "value": "Provider 9",
-        },
-      },
-      Object {
-        "and": Array [],
-        "enabled": true,
-        "excluded": false,
-        "id": "id-Provider 10",
-        "kqlQuery": "",
-        "name": "Provider 10",
-        "queryMatch": Object {
-          "field": "name",
-          "operator": ":",
-          "value": "Provider 10",
-        },
-      },
-    ]
-  }
-  end="2018-03-24T03:33:52.253Z"
-  expandedDetail={Object {}}
-  filters={Array []}
-  isLive={false}
-  itemsPerPage={5}
-  itemsPerPageOptions={
-    Array [
-      5,
-      10,
-      20,
-    ]
-  }
-  kqlMode="search"
-  kqlQueryExpression=" "
-  kqlQueryLanguage="kuery"
-  onEventClosed={[MockFunction]}
-  renderCellValue={[Function]}
-  rowRenderers={
-    Array [
-      Object {
-        "id": "threat_match",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "auditd",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_dns",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_security_event",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_security_event",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_fim",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_fim",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_fim",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_fim",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_fim",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_fim",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "alerts",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "alerts",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "alerts",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "alerts",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "alerts",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "alerts",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "alerts",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "alerts",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "alerts",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "alerts",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "library",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_fim",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "registry",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_socket",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_socket",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_socket",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_socket",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_socket",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_socket",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_socket",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_security_event",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_security_event",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_security_event",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_fim",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_fim",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_security_event",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_file",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_socket",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system_socket",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "system",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "suricata",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "zeek",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-      Object {
-        "id": "netflow",
-        "isInstance": [Function],
-        "renderRow": [Function],
-      },
-    ]
-  }
-  show={true}
-  showCallOutUnauthorizedMsg={false}
-  showExpandedDetails={false}
-  sort={
-    Array [
-      Object {
-        "columnId": "@timestamp",
-        "columnType": "date",
-        "esTypes": Array [
-          "date",
-        ],
-        "sortDirection": "desc",
-      },
-    ]
-  }
-  start="2018-03-23T18:49:23.132Z"
-  status="active"
-  timelineId="timeline-test"
-  timerangeKind="absolute"
-/>
-`;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.test.tsx
deleted file mode 100644
index 44d2ee6cd6a546..00000000000000
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.test.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-
-import { coreMock } from '@kbn/core/public/mocks';
-import { mockIndexPattern } from '../../../../../common/mock';
-import { TestProviders } from '../../../../../common/mock/test_providers';
-import { FilterManager } from '@kbn/data-plugin/public';
-import { mockDataProviders } from '../../data_providers/mock/mock_data_providers';
-import { useMountAppended } from '../../../../../common/utils/use_mount_appended';
-
-import { QueryTabHeader } from '.';
-import { TimelineStatus, TimelineType } from '../../../../../../common/api/timeline';
-import { waitFor } from '@testing-library/react';
-import { TimelineId } from '../../../../../../common/types';
-
-const mockUiSettingsForFilterManager = coreMock.createStart().uiSettings;
-
-jest.mock('../../../../../common/lib/kibana');
-
-describe('Header', () => {
-  const indexPattern = mockIndexPattern;
-  const mount = useMountAppended();
-  const getWrapper = async (childrenComponent: JSX.Element) => {
-    const wrapper = mount(childrenComponent);
-    await waitFor(() => wrapper.find('[data-test-subj="timelineCallOutUnauthorized"]').exists());
-    return wrapper;
-  };
-  const props = {
-    browserFields: {},
-    dataProviders: mockDataProviders,
-    filterManager: new FilterManager(mockUiSettingsForFilterManager),
-    indexPattern,
-    onDataProviderEdited: jest.fn(),
-    onDataProviderRemoved: jest.fn(),
-    onToggleDataProviderEnabled: jest.fn(),
-    onToggleDataProviderExcluded: jest.fn(),
-    onToggleDataProviderType: jest.fn(),
-    show: true,
-    showCallOutUnauthorizedMsg: false,
-    status: TimelineStatus.active,
-    timelineId: TimelineId.test,
-    timelineType: TimelineType.default,
-  };
-
-  describe('rendering', () => {
-    test('it renders the data providers when show is true', async () => {
-      const testProps = { ...props, show: true };
-      const wrapper = await getWrapper(
-        <TestProviders>
-          <QueryTabHeader {...testProps} />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="dataProviders"]').exists()).toEqual(true);
-    });
-
-    test('it renders the unauthorized call out providers', async () => {
-      const testProps = {
-        ...props,
-        filterManager: new FilterManager(mockUiSettingsForFilterManager),
-        showCallOutUnauthorizedMsg: true,
-      };
-
-      const wrapper = await getWrapper(
-        <TestProviders>
-          <QueryTabHeader {...testProps} />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="timelineCallOutUnauthorized"]').exists()).toEqual(true);
-    });
-
-    test('it renders the unauthorized call out with correct icon', async () => {
-      const testProps = {
-        ...props,
-        filterManager: new FilterManager(mockUiSettingsForFilterManager),
-        showCallOutUnauthorizedMsg: true,
-      };
-
-      const wrapper = await getWrapper(
-        <TestProviders>
-          <QueryTabHeader {...testProps} />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper.find('[data-test-subj="timelineCallOutUnauthorized"]').first().prop('iconType')
-      ).toEqual('warning');
-    });
-
-    test('it renders the unauthorized call out with correct message', async () => {
-      const testProps = {
-        ...props,
-        filterManager: new FilterManager(mockUiSettingsForFilterManager),
-        showCallOutUnauthorizedMsg: true,
-      };
-
-      const wrapper = await getWrapper(
-        <TestProviders>
-          <QueryTabHeader {...testProps} />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper.find('[data-test-subj="timelineCallOutUnauthorized"]').first().prop('title')
-      ).toEqual(
-        'You can use Timeline to investigate events, but you do not have the required permissions to save timelines for future use. If you need to save timelines, contact your Kibana administrator.'
-      );
-    });
-
-    test('it renders the immutable timeline call out providers', async () => {
-      const testProps = {
-        ...props,
-        filterManager: new FilterManager(mockUiSettingsForFilterManager),
-        showCallOutUnauthorizedMsg: false,
-        status: TimelineStatus.immutable,
-      };
-
-      const wrapper = await getWrapper(
-        <TestProviders>
-          <QueryTabHeader {...testProps} />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="timelineImmutableCallOut"]').exists()).toEqual(true);
-    });
-
-    test('it renders the immutable timeline call out with correct icon', async () => {
-      const testProps = {
-        ...props,
-        filterManager: new FilterManager(mockUiSettingsForFilterManager),
-        showCallOutUnauthorizedMsg: false,
-        status: TimelineStatus.immutable,
-      };
-
-      const wrapper = await getWrapper(
-        <TestProviders>
-          <QueryTabHeader {...testProps} />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper.find('[data-test-subj="timelineImmutableCallOut"]').first().prop('iconType')
-      ).toEqual('warning');
-    });
-
-    test('it renders the immutable timeline call out with correct message', async () => {
-      const testProps = {
-        ...props,
-        filterManager: new FilterManager(mockUiSettingsForFilterManager),
-        showCallOutUnauthorizedMsg: false,
-        status: TimelineStatus.immutable,
-      };
-
-      const wrapper = await getWrapper(
-        <TestProviders>
-          <QueryTabHeader {...testProps} />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper.find('[data-test-subj="timelineImmutableCallOut"]').first().prop('title')
-      ).toEqual(
-        'This prebuilt timeline template cannot be modified. To make changes, please duplicate this template and make modifications to the duplicate template.'
-      );
-    });
-  });
-});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.tsx
deleted file mode 100644
index 553b71705884b1..00000000000000
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/index.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { EuiCallOut, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import React, { useMemo } from 'react';
-import type { FilterManager } from '@kbn/data-plugin/public';
-
-import { IS_DRAGGING_CLASS_NAME } from '@kbn/securitysolution-t-grid';
-import styled from '@emotion/styled';
-import { euiThemeVars } from '@kbn/ui-theme';
-
-import type { TimelineStatusLiteralWithNull } from '../../../../../../common/api/timeline';
-import { TimelineStatus, TimelineType } from '../../../../../../common/api/timeline';
-import { timelineSelectors } from '../../../../store';
-import { useDeepEqualSelector } from '../../../../../common/hooks/use_selector';
-import { timelineDefaults } from '../../../../store/defaults';
-import * as i18n from './translations';
-import { StatefulSearchOrFilter } from '../../search_or_filter';
-import { DataProviders } from '../../data_providers';
-
-interface Props {
-  filterManager: FilterManager;
-  show: boolean;
-  showCallOutUnauthorizedMsg: boolean;
-  status: TimelineStatusLiteralWithNull;
-  timelineId: string;
-}
-
-const DataProvidersContainer = styled.div<{ $shouldShowQueryBuilder: boolean }>`
-  position: relative;
-  width: 100%;
-  transition: 0.5s ease-in-out;
-  overflow: hidden;
-
-  ${(props) =>
-    props.$shouldShowQueryBuilder
-      ? `display: block; max-height: 300px; visibility: visible; margin-block-start: 0px;`
-      : `display: block; max-height: 0px; visibility: hidden; margin-block-start:-${euiThemeVars.euiSizeS};`}
-
-  .${IS_DRAGGING_CLASS_NAME} & {
-    display: block;
-    max-height: 300px;
-    visibility: visible;
-    margin-block-start: 0px;
-  }
-`;
-
-const QueryTabHeaderComponent: React.FC<Props> = ({
-  filterManager,
-  show,
-  showCallOutUnauthorizedMsg,
-  status,
-  timelineId,
-}) => {
-  const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
-
-  const getIsDataProviderVisible = useMemo(
-    () => timelineSelectors.dataProviderVisibilitySelector(),
-    []
-  );
-
-  const timelineType = useDeepEqualSelector(
-    (state) => (getTimeline(state, timelineId) ?? timelineDefaults).timelineType
-  );
-
-  const isDataProviderVisible = useDeepEqualSelector(
-    (state) => getIsDataProviderVisible(state, timelineId) ?? timelineDefaults.isDataProviderVisible
-  );
-
-  const shouldShowQueryBuilder = isDataProviderVisible || timelineType === TimelineType.template;
-
-  return (
-    <EuiFlexGroup gutterSize="s" direction="column">
-      <EuiFlexItem>
-        <StatefulSearchOrFilter filterManager={filterManager} timelineId={timelineId} />
-      </EuiFlexItem>
-      {showCallOutUnauthorizedMsg && (
-        <EuiFlexItem>
-          <EuiCallOut
-            data-test-subj="timelineCallOutUnauthorized"
-            title={i18n.CALL_OUT_UNAUTHORIZED_MSG}
-            color="warning"
-            iconType="warning"
-            size="s"
-          />
-        </EuiFlexItem>
-      )}
-      {status === TimelineStatus.immutable && (
-        <EuiFlexItem>
-          <EuiCallOut
-            data-test-subj="timelineImmutableCallOut"
-            title={i18n.CALL_OUT_IMMUTABLE}
-            color="primary"
-            iconType="warning"
-            size="s"
-          />
-        </EuiFlexItem>
-      )}
-      {show ? (
-        <DataProvidersContainer
-          className="data-providers-container"
-          $shouldShowQueryBuilder={shouldShowQueryBuilder}
-        >
-          <DataProviders timelineId={timelineId} />
-        </DataProvidersContainer>
-      ) : null}
-    </EuiFlexGroup>
-  );
-};
-
-export const QueryTabHeader = React.memo(QueryTabHeaderComponent);
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/selectors.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/selectors.ts
deleted file mode 100644
index 62c0134b966123..00000000000000
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/selectors.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { createSelector } from 'reselect';
-
-import { timelineSelectors } from '../../../../store';
-
-export const getTimelineSaveModalByIdSelector = () =>
-  createSelector(timelineSelectors.selectTimeline, (timeline) => ({
-    showSaveModal: timeline?.showSaveModal ?? false,
-    status: timeline?.status,
-  }));
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/translations.ts
deleted file mode 100644
index f90c46d69d2305..00000000000000
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/header/translations.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { i18n } from '@kbn/i18n';
-
-export const CALL_OUT_UNAUTHORIZED_MSG = i18n.translate(
-  'xpack.securitySolution.timeline.callOut.unauthorized.message.description',
-  {
-    defaultMessage:
-      'You can use Timeline to investigate events, but you do not have the required permissions to save timelines for future use. If you need to save timelines, contact your Kibana administrator.',
-  }
-);
-
-export const CALL_OUT_IMMUTABLE = i18n.translate(
-  'xpack.securitySolution.timeline.callOut.immutable.message.description',
-  {
-    defaultMessage:
-      'This prebuilt timeline template cannot be modified. To make changes, please duplicate this template and make modifications to the duplicate template.',
-  }
-);
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.test.tsx
deleted file mode 100644
index 1fe1f2ebbfa7d6..00000000000000
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.test.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { shallow } from 'enzyme';
-import React from 'react';
-import useResizeObserver from 'use-resize-observer/polyfilled';
-
-import { DefaultCellRenderer } from '../cell_rendering/default_cell_renderer';
-import { defaultHeaders, mockTimelineData } from '../../../../common/mock';
-import '../../../../common/mock/match_media';
-import { TestProviders } from '../../../../common/mock/test_providers';
-
-import type { Props as QueryTabContentComponentProps } from '.';
-import { QueryTabContentComponent } from '.';
-import { defaultRowRenderers } from '../body/renderers';
-import type { Sort } from '../body/sort';
-import { mockDataProviders } from '../data_providers/mock/mock_data_providers';
-import { useMountAppended } from '../../../../common/utils/use_mount_appended';
-import { TimelineId, TimelineTabs } from '../../../../../common/types/timeline';
-import { TimelineStatus } from '../../../../../common/api/timeline';
-import { useTimelineEvents } from '../../../containers';
-import { useTimelineEventsDetails } from '../../../containers/details';
-import { useSourcererDataView } from '../../../../common/containers/sourcerer';
-import { mockSourcererScope } from '../../../../common/containers/sourcerer/mocks';
-import { Direction } from '../../../../../common/search_strategy';
-import * as helpers from '../../../../common/lib/kuery';
-import { waitFor } from '@testing-library/react';
-
-jest.mock('../../../containers', () => ({
-  useTimelineEvents: jest.fn(),
-}));
-jest.mock('../../../containers/details', () => ({
-  useTimelineEventsDetails: jest.fn(),
-}));
-jest.mock('../../fields_browser', () => ({
-  useFieldBrowserOptions: jest.fn(),
-}));
-jest.mock('../body/events', () => ({
-  Events: () => <></>,
-}));
-
-jest.mock('../../../../common/containers/sourcerer');
-jest.mock('../../../../common/containers/sourcerer/use_signal_helpers', () => ({
-  useSignalHelpers: () => ({ signalIndexNeedsInit: false }),
-}));
-
-jest.mock('../../../../common/lib/kuery');
-
-const mockUseResizeObserver: jest.Mock = useResizeObserver as jest.Mock;
-jest.mock('use-resize-observer/polyfilled');
-mockUseResizeObserver.mockImplementation(() => ({}));
-
-jest.mock('../../../../common/lib/kibana');
-
-describe('Timeline', () => {
-  let props = {} as QueryTabContentComponentProps;
-  const sort: Sort[] = [
-    {
-      columnId: '@timestamp',
-      columnType: 'date',
-      esTypes: ['date'],
-      sortDirection: Direction.desc,
-    },
-  ];
-  const startDate = '2018-03-23T18:49:23.132Z';
-  const endDate = '2018-03-24T03:33:52.253Z';
-
-  const mount = useMountAppended();
-  const getWrapper = async (childrenComponent: JSX.Element) => {
-    const wrapper = mount(childrenComponent);
-    await waitFor(() => wrapper.find('[data-test-subj="timelineHeader"]').exists());
-    return wrapper;
-  };
-  beforeEach(() => {
-    (useTimelineEvents as jest.Mock).mockReturnValue([
-      false,
-      {
-        events: mockTimelineData,
-        pageInfo: {
-          activePage: 0,
-          totalPages: 10,
-        },
-      },
-    ]);
-    (useTimelineEventsDetails as jest.Mock).mockReturnValue([false, {}]);
-
-    (useSourcererDataView as jest.Mock).mockReturnValue(mockSourcererScope);
-
-    props = {
-      columns: defaultHeaders,
-      dataProviders: mockDataProviders,
-      end: endDate,
-      expandedDetail: {},
-      filters: [],
-      timelineId: TimelineId.test,
-      isLive: false,
-      itemsPerPage: 5,
-      itemsPerPageOptions: [5, 10, 20],
-      kqlMode: 'search' as QueryTabContentComponentProps['kqlMode'],
-      kqlQueryExpression: ' ',
-      kqlQueryLanguage: 'kuery',
-      onEventClosed: jest.fn(),
-      renderCellValue: DefaultCellRenderer,
-      rowRenderers: defaultRowRenderers,
-      showCallOutUnauthorizedMsg: false,
-      showExpandedDetails: false,
-      sort,
-      start: startDate,
-      status: TimelineStatus.active,
-      timerangeKind: 'absolute',
-      activeTab: TimelineTabs.query,
-      show: true,
-    };
-  });
-
-  // FLAKY: https://github.com/elastic/kibana/issues/156797
-  describe.skip('rendering', () => {
-    let spyCombineQueries: jest.SpyInstance;
-
-    beforeEach(() => {
-      spyCombineQueries = jest.spyOn(helpers, 'combineQueries');
-    });
-    afterEach(() => {
-      spyCombineQueries.mockClear();
-    });
-
-    test('should trim kqlQueryExpression', async () => {
-      await getWrapper(
-        <TestProviders>
-          <QueryTabContentComponent {...props} />
-        </TestProviders>
-      );
-
-      expect(spyCombineQueries.mock.calls[0][0].kqlQuery.query).toEqual(
-        props.kqlQueryExpression.trim()
-      );
-    });
-
-    test('renders correctly against snapshot', () => {
-      const wrapper = shallow(
-        <TestProviders>
-          <QueryTabContentComponent {...props} />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('QueryTabContentComponent')).toMatchSnapshot();
-    });
-
-    test('it renders the timeline header', async () => {
-      const wrapper = await getWrapper(
-        <TestProviders>
-          <QueryTabContentComponent {...props} />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="timelineHeader"]').exists()).toEqual(true);
-    });
-
-    test('it renders the timeline table', async () => {
-      const wrapper = await getWrapper(
-        <TestProviders>
-          <QueryTabContentComponent {...props} />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
-      ).toEqual(true);
-    });
-
-    test('it does NOT render the timeline table when start is empty', async () => {
-      const wrapper = await getWrapper(
-        <TestProviders>
-          <QueryTabContentComponent {...props} start={''} />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
-      ).toEqual(true);
-      expect(wrapper.find('[data-test-subj="events"]').exists()).toEqual(false);
-    });
-
-    test('it does NOT render the timeline table when end is empty', async () => {
-      const wrapper = await getWrapper(
-        <TestProviders>
-          <QueryTabContentComponent {...props} end={''} />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
-      ).toEqual(true);
-      expect(wrapper.find('[data-test-subj="events"]').exists()).toEqual(false);
-    });
-
-    test('it does NOT render the paging footer when you do NOT have any data providers', async () => {
-      const wrapper = await getWrapper(
-        <TestProviders>
-          <QueryTabContentComponent {...props} />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="table-pagination"]').exists()).toEqual(false);
-    });
-
-    it('it shows the timeline footer', async () => {
-      const wrapper = await getWrapper(
-        <TestProviders>
-          <QueryTabContentComponent {...props} />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="timeline-footer"]').exists()).toEqual(true);
-    });
-
-    test('it does render the timeline table when the source is loading with no events', async () => {
-      (useSourcererDataView as jest.Mock).mockReturnValue({
-        browserFields: {},
-        loading: true,
-        indexPattern: {},
-        selectedPatterns: [],
-        missingPatterns: [],
-      });
-      const wrapper = await getWrapper(
-        <TestProviders>
-          <QueryTabContentComponent {...props} />
-        </TestProviders>
-      );
-
-      expect(
-        wrapper.find(`[data-test-subj="${TimelineTabs.query}-events-table"]`).exists()
-      ).toEqual(true);
-      expect(wrapper.find('[data-test-subj="events"]').exists()).toEqual(false);
-    });
-  });
-});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx
deleted file mode 100644
index 19df23c66d22a4..00000000000000
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content_new/index.tsx
+++ /dev/null
@@ -1,448 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { EuiFlexItem, EuiFlyoutHeader, EuiBadge } from '@elastic/eui';
-import { isEmpty } from 'lodash/fp';
-import React, { useMemo, useEffect, useCallback, useState } from 'react';
-import styled from 'styled-components';
-import type { Dispatch } from 'redux';
-import type { ConnectedProps } from 'react-redux';
-import { connect, useDispatch } from 'react-redux';
-import deepEqual from 'fast-deep-equal';
-import { InPortal } from 'react-reverse-portal';
-import { FilterManager } from '@kbn/data-plugin/public';
-import { getEsQueryConfig } from '@kbn/data-plugin/common';
-import { DataLoadingState } from '@kbn/unified-data-table';
-import { RootDragDropProvider } from '@kbn/dom-drag-drop';
-import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
-import { InputsModelId } from '../../../../common/store/inputs/constants';
-import { useInvalidFilterQuery } from '../../../../common/hooks/use_invalid_filter_query';
-import { timelineActions, timelineSelectors } from '../../../store';
-import type { Direction, TimelineItem } from '../../../../../common/search_strategy';
-import { useTimelineEvents } from '../../../containers';
-import { useKibana } from '../../../../common/lib/kibana';
-import { QueryTabHeader } from './header';
-import { combineQueries } from '../../../../common/lib/kuery';
-import { TimelineRefetch } from '../refetch_timeline';
-import type {
-  KueryFilterQueryKind,
-  RowRenderer,
-  ToggleDetailPanel,
-} from '../../../../../common/types/timeline';
-import { TimelineId, TimelineTabs } from '../../../../../common/types/timeline';
-import { requiredFieldsForActions } from '../../../../detections/components/alerts_table/default_config';
-import type { inputsModel, State } from '../../../../common/store';
-import { inputsSelectors } from '../../../../common/store';
-import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
-import { timelineDefaults } from '../../../store/defaults';
-import { useSourcererDataView } from '../../../../common/containers/sourcerer';
-import { useTimelineEventsCountPortal } from '../../../../common/hooks/use_timeline_events_count';
-import type { TimelineModel } from '../../../store/model';
-import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
-import { useLicense } from '../../../../common/hooks/use_license';
-import { UnifiedTimelineComponent } from '../unified_components';
-import { defaultUdtHeaders } from '../unified_components/default_headers';
-import { StyledTableFlexGroup, StyledTableFlexItem } from '../unified_components/styles';
-import { defaultHeaders } from '../body/column_headers/default_headers';
-
-const TimelineHeaderContainer = styled.div`
-  margin-top: 6px;
-`;
-
-const QueryTabHeaderContainer = styled.div`
-  width: 100%;
-`;
-
-QueryTabHeaderContainer.displayName = 'TimelineHeaderContainer';
-
-const StyledEuiFlyoutHeader = styled(EuiFlyoutHeader)`
-  align-items: stretch;
-  box-shadow: none;
-  display: flex;
-  flex-direction: column;
-`;
-
-const SourcererFlex = styled(EuiFlexItem)`
-  align-items: flex-end;
-`;
-
-SourcererFlex.displayName = 'SourcererFlex';
-
-const VerticalRule = styled.div`
-  width: 2px;
-  height: 100%;
-  background: ${({ theme }) => theme.eui.euiColorLightShade};
-`;
-
-VerticalRule.displayName = 'VerticalRule';
-
-const EventsCountBadge = styled(EuiBadge)`
-  margin-left: ${({ theme }) => theme.eui.euiSizeS};
-`;
-
-const isTimerangeSame = (prevProps: Props, nextProps: Props) =>
-  prevProps.end === nextProps.end &&
-  prevProps.start === nextProps.start &&
-  prevProps.timerangeKind === nextProps.timerangeKind;
-
-const compareQueryProps = (prevProps: Props, nextProps: Props) =>
-  prevProps.kqlMode === nextProps.kqlMode &&
-  prevProps.kqlQueryExpression === nextProps.kqlQueryExpression &&
-  deepEqual(prevProps.filters, nextProps.filters);
-
-interface OwnProps {
-  rowRenderers: RowRenderer[];
-  timelineId: string;
-}
-
-export type Props = OwnProps & PropsFromRedux;
-
-export const NewQueryTabContentComponent: React.FC<Props> = ({
-  activeTab,
-  columns,
-  dataProviders,
-  end,
-  expandedDetail,
-  filters,
-  timelineId,
-  itemsPerPage,
-  itemsPerPageOptions,
-  kqlMode,
-  kqlQueryExpression,
-  kqlQueryLanguage,
-  onEventClosed,
-  rowRenderers,
-  show,
-  showCallOutUnauthorizedMsg,
-  showExpandedDetails,
-  start,
-  status,
-  sort,
-  timerangeKind,
-}) => {
-  const dispatch = useDispatch();
-  const [pageRows, setPageRows] = useState<TimelineItem[][]>([]);
-  const rows = useMemo(() => pageRows.flat(), [pageRows]);
-  const { portalNode: timelineEventsCountPortalNode } = useTimelineEventsCountPortal();
-  const {
-    browserFields,
-    dataViewId,
-    loading: isSourcererLoading,
-    indexPattern,
-    runtimeMappings,
-    // important to get selectedPatterns from useSourcererDataView
-    // in order to include the exclude filters in the search that are not stored in the timeline
-    selectedPatterns,
-  } = useSourcererDataView(SourcererScopeName.timeline);
-
-  const { uiSettings } = useKibana().services;
-  const isEnterprisePlus = useLicense().isEnterprise();
-  const ACTION_BUTTON_COUNT = isEnterprisePlus ? 6 : 5;
-
-  const getManageTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
-
-  const { sampleSize = 10, filterManager: activeFilterManager } = useDeepEqualSelector((state) =>
-    getManageTimeline(state, timelineId ?? TimelineId.active)
-  );
-
-  const filterManager = useMemo(
-    () => activeFilterManager ?? new FilterManager(uiSettings),
-    [activeFilterManager, uiSettings]
-  );
-
-  const esQueryConfig = useMemo(() => getEsQueryConfig(uiSettings), [uiSettings]);
-  const kqlQuery: {
-    query: string;
-    language: KueryFilterQueryKind;
-  } = useMemo(
-    () => ({ query: kqlQueryExpression.trim(), language: kqlQueryLanguage }),
-    [kqlQueryExpression, kqlQueryLanguage]
-  );
-
-  const combinedQueries = combineQueries({
-    config: esQueryConfig,
-    dataProviders,
-    indexPattern,
-    browserFields,
-    filters,
-    kqlQuery,
-    kqlMode,
-  });
-
-  useInvalidFilterQuery({
-    id: timelineId,
-    filterQuery: combinedQueries?.filterQuery,
-    kqlError: combinedQueries?.kqlError,
-    query: kqlQuery,
-    startDate: start,
-    endDate: end,
-  });
-
-  const isBlankTimeline: boolean =
-    isEmpty(dataProviders) &&
-    isEmpty(filters) &&
-    isEmpty(kqlQuery.query) &&
-    combinedQueries?.filterQuery === undefined;
-
-  const canQueryTimeline = useMemo(
-    () =>
-      combinedQueries != null &&
-      isSourcererLoading != null &&
-      !isSourcererLoading &&
-      !isEmpty(start) &&
-      !isEmpty(end) &&
-      combinedQueries?.filterQuery !== undefined,
-    [combinedQueries, end, isSourcererLoading, start]
-  );
-
-  const columnsHeader = useMemo(() => {
-    return isEmpty(columns) ? defaultUdtHeaders : columns;
-  }, [columns]);
-
-  const defaultColumns = useMemo(() => {
-    return columnsHeader.map((c) => c.id);
-  }, [columnsHeader]);
-
-  const getTimelineQueryFields = useCallback(() => {
-    return [...defaultColumns, ...requiredFieldsForActions];
-  }, [defaultColumns]);
-
-  const timelineQuerySortField = sort.map(({ columnId, columnType, esTypes, sortDirection }) => ({
-    field: columnId,
-    direction: sortDirection as Direction,
-    esTypes: esTypes ?? [],
-    type: columnType,
-  }));
-
-  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
-    'unifiedComponentsInTimelineEnabled'
-  );
-
-  useEffect(() => {
-    dispatch(
-      timelineActions.initializeTimelineSettings({
-        filterManager,
-        id: timelineId,
-        defaultColumns: useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders,
-      })
-    );
-  }, [dispatch, filterManager, timelineId, useDiscoverComponentsInTimeline]);
-
-  const [
-    dataLoadingState,
-    { events, inspect, totalCount, refetch, loadPage, pageInfo, refreshedAt },
-  ] = useTimelineEvents({
-    dataViewId,
-    endDate: end,
-    fields: getTimelineQueryFields(),
-    filterQuery: combinedQueries?.filterQuery,
-    id: timelineId,
-    indexNames: selectedPatterns,
-    language: kqlQuery.language,
-    limit: sampleSize,
-    runtimeMappings,
-    skip: !canQueryTimeline,
-    sort: timelineQuerySortField,
-    startDate: start,
-    timerangeKind,
-  });
-
-  const isQueryLoading = useMemo(() => {
-    return (
-      dataLoadingState === DataLoadingState.loading ||
-      dataLoadingState === DataLoadingState.loadingMore
-    );
-  }, [dataLoadingState]);
-
-  useEffect(() => {
-    setPageRows((currentPageRows) => {
-      if (pageInfo.activePage !== 0 && currentPageRows[pageInfo.activePage]?.length) {
-        return currentPageRows;
-      }
-      const newPageRows = pageInfo.activePage === 0 ? [] : [...currentPageRows];
-      newPageRows[pageInfo.activePage] = events;
-      return newPageRows;
-    });
-  }, [events, pageInfo.activePage]);
-
-  useEffect(() => {
-    dispatch(
-      timelineActions.updateIsLoading({
-        id: timelineId,
-        isLoading: isQueryLoading || isSourcererLoading,
-      })
-    );
-  }, [isSourcererLoading, timelineId, dispatch, dataLoadingState, isQueryLoading]);
-
-  const header = useMemo(
-    () => (
-      <StyledEuiFlyoutHeader data-test-subj={`${activeTab}-tab-flyout-header`} hasBorder={false}>
-        <TimelineHeaderContainer data-test-subj="timelineHeader">
-          <QueryTabHeader
-            filterManager={filterManager}
-            show={show && activeTab === TimelineTabs.query}
-            showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg}
-            status={status}
-            timelineId={timelineId}
-          />
-        </TimelineHeaderContainer>
-      </StyledEuiFlyoutHeader>
-    ),
-    [activeTab, filterManager, show, showCallOutUnauthorizedMsg, status, timelineId]
-  );
-
-  // NOTE: The timeline is blank after browser FORWARD navigation (after using back button to navigate to
-  // the previous page from the timeline), yet we still see total count. This is because the timeline
-  // is not getting refreshed when using browser navigation.
-  const showEventsCountBadge = !isBlankTimeline && totalCount >= 0;
-
-  return (
-    <>
-      <InPortal node={timelineEventsCountPortalNode}>
-        {showEventsCountBadge ? (
-          <EventsCountBadge data-test-subj="query_tab_events_count_badge">
-            {totalCount}
-          </EventsCountBadge>
-        ) : null}
-      </InPortal>
-      <TimelineRefetch
-        id={`${timelineId}-${TimelineTabs.query}`}
-        inputId={InputsModelId.timeline}
-        inspect={inspect}
-        loading={isQueryLoading}
-        refetch={refetch}
-        skip={!canQueryTimeline}
-      />
-      <StyledTableFlexGroup direction="column" gutterSize="s">
-        <StyledTableFlexItem grow={false}>{header}</StyledTableFlexItem>
-        <StyledTableFlexItem>
-          <RootDragDropProvider>
-            <UnifiedTimelineComponent
-              columns={columnsHeader}
-              rowRenderers={rowRenderers}
-              timelineId={timelineId}
-              itemsPerPage={itemsPerPage}
-              itemsPerPageOptions={itemsPerPageOptions}
-              sort={sort}
-              events={rows}
-              refetch={refetch}
-              dataLoadingState={dataLoadingState}
-              totalCount={isBlankTimeline ? 0 : totalCount}
-              onEventClosed={onEventClosed}
-              expandedDetail={expandedDetail}
-              showExpandedDetails={showExpandedDetails}
-              onChangePage={loadPage}
-              activeTab={activeTab}
-              updatedAt={refreshedAt}
-              isTextBasedQuery={false}
-            />
-          </RootDragDropProvider>
-        </StyledTableFlexItem>
-      </StyledTableFlexGroup>
-    </>
-  );
-};
-
-const makeMapStateToProps = () => {
-  const getShowCallOutUnauthorizedMsg = timelineSelectors.getShowCallOutUnauthorizedMsg();
-  const getTimeline = timelineSelectors.getTimelineByIdSelector();
-  const getKqlQueryTimeline = timelineSelectors.getKqlFilterKuerySelector();
-  const getInputsTimeline = inputsSelectors.getTimelineSelector();
-  const mapStateToProps = (state: State, { timelineId }: OwnProps) => {
-    const timeline: TimelineModel = getTimeline(state, timelineId) ?? timelineDefaults;
-    const input: inputsModel.InputsRange = getInputsTimeline(state);
-    const {
-      activeTab,
-      columns,
-      dataProviders,
-      expandedDetail,
-      filters,
-      itemsPerPage,
-      itemsPerPageOptions,
-      kqlMode,
-      show,
-      sort,
-      status,
-      timelineType,
-    } = timeline;
-    const kqlQueryTimeline = getKqlQueryTimeline(state, timelineId);
-    const timelineFilter = kqlMode === 'filter' ? filters || [] : [];
-
-    // return events on empty search
-    const kqlQueryExpression =
-      isEmpty(dataProviders) &&
-      isEmpty(kqlQueryTimeline?.expression ?? '') &&
-      timelineType === 'template'
-        ? ' '
-        : kqlQueryTimeline?.expression ?? '';
-
-    const kqlQueryLanguage =
-      isEmpty(dataProviders) && timelineType === 'template'
-        ? 'kuery'
-        : kqlQueryTimeline?.kind ?? 'kuery';
-
-    return {
-      activeTab,
-      columns,
-      dataProviders,
-      end: input.timerange.to,
-      expandedDetail,
-      filters: timelineFilter,
-      timelineId,
-      isLive: input.policy.kind === 'interval',
-      itemsPerPage,
-      itemsPerPageOptions,
-      kqlMode,
-      kqlQueryExpression,
-      kqlQueryLanguage,
-      showCallOutUnauthorizedMsg: getShowCallOutUnauthorizedMsg(state),
-      show,
-      showExpandedDetails:
-        !!expandedDetail[TimelineTabs.query] && !!expandedDetail[TimelineTabs.query]?.panelView,
-      sort,
-      start: input.timerange.from,
-      status,
-      timerangeKind: input.timerange.kind,
-    };
-  };
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  onEventClosed: (args: ToggleDetailPanel) => {
-    dispatch(timelineActions.toggleDetailPanel(args));
-  },
-});
-
-const connector = connect(makeMapStateToProps, mapDispatchToProps);
-
-type PropsFromRedux = ConnectedProps<typeof connector>;
-
-const NewQueryTabContent = connector(
-  React.memo(
-    NewQueryTabContentComponent,
-    (prevProps, nextProps) =>
-      compareQueryProps(prevProps, nextProps) &&
-      prevProps.activeTab === nextProps.activeTab &&
-      isTimerangeSame(prevProps, nextProps) &&
-      prevProps.isLive === nextProps.isLive &&
-      prevProps.itemsPerPage === nextProps.itemsPerPage &&
-      prevProps.onEventClosed === nextProps.onEventClosed &&
-      prevProps.show === nextProps.show &&
-      prevProps.showCallOutUnauthorizedMsg === nextProps.showCallOutUnauthorizedMsg &&
-      prevProps.showExpandedDetails === nextProps.showExpandedDetails &&
-      prevProps.status === nextProps.status &&
-      prevProps.timelineId === nextProps.timelineId &&
-      deepEqual(prevProps.columns, nextProps.columns) &&
-      deepEqual(prevProps.dataProviders, nextProps.dataProviders) &&
-      deepEqual(prevProps.itemsPerPageOptions, nextProps.itemsPerPageOptions) &&
-      deepEqual(prevProps.sort, nextProps.sort)
-  )
-);
-
-// eslint-disable-next-line import/no-default-export
-export { NewQueryTabContent as default };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
index 66ff421b1e40ec..b5c94ce97f670c 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
@@ -84,7 +84,6 @@ const AssistantTabContainer = styled.div`
 `;
 
 const QueryTab = tabWithSuspense(lazy(() => import('../query_tab_content')));
-const NewQueryTab = tabWithSuspense(lazy(() => import('../query_tab_content_new')));
 const EqlTab = tabWithSuspense(lazy(() => import('../eql_tab_content')));
 const GraphTab = tabWithSuspense(lazy(() => import('../graph_tab_content')));
 const NotesTab = tabWithSuspense(lazy(() => import('../notes_tab_content')));
@@ -137,9 +136,6 @@ const ActiveTimelineTab = memo<ActiveTimelineTabProps>(
     showTimeline,
   }) => {
     const { hasAssistantPrivilege } = useAssistantAvailability();
-    const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
-      'unifiedComponentsInTimelineEnabled'
-    );
     const isEsqlSettingEnabled = useKibana().services.configSettings.ESQLEnabled;
     const getTab = useCallback(
       (tab: TimelineTabs) => {
@@ -187,14 +183,6 @@ const ActiveTimelineTab = memo<ActiveTimelineTabProps>(
             timelineId={timelineId}
           />
         </HideShowContainer>
-        {unifiedComponentsInTimelineEnabled && (
-          <HideShowContainer
-            $isVisible={TimelineTabs.queryNew === activeTimelineTab}
-            data-test-subj={`timeline-tab-content-${TimelineTabs.queryNew}`}
-          >
-            <NewQueryTab rowRenderers={rowRenderers} timelineId={timelineId} />
-          </HideShowContainer>
-        )}
         {showTimeline && isEsqlSettingEnabled && activeTimelineTab === TimelineTabs.esql && (
           <HideShowContainer
             $isVisible={true}
@@ -303,9 +291,6 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
   sessionViewConfig,
   timelineDescription,
 }) => {
-  const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
-    'unifiedComponentsInTimelineEnabled'
-  );
   const isEsqlTabInTimelineDisabled = useIsExperimentalFeatureEnabled('timelineEsqlTabDisabled');
   const isEsqlSettingEnabled = useKibana().services.configSettings.ESQLEnabled;
   const { hasAssistantPrivilege } = useAssistantAvailability();
@@ -362,10 +347,6 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
     setActiveTab(TimelineTabs.query);
   }, [setActiveTab]);
 
-  const setQueryNewAsActiveTab = useCallback(() => {
-    setActiveTab(TimelineTabs.queryNew);
-  }, [setActiveTab]);
-
   const setEqlAsActiveTab = useCallback(() => {
     setActiveTab(TimelineTabs.eql);
   }, [setActiveTab]);
@@ -425,18 +406,6 @@ const TabsContentComponent: React.FC<BasicTimelineTab> = ({
             <span>{i18n.QUERY_TAB}</span>
             {showTimeline && <TimelineEventsCountBadge />}
           </StyledEuiTab>
-          {unifiedComponentsInTimelineEnabled && (
-            <StyledEuiTab
-              data-test-subj={`timelineTabs-${TimelineTabs.queryNew}`}
-              onClick={setQueryNewAsActiveTab}
-              isSelected={activeTab === TimelineTabs.queryNew}
-              disabled={false}
-              key={TimelineTabs.queryNew}
-            >
-              {/* TODO: USE PROPER I18N here */}
-              <span>{`${i18n.QUERY_TAB}-NEW`}</span>
-            </StyledEuiTab>
-          )}
           {!isEsqlTabInTimelineDisabled && isEsqlSettingEnabled && (
             <StyledEuiTab
               data-test-subj={`timelineTabs-${TimelineTabs.esql}`}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index 97f4634149f328..d059561345d70f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { memo, useMemo, useCallback, useState, useRef } from 'react';
+import React, { memo, useMemo, useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { generateFilters } from '@kbn/data-plugin/public';
@@ -144,12 +144,9 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
 
     const defaultColumnIds = useMemo(() => columns.map((c) => c.id), [columns]);
 
-    // const [notesMap, setNotesMap] = useState<NotesMap>({});
-    const trGroupRef = useRef<HTMLDivElement | null>(null);
-
-    const {
-      timeline: { filterManager, excludedRowRendererIds, rowHeight, sampleSize } = timelineDefaults,
-    } = useSelector((state: State) => timelineBodySelector(state, timelineId));
+    const { timeline: { filterManager, rowHeight, sampleSize } = timelineDefaults } = useSelector(
+      (state: State) => timelineBodySelector(state, timelineId)
+    );
 
     // const { activeStep, isTourShown, incrementStep } = useTourContext();
 
@@ -466,7 +463,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
               browserFields={browserFields}
               handleOnPanelClosed={handleOnPanelClosed}
               runtimeMappings={runtimeMappings}
-              tabType={TimelineTabs.query}
+              tabType={activeTab}
               scopeId={timelineId}
               isFlyoutView
             />
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx
index 76cd4231180452..ceb3fbeb6011a2 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useRef } from 'react';
 
 import { isActiveTimeline } from '../../../../../helpers';
 import { TimelineId } from '../../../../../../common/types/timeline';
@@ -38,7 +38,12 @@ export const ToolbarAdditionalControlsComponent: React.FC<Props> = ({ timelineId
   const { timelineFullScreen, setTimelineFullScreen } = useTimelineFullScreen();
   const { globalFullScreen, setGlobalFullScreen } = useGlobalFullScreen();
 
+  const toolTipRef = useRef<EuiToolTip>(null);
+
+  const hideToolTip = () => toolTipRef.current?.hideToolTip();
+
   const toggleFullScreen = useCallback(() => {
+    hideToolTip();
     if (timelineId === TimelineId.active) {
       setTimelineFullScreen(!timelineFullScreen);
     } else {
@@ -66,17 +71,12 @@ export const ToolbarAdditionalControlsComponent: React.FC<Props> = ({ timelineId
       <StatefulRowRenderersBrowser data-test-subj="row-renderers-browser" timelineId={timelineId} />
       <FixedWidthLastUpdatedContainer updatedAt={updatedAt} />
       <span className="rightPosition">
-        <EuiToolTip content={fullScreen ? i18n.EXIT_FULL_SCREEN : i18n.FULL_SCREEN}>
+        <EuiToolTip
+          ref={toolTipRef}
+          content={fullScreen ? i18n.EXIT_FULL_SCREEN : i18n.FULL_SCREEN}
+        >
           <EuiButtonIcon
-            aria-label={
-              isFullScreen({
-                globalFullScreen,
-                isActiveTimelines: isActiveTimeline(timelineId),
-                timelineFullScreen,
-              })
-                ? i18n.EXIT_FULL_SCREEN
-                : i18n.FULL_SCREEN
-            }
+            aria-label={fullScreen ? i18n.EXIT_FULL_SCREEN : i18n.FULL_SCREEN}
             className={`${fullScreen ? EXIT_FULL_SCREEN_CLASS_NAME : ''}`}
             color={fullScreen ? 'text' : 'primary'}
             data-test-subj={
@@ -84,8 +84,9 @@ export const ToolbarAdditionalControlsComponent: React.FC<Props> = ({ timelineId
               // this sets the data-test-subj for each case so that tests can differentiate between them
               isActiveTimeline(timelineId) ? 'full-screen-active' : 'full-screen'
             }
-            iconType="fullScreen"
+            iconType={fullScreen ? 'fullScreenExit' : 'fullScreen'}
             onClick={toggleFullScreen}
+            onMouseOut={hideToolTip}
           />
         </EuiToolTip>
       </span>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
index 6b3e059842595f..c20ca6b6906fc4 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
@@ -86,6 +86,10 @@ const SidebarPanelFlexGroup = styled(EuiFlexGroup)`
       .unifiedFieldListSidebar__list {
         padding-left: 0px;
       }
+
+      .unifiedFieldListSidebar__addBtn {
+        margin-right: ${(props) => (props.theme as EuiTheme).eui.euiSizeS};
+      }
     }
   }
 `;
diff --git a/x-pack/plugins/security_solution/public/timelines/hooks/use_create_timeline.tsx b/x-pack/plugins/security_solution/public/timelines/hooks/use_create_timeline.tsx
index 452582d540c7af..c1f00606026e28 100644
--- a/x-pack/plugins/security_solution/public/timelines/hooks/use_create_timeline.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/hooks/use_create_timeline.tsx
@@ -50,7 +50,7 @@ export const useCreateTimeline = ({
 }: UseCreateTimelineParams): ((options?: { timeRange?: TimeRange }) => void) => {
   const dispatch = useDispatch();
   const defaultDataViewSelector = useMemo(() => sourcererSelectors.defaultDataViewSelector(), []);
-  const useDiscoverComponentsInTimeline = useIsExperimentalFeatureEnabled(
+  const unifiedComponentsInTimelineEnabled = useIsExperimentalFeatureEnabled(
     'unifiedComponentsInTimelineEnabled'
   );
   const { id: dataViewId, patternList: selectedPatterns } =
@@ -77,7 +77,7 @@ export const useCreateTimeline = ({
       );
       dispatch(
         timelineActions.createTimeline({
-          columns: useDiscoverComponentsInTimeline ? defaultUdtHeaders : defaultHeaders,
+          columns: unifiedComponentsInTimelineEnabled ? defaultUdtHeaders : defaultHeaders,
           dataViewId,
           id,
           indexNames: selectedPatterns,
@@ -118,7 +118,7 @@ export const useCreateTimeline = ({
       setTimelineFullScreen,
       timelineFullScreen,
       timelineType,
-      useDiscoverComponentsInTimeline,
+      unifiedComponentsInTimelineEnabled,
     ]
   );
 

From e87c5a9668a33af2a4cb6740537eb7c6e924bdfb Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Thu, 15 Feb 2024 07:58:57 +0100
Subject: [PATCH 11/65] switch off feature flag by default

---
 .../plugins/security_solution/common/experimental_features.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/security_solution/common/experimental_features.ts b/x-pack/plugins/security_solution/common/experimental_features.ts
index b437f5374d1f8b..ba63fc8bab0b33 100644
--- a/x-pack/plugins/security_solution/common/experimental_features.ts
+++ b/x-pack/plugins/security_solution/common/experimental_features.ts
@@ -178,7 +178,7 @@ export const allowedExperimentalValues = Object.freeze({
   /*
    * Enables Discover components, UnifiedFieldList and UnifiedDataTable in Timeline.
    */
-  unifiedComponentsInTimelineEnabled: true,
+  unifiedComponentsInTimelineEnabled: false,
 });
 
 type ExperimentalConfigKeys = Array<keyof ExperimentalFeatures>;

From aed026bea799720306de166f7ee3cb27e986fd43 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Thu, 15 Feb 2024 09:28:30 +0100
Subject: [PATCH 12/65] fix: housekeeping

---
 .../security_solution/common/api/timeline/model/api.ts      | 2 --
 .../security_solution/common/types/timeline/index.ts        | 1 -
 .../common/components/sourcerer/get_sourcerer_data_view.tsx | 2 +-
 .../public/timelines/components/open_timeline/helpers.ts    | 6 +++++-
 .../open_timeline/timelines_table/common_columns.tsx        | 6 +++---
 .../components/timeline/body/column_headers/helpers.ts      | 4 +---
 .../timeline/unified_components/data_table/last_updated.tsx | 2 +-
 .../timeline/unified_components/data_table/translations.ts  | 2 +-
 .../security_solution/public/timelines/containers/index.tsx | 2 +-
 9 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/x-pack/plugins/security_solution/common/api/timeline/model/api.ts b/x-pack/plugins/security_solution/common/api/timeline/model/api.ts
index ea2eabcd1b5e17..5237772ef5e1c1 100644
--- a/x-pack/plugins/security_solution/common/api/timeline/model/api.ts
+++ b/x-pack/plugins/security_solution/common/api/timeline/model/api.ts
@@ -266,8 +266,6 @@ export enum RowRendererId {
   zeek = 'zeek',
 }
 
-export const AvailableRowRendererCount = Object.keys(RowRendererId).length;
-
 const RowRendererIdRuntimeType = stringEnum(RowRendererId, 'RowRendererId');
 
 /**
diff --git a/x-pack/plugins/security_solution/common/types/timeline/index.ts b/x-pack/plugins/security_solution/common/types/timeline/index.ts
index 8605b6bba2a788..e9d482344a28e0 100644
--- a/x-pack/plugins/security_solution/common/types/timeline/index.ts
+++ b/x-pack/plugins/security_solution/common/types/timeline/index.ts
@@ -31,7 +31,6 @@ export type ToggleDetailPanel = ExpandedDetailType & {
 
 export enum TimelineTabs {
   query = 'query',
-  queryNew = 'queryNew',
   graph = 'graph',
   notes = 'notes',
   pinned = 'pinned',
diff --git a/x-pack/plugins/security_solution/public/common/components/sourcerer/get_sourcerer_data_view.tsx b/x-pack/plugins/security_solution/public/common/components/sourcerer/get_sourcerer_data_view.tsx
index 30c727b2727563..81c4bb0b9bc6a6 100644
--- a/x-pack/plugins/security_solution/public/common/components/sourcerer/get_sourcerer_data_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/sourcerer/get_sourcerer_data_view.tsx
@@ -9,7 +9,7 @@ import { useMemo } from 'react';
 import { DataView } from '@kbn/data-views-plugin/public';
 import { useSourcererDataView } from '../../containers/sourcerer';
 import { useKibana } from '../../lib/kibana';
-import { SourcererScopeName } from '../../store/sourcerer/model';
+import type { SourcererScopeName } from '../../store/sourcerer/model';
 
 // TODO: Define what the difference is between this and the sourcererDataView returned
 // from useSourcererDataView
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
index 2d207dc60df3e8..7f826d91d6e2cc 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
@@ -342,7 +342,11 @@ export interface QueryTimelineById<TCache> {
   }) => Action<{ id: string; isLoading: boolean }>;
   updateTimeline: DispatchUpdateTimeline;
   savedSearchId?: string;
-  unifiedComponentsInTimelineEnabled?: boolean; // temporary til fully migrate
+  /*
+   * Below feature flag will be removed once
+   * unified components have been fully migrated
+   * */
+  unifiedComponentsInTimelineEnabled?: boolean;
 }
 
 export const queryTimelineById = <TCache>({
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.tsx
index 86dd8488a6a081..649dde8664f794 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.tsx
@@ -70,12 +70,12 @@ export const getCommonColumns = ({
       timelineResult.savedObjectId != null ? (
         <EuiLink
           data-test-subj={`timeline-title-${timelineResult.savedObjectId}`}
-          onClick={() => {
+          onClick={() =>
             onOpenTimeline({
               duplicate: false,
               timelineId: `${timelineResult.savedObjectId}`,
-            });
-          }}
+            })
+          }
         >
           {isUntitled(timelineResult) ? (
             i18n.UNTITLED_TIMELINE
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.ts
index 6022f1c2b78196..93096c3e830a00 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.ts
@@ -65,8 +65,6 @@ export const getColumnHeader = (
   ...(defaultHeaders.find((c) => c.id === fieldName) ?? {}),
 });
 
-
-
 export const getUnifiedDataTableColumnHeader = (
   fieldName: string,
   defaultHeaders: ColumnHeaderOptions[]
@@ -74,4 +72,4 @@ export const getUnifiedDataTableColumnHeader = (
   columnHeaderType: defaultColumnHeaderType,
   id: fieldName,
   ...(defaultHeaders.find((c) => c.id === fieldName) ?? {}),
-});
\ No newline at end of file
+});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx
index 4fa7eff020dc5e..8fd943255c29db 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx
@@ -38,4 +38,4 @@ const FixedWidthLastUpdated = styled.span<{ compact?: boolean }>`
   overflow: hidden;
 `;
 
-FixedWidthLastUpdated.displayName = 'FixedWidthLastUpdated';
\ No newline at end of file
+FixedWidthLastUpdated.displayName = 'FixedWidthLastUpdated';
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts
index 3ed2b0302dab52..9c8d4b39d37e85 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts
@@ -54,4 +54,4 @@ export const LOADING_EVENTS = i18n.translate(
   {
     defaultMessage: 'Loading Events',
   }
-);
\ No newline at end of file
+);
diff --git a/x-pack/plugins/security_solution/public/timelines/containers/index.tsx b/x-pack/plugins/security_solution/public/timelines/containers/index.tsx
index d58e0e2be2a98a..80ffd7ea308368 100644
--- a/x-pack/plugins/security_solution/public/timelines/containers/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/containers/index.tsx
@@ -489,4 +489,4 @@ export const useTimelineEvents = ({
   }, [timelineSearchHandler]);
 
   return [dataLoadingState, timelineResponse];
-};
\ No newline at end of file
+};

From a5c7a81317fcce5f341a2c1ca7553c850fa470b9 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Tue, 20 Feb 2024 06:15:48 +0100
Subject: [PATCH 13/65] fix: cypress + unit tests

---
 .../common/lib/kibana/kibana_react.mock.ts    |   2 +
 .../data_table/index.test.tsx                 |  98 +++++++++
 .../data_table/test.data.ts                   | 198 ++++++++++++++++++
 .../resizable_layout.test.tsx                 |  52 +++++
 .../unified_components/resizable_layout.tsx   |   2 +-
 .../test/security_solution_cypress/config.ts  |   1 +
 .../unified_components/query_tab.cy.ts        | 100 +++++++++
 .../cypress/screens/unified_timeline.ts       |  47 +++++
 .../cypress/tasks/discover.ts                 |   4 +
 .../cypress/tasks/unified_timeline.ts         |  28 +++
 10 files changed, 531 insertions(+), 1 deletion(-)
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/test.data.ts
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx
 create mode 100644 x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
 create mode 100644 x-pack/test/security_solution_cypress/cypress/screens/unified_timeline.ts
 create mode 100644 x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts

diff --git a/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts b/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
index b2cda320603825..f0a32c298c72af 100644
--- a/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
+++ b/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
@@ -52,6 +52,7 @@ import { uiActionsPluginMock } from '@kbn/ui-actions-plugin/public/mocks';
 import { savedSearchPluginMock } from '@kbn/saved-search-plugin/public/mocks';
 import { contractStartServicesMock } from '../../../mocks';
 import { getDefaultConfigSettings } from '../../../../common/config_settings';
+import { fieldFormatsMock } from '@kbn/field-formats-plugin/common/mocks';
 
 const mockUiSettings: Record<string, unknown> = {
   [DEFAULT_TIME_RANGE]: { from: 'now-15m', to: 'now', mode: 'quick' },
@@ -220,6 +221,7 @@ export const createStartServicesMock = (
     uiActions: uiActionsPluginMock.createStartContract(),
     savedSearch: savedSearchPluginMock.createStartContract(),
     setHeaderActionMenu: mockSetHeaderActionMenu,
+    fieldFormats: fieldFormatsMock,
   } as unknown as StartServices;
 };
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
new file mode 100644
index 00000000000000..3af55e3dc218db
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
@@ -0,0 +1,98 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { mockTimelineData, TestProviders } from '../../../../../common/mock';
+import React from 'react';
+import { TimelineDataTableComponent } from '.';
+import { defaultUdtHeaders } from '../default_headers';
+import { createStubDataView } from '@kbn/data-views-plugin/common/data_view.stub';
+import { TimelineId, TimelineTabs } from '../../../../../../common/types';
+import { DataLoadingState } from '@kbn/unified-data-table';
+import { render, screen, waitFor } from '@testing-library/react';
+import { useSourcererDataView } from '../../../../../common/containers/sourcerer';
+import { mockBrowserFields } from '../../../../../common/containers/source/mock';
+import type { ComponentProps } from 'react';
+const mockDataView = createStubDataView({ spec: {} });
+
+jest.mock('../../../../../common/containers/sourcerer');
+
+const onFieldEditedMock = jest.fn();
+const refetchMock = jest.fn();
+const onEventClosedMock = jest.fn();
+const onChangePageMock = jest.fn();
+
+const TestComponent = (props: Partial<ComponentProps<typeof TimelineDataTableComponent>>) => {
+  useSourcererDataView();
+  return (
+    <TestProviders>
+      <TimelineDataTableComponent
+        columns={defaultUdtHeaders}
+        dataView={mockDataView}
+        activeTab={TimelineTabs.query}
+        timelineId={TimelineId.test}
+        itemsPerPage={100}
+        itemsPerPageOptions={[10, 25, 50, 100]}
+        rowRenderers={[]}
+        sort={[
+          {
+            columnId: '@timestamp',
+            columnType: 'date',
+            esTypes: ['date'],
+            sortDirection: 'desc',
+          },
+        ]}
+        events={mockTimelineData}
+        onFieldEdited={onFieldEditedMock}
+        refetch={refetchMock}
+        dataLoadingState={DataLoadingState.loaded}
+        totalCount={1}
+        onEventClosed={onEventClosedMock}
+        showExpandedDetails={false}
+        expandedDetail={{}}
+        onChangePage={onChangePageMock}
+        updatedAt={Date.now()}
+      />
+    </TestProviders>
+  );
+};
+
+describe('unified data table', () => {
+  beforeAll(() => {
+    (useSourcererDataView as jest.Mock).mockReturnValue({
+      browserFields: mockBrowserFields,
+      runtimeMappings: {},
+    });
+  });
+
+  it('should display unified data table', () => {
+    render(<TestComponent />);
+    screen.debug(undefined, 100000);
+    expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+  });
+
+  it('should show details flyout', async () => {
+    render(
+      <TestComponent
+        showExpandedDetails={true}
+        expandedDetail={{
+          query: {
+            params: {
+              eventId: 'some_id',
+              indexName: '',
+            },
+            panelView: 'eventDetail',
+          },
+        }}
+      />
+    );
+    screen.debug(undefined, 1000000);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('timeline:details-panel:flyout')).toBeVisible();
+    });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/test.data.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/test.data.ts
new file mode 100644
index 00000000000000..2fa79f4f368d9f
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/test.data.ts
@@ -0,0 +1,198 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { TimelineItem } from '../../../../../../common/search_strategy';
+
+export const eventsData: TimelineItem[] = [
+  {
+    ecs: {
+      _id: '5d8de53d9afe7cec9d674f7d6882560ad143480698a2920900d628c18552898f',
+      timestamp: '2024-02-14T09:16:10.327Z',
+      _index: '.internal.alerts-security.alerts-default-000001',
+      kibana: {
+        alert: {
+          rule: {
+            from: ['now-6060s'],
+            name: ['CAtch All'],
+            to: ['now'],
+            uuid: ['6ec63433-e14d-42ec-9d37-29d7c0bd9705'],
+            rule_id: ['3fb2916d-3681-42fc-8537-ec81010b58ee'],
+            type: ['query'],
+            version: ['1'],
+            parameters: {
+              severity_mapping: [],
+              references: [],
+              description: 'CAtch All',
+              language: 'kuery',
+              type: 'query',
+              exceptions_list: [],
+              from: 'now-6060s',
+              severity: 'low',
+              max_signals: 100,
+              risk_score: 21,
+              risk_score_mapping: [],
+              author: [],
+              query: '*',
+              index: [
+                'apm-*-transaction*',
+                'auditbeat-*',
+                'endgame-*',
+                'filebeat-*',
+                'logs-*',
+                'packetbeat-*',
+                'traces-apm*',
+                'winlogbeat-*',
+                '-*elastic-cloud-logs-*',
+              ],
+              filters: [],
+              version: 1,
+              rule_id: '3fb2916d-3681-42fc-8537-ec81010b58ee',
+              license: '',
+              required_fields: [],
+              immutable: false,
+              related_integrations: [],
+              meta: { from: '100m', kibana_siem_app_url: 'http://localhost:5601/app/security' },
+              setup: '',
+              false_positives: [],
+              threat: [],
+              to: 'now',
+            },
+          },
+          ancestors: {
+            index: '.ds-logs-endpoint.events.process-default-2024.02.14-000001',
+          },
+          workflow_assignee_ids: ['u_mGBROF_q5bmFCATbLXAcCwKa0k8JvONAwSruelyKA5E_0'],
+          workflow_status: ['open'],
+          original_time: ['2024-02-14T09:15:22.812Z'],
+          severity: ['low'],
+        },
+      },
+      event: {
+        category: ['authentication', 'session'],
+        id: ['b03803e3-0800-4149-bbc2-ea9a4334bea6'],
+        kind: ['signal'],
+        outcome: ['failure'],
+        type: ['start'],
+      },
+      host: {
+        name: ['Host-zckg6ezxy6'],
+        os: {
+          family: ['debian'],
+          name: ['Linux'],
+        },
+        id: ['e08fb0fb-88a9-4187-89e1-ad744643e83b'],
+        ip: ['10.150.209.5'],
+      },
+      user: {
+        name: ['angcqrfgct'],
+        domain: ['cci05abfrt'],
+      },
+      agent: {
+        type: ['endpoint'],
+        id: ['b98e82c8-067d-4ae3-ac05-6f9ed4abaf5f'],
+      },
+      process: {
+        hash: {
+          md5: ['58fd6368-4e37-4099-b372-bcc011418c2b'],
+        },
+        parent: {
+          pid: [2680],
+        },
+        pid: [4055],
+        name: ['notepad.exe'],
+        args: ['"C:\\notepad.exe"', '--0z2'],
+        entity_id: ['ma62qvs0vh'],
+        executable: ['C:\\notepad.exe'],
+        working_directory: ['/home/angcqrfgct/'],
+        entry_leader: {
+          entity_id: ['6ykz6hr912'],
+          name: ['fake entry'],
+          pid: ['957'],
+          start: ['1970-01-01T00:00:00.000Z'],
+        },
+        session_leader: {
+          entity_id: ['6ykz6hr912'],
+          name: ['fake session'],
+          pid: ['238'],
+        },
+        group_leader: {
+          entity_id: ['6ykz6hr912'],
+          name: ['fake leader'],
+          pid: ['171'],
+        },
+      },
+    },
+    data: [
+      {
+        field: '@timestamp',
+        value: ['2024-02-14T09:16:10.327Z'],
+      },
+      {
+        field: 'kibana.alert.workflow_assignee_ids',
+        value: ['u_mGBROF_q5bmFCATbLXAcCwKa0k8JvONAwSruelyKA5E_0'],
+      },
+      {
+        field: 'kibana.alert.workflow_status',
+        value: ['open'],
+      },
+      {
+        field: 'kibana.alert.original_time',
+        value: ['2024-02-14T09:15:22.812Z'],
+      },
+      {
+        field: 'kibana.alert.rule.from',
+        value: ['now-6060s'],
+      },
+      {
+        field: 'kibana.alert.rule.name',
+        value: ['CAtch All'],
+      },
+      {
+        field: 'kibana.alert.rule.to',
+        value: ['now'],
+      },
+      {
+        field: 'kibana.alert.rule.uuid',
+        value: ['6ec63433-e14d-42ec-9d37-29d7c0bd9705'],
+      },
+      {
+        field: 'kibana.alert.rule.rule_id',
+        value: ['3fb2916d-3681-42fc-8537-ec81010b58ee'],
+      },
+      {
+        field: 'kibana.alert.rule.type',
+        value: ['query'],
+      },
+      {
+        field: 'kibana.alert.original_event.kind',
+        value: ['event'],
+      },
+      {
+        field: 'event.category',
+        value: ['authentication', 'session'],
+      },
+      {
+        field: 'host.name',
+        value: ['Host-zckg6ezxy6'],
+      },
+      {
+        field: 'user.name',
+        value: ['angcqrfgct'],
+      },
+      {
+        field: 'host.os.family',
+        value: ['debian'],
+      },
+      {
+        field: 'process.entry_leader.entity_id',
+        value: ['6ykz6hr912'],
+      },
+    ],
+    _id: '5d8de53d9afe7cec9d674f7d6882560ad143480698a2920900d628c18552898f',
+    _index: '.internal.alerts-security.alerts-default-000001',
+  },
+];
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx
new file mode 100644
index 00000000000000..419d6cdfdd29b6
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import TimelineResizableLayout from './resizable_layout';
+
+// jest.mock('react-reverse-portal', () => ({
+//   InPortal: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+//   OutPortal: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+//   createHtmlPortalNode: () => ({ unmount: jest.fn() }),
+// }));
+
+const TestSideBarPanel = () => <div data-test-subj="sidebar__panel">{'Sidebar Panel'}</div>;
+
+const MainPanel = () => <div data-test-subj="main__panel">{'Main Panel'}</div>;
+
+const container = document.createElement('div');
+container.style.width = '1000px';
+container.style.height = '1000px';
+container.getBoundingClientRect = jest.fn(() => {
+  return {
+    width: '1000',
+    height: '1000',
+  };
+});
+
+const TestComponent = () => {
+  return (
+    <TimelineResizableLayout
+      sidebarPanel={TestSideBarPanel}
+      mainPanel={MainPanel}
+      unifiedFieldListSidebarContainerApi={null}
+      container={container}
+    />
+  );
+};
+
+describe('ResizableLayout', () => {
+  it('should render without any issues', async () => {
+    render(<TestComponent />);
+    screen.debug(undefined, 100000);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('sidebar__panel')).toBeVisible();
+    });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx
index eb90a17b30e76f..706f8c7a706b21 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx
@@ -85,4 +85,4 @@ export const TimelineResizableLayoutComponent = ({
 
 export const TimelineResizableLayout = React.memo(TimelineResizableLayoutComponent);
 // eslint-disable-next-line import/no-default-export
-export { TimelineResizableLayout as default };
\ No newline at end of file
+export { TimelineResizableLayout as default };
diff --git a/x-pack/test/security_solution_cypress/config.ts b/x-pack/test/security_solution_cypress/config.ts
index fb34362f7fb9b5..e4a7639736e44e 100644
--- a/x-pack/test/security_solution_cypress/config.ts
+++ b/x-pack/test/security_solution_cypress/config.ts
@@ -46,6 +46,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
         '--xpack.ruleRegistry.unsafe.legacyMultiTenancy.enabled=true',
         `--xpack.securitySolution.enableExperimental=${JSON.stringify([
           'chartEmbeddablesEnabled',
+          'unifiedComponentsInTimelineEnabled',
         ])}`,
         // mock cloud to enable the guided onboarding tour in e2e tests
         '--xpack.cloud.id=test',
diff --git a/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts b/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
new file mode 100644
index 00000000000000..2507737d0a1b54
--- /dev/null
+++ b/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
@@ -0,0 +1,100 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { CELL_ADD_TO_TIMELINE_BUTTON } from '../../../../screens/alerts';
+import {
+  openEventDetailsFlyout,
+  openHostDetailsFlyout,
+  openUserDetailsFlyout,
+} from '../../../../tasks/unified_timeline';
+import {
+  CELL_FILTER_IN_BUTTON,
+  GET_UNIFIED_DATA_GRID_CELL,
+  GET_UNIFIED_DATA_GRID_CELL_HEADER,
+  TIMELINE_DETAILS_FLYOUT,
+  TIMELINE_DETAILS_FLYOUT_CLOSE_BTN,
+} from '../../../../screens/unified_timeline';
+import {
+  TIMELINE_DATA_PROVIDERS_CONTAINER,
+  TIMELINE_FILTER_BADGE,
+} from '../../../../screens/timeline';
+import { GET_DISCOVER_DATA_GRID_CELL_HEADER } from '../../../../screens/discover';
+import { addFieldToTable, removeFieldFromTable } from '../../../../tasks/discover';
+import { login } from '../../../../tasks/login';
+import { visitWithTimeRange } from '../../../../tasks/navigation';
+import { openTimelineUsingToggle } from '../../../../tasks/security_main';
+import { createNewTimeline, executeTimelineSearch } from '../../../../tasks/timeline';
+import { ALERTS_URL } from '../../../../urls/navigation';
+
+describe(
+  'Unsaved Timeline query tab',
+  {
+    tags: ['@ess', '@serverless'],
+    env: {
+      ftrConfig: {
+        kbnServerArgs: [
+          `--xpack.securitySolution.enableExperimental=${JSON.stringify([
+            'unifiedComponentsInTimelineEnabled',
+          ])}`,
+        ],
+      },
+    },
+  },
+  () => {
+    beforeEach(() => {
+      login();
+      visitWithTimeRange(ALERTS_URL);
+      openTimelineUsingToggle();
+      createNewTimeline();
+      executeTimelineSearch('*');
+    });
+    it('should be able to add/remove columns correctly', () => {
+      cy.get(GET_UNIFIED_DATA_GRID_CELL_HEADER('agent.type')).should('not.exist');
+      addFieldToTable('agent.type');
+      cy.get(GET_DISCOVER_DATA_GRID_CELL_HEADER('agent.type')).should('be.visible');
+      removeFieldFromTable('agent.type');
+      cy.get(GET_DISCOVER_DATA_GRID_CELL_HEADER('agent.type')).should('not.exist');
+    });
+
+    context('hover actions', () => {
+      it('should add to timeline successfully', () => {
+        cy.get(GET_UNIFIED_DATA_GRID_CELL('host.name', 0)).then(($el) => {
+          const hostName = $el.text();
+          cy.get(GET_UNIFIED_DATA_GRID_CELL('host.name', 0)).realHover();
+          cy.get(CELL_ADD_TO_TIMELINE_BUTTON).click();
+          cy.get(TIMELINE_DATA_PROVIDERS_CONTAINER).contains(`host.name: "${hostName}"`);
+        });
+      });
+      it('should filter In successfully', () => {
+        cy.get(GET_UNIFIED_DATA_GRID_CELL('user.name', 0)).then(($el) => {
+          const hostName = $el.text();
+          cy.get(GET_UNIFIED_DATA_GRID_CELL('user.name', 0)).realHover();
+          cy.get(CELL_FILTER_IN_BUTTON).click();
+          cy.get(TIMELINE_FILTER_BADGE).should('have.lengthOf', 1);
+          cy.get(TIMELINE_FILTER_BADGE).eq(0).should('have.text', `user.name: ${hostName}`);
+        });
+      });
+    });
+
+    context('flyout', () => {
+      it('should be able to open/close details details/host/user flyout', () => {
+        cy.log('Event Details Flyout');
+        openEventDetailsFlyout(0);
+        cy.get(TIMELINE_DETAILS_FLYOUT_CLOSE_BTN).click();
+        cy.get(TIMELINE_DETAILS_FLYOUT).should('not.exist');
+        cy.log('Host Details Flyout');
+        openHostDetailsFlyout(0);
+        cy.get(TIMELINE_DETAILS_FLYOUT_CLOSE_BTN).click();
+        cy.get(TIMELINE_DETAILS_FLYOUT).should('not.exist');
+        cy.log('User Details Flyout');
+        openUserDetailsFlyout(0);
+        cy.get(TIMELINE_DETAILS_FLYOUT_CLOSE_BTN).click();
+        cy.get(TIMELINE_DETAILS_FLYOUT).should('not.exist');
+      });
+    });
+  }
+);
diff --git a/x-pack/test/security_solution_cypress/cypress/screens/unified_timeline.ts b/x-pack/test/security_solution_cypress/cypress/screens/unified_timeline.ts
new file mode 100644
index 00000000000000..f8504cdf798f5d
--- /dev/null
+++ b/x-pack/test/security_solution_cypress/cypress/screens/unified_timeline.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { getDataTestSubjectSelector } from '../helpers/common';
+
+export const TIMELINE_DETAILS_FLYOUT_BTN = getDataTestSubjectSelector('docTableExpandToggleColumn');
+
+export const HOST_DETAILS_FLYOUT = getDataTestSubjectSelector('host-details-button');
+
+export const USER_DETAILS_FLYOUT = getDataTestSubjectSelector('users-link-anchor');
+
+export const TIMELINE_DETAILS_FLYOUT = getDataTestSubjectSelector('timeline:details-panel:flyout');
+
+export const TIMELINE_DETAILS_FLYOUT_CLOSE_BTN = getDataTestSubjectSelector('euiFlyoutCloseButton');
+
+export const TIMELINE_UNIFIED_DATA_GRID = `${getDataTestSubjectSelector(
+  'timelineUnifiedComponentsLayoutResizablePanelFlex'
+)} ${getDataTestSubjectSelector('docTable')}`;
+
+export const CELL_FILTER_IN_BUTTON = getDataTestSubjectSelector(
+  'dataGridColumnCellAction-security-default-cellActions-filterIn'
+);
+
+export const CELL_FILTER_OUT_BUTTON = getDataTestSubjectSelector(
+  'dataGridColumnCellAction-security-default-cellActions-filterOut'
+);
+
+export const CELL_ADD_TO_TIMELINE_BUTTON = getDataTestSubjectSelector(
+  'dataGridColumnCellAction-security-default-cellActions-addToTimeline'
+);
+
+export const CELL_SHOW_TOP_FIELD_BUTTON = getDataTestSubjectSelector(
+  'dataGridColumnCellAction-security-default-cellActions-showTopN'
+);
+
+export const GET_UNIFIED_DATA_GRID_CELL_HEADER = (columnId: string) =>
+  getDataTestSubjectSelector(`dataGridHeaderCell-${columnId}`);
+
+export const GET_UNIFIED_DATA_GRID_CELL = (columnId: string, rowIndex: number) => {
+  return `${TIMELINE_UNIFIED_DATA_GRID} ${getDataTestSubjectSelector(
+    'dataGridRowCell'
+  )}[data-gridcell-column-id="${columnId}"][data-gridcell-row-index="${rowIndex}"] .unifiedDataTable__cellValue`;
+};
diff --git a/x-pack/test/security_solution_cypress/cypress/tasks/discover.ts b/x-pack/test/security_solution_cypress/cypress/tasks/discover.ts
index 19e455cd4b648d..8bc39cc7ccd5e2 100644
--- a/x-pack/test/security_solution_cypress/cypress/tasks/discover.ts
+++ b/x-pack/test/security_solution_cypress/cypress/tasks/discover.ts
@@ -112,6 +112,10 @@ export const addFieldToTable = (fieldId: string) => {
   clearFieldSearch();
 };
 
+export const removeFieldFromTable = (fieldId: string) => {
+  cy.get(GET_DISCOVER_COLUMN_TOGGLE_BTN(fieldId)).first().trigger('click');
+};
+
 export const createAdHocDataView = (name: string, indexPattern: string, save: boolean = false) => {
   openDataViewSwitcher();
   cy.get(DISCOVER_DATA_VIEW_SWITCHER.CREATE_NEW).trigger('click');
diff --git a/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts b/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts
new file mode 100644
index 00000000000000..d1a79481314350
--- /dev/null
+++ b/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  HOST_DETAILS_FLYOUT,
+  TIMELINE_DETAILS_FLYOUT,
+  TIMELINE_DETAILS_FLYOUT_BTN,
+  USER_DETAILS_FLYOUT,
+} from '../screens/unified_timeline';
+
+export const openEventDetailsFlyout = (rowIndex: number) => {
+  cy.get(TIMELINE_DETAILS_FLYOUT_BTN).eq(rowIndex).click();
+  cy.get(TIMELINE_DETAILS_FLYOUT).should('be.visible');
+};
+
+export const openHostDetailsFlyout = (rowIndex: number) => {
+  cy.get(HOST_DETAILS_FLYOUT).eq(rowIndex).click();
+  cy.get(TIMELINE_DETAILS_FLYOUT).should('be.visible');
+};
+
+export const openUserDetailsFlyout = (rowIndex: number) => {
+  cy.get(USER_DETAILS_FLYOUT).eq(rowIndex).click();
+  cy.get(TIMELINE_DETAILS_FLYOUT).should('be.visible');
+};

From 6fb3befdc0c729414449598b372925bf61605dc2 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Tue, 20 Feb 2024 09:37:18 +0100
Subject: [PATCH 14/65] fix: types

---
 .../timeline/unified_components/resizable_layout.test.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx
index 419d6cdfdd29b6..70cfc3e72d8986 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx
@@ -24,9 +24,11 @@ container.style.width = '1000px';
 container.style.height = '1000px';
 container.getBoundingClientRect = jest.fn(() => {
   return {
-    width: '1000',
-    height: '1000',
-  };
+    width: 1000,
+    height: 1000,
+    x: 0,
+    y: 0,
+  } as DOMRect;
 });
 
 const TestComponent = () => {

From 9595983ce87d65b3eb55f7b2817e48aec1e55ad8 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Wed, 21 Feb 2024 06:48:45 +0100
Subject: [PATCH 15/65] fix: alert acount

---
 .../components/timeline/query_tab_content/index.tsx      | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
index db993e7d886c5b..d0eb810b2457f5 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
@@ -340,6 +340,9 @@ export const QueryTabContentComponent: React.FC<Props> = ({
   const header = useMemo(
     () => (
       <StyledEuiFlyoutHeader data-test-subj={`${activeTab}-tab-flyout-header`} hasBorder={false}>
+        <InPortal node={timelineEventsCountPortalNode}>
+          {showEventsCountBadge ? <EventsCountBadge>{totalCount}</EventsCountBadge> : null}
+        </InPortal>
         <EuiFlexGroup gutterSize="s" direction="column">
           {!unifiedComponentsInTimelineEnabled &&
             timelineFullScreen &&
@@ -382,6 +385,9 @@ export const QueryTabContentComponent: React.FC<Props> = ({
       setTimelineFullScreen,
       timelineFullScreen,
       unifiedComponentsInTimelineEnabled,
+      timelineEventsCountPortalNode,
+      showEventsCountBadge,
+      totalCount,
     ]
   );
 
@@ -413,9 +419,6 @@ export const QueryTabContentComponent: React.FC<Props> = ({
 
   return (
     <>
-      <InPortal node={timelineEventsCountPortalNode}>
-        {showEventsCountBadge ? <EventsCountBadge>{totalCount}</EventsCountBadge> : null}
-      </InPortal>
       <TimelineRefetch
         id={`${timelineId}-${TimelineTabs.query}`}
         inputId={InputsModelId.timeline}

From d42cb2ea8ee88ca6f5ed82a29da293b1727dff11 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Wed, 21 Feb 2024 07:39:01 +0100
Subject: [PATCH 16/65] fix: some tests + remove unnecessary changes

---
 ...use_data_grid_column_cell_actions.test.tsx | 64 ++++++++++---------
 .../src/components/data_table.test.tsx        | 41 +++++++-----
 .../connector/api_key_configuration.tsx       | 11 +---
 .../flash_messages/flash_messages.test.tsx    | 15 +----
 .../fleet_server_host.test.ts                 |  4 +-
 5 files changed, 63 insertions(+), 72 deletions(-)

diff --git a/packages/kbn-cell-actions/src/hooks/use_data_grid_column_cell_actions.test.tsx b/packages/kbn-cell-actions/src/hooks/use_data_grid_column_cell_actions.test.tsx
index 014cb526c81fe7..a2a2a1e15ade59 100644
--- a/packages/kbn-cell-actions/src/hooks/use_data_grid_column_cell_actions.test.tsx
+++ b/packages/kbn-cell-actions/src/hooks/use_data_grid_column_cell_actions.test.tsx
@@ -161,22 +161,24 @@ describe('useDataGridColumnsCellActions', () => {
     cellAction1.getByTestId(`dataGridColumnCellAction-${action1.id}`).click();
 
     await waitFor(() => {
-      expect(action1.execute).toHaveBeenCalledWith(
-        expect.objectContaining({
-          data: [
-            {
-              value: fieldValues[field1.name][1],
-              field: {
-                name: field1.name,
-                type: field1.type,
-                aggregatable: true,
-                searchable: true,
-              },
+      expect(action1.execute).toHaveBeenCalledWith({
+        data: [
+          {
+            value: fieldValues[field1.name][1],
+            field: {
+              name: field1.name,
+              type: field1.type,
+              aggregatable: true,
+              searchable: true,
             },
-          ],
-          trigger: { id: useDataGridColumnsCellActionsProps.triggerId },
-        })
-      );
+          },
+        ],
+        metadata: {
+          some: 'value',
+        },
+        nodeRef: expect.any(Object),
+        trigger: { id: useDataGridColumnsCellActionsProps.triggerId },
+      });
     });
 
     const cellAction2 = renderCellAction(result.current[1][1], { rowIndex: 2 });
@@ -184,22 +186,24 @@ describe('useDataGridColumnsCellActions', () => {
     cellAction2.getByTestId(`dataGridColumnCellAction-${action2.id}`).click();
 
     await waitFor(() => {
-      expect(action2.execute).toHaveBeenCalledWith(
-        expect.objectContaining({
-          data: [
-            {
-              value: fieldValues[field2.name][2],
-              field: {
-                name: field2.name,
-                type: field2.type,
-                aggregatable: true,
-                searchable: true,
-              },
+      expect(action2.execute).toHaveBeenCalledWith({
+        data: [
+          {
+            value: fieldValues[field2.name][2],
+            field: {
+              name: field2.name,
+              type: field2.type,
+              aggregatable: true,
+              searchable: true,
             },
-          ],
-          trigger: { id: useDataGridColumnsCellActionsProps.triggerId },
-        })
-      );
+          },
+        ],
+        metadata: {
+          some: 'value',
+        },
+        nodeRef: expect.any(Object),
+        trigger: { id: useDataGridColumnsCellActionsProps.triggerId },
+      });
     });
   });
 
diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx
index c5bf7f17b49239..659b59ce4be837 100644
--- a/packages/kbn-unified-data-table/src/components/data_table.test.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table.test.tsx
@@ -73,6 +73,9 @@ function getProps(): UnifiedDataTableProps {
       data: services.data,
       theme: services.theme,
     },
+    cellActionsMetadata: {
+      someKey: 'someValue',
+    },
   };
 }
 
@@ -253,13 +256,15 @@ describe('UnifiedDataTable', () => {
         columns: ['message'],
         onFieldEdited: jest.fn(),
       });
-      expect(mockUseDataGridColumnsCellActions).toHaveBeenCalledWith(
-        expect.objectContaining({
-          triggerId: undefined,
-          getCellValue: expect.any(Function),
-          fields: undefined,
-        })
-      );
+      expect(mockUseDataGridColumnsCellActions).toHaveBeenCalledWith({
+        triggerId: undefined,
+        getCellValue: expect.any(Function),
+        fields: undefined,
+        dataGridRef: expect.any(Object),
+        metadata: {
+          someKey: 'someValue',
+        },
+      });
     });
 
     it('should call useDataGridColumnsCellActions properly when cellActionsTriggerId defined', async () => {
@@ -269,16 +274,18 @@ describe('UnifiedDataTable', () => {
         onFieldEdited: jest.fn(),
         cellActionsTriggerId: 'test',
       });
-      expect(mockUseDataGridColumnsCellActions).toHaveBeenCalledWith(
-        expect.objectContaining({
-          triggerId: 'test',
-          getCellValue: expect.any(Function),
-          fields: [
-            dataViewMock.getFieldByName('@timestamp')?.toSpec(),
-            dataViewMock.getFieldByName('message')?.toSpec(),
-          ],
-        })
-      );
+      expect(mockUseDataGridColumnsCellActions).toHaveBeenCalledWith({
+        triggerId: 'test',
+        getCellValue: expect.any(Function),
+        fields: [
+          dataViewMock.getFieldByName('@timestamp')?.toSpec(),
+          dataViewMock.getFieldByName('message')?.toSpec(),
+        ],
+        dataGridRef: expect.any(Object),
+        metadata: {
+          someKey: 'someValue',
+        },
+      });
     });
   });
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/api_key_configuration.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/api_key_configuration.tsx
index 55842f3068fa08..e9aaa9f6ef68fb 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/api_key_configuration.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/api_key_configuration.tsx
@@ -19,7 +19,6 @@ import {
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
 
 import { Status } from '../../../../../../common/types/api';
 import { GenerateConnectorApiKeyApiLogic } from '../../../api/connector/generate_connector_api_key_api_logic';
@@ -146,15 +145,7 @@ export const ApiKeyConfig: React.FC<{
         <>
           <EuiSpacer />
           <EuiFlexItem>
-            <ApiKey
-              apiKey={data?.encoded}
-              label={
-                <FormattedMessage
-                  id="xpack.enterpriseSearch.apiKeyConfig.apiKey.apiKeyLabel"
-                  defaultMessage="API Key"
-                />
-              }
-            />
+            <ApiKey apiKey={data?.encoded} label="API Key" />
           </EuiFlexItem>
         </>
       )}
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/flash_messages.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/flash_messages.test.tsx
index 35a2d9580a3733..78670c70f9a00e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/flash_messages.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/flash_messages/flash_messages.test.tsx
@@ -12,8 +12,6 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { EuiCallOut } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
 
 import { FlashMessages } from './flash_messages';
 
@@ -24,13 +22,7 @@ describe('FlashMessages', () => {
       {
         type: 'error',
         message: 'Whoa nelly!',
-        description: (
-          <div data-test-subj="error">
-            {i18n.translate('xpack.enterpriseSearch..div.somethingWentWrongLabel', {
-              defaultMessage: 'Something went wrong',
-            })}
-          </div>
-        ),
+        description: <div data-test-subj="error">Something went wrong</div>,
       },
       { type: 'info', message: 'Everything is fine, nothing is ruined' },
       { type: 'warning', message: 'Uh oh' },
@@ -52,10 +44,7 @@ describe('FlashMessages', () => {
     const wrapper = shallow(
       <FlashMessages>
         <button data-test-subj="testing">
-          <FormattedMessage
-            id="xpack.enterpriseSearch..button.someActionYouLabel"
-            defaultMessage="Some action - you could even clear flash messages here"
-          />
+          Some action - you could even clear flash messages here
         </button>
       </FlashMessages>
     );
diff --git a/x-pack/plugins/fleet/server/services/preconfiguration/fleet_server_host.test.ts b/x-pack/plugins/fleet/server/services/preconfiguration/fleet_server_host.test.ts
index 2130ac84a06624..22651dfae14052 100644
--- a/x-pack/plugins/fleet/server/services/preconfiguration/fleet_server_host.test.ts
+++ b/x-pack/plugins/fleet/server/services/preconfiguration/fleet_server_host.test.ts
@@ -15,8 +15,6 @@ import {
   updateFleetServerHost,
 } from '../fleet_server_host';
 
-import type { FleetServerHost } from '../../../common/types';
-
 import {
   createCloudFleetServerHostIfNeeded,
   getCloudFleetServersHosts,
@@ -24,6 +22,8 @@ import {
   createOrUpdatePreconfiguredFleetServerHosts,
 } from './fleet_server_host';
 
+import type { FleetServerHost } from '../../../common/types';
+
 jest.mock('../fleet_server_host');
 jest.mock('../app_context');
 jest.mock('../agent_policy');

From aa41a23a481967390b629f55b04622bdec7abef3 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Thu, 22 Feb 2024 09:52:49 +0100
Subject: [PATCH 17/65] fix: translations

---
 .../data_table/translations.ts                | 24 ++++++++++-------
 .../get_fields_list_creation_options.ts       | 27 ++++++++++++-------
 2 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts
index 9c8d4b39d37e85..417bedc419e154 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts
@@ -11,13 +11,19 @@ export const DRAG_DROP_FIELD = i18n.translate('discover.dropZoneTableLabel', {
   defaultMessage: 'Drop zone to add field as a column to the table',
 });
 
-export const FULL_SCREEN = i18n.translate('xpack.securitySolution.timeline.fullScreenButton', {
-  defaultMessage: 'Enter fullscreen',
-});
+export const FULL_SCREEN = i18n.translate(
+  'xpack.securitySolution.timeline.dataTable.fullScreenButton',
+  {
+    defaultMessage: 'Enter fullscreen',
+  }
+);
 
-export const EXIT_FULL_SCREEN = i18n.translate('xpack.securitySolution.exitFullScreenButton', {
-  defaultMessage: 'Exit fullscreen (esc)',
-});
+export const EXIT_FULL_SCREEN = i18n.translate(
+  'xpack.securitySolution.timeline.dataTable.exitFullScreenButton',
+  {
+    defaultMessage: 'Exit fullscreen (esc)',
+  }
+);
 
 export const EVENTS = i18n.translate('xpack.securitySolution.footer.events', {
   defaultMessage: 'Events',
@@ -36,21 +42,21 @@ export const LOADING = i18n.translate('xpack.securitySolution.footer.loadingLabe
 });
 
 export const TOTAL_COUNT_OF_EVENTS = i18n.translate(
-  'xpack.securitySolution.footer.totalCountOfEvents',
+  'xpack.securitySolution.timeline.dataTable.footer.totalCountOfEvents',
   {
     defaultMessage: 'events',
   }
 );
 
 export const AUTO_REFRESH_ACTIVE = i18n.translate(
-  'xpack.securitySolution.footer.autoRefreshActiveDescription',
+  'xpack.securitySolution.timeline.dataTable.footer.autoRefreshActiveDescription',
   {
     defaultMessage: 'Auto-Refresh Active',
   }
 );
 
 export const LOADING_EVENTS = i18n.translate(
-  'xpack.securitySolution.footer.loadingEventsDataLabel',
+  'xpack.securitySolution.timeline.dataTable.footer.loadingEventsDataLabel',
   {
     defaultMessage: 'Loading Events',
   }
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/get_fields_list_creation_options.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/get_fields_list_creation_options.ts
index 012a1693ec9a7e..bbcf9eb4f4a40c 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/get_fields_list_creation_options.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/get_fields_list_creation_options.ts
@@ -20,21 +20,30 @@ export const getFieldsListCreationOptions: UnifiedFieldListSidebarContainerProps
       showSidebarToggleButton: true,
       disablePopularFields: false,
       buttonAddFieldToWorkspaceProps: {
-        'aria-label': i18n.translate('timeline.fieldChooser.timelineField.addFieldTooltip', {
-          defaultMessage: 'Add field as column',
-        }),
+        'aria-label': i18n.translate(
+          'xpack.securitySolution.fieldChooser.timelineField.addFieldTooltip',
+          {
+            defaultMessage: 'Add field as column',
+          }
+        ),
       },
       buttonRemoveFieldFromWorkspaceProps: {
-        'aria-label': i18n.translate('timeline.fieldChooser.timelineField.removeFieldTooltip', {
-          defaultMessage: 'Remove field from table',
-        }),
+        'aria-label': i18n.translate(
+          'xpack.securitySolution.timeline.fieldChooser.timelineField.removeFieldTooltip',
+          {
+            defaultMessage: 'Remove field from table',
+          }
+        ),
       },
       onOverrideFieldGroupDetails: (groupName) => {
         if (groupName === FieldsGroupNames.AvailableFields) {
           return {
-            helpText: i18n.translate('timeline.fieldChooser.availableFieldsTooltip', {
-              defaultMessage: 'Fields available for display in the table.',
-            }),
+            helpText: i18n.translate(
+              'xpack.securitySolution.timeline.fieldChooser.availableFieldsTooltip',
+              {
+                defaultMessage: 'Fields available for display in the table.',
+              }
+            ),
           };
         }
       },

From aaf4ba49f2a848b8636d1696c67b14dce65263f9 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Thu, 22 Feb 2024 10:09:31 +0100
Subject: [PATCH 18/65] fix: more translations

---
 .../data_table/translations.ts                  | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts
index 417bedc419e154..a0c5526d191b71 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/translations.ts
@@ -7,9 +7,12 @@
 
 import { i18n } from '@kbn/i18n';
 
-export const DRAG_DROP_FIELD = i18n.translate('discover.dropZoneTableLabel', {
-  defaultMessage: 'Drop zone to add field as a column to the table',
-});
+export const DRAG_DROP_FIELD = i18n.translate(
+  'xpack.securitySolution.timeline.dataTable.dropZoneTableLabel',
+  {
+    defaultMessage: 'Drop zone to add field as a column to the table',
+  }
+);
 
 export const FULL_SCREEN = i18n.translate(
   'xpack.securitySolution.timeline.dataTable.fullScreenButton',
@@ -25,19 +28,19 @@ export const EXIT_FULL_SCREEN = i18n.translate(
   }
 );
 
-export const EVENTS = i18n.translate('xpack.securitySolution.footer.events', {
+export const EVENTS = i18n.translate('xpack.securitySolution.timeline.footer.events', {
   defaultMessage: 'Events',
 });
 
-export const OF = i18n.translate('xpack.securitySolution.footer.of', {
+export const OF = i18n.translate('xpack.securitySolution.timeline.footer.of', {
   defaultMessage: 'of',
 });
 
-export const ROWS = i18n.translate('xpack.securitySolution.footer.rows', {
+export const ROWS = i18n.translate('xpack.securitySolution.timeline.footer.rows', {
   defaultMessage: 'rows',
 });
 
-export const LOADING = i18n.translate('xpack.securitySolution.footer.loadingLabel', {
+export const LOADING = i18n.translate('xpack.securitySolution.timeline.footer.loadingLabel', {
   defaultMessage: 'Loading',
 });
 

From c994a048deb5d94c5ea9c207cd099c41fdf74da2 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Fri, 23 Feb 2024 20:43:58 +0100
Subject: [PATCH 19/65] fix: add query tab unit tests

---
 .../public/common/containers/source/mock.ts   |  39 +-
 .../common/containers/sourcerer/mocks.ts      |  22 +-
 .../common/lib/kibana/kibana_react.mock.ts    |  13 +-
 .../public/common/mock/global_state.ts        |   4 +
 .../timeline/body/unified_timeline_body.tsx   |   2 +-
 .../__snapshots__/index.test.tsx.snap         |   2 +-
 .../timeline/query_tab_content/index.test.tsx |   2 +-
 .../timeline/query_tab_content/index.tsx      |   1 +
 .../query_tab_unified_components.test.tsx     | 436 ++++++++++++++++++
 .../unified_components/data_table/index.tsx   |  23 +-
 .../timeline/unified_components/index.tsx     |   9 +-
 11 files changed, 490 insertions(+), 63 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx

diff --git a/x-pack/plugins/security_solution/public/common/containers/source/mock.ts b/x-pack/plugins/security_solution/public/common/containers/source/mock.ts
index f253e694aa81c8..0a2866a846dd8d 100644
--- a/x-pack/plugins/security_solution/public/common/containers/source/mock.ts
+++ b/x-pack/plugins/security_solution/public/common/containers/source/mock.ts
@@ -6,6 +6,7 @@
  */
 
 import type { MappingRuntimeFieldType } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
+import { flatten } from 'lodash';
 import { DEFAULT_INDEX_PATTERN } from '../../../../common/constants';
 import type { BrowserFields } from '../../../../common/search_strategy/index_fields';
 
@@ -47,40 +48,6 @@ export const mocksSource = {
   ],
 };
 
-export const mockIndexFields = [
-  {
-    aggregatable: true,
-    name: '@timestamp',
-    searchable: true,
-    type: 'date',
-    readFromDocValues: true,
-  },
-  { aggregatable: true, name: 'agent.ephemeral_id', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'agent.hostname', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'agent.id', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'agent.name', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'auditd.data.a0', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'auditd.data.a1', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'auditd.data.a2', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'client.address', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'client.bytes', searchable: true, type: 'number' },
-  { aggregatable: true, name: 'client.domain', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'client.geo.country_iso_code', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'cloud.account.id', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'cloud.availability_zone', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'container.id', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'container.image.name', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'container.image.tag', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'destination.address', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'destination.bytes', searchable: true, type: 'number' },
-  { aggregatable: true, name: 'destination.domain', searchable: true, type: 'string' },
-  { aggregatable: true, name: 'destination.ip', searchable: true, type: 'ip' },
-  { aggregatable: true, name: 'destination.port', searchable: true, type: 'long' },
-  { aggregatable: true, name: 'source.ip', searchable: true, type: 'ip' },
-  { aggregatable: true, name: 'source.port', searchable: true, type: 'long' },
-  { aggregatable: true, name: 'event.end', searchable: true, type: 'date' },
-];
-
 export const mockBrowserFields: BrowserFields = {
   agent: {
     fields: {
@@ -577,6 +544,10 @@ export const mockBrowserFields: BrowserFields = {
   },
 };
 
+export const mockIndexFields = flatten(
+  Object.values(mockBrowserFields).map((fieldItem) => Object.values(fieldItem.fields ?? {}))
+);
+
 const runTimeType: MappingRuntimeFieldType = 'keyword' as const;
 
 export const mockRuntimeMappings = {
diff --git a/x-pack/plugins/security_solution/public/common/containers/sourcerer/mocks.ts b/x-pack/plugins/security_solution/public/common/containers/sourcerer/mocks.ts
index cfa0b1dadec15f..98949d47047de0 100644
--- a/x-pack/plugins/security_solution/public/common/containers/sourcerer/mocks.ts
+++ b/x-pack/plugins/security_solution/public/common/containers/sourcerer/mocks.ts
@@ -5,7 +5,10 @@
  * 2.0.
  */
 
+import { mockGlobalState } from '../../mock';
+import type { SelectedDataView } from '../../store/sourcerer/model';
 import { initSourcererScope } from '../../store/sourcerer/model';
+import { mockBrowserFields, mockRuntimeMappings } from '../source/mock';
 
 export const mockPatterns = [
   'auditbeat-*',
@@ -17,24 +20,23 @@ export const mockPatterns = [
   'journalbeat-*',
 ];
 
-export const mockSourcererScope = {
+export const mockSourcererScope: SelectedDataView = {
   ...initSourcererScope,
-  scopePatterns: mockPatterns,
   browserFields: {
+    ...mockBrowserFields,
     _id: {
       fields: {
         _id: {
-          __typename: 'IndexField',
           aggregatable: false,
           category: '_id',
           description: 'Each document has an _id that uniquely identifies it',
-          esTypes: null,
+          esTypes: undefined,
           example: 'Y-6TfmcB0WOhS6qyMv3s',
-          format: null,
+          format: undefined,
           indexes: mockPatterns,
           name: '_id',
           searchable: true,
-          subType: null,
+          subType: undefined,
           type: 'string',
         },
       },
@@ -44,16 +46,20 @@ export const mockSourcererScope = {
     fields: [
       {
         aggregatable: false,
-        esTypes: null,
+        esTypes: undefined,
         name: '_id',
         searchable: true,
-        subType: null,
+        subType: undefined,
         type: 'string',
       },
     ],
     title: mockPatterns.join(),
   },
+  sourcererDataView: mockGlobalState.sourcerer.defaultDataView,
   selectedPatterns: mockPatterns,
   indicesExist: true,
   loading: false,
+  dataViewId: mockGlobalState.sourcerer.defaultDataView.id,
+  runtimeMappings: mockRuntimeMappings,
+  patternList: mockPatterns,
 };
diff --git a/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts b/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
index b4f5aa0c973de8..e052a83caa71ab 100644
--- a/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
+++ b/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
@@ -53,6 +53,8 @@ import { savedSearchPluginMock } from '@kbn/saved-search-plugin/public/mocks';
 import { contractStartServicesMock } from '../../../mocks';
 import { getDefaultConfigSettings } from '../../../../common/config_settings';
 import { fieldFormatsMock } from '@kbn/field-formats-plugin/common/mocks';
+import { indexPatternFieldEditorPluginMock } from '@kbn/data-view-field-editor-plugin/public/mocks';
+import { UpsellingService } from '@kbn/security-solution-upselling/service';
 
 const mockUiSettings: Record<string, unknown> = {
   [DEFAULT_TIME_RANGE]: { from: 'now-15m', to: 'now', mode: 'quick' },
@@ -135,14 +137,7 @@ export const createStartServicesMock = (
     dataViews: dataViewServiceMock,
     data: {
       ...data,
-      dataViews: {
-        create: jest.fn(),
-        getIdsWithTitle: jest.fn(),
-        get: jest.fn(),
-        getIndexPattern: jest.fn(),
-        getFieldsForWildcard: jest.fn(),
-        getRuntimeMappings: jest.fn(),
-      },
+      dataViews: dataViewServiceMock,
       query: {
         ...data.query,
         savedQueries: {
@@ -221,6 +216,8 @@ export const createStartServicesMock = (
     savedSearch: savedSearchPluginMock.createStartContract(),
     setHeaderActionMenu: mockSetHeaderActionMenu,
     fieldFormats: fieldFormatsMock,
+    dataViewFieldEditor: indexPatternFieldEditorPluginMock.createStartContract(),
+    upselling: new UpsellingService(),
   } as unknown as StartServices;
 };
 
diff --git a/x-pack/plugins/security_solution/public/common/mock/global_state.ts b/x-pack/plugins/security_solution/public/common/mock/global_state.ts
index b5156b17bbb4ba..142c43cee1b1f2 100644
--- a/x-pack/plugins/security_solution/public/common/mock/global_state.ts
+++ b/x-pack/plugins/security_solution/public/common/mock/global_state.ts
@@ -51,6 +51,10 @@ const mockFieldMap: DataViewSpec['fields'] = Object.fromEntries(
   mockIndexFields.map((field) => [field.name, field])
 );
 
+const mockFieldMap2 = Object.values(mockBrowserFields).map(
+  (browserFieldEntry) => browserFieldEntry.fields
+);
+
 export const mockSourcererState: SourcererState = {
   ...initialSourcererState,
   signalIndexName: `${DEFAULT_SIGNALS_INDEX}-spacename`,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx
index a29bc597c8ce9b..2bf28fda24e76d 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx
@@ -63,7 +63,7 @@ export const UnifiedTimelineBody = (props: UnifiedTimelineBodyProps) => {
   return (
     <StyledTableFlexGroup direction="column" gutterSize="s">
       <StyledTableFlexItem grow={false}>{header}</StyledTableFlexItem>
-      <StyledTableFlexItem>
+      <StyledTableFlexItem className="unifiedTimelineBody">
         <RootDragDropProvider>
           <UnifiedTimelineComponent
             columns={columnsHeader}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/__snapshots__/index.test.tsx.snap
index 92591556d38640..6b415486cc64d3 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/__snapshots__/index.test.tsx.snap
@@ -17,7 +17,7 @@ Required field for all events.",
         ],
         "example": "2016-05-23T08:05:34.853Z",
         "id": "@timestamp",
-        "initialWidth": 190,
+        "initialWidth": 215,
         "type": "date",
       },
       Object {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.test.tsx
index 1fe1f2ebbfa7d6..16355102274cfb 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.test.tsx
@@ -118,7 +118,7 @@ describe('Timeline', () => {
   });
 
   // FLAKY: https://github.com/elastic/kibana/issues/156797
-  describe.skip('rendering', () => {
+  describe('rendering', () => {
     let spyCombineQueries: jest.SpyInstance;
 
     beforeEach(() => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
index d0eb810b2457f5..2caebc9960147f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
@@ -518,6 +518,7 @@ const makeMapStateToProps = () => {
       status,
       timelineType,
     } = timeline;
+
     const kqlQueryTimeline = getKqlQueryTimeline(state, timelineId);
     const timelineFilter = kqlMode === 'filter' ? filters || [] : [];
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
new file mode 100644
index 00000000000000..5b494e4425fcf2
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
@@ -0,0 +1,436 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { ComponentProps } from 'react';
+import React, { useEffect } from 'react';
+import QueryTabContent from '.';
+import { defaultRowRenderers } from '../body/renderers';
+import { TimelineId } from '../../../../../common/types/timeline';
+import { useTimelineEvents } from '../../../containers';
+import { useTimelineEventsDetails } from '../../../containers/details';
+import { useSourcererDataView } from '../../../../common/containers/sourcerer';
+import { mockSourcererScope } from '../../../../common/containers/sourcerer/mocks';
+import { mockTimelineData, TestProviders } from '../../../../common/mock';
+import { DefaultCellRenderer } from '../cell_rendering/default_cell_renderer';
+import { render, screen, waitFor, cleanup, fireEvent } from '@testing-library/react';
+import { createStartServicesMock } from '../../../../common/lib/kibana/kibana_react.mock';
+import type { StartServices } from '../../../../types';
+import { queryServiceMock } from '@kbn/data-plugin/public/query/mocks';
+import { timefilterServiceMock } from '@kbn/data-plugin/public/query/timefilter/timefilter_service.mock';
+import { useKibana } from '../../../../common/lib/kibana';
+import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
+import { calculateBounds } from '@kbn/data-plugin/common';
+import { useDispatch } from 'react-redux';
+import { timelineActions } from '../../../store';
+
+jest.mock('../../../containers', () => ({
+  useTimelineEvents: jest.fn(),
+}));
+
+jest.mock('../../../containers/details');
+
+jest.mock('../../fields_browser', () => ({
+  useFieldBrowserOptions: jest.fn(),
+}));
+
+jest.mock('../body/events', () => ({
+  Events: () => <></>,
+}));
+
+jest.mock('../../../../common/containers/sourcerer');
+jest.mock('../../../../common/containers/sourcerer/use_signal_helpers', () => ({
+  useSignalHelpers: () => ({ signalIndexNeedsInit: false }),
+}));
+
+jest.mock('../../../../common/lib/kuery');
+
+jest.mock('../../../../common/hooks/use_experimental_features', () => {
+  return {
+    useIsExperimentalFeatureEnabled: jest.fn((x: string) => {
+      if (x === 'unifiedComponentsInTimelineEnabled') {
+        return true;
+      }
+      return false;
+    }),
+  };
+});
+
+// unified-field-list is is reporiting multiple analytics events
+jest.mock('../../../../common/lib/kibana');
+jest.mock(`@kbn/analytics-client`);
+
+const startDate = '2011-03-23T18:49:23.132Z';
+const endDate = '2024-03-24T03:33:52.253Z';
+
+const TestComponentWrapper = () => {
+  return <TestProviders>{children}</TestProviders>;
+};
+
+const TestComponent = (props: Partial<ComponentProps<typeof QueryTabContent>>) => {
+  const testComponentDefaultProps: ComponentProps<typeof QueryTabContent> = {
+    timelineId: TimelineId.test,
+    renderCellValue: DefaultCellRenderer,
+    rowRenderers: defaultRowRenderers,
+  };
+
+  const dispatch = useDispatch();
+
+  // populating timeline so that it is not blank
+  useEffect(() => {
+    dispatch(
+      timelineActions.applyKqlFilterQuery({
+        id: TimelineId.test,
+        filterQuery: {
+          kuery: {
+            kind: 'kuery',
+            expression: '*',
+          },
+          serializedQuery: '*',
+        },
+      })
+    );
+  }, [dispatch]);
+
+  return <QueryTabContent {...testComponentDefaultProps} {...props} />;
+};
+
+const renderTestComponents = (props?: Partial<ComponentProps<typeof TestComponent>>) => {
+  return render(<TestComponent {...props} />, {
+    wrapper: TestProviders,
+  });
+};
+
+const loadPageMock = jest.fn();
+
+const useTimelineEventsMock = jest.fn(() => [
+  false,
+  {
+    events: mockTimelineData,
+    pageInfo: {
+      activePage: 0,
+      totalPages: 10,
+    },
+    totalCount: 70,
+    loadPage: loadPageMock,
+  },
+]);
+
+describe('query tab with unified timeline', () => {
+  const kibanaServiceMock: StartServices = {
+    ...createStartServicesMock(),
+    data: {
+      ...dataPluginMock.createStartContract(),
+      query: {
+        ...queryServiceMock.createStartContract(),
+        timefilter: {
+          ...timefilterServiceMock.createStartContract(),
+          timefilter: {
+            ...timefilterServiceMock.createStartContract().timefilter,
+            getAbsoluteTime: jest.fn(() => ({
+              from: '2021-08-31T22:00:00.000Z',
+              to: '2022-09-01T09:16:29.553Z',
+            })),
+            getTime: jest.fn(() => {
+              return { from: 'now-15m', to: 'now' };
+            }),
+            getRefreshInterval: jest.fn(() => {
+              return { pause: true, value: 1000 };
+            }),
+            calculateBounds: jest.fn(calculateBounds),
+          },
+        },
+      },
+    },
+  };
+
+  afterEach(() => {
+    cleanup();
+    jest.clearAllMocks();
+  });
+
+  beforeEach(() => {
+    HTMLElement.prototype.getBoundingClientRect = jest.fn(() => {
+      return {
+        width: 1000,
+        height: 1000,
+        x: 0,
+        y: 0,
+      } as DOMRect;
+    });
+
+    (useKibana as jest.Mock).mockImplementation(() => {
+      return {
+        services: kibanaServiceMock,
+      };
+    });
+
+    (useTimelineEvents as jest.Mock).mockImplementation(useTimelineEventsMock);
+
+    (useTimelineEventsDetails as jest.Mock).mockImplementation(() => [false, {}]);
+
+    (useSourcererDataView as jest.Mock).mockImplementation(() => ({
+      ...mockSourcererScope,
+    }));
+  });
+
+  it('should render unifiedDataTable in timeline', async () => {
+    renderTestComponents();
+    await waitFor(() => {
+      expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+    });
+  });
+
+  it('should render unified-field-list in timeline', async () => {
+    renderTestComponents();
+    await waitFor(() => {
+      expect(screen.getByTestId('timeline-sidebar')).toBeVisible();
+    });
+  });
+
+  describe('pagination', () => {
+    it('should paginate correctly', async () => {
+      renderTestComponents();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('tablePaginationPopoverButton')).toHaveTextContent(
+          'Rows per page: 5'
+        );
+      });
+
+      expect(screen.getByTestId('pagination-button-0')).toHaveAttribute('aria-current', 'true');
+      expect(screen.getByTestId('pagination-button-6')).toBeVisible();
+
+      fireEvent.click(screen.getByTestId('pagination-button-6'));
+
+      await waitFor(() => {
+        expect(screen.getByTestId('pagination-button-6')).toHaveAttribute('aria-current', 'true');
+      });
+    });
+
+    it('should load more records according to sample size correctly', async () => {
+      renderTestComponents();
+      await waitFor(() => {
+        expect(screen.getByTestId('pagination-button-0')).toHaveAttribute('aria-current', 'true');
+        expect(screen.getByTestId('pagination-button-6')).toBeVisible();
+      });
+      // Go to last page
+      fireEvent.click(screen.getByTestId('pagination-button-6'));
+      await waitFor(() => {
+        // screen.debug(undefined, 10000000);
+        expect(screen.getByTestId('dscGridSampleSizeFetchMoreLink')).toBeVisible();
+      });
+      fireEvent.click(screen.getByTestId('dscGridSampleSizeFetchMoreLink'));
+      expect(loadPageMock).toHaveBeenNthCalledWith(1, 1);
+    });
+  });
+
+  describe('columns', () => {
+    it('should move column left/right correctly ', async () => {
+      const { container } = renderTestComponents();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+      });
+      expect(container.querySelector('[data-gridcell-column-id="message"]')).toHaveAttribute(
+        'data-gridcell-column-index',
+        '12'
+      );
+
+      expect(container.querySelector('[data-gridcell-column-id="message"]')).toBeInTheDocument();
+
+      fireEvent.click(
+        container.querySelector(
+          '[data-gridcell-column-id="message"] .euiDataGridHeaderCell__icon'
+        ) as HTMLElement
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTitle('Move left')).toBeEnabled();
+      });
+
+      fireEvent.click(screen.getByTitle('Move left'));
+
+      await waitFor(() => {
+        expect(container.querySelector('[data-gridcell-column-id="message"]')).toHaveAttribute(
+          'data-gridcell-column-index',
+          '11'
+        );
+      });
+    });
+
+    it('should remove column left/right ', async () => {
+      const { container } = renderTestComponents();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+      });
+
+      expect(container.querySelector('[data-gridcell-column-id="message"]')).toBeInTheDocument();
+
+      fireEvent.click(
+        container.querySelector(
+          '[data-gridcell-column-id="message"] .euiDataGridHeaderCell__icon'
+        ) as HTMLElement
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTitle('Remove column')).toBeVisible();
+      });
+
+      fireEvent.click(screen.getByTitle('Remove column'));
+
+      await waitFor(() => {
+        expect(
+          container.querySelector('[data-gridcell-column-id="message"]')
+        ).not.toBeInTheDocument();
+      });
+    });
+
+    it('should sort date column', async () => {
+      const { container } = renderTestComponents();
+      await waitFor(() => {
+        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+      });
+
+      expect(container.querySelector('[data-gridcell-column-id="@timestamp"]')).toBeInTheDocument();
+
+      fireEvent.click(
+        container.querySelector(
+          '[data-gridcell-column-id="@timestamp"] .euiDataGridHeaderCell__icon'
+        ) as HTMLElement
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTitle('Sort Old-New')).toBeVisible();
+        expect(screen.getByTitle('Sort New-Old')).toBeVisible();
+      });
+
+      useTimelineEventsMock.mockClear();
+
+      fireEvent.click(screen.getByTitle('Sort Old-New'));
+
+      await waitFor(() => {
+        expect(useTimelineEventsMock).toHaveBeenNthCalledWith(
+          1,
+          expect.objectContaining({
+            sort: [
+              {
+                direction: 'asc',
+                esTypes: [],
+                field: '@timestamp',
+                type: 'date',
+              },
+            ],
+          })
+        );
+      });
+    });
+
+    it('should sort string column correctly', async () => {
+      const { container } = renderTestComponents();
+      await waitFor(() => {
+        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+      });
+
+      expect(container.querySelector('[data-gridcell-column-id="host.name"]')).toBeInTheDocument();
+
+      fireEvent.click(
+        container.querySelector(
+          '[data-gridcell-column-id="host.name"] .euiDataGridHeaderCell__icon'
+        ) as HTMLElement
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('dataGridHeaderCellActionGroup-host.name')).toBeVisible();
+      });
+
+      expect(screen.getByTitle('Sort A-Z')).toBeVisible();
+      expect(screen.getByTitle('Sort Z-A')).toBeVisible();
+
+      useTimelineEventsMock.mockClear();
+
+      fireEvent.click(screen.getByTitle('Sort A-Z'));
+
+      await waitFor(() => {
+        expect(useTimelineEventsMock).toHaveBeenNthCalledWith(
+          1,
+          expect.objectContaining({
+            sort: [
+              {
+                direction: 'desc',
+                esTypes: [],
+                field: '@timestamp',
+                type: 'date',
+              },
+              {
+                direction: 'asc',
+                esTypes: [],
+                field: 'host.name',
+                type: 'string',
+              },
+            ],
+          })
+        );
+      });
+    });
+
+    it('should sort number column', async () => {
+      const field = {
+        name: 'event.severity',
+        type: 'number',
+      };
+
+      const { container } = renderTestComponents();
+      await waitFor(() => {
+        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+      });
+
+      expect(
+        container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
+      ).toBeInTheDocument();
+
+      fireEvent.click(
+        container.querySelector(
+          `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
+        ) as HTMLElement
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId(`dataGridHeaderCellActionGroup-${field.name}`)).toBeVisible();
+      });
+
+      expect(screen.getByTitle('Sort Low-High')).toBeVisible();
+      expect(screen.getByTitle('Sort High-Low')).toBeVisible();
+
+      useTimelineEventsMock.mockClear();
+
+      fireEvent.click(screen.getByTitle('Sort Low-High'));
+
+      await waitFor(() => {
+        expect(useTimelineEventsMock).toHaveBeenNthCalledWith(
+          1,
+          expect.objectContaining({
+            sort: [
+              {
+                direction: 'desc',
+                esTypes: [],
+                field: '@timestamp',
+                type: 'date',
+              },
+              {
+                direction: 'asc',
+                esTypes: [],
+                field: field.name,
+                type: field.type,
+              },
+            ],
+          })
+        );
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index d059561345d70f..88f67e34469a74 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -13,7 +13,11 @@ import type { DataViewField } from '@kbn/data-plugin/common';
 import { flattenHit } from '@kbn/data-plugin/common';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
 import type { UnifiedDataTableSettingsColumn } from '@kbn/unified-data-table';
-import { UnifiedDataTable, useColumns, DataLoadingState } from '@kbn/unified-data-table';
+import {
+  UnifiedDataTable,
+  useColumns as useUnifiedTableColumns,
+  DataLoadingState,
+} from '@kbn/unified-data-table';
 import type { SortOrder } from '@kbn/saved-search-plugin/public';
 import { popularizeField } from '@kbn/unified-data-table/src/utils/popularize_field';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
@@ -280,12 +284,8 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       [dispatch, timelineId, columns]
     );
 
-    // Columns management
-    const { onSetColumns } = useColumns({
-      capabilities,
-      dataView,
-      dataViews,
-      setAppState: (newState: { columns: string[]; sort?: string[][] }) => {
+    const setAppState = useCallback(
+      (newState: { columns: string[]; sort?: string[][] }) => {
         if (newState.sort) {
           onSort(newState.sort);
         } else {
@@ -295,6 +295,15 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
           dispatch(timelineActions.updateColumns({ id: timelineId, columns: columnsStates }));
         }
       },
+      [dispatch, onSort, timelineId]
+    );
+
+    // Columns management
+    const { onSetColumns } = useUnifiedTableColumns({
+      capabilities,
+      dataView,
+      dataViews,
+      setAppState,
       useNewFieldsApi: true,
       columns: defaultColumnIds,
       sort: sortingColumns,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
index c20ca6b6906fc4..b13117c5e6f97a 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
@@ -23,8 +23,8 @@ import type {
   UnifiedFieldListSidebarContainerProps,
 } from '@kbn/unified-field-list';
 import { UnifiedFieldListSidebarContainer } from '@kbn/unified-field-list';
-import type { CoreStart } from '@kbn/core/public';
 import type { EuiTheme } from '@kbn/react-kibana-context-styled';
+import type { CoreStart } from '@kbn/core-lifecycle-browser';
 import { EventDetailsWidthProvider } from '../../../../common/components/events_viewer/event_details_width_context';
 import type { ExpandedDetailTimeline } from '../../../../../common/types';
 import type { TimelineItem } from '../../../../../common/search_strategy';
@@ -151,6 +151,7 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
       uiActions,
       charts,
       docLinks,
+      analytics,
     },
   } = useKibana();
 
@@ -163,6 +164,7 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
       uiActions,
       charts,
       core: {
+        analytics,
         uiSettings,
         docLinks,
       } as CoreStart,
@@ -176,6 +178,7 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
       charts,
       uiSettings,
       docLinks,
+      analytics,
     ]
   );
 
@@ -326,13 +329,13 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
   }
 
   return (
-    <TimelineBodyContainer ref={setSidebarContainer}>
+    <TimelineBodyContainer className="timelineBodyContainer" ref={setSidebarContainer}>
       <TimelineResizableLayout
         container={sidebarContainer}
         unifiedFieldListSidebarContainerApi={unifiedFieldListContainerRef.current}
         sidebarPanel={
           <SidebarPanelFlexGroup gutterSize="none">
-            <EuiFlexItem>
+            <EuiFlexItem className="sidebarContainer">
               {dataView ? (
                 <UnifiedFieldListSidebarContainer
                   ref={unifiedFieldListContainerRef}

From 2d6e0b8c65cf495bd8c20df601739fa2a10693d3 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 26 Feb 2024 12:57:52 +0100
Subject: [PATCH 20/65] fix: tests

---
 .../__mocks__/use_is_experimental_values.tsx    | 17 +++++++++++++++++
 .../public/common/mock/timeline_results.ts      |  3 ++-
 .../components/alerts_table/actions.test.tsx    |  2 ++
 .../components/alerts_table/actions.tsx         |  2 +-
 .../components/timeline/body/constants.ts       |  4 +++-
 .../unified_components/default_headers.tsx      |  7 +++++--
 .../hooks/use_create_timeline.test.tsx          |  2 ++
 7 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/public/common/hooks/__mocks__/use_is_experimental_values.tsx

diff --git a/x-pack/plugins/security_solution/public/common/hooks/__mocks__/use_is_experimental_values.tsx b/x-pack/plugins/security_solution/public/common/hooks/__mocks__/use_is_experimental_values.tsx
new file mode 100644
index 00000000000000..3c00e381ea29c7
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/hooks/__mocks__/use_is_experimental_values.tsx
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { ExperimentalFeatures } from '../../../../common/experimental_features';
+import { allowedExperimentalValues } from '../../../../common/experimental_features';
+
+export const useIsExperimentalFeatureEnabled = (feature: keyof ExperimentalFeatures): boolean => {
+  if (feature in allowedExperimentalValues) {
+    return allowedExperimentalValues[feature];
+  }
+
+  throw new Error(`Invalid experimental value ${feature}}`);
+};
diff --git a/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts b/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts
index b005985b679341..debcd658b607a5 100644
--- a/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts
+++ b/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts
@@ -1915,7 +1915,7 @@ const mockTimelineModelColumns: TimelineModel['columns'] = [
   {
     columnHeaderType: 'not-filtered',
     id: '@timestamp',
-    initialWidth: 190,
+    initialWidth: 215,
   },
   {
     columnHeaderType: 'not-filtered',
@@ -2219,6 +2219,7 @@ export const defaultTimelineProps: CreateTimelineProps = {
     savedSearch: null,
     isDataProviderVisible: false,
     sampleSize: 500,
+    rowHeight: 1,
   },
   to: '2018-11-05T19:03:25.937Z',
   notes: null,
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx
index ea44819dae5ea4..b87dfb031dac2f 100644
--- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx
@@ -455,6 +455,8 @@ describe('alert actions', () => {
             savedSearch: null,
             isDiscoverSavedSearchLoaded: false,
             isDataProviderVisible: false,
+            rowHeight: 1,
+            sampleSize: 500,
           },
           to: '2018-11-05T19:03:25.937Z',
           ruleNote: '# this is some markdown documentation',
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.tsx
index a9a84eb0231a23..65a6a2e8b47fe8 100644
--- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.tsx
@@ -950,7 +950,6 @@ export const sendAlertToTimelineAction = async ({
       : ruleTimelineId
     : '';
   const { to, from } = determineToAndFrom({ ecs });
-
   // For now we do not want to populate the template timeline if we have alertIds
   if (!isEmpty(timelineId)) {
     try {
@@ -974,6 +973,7 @@ export const sendAlertToTimelineAction = async ({
           )
         ),
       ]);
+
       const resultingTimeline: TimelineResult = getOr({}, 'data.getOneTimeline', responseTimeline);
       const eventData: TimelineEventsDetailsItem[] = eventDataResp.data ?? [];
       if (!isEmpty(resultingTimeline)) {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts
index 1fa196efea2a0c..163721b2db659b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/constants.ts
@@ -12,4 +12,6 @@ export const DEFAULT_COLUMN_MIN_WIDTH = 180; // px
 export const RESIZED_COLUMN_MIN_WITH = 70; // px
 
 /** The default minimum width of a column of type `date` */
-export const DEFAULT_DATE_COLUMN_MIN_WIDTH = 215; // px
+export const DEFAULT_DATE_COLUMN_MIN_WIDTH = 190; // px
+
+export const DEFAULT_UNIFIED_TABLE_DATE_COLUMN_MIN_WIDTH = 215; // px
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/default_headers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/default_headers.tsx
index b8e7e3fbd630f0..a0cf9d6355b9d1 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/default_headers.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/default_headers.tsx
@@ -6,7 +6,10 @@
  */
 
 import type { ColumnHeaderOptions, ColumnHeaderType } from '../../../../../common/types';
-import { DEFAULT_COLUMN_MIN_WIDTH, DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../body/constants';
+import {
+  DEFAULT_COLUMN_MIN_WIDTH,
+  DEFAULT_UNIFIED_TABLE_DATE_COLUMN_MIN_WIDTH,
+} from '../body/constants';
 
 export const defaultColumnHeaderType: ColumnHeaderType = 'not-filtered';
 
@@ -14,7 +17,7 @@ export const defaultUdtHeaders: ColumnHeaderOptions[] = [
   {
     columnHeaderType: defaultColumnHeaderType,
     id: '@timestamp',
-    initialWidth: DEFAULT_DATE_COLUMN_MIN_WIDTH,
+    initialWidth: DEFAULT_UNIFIED_TABLE_DATE_COLUMN_MIN_WIDTH,
     esTypes: ['date'],
     type: 'date',
   },
diff --git a/x-pack/plugins/security_solution/public/timelines/hooks/use_create_timeline.test.tsx b/x-pack/plugins/security_solution/public/timelines/hooks/use_create_timeline.test.tsx
index 0e11db28e391c8..2cabd71b1cc033 100644
--- a/x-pack/plugins/security_solution/public/timelines/hooks/use_create_timeline.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/hooks/use_create_timeline.test.tsx
@@ -34,6 +34,8 @@ jest.mock('react-redux', () => {
   };
 });
 
+jest.mock('../../common/hooks/use_experimental_features');
+
 describe('useCreateTimeline', () => {
   let hookResult: RenderHookResult<
     UseCreateTimelineParams,

From 5a03eceb6ea5b9fa89c0659b69bfe0a823b4a71b Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Sat, 2 Mar 2024 19:45:55 +0100
Subject: [PATCH 21/65] fix: more tests

---
 ...alues.tsx => use_experimental_features.ts} | 14 +++++----
 .../actions/new_timeline_button.test.tsx      |  2 ++
 .../components/new_timeline/index.test.tsx    |  2 ++
 .../query_tab_unified_components.test.tsx     | 30 +++++++++----------
 4 files changed, 26 insertions(+), 22 deletions(-)
 rename x-pack/plugins/security_solution/public/common/hooks/__mocks__/{use_is_experimental_values.tsx => use_experimental_features.ts} (58%)

diff --git a/x-pack/plugins/security_solution/public/common/hooks/__mocks__/use_is_experimental_values.tsx b/x-pack/plugins/security_solution/public/common/hooks/__mocks__/use_experimental_features.ts
similarity index 58%
rename from x-pack/plugins/security_solution/public/common/hooks/__mocks__/use_is_experimental_values.tsx
rename to x-pack/plugins/security_solution/public/common/hooks/__mocks__/use_experimental_features.ts
index 3c00e381ea29c7..2084685c9b6a01 100644
--- a/x-pack/plugins/security_solution/public/common/hooks/__mocks__/use_is_experimental_values.tsx
+++ b/x-pack/plugins/security_solution/public/common/hooks/__mocks__/use_experimental_features.ts
@@ -8,10 +8,12 @@
 import type { ExperimentalFeatures } from '../../../../common/experimental_features';
 import { allowedExperimentalValues } from '../../../../common/experimental_features';
 
-export const useIsExperimentalFeatureEnabled = (feature: keyof ExperimentalFeatures): boolean => {
-  if (feature in allowedExperimentalValues) {
-    return allowedExperimentalValues[feature];
-  }
+export const useIsExperimentalFeatureEnabled = jest
+  .fn()
+  .mockImplementation((feature: keyof ExperimentalFeatures): boolean => {
+    if (feature in allowedExperimentalValues) {
+      return allowedExperimentalValues[feature];
+    }
 
-  throw new Error(`Invalid experimental value ${feature}}`);
-};
+    throw new Error(`Invalid experimental value ${feature}}`);
+  });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/modal/actions/new_timeline_button.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/modal/actions/new_timeline_button.test.tsx
index 01c0f1e77e6815..855db8bdcf936b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/modal/actions/new_timeline_button.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/modal/actions/new_timeline_button.test.tsx
@@ -26,6 +26,8 @@ jest.mock('react-redux', () => {
   };
 });
 
+jest.mock('../../../../common/hooks/use_experimental_features');
+
 const renderNewTimelineButton = () => render(<NewTimelineButton timelineId={TimelineId.test} />);
 
 describe('NewTimelineButton', () => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/new_timeline/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/new_timeline/index.test.tsx
index 55a414b9df6083..d90d88773ce510 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/new_timeline/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/new_timeline/index.test.tsx
@@ -27,6 +27,8 @@ jest.mock('react-redux', () => {
   };
 });
 
+jest.mock('../../../common/hooks/use_experimental_features');
+
 const renderNewTimelineButton = (type: TimelineType) => render(<NewTimelineButton type={type} />);
 
 describe('NewTimelineButton', () => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
index 5b494e4425fcf2..477661eccdb74b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
@@ -26,6 +26,9 @@ import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { calculateBounds } from '@kbn/data-plugin/common';
 import { useDispatch } from 'react-redux';
 import { timelineActions } from '../../../store';
+import type { ExperimentalFeatures } from '../../../../../common';
+import { allowedExperimentalValues } from '../../../../../common';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 
 jest.mock('../../../containers', () => ({
   useTimelineEvents: jest.fn(),
@@ -48,28 +51,19 @@ jest.mock('../../../../common/containers/sourcerer/use_signal_helpers', () => ({
 
 jest.mock('../../../../common/lib/kuery');
 
-jest.mock('../../../../common/hooks/use_experimental_features', () => {
-  return {
-    useIsExperimentalFeatureEnabled: jest.fn((x: string) => {
-      if (x === 'unifiedComponentsInTimelineEnabled') {
-        return true;
-      }
-      return false;
-    }),
-  };
+jest.mock('../../../../common/hooks/use_experimental_features');
+
+const useIsExperimentalFeatureEnabledMock = jest.fn((feature: keyof ExperimentalFeatures) => {
+  if (feature === 'unifiedComponentsInTimelineEnabled') {
+    return true;
+  }
+  return allowedExperimentalValues[feature] ?? false;
 });
 
 // unified-field-list is is reporiting multiple analytics events
 jest.mock('../../../../common/lib/kibana');
 jest.mock(`@kbn/analytics-client`);
 
-const startDate = '2011-03-23T18:49:23.132Z';
-const endDate = '2024-03-24T03:33:52.253Z';
-
-const TestComponentWrapper = () => {
-  return <TestProviders>{children}</TestProviders>;
-};
-
 const TestComponent = (props: Partial<ComponentProps<typeof QueryTabContent>>) => {
   const testComponentDefaultProps: ComponentProps<typeof QueryTabContent> = {
     timelineId: TimelineId.test,
@@ -175,6 +169,10 @@ describe('query tab with unified timeline', () => {
     (useSourcererDataView as jest.Mock).mockImplementation(() => ({
       ...mockSourcererScope,
     }));
+
+    (useIsExperimentalFeatureEnabled as jest.Mock).mockImplementation(
+      useIsExperimentalFeatureEnabledMock
+    );
   });
 
   it('should render unifiedDataTable in timeline', async () => {

From 05bd28660479c8db28fb1f8578bf3f62b3897567 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 4 Mar 2024 01:21:22 +0100
Subject: [PATCH 22/65] fix: types  + tests

---
 .../kbn-unified-data-table/src/components/data_table.tsx  | 2 --
 .../src/utils/get_render_cell_value.tsx                   | 2 +-
 .../security_solution/public/common/mock/global_state.ts  | 8 ++------
 .../public/common/mock/timeline_results.ts                | 2 +-
 .../detection_engine/rules/use_rule_from_timeline.test.ts | 1 +
 .../public/timelines/components/side_panel/index.tsx      | 2 +-
 .../timeline/unified_components/data_table/index.test.tsx | 2 +-
 .../public/timelines/containers/index.test.tsx            | 8 ++++----
 8 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx
index 6153fa02a617d3..5747ab2cdd3fe0 100644
--- a/packages/kbn-unified-data-table/src/components/data_table.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table.tsx
@@ -732,14 +732,12 @@ export const UnifiedDataTable = ({
         visibleCellActions,
         columnTypes,
         showColumnTokens,
-        headerRowHeight,
         headerRowHeightLines,
         customGridColumnsConfiguration,
       }),
     [
       columnTypes,
       showColumnTokens,
-      headerRowHeight,
       columnsCellActions,
       customGridColumnsConfiguration,
       dataView,
diff --git a/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx b/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
index d8d40f22a378ca..bd3c0a4deabdc6 100644
--- a/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
+++ b/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
@@ -74,7 +74,7 @@ export const getRenderCellValueFn = ({
       }
     }, [ctx, row, setCellProps]);
 
-    if (!!externalCustomRenderers && !!externalCustomRenderers[columnId]) {
+    if (!!externalCustomRenderers && !!externalCustomRenderers[columnId] && row) {
       return (
         <span className={CELL_CLASS}>
           {externalCustomRenderers[columnId]({
diff --git a/x-pack/plugins/security_solution/public/common/mock/global_state.ts b/x-pack/plugins/security_solution/public/common/mock/global_state.ts
index 142c43cee1b1f2..b8127140389cc5 100644
--- a/x-pack/plugins/security_solution/public/common/mock/global_state.ts
+++ b/x-pack/plugins/security_solution/public/common/mock/global_state.ts
@@ -6,7 +6,7 @@
  */
 
 import { TableId } from '@kbn/securitysolution-data-table';
-import type { DataViewSpec } from '@kbn/data-views-plugin/public';
+import type { DataViewSpec, FieldSpec } from '@kbn/data-views-plugin/public';
 import { HostsFields } from '../../../common/api/search_strategy/hosts/model/sort';
 import { InputsModelId } from '../store/inputs/constants';
 import {
@@ -51,10 +51,6 @@ const mockFieldMap: DataViewSpec['fields'] = Object.fromEntries(
   mockIndexFields.map((field) => [field.name, field])
 );
 
-const mockFieldMap2 = Object.values(mockBrowserFields).map(
-  (browserFieldEntry) => browserFieldEntry.fields
-);
-
 export const mockSourcererState: SourcererState = {
   ...initialSourcererState,
   signalIndexName: `${DEFAULT_SIGNALS_INDEX}-spacename`,
@@ -62,7 +58,7 @@ export const mockSourcererState: SourcererState = {
     ...initialSourcererState.defaultDataView,
     browserFields: mockBrowserFields,
     id: DEFAULT_DATA_VIEW_ID,
-    indexFields: mockIndexFields,
+    indexFields: mockIndexFields as FieldSpec[],
     fields: mockFieldMap,
     loading: false,
     patternList: [...DEFAULT_INDEX_PATTERN, `${DEFAULT_SIGNALS_INDEX}-spacename`],
diff --git a/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts b/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts
index debcd658b607a5..866c64e589bda8 100644
--- a/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts
+++ b/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts
@@ -1915,7 +1915,7 @@ const mockTimelineModelColumns: TimelineModel['columns'] = [
   {
     columnHeaderType: 'not-filtered',
     id: '@timestamp',
-    initialWidth: 215,
+    initialWidth: 190,
   },
   {
     columnHeaderType: 'not-filtered',
diff --git a/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/use_rule_from_timeline.test.ts b/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/use_rule_from_timeline.test.ts
index 7940084dca3dfb..7b9d31c128775f 100644
--- a/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/use_rule_from_timeline.test.ts
+++ b/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/use_rule_from_timeline.test.ts
@@ -17,6 +17,7 @@ import { useAppToastsMock } from '../../../../common/hooks/use_app_toasts.mock';
 import { mockTimeline } from '../../../../../server/lib/timeline/__mocks__/create_timelines';
 import type { TimelineModel } from '../../../..';
 
+jest.mock('../../../../common/hooks/use_experimental_features');
 jest.mock('../../../../common/utils/global_query_string/helpers');
 jest.mock('../../../../timelines/containers/api');
 jest.mock('../../../../common/hooks/use_app_toasts');
diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx
index ae2cd149ef69dd..f5d971f9eeeb6b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx
@@ -87,7 +87,7 @@ export const DetailsPanel = React.memo(
       }
     }, [dispatch, scopeId]);
 
-    const activeTab = tabType ?? TimelineTabs.query;
+    const activeTab: TimelineTabs = tabType ?? TimelineTabs.query;
     const closePanel = useCallback(() => {
       if (handleOnPanelClosed) handleOnPanelClosed();
       else defaultOnPanelClose();
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
index 3af55e3dc218db..b7a3501f2f78d0 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
@@ -55,6 +55,7 @@ const TestComponent = (props: Partial<ComponentProps<typeof TimelineDataTableCom
         expandedDetail={{}}
         onChangePage={onChangePageMock}
         updatedAt={Date.now()}
+        {...props}
       />
     </TestProviders>
   );
@@ -89,7 +90,6 @@ describe('unified data table', () => {
         }}
       />
     );
-    screen.debug(undefined, 1000000);
 
     await waitFor(() => {
       expect(screen.getByTestId('timeline:details-panel:flyout')).toBeVisible();
diff --git a/x-pack/plugins/security_solution/public/timelines/containers/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/containers/index.test.tsx
index 55c55d4b27dc73..e2ec3d21177250 100644
--- a/x-pack/plugins/security_solution/public/timelines/containers/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/containers/index.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import type { DataLoadingState } from '@kbn/unified-data-table';
+import { DataLoadingState } from '@kbn/unified-data-table';
 import { renderHook, act } from '@testing-library/react-hooks';
 import type { TimelineArgs, UseTimelineEventsProps } from '.';
 import { initSortDefault, useTimelineEvents } from '.';
@@ -134,7 +134,7 @@ describe('useTimelineEvents', () => {
       // useEffect on params request
       await waitForNextUpdate();
       expect(result.current).toEqual([
-        false,
+        DataLoadingState.loaded,
         {
           events: [],
           id: TimelineId.active,
@@ -166,7 +166,7 @@ describe('useTimelineEvents', () => {
 
       expect(mockSearch).toHaveBeenCalledTimes(2);
       expect(result.current).toEqual([
-        false,
+        DataLoadingState.loaded,
         {
           events: mockEvents,
           id: TimelineId.active,
@@ -209,7 +209,7 @@ describe('useTimelineEvents', () => {
       expect(mockSearch).toHaveBeenCalledTimes(2);
 
       expect(result.current).toEqual([
-        false,
+        DataLoadingState.loaded,
         {
           events: mockEvents,
           id: TimelineId.active,

From 332bfc2a83f099bf27730dc2451a04f5cac7ed77 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 4 Mar 2024 12:50:02 +0100
Subject: [PATCH 23/65] fix: more types + better mock

---
 .../common/experimental_features.ts           | 10 ------
 .../common/lib/kibana/kibana_react.mock.ts    | 19 ++++++++++++
 .../query_tab_unified_components.test.tsx     | 31 +------------------
 3 files changed, 20 insertions(+), 40 deletions(-)

diff --git a/x-pack/plugins/security_solution/common/experimental_features.ts b/x-pack/plugins/security_solution/common/experimental_features.ts
index 2554ce9cb758a0..cda65e98568e5e 100644
--- a/x-pack/plugins/security_solution/common/experimental_features.ts
+++ b/x-pack/plugins/security_solution/common/experimental_features.ts
@@ -217,16 +217,6 @@ export const allowedExperimentalValues = Object.freeze({
    * Expires: on Apr 23, 2024
    */
   perFieldPrebuiltRulesDiffingEnabled: true,
-
-  /**
-   * Disables discover esql tab within timeline
-   */
-  timelineEsqlTabDisabled: false,
-
-  /**
-   * Disables date pickers and sourcerer in analyzer if needed.
-   */
-  analyzerDatePickersAndSourcererDisabled: false,
 });
 
 type ExperimentalConfigKeys = Array<keyof ExperimentalFeatures>;
diff --git a/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts b/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
index e052a83caa71ab..f06ccfdb2f719e 100644
--- a/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
+++ b/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
@@ -55,6 +55,7 @@ import { getDefaultConfigSettings } from '../../../../common/config_settings';
 import { fieldFormatsMock } from '@kbn/field-formats-plugin/common/mocks';
 import { indexPatternFieldEditorPluginMock } from '@kbn/data-view-field-editor-plugin/public/mocks';
 import { UpsellingService } from '@kbn/security-solution-upselling/service';
+import { calculateBounds } from '@kbn/data-plugin/common';
 
 const mockUiSettings: Record<string, unknown> = {
   [DEFAULT_TIME_RANGE]: { from: 'now-15m', to: 'now', mode: 'quick' },
@@ -125,6 +126,24 @@ export const createStartServicesMock = (
   const cloud = cloudMock.createStart();
   const mockSetHeaderActionMenu = jest.fn();
 
+  /*
+   * Below mocks are needed by unified field list
+   * when data service is passed through as a prop
+   *
+   * */
+  data.query.timefilter.timefilter.getAbsoluteTime = jest.fn(() => ({
+    from: '2021-08-31T22:00:00.000Z',
+    to: '2022-09-01T09:16:29.553Z',
+  }));
+  data.query.timefilter.timefilter.getTime = jest.fn(() => {
+    return { from: 'now-15m', to: 'now' };
+  });
+  data.query.timefilter.timefilter.getRefreshInterval = jest.fn(() => {
+    return { pause: true, value: 1000 };
+  });
+  data.query.timefilter.timefilter.calculateBounds = jest.fn(calculateBounds);
+  /** ************************************************* */
+
   return {
     ...core,
     ...contractStartServicesMock,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
index 477661eccdb74b..75ac9e6d58849f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
@@ -19,11 +19,7 @@ import { DefaultCellRenderer } from '../cell_rendering/default_cell_renderer';
 import { render, screen, waitFor, cleanup, fireEvent } from '@testing-library/react';
 import { createStartServicesMock } from '../../../../common/lib/kibana/kibana_react.mock';
 import type { StartServices } from '../../../../types';
-import { queryServiceMock } from '@kbn/data-plugin/public/query/mocks';
-import { timefilterServiceMock } from '@kbn/data-plugin/public/query/timefilter/timefilter_service.mock';
 import { useKibana } from '../../../../common/lib/kibana';
-import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
-import { calculateBounds } from '@kbn/data-plugin/common';
 import { useDispatch } from 'react-redux';
 import { timelineActions } from '../../../store';
 import type { ExperimentalFeatures } from '../../../../../common';
@@ -114,32 +110,7 @@ const useTimelineEventsMock = jest.fn(() => [
 ]);
 
 describe('query tab with unified timeline', () => {
-  const kibanaServiceMock: StartServices = {
-    ...createStartServicesMock(),
-    data: {
-      ...dataPluginMock.createStartContract(),
-      query: {
-        ...queryServiceMock.createStartContract(),
-        timefilter: {
-          ...timefilterServiceMock.createStartContract(),
-          timefilter: {
-            ...timefilterServiceMock.createStartContract().timefilter,
-            getAbsoluteTime: jest.fn(() => ({
-              from: '2021-08-31T22:00:00.000Z',
-              to: '2022-09-01T09:16:29.553Z',
-            })),
-            getTime: jest.fn(() => {
-              return { from: 'now-15m', to: 'now' };
-            }),
-            getRefreshInterval: jest.fn(() => {
-              return { pause: true, value: 1000 };
-            }),
-            calculateBounds: jest.fn(calculateBounds),
-          },
-        },
-      },
-    },
-  };
+  const kibanaServiceMock: StartServices = createStartServicesMock();
 
   afterEach(() => {
     cleanup();

From d67ac0f1e7e07b468303670a1422911942eb3d21 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Wed, 6 Mar 2024 12:09:38 +0100
Subject: [PATCH 24/65] complete query tab unified tests

---
 ...query_timeline_by_id_on_url_change.test.ts |  4 +-
 .../__snapshots__/index.test.tsx.snap         |  2 +-
 .../query_tab_unified_components.test.tsx     | 96 ++++++++++++++++---
 .../resizable_layout.test.tsx                 | 12 +--
 .../unified_components/resizable_layout.tsx   |  4 +-
 5 files changed, 94 insertions(+), 24 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/hooks/timeline/use_query_timeline_by_id_on_url_change.test.ts b/x-pack/plugins/security_solution/public/common/hooks/timeline/use_query_timeline_by_id_on_url_change.test.ts
index ef5fe57f16e980..48ab28dc7ed52b 100644
--- a/x-pack/plugins/security_solution/public/common/hooks/timeline/use_query_timeline_by_id_on_url_change.test.ts
+++ b/x-pack/plugins/security_solution/public/common/hooks/timeline/use_query_timeline_by_id_on_url_change.test.ts
@@ -10,6 +10,8 @@ import { useQueryTimelineByIdOnUrlChange } from './use_query_timeline_by_id_on_u
 import { renderHook } from '@testing-library/react-hooks';
 import { timelineDefaults } from '../../../timelines/store/defaults';
 
+jest.mock('../use_experimental_features');
+
 jest.mock('../../../timelines/components/open_timeline/helpers');
 
 const mockFlyoutTimeline = jest
@@ -60,7 +62,7 @@ describe('queryTimelineByIdOnUrlChange', () => {
       jest.clearAllMocks();
       rerender();
 
-      expect(queryTimelineById).toHaveBeenCalledWith(
+      expect(mockQueryTimelineById).toHaveBeenCalledWith(
         expect.objectContaining({
           activeTimelineTab: 'query',
           duplicate: false,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/__snapshots__/index.test.tsx.snap
index 6b415486cc64d3..92591556d38640 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/__snapshots__/index.test.tsx.snap
@@ -17,7 +17,7 @@ Required field for all events.",
         ],
         "example": "2016-05-23T08:05:34.853Z",
         "id": "@timestamp",
-        "initialWidth": 215,
+        "initialWidth": 190,
         "type": "date",
       },
       Object {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
index 75ac9e6d58849f..fad1cdc9281745 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
@@ -16,7 +16,7 @@ import { useSourcererDataView } from '../../../../common/containers/sourcerer';
 import { mockSourcererScope } from '../../../../common/containers/sourcerer/mocks';
 import { mockTimelineData, TestProviders } from '../../../../common/mock';
 import { DefaultCellRenderer } from '../cell_rendering/default_cell_renderer';
-import { render, screen, waitFor, cleanup, fireEvent } from '@testing-library/react';
+import { render, screen, waitFor, cleanup, fireEvent, within } from '@testing-library/react';
 import { createStartServicesMock } from '../../../../common/lib/kibana/kibana_react.mock';
 import type { StartServices } from '../../../../types';
 import { useKibana } from '../../../../common/lib/kibana';
@@ -104,6 +104,7 @@ const useTimelineEventsMock = jest.fn(() => [
       activePage: 0,
       totalPages: 10,
     },
+    refreshedAt: Date.now(),
     totalCount: 70,
     loadPage: loadPageMock,
   },
@@ -118,6 +119,8 @@ describe('query tab with unified timeline', () => {
   });
 
   beforeEach(() => {
+    const SECOND = 1000;
+    jest.setTimeout(10 * SECOND);
     HTMLElement.prototype.getBoundingClientRect = jest.fn(() => {
       return {
         width: 1000,
@@ -146,17 +149,19 @@ describe('query tab with unified timeline', () => {
     );
   });
 
-  it('should render unifiedDataTable in timeline', async () => {
-    renderTestComponents();
-    await waitFor(() => {
-      expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+  describe('render', () => {
+    it('should render unifiedDataTable in timeline', async () => {
+      renderTestComponents();
+      await waitFor(() => {
+        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+      });
     });
-  });
 
-  it('should render unified-field-list in timeline', async () => {
-    renderTestComponents();
-    await waitFor(() => {
-      expect(screen.getByTestId('timeline-sidebar')).toBeVisible();
+    it('should render unified-field-list in timeline', async () => {
+      renderTestComponents();
+      await waitFor(() => {
+        expect(screen.getByTestId('timeline-sidebar')).toBeVisible();
+      });
     });
   });
 
@@ -275,8 +280,8 @@ describe('query tab with unified timeline', () => {
 
       await waitFor(() => {
         expect(screen.getByTitle('Sort Old-New')).toBeVisible();
-        expect(screen.getByTitle('Sort New-Old')).toBeVisible();
       });
+      expect(screen.getByTitle('Sort New-Old')).toBeVisible();
 
       useTimelineEventsMock.mockClear();
 
@@ -402,4 +407,73 @@ describe('query tab with unified timeline', () => {
       });
     });
   });
+
+  describe('left controls', () => {
+    it('should clear all sorting', async () => {
+      renderTestComponents();
+      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+
+      expect(screen.getByTestId('dataGridColumnSortingButton')).toBeVisible();
+      expect(
+        within(screen.getByTestId('dataGridColumnSortingButton')).getByRole('marquee')
+      ).toHaveTextContent('1');
+
+      fireEvent.click(screen.getByTestId('dataGridColumnSortingButton'));
+
+      // // timestamp sorting indicators
+      expect(
+        await screen.findByTestId('euiDataGridColumnSorting-sortColumn-@timestamp')
+      ).toBeVisible();
+
+      expect(screen.getByTestId('dataGridHeaderCellSortingIcon-@timestamp')).toBeVisible();
+
+      fireEvent.click(screen.getByTestId('dataGridColumnSortingClearButton'));
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('dataGridHeaderCellSortingIcon-@timestamp')).toBeNull();
+      });
+    });
+
+    it('should be able to sort by multiple columns', async () => {
+      renderTestComponents();
+      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+
+      expect(screen.getByTestId('dataGridColumnSortingButton')).toBeVisible();
+      expect(
+        within(screen.getByTestId('dataGridColumnSortingButton')).getByRole('marquee')
+      ).toHaveTextContent('1');
+
+      fireEvent.click(screen.getByTestId('dataGridColumnSortingButton'));
+
+      // // timestamp sorting indicators
+      expect(
+        await screen.findByTestId('euiDataGridColumnSorting-sortColumn-@timestamp')
+      ).toBeVisible();
+
+      expect(screen.getByTestId('dataGridHeaderCellSortingIcon-@timestamp')).toBeVisible();
+
+      // add more columns to sorting
+      fireEvent.click(screen.getByText(/Pick fields to sort by/));
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('dataGridColumnSortingPopoverColumnSelection-event.severity')
+        ).toBeVisible();
+      });
+
+      fireEvent.click(
+        screen.getByTestId('dataGridColumnSortingPopoverColumnSelection-event.severity')
+      );
+
+      // check new columns for sorting validity
+      await waitFor(() => {
+        expect(screen.getByTestId('dataGridHeaderCellSortingIcon-event.severity')).toBeVisible();
+      });
+      expect(
+        screen.getByTestId('euiDataGridColumnSorting-sortColumn-event.severity')
+      ).toBeVisible();
+
+      expect(screen.getByTestId('dataGridHeaderCellSortingIcon-@timestamp')).toBeVisible();
+    });
+  });
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx
index 70cfc3e72d8986..b0a34be54e470c 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx
@@ -9,15 +9,9 @@ import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import TimelineResizableLayout from './resizable_layout';
 
-// jest.mock('react-reverse-portal', () => ({
-//   InPortal: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-//   OutPortal: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-//   createHtmlPortalNode: () => ({ unmount: jest.fn() }),
-// }));
+const TestSideBarPanel = <div data-test-subj="sidebar__panel">{'Sidebar Panel'}</div>;
 
-const TestSideBarPanel = () => <div data-test-subj="sidebar__panel">{'Sidebar Panel'}</div>;
-
-const MainPanel = () => <div data-test-subj="main__panel">{'Main Panel'}</div>;
+const MainPanel = <div data-test-subj="main__panel">{'Main Panel'}</div>;
 
 const container = document.createElement('div');
 container.style.width = '1000px';
@@ -45,9 +39,9 @@ const TestComponent = () => {
 describe('ResizableLayout', () => {
   it('should render without any issues', async () => {
     render(<TestComponent />);
-    screen.debug(undefined, 100000);
 
     await waitFor(() => {
+      screen.debug(undefined, 100000);
       expect(screen.getByTestId('sidebar__panel')).toBeVisible();
     });
   });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx
index 706f8c7a706b21..2bcb14a7df8054 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.tsx
@@ -36,10 +36,10 @@ export const TimelineResizableLayoutComponent = ({
   unifiedFieldListSidebarContainerApi: UnifiedFieldListSidebarContainerApi | null;
 }) => {
   const [sidebarPanelNode] = useState(() =>
-    createHtmlPortalNode({ attributes: { class: 'eui-fullHeight' } })
+    createHtmlPortalNode({ attributes: { class: 'eui-fullHeight sidebarPanel' } })
   );
   const [mainPanelNode] = useState(() =>
-    createHtmlPortalNode({ attributes: { class: 'eui-fullHeight' } })
+    createHtmlPortalNode({ attributes: { class: 'eui-fullHeight mainPanel' } })
   );
 
   const { euiTheme } = useEuiTheme();

From 92cc95ee2d2177f80f1449a4a67692d78268c838 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Wed, 6 Mar 2024 12:59:32 +0100
Subject: [PATCH 25/65] fix: test + cell action metadata

---
 .../src/components/data_table.tsx                 |  7 +++++--
 .../alerts_histogram_panel/index.test.tsx         | 15 +++++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx
index 46ac1f25bc241a..a907aefbc30e6f 100644
--- a/packages/kbn-unified-data-table/src/components/data_table.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table.tsx
@@ -678,14 +678,17 @@ export const UnifiedDataTable = ({
         : undefined,
     [cellActionsTriggerId, isPlainRecord, visibleColumns, dataView]
   );
-  const cellActionsMetadata = useMemo(() => ({ dataViewId: dataView.id }), [dataView]);
+  const allCellActionsMetadata = useMemo(
+    () => ({ dataViewId: dataView.id, ...(cellActionsMetadata ?? {}) }),
+    [dataView, cellActionsMetadata]
+  );
 
   const columnsCellActions = useDataGridColumnsCellActions({
     fields: cellActionsFields,
     getCellValue,
     triggerId: cellActionsTriggerId,
     dataGridRef,
-    metadata: cellActionsMetadata,
+    metadata: allCellActionsMetadata,
   });
 
   const {
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/index.test.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/index.test.tsx
index a362f6a5425313..13d2a8e940c9d3 100644
--- a/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/index.test.tsx
@@ -21,8 +21,10 @@ import * as helpers from './helpers';
 import { mockAlertSearchResponse } from './mock_data';
 import { ChartContextMenu } from '../../../pages/detection_engine/chart_panels/chart_context_menu';
 import { AlertsHistogramPanel, LEGEND_WITH_COUNTS_WIDTH } from '.';
-import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { LensEmbeddable } from '../../../../common/components/visualization_actions/lens_embeddable';
+import type { ExperimentalFeatures } from '../../../../../common';
+import { allowedExperimentalValues } from '../../../../../common';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 
 jest.mock('../../../../common/containers/query_toggle');
 
@@ -110,7 +112,12 @@ jest.mock('../common/hooks', () => {
   };
 });
 
-const mockUseIsExperimentalFeatureEnabled = useIsExperimentalFeatureEnabled as jest.Mock;
+const mockUseIsExperimentalFeatureEnabled = jest.fn((feature: keyof ExperimentalFeatures) => {
+  if (feature === 'alertsPageChartsEnabled') return false;
+  if (feature === 'chartEmbeddablesEnabled') return false;
+  return allowedExperimentalValues[feature];
+});
+
 jest.mock('../../../../common/hooks/use_experimental_features');
 jest.mock('../../../hooks/alerts_visualization/use_alert_histogram_count', () => ({
   useAlertHistogramCount: jest.fn().mockReturnValue(999),
@@ -131,6 +138,10 @@ describe('AlertsHistogramPanel', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     mockUseQueryToggle.mockReturnValue({ toggleStatus: true, setToggleStatus: mockSetToggle });
+
+    (useIsExperimentalFeatureEnabled as jest.Mock).mockImplementation(
+      mockUseIsExperimentalFeatureEnabled
+    );
   });
 
   it('renders correctly', () => {

From 288195c3db594e32cc3481038b9518e749f67ba9 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Wed, 6 Mar 2024 14:08:28 +0100
Subject: [PATCH 26/65] fix: tests

---
 .../src/components/data_table.test.tsx                |  2 ++
 ..._data_view.tsx => use_get_sourcerer_data_view.tsx} |  8 ++++++--
 .../components/open_timeline/helpers.test.ts          |  2 +-
 .../timeline/unified_components/data_table/index.tsx  | 11 +++++------
 4 files changed, 14 insertions(+), 9 deletions(-)
 rename x-pack/plugins/security_solution/public/common/components/sourcerer/{get_sourcerer_data_view.tsx => use_get_sourcerer_data_view.tsx} (89%)

diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx
index 659b59ce4be837..ac736135734fdd 100644
--- a/packages/kbn-unified-data-table/src/components/data_table.test.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table.test.tsx
@@ -262,6 +262,7 @@ describe('UnifiedDataTable', () => {
         fields: undefined,
         dataGridRef: expect.any(Object),
         metadata: {
+          dataViewId: 'the-data-view-id',
           someKey: 'someValue',
         },
       });
@@ -283,6 +284,7 @@ describe('UnifiedDataTable', () => {
         ],
         dataGridRef: expect.any(Object),
         metadata: {
+          dataViewId: 'the-data-view-id',
           someKey: 'someValue',
         },
       });
diff --git a/x-pack/plugins/security_solution/public/common/components/sourcerer/get_sourcerer_data_view.tsx b/x-pack/plugins/security_solution/public/common/components/sourcerer/use_get_sourcerer_data_view.tsx
similarity index 89%
rename from x-pack/plugins/security_solution/public/common/components/sourcerer/get_sourcerer_data_view.tsx
rename to x-pack/plugins/security_solution/public/common/components/sourcerer/use_get_sourcerer_data_view.tsx
index 81c4bb0b9bc6a6..216adf2668a0f6 100644
--- a/x-pack/plugins/security_solution/public/common/components/sourcerer/get_sourcerer_data_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/sourcerer/use_get_sourcerer_data_view.tsx
@@ -11,8 +11,12 @@ import { useSourcererDataView } from '../../containers/sourcerer';
 import { useKibana } from '../../lib/kibana';
 import type { SourcererScopeName } from '../../store/sourcerer/model';
 
-// TODO: Define what the difference is between this and the sourcererDataView returned
-// from useSourcererDataView
+/*
+ *
+ * returns the created dataView based on sourcererDataView spec
+ * returned from useSourcererDataView
+ *
+ * */
 export const useGetScopedSourcererDataView = ({
   sourcererScope,
 }: {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts
index d77d89cf17e532..3325100812f404 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts
@@ -779,7 +779,7 @@ describe('helpers', () => {
         savedTimeline: true,
         timeline: {
           ...mockTimelineModel,
-          version: null,
+          version: '1',
           updated: undefined,
           changed: undefined,
         },
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index 88f67e34469a74..d8cd82379ba601 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -48,7 +48,7 @@ import ToolbarAdditionalControls from './toolbar_additional_controls';
 import { StyledTimelineUnifiedDataTable, StyledEuiProgress } from '../styles';
 import { timelineDefaults } from '../../../../store/defaults';
 import { timelineActions } from '../../../../store';
-import { useGetScopedSourcererDataView } from '../../../../../common/components/sourcerer/get_sourcerer_data_view';
+import { useGetScopedSourcererDataView } from '../../../../../common/components/sourcerer/use_get_sourcerer_data_view';
 import { defaultUdtHeaders } from '../default_headers';
 
 export const SAMPLE_SIZE_SETTING = 500;
@@ -485,11 +485,10 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
 
 export const TimelineDataTable: React.FC<CommonDataTableProps> = memo((props) => {
   const dataView = useGetScopedSourcererDataView({ sourcererScope: SourcererScopeName.timeline });
-  return dataView ? (
-    <TimelineDataTableComponent dataView={dataView} {...props} />
-  ) : (
-    <div>{'TO DO: SHOW ERROR COMPONENT'}</div>
-  );
+  if (!dataView) {
+    throw new Error('DataView must be defined');
+  }
+  return <TimelineDataTableComponent dataView={dataView} {...props} />;
 });
 
 // eslint-disable-next-line import/no-default-export

From ff4feeac9239b01282d3610f691741e6b0ebe96f Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Thu, 7 Mar 2024 07:49:52 +0100
Subject: [PATCH 27/65] fix: test instability

---
 .../query_tab_unified_components.test.tsx         | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
index fad1cdc9281745..3e68fc229232b9 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
@@ -16,7 +16,7 @@ import { useSourcererDataView } from '../../../../common/containers/sourcerer';
 import { mockSourcererScope } from '../../../../common/containers/sourcerer/mocks';
 import { mockTimelineData, TestProviders } from '../../../../common/mock';
 import { DefaultCellRenderer } from '../cell_rendering/default_cell_renderer';
-import { render, screen, waitFor, cleanup, fireEvent, within } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent, within } from '@testing-library/react';
 import { createStartServicesMock } from '../../../../common/lib/kibana/kibana_react.mock';
 import type { StartServices } from '../../../../types';
 import { useKibana } from '../../../../common/lib/kibana';
@@ -25,6 +25,7 @@ import { timelineActions } from '../../../store';
 import type { ExperimentalFeatures } from '../../../../../common';
 import { allowedExperimentalValues } from '../../../../../common';
 import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
+import { cloneDeep } from 'lodash';
 
 jest.mock('../../../containers', () => ({
   useTimelineEvents: jest.fn(),
@@ -53,11 +54,12 @@ const useIsExperimentalFeatureEnabledMock = jest.fn((feature: keyof Experimental
   if (feature === 'unifiedComponentsInTimelineEnabled') {
     return true;
   }
-  return allowedExperimentalValues[feature] ?? false;
+  return allowedExperimentalValues[feature];
 });
 
-// unified-field-list is is reporiting multiple analytics events
 jest.mock('../../../../common/lib/kibana');
+
+// unified-field-list is is reporiting multiple analytics events
 jest.mock(`@kbn/analytics-client`);
 
 const TestComponent = (props: Partial<ComponentProps<typeof QueryTabContent>>) => {
@@ -99,7 +101,7 @@ const loadPageMock = jest.fn();
 const useTimelineEventsMock = jest.fn(() => [
   false,
   {
-    events: mockTimelineData,
+    events: cloneDeep(mockTimelineData),
     pageInfo: {
       activePage: 0,
       totalPages: 10,
@@ -114,13 +116,12 @@ describe('query tab with unified timeline', () => {
   const kibanaServiceMock: StartServices = createStartServicesMock();
 
   afterEach(() => {
-    cleanup();
     jest.clearAllMocks();
   });
 
   beforeEach(() => {
-    const SECOND = 1000;
-    jest.setTimeout(10 * SECOND);
+    const ONE_SECOND = 1000;
+    jest.setTimeout(10 * ONE_SECOND);
     HTMLElement.prototype.getBoundingClientRect = jest.fn(() => {
       return {
         width: 1000,

From a22d80361cfad8b0d086f35d66ce9d481d168818 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Thu, 7 Mar 2024 10:09:49 +0100
Subject: [PATCH 28/65] test: unified list test

---
 .../query_tab_unified_components.test.tsx     | 88 ++++++++++++++++++-
 1 file changed, 87 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
index 3e68fc229232b9..1112a3a0aeee30 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
@@ -235,7 +235,7 @@ describe('query tab with unified timeline', () => {
           '11'
         );
       });
-    });
+    }, 10000);
 
     it('should remove column left/right ', async () => {
       const { container } = renderTestComponents();
@@ -475,6 +475,92 @@ describe('query tab with unified timeline', () => {
       ).toBeVisible();
 
       expect(screen.getByTestId('dataGridHeaderCellSortingIcon-@timestamp')).toBeVisible();
+    }, 10000);
+  });
+
+  describe('unified fields list', () => {
+    it('should add the column when clicked on X sign', async () => {
+      const field = {
+        name: 'event.severity',
+      };
+
+      renderTestComponents();
+      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('11');
+      });
+
+      // column exists in the table
+      expect(screen.getByTestId(`dataGridHeaderCell-${field.name}`)).toBeVisible();
+
+      fireEvent.click(screen.getAllByTestId(`fieldToggle-${field.name}`)[0]);
+
+      // column not longer exists in the table
+      await waitFor(() => {
+        expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('10');
+      });
+      expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(0);
+    });
+
+    it('should remove the column when clicked on ⊕ sign', async () => {
+      const field = {
+        name: 'agent.id',
+      };
+
+      renderTestComponents();
+      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('11');
+      });
+
+      expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(0);
+
+      // column exists in the table
+      const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
+
+      fireEvent.click(within(availableFields).getByTestId(`fieldToggle-${field.name}`));
+
+      await waitFor(() => {
+        expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('12');
+      });
+      expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(1);
     });
+
+    it('should should show callout when field search does not matches any field', async () => {
+      renderTestComponents();
+      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toHaveTextContent('35');
+      });
+
+      fireEvent.change(screen.getByTestId('fieldListFiltersFieldSearch'), {
+        target: { value: 'fake_field' },
+      });
+
+      await waitFor(() => {
+        expect(
+          screen.getByTestId('fieldListGroupedAvailableFieldsNoFieldsCallout-noFieldsMatch')
+        ).toBeVisible();
+      });
+
+      expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toHaveTextContent('0');
+    }, 10000);
+
+    it('should toggle side bar correctly', async () => {
+      renderTestComponents();
+      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+      await waitFor(() => {
+        expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toHaveTextContent('35');
+      });
+
+      fireEvent.click(screen.getByTitle('Hide sidebar'));
+
+      await waitFor(() => {
+        expect(screen.queryAllByTestId('fieldListGroupedAvailableFields-count')).toHaveLength(0);
+      });
+    }, 10000);
   });
 });

From c0fbb5fc8c1ba5bb8487721ea502c788daf457a7 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Thu, 7 Mar 2024 11:38:14 +0100
Subject: [PATCH 29/65] test: adding drag capability incremental save

---
 .../query_tab_unified_components.test.tsx     | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
index 1112a3a0aeee30..fe9663e4e6c15b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
@@ -528,6 +528,55 @@ describe('query tab with unified timeline', () => {
       expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(1);
     });
 
+    it.only('should be able to add column by dragging', async () => {
+      const field = {
+        name: 'agent.id',
+      };
+
+      renderTestComponents();
+      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('11');
+      });
+
+      expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(0);
+
+      // column exists in the table
+      const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
+
+      const fieldToBeAdded = within(availableFields).getByTestId(`field-${field.name}-showDetails`);
+
+      const dataTransfer = {
+        text: field.name,
+        getData: () => field.name,
+      };
+
+      fireEvent.drag(fieldToBeAdded);
+      fireEvent.dragStart(fieldToBeAdded, {
+        dataTransfer,
+      });
+
+      const destination = screen.getByTestId('discoverDocTable');
+
+      fireEvent.dragEnter(destination);
+      fireEvent.dragOver(destination);
+
+      expect(screen.getByTestId('domDragDropContainer')).toHaveClass(
+        'domDragDrop__container domDragDrop__container-active'
+      );
+
+      fireEvent.drop(destination, {
+        dataTransfer,
+      });
+      expect(screen.getByTestId('domDragDropContainer')).toHaveClass('domDragDrop__container');
+
+      await waitFor(() => {
+        expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(1);
+      });
+      expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('12');
+    }, 10000);
+
     it('should should show callout when field search does not matches any field', async () => {
       renderTestComponents();
       expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();

From 1dfe8f4e311b170c680c36b9afa53cfdc90ec86b Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Fri, 8 Mar 2024 12:55:21 +0100
Subject: [PATCH 30/65] refactor: delete unnecessary files + code

---
 x-pack/plugins/security_solution/kibana.jsonc |   1 -
 .../common/lib/cell_actions/field_value.tsx   | 177 ----------------
 .../security_solution/public/plugin.tsx       |   1 -
 .../timeline/query_tab_content/index.test.tsx |   1 -
 .../data_table/test.data.ts                   | 198 ------------------
 5 files changed, 378 deletions(-)
 delete mode 100644 x-pack/plugins/security_solution/public/common/lib/cell_actions/field_value.tsx
 delete mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/test.data.ts

diff --git a/x-pack/plugins/security_solution/kibana.jsonc b/x-pack/plugins/security_solution/kibana.jsonc
index 3e781290679876..99c2f585eb3f7e 100644
--- a/x-pack/plugins/security_solution/kibana.jsonc
+++ b/x-pack/plugins/security_solution/kibana.jsonc
@@ -51,7 +51,6 @@
       "stackConnectors",
       "discover",
       "notifications",
-      "charts",
       "savedObjects",
       "savedSearch",
       "unifiedDocViewer",
diff --git a/x-pack/plugins/security_solution/public/common/lib/cell_actions/field_value.tsx b/x-pack/plugins/security_solution/public/common/lib/cell_actions/field_value.tsx
deleted file mode 100644
index 575f46d2c9a436..00000000000000
--- a/x-pack/plugins/security_solution/public/common/lib/cell_actions/field_value.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import type { EuiDataGridColumnCellActionProps } from '@elastic/eui';
-import { head, getOr, get, isEmpty } from 'lodash/fp';
-import React, { useMemo } from 'react';
-import type { TimelineItem } from '@kbn/timelines-plugin/common';
-import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
-import { getPageRowIndex } from '@kbn/securitysolution-data-table';
-import type { DataTableRecord } from '@kbn/discover-utils/types';
-import type { ColumnHeaderOptions } from '../../../../common/types';
-import type { TimelineNonEcsData } from '../../../../common/search_strategy';
-import { useGetMappedNonEcsValue } from '../../../timelines/components/timeline/body/data_driven_columns';
-import { FormattedFieldValue } from '../../../timelines/components/timeline/body/renderers/formatted_field';
-import { parseValue } from '../../../timelines/components/timeline/body/renderers/parse_value';
-import { EmptyComponent, getLinkColumnDefinition } from './helpers';
-import { getField, getFieldKey } from '../../../helpers';
-
-const useFormattedFieldProps = ({
-  rowIndex,
-  pageSize,
-  ecsData,
-  columnId,
-  header,
-  data,
-  unifiedDataTableRow,
-}: {
-  rowIndex: number;
-  data: TimelineNonEcsData[][];
-  ecsData: Ecs[];
-  header?: ColumnHeaderOptions;
-  columnId: string;
-  pageSize: number;
-  unifiedDataTableRow?: DataTableRecord & TimelineItem;
-}) => {
-  const pageRowIndex = getPageRowIndex(rowIndex, pageSize);
-
-  const rowData = useMemo(() => {
-    return {
-      data: unifiedDataTableRow ? unifiedDataTableRow.data : data[pageRowIndex],
-      fieldName: columnId,
-    };
-  }, [pageRowIndex, columnId, data, unifiedDataTableRow]);
-  const ecs = unifiedDataTableRow ? unifiedDataTableRow.ecs : ecsData[pageRowIndex];
-
-  const link = getLinkColumnDefinition(columnId, header?.type, header?.linkField);
-  const linkField = header?.linkField ? header?.linkField : link?.linkField;
-  const linkValues = header && getOr([], linkField ?? '', ecs);
-  const eventId = (header && get('_id' ?? '', ecs)) || '';
-  const values = useGetMappedNonEcsValue(rowData);
-  const value = parseValue(head(values));
-  const title = values && values.length > 1 ? `${link?.label}: ${value}` : link?.label;
-  // if linkField is defined but link values is empty, it's possible we are trying to look for a column definition for an old event set
-  if (linkField !== undefined && linkValues.length === 0 && values !== undefined) {
-    const normalizedLinkValue = getField(ecs, linkField);
-    const normalizedLinkField = getFieldKey(ecs, linkField);
-    const normalizedColumnId = getFieldKey(ecs, columnId);
-    const normalizedLink = getLinkColumnDefinition(
-      normalizedColumnId,
-      header?.type,
-      normalizedLinkField
-    );
-    return {
-      pageRowIndex,
-      link: normalizedLink,
-      eventId,
-      fieldFormat: header?.format || '',
-      fieldName: normalizedColumnId,
-      fieldType: header?.type || '',
-      value: parseValue(head(normalizedColumnId)),
-      values,
-      title,
-      linkValue: head<string>(normalizedLinkValue),
-    };
-  } else {
-    return {
-      pageRowIndex,
-      link,
-      eventId,
-      fieldFormat: header?.format || '',
-      fieldName: columnId,
-      fieldType: header?.type || '',
-      value,
-      values,
-      title,
-      linkValue: head<string>(linkValues),
-    };
-  }
-};
-
-export const FieldValueCell = ({
-  data,
-  ecsData,
-  header,
-  scopeId,
-  pageSize,
-  closeCellPopover,
-  unifiedDataTableRows,
-}: {
-  data: TimelineNonEcsData[][];
-  ecsData: Ecs[];
-  header?: ColumnHeaderOptions;
-  scopeId: string;
-  pageSize: number;
-  closeCellPopover?: () => void;
-  unifiedDataTableRows?: Array<DataTableRecord & TimelineItem>;
-}) => {
-  if (header !== undefined) {
-    return function FieldValue({
-      rowIndex,
-      columnId,
-      Component,
-    }: EuiDataGridColumnCellActionProps) {
-      const unifiedDataTableRow = unifiedDataTableRows ? unifiedDataTableRows[rowIndex] : undefined;
-      const {
-        pageRowIndex,
-        link,
-        eventId,
-        value,
-        values,
-        title,
-        fieldName,
-        fieldFormat,
-        fieldType,
-        linkValue,
-      } = useFormattedFieldProps({
-        unifiedDataTableRow,
-        rowIndex,
-        pageSize,
-        ecsData,
-        columnId,
-        header,
-        data,
-      });
-
-      const showEmpty = useMemo(() => {
-        const hasLink = link !== undefined && values && !isEmpty(value);
-        if (unifiedDataTableRow) {
-          return hasLink !== true;
-        }
-        if (pageRowIndex >= data.length) {
-          return true;
-        } else {
-          return hasLink !== true;
-        }
-      }, [link, pageRowIndex, value, values, unifiedDataTableRow]);
-
-      return showEmpty === false ? (
-        <FormattedFieldValue
-          Component={unifiedDataTableRow ? undefined : Component}
-          contextId={`expanded-value-${columnId}-row-${pageRowIndex}-${scopeId}`}
-          eventId={eventId}
-          fieldFormat={fieldFormat}
-          isAggregatable={header?.aggregatable ?? false}
-          fieldName={fieldName}
-          fieldType={fieldType}
-          isButton={unifiedDataTableRow ? false : true}
-          isDraggable={false}
-          value={value}
-          truncate={false}
-          title={title}
-          linkValue={linkValue}
-          onClick={closeCellPopover}
-        />
-      ) : (
-        // data grid expects each cell action always return an element, it crashes if returns null
-        EmptyComponent
-      );
-    };
-  } else {
-    return EmptyComponent;
-  }
-};
diff --git a/x-pack/plugins/security_solution/public/plugin.tsx b/x-pack/plugins/security_solution/public/plugin.tsx
index 155a6584d92d7f..0aa89c80e0a188 100644
--- a/x-pack/plugins/security_solution/public/plugin.tsx
+++ b/x-pack/plugins/security_solution/public/plugin.tsx
@@ -212,7 +212,6 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
         telemetry: this.telemetry.start(),
         customDataService,
         topValuesPopover: new TopValuesPopoverService(),
-        charts: startPlugins.charts,
       };
       return services;
     };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.test.tsx
index 16355102274cfb..ff6fac5d733f06 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.test.tsx
@@ -117,7 +117,6 @@ describe('Timeline', () => {
     };
   });
 
-  // FLAKY: https://github.com/elastic/kibana/issues/156797
   describe('rendering', () => {
     let spyCombineQueries: jest.SpyInstance;
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/test.data.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/test.data.ts
deleted file mode 100644
index 2fa79f4f368d9f..00000000000000
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/test.data.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import type { TimelineItem } from '../../../../../../common/search_strategy';
-
-export const eventsData: TimelineItem[] = [
-  {
-    ecs: {
-      _id: '5d8de53d9afe7cec9d674f7d6882560ad143480698a2920900d628c18552898f',
-      timestamp: '2024-02-14T09:16:10.327Z',
-      _index: '.internal.alerts-security.alerts-default-000001',
-      kibana: {
-        alert: {
-          rule: {
-            from: ['now-6060s'],
-            name: ['CAtch All'],
-            to: ['now'],
-            uuid: ['6ec63433-e14d-42ec-9d37-29d7c0bd9705'],
-            rule_id: ['3fb2916d-3681-42fc-8537-ec81010b58ee'],
-            type: ['query'],
-            version: ['1'],
-            parameters: {
-              severity_mapping: [],
-              references: [],
-              description: 'CAtch All',
-              language: 'kuery',
-              type: 'query',
-              exceptions_list: [],
-              from: 'now-6060s',
-              severity: 'low',
-              max_signals: 100,
-              risk_score: 21,
-              risk_score_mapping: [],
-              author: [],
-              query: '*',
-              index: [
-                'apm-*-transaction*',
-                'auditbeat-*',
-                'endgame-*',
-                'filebeat-*',
-                'logs-*',
-                'packetbeat-*',
-                'traces-apm*',
-                'winlogbeat-*',
-                '-*elastic-cloud-logs-*',
-              ],
-              filters: [],
-              version: 1,
-              rule_id: '3fb2916d-3681-42fc-8537-ec81010b58ee',
-              license: '',
-              required_fields: [],
-              immutable: false,
-              related_integrations: [],
-              meta: { from: '100m', kibana_siem_app_url: 'http://localhost:5601/app/security' },
-              setup: '',
-              false_positives: [],
-              threat: [],
-              to: 'now',
-            },
-          },
-          ancestors: {
-            index: '.ds-logs-endpoint.events.process-default-2024.02.14-000001',
-          },
-          workflow_assignee_ids: ['u_mGBROF_q5bmFCATbLXAcCwKa0k8JvONAwSruelyKA5E_0'],
-          workflow_status: ['open'],
-          original_time: ['2024-02-14T09:15:22.812Z'],
-          severity: ['low'],
-        },
-      },
-      event: {
-        category: ['authentication', 'session'],
-        id: ['b03803e3-0800-4149-bbc2-ea9a4334bea6'],
-        kind: ['signal'],
-        outcome: ['failure'],
-        type: ['start'],
-      },
-      host: {
-        name: ['Host-zckg6ezxy6'],
-        os: {
-          family: ['debian'],
-          name: ['Linux'],
-        },
-        id: ['e08fb0fb-88a9-4187-89e1-ad744643e83b'],
-        ip: ['10.150.209.5'],
-      },
-      user: {
-        name: ['angcqrfgct'],
-        domain: ['cci05abfrt'],
-      },
-      agent: {
-        type: ['endpoint'],
-        id: ['b98e82c8-067d-4ae3-ac05-6f9ed4abaf5f'],
-      },
-      process: {
-        hash: {
-          md5: ['58fd6368-4e37-4099-b372-bcc011418c2b'],
-        },
-        parent: {
-          pid: [2680],
-        },
-        pid: [4055],
-        name: ['notepad.exe'],
-        args: ['"C:\\notepad.exe"', '--0z2'],
-        entity_id: ['ma62qvs0vh'],
-        executable: ['C:\\notepad.exe'],
-        working_directory: ['/home/angcqrfgct/'],
-        entry_leader: {
-          entity_id: ['6ykz6hr912'],
-          name: ['fake entry'],
-          pid: ['957'],
-          start: ['1970-01-01T00:00:00.000Z'],
-        },
-        session_leader: {
-          entity_id: ['6ykz6hr912'],
-          name: ['fake session'],
-          pid: ['238'],
-        },
-        group_leader: {
-          entity_id: ['6ykz6hr912'],
-          name: ['fake leader'],
-          pid: ['171'],
-        },
-      },
-    },
-    data: [
-      {
-        field: '@timestamp',
-        value: ['2024-02-14T09:16:10.327Z'],
-      },
-      {
-        field: 'kibana.alert.workflow_assignee_ids',
-        value: ['u_mGBROF_q5bmFCATbLXAcCwKa0k8JvONAwSruelyKA5E_0'],
-      },
-      {
-        field: 'kibana.alert.workflow_status',
-        value: ['open'],
-      },
-      {
-        field: 'kibana.alert.original_time',
-        value: ['2024-02-14T09:15:22.812Z'],
-      },
-      {
-        field: 'kibana.alert.rule.from',
-        value: ['now-6060s'],
-      },
-      {
-        field: 'kibana.alert.rule.name',
-        value: ['CAtch All'],
-      },
-      {
-        field: 'kibana.alert.rule.to',
-        value: ['now'],
-      },
-      {
-        field: 'kibana.alert.rule.uuid',
-        value: ['6ec63433-e14d-42ec-9d37-29d7c0bd9705'],
-      },
-      {
-        field: 'kibana.alert.rule.rule_id',
-        value: ['3fb2916d-3681-42fc-8537-ec81010b58ee'],
-      },
-      {
-        field: 'kibana.alert.rule.type',
-        value: ['query'],
-      },
-      {
-        field: 'kibana.alert.original_event.kind',
-        value: ['event'],
-      },
-      {
-        field: 'event.category',
-        value: ['authentication', 'session'],
-      },
-      {
-        field: 'host.name',
-        value: ['Host-zckg6ezxy6'],
-      },
-      {
-        field: 'user.name',
-        value: ['angcqrfgct'],
-      },
-      {
-        field: 'host.os.family',
-        value: ['debian'],
-      },
-      {
-        field: 'process.entry_leader.entity_id',
-        value: ['6ykz6hr912'],
-      },
-    ],
-    _id: '5d8de53d9afe7cec9d674f7d6882560ad143480698a2920900d628c18552898f',
-    _index: '.internal.alerts-security.alerts-default-000001',
-  },
-];

From 1fe3ea63eb0ad135e21cbf67e03d8af55cad0574 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 11 Mar 2024 09:12:13 +0100
Subject: [PATCH 31/65] fix: add useGetScopedSourcererDataViewTests

---
 .../markdown_editor/plugins/insight/index.tsx | 11 +---
 .../use_get_sourcerer_data_view.test.ts       | 59 +++++++++++++++++++
 .../sourcerer/use_get_sourcerer_data_view.tsx | 10 ++--
 .../timeline/unified_components/index.tsx     | 12 +---
 4 files changed, 70 insertions(+), 22 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/public/common/components/sourcerer/use_get_sourcerer_data_view.test.ts

diff --git a/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/index.tsx b/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/index.tsx
index 7efbebb776cd77..7e51edec968b9e 100644
--- a/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/index.tsx
@@ -32,7 +32,6 @@ import {
 import numeral from '@elastic/numeral';
 import { css } from '@emotion/react';
 import type { EuiMarkdownEditorUiPluginEditorProps } from '@elastic/eui/src/components/markdown_editor/markdown_types';
-import { DataView } from '@kbn/data-views-plugin/public';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { Filter } from '@kbn/es-query';
 import { FilterStateStore } from '@kbn/es-query';
@@ -57,6 +56,7 @@ import { filtersToInsightProviders } from './provider';
 import { useLicense } from '../../../../hooks/use_license';
 import { isProviderValid } from './helpers';
 import * as i18n from './translations';
+import { useGetScopedSourcererDataView } from '../../../sourcerer/use_get_sourcerer_data_view';
 
 interface InsightComponentProps {
   label?: string;
@@ -285,13 +285,8 @@ const InsightEditorComponent = ({
     uiSettings,
     fieldFormats,
   } = useKibana().services;
-  const dataView = useMemo(() => {
-    if (sourcererDataView != null) {
-      return new DataView({ spec: sourcererDataView, fieldFormats });
-    } else {
-      return null;
-    }
-  }, [sourcererDataView, fieldFormats]);
+
+  const dataView = useGetScopedSourcererDataView(SourcererScopeName.default);
 
   const [providers, setProviders] = useState<Provider[][]>([[]]);
   const dateRangeChoices = useMemo(() => {
diff --git a/x-pack/plugins/security_solution/public/common/components/sourcerer/use_get_sourcerer_data_view.test.ts b/x-pack/plugins/security_solution/public/common/components/sourcerer/use_get_sourcerer_data_view.test.ts
new file mode 100644
index 00000000000000..eb7a6c34ce80db
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/sourcerer/use_get_sourcerer_data_view.test.ts
@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { DataView } from '@kbn/data-views-plugin/common';
+import { renderHook } from '@testing-library/react-hooks';
+import { useSourcererDataView } from '../../containers/sourcerer';
+import { mockSourcererScope } from '../../containers/sourcerer/mocks';
+import { SourcererScopeName } from '../../store/sourcerer/model';
+import type { UseGetScopedSourcererDataViewArgs } from './use_get_sourcerer_data_view';
+import { useGetScopedSourcererDataView } from './use_get_sourcerer_data_view';
+
+const renderHookCustom = (args: UseGetScopedSourcererDataViewArgs) => {
+  return renderHook<UseGetScopedSourcererDataViewArgs, DataView | undefined>(
+    ({ sourcererScope }) => useGetScopedSourcererDataView({ sourcererScope }),
+    {
+      initialProps: {
+        ...args,
+      },
+    }
+  );
+};
+
+jest.mock('../../containers/sourcerer');
+
+const mockGetSourcererDataView = jest.fn(() => mockSourcererScope);
+
+describe('useGetScopedSourcererDataView', () => {
+  beforeEach(() => {
+    (useSourcererDataView as jest.Mock).mockImplementation(mockGetSourcererDataView);
+  });
+  it('should return DataView when correct spec is provided', () => {
+    const { result } = renderHookCustom({ sourcererScope: SourcererScopeName.timeline });
+
+    expect(result.current).toBeInstanceOf(DataView);
+  });
+  it('should return undefined when no spec is provided', () => {
+    mockGetSourcererDataView.mockReturnValueOnce({
+      ...mockSourcererScope,
+      sourcererDataView: undefined,
+    });
+    const { result } = renderHookCustom({ sourcererScope: SourcererScopeName.timeline });
+    expect(result.current).toBeUndefined();
+  });
+  it('should return undefined when no spec is provided and should update the return when spec is updated to correct value', () => {
+    mockGetSourcererDataView.mockReturnValueOnce({
+      ...mockSourcererScope,
+      sourcererDataView: undefined,
+    });
+    const { rerender, result } = renderHookCustom({ sourcererScope: SourcererScopeName.timeline });
+    expect(result.current).toBeUndefined();
+
+    rerender({ sourcererScope: SourcererScopeName.timeline });
+    expect(result.current).toBeInstanceOf(DataView);
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/common/components/sourcerer/use_get_sourcerer_data_view.tsx b/x-pack/plugins/security_solution/public/common/components/sourcerer/use_get_sourcerer_data_view.tsx
index 216adf2668a0f6..af49a784164cf4 100644
--- a/x-pack/plugins/security_solution/public/common/components/sourcerer/use_get_sourcerer_data_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/sourcerer/use_get_sourcerer_data_view.tsx
@@ -11,6 +11,10 @@ import { useSourcererDataView } from '../../containers/sourcerer';
 import { useKibana } from '../../lib/kibana';
 import type { SourcererScopeName } from '../../store/sourcerer/model';
 
+export interface UseGetScopedSourcererDataViewArgs {
+  sourcererScope: SourcererScopeName;
+}
+
 /*
  *
  * returns the created dataView based on sourcererDataView spec
@@ -19,16 +23,14 @@ import type { SourcererScopeName } from '../../store/sourcerer/model';
  * */
 export const useGetScopedSourcererDataView = ({
   sourcererScope,
-}: {
-  sourcererScope: SourcererScopeName;
-}) => {
+}: UseGetScopedSourcererDataViewArgs): DataView | undefined => {
   const {
     services: { fieldFormats },
   } = useKibana();
   const { sourcererDataView } = useSourcererDataView(sourcererScope);
 
   const dataView = useMemo(() => {
-    if (sourcererDataView != null) {
+    if (sourcererDataView) {
       return new DataView({ spec: sourcererDataView, fieldFormats });
     } else {
       return undefined;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
index b13117c5e6f97a..3b886ef2546ea6 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
@@ -10,7 +10,6 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import { generateFilters } from '@kbn/data-plugin/public';
 import type { DataViewField } from '@kbn/data-plugin/common';
-import { DataView } from '@kbn/data-views-plugin/public';
 import type { SortOrder } from '@kbn/saved-search-plugin/public';
 import type { DataLoadingState } from '@kbn/unified-data-table';
 import { useColumns } from '@kbn/unified-data-table';
@@ -25,6 +24,7 @@ import type {
 import { UnifiedFieldListSidebarContainer } from '@kbn/unified-field-list';
 import type { EuiTheme } from '@kbn/react-kibana-context-styled';
 import type { CoreStart } from '@kbn/core-lifecycle-browser';
+import { useGetScopedSourcererDataView } from '../../../../common/components/sourcerer/use_get_sourcerer_data_view';
 import { EventDetailsWidthProvider } from '../../../../common/components/events_viewer/event_details_width_context';
 import type { ExpandedDetailTimeline } from '../../../../../common/types';
 import type { TimelineItem } from '../../../../../common/search_strategy';
@@ -40,7 +40,6 @@ import type {
 } from '../../../../../common/types/timeline';
 import type { State, inputsModel } from '../../../../common/store';
 import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
-import { useSourcererDataView } from '../../../../common/containers/sourcerer';
 import { getColumnHeader } from '../body/column_headers/helpers';
 import { timelineBodySelector } from '../body/selectors';
 import { StyledPageContentWrapper, StyledMainEuiPanel, StyledSplitFlexItem } from './styles';
@@ -192,15 +191,8 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
   const defaultColumns = useMemo(() => {
     return columns.map((c) => c.id);
   }, [columns]);
-  const { sourcererDataView } = useSourcererDataView(SourcererScopeName.timeline);
 
-  const dataView = useMemo(() => {
-    if (sourcererDataView != null) {
-      return new DataView({ spec: sourcererDataView, fieldFormats });
-    } else {
-      return undefined;
-    }
-  }, [sourcererDataView, fieldFormats]);
+  const dataView = useGetScopedSourcererDataView(SourcererScopeName.timeline);
 
   // Sorting
   const sortingColumns = useMemo(() => {

From 4c8fe9158be41febba0b179242d32ef260905d9d Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 11 Mar 2024 10:55:51 +0100
Subject: [PATCH 32/65] fix: deduped last updated date component

---
 .../markdown_editor/plugins/insight/index.tsx |  7 ++-
 .../components/timeline/footer/index.tsx      | 32 +---------
 .../timeline/footer/last_updated.test.tsx     | 61 +++++++++++++++++++
 .../data_table => footer}/last_updated.tsx    | 10 +--
 .../toolbar_additional_controls.tsx           |  2 +-
 .../timeline/unified_components/index.tsx     |  4 +-
 6 files changed, 76 insertions(+), 40 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/footer/last_updated.test.tsx
 rename x-pack/plugins/security_solution/public/timelines/components/timeline/{unified_components/data_table => footer}/last_updated.tsx (85%)

diff --git a/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/index.tsx b/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/index.tsx
index 7e51edec968b9e..2faca21677863f 100644
--- a/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/markdown_editor/plugins/insight/index.tsx
@@ -277,16 +277,17 @@ const InsightEditorComponent = ({
   onCancel,
 }: EuiMarkdownEditorUiPluginEditorProps<InsightComponentProps & { relativeTimerange: string }>) => {
   const isEditMode = node != null;
-  const { sourcererDataView, indexPattern } = useSourcererDataView(SourcererScopeName.default);
+  const { indexPattern } = useSourcererDataView(SourcererScopeName.default);
   const {
     unifiedSearch: {
       ui: { FiltersBuilderLazy },
     },
     uiSettings,
-    fieldFormats,
   } = useKibana().services;
 
-  const dataView = useGetScopedSourcererDataView(SourcererScopeName.default);
+  const dataView = useGetScopedSourcererDataView({
+    sourcererScope: SourcererScopeName.default,
+  });
 
   const [providers, setProviders] = useState<Provider[][]>([[]]);
   const dateRangeChoices = useMemo(() => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.tsx
index 019a4a1ce41328..a7ef4080c6d5eb 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/index.tsx
@@ -27,40 +27,10 @@ import type { OnChangePage } from '../events';
 import { EVENTS_COUNT_BUTTON_CLASS_NAME } from '../helpers';
 
 import * as i18n from './translations';
-import { useEventDetailsWidthContext } from '../../../../common/components/events_viewer/event_details_width_context';
 import { timelineActions, timelineSelectors } from '../../../store';
 import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
 import { useKibana } from '../../../../common/lib/kibana';
-
-export const isCompactFooter = (width: number): boolean => width < 600;
-
-interface FixedWidthLastUpdatedContainerProps {
-  updatedAt: number;
-}
-
-const FixedWidthLastUpdatedContainer = React.memo<FixedWidthLastUpdatedContainerProps>(
-  ({ updatedAt }) => {
-    const { timelines } = useKibana().services;
-    const width = useEventDetailsWidthContext();
-    const compact = useMemo(() => isCompactFooter(width), [width]);
-
-    return updatedAt > 0 ? (
-      <FixedWidthLastUpdated data-test-subj="fixed-width-last-updated" compact={compact}>
-        {timelines.getLastUpdated({ updatedAt, compact })}
-      </FixedWidthLastUpdated>
-    ) : null;
-  }
-);
-
-FixedWidthLastUpdatedContainer.displayName = 'FixedWidthLastUpdatedContainer';
-
-const FixedWidthLastUpdated = styled.div<{ compact?: boolean }>`
-  width: ${({ compact }) => (!compact ? 200 : 25)}px;
-  overflow: hidden;
-  text-align: end;
-`;
-
-FixedWidthLastUpdated.displayName = 'FixedWidthLastUpdated';
+import { FixedWidthLastUpdatedContainer } from './last_updated';
 
 interface HeightProp {
   height: number;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/last_updated.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/last_updated.test.tsx
new file mode 100644
index 00000000000000..fd26a06d0f3cb5
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/last_updated.test.tsx
@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useEventDetailsWidthContext } from '../../../../common/components/events_viewer/event_details_width_context';
+import { FixedWidthLastUpdatedContainer } from './last_updated';
+import { useKibana } from '../../../../common/lib/kibana';
+import { createStartServicesMock } from '../../../../common/lib/kibana/kibana_react.mock';
+
+jest.mock('../../../../common/components/events_viewer/event_details_width_context');
+jest.mock('../../../../common/lib/kibana');
+
+const mockEventDetailsWidthContainer = jest.fn().mockImplementation(() => {
+  return 800;
+});
+
+const mockUseLastUpdatedTimelinesPlugin = jest.fn().mockImplementation(() => {
+  return `Updated 2 minutes ago`;
+});
+
+describe('FixWidthLastUpdateContainer', () => {
+  beforeEach(() => {
+    (useKibana as jest.Mock).mockImplementation(() => {
+      return {
+        services: {
+          ...createStartServicesMock(),
+          timelines: {
+            getLastUpdated: mockUseLastUpdatedTimelinesPlugin,
+          },
+        },
+      };
+    });
+
+    (useEventDetailsWidthContext as jest.Mock).mockImplementation(mockEventDetailsWidthContainer);
+  });
+
+  it('should return normal version when width is greater than 600', () => {
+    render(<FixedWidthLastUpdatedContainer updatedAt={Date.now()} />);
+    expect(screen.getByTestId('fixed-width-last-updated')).toHaveTextContent(
+      'Updated 2 minutes ago'
+    );
+    expect(screen.getByTestId('fixed-width-last-updated')).toHaveStyle({
+      width: '200px',
+    });
+  });
+  it('should return compact version when width is less than 600', () => {
+    mockEventDetailsWidthContainer.mockReturnValueOnce(400);
+    render(<FixedWidthLastUpdatedContainer updatedAt={Date.now()} />);
+    expect(screen.getByTestId('fixed-width-last-updated')).toHaveTextContent(
+      'Updated 2 minutes ago'
+    );
+    expect(screen.getByTestId('fixed-width-last-updated')).toHaveStyle({
+      width: '25px',
+    });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/last_updated.tsx
similarity index 85%
rename from x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx
rename to x-pack/plugins/security_solution/public/timelines/components/timeline/footer/last_updated.tsx
index 8fd943255c29db..02359cb7923783 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/last_updated.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/footer/last_updated.tsx
@@ -7,16 +7,16 @@
 
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
+import { useEventDetailsWidthContext } from '../../../../common/components/events_viewer/event_details_width_context';
 
-import { useEventDetailsWidthContext } from '../../../../../common/components/events_viewer/event_details_width_context';
-import { useKibana } from '../../../../../common/lib/kibana';
-
-export const isCompactFooter = (width: number): boolean => width < 600;
+import { useKibana } from '../../../../common/lib/kibana';
 
 interface FixedWidthLastUpdatedContainerProps {
   updatedAt: number;
 }
 
+export const isCompactFooter = (width: number): boolean => width < 600;
+
 export const FixedWidthLastUpdatedContainer = React.memo<FixedWidthLastUpdatedContainerProps>(
   ({ updatedAt }) => {
     const { timelines } = useKibana().services;
@@ -35,6 +35,8 @@ FixedWidthLastUpdatedContainer.displayName = 'FixedWidthLastUpdatedContainer';
 
 const FixedWidthLastUpdated = styled.span<{ compact?: boolean }>`
   width: ${({ compact }) => (!compact ? 200 : 25)}px;
+  text-overflow: ellipsis;
+  text-align: end;
   overflow: hidden;
 `;
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx
index ceb3fbeb6011a2..1c7fb202060950 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/toolbar_additional_controls.tsx
@@ -14,9 +14,9 @@ import {
   useTimelineFullScreen,
 } from '../../../../../common/containers/use_full_screen';
 import { StatefulRowRenderersBrowser } from '../../../row_renderers_browser';
-import { FixedWidthLastUpdatedContainer } from './last_updated';
 import * as i18n from './translations';
 import { EXIT_FULL_SCREEN_CLASS_NAME } from '../../../../../common/components/exit_full_screen';
+import { FixedWidthLastUpdatedContainer } from '../../footer/last_updated';
 
 export const isFullScreen = ({
   globalFullScreen,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
index 3b886ef2546ea6..3dd395bf3cfa13 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
@@ -192,7 +192,9 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
     return columns.map((c) => c.id);
   }, [columns]);
 
-  const dataView = useGetScopedSourcererDataView(SourcererScopeName.timeline);
+  const dataView = useGetScopedSourcererDataView({
+    sourcererScope: SourcererScopeName.timeline,
+  });
 
   // Sorting
   const sortingColumns = useMemo(() => {

From 4a61483328c260e9fd0f6cdac03dfe7158cfe2fd Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 11 Mar 2024 11:37:56 +0100
Subject: [PATCH 33/65] refactor: better class names

---
 .../kbn-unified-data-table/src/components/data_table.scss     | 4 ++--
 .../src/components/data_table_document_selection.tsx          | 2 +-
 .../src/components/data_table_expand_button.tsx               | 4 ++--
 .../src/utils/get_render_cell_value.tsx                       | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss
index 6c1700cbf442c8..acb86731b83b8b 100644
--- a/packages/kbn-unified-data-table/src/components/data_table.scss
+++ b/packages/kbn-unified-data-table/src/components/data_table.scss
@@ -9,11 +9,11 @@
   font-family: $euiCodeFontFamily;
 }
 
-.dscDocsGrid__cell--expanded {
+.unifiedDataTable__cell--expanded {
   background-color: $euiColorHighlight;
 }
 
-.dscDocsGrid__cell--selected {
+.unifiedDataTable__cell--selected {
   background-color: $euiColorHighlight;
 }
 
diff --git a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx
index 78f22a1a107899..771c2e5fdfd5ba 100644
--- a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx
@@ -39,7 +39,7 @@ export const SelectButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
   useEffect(() => {
     if (expanded && doc && expanded.id === doc.id) {
       setCellProps({
-        className: 'dscDocsGrid__cell--selected',
+        className: 'unifiedDataTable__cell--selected',
       });
     } else {
       setCellProps({ style: undefined });
diff --git a/packages/kbn-unified-data-table/src/components/data_table_expand_button.tsx b/packages/kbn-unified-data-table/src/components/data_table_expand_button.tsx
index 39a2ef6ba0a476..76210b6aeee238 100644
--- a/packages/kbn-unified-data-table/src/components/data_table_expand_button.tsx
+++ b/packages/kbn-unified-data-table/src/components/data_table_expand_button.tsx
@@ -26,11 +26,11 @@ export const ExpandButton = ({ rowIndex, setCellProps }: EuiDataGridCellValueEle
   useEffect(() => {
     if (current.isAnchor) {
       setCellProps({
-        className: 'dscDocsGrid__cell--highlight',
+        className: 'unifiedDataTable__cell--highlight',
       });
     } else if (expanded && current && expanded.id === current.id) {
       setCellProps({
-        className: 'dscDocsGrid__cell--expanded',
+        className: 'unifiedDataTable__cell--expanded',
       });
     } else {
       setCellProps({ style: undefined });
diff --git a/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx b/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
index bd3c0a4deabdc6..5b34d308b77248 100644
--- a/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
+++ b/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
@@ -63,11 +63,11 @@ export const getRenderCellValueFn = ({
     useEffect(() => {
       if (row?.isAnchor) {
         setCellProps({
-          className: 'dscDocsGrid__cell--highlight',
+          className: 'unifiedDataTable__cell--highlight',
         });
       } else if (ctx.expanded && row && ctx.expanded.id === row.id) {
         setCellProps({
-          className: 'dscDocsGrid__cell--expanded',
+          className: 'unifiedDataTable__cell--expanded',
         });
       } else {
         setCellProps({ style: undefined });

From fa5d8e03ce348c0395cbf9ec38b1a5a37d589ab3 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 11 Mar 2024 11:48:57 +0100
Subject: [PATCH 34/65] fix: data grid highlight class

---
 .../discover/public/application/context/context_app.scss      | 2 +-
 test/functional/services/data_grid.ts                         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/plugins/discover/public/application/context/context_app.scss b/src/plugins/discover/public/application/context/context_app.scss
index 19ae9a7471302c..150fc7e70e52e7 100644
--- a/src/plugins/discover/public/application/context/context_app.scss
+++ b/src/plugins/discover/public/application/context/context_app.scss
@@ -14,7 +14,7 @@
   flex: 1 1 100%;
   overflow: auto;
 
-  &__cell--highlight {
+  .unifiedDataTable__cell--highlight {
     background-color: tintOrShade($euiColorPrimary, 90%, 70%);
   }
 }
diff --git a/test/functional/services/data_grid.ts b/test/functional/services/data_grid.ts
index e9cef52332c9ff..bc1fb627c5151f 100644
--- a/test/functional/services/data_grid.ts
+++ b/test/functional/services/data_grid.ts
@@ -151,7 +151,7 @@ export class DataGridService extends FtrService {
 
   public async getFields(options?: SelectOptions) {
     const selector = options?.isAnchorRow
-      ? '.euiDataGridRowCell.dscDocsGrid__cell--highlight'
+      ? '.euiDataGridRowCell.unifiedDataTable__cell--highlight'
       : '.euiDataGridRowCell';
     const cells = await this.find.allByCssSelector(selector);
 
@@ -215,7 +215,7 @@ export class DataGridService extends FtrService {
     }
 
     const selector = options?.isAnchorRow
-      ? '.euiDataGridRowCell.dscDocsGrid__cell--highlight'
+      ? '.euiDataGridRowCell.unifiedDataTable__cell--highlight'
       : '.euiDataGridRowCell';
     const cells = await table.findAllByCssSelector(selector);
 

From b2d9ea56ee4093641aeb6ae79d0020c6a5a23059 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 11 Mar 2024 12:07:19 +0100
Subject: [PATCH 35/65] fix: unecessary change revert

---
 .../src/utils/get_render_cell_value.tsx                | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx b/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
index 5b34d308b77248..8abd06c7c391fe 100644
--- a/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
+++ b/packages/kbn-unified-data-table/src/utils/get_render_cell_value.tsx
@@ -74,7 +74,11 @@ export const getRenderCellValueFn = ({
       }
     }, [ctx, row, setCellProps]);
 
-    if (!!externalCustomRenderers && !!externalCustomRenderers[columnId] && row) {
+    if (typeof row === 'undefined') {
+      return <span className={CELL_CLASS}>-</span>;
+    }
+
+    if (!!externalCustomRenderers && !!externalCustomRenderers[columnId]) {
       return (
         <span className={CELL_CLASS}>
           {externalCustomRenderers[columnId]({
@@ -94,10 +98,6 @@ export const getRenderCellValueFn = ({
       );
     }
 
-    if (typeof row === 'undefined') {
-      return <span className={CELL_CLASS}>-</span>;
-    }
-
     /**
      * when using the fields api this code is used to show top level objects
      * this is used for legacy stuff like displaying products of our ecommerce dataset

From 6b81b0b0e3c2434053dd7bb569cee87c4759fe55 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 11 Mar 2024 12:46:25 +0100
Subject: [PATCH 36/65] Deduped getColumnHeader for unified header columns

---
 .../timeline/body/column_headers/helpers.test.ts     | 12 ++++++++++++
 .../timeline/body/column_headers/helpers.ts          |  9 ---------
 .../timeline/unified_components/data_table/index.tsx |  4 ++--
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.test.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.test.ts
index 317400f3bae90f..8a1aaf6295b9a9 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.test.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.test.ts
@@ -11,6 +11,7 @@ import type { BrowserFields } from '../../../../../../common/search_strategy';
 import type { ColumnHeaderOptions } from '../../../../../../common/types';
 import { DEFAULT_COLUMN_MIN_WIDTH, DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../constants';
 import { defaultHeaders } from './default_headers';
+import { defaultUdtHeaders } from '../../unified_components/default_headers';
 import {
   getColumnWidthFromType,
   getColumnHeaders,
@@ -87,6 +88,17 @@ describe('helpers', () => {
         type: 'date',
       });
     });
+
+    test('should return the expected metadata in case of unified header', () => {
+      const inputHeaders = defaultUdtHeaders;
+      expect(getColumnHeader('@timestamp', inputHeaders)).toEqual({
+        columnHeaderType: 'not-filtered',
+        id: '@timestamp',
+        initialWidth: 215,
+        esTypes: ['date'],
+        type: 'date',
+      });
+    });
   });
 
   describe('getColumnHeaders', () => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.ts
index 93096c3e830a00..0ecfcb16f71265 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/helpers.ts
@@ -64,12 +64,3 @@ export const getColumnHeader = (
   initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
   ...(defaultHeaders.find((c) => c.id === fieldName) ?? {}),
 });
-
-export const getUnifiedDataTableColumnHeader = (
-  fieldName: string,
-  defaultHeaders: ColumnHeaderOptions[]
-): ColumnHeaderOptions => ({
-  columnHeaderType: defaultColumnHeaderType,
-  id: fieldName,
-  ...(defaultHeaders.find((c) => c.id === fieldName) ?? {}),
-});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index d8cd82379ba601..44b7d251bfeba3 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -41,7 +41,7 @@ import { useSourcererDataView } from '../../../../../common/containers/sourcerer
 import { activeTimeline } from '../../../../containers/active_timeline_context';
 import { DetailsPanel } from '../../../side_panel';
 import { SecurityCellActionsTrigger } from '../../../../../actions/constants';
-import { getUnifiedDataTableColumnHeader } from '../../body/column_headers/helpers';
+import { getColumnHeader } from '../../body/column_headers/helpers';
 import { getFormattedFields } from '../../body/renderers/formatted_field_udt';
 import { timelineBodySelector } from '../../body/selectors';
 import ToolbarAdditionalControls from './toolbar_additional_controls';
@@ -290,7 +290,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
           onSort(newState.sort);
         } else {
           const columnsStates = newState.columns.map((columnId) =>
-            getUnifiedDataTableColumnHeader(columnId, defaultUdtHeaders)
+            getColumnHeader(columnId, defaultUdtHeaders)
           );
           dispatch(timelineActions.updateColumns({ id: timelineId, columns: columnsStates }));
         }

From ab2247463ecd91d26b60844d11f8a4c709fed40e Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 11 Mar 2024 13:05:39 +0100
Subject: [PATCH 37/65] test: updateTimelineColumnWidth

---
 .../public/timelines/store/helpers.test.ts    | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts b/x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts
index 2f117f8cbb4e5e..d35837e2339072 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts
+++ b/x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts
@@ -40,12 +40,14 @@ import {
   updateTimelineTitleAndDescription,
   upsertTimelineColumn,
   updateTimelineGraphEventId,
+  updateTimelineColumnWidth,
 } from './helpers';
 import type { TimelineModel } from './model';
 import { timelineDefaults } from './defaults';
 import type { TimelineById } from './types';
 import { Direction } from '../../../common/search_strategy';
 import type { FilterManager } from '@kbn/data-plugin/public';
+import { defaultUdtHeaders } from '../components/timeline/unified_components/default_headers';
 
 jest.mock('../../common/utils/normalize_time_range');
 jest.mock('../../common/utils/default_date_settings', () => {
@@ -1852,4 +1854,36 @@ describe('Timeline', () => {
       expect(update[TimelineId.active].prevActiveTab).toEqual(TimelineTabs.graph);
     });
   });
+
+  describe('#updateTimelineColumnWidth', () => {
+    let mockTimelineById: TimelineById;
+    beforeEach(() => {
+      mockTimelineById = {
+        ...structuredClone(timelineByIdMock),
+      };
+      mockTimelineById.foo.columns = structuredClone(defaultUdtHeaders);
+    });
+
+    it('should update column width correctly when correct column is supplied', () => {
+      const result = updateTimelineColumnWidth({
+        columnId: '@timestamp',
+        id: 'foo',
+        timelineById: mockTimelineById,
+        width: 500,
+      });
+
+      expect(result.foo.columns[0]).toHaveProperty('initialWidth', 500);
+    });
+
+    it('should be no-op when incorrect column is supplied', () => {
+      const result = updateTimelineColumnWidth({
+        columnId: 'invalid-column',
+        id: 'foo',
+        timelineById: mockTimelineById,
+        width: 500,
+      });
+
+      expect(result.foo.columns).toEqual(defaultUdtHeaders);
+    });
+  });
 });

From 2863544e10efb1393126f2e42e723d2377a56408 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 11 Mar 2024 14:05:30 +0100
Subject: [PATCH 38/65] remove unncessary change

---
 .../security_solution/public/timelines/store/helpers.ts       | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/store/helpers.ts b/x-pack/plugins/security_solution/public/timelines/store/helpers.ts
index 720589253be1dd..43196fcbb2237e 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/store/helpers.ts
@@ -1456,7 +1456,7 @@ export const setInitializeTimelineSettings = ({
 }: InitializeTimelineParams): TimelineById => {
   const timeline = timelineById[id];
 
-  const result = !timeline?.initialized
+  return !timeline?.initialized
     ? {
         ...timelineById,
         [id]: {
@@ -1480,8 +1480,6 @@ export const setInitializeTimelineSettings = ({
           ...timelineSettingsProps,
         },
       };
-
-  return result;
 };
 
 interface ApplyDeltaToTableColumnWidth {

From 20edaae695b509f2134919a1659a6c6233c5d951 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 11 Mar 2024 14:34:23 +0100
Subject: [PATCH 39/65] fix: row height table

---
 .../public/common/mock/timeline_results.ts                 | 2 +-
 .../detections/components/alerts_table/actions.test.tsx    | 2 +-
 .../public/timelines/components/open_timeline/helpers.ts   | 7 ++-----
 .../timeline/unified_components/data_table/index.tsx       | 2 +-
 .../security_solution/public/timelines/store/defaults.ts   | 2 +-
 5 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts b/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts
index 866c64e589bda8..a9c5f39c8c0792 100644
--- a/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts
+++ b/x-pack/plugins/security_solution/public/common/mock/timeline_results.ts
@@ -2219,7 +2219,7 @@ export const defaultTimelineProps: CreateTimelineProps = {
     savedSearch: null,
     isDataProviderVisible: false,
     sampleSize: 500,
-    rowHeight: 1,
+    rowHeight: 3,
   },
   to: '2018-11-05T19:03:25.937Z',
   notes: null,
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx
index b87dfb031dac2f..f87ecf36bbacb1 100644
--- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/actions.test.tsx
@@ -455,7 +455,7 @@ describe('alert actions', () => {
             savedSearch: null,
             isDiscoverSavedSearchLoaded: false,
             isDataProviderVisible: false,
-            rowHeight: 1,
+            rowHeight: 3,
             sampleSize: 500,
           },
           to: '2018-11-05T19:03:25.937Z',
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
index 7f826d91d6e2cc..1aef961279aa42 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
@@ -46,7 +46,6 @@ import {
   defaultColumnHeaderType,
   defaultHeaders,
 } from '../timeline/body/column_headers/default_headers';
-import { DEFAULT_DATE_COLUMN_MIN_WIDTH } from '../timeline/body/constants';
 
 import type {
   OpenTimelineResult,
@@ -116,10 +115,8 @@ const setTimelineColumn = (col: ColumnHeaderResult, defaultHeadersValue: ColumnH
     {
       columnHeaderType: defaultColumnHeaderType,
       id: col.id != null ? col.id : 'unknown',
-      initialWidth:
-        col.id === '@timestamp'
-          ? DEFAULT_DATE_COLUMN_MIN_WIDTH
-          : defaultHeadersValue.find((defaultCol) => col.id === defaultCol.id)?.initialWidth,
+      initialWidth: defaultHeadersValue.find((defaultCol) => col.id === defaultCol.id)
+        ?.initialWidth,
     }
   );
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index 44b7d251bfeba3..76bd548e85793b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -444,7 +444,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
             showTimeCol={showTimeCol}
             isSortEnabled={true}
             sort={sortingColumns}
-            rowHeightState={3}
+            rowHeightState={rowHeight}
             isPlainRecord={isTextBasedQuery}
             rowsPerPageState={itemsPerPage}
             onUpdateRowsPerPage={onChangeItemsPerPage}
diff --git a/x-pack/plugins/security_solution/public/timelines/store/defaults.ts b/x-pack/plugins/security_solution/public/timelines/store/defaults.ts
index 4ec09255df602d..1da57b228de8de 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/defaults.ts
+++ b/x-pack/plugins/security_solution/public/timelines/store/defaults.ts
@@ -83,7 +83,7 @@ export const timelineDefaults: SubsetTimelineModel &
   isDiscoverSavedSearchLoaded: false,
   isDataProviderVisible: false,
   sampleSize: 500,
-  rowHeight: 1,
+  rowHeight: 3,
 };
 
 export const getTimelineManageDefaults = (id: string) => ({

From a141c2b1c6ca7f9dce37bbed0e0001793c808482 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Tue, 12 Mar 2024 13:53:40 +0100
Subject: [PATCH 40/65] fix: deduped field formatters

---
 .../common/lib/kibana/kibana_react.mock.ts    |   9 +
 .../renderers/formatted_field_udt.test.tsx    |  41 ++
 .../body/renderers/formatted_field_udt.tsx    | 464 ++----------------
 .../query_tab_unified_components.test.tsx     |  37 +-
 .../unified_components/data_table/index.tsx   |  55 +--
 5 files changed, 131 insertions(+), 475 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.test.tsx

diff --git a/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts b/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
index 3f03b338fcfb1e..f950d53d1212f2 100644
--- a/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
+++ b/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
@@ -221,6 +221,15 @@ export const createStartServicesMock = (
       getHoverActions: jest.fn().mockReturnValue({
         getAddToTimelineButton: jest.fn(),
       }),
+      getUseAddToTimeline: jest.fn().mockReturnValue(
+        jest.fn().mockReturnValue({
+          startDragToTimeline: jest.fn(),
+          beginDrag: jest.fn(),
+          dragLocation: jest.fn(),
+          endDrag: jest.fn(),
+          cancelDrag: jest.fn(),
+        })
+      ),
     },
     osquery: {
       OsqueryResults: jest.fn().mockReturnValue(null),
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.test.tsx
new file mode 100644
index 00000000000000..d731b6e831f9d6
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.test.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { mockTimelineData } from '../../../../../common/mock';
+import { defaultUdtHeaders } from '../../unified_components/default_headers';
+import { getFormattedFields } from './formatted_field_udt';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+
+describe('formatted_fields_udt', () => {
+  describe('getFormattedFields', () => {
+    it('should return correct map for all the present headers', () => {
+      const result = getFormattedFields({
+        dataTableRows: mockTimelineData.map((row) => ({
+          ...row,
+          id: '',
+          raw: {} as DataTableRecord['raw'],
+          flattened: {} as DataTableRecord['flattened'],
+        })),
+        headers: defaultUdtHeaders,
+        scopeId: 'timeline',
+      });
+
+      const expected = {
+        '@timestamp': expect.any(Function),
+        message: expect.any(Function),
+        'event.category': expect.any(Function),
+        'event.action': expect.any(Function),
+        'host.name': expect.any(Function),
+        'source.ip': expect.any(Function),
+        'destination.ip': expect.any(Function),
+        'user.name': expect.any(Function),
+      };
+
+      expect(result).toMatchObject(expected);
+    });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
index efa454bc409900..393088c4f9b322 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
@@ -5,448 +5,50 @@
  * 2.0.
  */
 
-/* eslint-disable complexity */
+import type { EuiDataGridCellValueElementProps } from '@elastic/eui';
+import React from 'react';
 
-import type { EuiButtonEmpty, EuiButtonIcon, EuiDataGridCellValueElementProps } from '@elastic/eui';
-import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
-import { head, getOr, get, isEmpty, isNumber } from 'lodash/fp';
-import React, { useMemo } from 'react';
-
-import type { BrowserField, ColumnHeaderOptions, TimelineItem } from '@kbn/timelines-plugin/common';
+import type { ColumnHeaderOptions, TimelineItem } from '@kbn/timelines-plugin/common';
 import {} from '@kbn/timelines-plugin/common';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
-import { EndpointAgentStatusById } from '../../../../../common/components/endpoint/endpoint_agent_status';
-import { INDICATOR_REFERENCE } from '../../../../../../common/cti/constants';
-import { Bytes, BYTES_FORMAT } from './bytes';
-import { Duration, EVENT_DURATION_FIELD_NAME } from '../../../duration';
-import { FormattedDate } from '../../../../../common/components/formatted_date';
-import { FormattedIp } from '../../../formatted_ip';
-import { Port } from '../../../../../explore/network/components/port';
-import { PORT_NAMES } from '../../../../../explore/network/components/port/helpers';
-import { TruncatableText } from '../../../../../common/components/truncatable_text';
-import {
-  DATE_FIELD_TYPE,
-  HOST_NAME_FIELD_NAME,
-  USER_NAME_FIELD_NAME,
-  IP_FIELD_TYPE,
-  MESSAGE_FIELD_NAME,
-  EVENT_MODULE_FIELD_NAME,
-  RULE_REFERENCE_FIELD_NAME,
-  SIGNAL_RULE_NAME_FIELD_NAME,
-  REFERENCE_URL_FIELD_NAME,
-  EVENT_URL_FIELD_NAME,
-  SIGNAL_STATUS_FIELD_NAME,
-  AGENT_STATUS_FIELD_NAME,
-  GEO_FIELD_TYPE,
-} from './constants';
-import { RenderRuleName, renderEventModule, renderUrl } from './formatted_field_helpers';
-import { RuleStatus } from './rule_status';
-import { HostName } from './host_name';
-import { UserName } from './user_name';
-import {
-  EmptyComponent,
-  getLinkColumnDefinition,
-} from '../../../../../common/lib/cell_actions/helpers';
-import { useGetMappedNonEcsValue } from '../data_driven_columns';
-import { parseValue } from './parse_value';
-import { getField, getFieldKey } from '../../../../../helpers';
-
-// simple black-list to prevent dragging and dropping fields such as message name
-const columnNamesNotDraggable = [MESSAGE_FIELD_NAME];
-
-export const useFormattedFieldProps = ({
-  dataTableRow,
-  columnId,
-  header,
-}: {
-  dataTableRow: DataTableRecord & TimelineItem;
-  header?: ColumnHeaderOptions;
-  columnId: string;
-}) => {
-  const ecs = dataTableRow.ecs;
-  const link = getLinkColumnDefinition(columnId, header?.type, header?.linkField);
-  const linkField = header?.linkField ? header?.linkField : link?.linkField;
-  const linkValues = header && getOr([], linkField ?? '', ecs);
-  const eventId = (header && get('_id' ?? '', ecs)) || '';
-  const rowData = useMemo(() => {
-    return {
-      data: dataTableRow,
-      fieldName: columnId,
-    };
-  }, [columnId, dataTableRow]);
-
-  const values = useGetMappedNonEcsValue({ data: rowData.data.data, fieldName: rowData.fieldName });
-  const value = parseValue(head(values));
-  const title = values && values.length > 1 ? `${link?.label}: ${value}` : link?.label;
-  // if linkField is defined but link values is empty, it's possible we are trying to look for a column definition for an old event set
-  if (linkField !== undefined && linkValues.length === 0 && values !== undefined) {
-    const normalizedLinkValue = getField(ecs, linkField);
-    const normalizedLinkField = getFieldKey(ecs, linkField);
-    const normalizedColumnId = getFieldKey(ecs, columnId);
-    const normalizedLink = getLinkColumnDefinition(
-      normalizedColumnId,
-      header?.type,
-      normalizedLinkField
-    );
-    return {
-      link: normalizedLink,
-      eventId,
-      fieldFormat: header?.format || '',
-      fieldName: normalizedColumnId,
-      fieldType: header?.type || '',
-      value: parseValue(head(normalizedColumnId)),
-      values,
-      title,
-      linkValue: head<string>(normalizedLinkValue),
-    };
-  } else {
-    return {
-      link,
-      eventId,
-      fieldFormat: header?.format || '',
-      fieldName: columnId,
-      fieldType: header?.type || '',
-      value,
-      values,
-      title,
-      linkValue: head<string>(linkValues),
-    };
-  }
-};
-
-const FieldValueCell = (
-  dataTableRows: Array<DataTableRecord & TimelineItem>,
-  scopeId: string,
-  browserFieldsByName: { [fieldName: string]: Partial<BrowserField> },
-  closeCellPopover?: () => void
-) => {
-  return function FieldValue(props: EuiDataGridCellValueElementProps) {
-    const header = browserFieldsByName[props.columnId] as ColumnHeaderOptions;
-    const { link, eventId, value, values, title, fieldName, fieldFormat, fieldType, linkValue } =
-      useFormattedFieldProps({
-        dataTableRow: dataTableRows[props.rowIndex],
-        columnId: props.columnId,
-        header,
-      });
-
-    const showEmpty = useMemo(() => {
-      const hasLink = link !== undefined && values && !isEmpty(value);
-      return hasLink !== true;
-    }, [link, value, values]);
-
-    return (header.linkField && showEmpty === false) || !header.linkField ? (
-      <FormattedFieldValue
-        contextId={`expanded-value-${props.columnId}-row-${props.rowIndex}-${scopeId}`}
-        eventId={eventId}
-        fieldFormat={fieldFormat}
-        isAggregatable={header?.aggregatable ?? false}
-        fieldName={fieldName}
-        fieldType={fieldType}
-        isButton={false}
-        isDraggable={false}
-        value={value}
-        truncate={false}
-        title={title}
-        linkValue={linkValue}
-        onClick={closeCellPopover}
-      />
-    ) : (
-      // data grid expects each cell action always return an element, it crashes if returns null
-      EmptyComponent
-    );
-  };
-};
+import { DefaultCellRenderer } from '../../cell_rendering/default_cell_renderer';
 
 export const getFormattedFields = ({
   dataTableRows,
   headers,
   scopeId,
-  closeCellPopover,
-  browserFieldsByName,
 }: {
   dataTableRows: Array<DataTableRecord & TimelineItem>;
-  headers?: ColumnHeaderOptions[];
+  headers: ColumnHeaderOptions[];
   scopeId: string;
-  closeCellPopover?: () => void;
-  browserFieldsByName: { [fieldName: string]: Partial<BrowserField> };
 }) => {
-  const ipFieldTypeFields =
-    headers
-      ?.filter((h) => browserFieldsByName[h.id] && browserFieldsByName[h.id].type === IP_FIELD_TYPE)
-      .map((c) => c.id) ?? [];
-  const geoFieldTypeFields =
-    headers
-      ?.filter(
-        (h) => browserFieldsByName[h.id] && browserFieldsByName[h.id].type === GEO_FIELD_TYPE
-      )
-      .map((c) => c.id) ?? [];
-  const byteFormattedFields =
-    headers
-      ?.filter(
-        (h) => browserFieldsByName[h.id] && browserFieldsByName[h.id].format === BYTES_FORMAT
-      )
-      .map((c) => c.id) ?? [];
-  return [
-    ...PORT_NAMES,
-    EVENT_DURATION_FIELD_NAME,
-    HOST_NAME_FIELD_NAME,
-    USER_NAME_FIELD_NAME,
-    SIGNAL_RULE_NAME_FIELD_NAME,
-    EVENT_MODULE_FIELD_NAME,
-    SIGNAL_STATUS_FIELD_NAME,
-    AGENT_STATUS_FIELD_NAME,
-    RULE_REFERENCE_FIELD_NAME,
-    REFERENCE_URL_FIELD_NAME,
-    EVENT_URL_FIELD_NAME,
-    INDICATOR_REFERENCE,
-    ...ipFieldTypeFields,
-    ...geoFieldTypeFields,
-    ...byteFormattedFields,
-    ...columnNamesNotDraggable,
-  ].reduce(
-    (
-      obj: Record<string, (props: EuiDataGridCellValueElementProps) => React.ReactNode>,
-      field: string
-    ) => {
-      obj[field] = FieldValueCell(dataTableRows, scopeId, browserFieldsByName, closeCellPopover);
-      return obj;
-    },
-    {}
-  );
-};
-
-const FormattedFieldValueComponent: React.FC<{
-  asPlainText?: boolean;
-  /** `Component` is only used with `EuiDataGrid`; the grid keeps a reference to `Component` for show / hide functionality */
-  Component?: typeof EuiButtonEmpty | typeof EuiButtonIcon;
-  contextId: string;
-  eventId: string;
-  isAggregatable?: boolean;
-  isObjectArray?: boolean;
-  fieldFormat?: string;
-  fieldName: string;
-  fieldType?: string;
-  isButton?: boolean;
-  isDraggable?: boolean;
-  onClick?: () => void;
-  onClickAriaLabel?: string;
-  title?: string;
-  truncate?: boolean;
-  value: string | number | undefined | null;
-  linkValue?: string | null | undefined;
-}> = ({
-  asPlainText,
-  Component,
-  contextId,
-  eventId,
-  fieldFormat,
-  isAggregatable = false,
-  fieldName,
-  fieldType = '',
-  isButton,
-  isObjectArray = false,
-  isDraggable = true,
-  onClick,
-  onClickAriaLabel,
-  title,
-  truncate = true,
-  value,
-  linkValue,
-}) => {
-  if (isObjectArray || asPlainText) {
-    return <span data-test-subj={`formatted-field-${fieldName}`}>{value}</span>;
-  } else if (fieldType === IP_FIELD_TYPE) {
-    return (
-      <FormattedIp
-        Component={Component}
-        eventId={eventId}
-        contextId={contextId}
-        fieldName={fieldName}
-        fieldType={fieldType}
-        isAggregatable={isAggregatable}
-        isButton={isButton}
-        isDraggable={isDraggable}
-        value={!isNumber(value) ? value : String(value)}
-        onClick={onClick}
-        title={title}
-        truncate={truncate}
-      />
-    );
-  } else if (fieldType === GEO_FIELD_TYPE) {
-    return <>{value}</>;
-  } else if (fieldType === DATE_FIELD_TYPE) {
-    const classNames = truncate ? 'eui-textTruncate eui-alignMiddle' : undefined;
-    return isDraggable ? (
-      <FormattedDate className={classNames} fieldName={fieldName} value={value} />
-    ) : (
-      <FormattedDate className={classNames} fieldName={fieldName} value={value} />
-    );
-  } else if (PORT_NAMES.some((portName) => fieldName === portName)) {
-    return (
-      <Port
-        Component={Component}
-        contextId={contextId}
-        eventId={eventId}
-        fieldName={fieldName}
-        fieldType={fieldType}
-        isAggregatable={isAggregatable}
-        isDraggable={isDraggable}
-        title={title}
-        value={`${value}`}
-      />
-    );
-  } else if (fieldName === EVENT_DURATION_FIELD_NAME) {
-    return (
-      <Duration
-        contextId={contextId}
-        eventId={eventId}
-        fieldName={fieldName}
-        fieldType={fieldType}
-        isAggregatable={isAggregatable}
-        isDraggable={isDraggable}
-        value={`${value}`}
-      />
-    );
-  } else if (fieldName === HOST_NAME_FIELD_NAME) {
-    return (
-      <HostName
-        Component={Component}
-        contextId={contextId}
-        eventId={eventId}
-        fieldType={fieldType}
-        isAggregatable={isAggregatable}
-        fieldName={fieldName}
-        isDraggable={isDraggable}
-        isButton={isButton}
-        onClick={onClick}
-        title={title}
-        value={value}
-      />
-    );
-  } else if (fieldName === USER_NAME_FIELD_NAME) {
-    return (
-      <UserName
-        Component={Component}
-        contextId={contextId}
-        eventId={eventId}
-        fieldName={fieldName}
-        fieldType={fieldType}
-        isAggregatable={isAggregatable}
-        isDraggable={isDraggable}
-        isButton={isButton}
-        onClick={onClick}
-        title={title}
-        value={value}
-      />
+  return headers
+    .map((h) => h.id)
+    .reduce(
+      (
+        obj: Record<string, (props: EuiDataGridCellValueElementProps) => React.ReactNode>,
+        field: string,
+        currentIdx
+      ) => {
+        obj[field] = function UnifiedFieldRender(props: EuiDataGridCellValueElementProps) {
+          return (
+            <DefaultCellRenderer
+              {...props}
+              isDraggable={true}
+              isTimeline={true}
+              isDetails={false}
+              isExpanded={false}
+              isExpandable={true}
+              data={dataTableRows[props.rowIndex].data}
+              eventId={dataTableRows[props.rowIndex]._id}
+              scopeId={scopeId}
+              linkValues={undefined}
+              header={headers[currentIdx]}
+            />
+          );
+        };
+        return obj;
+      },
+      {}
     );
-  } else if (fieldFormat === BYTES_FORMAT) {
-    return (
-      <Bytes
-        contextId={contextId}
-        eventId={eventId}
-        fieldName={fieldName}
-        fieldType={fieldType}
-        isAggregatable={isAggregatable}
-        isDraggable={isDraggable}
-        value={`${value}`}
-      />
-    );
-  } else if (fieldName === SIGNAL_RULE_NAME_FIELD_NAME) {
-    return (
-      <RenderRuleName
-        Component={Component}
-        contextId={contextId}
-        eventId={eventId}
-        fieldName={fieldName}
-        fieldType={fieldType}
-        isAggregatable={isAggregatable}
-        isDraggable={isDraggable}
-        isButton={isButton}
-        onClick={onClick}
-        linkValue={linkValue}
-        title={title}
-        truncate={truncate}
-        value={value}
-      />
-    );
-  } else if (fieldName === EVENT_MODULE_FIELD_NAME) {
-    return renderEventModule({
-      contextId,
-      eventId,
-      fieldName,
-      fieldType,
-      isAggregatable,
-      isDraggable,
-      linkValue,
-      truncate,
-      value,
-    });
-  } else if (fieldName === SIGNAL_STATUS_FIELD_NAME) {
-    return (
-      <RuleStatus
-        contextId={contextId}
-        eventId={eventId}
-        fieldName={fieldName}
-        fieldType={fieldType}
-        isAggregatable={isAggregatable}
-        isDraggable={isDraggable}
-        value={value}
-        onClick={onClick}
-        onClickAriaLabel={onClickAriaLabel}
-        iconType={isButton ? 'arrowDown' : undefined}
-        iconSide={isButton ? 'right' : undefined}
-      />
-    );
-  } else if (fieldName === AGENT_STATUS_FIELD_NAME) {
-    return (
-      <EndpointAgentStatusById
-        endpointAgentId={String(value ?? '')}
-        data-test-subj="endpointHostAgentStatus"
-      />
-    );
-  } else if (
-    [
-      RULE_REFERENCE_FIELD_NAME,
-      REFERENCE_URL_FIELD_NAME,
-      EVENT_URL_FIELD_NAME,
-      INDICATOR_REFERENCE,
-    ].includes(fieldName)
-  ) {
-    return renderUrl({
-      contextId,
-      Component,
-      eventId,
-      fieldName,
-      fieldType,
-      isAggregatable,
-      isDraggable,
-      truncate,
-      title,
-      value,
-    });
-  } else {
-    return truncate && !isEmpty(value) ? (
-      <TruncatableText data-test-subj="truncatable-message">
-        <EuiToolTip
-          data-test-subj="message-tool-tip"
-          content={
-            <EuiFlexGroup direction="column" gutterSize="none">
-              <EuiFlexItem grow={false}>
-                <span>{fieldName}</span>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <span>{value}</span>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          }
-        >
-          <span data-test-subj={`formatted-field-${fieldName}`}>{value}</span>
-        </EuiToolTip>
-      </TruncatableText>
-    ) : (
-      <span data-test-subj={`formatted-field-${fieldName}`}>{value}</span>
-    );
-  }
 };
-
-export const FormattedFieldValue = React.memo(FormattedFieldValueComponent);
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
index 31ee4636db3955..3da09b4c38ec96 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
@@ -25,7 +25,8 @@ import { timelineActions } from '../../../store';
 import type { ExperimentalFeatures } from '../../../../../common';
 import { allowedExperimentalValues } from '../../../../../common';
 import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, flatten } from 'lodash';
+import { COLUMNS_WITH_LINKS } from '../../../../common/lib/cell_actions/helpers';
 
 jest.mock('../../../containers', () => ({
   useTimelineEvents: jest.fn(),
@@ -611,5 +612,39 @@ describe('query tab with unified timeline', () => {
         expect(screen.queryAllByTestId('fieldListGroupedAvailableFields-count')).toHaveLength(0);
       });
     }, 10000);
+
+    it('should have all populated fields in Available fields section', async () => {
+      const listOfPopulatedFields = new Set(
+        flatten(
+          mockTimelineData.map((dataItem) =>
+            dataItem.data.map((item) =>
+              item.value && item.value.length > 0 ? item.field : undefined
+            )
+          )
+        ).filter((item) => typeof item !== 'undefined')
+      );
+
+      renderTestComponents();
+      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+      expect(await screen.findByTestId('fieldListGroupedAvailableFields')).toBeVisible();
+      const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
+
+      for (const field of listOfPopulatedFields) {
+        fireEvent.change(screen.getByTestId('fieldListFiltersFieldSearch'), {
+          target: { value: field },
+        });
+
+        expect(within(availableFields).getByTestId(`field-${field}`));
+      }
+    });
+  });
+  describe('when data view changes', () => {
+    it.todo('should display columns not applicable to that data view as blank');
+  });
+
+  describe('column rendering', () => {
+    for (const column of COLUMNS_WITH_LINKS) {
+      it.todo(`should render ${column.columnId} as a link`);
+    }
   });
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index 2b62f25749a85c..f881dc22c51175 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -22,10 +22,10 @@ import type { SortOrder } from '@kbn/saved-search-plugin/public';
 import { popularizeField } from '@kbn/unified-data-table/src/utils/popularize_field';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import type { DataView } from '@kbn/data-views-plugin/public';
-import { getAllFieldsByName } from '../../../../../common/containers/source';
+import memoizeOne from 'memoize-one';
 import { StatefulEventContext } from '../../../../../common/components/events_viewer/stateful_event_context';
 import type { ExpandedDetailTimeline, ExpandedDetailType } from '../../../../../../common/types';
-import type { TimelineItem } from '../../../../../../common/search_strategy';
+import type { BrowserFields, TimelineItem } from '../../../../../../common/search_strategy';
 import { useKibana } from '../../../../../common/lib/kibana';
 import type {
   ColumnHeaderOptions,
@@ -41,7 +41,7 @@ import { useSourcererDataView } from '../../../../../common/containers/sourcerer
 import { activeTimeline } from '../../../../containers/active_timeline_context';
 import { DetailsPanel } from '../../../side_panel';
 import { SecurityCellActionsTrigger } from '../../../../../actions/constants';
-import { getColumnHeader } from '../../body/column_headers/helpers';
+import { getColumnHeader, getColumnHeaders } from '../../body/column_headers/helpers';
 import { getFormattedFields } from '../../body/renderers/formatted_field_udt';
 import { timelineBodySelector } from '../../body/selectors';
 import ToolbarAdditionalControls from './toolbar_additional_controls';
@@ -79,6 +79,12 @@ interface DataTableProps extends CommonDataTableProps {
   dataView: DataView;
 }
 
+const memoizedGetColumnHeaders: (
+  headers: ColumnHeaderOptions[],
+  browserFields: BrowserFields,
+  isEventRenderedView: boolean
+) => ColumnHeaderOptions[] = memoizeOne(getColumnHeaders);
+
 /* eslint-disable react/display-name */
 export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
   ({
@@ -153,42 +159,6 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       timelineBodySelector(state, timelineId)
     );
 
-    // const { activeStep, isTourShown, incrementStep } = useTourContext();
-
-    /* const isTourAnchor = useMemo(
-        () =>
-          isTourShown(SecurityStepId.alertsCases) &&
-          eventType === 'signal' &&
-          isDetectionsAlertsTable(timelineId) &&
-          ariaRowindex === 1,
-        [isTourShown, ariaRowindex, eventType, timelineId]
-      );
-      const onExpandEvent = useCallback(() => {
-        if (
-          isTourAnchor &&
-          activeStep === AlertsCasesTourSteps.expandEvent &&
-          isTourShown(SecurityStepId.alertsCases)
-        ) {
-          incrementStep(SecurityStepId.alertsCases);
-        }
-        onEventDetailsPanelOpened();
-      }, [activeStep, incrementStep, isTourAnchor, isTourShown, onEventDetailsPanelOpened]);*/
-
-    /* const onRowSelected: OnRowSelected = useCallback(
-        ({ eventIds, isSelected }: { eventIds: string[]; isSelected: boolean }) => {
-          dispatch(
-            timelineActions.setSelected({
-              id,
-              eventIds: getEventIdToDataMapping(data, eventIds, queryFields),
-              isSelected,
-              isSelectAllChecked:
-                isSelected && Object.keys(selectedEventIds).length + 1 === data.length,
-            })
-          );
-        },
-        [data, dispatch, id, queryFields, selectedEventIds]
-      );*/
-
     const tableRows: Array<DataTableRecord & TimelineItem> = useMemo(
       () =>
         events.map(({ _id, _index, ecs, data }) => {
@@ -356,17 +326,16 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       [dispatch, timelineId]
     );
 
-    const browserFieldsByName = useMemo(() => getAllFieldsByName(browserFields), [browserFields]);
+    const augumentedColumnHeaders = memoizedGetColumnHeaders(columns, browserFields, false);
 
     const customColumnRenderers = useMemo(
       () =>
         getFormattedFields({
           dataTableRows: tableRows,
           scopeId: 'timeline',
-          headers: columns,
-          browserFieldsByName,
+          headers: augumentedColumnHeaders,
         }),
-      [browserFieldsByName, columns, tableRows]
+      [augumentedColumnHeaders, tableRows]
     );
 
     const handleFetchMoreRecords = useCallback(() => {

From 28370170a89f3c6a814bde5860996636387d3b4d Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Wed, 13 Mar 2024 10:48:29 +0100
Subject: [PATCH 41/65] fix: tests

---
 .../public/common/containers/source/mock.ts   |  14 +++
 .../body/renderers/formatted_field_udt.tsx    |   2 +-
 .../query_tab_unified_components.test.tsx     | 103 ++++++------------
 3 files changed, 50 insertions(+), 69 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/containers/source/mock.ts b/x-pack/plugins/security_solution/public/common/containers/source/mock.ts
index 0a2866a846dd8d..74c494b239318a 100644
--- a/x-pack/plugins/security_solution/public/common/containers/source/mock.ts
+++ b/x-pack/plugins/security_solution/public/common/containers/source/mock.ts
@@ -542,6 +542,20 @@ export const mockBrowserFields: BrowserFields = {
       },
     },
   },
+
+  process: {
+    fields: {
+      'process.args': {
+        name: 'process.args',
+        type: 'string',
+        esTypes: ['keyword'],
+        searchable: true,
+        aggregatable: true,
+        readFromDocValues: true,
+        format: '',
+      },
+    },
+  },
 };
 
 export const mockIndexFields = flatten(
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
index 393088c4f9b322..8ca6a7c9d5cbac 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
@@ -34,7 +34,7 @@ export const getFormattedFields = ({
           return (
             <DefaultCellRenderer
               {...props}
-              isDraggable={true}
+              isDraggable={false}
               isTimeline={true}
               isDetails={false}
               isExpanded={false}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
index 3da09b4c38ec96..da469d5ce45168 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
@@ -14,9 +14,13 @@ import { useTimelineEvents } from '../../../containers';
 import { useTimelineEventsDetails } from '../../../containers/details';
 import { useSourcererDataView } from '../../../../common/containers/sourcerer';
 import { mockSourcererScope } from '../../../../common/containers/sourcerer/mocks';
-import { mockTimelineData, TestProviders } from '../../../../common/mock';
+import {
+  createSecuritySolutionStorageMock,
+  mockTimelineData,
+  TestProviders,
+} from '../../../../common/mock';
 import { DefaultCellRenderer } from '../cell_rendering/default_cell_renderer';
-import { render, screen, waitFor, fireEvent, within } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent, within, cleanup } from '@testing-library/react';
 import { createStartServicesMock } from '../../../../common/lib/kibana/kibana_react.mock';
 import type { StartServices } from '../../../../types';
 import { useKibana } from '../../../../common/lib/kibana';
@@ -26,7 +30,6 @@ import type { ExperimentalFeatures } from '../../../../../common';
 import { allowedExperimentalValues } from '../../../../../common';
 import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import { cloneDeep, flatten } from 'lodash';
-import { COLUMNS_WITH_LINKS } from '../../../../common/lib/cell_actions/helpers';
 
 jest.mock('../../../containers', () => ({
   useTimelineEvents: jest.fn(),
@@ -97,6 +100,14 @@ const renderTestComponents = (props?: Partial<ComponentProps<typeof TestComponen
   });
 };
 
+const changeItemsPerPageTo = (newItemsPerPage: number) => {
+  fireEvent.click(screen.getByTestId('tablePaginationPopoverButton'));
+  fireEvent.click(screen.getByTestId(`tablePagination-${newItemsPerPage}-rows`));
+  expect(screen.getByTestId('tablePaginationPopoverButton')).toHaveTextContent(
+    `Rows per page: ${newItemsPerPage}`
+  );
+};
+
 const loadPageMock = jest.fn();
 
 const useTimelineEventsMock = jest.fn(() => [
@@ -113,11 +124,23 @@ const useTimelineEventsMock = jest.fn(() => [
   },
 ]);
 
+const useSourcererDataViewMocked = jest.fn().mockReturnValue({
+  ...mockSourcererScope,
+});
+
+const { storage: storageMock } = createSecuritySolutionStorageMock();
+
 describe('query tab with unified timeline', () => {
-  const kibanaServiceMock: StartServices = createStartServicesMock();
+  const kibanaServiceMock: StartServices = {
+    ...createStartServicesMock(),
+    storage: storageMock,
+  };
 
   afterEach(() => {
     jest.clearAllMocks();
+    storageMock.clear();
+    cleanup();
+    localStorage.clear();
   });
 
   beforeEach(() => {
@@ -142,9 +165,7 @@ describe('query tab with unified timeline', () => {
 
     (useTimelineEventsDetails as jest.Mock).mockImplementation(() => [false, {}]);
 
-    (useSourcererDataView as jest.Mock).mockImplementation(() => ({
-      ...mockSourcererScope,
-    }));
+    (useSourcererDataView as jest.Mock).mockImplementation(useSourcererDataViewMocked);
 
     (useIsExperimentalFeatureEnabled as jest.Mock).mockImplementation(
       useIsExperimentalFeatureEnabledMock
@@ -529,61 +550,12 @@ describe('query tab with unified timeline', () => {
       expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(1);
     });
 
-    it('should be able to add column by dragging', async () => {
-      const field = {
-        name: 'agent.id',
-      };
-
-      renderTestComponents();
-      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
-
-      await waitFor(() => {
-        expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('11');
-      });
-
-      expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(0);
-
-      // column exists in the table
-      const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
-
-      const fieldToBeAdded = within(availableFields).getByTestId(`field-${field.name}-showDetails`);
-
-      const dataTransfer = {
-        text: field.name,
-        getData: () => field.name,
-      };
-
-      fireEvent.drag(fieldToBeAdded);
-      fireEvent.dragStart(fieldToBeAdded, {
-        dataTransfer,
-      });
-
-      const destination = screen.getByTestId('discoverDocTable');
-
-      fireEvent.dragEnter(destination);
-      fireEvent.dragOver(destination);
-
-      expect(screen.getByTestId('domDragDropContainer')).toHaveClass(
-        'domDragDrop__container domDragDrop__container-active'
-      );
-
-      fireEvent.drop(destination, {
-        dataTransfer,
-      });
-      expect(screen.getByTestId('domDragDropContainer')).toHaveClass('domDragDrop__container');
-
-      await waitFor(() => {
-        expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(1);
-      });
-      expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('12');
-    }, 10000);
-
     it('should should show callout when field search does not matches any field', async () => {
       renderTestComponents();
       expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
 
       await waitFor(() => {
-        expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toHaveTextContent('35');
+        expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toHaveTextContent('36');
       });
 
       fireEvent.change(screen.getByTestId('fieldListFiltersFieldSearch'), {
@@ -603,7 +575,7 @@ describe('query tab with unified timeline', () => {
       renderTestComponents();
       expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
       await waitFor(() => {
-        expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toHaveTextContent('35');
+        expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toHaveTextContent('36');
       });
 
       fireEvent.click(screen.getByTitle('Hide sidebar'));
@@ -625,8 +597,12 @@ describe('query tab with unified timeline', () => {
       );
 
       renderTestComponents();
+
       expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
-      expect(await screen.findByTestId('fieldListGroupedAvailableFields')).toBeVisible();
+      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+
+      changeItemsPerPageTo(100);
+
       const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
 
       for (const field of listOfPopulatedFields) {
@@ -638,13 +614,4 @@ describe('query tab with unified timeline', () => {
       }
     });
   });
-  describe('when data view changes', () => {
-    it.todo('should display columns not applicable to that data view as blank');
-  });
-
-  describe('column rendering', () => {
-    for (const column of COLUMNS_WITH_LINKS) {
-      it.todo(`should render ${column.columnId} as a link`);
-    }
-  });
 });

From 9074af33de866c50b00fa6acbaaf247b727a42c4 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Thu, 14 Mar 2024 11:48:24 +0100
Subject: [PATCH 42/65] tests: unified_component unit tests

---
 .../body/unified_timeline_body.test.tsx       | 115 ++++
 .../timeline/body/unified_timeline_body.tsx   |   4 +-
 .../timeline/query_tab_content/index.tsx      |  27 +-
 .../query_tab_unified_components.test.tsx     |   1 -
 .../data_table/index.test.tsx                 |   1 -
 .../unified_components/data_table/index.tsx   |  88 +--
 .../unified_components/index.test.tsx         | 637 ++++++++++++++++++
 .../timeline/unified_components/index.tsx     |  57 +-
 .../resizable_layout.test.tsx                 |   1 -
 9 files changed, 820 insertions(+), 111 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.test.tsx
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.test.tsx
new file mode 100644
index 00000000000000..44f79b95351147
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.test.tsx
@@ -0,0 +1,115 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { TimelineTabs } from '../../../../../common/types';
+import { DataLoadingState } from '@kbn/unified-data-table';
+import React from 'react';
+import { UnifiedTimelineComponent } from '../unified_components';
+import { defaultUdtHeaders } from '../unified_components/default_headers';
+import type { UnifiedTimelineBodyProps } from './unified_timeline_body';
+import { UnifiedTimelineBody } from './unified_timeline_body';
+import { render, screen } from '@testing-library/react';
+import { defaultHeaders, mockTimelineData, TestProviders } from '../../../../common/mock';
+
+jest.mock('../unified_components');
+
+const mockEventsData = structuredClone(mockTimelineData);
+
+const defaultProps: UnifiedTimelineBodyProps = {
+  activeTab: TimelineTabs.query,
+  columns: defaultUdtHeaders,
+  dataLoadingState: DataLoadingState.loading,
+  events: mockEventsData,
+  expandedDetail: {},
+  header: <div />,
+  isTextBasedQuery: false,
+  itemsPerPage: 25,
+  itemsPerPageOptions: [10, 25, 50],
+  onChangePage: jest.fn(),
+  onEventClosed: jest.fn(),
+  refetch: jest.fn(),
+  rowRenderers: [],
+  showExpandedDetails: false,
+  sort: [],
+  timelineId: 'timeline-1',
+  totalCount: 0,
+  updatedAt: 0,
+  pageInfo: {
+    activePage: 0,
+    querySize: 0,
+  },
+};
+
+const renderTestComponents = (props?: UnifiedTimelineBodyProps) => {
+  return render(<UnifiedTimelineBody {...defaultProps} {...props} />, {
+    wrapper: TestProviders,
+  });
+};
+
+const MockUnifiedTimelineComponent = jest.fn(() => <div />);
+
+describe('UnifiedTimelineBody', () => {
+  beforeEach(() => {
+    (UnifiedTimelineComponent as jest.Mock).mockImplementation(MockUnifiedTimelineComponent);
+  });
+  it('should pass correct page rows', () => {
+    const { rerender } = renderTestComponents();
+
+    expect(screen.getByTestId('unifiedTimelineBody')).toBeVisible();
+    expect(MockUnifiedTimelineComponent).toHaveBeenCalledTimes(2);
+
+    expect(MockUnifiedTimelineComponent).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        events: mockEventsData.flat(),
+      }),
+      {}
+    );
+
+    const newEventsData = structuredClone([mockEventsData[0]]);
+
+    const newProps = {
+      ...defaultProps,
+      pageInfo: {
+        activePage: 1,
+        querySize: 0,
+      },
+      events: newEventsData,
+    };
+
+    MockUnifiedTimelineComponent.mockClear();
+    rerender(<UnifiedTimelineBody {...newProps} />);
+    expect(MockUnifiedTimelineComponent).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        events: [...mockEventsData, ...newEventsData].flat(),
+      }),
+      {}
+    );
+  });
+
+  it('should pass default columns when empty column list is supplied', () => {
+    const newProps = { ...defaultProps, columns: [] };
+    renderTestComponents(newProps);
+
+    expect(MockUnifiedTimelineComponent).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        columns: defaultUdtHeaders,
+      }),
+      {}
+    );
+  });
+  it('should pass custom columns when supplied', () => {
+    const newProps = { ...defaultProps, columns: defaultHeaders };
+    renderTestComponents(newProps);
+
+    expect(MockUnifiedTimelineComponent).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        columns: defaultHeaders,
+      }),
+      {}
+    );
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx
index 2bf28fda24e76d..2e8e05531e09f3 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx
@@ -14,7 +14,7 @@ import { UnifiedTimelineComponent } from '../unified_components';
 import { defaultUdtHeaders } from '../unified_components/default_headers';
 import type { PaginationInputPaginated, TimelineItem } from '../../../../../common/search_strategy';
 
-interface UnifiedTimelineBodyProps extends ComponentProps<typeof UnifiedTimelineComponent> {
+export interface UnifiedTimelineBodyProps extends ComponentProps<typeof UnifiedTimelineComponent> {
   header: ReactElement;
   pageInfo: Pick<PaginationInputPaginated, 'activePage' | 'querySize'>;
 }
@@ -63,7 +63,7 @@ export const UnifiedTimelineBody = (props: UnifiedTimelineBodyProps) => {
   return (
     <StyledTableFlexGroup direction="column" gutterSize="s">
       <StyledTableFlexItem grow={false}>{header}</StyledTableFlexItem>
-      <StyledTableFlexItem className="unifiedTimelineBody">
+      <StyledTableFlexItem className="unifiedTimelineBody" data-test-subj="unifiedTimelineBody">
         <RootDragDropProvider>
           <UnifiedTimelineComponent
             columns={columnsHeader}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
index 6ad0583444e041..e2bf36f881a98a 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
@@ -65,6 +65,12 @@ import { HeaderActions } from '../../../../common/components/header_actions/head
 import { defaultUdtHeaders } from '../unified_components/default_headers';
 import { UnifiedTimelineBody } from '../body/unified_timeline_body';
 
+const memoizedGetColumnHeaders: (
+  headers: ColumnHeaderOptions[],
+  browserFields: BrowserFields,
+  isEventRenderedView: boolean
+) => ColumnHeaderOptions[] = memoizeOne(getColumnHeaders);
+
 const QueryTabHeaderContainer = styled.div`
   width: 100%;
 `;
@@ -256,9 +262,20 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     [combinedQueries, end, loadingSourcerer, start]
   );
 
+  const defaultColumns = useMemo(
+    () => (unifiedComponentsInTimelineEnabled ? defaultUdtHeaders : defaultHeaders),
+    [unifiedComponentsInTimelineEnabled]
+  );
+
+  const localColumns = useMemo(
+    () => (isEmpty(columns) ? defaultColumns : columns),
+    [columns, defaultColumns]
+  );
+
+  const augumentedColumnHeaders = memoizedGetColumnHeaders(localColumns, browserFields, false);
+
   const getTimelineQueryFields = () => {
-    const columnsHeader = isEmpty(columns) ? defaultHeaders : columns;
-    const columnFields = columnsHeader.map((c) => c.id);
+    const columnFields = augumentedColumnHeaders.map((c) => c.id);
 
     return [...columnFields, ...requiredFieldsForActions];
   };
@@ -274,10 +291,10 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     dispatch(
       timelineActions.initializeTimelineSettings({
         id: timelineId,
-        defaultColumns: unifiedComponentsInTimelineEnabled ? defaultUdtHeaders : defaultHeaders,
+        defaultColumns,
       })
     );
-  }, [dispatch, timelineId, unifiedComponentsInTimelineEnabled]);
+  }, [dispatch, timelineId, defaultColumns]);
 
   const [
     dataLoadingState,
@@ -388,7 +405,7 @@ export const QueryTabContentComponent: React.FC<Props> = ({
     return (
       <UnifiedTimelineBody
         header={header}
-        columns={columns}
+        columns={augumentedColumnHeaders}
         rowRenderers={rowRenderers}
         timelineId={timelineId}
         itemsPerPage={itemsPerPage}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
index da469d5ce45168..dc3699b0ed5089 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
@@ -217,7 +217,6 @@ describe('query tab with unified timeline', () => {
       // Go to last page
       fireEvent.click(screen.getByTestId('pagination-button-6'));
       await waitFor(() => {
-        // screen.debug(undefined, 10000000);
         expect(screen.getByTestId('dscGridSampleSizeFetchMoreLink')).toBeVisible();
       });
       fireEvent.click(screen.getByTestId('dscGridSampleSizeFetchMoreLink'));
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
index b7a3501f2f78d0..a8f410413cdd73 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
@@ -71,7 +71,6 @@ describe('unified data table', () => {
 
   it('should display unified data table', () => {
     render(<TestComponent />);
-    screen.debug(undefined, 100000);
     expect(screen.getByTestId('discoverDocTable')).toBeVisible();
   });
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index f881dc22c51175..2a553741803fb3 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -12,26 +12,22 @@ import { generateFilters } from '@kbn/data-plugin/public';
 import type { DataViewField } from '@kbn/data-plugin/common';
 import { flattenHit } from '@kbn/data-plugin/common';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
-import type { UnifiedDataTableSettingsColumn } from '@kbn/unified-data-table';
-import {
-  UnifiedDataTable,
-  useColumns as useUnifiedTableColumns,
-  DataLoadingState,
+import type {
+  UnifiedDataTableSettingsColumn,
+  UnifiedDataTableProps,
 } from '@kbn/unified-data-table';
-import type { SortOrder } from '@kbn/saved-search-plugin/public';
+import { UnifiedDataTable, DataLoadingState } from '@kbn/unified-data-table';
 import { popularizeField } from '@kbn/unified-data-table/src/utils/popularize_field';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import type { DataView } from '@kbn/data-views-plugin/public';
-import memoizeOne from 'memoize-one';
 import { StatefulEventContext } from '../../../../../common/components/events_viewer/stateful_event_context';
 import type { ExpandedDetailTimeline, ExpandedDetailType } from '../../../../../../common/types';
-import type { BrowserFields, TimelineItem } from '../../../../../../common/search_strategy';
+import type { TimelineItem } from '../../../../../../common/search_strategy';
 import { useKibana } from '../../../../../common/lib/kibana';
 import type {
   ColumnHeaderOptions,
   OnChangePage,
   RowRenderer,
-  SortColumnTimeline,
   ToggleDetailPanel,
 } from '../../../../../../common/types/timeline';
 import { TimelineId, TimelineTabs } from '../../../../../../common/types/timeline';
@@ -41,7 +37,6 @@ import { useSourcererDataView } from '../../../../../common/containers/sourcerer
 import { activeTimeline } from '../../../../containers/active_timeline_context';
 import { DetailsPanel } from '../../../side_panel';
 import { SecurityCellActionsTrigger } from '../../../../../actions/constants';
-import { getColumnHeader, getColumnHeaders } from '../../body/column_headers/helpers';
 import { getFormattedFields } from '../../body/renderers/formatted_field_udt';
 import { timelineBodySelector } from '../../body/selectors';
 import ToolbarAdditionalControls from './toolbar_additional_controls';
@@ -49,18 +44,16 @@ import { StyledTimelineUnifiedDataTable, StyledEuiProgress } from '../styles';
 import { timelineDefaults } from '../../../../store/defaults';
 import { timelineActions } from '../../../../store';
 import { useGetScopedSourcererDataView } from '../../../../../common/components/sourcerer/use_get_sourcerer_data_view';
-import { defaultUdtHeaders } from '../default_headers';
 
 export const SAMPLE_SIZE_SETTING = 500;
 const DataGridMemoized = React.memo(UnifiedDataTable);
 
-interface CommonDataTableProps {
+type CommonDataTableProps = {
   columns: ColumnHeaderOptions[];
   rowRenderers: RowRenderer[];
   timelineId: string;
   itemsPerPage: number;
   itemsPerPageOptions: number[];
-  sort: SortColumnTimeline[];
   events: TimelineItem[];
   refetch: inputsModel.Refetch;
   onFieldEdited: () => void;
@@ -73,18 +66,12 @@ interface CommonDataTableProps {
   dataLoadingState: DataLoadingState;
   updatedAt: number;
   isTextBasedQuery?: boolean;
-}
+} & Pick<UnifiedDataTableProps, 'onSort' | 'onSetColumns' | 'sort'>;
 
 interface DataTableProps extends CommonDataTableProps {
   dataView: DataView;
 }
 
-const memoizedGetColumnHeaders: (
-  headers: ColumnHeaderOptions[],
-  browserFields: BrowserFields,
-  isEventRenderedView: boolean
-) => ColumnHeaderOptions[] = memoizeOne(getColumnHeaders);
-
 /* eslint-disable react/display-name */
 export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
   ({
@@ -107,6 +94,8 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
     onChangePage,
     updatedAt,
     isTextBasedQuery = false,
+    onSetColumns,
+    onSort,
   }) => {
     const dispatch = useDispatch();
 
@@ -229,57 +218,6 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       [tableRows, handleOnEventDetailPanelOpened, handleOnPanelClosed]
     );
 
-    // ////////////// START SORTING ////////////////
-
-    const sortingColumns: SortOrder[] = useMemo(() => {
-      return sort ? sort.map((sortingCol) => [sortingCol.columnId, sortingCol.sortDirection]) : [];
-    }, [sort]);
-
-    const onSort = useCallback(
-      (nextSort: string[][]) => {
-        dispatch(
-          timelineActions.updateSort({
-            id: timelineId,
-            sort: nextSort.map(([id, direction]) => {
-              const currentColumn = columns.find((column) => column.id === id);
-              const columnType = currentColumn ? currentColumn.type : 'keyword';
-              return {
-                columnId: id,
-                columnType,
-                sortDirection: direction,
-              } as SortColumnTimeline;
-            }),
-          })
-        );
-      },
-      [dispatch, timelineId, columns]
-    );
-
-    const setAppState = useCallback(
-      (newState: { columns: string[]; sort?: string[][] }) => {
-        if (newState.sort) {
-          onSort(newState.sort);
-        } else {
-          const columnsStates = newState.columns.map((columnId) =>
-            getColumnHeader(columnId, defaultUdtHeaders)
-          );
-          dispatch(timelineActions.updateColumns({ id: timelineId, columns: columnsStates }));
-        }
-      },
-      [dispatch, onSort, timelineId]
-    );
-
-    // Columns management
-    const { onSetColumns } = useUnifiedTableColumns({
-      capabilities,
-      dataView,
-      dataViews,
-      setAppState,
-      useNewFieldsApi: true,
-      columns: defaultColumnIds,
-      sort: sortingColumns,
-    });
-
     const onColumnResize = useCallback(
       ({ columnId, width }: { columnId: string; width: number }) => {
         dispatch(
@@ -326,16 +264,14 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       [dispatch, timelineId]
     );
 
-    const augumentedColumnHeaders = memoizedGetColumnHeaders(columns, browserFields, false);
-
     const customColumnRenderers = useMemo(
       () =>
         getFormattedFields({
           dataTableRows: tableRows,
           scopeId: 'timeline',
-          headers: augumentedColumnHeaders,
+          headers: columns,
         }),
-      [augumentedColumnHeaders, tableRows]
+      [columns, tableRows]
     );
 
     const handleFetchMoreRecords = useCallback(() => {
@@ -419,7 +355,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
             settings={tableSettings}
             showTimeCol={showTimeCol}
             isSortEnabled={true}
-            sort={sortingColumns}
+            sort={sort}
             rowHeightState={rowHeight}
             isPlainRecord={isTextBasedQuery}
             rowsPerPageState={itemsPerPage}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
new file mode 100644
index 00000000000000..7ae43df4f9ced7
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
@@ -0,0 +1,637 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { ComponentProps } from 'react';
+import React, { useEffect } from 'react';
+import type QueryTabContent from '.';
+import { UnifiedTimeline } from '.';
+import { TimelineId } from '../../../../../common/types/timeline';
+import { useTimelineEvents } from '../../../containers';
+import { useTimelineEventsDetails } from '../../../containers/details';
+import { useSourcererDataView } from '../../../../common/containers/sourcerer';
+import { mockSourcererScope } from '../../../../common/containers/sourcerer/mocks';
+import {
+  createSecuritySolutionStorageMock,
+  mockTimelineData,
+  TestProviders,
+} from '../../../../common/mock';
+import { createMockStore } from '../../../../common/mock/create_store';
+import { render, screen, fireEvent, cleanup, waitFor, within } from '@testing-library/react';
+import { createStartServicesMock } from '../../../../common/lib/kibana/kibana_react.mock';
+import type { StartServices } from '../../../../types';
+import { useKibana } from '../../../../common/lib/kibana';
+import { useDispatch } from 'react-redux';
+import { timelineActions } from '../../../store';
+import type { ExperimentalFeatures } from '../../../../../common';
+import { allowedExperimentalValues } from '../../../../../common';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
+import { cloneDeep } from 'lodash';
+import { TimelineTabs } from '@kbn/securitysolution-data-table';
+import { DataLoadingState } from '@kbn/unified-data-table';
+import { createFilterManagerMock } from '@kbn/data-plugin/public/query/filter_manager/filter_manager.mock';
+import { getColumnHeaders } from '../body/column_headers/helpers';
+import { defaultUdtHeaders } from './default_headers';
+import type { ColumnHeaderType } from '../../../../../common/types';
+
+jest.mock('../../../containers', () => ({
+  useTimelineEvents: jest.fn(),
+}));
+
+jest.mock('../../../containers/details');
+
+jest.mock('../../fields_browser', () => ({
+  useFieldBrowserOptions: jest.fn(),
+}));
+
+jest.mock('../body/events', () => ({
+  Events: () => <></>,
+}));
+
+jest.mock('../../../../common/containers/sourcerer');
+jest.mock('../../../../common/containers/sourcerer/use_signal_helpers', () => ({
+  useSignalHelpers: () => ({ signalIndexNeedsInit: false }),
+}));
+
+jest.mock('../../../../common/lib/kuery');
+
+jest.mock('../../../../common/hooks/use_experimental_features');
+
+const useIsExperimentalFeatureEnabledMock = jest.fn((feature: keyof ExperimentalFeatures) => {
+  if (feature === 'unifiedComponentsInTimelineEnabled') {
+    return true;
+  }
+  return allowedExperimentalValues[feature];
+});
+
+jest.mock('../../../../common/lib/kibana');
+
+// unified-field-list is is reporiting multiple analytics events
+jest.mock(`@kbn/analytics-client`);
+
+const columnsToDisplay = [
+  ...defaultUdtHeaders,
+  {
+    columnHeaderType: 'not-filtered' as ColumnHeaderType,
+    id: 'event.severity',
+  },
+];
+
+const TestComponent = (props: Partial<ComponentProps<typeof UnifiedTimeline>>) => {
+  const testComponentDefaultProps: ComponentProps<typeof QueryTabContent> = {
+    columns: getColumnHeaders(columnsToDisplay, mockSourcererScope.browserFields),
+    activeTab: TimelineTabs.query,
+    rowRenderers: [],
+    timelineId: TimelineId.test,
+    itemsPerPage: 10,
+    itemsPerPageOptions: [],
+    sort: [
+      {
+        columnId: '@timestamp',
+        columnType: 'date',
+        esTypes: ['date'],
+        sortDirection: 'desc',
+      },
+    ],
+    events: structuredClone(mockTimelineData),
+    refetch: jest.fn(),
+    totalCount: mockTimelineData.length,
+    onEventClosed: jest.fn(),
+    expandedDetail: {},
+    showExpandedDetails: false,
+    onChangePage: jest.fn(),
+    dataLoadingState: DataLoadingState.loaded,
+    updatedAt: Date.now(),
+    isTextBasedQuery: false,
+  };
+
+  const dispatch = useDispatch();
+
+  // populating timeline so that it is not blank
+  useEffect(() => {
+    dispatch(
+      timelineActions.applyKqlFilterQuery({
+        id: TimelineId.test,
+        filterQuery: {
+          kuery: {
+            kind: 'kuery',
+            expression: '*',
+          },
+          serializedQuery: '*',
+        },
+      })
+    );
+  }, [dispatch]);
+
+  return <UnifiedTimeline {...testComponentDefaultProps} {...props} />;
+};
+
+const customStore = createMockStore();
+
+const TestProviderWrapperWithCustomStore: React.FC = ({ children }) => {
+  return <TestProviders store={customStore}>{children}</TestProviders>;
+};
+
+const renderTestComponents = (props?: Partial<ComponentProps<typeof TestComponent>>) => {
+  return render(<TestComponent {...props} />, {
+    wrapper: TestProviderWrapperWithCustomStore,
+  });
+};
+
+const changeItemsPerPageTo = (newItemsPerPage: number) => {
+  fireEvent.click(screen.getByTestId('tablePaginationPopoverButton'));
+  fireEvent.click(screen.getByTestId(`tablePagination-${newItemsPerPage}-rows`));
+  expect(screen.getByTestId('tablePaginationPopoverButton')).toHaveTextContent(
+    `Rows per page: ${newItemsPerPage}`
+  );
+};
+
+const loadPageMock = jest.fn();
+
+const useTimelineEventsMock = jest.fn(() => [
+  false,
+  {
+    events: cloneDeep(mockTimelineData),
+    pageInfo: {
+      activePage: 0,
+      totalPages: 10,
+    },
+    refreshedAt: Date.now(),
+    totalCount: 70,
+    loadPage: loadPageMock,
+  },
+]);
+
+const useSourcererDataViewMocked = jest.fn().mockReturnValue({
+  ...mockSourcererScope,
+});
+
+const { storage: storageMock } = createSecuritySolutionStorageMock();
+const mockTimelineFilterManager = createFilterManagerMock();
+
+describe('unified timeline', () => {
+  const kibanaServiceMock: StartServices = {
+    ...createStartServicesMock(),
+    storage: storageMock,
+    timelineFilterManager: mockTimelineFilterManager,
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    storageMock.clear();
+    cleanup();
+    localStorage.clear();
+  });
+
+  beforeEach(() => {
+    const ONE_SECOND = 1000;
+    jest.setTimeout(10 * ONE_SECOND);
+    HTMLElement.prototype.getBoundingClientRect = jest.fn(() => {
+      return {
+        width: 1000,
+        height: 1000,
+        x: 0,
+        y: 0,
+      } as DOMRect;
+    });
+
+    (useKibana as jest.Mock).mockImplementation(() => {
+      return {
+        services: kibanaServiceMock,
+      };
+    });
+
+    (useTimelineEvents as jest.Mock).mockImplementation(useTimelineEventsMock);
+
+    (useTimelineEventsDetails as jest.Mock).mockImplementation(() => [false, {}]);
+
+    (useSourcererDataView as jest.Mock).mockImplementation(useSourcererDataViewMocked);
+
+    (useIsExperimentalFeatureEnabled as jest.Mock).mockImplementation(
+      useIsExperimentalFeatureEnabledMock
+    );
+  });
+
+  describe('columns', () => {
+    it('should move column left correctly ', async () => {
+      const field = {
+        name: 'message',
+      };
+      const { container } = renderTestComponents();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+      });
+      expect(container.querySelector(`[data-gridcell-column-id="${field.name}"]`)).toHaveAttribute(
+        'data-gridcell-column-index',
+        '3'
+      );
+
+      expect(
+        container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
+      ).toBeInTheDocument();
+
+      fireEvent.click(
+        container.querySelector(
+          `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
+        ) as HTMLElement
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTitle('Move left')).toBeEnabled();
+      });
+
+      fireEvent.click(screen.getByTitle('Move left'));
+
+      await waitFor(() => {
+        const newColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+        expect(newColumns[0].id).toBe('message');
+      });
+    });
+
+    it('should move column right correctly ', async () => {
+      const field = {
+        name: 'message',
+      };
+      const { container } = renderTestComponents();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+      });
+      expect(container.querySelector(`[data-gridcell-column-id="${field.name}"]`)).toHaveAttribute(
+        'data-gridcell-column-index',
+        '3'
+      );
+
+      expect(
+        container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
+      ).toBeInTheDocument();
+
+      fireEvent.click(
+        container.querySelector(
+          `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
+        ) as HTMLElement
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTitle('Move right')).toBeEnabled();
+      });
+
+      fireEvent.click(screen.getByTitle('Move right'));
+
+      await waitFor(() => {
+        const newColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+        expect(newColumns[2].id).toBe('message');
+      });
+    });
+
+    it('should remove column ', async () => {
+      const field = {
+        name: 'message',
+      };
+      const { container } = renderTestComponents();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+      });
+
+      expect(
+        container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
+      ).toBeInTheDocument();
+
+      fireEvent.click(
+        container.querySelector(
+          `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
+        ) as HTMLElement
+      );
+
+      // column is currently present in the state
+      const currentColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+      expect(currentColumns).toMatchObject(
+        expect.arrayContaining([
+          expect.objectContaining({
+            id: field.name,
+          }),
+        ])
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTitle('Remove column')).toBeVisible();
+      });
+
+      fireEvent.click(screen.getByTitle('Remove column'));
+
+      // column should now be removed
+      await waitFor(() => {
+        const newColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+        expect(newColumns).not.toMatchObject(
+          expect.arrayContaining([
+            expect.objectContaining({
+              id: field.name,
+            }),
+          ])
+        );
+      });
+    });
+
+    it('should sort date column', async () => {
+      const { container } = renderTestComponents();
+      await waitFor(() => {
+        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+      });
+
+      expect(container.querySelector('[data-gridcell-column-id="@timestamp"]')).toBeInTheDocument();
+
+      fireEvent.click(
+        container.querySelector(
+          '[data-gridcell-column-id="@timestamp"] .euiDataGridHeaderCell__icon'
+        ) as HTMLElement
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTitle('Sort Old-New')).toBeVisible();
+      });
+      expect(screen.getByTitle('Sort New-Old')).toBeVisible();
+
+      useTimelineEventsMock.mockClear();
+
+      fireEvent.click(screen.getByTitle('Sort Old-New'));
+
+      await waitFor(() => {
+        const newSort = customStore.getState().timeline.timelineById[TimelineId.test].sort;
+        expect(newSort).toMatchObject([
+          {
+            columnId: '@timestamp',
+            columnType: 'date',
+            sortDirection: 'asc',
+          },
+        ]);
+      });
+    });
+
+    it('should sort string column correctly', async () => {
+      const { container } = renderTestComponents();
+      await waitFor(() => {
+        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+      });
+
+      expect(container.querySelector('[data-gridcell-column-id="host.name"]')).toBeInTheDocument();
+
+      fireEvent.click(
+        container.querySelector(
+          '[data-gridcell-column-id="host.name"] .euiDataGridHeaderCell__icon'
+        ) as HTMLElement
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('dataGridHeaderCellActionGroup-host.name')).toBeVisible();
+      });
+
+      expect(screen.getByTitle('Sort A-Z')).toBeVisible();
+      expect(screen.getByTitle('Sort Z-A')).toBeVisible();
+
+      useTimelineEventsMock.mockClear();
+
+      fireEvent.click(screen.getByTitle('Sort A-Z'));
+
+      await waitFor(() => {
+        const newSort = customStore.getState().timeline.timelineById[TimelineId.test].sort;
+        expect(newSort).toMatchObject([
+          {
+            columnId: '@timestamp',
+            columnType: 'date',
+            sortDirection: 'desc',
+          },
+          {
+            sortDirection: 'asc',
+            columnId: 'host.name',
+            columnType: 'string',
+          },
+        ]);
+      });
+    });
+
+    it('should sort number column', async () => {
+      const field = {
+        name: 'event.severity',
+        type: 'number',
+      };
+
+      const { container } = renderTestComponents();
+      await waitFor(() => {
+        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+      });
+
+      expect(
+        container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
+      ).toBeInTheDocument();
+
+      fireEvent.click(
+        container.querySelector(
+          `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
+        ) as HTMLElement
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId(`dataGridHeaderCellActionGroup-${field.name}`)).toBeVisible();
+      });
+
+      expect(screen.getByTitle('Sort Low-High')).toBeVisible();
+      expect(screen.getByTitle('Sort High-Low')).toBeVisible();
+
+      useTimelineEventsMock.mockClear();
+
+      fireEvent.click(screen.getByTitle('Sort Low-High'));
+
+      await waitFor(() => {
+        const newSort = customStore.getState().timeline.timelineById[TimelineId.test].sort;
+        expect(newSort).toMatchObject([
+          {
+            columnId: '@timestamp',
+            columnType: 'date',
+            sortDirection: 'desc',
+          },
+          {
+            sortDirection: 'asc',
+            columnId: 'event.severity',
+            columnType: 'number',
+          },
+        ]);
+      });
+    });
+
+    it('should be able to edit DataView Field', async () => {
+      const field = {
+        name: 'message',
+      };
+      const { container } = renderTestComponents();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+      });
+      expect(container.querySelector(`[data-gridcell-column-id="${field.name}"]`)).toHaveAttribute(
+        'data-gridcell-column-index',
+        '3'
+      );
+
+      expect(
+        container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
+      ).toBeInTheDocument();
+
+      fireEvent.click(
+        container.querySelector(
+          `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
+        ) as HTMLElement
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTitle('Edit data view field')).toBeEnabled();
+      });
+
+      fireEvent.click(screen.getByTitle('Edit data view field'));
+
+      await waitFor(() => {
+        expect(kibanaServiceMock.dataViewFieldEditor.openEditor).toHaveBeenNthCalledWith(1, {
+          ctx: {
+            dataView: expect.objectContaining({
+              id: 'security-solution',
+            }),
+          },
+          fieldName: 'message',
+          onSave: expect.any(Function),
+        });
+      });
+    });
+  });
+
+  describe('unified field list', () => {
+    it('should be able to add filters', async () => {
+      const field = {
+        name: 'event.severity',
+      };
+
+      renderTestComponents();
+      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toBeVisible();
+      });
+
+      expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(1);
+
+      const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
+
+      fireEvent.click(within(availableFields).getByTestId(`field-${field.name}-showDetails`));
+
+      await waitFor(() => {
+        expect(screen.getByTestId(`timelineFieldListPanelAddExistFilter-${field.name}`));
+      });
+
+      fireEvent.click(screen.getByTestId(`timelineFieldListPanelAddExistFilter-${field.name}`));
+      await waitFor(() => {
+        expect(mockTimelineFilterManager.addFilters).toHaveBeenNthCalledWith(
+          1,
+          expect.arrayContaining([
+            expect.objectContaining({
+              query: {
+                exists: {
+                  field: field.name,
+                },
+              },
+              meta: expect.objectContaining({
+                negate: false,
+                disabled: false,
+              }),
+            }),
+          ])
+        );
+      });
+    });
+    it('should remove the column when clicked on ⊕ sign', async () => {
+      const field = {
+        name: 'agent.id',
+      };
+
+      renderTestComponents();
+      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toBeVisible();
+      });
+
+      expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('9');
+
+      expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(0);
+
+      const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
+
+      // / new columns does not exists yet
+      const currentColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+      expect(currentColumns).not.toMatchObject(
+        expect.arrayContaining([
+          expect.objectContaining({
+            id: field.name,
+          }),
+        ])
+      );
+
+      fireEvent.click(within(availableFields).getByTestId(`fieldToggle-${field.name}`));
+
+      // new columns should exist now
+      await waitFor(() => {
+        const newColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+        expect(newColumns).toMatchObject(
+          expect.arrayContaining([
+            expect.objectContaining({
+              id: field.name,
+            }),
+          ])
+        );
+      });
+    });
+
+    it('should remove the column when clicked on X sign', async () => {
+      const field = {
+        name: 'event.severity',
+      };
+
+      renderTestComponents();
+      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+
+      await waitFor(() => {
+        expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toBeVisible();
+      });
+
+      expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(1);
+
+      const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
+
+      // / new columns does exists
+      const currentColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+      expect(currentColumns).toMatchObject(
+        expect.arrayContaining([
+          expect.objectContaining({
+            id: field.name,
+          }),
+        ])
+      );
+
+      fireEvent.click(within(availableFields).getByTestId(`fieldToggle-${field.name}`));
+
+      // new columns should exist now
+      await waitFor(() => {
+        const newColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+        expect(newColumns).not.toMatchObject(
+          expect.arrayContaining([
+            expect.objectContaining({
+              id: field.name,
+            }),
+          ])
+        );
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
index e18ffe3861f33b..2951a5727d8c3b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
@@ -47,6 +47,7 @@ import { TimelineResizableLayout } from './resizable_layout';
 import TimelineDataTable from './data_table';
 import { timelineActions } from '../../../store';
 import { getFieldsListCreationOptions } from './get_fields_list_creation_options';
+import { defaultUdtHeaders } from './default_headers';
 
 const TimelineBodyContainer = styled.div.attrs(({ className = '' }) => ({
   className: `${className}`,
@@ -135,7 +136,6 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
 }) => {
   const dispatch = useDispatch();
   const unifiedFieldListContainerRef = useRef<UnifiedFieldListSidebarContainerApi>(null);
-  const renderId = useRef(1);
 
   const {
     services: {
@@ -183,7 +183,7 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
   const [sidebarContainer, setSidebarContainer] = useState<HTMLDivElement | null>(null);
   const [, setMainContainer] = useState<HTMLDivElement | null>(null);
 
-  const defaultColumns = useMemo(() => {
+  const columnIds = useMemo(() => {
     return columns.map((c) => c.id);
   }, [columns]);
 
@@ -191,7 +191,6 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
     sourcererScope: SourcererScopeName.timeline,
   });
 
-  // Sorting
   const sortingColumns = useMemo(() => {
     return (
       (sort?.map((sortingCol) => [
@@ -200,42 +199,49 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
       ]) as SortOrder[]) || []
     );
   }, [sort]);
+
   const onSort = useCallback(
     (nextSort: string[][]) => {
       dispatch(
         timelineActions.updateSort({
           id: timelineId,
-          sort: nextSort.map(
-            ([id, direction]) =>
-              ({
-                columnId: id,
-                columnType: 'keyword',
-                sortDirection: direction,
-              } as SortColumnTimeline)
-          ),
+          sort: nextSort.map(([id, direction]) => {
+            const currentColumn = columns.find((column) => column.id === id);
+            const columnType = currentColumn ? currentColumn.type : 'keyword';
+            return {
+              columnId: id,
+              columnType,
+              sortDirection: direction,
+            } as SortColumnTimeline;
+          }),
         })
       );
     },
-    [dispatch, timelineId]
+    [dispatch, timelineId, columns]
   );
 
-  const { onAddColumn, onRemoveColumn } = useColumns({
-    capabilities,
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    dataView: dataView!,
-    dataViews,
-    setAppState: (newState: { columns: string[]; sort?: string[][] }) => {
+  const setAppState = useCallback(
+    (newState: { columns: string[]; sort?: string[][] }) => {
       if (newState.sort) {
         onSort(newState.sort);
       } else {
         const columnsStates = newState.columns.map((columnId) =>
-          getColumnHeader(columnId, defaultHeaders)
+          getColumnHeader(columnId, defaultUdtHeaders)
         );
         dispatch(timelineActions.updateColumns({ id: timelineId, columns: columnsStates }));
       }
     },
+    [dispatch, onSort, timelineId]
+  );
+
+  const { onAddColumn, onRemoveColumn, onSetColumns } = useColumns({
+    capabilities,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    dataView: dataView!,
+    dataViews,
+    setAppState,
     useNewFieldsApi: true,
-    columns: defaultColumns,
+    columns: columnIds,
     sort: sortingColumns,
   });
 
@@ -274,11 +280,11 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
   );
 
   const isDropAllowed = useMemo(() => {
-    if (!draggingFieldName || defaultColumns.includes(draggingFieldName)) {
+    if (!draggingFieldName || columnIds.includes(draggingFieldName)) {
       return false;
     }
     return true;
-  }, [draggingFieldName, defaultColumns]);
+  }, [draggingFieldName, columnIds]);
 
   const onDropFieldToTable = useCallback(() => {
     if (draggingFieldName) {
@@ -312,7 +318,6 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
 
   const onFieldEdited = useCallback(() => {
     refetch();
-    renderId.current += 1;
   }, [refetch]);
 
   const wrappedOnFieldEdited = useCallback(async () => {
@@ -341,7 +346,7 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
                   dataView={dataView}
                   fullWidth
                   allFields={dataView.fields}
-                  workspaceSelectedFieldNames={defaultColumns}
+                  workspaceSelectedFieldNames={columnIds}
                   onAddFieldToWorkspace={onAddFieldToWorkspace}
                   onRemoveFieldFromWorkspace={onRemoveFieldFromWorkspace}
                   onAddFilter={onAddFilter}
@@ -380,7 +385,9 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
                       timelineId={timelineId}
                       itemsPerPage={itemsPerPage}
                       itemsPerPageOptions={itemsPerPageOptions}
-                      sort={sort}
+                      sort={sortingColumns}
+                      onSort={onSort}
+                      onSetColumns={onSetColumns}
                       events={events}
                       refetch={refetch}
                       onFieldEdited={onFieldEdited}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx
index b0a34be54e470c..106be16c82329f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/resizable_layout.test.tsx
@@ -41,7 +41,6 @@ describe('ResizableLayout', () => {
     render(<TestComponent />);
 
     await waitFor(() => {
-      screen.debug(undefined, 100000);
       expect(screen.getByTestId('sidebar__panel')).toBeVisible();
     });
   });

From 97425cd9dc66178a720a018d6e96220cd946760a Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Thu, 14 Mar 2024 12:50:26 +0100
Subject: [PATCH 43/65] fix: types

---
 .../components/timeline/query_tab_content/index.tsx    |  3 +++
 .../unified_components/data_table/index.test.tsx       | 10 ++--------
 .../timeline/unified_components/index.test.tsx         |  8 --------
 3 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
index e2bf36f881a98a..d8dd976848fd96 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx
@@ -24,6 +24,8 @@ import { InPortal } from 'react-reverse-portal';
 
 import { getEsQueryConfig } from '@kbn/data-plugin/common';
 import { DataLoadingState } from '@kbn/unified-data-table';
+import type { BrowserFields, ColumnHeaderOptions } from '@kbn/timelines-plugin/common';
+import memoizeOne from 'memoize-one';
 import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
 import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
 import type { ControlColumnProps } from '../../../../../common/types';
@@ -64,6 +66,7 @@ import { useLicense } from '../../../../common/hooks/use_license';
 import { HeaderActions } from '../../../../common/components/header_actions/header_actions';
 import { defaultUdtHeaders } from '../unified_components/default_headers';
 import { UnifiedTimelineBody } from '../body/unified_timeline_body';
+import { getColumnHeaders } from '../body/column_headers/helpers';
 
 const memoizedGetColumnHeaders: (
   headers: ColumnHeaderOptions[],
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
index a8f410413cdd73..09750a43adf059 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
@@ -37,14 +37,7 @@ const TestComponent = (props: Partial<ComponentProps<typeof TimelineDataTableCom
         itemsPerPage={100}
         itemsPerPageOptions={[10, 25, 50, 100]}
         rowRenderers={[]}
-        sort={[
-          {
-            columnId: '@timestamp',
-            columnType: 'date',
-            esTypes: ['date'],
-            sortDirection: 'desc',
-          },
-        ]}
+        sort={[['@timestamp', 'desc']]}
         events={mockTimelineData}
         onFieldEdited={onFieldEditedMock}
         refetch={refetchMock}
@@ -55,6 +48,7 @@ const TestComponent = (props: Partial<ComponentProps<typeof TimelineDataTableCom
         expandedDetail={{}}
         onChangePage={onChangePageMock}
         updatedAt={Date.now()}
+        onSetColumns={jest.fn()}
         {...props}
       />
     </TestProviders>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
index 7ae43df4f9ced7..67428302172d89 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
@@ -141,14 +141,6 @@ const renderTestComponents = (props?: Partial<ComponentProps<typeof TestComponen
   });
 };
 
-const changeItemsPerPageTo = (newItemsPerPage: number) => {
-  fireEvent.click(screen.getByTestId('tablePaginationPopoverButton'));
-  fireEvent.click(screen.getByTestId(`tablePagination-${newItemsPerPage}-rows`));
-  expect(screen.getByTestId('tablePaginationPopoverButton')).toHaveTextContent(
-    `Rows per page: ${newItemsPerPage}`
-  );
-};
-
 const loadPageMock = jest.fn();
 
 const useTimelineEventsMock = jest.fn(() => [

From 374c0c704f4da8306d0f904ba98b5e9fa1223943 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Fri, 22 Mar 2024 11:57:11 +0100
Subject: [PATCH 44/65] test: unified data table

---
 .../data_table/index.test.tsx                 | 142 +++++++++++++++---
 .../unified_components/data_table/index.tsx   |  55 +------
 .../timeline/unified_components/index.tsx     |   2 +
 .../timeline/unified_components/utils.test.ts |  60 ++++++++
 .../timeline/unified_components/utils.ts      |  44 ++++++
 5 files changed, 238 insertions(+), 65 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/utils.test.ts
 create mode 100644 x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/utils.ts

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
index 09750a43adf059..dbd764203100f3 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
@@ -12,10 +12,12 @@ import { defaultUdtHeaders } from '../default_headers';
 import { createStubDataView } from '@kbn/data-views-plugin/common/data_view.stub';
 import { TimelineId, TimelineTabs } from '../../../../../../common/types';
 import { DataLoadingState } from '@kbn/unified-data-table';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import { useSourcererDataView } from '../../../../../common/containers/sourcerer';
 import { mockBrowserFields } from '../../../../../common/containers/source/mock';
 import type { ComponentProps } from 'react';
+import { getColumnHeaders } from '../../body/column_headers/helpers';
+import { mockSourcererScope } from '../../../../../common/containers/sourcerer/mocks';
 const mockDataView = createStubDataView({ spec: {} });
 
 jest.mock('../../../../../common/containers/sourcerer');
@@ -25,12 +27,17 @@ const refetchMock = jest.fn();
 const onEventClosedMock = jest.fn();
 const onChangePageMock = jest.fn();
 
+const initialEnrichedColumns = getColumnHeaders(
+  defaultUdtHeaders,
+  mockSourcererScope.browserFields
+);
+
 const TestComponent = (props: Partial<ComponentProps<typeof TimelineDataTableComponent>>) => {
   useSourcererDataView();
   return (
     <TestProviders>
       <TimelineDataTableComponent
-        columns={defaultUdtHeaders}
+        columns={initialEnrichedColumns}
         dataView={mockDataView}
         activeTab={TimelineTabs.query}
         timelineId={TimelineId.test}
@@ -49,6 +56,7 @@ const TestComponent = (props: Partial<ComponentProps<typeof TimelineDataTableCom
         onChangePage={onChangePageMock}
         updatedAt={Date.now()}
         onSetColumns={jest.fn()}
+        onFilter={jest.fn()}
         {...props}
       />
     </TestProviders>
@@ -68,24 +76,122 @@ describe('unified data table', () => {
     expect(screen.getByTestId('discoverDocTable')).toBeVisible();
   });
 
-  it('should show details flyout', async () => {
-    render(
-      <TestComponent
-        showExpandedDetails={true}
-        expandedDetail={{
-          query: {
-            params: {
-              eventId: 'some_id',
-              indexName: '',
-            },
-            panelView: 'eventDetail',
-          },
-        }}
-      />
-    );
+  describe('custom cell rendering based on data Type', () => {
+    it('should render source.ip as link', async () => {
+      const eventsWithSourceIp = mockTimelineData.filter(
+        (event) => event.ecs?.source?.ip?.length ?? -1 > 0
+      );
+
+      const { container } = render(<TestComponent events={eventsWithSourceIp} />);
+
+      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+
+      const sourceIpCell = container.querySelector(
+        '[data-gridcell-column-id="source.ip"][data-test-subj="dataGridRowCell"]'
+      ) as HTMLElement;
+
+      expect(sourceIpCell).toBeVisible();
+
+      expect(within(sourceIpCell).getByTestId('network-details')).toHaveClass('euiLink');
+    });
+    it('should render destination.ip as link', async () => {
+      const eventsWithDestIp = mockTimelineData.filter(
+        (event) => event.ecs?.destination?.ip?.length ?? -1 > 0
+      );
+
+      const { container } = render(<TestComponent events={eventsWithDestIp} />);
+
+      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+
+      const destIpCell = container.querySelector(
+        '[data-gridcell-column-id="destination.ip"][data-test-subj="dataGridRowCell"]'
+      ) as HTMLElement;
+
+      expect(destIpCell).toBeVisible();
+
+      expect(within(destIpCell).getByTestId('network-details')).toHaveClass('euiLink');
+    });
+    it('should render host.name as link', async () => {
+      const hostTestId = 'host-details-button';
+      const eventsWithHostName = mockTimelineData.filter(
+        (event) => event.ecs?.host?.name?.length ?? -1 > 0
+      );
+
+      const { container } = render(<TestComponent events={eventsWithHostName} />);
+
+      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+
+      const hostNameCell = container.querySelector(
+        '[data-gridcell-column-id="host.name"][data-test-subj="dataGridRowCell"]'
+      ) as HTMLElement;
+
+      expect(hostNameCell).toBeVisible();
+
+      expect(within(hostNameCell).getByTestId(hostTestId)).toHaveClass('euiLink');
+    });
+    it('should render user.name as link', async () => {
+      const userTestId = 'users-link-anchor';
+      const eventsWithUserName = mockTimelineData.filter(
+        (event) => event.ecs?.user?.name?.length ?? -1 > 0
+      );
+
+      const { container } = render(<TestComponent events={eventsWithUserName} />);
+
+      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+
+      const userNameCell = container.querySelector(
+        '[data-gridcell-column-id="user.name"][data-test-subj="dataGridRowCell"]'
+      ) as HTMLElement;
+
+      expect(userNameCell).toBeVisible();
+
+      expect(within(userNameCell).getByTestId(userTestId)).toHaveClass('euiLink');
+    });
+  });
+
+  it('should refetch on sample size change', async () => {
+    render(<TestComponent />);
+
+    expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+
+    const toolbarSettings = screen.getByTestId('dataGridDisplaySelectorButton');
+
+    fireEvent.click(toolbarSettings);
 
     await waitFor(() => {
-      expect(screen.getByTestId('timeline:details-panel:flyout')).toBeVisible();
+      expect(screen.getAllByTestId('unifiedDataTableSampleSizeInput')[0]).toBeVisible();
+    });
+
+    fireEvent.change(screen.getAllByTestId('unifiedDataTableSampleSizeInput')[0], {
+      target: { value: '10' },
+    });
+
+    await waitFor(() => {
+      expect(refetchMock).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('details flyout', () => {
+    it('should show details flyout', async () => {
+      render(
+        <TestComponent
+          showExpandedDetails={true}
+          expandedDetail={{
+            query: {
+              params: {
+                eventId: 'some_id',
+                indexName: '',
+              },
+              panelView: 'eventDetail',
+            },
+          }}
+        />
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('timeline:details-panel:flyout')).toBeVisible();
+      });
     });
+    it('should close details flyout', async () => {});
   });
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index 2a553741803fb3..9503ed9e4b6dee 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -8,17 +8,12 @@
 import React, { memo, useMemo, useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { generateFilters } from '@kbn/data-plugin/public';
-import type { DataViewField } from '@kbn/data-plugin/common';
-import { flattenHit } from '@kbn/data-plugin/common';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
 import type {
   UnifiedDataTableSettingsColumn,
   UnifiedDataTableProps,
 } from '@kbn/unified-data-table';
 import { UnifiedDataTable, DataLoadingState } from '@kbn/unified-data-table';
-import { popularizeField } from '@kbn/unified-data-table/src/utils/popularize_field';
-import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { StatefulEventContext } from '../../../../../common/components/events_viewer/stateful_event_context';
 import type { ExpandedDetailTimeline, ExpandedDetailType } from '../../../../../../common/types';
@@ -44,6 +39,7 @@ import { StyledTimelineUnifiedDataTable, StyledEuiProgress } from '../styles';
 import { timelineDefaults } from '../../../../store/defaults';
 import { timelineActions } from '../../../../store';
 import { useGetScopedSourcererDataView } from '../../../../../common/components/sourcerer/use_get_sourcerer_data_view';
+import { transformTimelineItemToUnifiedRows } from '../utils';
 
 export const SAMPLE_SIZE_SETTING = 500;
 const DataGridMemoized = React.memo(UnifiedDataTable);
@@ -66,7 +62,7 @@ type CommonDataTableProps = {
   dataLoadingState: DataLoadingState;
   updatedAt: number;
   isTextBasedQuery?: boolean;
-} & Pick<UnifiedDataTableProps, 'onSort' | 'onSetColumns' | 'sort'>;
+} & Pick<UnifiedDataTableProps, 'onSort' | 'onSetColumns' | 'sort' | 'onFilter'>;
 
 interface DataTableProps extends CommonDataTableProps {
   dataView: DataView;
@@ -96,6 +92,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
     isTextBasedQuery = false,
     onSetColumns,
     onSort,
+    onFilter,
   }) => {
     const dispatch = useDispatch();
 
@@ -148,22 +145,8 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       timelineBodySelector(state, timelineId)
     );
 
-    const tableRows: Array<DataTableRecord & TimelineItem> = useMemo(
-      () =>
-        events.map(({ _id, _index, ecs, data }) => {
-          const _source = ecs as unknown as Record<string, unknown>;
-          const hit = { _id, _index: String(_index), _source };
-          return {
-            _id,
-            id: _id,
-            data,
-            ecs,
-            raw: hit,
-            flattened: flattenHit(hit, dataView, {
-              includeIgnoredValues: true,
-            }),
-          };
-        }),
+    const tableRows = useMemo(
+      () => transformTimelineItemToUnifiedRows({ events, dataView }),
       [events, dataView]
     );
 
@@ -238,24 +221,6 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       [onColumnResize]
     );
 
-    const onAddFilter = useCallback(
-      (field: DataViewField | string, values: unknown, operation: '+' | '-') => {
-        if (dataView && timelineFilterManager) {
-          const fieldName = typeof field === 'string' ? field : field.name;
-          popularizeField(dataView, fieldName, dataViews, capabilities);
-          const newFilters = generateFilters(
-            timelineFilterManager,
-            field,
-            values,
-            operation,
-            dataView
-          );
-          return timelineFilterManager.addFilters(newFilters);
-        }
-      },
-      [timelineFilterManager, dataView, dataViews, capabilities]
-    );
-
     const onChangeItemsPerPage = useCallback(
       (itemsChangedPerPage) =>
         dispatch(
@@ -305,7 +270,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       [dispatch, rowHeight, timelineId]
     );
 
-    const services = useMemo(() => {
+    const dataGridServices = useMemo(() => {
       return {
         theme,
         fieldFormats,
@@ -325,10 +290,6 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       dataPluginContract,
     ]);
 
-    if (!dataView) {
-      return null;
-    }
-
     return (
       <StatefulEventContext.Provider value={activeStatefulEventContext}>
         <StyledTimelineUnifiedDataTable>
@@ -344,7 +305,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
             dataView={dataView}
             showColumnTokens={true}
             loadingState={dataLoadingState}
-            onFilter={onAddFilter as DocViewFilterFn}
+            onFilter={onFilter}
             onResize={onResizeDataGrid}
             onSetColumns={onSetColumns}
             onSort={!isTextBasedQuery ? onSort : undefined}
@@ -363,7 +324,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
             onUpdateRowHeight={onUpdateRowHeight}
             onFieldEdited={onFieldEdited}
             cellActionsTriggerId={SecurityCellActionsTrigger.DEFAULT}
-            services={services}
+            services={dataGridServices}
             visibleCellActions={3}
             externalCustomRenderers={customColumnRenderers}
             renderDocumentView={() => <></>}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
index 2951a5727d8c3b..f0b7ce3c705115 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
@@ -24,6 +24,7 @@ import type {
 import { UnifiedFieldListSidebarContainer } from '@kbn/unified-field-list';
 import type { EuiTheme } from '@kbn/react-kibana-context-styled';
 import type { CoreStart } from '@kbn/core-lifecycle-browser';
+import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import { useGetScopedSourcererDataView } from '../../../../common/components/sourcerer/use_get_sourcerer_data_view';
 import { EventDetailsWidthProvider } from '../../../../common/components/events_viewer/event_details_width_context';
 import type { ExpandedDetailTimeline } from '../../../../../common/types';
@@ -400,6 +401,7 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
                       activeTab={activeTab}
                       updatedAt={updatedAt}
                       isTextBasedQuery={isTextBasedQuery}
+                      onFilter={onAddFilter as DocViewFilterFn}
                     />
                   </EventDetailsWidthProvider>
                 </DropOverlayWrapper>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/utils.test.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/utils.test.ts
new file mode 100644
index 00000000000000..e0a7007c3a16d8
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/utils.test.ts
@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { DataView } from '@kbn/data-views-plugin/common';
+import { fieldFormatsMock } from '@kbn/field-formats-plugin/common/mocks';
+
+import { mockSourcererScope } from '../../../../common/containers/sourcerer/mocks';
+import { mockTimelineData } from '../../../../common/mock';
+import { transformTimelineItemToUnifiedRows } from './utils';
+
+const testTimelineData = mockTimelineData;
+
+describe('utils', () => {
+  describe('transformTimelineItemToUnifiedRows', () => {
+    it('should return correct result', () => {
+      const result = transformTimelineItemToUnifiedRows({
+        events: testTimelineData,
+        dataView: new DataView({
+          spec: mockSourcererScope.sourcererDataView,
+          fieldFormats: fieldFormatsMock,
+        }),
+      });
+
+      expect(result[0]).toEqual({
+        _id: testTimelineData[0]._id,
+        id: testTimelineData[0]._id,
+        data: testTimelineData[0].data,
+        ecs: testTimelineData[0].ecs,
+        raw: {
+          _id: testTimelineData[0]._id,
+          _index: String(testTimelineData[0]._index),
+          _source: testTimelineData[0].ecs,
+        },
+        flattened: {
+          _id: testTimelineData[0]._id,
+          timestamp: '2018-11-05T19:03:25.937Z',
+          'host.name': ['apache'],
+          'host.ip': ['192.168.0.1'],
+          'event.id': ['1'],
+          'event.action': ['Action'],
+          'event.category': ['Access'],
+          'event.module': ['nginx'],
+          'event.severity': [3],
+          'source.ip': ['192.168.0.1'],
+          'source.port': [80],
+          'destination.ip': ['192.168.0.3'],
+          'destination.port': [6343],
+          'user.id': ['1'],
+          'user.name': ['john.dee'],
+          'geo.region_name': ['xx'],
+          'geo.country_iso_code': ['xx'],
+        },
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/utils.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/utils.ts
new file mode 100644
index 00000000000000..20b769455d3ea0
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/utils.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { flattenHit } from '@kbn/data-service';
+import type { DataView } from '@kbn/data-views-plugin/public';
+import type { DataTableRecord } from '@kbn/discover-utils/types';
+import type { TimelineItem } from '../../../../../common/search_strategy';
+
+interface TransformTimelineItemToUnifiedRows {
+  events: TimelineItem[];
+  dataView: DataView;
+}
+
+export function transformTimelineItemToUnifiedRows(
+  args: TransformTimelineItemToUnifiedRows
+): Array<DataTableRecord & TimelineItem> {
+  const { events, dataView } = args;
+  const unifiedDataTableRows = events.map(({ _id, _index, ecs, data }) => {
+    const _source = ecs as unknown as Record<string, unknown>;
+    const hit = { _id, _index: String(_index), _source };
+    /*
+     * Ideally for unified data table we only need raw and flattened keys
+     * but we use this transformed data within other parts of security solution
+     * so we create a combined data format for timeline item and DataTableRecord
+     *
+     * */
+    return {
+      _id,
+      id: _id,
+      data,
+      ecs,
+      raw: hit,
+      flattened: flattenHit(hit, dataView, {
+        includeIgnoredValues: true,
+      }),
+    };
+  });
+
+  return unifiedDataTableRows;
+}

From 1d05271c9964102993bee815b7055b109ad147bb Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 22 Mar 2024 11:05:08 +0000
Subject: [PATCH 45/65] [CI] Auto-commit changed files from 'node
 scripts/lint_ts_projects --fix'

---
 x-pack/plugins/security_solution/tsconfig.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/security_solution/tsconfig.json b/x-pack/plugins/security_solution/tsconfig.json
index 4a050056bf9a5f..cf7216e476a93c 100644
--- a/x-pack/plugins/security_solution/tsconfig.json
+++ b/x-pack/plugins/security_solution/tsconfig.json
@@ -193,6 +193,7 @@
     "@kbn/core-test-helpers-kbn-server",
     "@kbn/core-ui-settings-server",
     "@kbn/core-http-request-handler-context-server",
-    "@kbn/core-http-server-mocks"
+    "@kbn/core-http-server-mocks",
+    "@kbn/data-service"
   ]
 }

From 87655c535b802996312aa047259ec0fd30752e1e Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 25 Mar 2024 10:21:09 +0100
Subject: [PATCH 46/65] =?UTF-8?q?test:=20more=20of=20them=20=F0=9F=A7=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data_table/index.test.tsx                 | 187 ++++++++++++++++--
 .../unified_components/data_table/index.tsx   |   5 +-
 2 files changed, 171 insertions(+), 21 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
index dbd764203100f3..7b5140f7050b56 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { mockTimelineData, TestProviders } from '../../../../../common/mock';
+import { createMockStore, mockTimelineData, TestProviders } from '../../../../../common/mock';
 import React from 'react';
 import { TimelineDataTableComponent } from '.';
 import { defaultUdtHeaders } from '../default_headers';
@@ -18,6 +18,9 @@ import { mockBrowserFields } from '../../../../../common/containers/source/mock'
 import type { ComponentProps } from 'react';
 import { getColumnHeaders } from '../../body/column_headers/helpers';
 import { mockSourcererScope } from '../../../../../common/containers/sourcerer/mocks';
+import { timelineActions } from '../../../../store';
+import type { ExpandedDetailTimeline } from '../../../../../../common/types';
+
 const mockDataView = createStubDataView({ spec: {} });
 
 jest.mock('../../../../../common/containers/sourcerer');
@@ -32,16 +35,21 @@ const initialEnrichedColumns = getColumnHeaders(
   mockSourcererScope.browserFields
 );
 
-const TestComponent = (props: Partial<ComponentProps<typeof TimelineDataTableComponent>>) => {
+type TestComponentProps = Partial<ComponentProps<typeof TimelineDataTableComponent>> & {
+  store?: ReturnType<typeof createMockStore>;
+};
+
+const TestComponent = (props: TestComponentProps) => {
+  const { store = createMockStore(), ...restProps } = props;
   useSourcererDataView();
   return (
-    <TestProviders>
+    <TestProviders store={store}>
       <TimelineDataTableComponent
         columns={initialEnrichedColumns}
         dataView={mockDataView}
         activeTab={TimelineTabs.query}
         timelineId={TimelineId.test}
-        itemsPerPage={100}
+        itemsPerPage={50}
         itemsPerPageOptions={[10, 25, 50, 100]}
         rowRenderers={[]}
         sort={[['@timestamp', 'desc']]}
@@ -49,7 +57,7 @@ const TestComponent = (props: Partial<ComponentProps<typeof TimelineDataTableCom
         onFieldEdited={onFieldEditedMock}
         refetch={refetchMock}
         dataLoadingState={DataLoadingState.loaded}
-        totalCount={1}
+        totalCount={mockTimelineData.length}
         onEventClosed={onEventClosedMock}
         showExpandedDetails={false}
         expandedDetail={{}}
@@ -57,7 +65,7 @@ const TestComponent = (props: Partial<ComponentProps<typeof TimelineDataTableCom
         updatedAt={Date.now()}
         onSetColumns={jest.fn()}
         onFilter={jest.fn()}
-        {...props}
+        {...restProps}
       />
     </TestProviders>
   );
@@ -71,9 +79,9 @@ describe('unified data table', () => {
     });
   });
 
-  it('should display unified data table', () => {
+  it('should display unified data table', async () => {
     render(<TestComponent />);
-    expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+    expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
   });
 
   describe('custom cell rendering based on data Type', () => {
@@ -171,20 +179,88 @@ describe('unified data table', () => {
     });
   });
 
+  it('should update row Height correctly', async () => {
+    const rowHeight = {
+      initial: 2,
+      new: 1,
+    };
+    const customMockStore = createMockStore();
+
+    customMockStore.dispatch(
+      timelineActions.updateRowHeight({
+        id: TimelineId.test,
+        rowHeight: rowHeight.initial,
+      })
+    );
+
+    render(<TestComponent store={customMockStore} />);
+
+    expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+
+    const toolbarSettings = screen.getByTestId('dataGridDisplaySelectorButton');
+
+    fireEvent.click(toolbarSettings);
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId('unifiedDataTableRowHeightSettings_lineCountNumber')[0]
+      ).toBeVisible();
+    });
+    expect(
+      screen.getAllByTestId('unifiedDataTableRowHeightSettings_lineCountNumber')[0]
+    ).toHaveValue(String(rowHeight.initial));
+
+    fireEvent.change(
+      screen.getAllByTestId('unifiedDataTableRowHeightSettings_lineCountNumber')[0],
+      {
+        target: { value: String(rowHeight.new) },
+      }
+    );
+
+    await waitFor(() => {
+      expect(customMockStore.getState().timeline.timelineById[TimelineId.test]?.rowHeight).toEqual(
+        rowHeight.new
+      );
+    });
+  });
+
   describe('details flyout', () => {
-    it('should show details flyout', async () => {
+    it('should show defails flyout when clicked on expand event', async () => {
+      render(<TestComponent showExpandedDetails={true} />);
+
+      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+
+      fireEvent.click(screen.getAllByTestId('docTableExpandToggleColumn')[0]);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('timeline:details-panel:flyout')).toBeVisible();
+      });
+    });
+
+    it('should show details flyout when expandedDetails state is set', async () => {
+      const customMockStore = createMockStore();
+      const mockExpandedDetail: ExpandedDetailTimeline = {
+        query: {
+          params: {
+            eventId: 'some_id',
+            indexName: 'security-*',
+          },
+          panelView: 'eventDetail',
+        },
+      };
+      customMockStore.dispatch(
+        timelineActions.toggleDetailPanel({
+          id: TimelineId.test,
+          tabType: TimelineTabs.query,
+          ...mockExpandedDetail.query,
+        })
+      );
+
       render(
         <TestComponent
+          store={customMockStore}
           showExpandedDetails={true}
-          expandedDetail={{
-            query: {
-              params: {
-                eventId: 'some_id',
-                indexName: '',
-              },
-              panelView: 'eventDetail',
-            },
-          }}
+          expandedDetail={mockExpandedDetail}
         />
       );
 
@@ -192,6 +268,79 @@ describe('unified data table', () => {
         expect(screen.getByTestId('timeline:details-panel:flyout')).toBeVisible();
       });
     });
-    it('should close details flyout', async () => {});
+    it('should close details flyout when close icon is clicked', async () => {
+      const customMockStore = createMockStore();
+      const mockExpandedDetail: ExpandedDetailTimeline = {
+        query: {
+          params: {
+            eventId: 'some_id',
+            indexName: 'security-*',
+          },
+          panelView: 'eventDetail',
+        },
+      };
+
+      customMockStore.dispatch(
+        timelineActions.toggleDetailPanel({
+          id: TimelineId.test,
+          tabType: TimelineTabs.query,
+          ...mockExpandedDetail.query,
+        })
+      );
+
+      render(
+        <TestComponent
+          store={customMockStore}
+          showExpandedDetails={true}
+          expandedDetail={mockExpandedDetail}
+        />
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('euiFlyoutCloseButton')).toBeVisible();
+      });
+
+      fireEvent.click(screen.getByTestId('euiFlyoutCloseButton'));
+      expect(onEventClosedMock).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('pagination', () => {
+    // change the number of items per page
+    it('should change the number of items per page', async () => {
+      const customMockStore = createMockStore();
+      render(<TestComponent store={customMockStore} />);
+      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+      fireEvent.click(screen.getByTestId('tablePaginationPopoverButton'));
+      fireEvent.click(screen.getByTestId(`tablePagination-25-rows`));
+      await waitFor(() => {
+        expect(
+          customMockStore.getState().timeline.timelineById[TimelineId.test]?.itemsPerPage
+        ).toEqual(25);
+      });
+    });
+
+    it('should be able to load more records once user have seen all the records loaded according to sample size', async () => {
+      const customMockStore = createMockStore();
+      customMockStore.dispatch(
+        timelineActions.updateSampleSize({
+          id: TimelineId.test,
+          sampleSize: 10,
+        })
+      );
+      render(
+        <TestComponent
+          store={customMockStore}
+          itemsPerPage={25}
+          events={structuredClone(mockTimelineData).slice(0, 10)}
+        />
+      );
+      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+      expect(screen.getByTestId('dscGridSampleSizeFetchMoreLink')).toBeVisible();
+      fireEvent.click(screen.getByTestId('dscGridSampleSizeFetchMoreLink'));
+      await waitFor(() => {
+        expect(onChangePageMock).toHaveBeenNthCalledWith(1, 1);
+      });
+    });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index 9503ed9e4b6dee..3d0a09450bf0a6 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -222,10 +222,11 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
     );
 
     const onChangeItemsPerPage = useCallback(
-      (itemsChangedPerPage) =>
+      (itemsChangedPerPage) => {
         dispatch(
           timelineActions.updateItemsPerPage({ id: timelineId, itemsPerPage: itemsChangedPerPage })
-        ),
+        );
+      },
       [dispatch, timelineId]
     );
 

From 642109f0dd2e8110f1b068361d6b2e8f4994e8e1 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Mon, 25 Mar 2024 14:22:18 +0100
Subject: [PATCH 47/65] fix: add with data view HOC

---
 .../with_data_view/data_view_error.tsx        | 22 +++++++
 .../components/with_data_view/index.test.tsx  | 57 +++++++++++++++++++
 .../components/with_data_view/index.tsx       | 45 +++++++++++++++
 .../components/with_data_view/translations.ts | 23 ++++++++
 .../body/unified_timeline_body.test.tsx       |  4 +-
 .../timeline/body/unified_timeline_body.tsx   |  6 +-
 .../data_table/index.test.tsx                 | 15 ++---
 .../unified_components/data_table/index.tsx   | 18 ++----
 .../timeline/unified_components/index.tsx     | 15 ++---
 9 files changed, 167 insertions(+), 38 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/public/common/components/with_data_view/data_view_error.tsx
 create mode 100644 x-pack/plugins/security_solution/public/common/components/with_data_view/index.test.tsx
 create mode 100644 x-pack/plugins/security_solution/public/common/components/with_data_view/index.tsx
 create mode 100644 x-pack/plugins/security_solution/public/common/components/with_data_view/translations.ts

diff --git a/x-pack/plugins/security_solution/public/common/components/with_data_view/data_view_error.tsx b/x-pack/plugins/security_solution/public/common/components/with_data_view/data_view_error.tsx
new file mode 100644
index 00000000000000..b2d8af69d9ba7f
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/with_data_view/data_view_error.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiEmptyPrompt } from '@elastic/eui';
+import * as i18n from './translations';
+
+export const DataViewErrorComponent = () => {
+  return (
+    <EuiEmptyPrompt
+      data-test-subj="dataViewErrorComponent"
+      iconType="error"
+      color="danger"
+      title={<h2>{i18n.DATA_VIEW_MANDATORY}</h2>}
+      body={<p>{i18n.DATA_VIEW_MANDATORY_MSG}</p>}
+    />
+  );
+};
diff --git a/x-pack/plugins/security_solution/public/common/components/with_data_view/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/with_data_view/index.test.tsx
new file mode 100644
index 00000000000000..9d7c88041abe77
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/with_data_view/index.test.tsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React, { useEffect } from 'react';
+import type { DataView } from '@kbn/data-views-plugin/common';
+import { render, screen } from '@testing-library/react';
+import { withDataView } from '.';
+import { useGetScopedSourcererDataView } from '../sourcerer/use_get_sourcerer_data_view';
+
+interface TestComponentProps {
+  dataView: DataView;
+}
+
+jest.mock('../sourcerer/use_get_sourcerer_data_view');
+
+const TEST_ID = {
+  DATA_VIEW_ERROR_COMPONENT: 'dataViewErrorComponent',
+  TEST_COMPONENT: 'test_component',
+  FALLBACK_COMPONENT: 'fallback_component',
+};
+
+const FallbackComponent: React.FC = () => <div data-test-subj={TEST_ID.FALLBACK_COMPONENT} />;
+
+const dataViewMockFn = jest.fn();
+
+const TestComponent = (props: TestComponentProps) => {
+  useEffect(() => {
+    dataViewMockFn(props.dataView);
+  }, [props.dataView]);
+  return <div data-test-subj={TEST_ID.TEST_COMPONENT} />;
+};
+
+describe('withDataViewId', () => {
+  beforeEach(() => {
+    (useGetScopedSourcererDataView as jest.Mock).mockReturnValue(undefined);
+  });
+  it('should render default error components when there is not fallback provided and dataViewId is null', async () => {
+    const RenderedComponent = withDataView(TestComponent);
+    render(<RenderedComponent />);
+    expect(screen.getByTestId(TEST_ID.DATA_VIEW_ERROR_COMPONENT)).toBeVisible();
+  });
+  it('should render provided fallback and dataViewId is null', async () => {
+    const RenderedComponent = withDataView(TestComponent, <FallbackComponent />);
+    render(<RenderedComponent />);
+    expect(screen.getByTestId(TEST_ID.FALLBACK_COMPONENT)).toBeVisible();
+  });
+  it('should render provided component when dataViewId is not null', async () => {
+    (useGetScopedSourcererDataView as jest.Mock).mockReturnValue({ id: 'test' });
+    const RenderedComponent = withDataView(TestComponent);
+    render(<RenderedComponent />);
+    expect(screen.getByTestId(TEST_ID.TEST_COMPONENT)).toBeVisible();
+    expect(dataViewMockFn).toHaveBeenCalledWith({ id: 'test' });
+  });
+});
diff --git a/x-pack/plugins/security_solution/public/common/components/with_data_view/index.tsx b/x-pack/plugins/security_solution/public/common/components/with_data_view/index.tsx
new file mode 100644
index 00000000000000..3f157332482fcf
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/with_data_view/index.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import type { ComponentType } from 'react';
+import type { ReactElement } from 'react-markdown';
+import type { DataView } from '@kbn/data-views-plugin/common';
+import { DataViewErrorComponent } from './data_view_error';
+import { useGetScopedSourcererDataView } from '../sourcerer/use_get_sourcerer_data_view';
+import { SourcererScopeName } from '../../store/sourcerer/model';
+
+type OmitDataView<T> = T extends { dataView: DataView } ? Omit<T, 'dataView'> : T;
+
+interface WithDataViewArg {
+  dataView: DataView;
+}
+
+/**
+ *
+ * This HOC makes sure the dataView is populated
+ * otherwise it will render the provided/default Error component
+ *
+ * */
+export const withDataView = <P extends WithDataViewArg>(
+  Component: ComponentType<P & WithDataViewArg>,
+  fallback?: ReactElement
+) => {
+  const ComponentWithDataView = (props: OmitDataView<P>) => {
+    const dataView = useGetScopedSourcererDataView({
+      sourcererScope: SourcererScopeName.timeline,
+    });
+
+    if (!dataView) {
+      return fallback ?? <DataViewErrorComponent />;
+    }
+
+    return <Component {...(props as unknown as P)} dataView={dataView} />;
+  };
+
+  return ComponentWithDataView;
+};
diff --git a/x-pack/plugins/security_solution/public/common/components/with_data_view/translations.ts b/x-pack/plugins/security_solution/public/common/components/with_data_view/translations.ts
new file mode 100644
index 00000000000000..df1784874a9261
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/components/with_data_view/translations.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const DATA_VIEW_MANDATORY = i18n.translate(
+  'xpack.securitySolution.components.dataViewMandatory',
+  {
+    defaultMessage: 'DataView is mandatory but was not provided',
+  }
+);
+
+export const DATA_VIEW_MANDATORY_MSG = i18n.translate(
+  'xpack.securitySolution.components.dataViewMandatoryDetailMessage',
+  {
+    defaultMessage:
+      'It looks like DataView is not selected properly. Please select the appropriate DataView and index patterns',
+  }
+);
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.test.tsx
index 44f79b95351147..3b1756dde8b83e 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.test.tsx
@@ -8,7 +8,7 @@
 import { TimelineTabs } from '../../../../../common/types';
 import { DataLoadingState } from '@kbn/unified-data-table';
 import React from 'react';
-import { UnifiedTimelineComponent } from '../unified_components';
+import { UnifiedTimeline } from '../unified_components';
 import { defaultUdtHeaders } from '../unified_components/default_headers';
 import type { UnifiedTimelineBodyProps } from './unified_timeline_body';
 import { UnifiedTimelineBody } from './unified_timeline_body';
@@ -54,7 +54,7 @@ const MockUnifiedTimelineComponent = jest.fn(() => <div />);
 
 describe('UnifiedTimelineBody', () => {
   beforeEach(() => {
-    (UnifiedTimelineComponent as jest.Mock).mockImplementation(MockUnifiedTimelineComponent);
+    (UnifiedTimeline as jest.Mock).mockImplementation(MockUnifiedTimelineComponent);
   });
   it('should pass correct page rows', () => {
     const { rerender } = renderTestComponents();
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx
index 2e8e05531e09f3..1a131871dc4fe7 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx
@@ -10,11 +10,11 @@ import React, { useEffect, useState, useMemo } from 'react';
 import { RootDragDropProvider } from '@kbn/dom-drag-drop';
 import { isEmpty } from 'lodash';
 import { StyledTableFlexGroup, StyledTableFlexItem } from '../unified_components/styles';
-import { UnifiedTimelineComponent } from '../unified_components';
+import { UnifiedTimeline } from '../unified_components';
 import { defaultUdtHeaders } from '../unified_components/default_headers';
 import type { PaginationInputPaginated, TimelineItem } from '../../../../../common/search_strategy';
 
-export interface UnifiedTimelineBodyProps extends ComponentProps<typeof UnifiedTimelineComponent> {
+export interface UnifiedTimelineBodyProps extends ComponentProps<typeof UnifiedTimeline> {
   header: ReactElement;
   pageInfo: Pick<PaginationInputPaginated, 'activePage' | 'querySize'>;
 }
@@ -65,7 +65,7 @@ export const UnifiedTimelineBody = (props: UnifiedTimelineBodyProps) => {
       <StyledTableFlexItem grow={false}>{header}</StyledTableFlexItem>
       <StyledTableFlexItem className="unifiedTimelineBody" data-test-subj="unifiedTimelineBody">
         <RootDragDropProvider>
-          <UnifiedTimelineComponent
+          <UnifiedTimeline
             columns={columnsHeader}
             rowRenderers={rowRenderers}
             timelineId={timelineId}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
index 7b5140f7050b56..cc458979dcce14 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
@@ -7,14 +7,13 @@
 
 import { createMockStore, mockTimelineData, TestProviders } from '../../../../../common/mock';
 import React from 'react';
-import { TimelineDataTableComponent } from '.';
+import { TimelineDataTable } from '.';
 import { defaultUdtHeaders } from '../default_headers';
 import { createStubDataView } from '@kbn/data-views-plugin/common/data_view.stub';
 import { TimelineId, TimelineTabs } from '../../../../../../common/types';
 import { DataLoadingState } from '@kbn/unified-data-table';
 import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import { useSourcererDataView } from '../../../../../common/containers/sourcerer';
-import { mockBrowserFields } from '../../../../../common/containers/source/mock';
 import type { ComponentProps } from 'react';
 import { getColumnHeaders } from '../../body/column_headers/helpers';
 import { mockSourcererScope } from '../../../../../common/containers/sourcerer/mocks';
@@ -35,7 +34,7 @@ const initialEnrichedColumns = getColumnHeaders(
   mockSourcererScope.browserFields
 );
 
-type TestComponentProps = Partial<ComponentProps<typeof TimelineDataTableComponent>> & {
+type TestComponentProps = Partial<ComponentProps<typeof TimelineDataTable>> & {
   store?: ReturnType<typeof createMockStore>;
 };
 
@@ -44,9 +43,8 @@ const TestComponent = (props: TestComponentProps) => {
   useSourcererDataView();
   return (
     <TestProviders store={store}>
-      <TimelineDataTableComponent
+      <TimelineDataTable
         columns={initialEnrichedColumns}
-        dataView={mockDataView}
         activeTab={TimelineTabs.query}
         timelineId={TimelineId.test}
         itemsPerPage={50}
@@ -72,11 +70,8 @@ const TestComponent = (props: TestComponentProps) => {
 };
 
 describe('unified data table', () => {
-  beforeAll(() => {
-    (useSourcererDataView as jest.Mock).mockReturnValue({
-      browserFields: mockBrowserFields,
-      runtimeMappings: {},
-    });
+  beforeEach(() => {
+    (useSourcererDataView as jest.Mock).mockReturnValue(mockSourcererScope);
   });
 
   it('should display unified data table', async () => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index 3d0a09450bf0a6..b87c312ed91ec1 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -15,6 +15,7 @@ import type {
 } from '@kbn/unified-data-table';
 import { UnifiedDataTable, DataLoadingState } from '@kbn/unified-data-table';
 import type { DataView } from '@kbn/data-views-plugin/public';
+import { withDataView } from '../../../../../common/components/with_data_view';
 import { StatefulEventContext } from '../../../../../common/components/events_viewer/stateful_event_context';
 import type { ExpandedDetailTimeline, ExpandedDetailType } from '../../../../../../common/types';
 import type { TimelineItem } from '../../../../../../common/search_strategy';
@@ -38,7 +39,6 @@ import ToolbarAdditionalControls from './toolbar_additional_controls';
 import { StyledTimelineUnifiedDataTable, StyledEuiProgress } from '../styles';
 import { timelineDefaults } from '../../../../store/defaults';
 import { timelineActions } from '../../../../store';
-import { useGetScopedSourcererDataView } from '../../../../../common/components/sourcerer/use_get_sourcerer_data_view';
 import { transformTimelineItemToUnifiedRows } from '../utils';
 
 export const SAMPLE_SIZE_SETTING = 500;
@@ -68,9 +68,8 @@ interface DataTableProps extends CommonDataTableProps {
   dataView: DataView;
 }
 
-/* eslint-disable react/display-name */
 export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
-  ({
+  function TimelineDataTableMemo({
     columns,
     dataView,
     activeTab,
@@ -93,7 +92,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
     onSetColumns,
     onSort,
     onFilter,
-  }) => {
+  }) {
     const dispatch = useDispatch();
 
     // Store context in state rather than creating object in provider value={} to prevent re-renders caused by a new object being created
@@ -108,14 +107,11 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
       services: {
         uiSettings,
         fieldFormats,
-        dataViews,
         storage,
         dataViewFieldEditor,
         notifications: { toasts: toastsService },
-        application: { capabilities },
         theme,
         data: dataPluginContract,
-        timelineFilterManager,
       },
     } = useKibana();
 
@@ -357,13 +353,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
   }
 );
 
-export const TimelineDataTable: React.FC<CommonDataTableProps> = memo((props) => {
-  const dataView = useGetScopedSourcererDataView({ sourcererScope: SourcererScopeName.timeline });
-  if (!dataView) {
-    throw new Error('DataView must be defined');
-  }
-  return <TimelineDataTableComponent dataView={dataView} {...props} />;
-});
+export const TimelineDataTable = withDataView<DataTableProps>(TimelineDataTableComponent);
 
 // eslint-disable-next-line import/no-default-export
 export { TimelineDataTable as default };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
index f0b7ce3c705115..ad8074d166b40a 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
@@ -9,7 +9,7 @@ import React, { useMemo, useCallback, useState, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { generateFilters } from '@kbn/data-plugin/public';
-import type { DataViewField } from '@kbn/data-plugin/common';
+import type { DataView, DataViewField } from '@kbn/data-plugin/common';
 import type { SortOrder } from '@kbn/saved-search-plugin/public';
 import type { DataLoadingState } from '@kbn/unified-data-table';
 import { useColumns } from '@kbn/unified-data-table';
@@ -25,7 +25,7 @@ import { UnifiedFieldListSidebarContainer } from '@kbn/unified-field-list';
 import type { EuiTheme } from '@kbn/react-kibana-context-styled';
 import type { CoreStart } from '@kbn/core-lifecycle-browser';
 import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
-import { useGetScopedSourcererDataView } from '../../../../common/components/sourcerer/use_get_sourcerer_data_view';
+import { withDataView } from '../../../../common/components/with_data_view';
 import { EventDetailsWidthProvider } from '../../../../common/components/events_viewer/event_details_width_context';
 import type { ExpandedDetailTimeline } from '../../../../../common/types';
 import type { TimelineItem } from '../../../../../common/search_strategy';
@@ -40,7 +40,6 @@ import type {
   TimelineTabs,
 } from '../../../../../common/types/timeline';
 import type { inputsModel } from '../../../../common/store';
-import { SourcererScopeName } from '../../../../common/store/sourcerer/model';
 import { getColumnHeader } from '../body/column_headers/helpers';
 import { StyledPageContentWrapper, StyledMainEuiPanel, StyledSplitFlexItem } from './styles';
 import { DRAG_DROP_FIELD } from './data_table/translations';
@@ -114,9 +113,10 @@ interface Props {
   dataLoadingState: DataLoadingState;
   updatedAt: number;
   isTextBasedQuery?: boolean;
+  dataView: DataView;
 }
 
-export const UnifiedTimelineComponent: React.FC<Props> = ({
+const UnifiedTimelineComponent: React.FC<Props> = ({
   columns,
   activeTab,
   timelineId,
@@ -134,6 +134,7 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
   onChangePage,
   updatedAt,
   isTextBasedQuery,
+  dataView,
 }) => {
   const dispatch = useDispatch();
   const unifiedFieldListContainerRef = useRef<UnifiedFieldListSidebarContainerApi>(null);
@@ -188,10 +189,6 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
     return columns.map((c) => c.id);
   }, [columns]);
 
-  const dataView = useGetScopedSourcererDataView({
-    sourcererScope: SourcererScopeName.timeline,
-  });
-
   const sortingColumns = useMemo(() => {
     return (
       (sort?.map((sortingCol) => [
@@ -414,6 +411,6 @@ export const UnifiedTimelineComponent: React.FC<Props> = ({
   );
 };
 
-export const UnifiedTimeline = React.memo(UnifiedTimelineComponent);
+export const UnifiedTimeline = withDataView<Props>(React.memo(UnifiedTimelineComponent));
 // eslint-disable-next-line import/no-default-export
 export { UnifiedTimeline as default };

From 077c0c1a2deafcb8c49e1867b679b7a6ebcbeda2 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Tue, 26 Mar 2024 06:10:25 +0100
Subject: [PATCH 48/65] tests: open_timeline

---
 .../components/open_timeline/helpers.test.ts  | 165 ++++++++++++++++++
 .../components/open_timeline/helpers.ts       |   1 +
 2 files changed, 166 insertions(+)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts
index 3325100812f404..29fb4998597cd6 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts
@@ -47,6 +47,7 @@ import {
   mockTemplate as mockSelectedTemplate,
 } from './__mocks__';
 import { resolveTimeline } from '../../containers/api';
+import { defaultUdtHeaders } from '../timeline/unified_components/default_headers';
 
 jest.mock('../../../common/store/inputs/actions');
 jest.mock('../../../common/utils/normalize_time_range');
@@ -488,6 +489,60 @@ describe('helpers', () => {
         title: 'Awesome Timeline',
       });
     });
+
+    test('should produce correct model if unifiedComponentsInTimelineEnabled is true', () => {
+      const timeline = {
+        savedObjectId: 'savedObject-1',
+        title: 'Awesome Timeline',
+        version: '1',
+        status: TimelineStatus.active,
+        timelineType: TimelineType.default,
+      };
+
+      const newTimeline = defaultTimelineToTimelineModel(
+        timeline,
+        false,
+        TimelineType.default,
+        true
+      );
+      expect(newTimeline).toEqual({
+        ...defaultTimeline,
+        dateRange: { end: '2020-07-08T08:20:18.966Z', start: '2020-07-07T08:20:18.966Z' },
+        status: TimelineStatus.active,
+        title: 'Awesome Timeline',
+        timelineType: TimelineType.default,
+        defaultColumns: defaultUdtHeaders,
+        columns: defaultUdtHeaders,
+      });
+    });
+
+    test('should produce correct model if unifiedComponentsInTimelineEnabled is true and custom set of columns is passed', () => {
+      const customColumns = defaultUdtHeaders.slice(0, 2);
+      const timeline = {
+        savedObjectId: 'savedObject-1',
+        title: 'Awesome Timeline',
+        version: '1',
+        status: TimelineStatus.active,
+        timelineType: TimelineType.default,
+        columns: customColumns,
+      };
+
+      const newTimeline = defaultTimelineToTimelineModel(
+        timeline,
+        false,
+        TimelineType.default,
+        true
+      );
+      expect(newTimeline).toEqual({
+        ...defaultTimeline,
+        dateRange: { end: '2020-07-08T08:20:18.966Z', start: '2020-07-07T08:20:18.966Z' },
+        status: TimelineStatus.active,
+        title: 'Awesome Timeline',
+        timelineType: TimelineType.default,
+        defaultColumns: defaultUdtHeaders,
+        columns: customColumns,
+      });
+    });
   });
 
   describe('queryTimelineById', () => {
@@ -711,6 +766,116 @@ describe('helpers', () => {
         });
       });
     });
+    describe('open a timeline when unifiedComponentsInTimelineEnabled is true', () => {
+      const updateIsLoading = jest.fn();
+      const untitledTimeline = { ...mockSelectedTimeline, title: '' };
+      const onOpenTimeline = jest.fn();
+
+      const updateTimelineHandler = jest.fn();
+
+      const updateTimeline = jest.fn(() => updateTimelineHandler);
+
+      afterEach(() => {
+        jest.clearAllMocks();
+      });
+
+      it('should update timeline correctly when timeline is untitled', async () => {
+        const args: QueryTimelineById<{}> = {
+          duplicate: false,
+          graphEventId: '',
+          timelineId: undefined,
+          timelineType: TimelineType.default,
+          onOpenTimeline,
+          openTimeline: true,
+          updateIsLoading,
+          updateTimeline,
+          unifiedComponentsInTimelineEnabled: true,
+        };
+        (resolveTimeline as jest.Mock).mockResolvedValue(untitledTimeline);
+        queryTimelineById<{}>(args as unknown as QueryTimelineById<{}>);
+
+        expect(updateIsLoading).toHaveBeenCalledWith({
+          id: TimelineId.active,
+          isLoading: true,
+        });
+
+        expect(updateTimeline).toHaveBeenNthCalledWith(
+          1,
+          expect.objectContaining({
+            id: TimelineId.active,
+            timeline: expect.objectContaining({
+              columns: defaultUdtHeaders,
+            }),
+          })
+        );
+        expect(updateIsLoading).toHaveBeenCalledWith({
+          id: TimelineId.active,
+          isLoading: false,
+        });
+      });
+
+      it('should update timeline correctly when timeline is already saved and onOpenTimeline is not provided', async () => {
+        const args: QueryTimelineById<{}> = {
+          duplicate: false,
+          graphEventId: '',
+          timelineId: TimelineId.active,
+          timelineType: TimelineType.default,
+          onOpenTimeline: undefined,
+          openTimeline: true,
+          updateIsLoading,
+          updateTimeline,
+          unifiedComponentsInTimelineEnabled: true,
+        };
+
+        (resolveTimeline as jest.Mock).mockResolvedValue(mockSelectedTimeline);
+
+        await queryTimelineById<{}>(args as unknown as QueryTimelineById<{}>);
+
+        expect(updateTimeline).toHaveBeenNthCalledWith(
+          1,
+          expect.objectContaining({
+            timeline: expect.objectContaining({
+              columns: mockSelectedTimeline.data.timeline.columns.map((col) => ({
+                columnHeaderType: col.columnHeaderType,
+                id: col.id,
+                initialWidth: defaultUdtHeaders.find((defaultCol) => col.id === defaultCol.id)
+                  ?.initialWidth,
+              })),
+            }),
+          })
+        );
+      });
+
+      it('should update timeline correctly when timeline is already saved and onOpenTimeline IS provided', async () => {
+        const args: QueryTimelineById<{}> = {
+          duplicate: false,
+          graphEventId: '',
+          timelineId: TimelineId.active,
+          timelineType: TimelineType.default,
+          onOpenTimeline,
+          openTimeline: true,
+          updateIsLoading,
+          updateTimeline,
+          unifiedComponentsInTimelineEnabled: true,
+        };
+
+        (resolveTimeline as jest.Mock).mockResolvedValue(mockSelectedTimeline);
+
+        await queryTimelineById<{}>(args as unknown as QueryTimelineById<{}>);
+
+        expect(onOpenTimeline).toHaveBeenNthCalledWith(
+          1,
+          expect.objectContaining({
+            columns: mockSelectedTimeline.data.timeline.columns.map((col) => ({
+              columnHeaderType: col.columnHeaderType,
+              id: col.id,
+              initialWidth: defaultUdtHeaders.find((defaultCol) => col.id === defaultCol.id)
+                ?.initialWidth,
+            })),
+          })
+        );
+      });
+    });
   });
 
   describe('omitTypenameInTimeline', () => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
index 1aef961279aa42..ab9a00f3420e3d 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
@@ -400,6 +400,7 @@ export const queryTimelineById = <TCache>({
             from: getOr(null, 'dateRange.start', timeline),
             to: getOr(null, 'dateRange.end', timeline),
           });
+
           updateTimeline({
             duplicate,
             from,

From c0934bd0b8e9f3c065de4ca98216b04acd096ab4 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Tue, 26 Mar 2024 06:31:47 +0100
Subject: [PATCH 49/65] fix: revert duplicate timeline change

---
 .../components/open_timeline/helpers.test.ts  | 19 ++++++++++--
 .../components/open_timeline/helpers.ts       | 29 ++++++++++++-------
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts
index 29fb4998597cd6..3ffcd4c4fb87a2 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts
@@ -937,11 +937,11 @@ describe('helpers', () => {
     });
 
     test('it invokes add timeline dispatch', () => {
-      timelineDispatch(defaultArgs)();
+      timelineDispatch({ ...defaultArgs, duplicate: false })();
 
       expect(dispatchAddTimeline).toHaveBeenCalledWith({
         id: TimelineId.active,
-        savedTimeline: true,
+        savedTimeline: false,
         timeline: {
           ...mockTimelineModel,
           version: '1',
@@ -1065,5 +1065,20 @@ describe('helpers', () => {
         noteId: 'uuidv4()',
       });
     });
+
+    test('should create a new timeline with empty updated, changed and version ', () => {
+      timelineDispatch(defaultArgs)();
+
+      expect(dispatchAddTimeline).toHaveBeenNthCalledWith(1, {
+        id: TimelineId.active,
+        savedTimeline: true,
+        timeline: {
+          ...mockTimelineModel,
+          version: null,
+          updated: undefined,
+          changed: undefined,
+        },
+      });
+    });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
index ab9a00f3420e3d..365110c2aacc0f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
@@ -454,6 +454,10 @@ export const dispatchUpdateTimeline =
     preventSettingQuery,
   }: UpdateTimeline): (() => void) =>
   () => {
+    let _timeline = timeline;
+    if (duplicate) {
+      _timeline = { ...timeline, updated: undefined, changed: undefined, version: null };
+    }
     if (!isEmpty(timeline.indexNames)) {
       dispatch(
         sourcererActions.setSelectedDataView({
@@ -464,8 +468,8 @@ export const dispatchUpdateTimeline =
       );
     }
     if (
-      timeline.status === TimelineStatus.immutable &&
-      timeline.timelineType === TimelineType.template
+      _timeline.status === TimelineStatus.immutable &&
+      _timeline.timelineType === TimelineType.template
     ) {
       dispatch(
         dispatchSetRelativeRangeDatePicker({
@@ -480,24 +484,29 @@ export const dispatchUpdateTimeline =
       dispatch(dispatchSetTimelineRangeDatePicker({ from, to }));
     }
     dispatch(
-      dispatchAddTimeline({ id, timeline, resolveTimelineConfig, savedTimeline: duplicate })
+      dispatchAddTimeline({
+        id,
+        timeline: _timeline,
+        resolveTimelineConfig,
+        savedTimeline: duplicate,
+      })
     );
     if (
       !preventSettingQuery &&
-      timeline.kqlQuery != null &&
-      timeline.kqlQuery.filterQuery != null &&
-      timeline.kqlQuery.filterQuery.kuery != null &&
-      timeline.kqlQuery.filterQuery.kuery.expression !== ''
+      _timeline.kqlQuery != null &&
+      _timeline.kqlQuery.filterQuery != null &&
+      _timeline.kqlQuery.filterQuery.kuery != null &&
+      _timeline.kqlQuery.filterQuery.kuery.expression !== ''
     ) {
       dispatch(
         dispatchApplyKqlFilterQuery({
           id,
           filterQuery: {
             kuery: {
-              kind: timeline.kqlQuery.filterQuery.kuery.kind ?? 'kuery',
-              expression: timeline.kqlQuery.filterQuery.kuery.expression || '',
+              kind: _timeline.kqlQuery.filterQuery.kuery.kind ?? 'kuery',
+              expression: _timeline.kqlQuery.filterQuery.kuery.expression || '',
             },
-            serializedQuery: timeline.kqlQuery.filterQuery.serializedQuery || '',
+            serializedQuery: _timeline.kqlQuery.filterQuery.serializedQuery || '',
           },
         })
       );

From 557344da018ff194938c72fcab39726ba7a67e45 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Tue, 26 Mar 2024 08:35:42 +0100
Subject: [PATCH 50/65] test: cypress

---
 .../body/renderers/formatted_field_udt.tsx    |  1 -
 .../unified_components/data_table/index.tsx   |  3 +-
 .../unified_components/query_tab.cy.ts        | 22 +++++--------
 .../cypress/tasks/unified_timeline.ts         | 32 +++++++++++++++++++
 4 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
index 8ca6a7c9d5cbac..0fcf4caae750bf 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
@@ -9,7 +9,6 @@ import type { EuiDataGridCellValueElementProps } from '@elastic/eui';
 import React from 'react';
 
 import type { ColumnHeaderOptions, TimelineItem } from '@kbn/timelines-plugin/common';
-import {} from '@kbn/timelines-plugin/common';
 import type { DataTableRecord } from '@kbn/discover-utils/types';
 import { DefaultCellRenderer } from '../../cell_rendering/default_cell_renderer';
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index b87c312ed91ec1..acb083bf95cb0b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -15,6 +15,7 @@ import type {
 } from '@kbn/unified-data-table';
 import { UnifiedDataTable, DataLoadingState } from '@kbn/unified-data-table';
 import type { DataView } from '@kbn/data-views-plugin/public';
+import { EmptyComponent } from '../../../../../common/lib/cell_actions/helpers';
 import { withDataView } from '../../../../../common/components/with_data_view';
 import { StatefulEventContext } from '../../../../../common/components/events_viewer/stateful_event_context';
 import type { ExpandedDetailTimeline, ExpandedDetailType } from '../../../../../../common/types';
@@ -324,7 +325,7 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
             services={dataGridServices}
             visibleCellActions={3}
             externalCustomRenderers={customColumnRenderers}
-            renderDocumentView={() => <></>}
+            renderDocumentView={EmptyComponent}
             rowsPerPageOptions={itemsPerPageOptions}
             showFullScreenButton={false}
             useNewFieldsApi={true}
diff --git a/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts b/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
index 2507737d0a1b54..9f96386a85c7f9 100644
--- a/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
+++ b/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
@@ -5,18 +5,17 @@
  * 2.0.
  */
 
-import { CELL_ADD_TO_TIMELINE_BUTTON } from '../../../../screens/alerts';
 import {
+  closeTimelineFlyout,
   openEventDetailsFlyout,
   openHostDetailsFlyout,
   openUserDetailsFlyout,
+  performCellActionAddToTimeline,
+  performCellActionFilterIn,
 } from '../../../../tasks/unified_timeline';
 import {
-  CELL_FILTER_IN_BUTTON,
   GET_UNIFIED_DATA_GRID_CELL,
   GET_UNIFIED_DATA_GRID_CELL_HEADER,
-  TIMELINE_DETAILS_FLYOUT,
-  TIMELINE_DETAILS_FLYOUT_CLOSE_BTN,
 } from '../../../../screens/unified_timeline';
 import {
   TIMELINE_DATA_PROVIDERS_CONTAINER,
@@ -64,16 +63,14 @@ describe(
       it('should add to timeline successfully', () => {
         cy.get(GET_UNIFIED_DATA_GRID_CELL('host.name', 0)).then(($el) => {
           const hostName = $el.text();
-          cy.get(GET_UNIFIED_DATA_GRID_CELL('host.name', 0)).realHover();
-          cy.get(CELL_ADD_TO_TIMELINE_BUTTON).click();
+          performCellActionAddToTimeline('host.name', 0);
           cy.get(TIMELINE_DATA_PROVIDERS_CONTAINER).contains(`host.name: "${hostName}"`);
         });
       });
       it('should filter In successfully', () => {
         cy.get(GET_UNIFIED_DATA_GRID_CELL('user.name', 0)).then(($el) => {
           const hostName = $el.text();
-          cy.get(GET_UNIFIED_DATA_GRID_CELL('user.name', 0)).realHover();
-          cy.get(CELL_FILTER_IN_BUTTON).click();
+          performCellActionFilterIn('user.name', 0);
           cy.get(TIMELINE_FILTER_BADGE).should('have.lengthOf', 1);
           cy.get(TIMELINE_FILTER_BADGE).eq(0).should('have.text', `user.name: ${hostName}`);
         });
@@ -84,16 +81,13 @@ describe(
       it('should be able to open/close details details/host/user flyout', () => {
         cy.log('Event Details Flyout');
         openEventDetailsFlyout(0);
-        cy.get(TIMELINE_DETAILS_FLYOUT_CLOSE_BTN).click();
-        cy.get(TIMELINE_DETAILS_FLYOUT).should('not.exist');
+        closeTimelineFlyout();
         cy.log('Host Details Flyout');
         openHostDetailsFlyout(0);
-        cy.get(TIMELINE_DETAILS_FLYOUT_CLOSE_BTN).click();
-        cy.get(TIMELINE_DETAILS_FLYOUT).should('not.exist');
+        closeTimelineFlyout();
         cy.log('User Details Flyout');
         openUserDetailsFlyout(0);
-        cy.get(TIMELINE_DETAILS_FLYOUT_CLOSE_BTN).click();
-        cy.get(TIMELINE_DETAILS_FLYOUT).should('not.exist');
+        closeTimelineFlyout();
       });
     });
   }
diff --git a/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts b/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts
index d1a79481314350..8d4bed4a574b25 100644
--- a/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts
+++ b/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts
@@ -6,9 +6,14 @@
  */
 
 import {
+  CELL_ADD_TO_TIMELINE_BUTTON,
+  CELL_FILTER_IN_BUTTON,
+  GET_UNIFIED_DATA_GRID_CELL,
+  GET_UNIFIED_DATA_GRID_CELL_HEADER,
   HOST_DETAILS_FLYOUT,
   TIMELINE_DETAILS_FLYOUT,
   TIMELINE_DETAILS_FLYOUT_BTN,
+  TIMELINE_DETAILS_FLYOUT_CLOSE_BTN,
   USER_DETAILS_FLYOUT,
 } from '../screens/unified_timeline';
 
@@ -26,3 +31,30 @@ export const openUserDetailsFlyout = (rowIndex: number) => {
   cy.get(USER_DETAILS_FLYOUT).eq(rowIndex).click();
   cy.get(TIMELINE_DETAILS_FLYOUT).should('be.visible');
 };
+
+export const hoverActionUnifiedCell = (columnName: string, rowIndex: number) => {
+  getUnifiedTableHeaderColumnCell(columnName, rowIndex).realHover();
+};
+
+export const getUnifiedTableHeaderColumn = (columnName: string) => {
+  return cy.get(GET_UNIFIED_DATA_GRID_CELL_HEADER(columnName));
+};
+
+export const getUnifiedTableHeaderColumnCell = (columnName: string, rowIndex: number) => {
+  return cy.get(GET_UNIFIED_DATA_GRID_CELL(columnName, rowIndex));
+};
+
+export const performCellActionAddToTimeline = (columnName: string, rowIndex: number) => {
+  hoverActionUnifiedCell(columnName, rowIndex);
+  cy.get(CELL_ADD_TO_TIMELINE_BUTTON).click();
+};
+
+export const performCellActionFilterIn = (columnName: string, rowIndex: number) => {
+  hoverActionUnifiedCell(columnName, rowIndex);
+  cy.get(CELL_FILTER_IN_BUTTON).click();
+};
+
+export const closeTimelineFlyout = () => {
+  cy.get(TIMELINE_DETAILS_FLYOUT_CLOSE_BTN).click();
+  cy.get(TIMELINE_DETAILS_FLYOUT).should('not.exist');
+};

From d7af0419cd085ec4f23219cb376786ec4fbe4d5f Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Tue, 26 Mar 2024 10:25:17 +0100
Subject: [PATCH 51/65] fix: more tests + cypress

---
 .../edit_data_provider/helpers.test.tsx       |  1 +
 .../__snapshots__/index.test.tsx.snap         | 15 ++++++++++
 .../unified_components/query_tab.cy.ts        | 29 +------------------
 .../cypress/tasks/unified_timeline.ts         | 16 ----------
 4 files changed, 17 insertions(+), 44 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/edit_data_provider/helpers.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/edit_data_provider/helpers.test.tsx
index 70cdeced764ca4..8dec5280b669cd 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/edit_data_provider/helpers.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/edit_data_provider/helpers.test.tsx
@@ -118,6 +118,7 @@ describe('helpers', () => {
             },
           ],
         },
+        { label: 'process', options: [{ label: 'process.args' }] },
         { label: 'source', options: [{ label: 'source.ip' }, { label: 'source.port' }] },
         {
           label: 'user',
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap
index 12e78df1e49ec0..14a17ec0119232 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap
@@ -648,6 +648,21 @@ exports[`ColumnHeaders rendering renders correctly against snapshot 1`] = `
           },
         },
       },
+      "process": Object {
+        "fields": Object {
+          "process.args": Object {
+            "aggregatable": true,
+            "esTypes": Array [
+              "keyword",
+            ],
+            "format": "",
+            "name": "process.args",
+            "readFromDocValues": true,
+            "searchable": true,
+            "type": "string",
+          },
+        },
+      },
       "source": Object {
         "fields": Object {
           "source.ip": Object {
diff --git a/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts b/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
index 9f96386a85c7f9..8cef9077aaa190 100644
--- a/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
+++ b/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
@@ -10,17 +10,8 @@ import {
   openEventDetailsFlyout,
   openHostDetailsFlyout,
   openUserDetailsFlyout,
-  performCellActionAddToTimeline,
-  performCellActionFilterIn,
 } from '../../../../tasks/unified_timeline';
-import {
-  GET_UNIFIED_DATA_GRID_CELL,
-  GET_UNIFIED_DATA_GRID_CELL_HEADER,
-} from '../../../../screens/unified_timeline';
-import {
-  TIMELINE_DATA_PROVIDERS_CONTAINER,
-  TIMELINE_FILTER_BADGE,
-} from '../../../../screens/timeline';
+import { GET_UNIFIED_DATA_GRID_CELL_HEADER } from '../../../../screens/unified_timeline';
 import { GET_DISCOVER_DATA_GRID_CELL_HEADER } from '../../../../screens/discover';
 import { addFieldToTable, removeFieldFromTable } from '../../../../tasks/discover';
 import { login } from '../../../../tasks/login';
@@ -59,24 +50,6 @@ describe(
       cy.get(GET_DISCOVER_DATA_GRID_CELL_HEADER('agent.type')).should('not.exist');
     });
 
-    context('hover actions', () => {
-      it('should add to timeline successfully', () => {
-        cy.get(GET_UNIFIED_DATA_GRID_CELL('host.name', 0)).then(($el) => {
-          const hostName = $el.text();
-          performCellActionAddToTimeline('host.name', 0);
-          cy.get(TIMELINE_DATA_PROVIDERS_CONTAINER).contains(`host.name: "${hostName}"`);
-        });
-      });
-      it('should filter In successfully', () => {
-        cy.get(GET_UNIFIED_DATA_GRID_CELL('user.name', 0)).then(($el) => {
-          const hostName = $el.text();
-          performCellActionFilterIn('user.name', 0);
-          cy.get(TIMELINE_FILTER_BADGE).should('have.lengthOf', 1);
-          cy.get(TIMELINE_FILTER_BADGE).eq(0).should('have.text', `user.name: ${hostName}`);
-        });
-      });
-    });
-
     context('flyout', () => {
       it('should be able to open/close details details/host/user flyout', () => {
         cy.log('Event Details Flyout');
diff --git a/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts b/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts
index 8d4bed4a574b25..1004f75fa854ab 100644
--- a/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts
+++ b/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts
@@ -6,8 +6,6 @@
  */
 
 import {
-  CELL_ADD_TO_TIMELINE_BUTTON,
-  CELL_FILTER_IN_BUTTON,
   GET_UNIFIED_DATA_GRID_CELL,
   GET_UNIFIED_DATA_GRID_CELL_HEADER,
   HOST_DETAILS_FLYOUT,
@@ -32,10 +30,6 @@ export const openUserDetailsFlyout = (rowIndex: number) => {
   cy.get(TIMELINE_DETAILS_FLYOUT).should('be.visible');
 };
 
-export const hoverActionUnifiedCell = (columnName: string, rowIndex: number) => {
-  getUnifiedTableHeaderColumnCell(columnName, rowIndex).realHover();
-};
-
 export const getUnifiedTableHeaderColumn = (columnName: string) => {
   return cy.get(GET_UNIFIED_DATA_GRID_CELL_HEADER(columnName));
 };
@@ -44,16 +38,6 @@ export const getUnifiedTableHeaderColumnCell = (columnName: string, rowIndex: nu
   return cy.get(GET_UNIFIED_DATA_GRID_CELL(columnName, rowIndex));
 };
 
-export const performCellActionAddToTimeline = (columnName: string, rowIndex: number) => {
-  hoverActionUnifiedCell(columnName, rowIndex);
-  cy.get(CELL_ADD_TO_TIMELINE_BUTTON).click();
-};
-
-export const performCellActionFilterIn = (columnName: string, rowIndex: number) => {
-  hoverActionUnifiedCell(columnName, rowIndex);
-  cy.get(CELL_FILTER_IN_BUTTON).click();
-};
-
 export const closeTimelineFlyout = () => {
   cy.get(TIMELINE_DETAILS_FLYOUT_CLOSE_BTN).click();
   cy.get(TIMELINE_DETAILS_FLYOUT).should('not.exist');

From c421fa33ddec4da7d7bb4146d65d68a21bfd0f7a Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Tue, 26 Mar 2024 11:04:08 +0100
Subject: [PATCH 52/65] fix: Issue with merge -> main

---
 .../shared/layout/page_template.test.tsx      | 262 ++++++++
 .../actions/save_dashboard_modal.tsx          | 282 ++++++++
 .../components/events_chart_panel.tsx         | 248 +++++++
 .../slo_details/components/wide_chart.tsx     | 105 +++
 .../components/common/data_preview_chart.tsx  | 350 ++++++++++
 ...etics_availability_indicator_type_form.tsx | 131 ++++
 .../common/good_bad_events_chart.tsx          | 163 +++++
 .../public/timelines/store/reducer.ts         | 634 ++++++++++++++++++
 8 files changed, 2175 insertions(+)

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.test.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.test.tsx
index 1fec1c76430ebd..4c2dc403093498 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/page_template.test.tsx
@@ -4,3 +4,265 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+
+import { setMockValues } from '../../__mocks__/kea_logic';
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import { EuiCallOut } from '@elastic/eui';
+
+import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
+
+import { FlashMessages } from '../flash_messages';
+import { Loading } from '../loading';
+
+import { EnterpriseSearchPageTemplateWrapper } from './page_template';
+
+describe('EnterpriseSearchPageTemplateWrapper', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setMockValues({ readOnlyMode: false });
+  });
+
+  it('renders', () => {
+    const wrapper = shallow(<EnterpriseSearchPageTemplateWrapper />);
+
+    expect(wrapper.type()).toEqual(KibanaPageTemplate);
+  });
+
+  it('renders children', () => {
+    const wrapper = shallow(
+      <EnterpriseSearchPageTemplateWrapper>
+        <div className="hello">world</div>
+      </EnterpriseSearchPageTemplateWrapper>
+    );
+
+    expect(wrapper.find('.hello').text()).toEqual('world');
+  });
+
+  describe('loading state', () => {
+    it('renders a loading icon in place of children', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplateWrapper isLoading>
+          <div className="test" />
+        </EnterpriseSearchPageTemplateWrapper>
+      );
+
+      expect(wrapper.find(Loading).exists()).toBe(true);
+      expect(wrapper.find('.test').exists()).toBe(false);
+    });
+
+    it('renders children & does not render a loading icon when the page is done loading', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplateWrapper isLoading={false}>
+          <div className="test" />
+        </EnterpriseSearchPageTemplateWrapper>
+      );
+
+      expect(wrapper.find(Loading).exists()).toBe(false);
+      expect(wrapper.find('.test').exists()).toBe(true);
+    });
+  });
+
+  describe('empty state', () => {
+    it('renders a custom empty state in place of children', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplateWrapper
+          isEmptyState
+          emptyState={<div className="emptyState">Nothing here yet!</div>}
+        >
+          <div className="test" />
+        </EnterpriseSearchPageTemplateWrapper>
+      );
+
+      expect(wrapper.find('.emptyState').exists()).toBe(true);
+      expect(wrapper.find('.test').exists()).toBe(false);
+
+      // @see https://github.com/elastic/kibana/blob/main/dev_docs/tutorials/kibana_page_template.mdx#isemptystate
+      // if you want to use KibanaPageTemplate's `isEmptyState` without a custom emptyState
+    });
+
+    it('does not render the custom empty state if the page is not empty', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplateWrapper
+          isEmptyState={false}
+          emptyState={<div className="emptyState">Nothing here yet!</div>}
+        >
+          <div className="test" />
+        </EnterpriseSearchPageTemplateWrapper>
+      );
+
+      expect(wrapper.find('.emptyState').exists()).toBe(false);
+      expect(wrapper.find('.test').exists()).toBe(true);
+    });
+
+    it('does not render an empty state if the page is still loading', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplateWrapper
+          isLoading
+          isEmptyState
+          emptyState={<div className="emptyState" />}
+        />
+      );
+
+      expect(wrapper.find(Loading).exists()).toBe(true);
+      expect(wrapper.find('.emptyState').exists()).toBe(false);
+    });
+  });
+
+  describe('read-only mode', () => {
+    it('renders a callout if in read-only mode', () => {
+      setMockValues({ readOnlyMode: true });
+      const wrapper = shallow(<EnterpriseSearchPageTemplateWrapper />);
+
+      expect(wrapper.find(EuiCallOut).exists()).toBe(true);
+    });
+
+    it('does not render a callout if not in read-only mode', () => {
+      setMockValues({ readOnlyMode: false });
+      const wrapper = shallow(<EnterpriseSearchPageTemplateWrapper />);
+
+      expect(wrapper.find(EuiCallOut).exists()).toBe(false);
+    });
+  });
+
+  describe('flash messages', () => {
+    it('renders FlashMessages by default', () => {
+      const wrapper = shallow(<EnterpriseSearchPageTemplateWrapper />);
+
+      expect(wrapper.find(FlashMessages).exists()).toBe(true);
+    });
+
+    it('does not render FlashMessages if hidden', () => {
+      // Example use case: manually showing flash messages in an open flyout or modal
+      // and not wanting to duplicate flash messages on the overlayed page
+      const wrapper = shallow(<EnterpriseSearchPageTemplateWrapper hideFlashMessages />);
+
+      expect(wrapper.find(FlashMessages).exists()).toBe(false);
+    });
+  });
+
+  describe('page chrome', () => {
+    const SetPageChrome = () => <div />;
+
+    it('renders a product-specific <SetPageChrome />', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplateWrapper setPageChrome={<SetPageChrome />} />
+      );
+
+      expect(wrapper.find(SetPageChrome).exists()).toBe(true);
+    });
+
+    it('invokes page chrome immediately (without waiting for isLoading to be finished)', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplateWrapper setPageChrome={<SetPageChrome />} isLoading />
+      );
+
+      expect(wrapper.find(SetPageChrome).exists()).toBe(true);
+
+      // This behavior is in contrast to page view telemetry, which is invoked after isLoading finishes
+      // In addition to the pageHeader prop also changing immediately, this makes navigation feel much snappier
+    });
+  });
+
+  describe('EuiPageTemplate props', () => {
+    it('overrides the restrictWidth prop', () => {
+      const wrapper = shallow(<EnterpriseSearchPageTemplateWrapper restrictWidth />);
+
+      expect(wrapper.find(KibanaPageTemplate).prop('restrictWidth')).toEqual(true);
+    });
+
+    it('passes down any ...pageTemplateProps that EuiPageTemplate accepts', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplateWrapper
+          panelled
+          paddingSize="s"
+          pageHeader={{ pageTitle: 'hello world' }}
+        />
+      );
+
+      expect(wrapper.find(KibanaPageTemplate).prop('panelled')).toEqual(true);
+      expect(wrapper.find(KibanaPageTemplate).prop('paddingSize')).toEqual('s');
+      expect(wrapper.find(KibanaPageTemplate).prop('pageHeader')!.pageTitle).toEqual('hello world');
+    });
+
+    it('sets enterpriseSearchPageTemplate classNames while still accepting custom classNames', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplateWrapper className="hello" mainProps={{ className: 'world' }} />
+      );
+
+      expect(wrapper.find(KibanaPageTemplate).prop('className')).toEqual(
+        'enterpriseSearchPageTemplate hello'
+      );
+      expect(wrapper.find(KibanaPageTemplate).prop('mainProps')!.className).toEqual(
+        'enterpriseSearchPageTemplate__content world'
+      );
+    });
+
+    it('automatically sets the Search logo onto passed solution navs', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplateWrapper solutionNav={{ name: 'Search', items: [] }} />
+      );
+
+      expect(wrapper.find(KibanaPageTemplate).prop('solutionNav')).toEqual({
+        icon: 'logoEnterpriseSearch',
+        name: 'Search',
+        items: [],
+      });
+    });
+
+    it('sets the solutionNavIcon passed', () => {
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplateWrapper
+          solutionNav={{ name: 'Search', items: [] }}
+          solutionNavIcon="logoElasticsearch"
+        />
+      );
+
+      expect(wrapper.find(KibanaPageTemplate).prop('solutionNav')).toEqual({
+        icon: 'logoElasticsearch',
+        name: 'Search',
+        items: [],
+      });
+    });
+  });
+
+  describe('Embedded Console', () => {
+    it('renders embedded console if available', () => {
+      const FakeEmbeddedConsole: React.FC = () => <div className="embedded_console">foo</div>;
+      const consolePlugin = { EmbeddableConsole: FakeEmbeddedConsole };
+
+      setMockValues({
+        readOnlyMode: false,
+        consolePlugin,
+      });
+
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplateWrapper>
+          <div className="hello">world</div>
+        </EnterpriseSearchPageTemplateWrapper>
+      );
+
+      expect(wrapper.find(consolePlugin.EmbeddableConsole).exists()).toBe(true);
+    });
+    it('Hides embedded console if available but page template prop set to hide', () => {
+      const FakeEmbeddedConsole: React.FC = () => <div className="embedded_console">foo</div>;
+      const consolePlugin = { EmbeddableConsole: FakeEmbeddedConsole };
+
+      setMockValues({
+        readOnlyMode: false,
+        consolePlugin,
+      });
+
+      const wrapper = shallow(
+        <EnterpriseSearchPageTemplateWrapper hideEmbeddedConsole>
+          <div className="hello">world</div>
+        </EnterpriseSearchPageTemplateWrapper>
+      );
+
+      expect(wrapper.find(consolePlugin.EmbeddableConsole).exists()).toBe(false);
+    });
+  });
+});
diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_dashboards/actions/save_dashboard_modal.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_dashboards/actions/save_dashboard_modal.tsx
index 1fec1c76430ebd..406a1b3e431906 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/service_dashboards/actions/save_dashboard_modal.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_dashboards/actions/save_dashboard_modal.tsx
@@ -4,3 +4,285 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+
+import React, { useCallback, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import {
+  EuiButton,
+  EuiModal,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiSwitch,
+  EuiModalBody,
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiFlexGroup,
+  EuiToolTip,
+  EuiIcon,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { DashboardItem } from '@kbn/dashboard-plugin/common/content_management';
+import { callApmApi } from '../../../../services/rest/create_call_apm_api';
+import { useDashboardFetcher } from '../../../../hooks/use_dashboards_fetcher';
+import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
+import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
+import { SERVICE_NAME } from '../../../../../common/es_fields/apm';
+import { fromQuery, toQuery } from '../../../shared/links/url_helpers';
+import { MergedServiceDashboard } from '..';
+
+interface Props {
+  onClose: () => void;
+  onRefresh: () => void;
+  currentDashboard?: MergedServiceDashboard;
+  serviceDashboards?: MergedServiceDashboard[];
+  serviceName: string;
+}
+
+export function SaveDashboardModal({
+  onClose,
+  onRefresh,
+  currentDashboard,
+  serviceDashboards,
+  serviceName,
+}: Props) {
+  const {
+    core: { notifications },
+  } = useApmPluginContext();
+  const { data: allAvailableDashboards, status } = useDashboardFetcher();
+  const history = useHistory();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [serviceFiltersEnabled, setServiceFiltersEnabled] = useState(
+    (currentDashboard?.serviceEnvironmentFilterEnabled &&
+      currentDashboard?.serviceNameFilterEnabled) ??
+      true
+  );
+
+  const [selectedDashboard, setSelectedDashboard] = useState<
+    Array<EuiComboBoxOptionOption<string>>
+  >(
+    currentDashboard
+      ? [
+          {
+            label: currentDashboard.title,
+            value: currentDashboard.dashboardSavedObjectId,
+          },
+        ]
+      : []
+  );
+
+  const isEditMode = !!currentDashboard?.id;
+
+  const options = allAvailableDashboards?.map(
+    (dashboardItem: DashboardItem) => ({
+      label: dashboardItem.attributes.title,
+      value: dashboardItem.id,
+      disabled:
+        serviceDashboards?.some(
+          ({ dashboardSavedObjectId }) =>
+            dashboardItem.id === dashboardSavedObjectId
+        ) ?? false,
+    })
+  );
+  const onClickSave = useCallback(
+    async function () {
+      const [newDashboard] = selectedDashboard;
+      try {
+        if (newDashboard.value) {
+          setIsLoading(true);
+          await callApmApi('POST /internal/apm/custom-dashboard', {
+            params: {
+              query: { customDashboardId: currentDashboard?.id },
+              body: {
+                dashboardSavedObjectId: newDashboard.value,
+                serviceEnvironmentFilterEnabled: serviceFiltersEnabled,
+                serviceNameFilterEnabled: serviceFiltersEnabled,
+                kuery: `${SERVICE_NAME}: ${serviceName}`,
+              },
+            },
+            signal: null,
+          });
+
+          notifications.toasts.addSuccess(
+            isEditMode
+              ? getEditSuccessToastLabels(newDashboard.label)
+              : getLinkSuccessToastLabels(newDashboard.label)
+          );
+          history.push({
+            ...history.location,
+            search: fromQuery({
+              ...toQuery(location.search),
+              dashboardId: newDashboard.value,
+            }),
+          });
+          onRefresh();
+        }
+      } catch (error) {
+        console.error(error);
+        notifications.toasts.addDanger({
+          title: i18n.translate(
+            'xpack.apm.serviceDashboards.addFailure.toast.title',
+            {
+              defaultMessage: 'Error while adding "{dashboardName}" dashboard',
+              values: { dashboardName: newDashboard.label },
+            }
+          ),
+          text: error.body.message,
+        });
+      }
+      setIsLoading(false);
+      onClose();
+    },
+    [
+      selectedDashboard,
+      notifications.toasts,
+      serviceFiltersEnabled,
+      onClose,
+      onRefresh,
+      isEditMode,
+      serviceName,
+      currentDashboard,
+      history,
+    ]
+  );
+
+  return (
+    <EuiModal onClose={onClose} data-test-subj="apmSelectServiceDashboard">
+      <EuiModalHeader>
+        <EuiModalHeaderTitle>
+          {isEditMode
+            ? i18n.translate(
+                'xpack.apm.serviceDashboards.selectDashboard.modalTitle.edit',
+                {
+                  defaultMessage: 'Edit dashboard',
+                }
+              )
+            : i18n.translate(
+                'xpack.apm.serviceDashboards.selectDashboard.modalTitle.link',
+                {
+                  defaultMessage: 'Select dashboard',
+                }
+              )}
+        </EuiModalHeaderTitle>
+      </EuiModalHeader>
+
+      <EuiModalBody>
+        <EuiFlexGroup direction="column" justifyContent="center">
+          <EuiComboBox
+            isLoading={status === FETCH_STATUS.LOADING || isLoading}
+            isDisabled={status === FETCH_STATUS.LOADING || isEditMode}
+            placeholder={i18n.translate(
+              'xpack.apm.serviceDashboards.selectDashboard.placeholder',
+              {
+                defaultMessage: 'Select dashboard',
+              }
+            )}
+            singleSelection={{ asPlainText: true }}
+            options={options}
+            selectedOptions={selectedDashboard}
+            onChange={(newSelection) => setSelectedDashboard(newSelection)}
+            isClearable={true}
+          />
+
+          <EuiSwitch
+            css={{ alignItems: 'center' }}
+            compressed
+            label={
+              <p>
+                {i18n.translate(
+                  'xpack.apm.dashboard.addDashboard.useContextFilterLabel',
+                  {
+                    defaultMessage: 'Filter by service and environment',
+                  }
+                )}{' '}
+                <EuiToolTip
+                  position="bottom"
+                  content={i18n.translate(
+                    'xpack.apm.dashboard.addDashboard.useContextFilterLabel.tooltip',
+                    {
+                      defaultMessage:
+                        'Enabling this option will apply filters to the dashboard based on your chosen service and environment.',
+                    }
+                  )}
+                >
+                  <EuiIcon type="questionInCircle" title="Icon with tooltip" />
+                </EuiToolTip>
+              </p>
+            }
+            onChange={() => setServiceFiltersEnabled(!serviceFiltersEnabled)}
+            checked={serviceFiltersEnabled}
+          />
+        </EuiFlexGroup>
+      </EuiModalBody>
+
+      <EuiModalFooter>
+        <EuiButtonEmpty
+          data-test-subj="apmSelectDashboardCancelButton"
+          onClick={onClose}
+          isDisabled={status === FETCH_STATUS.LOADING || isLoading}
+        >
+          {i18n.translate(
+            'xpack.apm.serviceDashboards.selectDashboard.cancel',
+            {
+              defaultMessage: 'Cancel',
+            }
+          )}
+        </EuiButtonEmpty>
+        <EuiButton
+          data-test-subj="apmSelectDashboardButton"
+          onClick={onClickSave}
+          isLoading={status === FETCH_STATUS.LOADING || isLoading}
+          fill
+        >
+          {isEditMode
+            ? i18n.translate(
+                'xpack.apm.serviceDashboards.selectDashboard.edit',
+                {
+                  defaultMessage: 'Save',
+                }
+              )
+            : i18n.translate(
+                'xpack.apm.serviceDashboards.selectDashboard.add',
+                {
+                  defaultMessage: 'Link dashboard',
+                }
+              )}
+        </EuiButton>
+      </EuiModalFooter>
+    </EuiModal>
+  );
+}
+
+function getLinkSuccessToastLabels(dashboardName: string) {
+  return {
+    title: i18n.translate(
+      'xpack.apm.serviceDashboards.linkSuccess.toast.title',
+      {
+        defaultMessage: 'Added "{dashboardName}" dashboard',
+        values: { dashboardName },
+      }
+    ),
+    text: i18n.translate('xpack.apm.serviceDashboards.linkSuccess.toast.text', {
+      defaultMessage:
+        'Your dashboard is now visible in the service overview page.',
+    }),
+  };
+}
+
+function getEditSuccessToastLabels(dashboardName: string) {
+  return {
+    title: i18n.translate(
+      'xpack.apm.serviceDashboards.editSuccess.toast.title',
+      {
+        defaultMessage: 'Edited "{dashboardName}" dashboard',
+        values: { dashboardName },
+      }
+    ),
+    text: i18n.translate('xpack.apm.serviceDashboards.editSuccess.toast.text', {
+      defaultMessage: 'Your dashboard link have been updated',
+    }),
+  };
+}
diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/events_chart_panel.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/events_chart_panel.tsx
index 1fec1c76430ebd..764dcda8e04b3b 100644
--- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/events_chart_panel.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/events_chart_panel.tsx
@@ -4,3 +4,251 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import {
+  AnnotationDomainType,
+  AreaSeries,
+  Axis,
+  Chart,
+  LineAnnotation,
+  Position,
+  RectAnnotation,
+  ScaleType,
+  Settings,
+  Tooltip,
+  TooltipType,
+} from '@elastic/charts';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiLink,
+  EuiLoadingChart,
+  EuiPanel,
+  EuiText,
+  EuiTitle,
+  useEuiTheme,
+} from '@elastic/eui';
+import numeral from '@elastic/numeral';
+import { useActiveCursor } from '@kbn/charts-plugin/public';
+import { i18n } from '@kbn/i18n';
+import { SLOWithSummaryResponse } from '@kbn/slo-schema';
+import { max, min } from 'lodash';
+import moment from 'moment';
+import React, { useRef } from 'react';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { useGetPreviewData } from '../../../hooks/use_get_preview_data';
+import { useKibana } from '../../../utils/kibana_react';
+import { COMPARATOR_MAPPING } from '../../slo_edit/constants';
+import { GoodBadEventsChart } from '../../slos/components/common/good_bad_events_chart';
+import { getDiscoverLink } from '../../../utils/slo/get_discover_link';
+
+export interface Props {
+  slo: SLOWithSummaryResponse;
+  range: {
+    start: number;
+    end: number;
+  };
+}
+
+export function EventsChartPanel({ slo, range }: Props) {
+  const { charts, uiSettings, discover } = useKibana().services;
+  const { euiTheme } = useEuiTheme();
+  const baseTheme = charts.theme.useChartsBaseTheme();
+  const chartRef = useRef(null);
+  const handleCursorUpdate = useActiveCursor(charts.activeCursor, chartRef, {
+    isDateHistogram: true,
+  });
+
+  const { isLoading, data } = useGetPreviewData({
+    range,
+    isValid: true,
+    indicator: slo.indicator,
+    groupings: slo.groupings,
+    instanceId: slo.instanceId,
+  });
+
+  const dateFormat = uiSettings.get('dateFormat');
+
+  const title =
+    slo.indicator.type !== 'sli.metric.timeslice' ? (
+      <EuiTitle size="xs">
+        <h2>
+          {i18n.translate('xpack.slo.sloDetails.eventsChartPanel.title', {
+            defaultMessage: 'Good vs bad events',
+          })}
+        </h2>
+      </EuiTitle>
+    ) : (
+      <EuiTitle size="xs">
+        <h2>
+          {i18n.translate('xpack.slo.sloDetails.eventsChartPanel.timesliceTitle', {
+            defaultMessage: 'Timeslice metric',
+          })}
+        </h2>
+      </EuiTitle>
+    );
+  const threshold =
+    slo.indicator.type === 'sli.metric.timeslice'
+      ? slo.indicator.params.metric.threshold
+      : undefined;
+  const yAxisNumberFormat = slo.indicator.type === 'sli.metric.timeslice' ? '0,0[.00]' : '0,0';
+
+  const values = (data || []).map((row) => {
+    if (slo.indicator.type === 'sli.metric.timeslice') {
+      return row.sliValue;
+    } else {
+      return row?.events?.total || 0;
+    }
+  });
+  const maxValue = max(values);
+  const minValue = min(values);
+  const domain = {
+    fit: true,
+    min:
+      threshold != null && minValue != null && threshold < minValue ? threshold : minValue || NaN,
+    max:
+      threshold != null && maxValue != null && threshold > maxValue ? threshold : maxValue || NaN,
+  };
+
+  const annotation =
+    slo.indicator.type === 'sli.metric.timeslice' && threshold ? (
+      <>
+        <LineAnnotation
+          id="thresholdAnnotation"
+          domainType={AnnotationDomainType.YDomain}
+          dataValues={[{ dataValue: threshold }]}
+          style={{
+            line: {
+              strokeWidth: 2,
+              stroke: euiTheme.colors.warning || '#000',
+              opacity: 1,
+            },
+          }}
+          marker={<span>{threshold}</span>}
+          markerPosition="right"
+        />
+        <RectAnnotation
+          dataValues={[
+            {
+              coordinates: ['GT', 'GTE'].includes(slo.indicator.params.metric.comparator)
+                ? {
+                    y0: threshold,
+                    y1: maxValue,
+                  }
+                : { y0: minValue, y1: threshold },
+              details: `${COMPARATOR_MAPPING[slo.indicator.params.metric.comparator]} ${threshold}`,
+            },
+          ]}
+          id="thresholdShade"
+          style={{ fill: euiTheme.colors.warning || '#000', opacity: 0.1 }}
+        />
+      </>
+    ) : null;
+
+  const showViewEventsLink = ![
+    'sli.apm.transactionErrorRate',
+    'sli.apm.transactionDuration',
+  ].includes(slo.indicator.type);
+
+  return (
+    <EuiPanel paddingSize="m" color="transparent" hasBorder data-test-subj="eventsChartPanel">
+      <EuiFlexGroup direction="column" gutterSize="l">
+        <EuiFlexGroup>
+          <EuiFlexGroup direction="column" gutterSize="none">
+            <EuiFlexItem grow={1}> {title}</EuiFlexItem>
+            <EuiFlexItem>
+              <EuiText color="subdued" size="s">
+                {i18n.translate('xpack.slo.sloDetails.eventsChartPanel.duration', {
+                  defaultMessage: 'Last 24h',
+                })}
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          {showViewEventsLink && (
+            <EuiFlexItem grow={0}>
+              <EuiLink
+                color="text"
+                href={getDiscoverLink(discover, slo, {
+                  from: 'now-24h',
+                  to: 'now',
+                  mode: 'relative',
+                })}
+                data-test-subj="sloDetailDiscoverLink"
+              >
+                <EuiIcon type="sortRight" style={{ marginRight: '4px' }} />
+                <FormattedMessage
+                  id="xpack.slo.sloDetails.viewEventsLink"
+                  defaultMessage="View events"
+                />
+              </EuiLink>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+
+        <EuiFlexItem>
+          {slo.indicator.type !== 'sli.metric.timeslice' ? (
+            <GoodBadEventsChart
+              isLoading={isLoading}
+              data={data || []}
+              annotation={annotation}
+              slo={slo}
+            />
+          ) : (
+            <>
+              {isLoading && (
+                <EuiLoadingChart size="m" mono data-test-subj="sliEventsChartLoading" />
+              )}
+
+              {!isLoading && (
+                <Chart size={{ height: 150, width: '100%' }} ref={chartRef}>
+                  <Tooltip type={TooltipType.VerticalCursor} />
+                  <Settings
+                    baseTheme={baseTheme}
+                    showLegend={slo.indicator.type !== 'sli.metric.timeslice'}
+                    showLegendExtra={false}
+                    legendPosition={Position.Left}
+                    noResults={
+                      <EuiIcon type="visualizeApp" size="l" color="subdued" title="no results" />
+                    }
+                    onPointerUpdate={handleCursorUpdate}
+                    externalPointerEvents={{
+                      tooltip: { visible: true },
+                    }}
+                    pointerUpdateDebounce={0}
+                    pointerUpdateTrigger={'x'}
+                    locale={i18n.getLocale()}
+                  />
+                  {annotation}
+
+                  <Axis
+                    id="bottom"
+                    position={Position.Bottom}
+                    showOverlappingTicks
+                    tickFormat={(d) => moment(d).format(dateFormat)}
+                  />
+                  <Axis
+                    id="left"
+                    position={Position.Left}
+                    tickFormat={(d) => numeral(d).format(yAxisNumberFormat)}
+                    domain={domain}
+                  />
+                  <AreaSeries
+                    id="Metric"
+                    xScaleType={ScaleType.Time}
+                    yScaleType={ScaleType.Linear}
+                    xAccessor="date"
+                    yAccessors={['value']}
+                    data={(data ?? []).map((datum) => ({
+                      date: new Date(datum.date).getTime(),
+                      value: datum.sliValue >= 0 ? datum.sliValue : null,
+                    }))}
+                  />
+                </Chart>
+              )}
+            </>
+          )}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+}
diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/wide_chart.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/wide_chart.tsx
index 1fec1c76430ebd..d737590b190a5a 100644
--- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/wide_chart.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/wide_chart.tsx
@@ -4,3 +4,108 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+
+import {
+  AreaSeries,
+  Axis,
+  Chart,
+  Fit,
+  LineSeries,
+  Position,
+  ScaleType,
+  Settings,
+  Tooltip,
+  TooltipType,
+} from '@elastic/charts';
+import { EuiIcon, EuiLoadingChart, useEuiTheme } from '@elastic/eui';
+import numeral from '@elastic/numeral';
+import { useActiveCursor } from '@kbn/charts-plugin/public';
+import moment from 'moment';
+import React, { useRef } from 'react';
+
+import { i18n } from '@kbn/i18n';
+import { useKibana } from '../../../utils/kibana_react';
+import { ChartData } from '../../../typings';
+
+type ChartType = 'area' | 'line';
+type State = 'success' | 'error';
+
+export interface Props {
+  id: string;
+  data: ChartData[];
+  chart: ChartType;
+  state: State;
+  isLoading: boolean;
+}
+
+export function WideChart({ chart, data, id, isLoading, state }: Props) {
+  const { charts, uiSettings } = useKibana().services;
+  const baseTheme = charts.theme.useChartsBaseTheme();
+  const { euiTheme } = useEuiTheme();
+  const dateFormat = uiSettings.get('dateFormat');
+  const percentFormat = uiSettings.get('format:percent:defaultPattern');
+
+  const color = state === 'error' ? euiTheme.colors.danger : euiTheme.colors.success;
+  const ChartComponent = chart === 'area' ? AreaSeries : LineSeries;
+
+  const chartRef = useRef(null);
+  const handleCursorUpdate = useActiveCursor(charts.activeCursor, chartRef, {
+    isDateHistogram: true,
+  });
+
+  if (isLoading) {
+    return <EuiLoadingChart size="m" mono data-test-subj="wideChartLoading" />;
+  }
+
+  return (
+    <Chart size={{ height: 150, width: '100%' }} ref={chartRef}>
+      <Tooltip type={TooltipType.VerticalCursor} />
+      <Settings
+        baseTheme={baseTheme}
+        showLegend={false}
+        noResults={<EuiIcon type="visualizeApp" size="l" color="subdued" title="no results" />}
+        onPointerUpdate={handleCursorUpdate}
+        externalPointerEvents={{
+          tooltip: { visible: true },
+        }}
+        pointerUpdateDebounce={0}
+        pointerUpdateTrigger={'x'}
+        locale={i18n.getLocale()}
+      />
+      <Axis
+        id="bottom"
+        position={Position.Bottom}
+        showOverlappingTicks
+        tickFormat={(d) => moment(d).format(dateFormat)}
+      />
+      <Axis
+        id="left"
+        ticks={4}
+        position={Position.Left}
+        tickFormat={(d) => numeral(d).format(percentFormat)}
+        domain={{
+          fit: true,
+          min: NaN,
+          max: NaN,
+        }}
+      />
+      <ChartComponent
+        color={color}
+        data={data}
+        fit={Fit.Nearest}
+        id={id}
+        lineSeriesStyle={{
+          line: {
+            strokeWidth: 1,
+          },
+          point: { visible: false },
+        }}
+        xAccessor="key"
+        xScaleType={ScaleType.Time}
+        yAccessors={['value']}
+        yScaleType={ScaleType.Linear}
+        yNice
+      />
+    </Chart>
+  );
+}
diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/common/data_preview_chart.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/common/data_preview_chart.tsx
index 1fec1c76430ebd..95c7ea02788d7c 100644
--- a/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/common/data_preview_chart.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/common/data_preview_chart.tsx
@@ -4,3 +4,353 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+
+import {
+  AnnotationDomainType,
+  AreaSeries,
+  Axis,
+  Chart,
+  LineAnnotation,
+  Position,
+  RectAnnotation,
+  ScaleType,
+  Settings,
+  Tooltip,
+  TooltipTable,
+  TooltipTableColumn,
+} from '@elastic/charts';
+import {
+  EuiCallOut,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiIcon,
+  EuiLoadingChart,
+  EuiPanel,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+import numeral from '@elastic/numeral';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { max, min } from 'lodash';
+import moment from 'moment';
+import React, { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { GoodBadEventsChart } from '../../../slos/components/common/good_bad_events_chart';
+import { useKibana } from '../../../../utils/kibana_react';
+import { useDebouncedGetPreviewData } from '../../hooks/use_preview';
+import { useSectionFormValidation } from '../../hooks/use_section_form_validation';
+import { CreateSLOForm } from '../../types';
+
+interface DataPreviewChartProps {
+  formatPattern?: string;
+  threshold?: number;
+  thresholdDirection?: 'above' | 'below';
+  thresholdColor?: string;
+  thresholdMessage?: string;
+  ignoreMoreThan100?: boolean;
+  useGoodBadEventsChart?: boolean;
+  label?: string;
+  range?: {
+    start: number;
+    end: number;
+  };
+}
+
+const ONE_HOUR_IN_MILLISECONDS = 1 * 60 * 60 * 1000;
+
+export function DataPreviewChart({
+  formatPattern,
+  threshold,
+  thresholdDirection,
+  thresholdColor,
+  thresholdMessage,
+  ignoreMoreThan100,
+  label,
+  useGoodBadEventsChart,
+  range,
+}: DataPreviewChartProps) {
+  const { watch, getFieldState, formState, getValues } = useFormContext<CreateSLOForm>();
+  const { charts, uiSettings } = useKibana().services;
+  const { isIndicatorSectionValid } = useSectionFormValidation({
+    getFieldState,
+    getValues,
+    formState,
+    watch,
+  });
+
+  const [defaultRange, _] = useState({
+    start: new Date().getTime() - ONE_HOUR_IN_MILLISECONDS,
+    end: new Date().getTime(),
+  });
+
+  const indicator = watch('indicator');
+
+  const {
+    data: previewData,
+    isLoading: isPreviewLoading,
+    isSuccess,
+    isError,
+  } = useDebouncedGetPreviewData(isIndicatorSectionValid, indicator, range || defaultRange);
+
+  const isMoreThan100 = !ignoreMoreThan100 && previewData?.find((row) => row.sliValue > 1) != null;
+
+  const baseTheme = charts.theme.useChartsBaseTheme();
+  const dateFormat = uiSettings.get('dateFormat');
+  const numberFormat =
+    formatPattern != null
+      ? formatPattern
+      : (uiSettings.get('format:percent:defaultPattern') as string);
+
+  const values = (previewData || []).map((row) => row.sliValue);
+  const maxValue = max(values);
+  const minValue = min(values);
+  const domain = {
+    fit: true,
+    min:
+      threshold != null && minValue != null && threshold < minValue ? threshold : minValue || NaN,
+    max:
+      threshold != null && maxValue != null && threshold > maxValue ? threshold : maxValue || NaN,
+  };
+
+  const title = (
+    <>
+      <EuiTitle size="xs">
+        <h3>
+          <FormattedMessage
+            id="xpack.slo.sloEdit.dataPreviewChart.panelLabel"
+            defaultMessage="SLI preview"
+          />
+        </h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+    </>
+  );
+
+  if (!isIndicatorSectionValid) {
+    return (
+      <EuiFlexItem>
+        {title}
+        <EuiFormRow fullWidth>
+          <EuiPanel hasBorder={true} hasShadow={false} style={{ minHeight: 194 }}>
+            <EuiFlexGroup justifyContent="center" alignItems="center" style={{ minHeight: 160 }}>
+              <EuiFlexItem grow={false}>
+                {i18n.translate('xpack.slo.sloEdit.dataPreviewChart.explanationMessage', {
+                  defaultMessage:
+                    'Fill the indicator fields to see visualisation of the current metrics',
+                })}
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPanel>
+        </EuiFormRow>
+      </EuiFlexItem>
+    );
+  }
+
+  const annotation = threshold != null && (
+    <>
+      <LineAnnotation
+        id="thresholdAnnotation"
+        domainType={AnnotationDomainType.YDomain}
+        dataValues={[{ dataValue: threshold }]}
+        style={{
+          line: {
+            strokeWidth: 2,
+            stroke: thresholdColor || '#000',
+            opacity: 1,
+          },
+        }}
+      />
+      <RectAnnotation
+        dataValues={[
+          {
+            coordinates:
+              thresholdDirection === 'above'
+                ? {
+                    y0: threshold,
+                    y1: maxValue,
+                  }
+                : { y0: minValue, y1: threshold },
+            details: thresholdMessage,
+          },
+        ]}
+        id="thresholdShade"
+        style={{ fill: thresholdColor || '#000', opacity: 0.1 }}
+      />
+    </>
+  );
+
+  const columns: TooltipTableColumn[] = [
+    {
+      id: 'color',
+      type: 'color',
+    },
+    {
+      id: 'label',
+      type: 'custom',
+      truncate: true,
+      cell: ({ label: cellLabel }) => <span className="echTooltip__label">{cellLabel}</span>,
+      style: {
+        textAlign: 'left',
+      },
+    },
+    {
+      id: 'value',
+      type: 'custom',
+      cell: ({ formattedValue }) => (
+        <>
+          <span className="echTooltip__value" dir="ltr">
+            {formattedValue}
+          </span>
+        </>
+      ),
+      style: {
+        textAlign: 'right',
+      },
+    },
+  ];
+
+  return (
+    <EuiFlexItem>
+      {title}
+      {isMoreThan100 && (
+        <>
+          <EuiSpacer size="xs" />
+          <EuiCallOut
+            size="s"
+            color="warning"
+            title={i18n.translate('xpack.slo.sloEdit.dataPreviewChart.moreThan100', {
+              defaultMessage:
+                'Some of the SLI values are more than 100%. That means good query is returning more results than total query.',
+            })}
+            iconType="warning"
+          />
+          <EuiSpacer size="xs" />
+        </>
+      )}
+      <EuiFormRow fullWidth>
+        <EuiPanel hasBorder={true} hasShadow={false} style={{ minHeight: 194 }}>
+          {(isPreviewLoading || isError) && (
+            <EuiFlexGroup justifyContent="center" alignItems="center" style={{ height: 160 }}>
+              <EuiFlexItem grow={false}>
+                {isPreviewLoading && <EuiLoadingChart size="m" mono />}
+                {isError && (
+                  <span>
+                    {i18n.translate('xpack.slo.sloEdit.dataPreviewChart.errorMessage', {
+                      defaultMessage: 'The current indicator settings are invalid',
+                    })}
+                  </span>
+                )}
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          )}
+          {isSuccess && useGoodBadEventsChart && (
+            <GoodBadEventsChart
+              data={previewData || []}
+              bottomTitle={label || DEFAULT_LABEL}
+              isLoading={isPreviewLoading}
+              annotation={annotation}
+            />
+          )}
+          {isSuccess && !useGoodBadEventsChart && (
+            <Chart size={{ height: 160, width: '100%' }}>
+              <Tooltip
+                type="vertical"
+                body={({ items }) => {
+                  const firstItem = items[0];
+                  const events = firstItem.datum.events;
+                  const rows = [items[0]];
+                  if (events) {
+                    rows.push({
+                      ...firstItem,
+                      formattedValue: events.good,
+                      value: events.good,
+                      label: i18n.translate('xpack.slo.sloEdit.dataPreviewChart.goodEvents', {
+                        defaultMessage: 'Good events',
+                      }),
+                    });
+                    rows.push({
+                      ...firstItem,
+                      value: events.total,
+                      formattedValue: events.total,
+                      label: i18n.translate('xpack.slo.sloEdit.dataPreviewChart.badEvents', {
+                        defaultMessage: 'Total events',
+                      }),
+                    });
+                  }
+
+                  return <TooltipTable columns={columns} items={rows} />;
+                }}
+              />
+              <Settings
+                baseTheme={baseTheme}
+                showLegend={false}
+                theme={[
+                  {
+                    lineSeriesStyle: {
+                      point: { visible: false },
+                    },
+                  },
+                ]}
+                noResults={
+                  <EuiIcon type="visualizeApp" size="l" color="subdued" title="no results" />
+                }
+                locale={i18n.getLocale()}
+              />
+
+              {annotation}
+
+              <Axis
+                id="y-axis"
+                title={i18n.translate('xpack.slo.sloEdit.dataPreviewChart.yTitle', {
+                  defaultMessage: 'SLI',
+                })}
+                ticks={5}
+                position={Position.Left}
+                tickFormat={(d) => numeral(d).format(numberFormat)}
+                domain={domain}
+              />
+
+              <Axis
+                id="time"
+                title={label || DEFAULT_LABEL}
+                tickFormat={(d) => moment(d).format(dateFormat)}
+                position={Position.Bottom}
+                timeAxisLayerCount={2}
+                gridLine={{ visible: true }}
+                style={{
+                  tickLine: { size: 0, padding: 4, visible: true },
+                  tickLabel: {
+                    alignment: {
+                      horizontal: Position.Left,
+                      vertical: Position.Bottom,
+                    },
+                    padding: 0,
+                    offset: { x: 0, y: 0 },
+                  },
+                }}
+              />
+              <AreaSeries
+                id="SLI"
+                xScaleType={ScaleType.Time}
+                yScaleType={ScaleType.Linear}
+                xAccessor="date"
+                yAccessors={['value']}
+                data={(previewData ?? []).map((datum) => ({
+                  date: new Date(datum.date).getTime(),
+                  value: datum.sliValue >= 0 ? datum.sliValue : null,
+                  events: datum.events,
+                }))}
+              />
+            </Chart>
+          )}
+        </EuiPanel>
+      </EuiFormRow>
+    </EuiFlexItem>
+  );
+}
+
+const DEFAULT_LABEL = i18n.translate('xpack.slo.sloEdit.dataPreviewChart.xTitle', {
+  defaultMessage: 'Last hour',
+});
diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/synthetics_availability/synthetics_availability_indicator_type_form.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/synthetics_availability/synthetics_availability_indicator_type_form.tsx
index 1fec1c76430ebd..256289ef3569b2 100644
--- a/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/synthetics_availability/synthetics_availability_indicator_type_form.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/synthetics_availability/synthetics_availability_indicator_type_form.tsx
@@ -4,3 +4,134 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import React, { useState } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiIconTip, EuiCallOut } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { ALL_VALUE, SyntheticsAvailabilityIndicator } from '@kbn/slo-schema';
+import { useFormContext } from 'react-hook-form';
+import { FieldSelector } from '../synthetics_common/field_selector';
+import { CreateSLOForm } from '../../types';
+import { DataPreviewChart } from '../common/data_preview_chart';
+import { QueryBuilder } from '../common/query_builder';
+
+const ONE_DAY_IN_MILLISECONDS = 1 * 60 * 60 * 1000 * 24;
+
+export function SyntheticsAvailabilityIndicatorTypeForm() {
+  const { watch } = useFormContext<CreateSLOForm<SyntheticsAvailabilityIndicator>>();
+
+  const [monitorIds = [], projects = [], tags = [], index] = watch([
+    'indicator.params.monitorIds',
+    'indicator.params.projects',
+    'indicator.params.tags',
+    'indicator.params.index',
+  ]);
+
+  const [range, _] = useState({
+    start: new Date().getTime() - ONE_DAY_IN_MILLISECONDS,
+    end: new Date().getTime(),
+  });
+
+  const filters = {
+    monitorIds: monitorIds.map((id) => id.value).filter((id) => id !== ALL_VALUE),
+    projects: projects.map((project) => project.value).filter((id) => id !== ALL_VALUE),
+    tags: tags.map((tag) => tag.value).filter((id) => id !== ALL_VALUE),
+  };
+
+  return (
+    <EuiFlexGroup direction="column" gutterSize="l">
+      <EuiFlexGroup direction="column" gutterSize="l">
+        <FieldSelector
+          required
+          allowAllOption
+          label={i18n.translate('xpack.slo.sloEdit.syntheticsAvailability.monitor', {
+            defaultMessage: 'Monitor name',
+          })}
+          placeholder={i18n.translate(
+            'xpack.slo.sloEdit.syntheticsAvailability.monitor.placeholder',
+            { defaultMessage: 'Select the Synthetics monitor or choose all' }
+          )}
+          fieldName="monitorIds"
+          name="indicator.params.monitorIds"
+          filters={filters}
+          dataTestSubj="syntheticsAvailabilityMonitorSelector"
+          tooltip={
+            <EuiIconTip
+              content={i18n.translate('xpack.slo.sloEdit.syntheticsAvailability.monitor.tooltip', {
+                defaultMessage:
+                  'This is the monitor or monitors part of this SLO. Select "*" to group by project, tag, or location',
+              })}
+              position="top"
+            />
+          }
+        />
+        <FieldSelector
+          allowAllOption
+          label={i18n.translate('xpack.slo.sloEdit.syntheticsAvailability.project', {
+            defaultMessage: 'Project',
+          })}
+          placeholder={i18n.translate(
+            'xpack.slo.sloEdit.syntheticsAvailability.project.placeholder',
+            {
+              defaultMessage: 'Select the project',
+            }
+          )}
+          fieldName="projects"
+          name="indicator.params.projects"
+          filters={filters}
+          dataTestSubj="syntheticsAvailabilityProjectSelector"
+        />
+        <FieldSelector
+          label={i18n.translate('xpack.slo.sloEdit.syntheticsAvailability.tags', {
+            defaultMessage: 'Tags',
+          })}
+          placeholder={i18n.translate('xpack.slo.sloEdit.syntheticsAvailability.tags.placeholder', {
+            defaultMessage: 'Select tags',
+          })}
+          fieldName="tags"
+          name="indicator.params.tags"
+          filters={filters}
+          dataTestSubj="syntheticsAvailabilityTagsSelector"
+        />
+      </EuiFlexGroup>
+
+      <EuiFlexGroup direction="row" gutterSize="l">
+        <EuiFlexItem>
+          <QueryBuilder
+            dataTestSubj="syntheticsAvailabilityFilterInput"
+            indexPatternString={index}
+            label={i18n.translate('xpack.slo.sloEdit.syntheticsAvailability.filter', {
+              defaultMessage: 'Query filter',
+            })}
+            name="indicator.params.filter"
+            placeholder={i18n.translate(
+              'xpack.slo.sloEdit.syntheticsAvailability.filter.placeholder',
+              {
+                defaultMessage: 'Custom filter to apply on the index',
+              }
+            )}
+            tooltip={
+              <EuiIconTip
+                content={i18n.translate('xpack.slo.sloEdit.synthetics.filter.tooltip', {
+                  defaultMessage:
+                    'This KQL query is used to filter the Synthetics checks on some relevant criteria for this SLO.',
+                })}
+                position="top"
+              />
+            }
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <EuiCallOut
+        size="s"
+        title="Synthetics availability SLIs are automatically grouped by monitor and location"
+        iconType="iInCircle"
+      />
+      <DataPreviewChart range={range} label={LABEL} useGoodBadEventsChart />
+    </EuiFlexGroup>
+  );
+}
+
+const LABEL = i18n.translate('xpack.slo.sloEdit.dataPreviewChart.syntheticsAvailability.xTitle', {
+  defaultMessage: 'Last 24 hours',
+});
diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/good_bad_events_chart.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/good_bad_events_chart.tsx
index 1fec1c76430ebd..f4d2b7aa2ceee0 100644
--- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/good_bad_events_chart.tsx
+++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/common/good_bad_events_chart.tsx
@@ -4,3 +4,166 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import {
+  Axis,
+  BarSeries,
+  Chart,
+  ElementClickListener,
+  Position,
+  ScaleType,
+  Settings,
+  Tooltip,
+  TooltipType,
+  XYChartElementEvent,
+} from '@elastic/charts';
+import { EuiIcon, EuiLoadingChart, useEuiTheme } from '@elastic/eui';
+import numeral from '@elastic/numeral';
+import { useActiveCursor } from '@kbn/charts-plugin/public';
+import { i18n } from '@kbn/i18n';
+import { GetPreviewDataResponse, SLOWithSummaryResponse } from '@kbn/slo-schema';
+import moment from 'moment';
+import React, { useRef } from 'react';
+import { useKibana } from '../../../../utils/kibana_react';
+import { openInDiscover } from '../../../../utils/slo/get_discover_link';
+
+export interface Props {
+  data: GetPreviewDataResponse;
+  slo?: SLOWithSummaryResponse;
+  annotation?: React.ReactNode;
+  isLoading?: boolean;
+  bottomTitle?: string;
+}
+
+export function GoodBadEventsChart({
+  annotation,
+  bottomTitle,
+  data,
+  slo,
+  isLoading = false,
+}: Props) {
+  const { charts, uiSettings, discover } = useKibana().services;
+  const { euiTheme } = useEuiTheme();
+  const baseTheme = charts.theme.useChartsBaseTheme();
+  const chartRef = useRef(null);
+  const handleCursorUpdate = useActiveCursor(charts.activeCursor, chartRef, {
+    isDateHistogram: true,
+  });
+
+  const dateFormat = uiSettings.get('dateFormat');
+
+  const yAxisNumberFormat = '0,0';
+
+  const domain = {
+    fit: true,
+    min: NaN,
+    max: NaN,
+  };
+
+  const intervalInMilliseconds =
+    data && data.length > 2
+      ? moment(data[1].date).valueOf() - moment(data[0].date).valueOf()
+      : 10 * 60000;
+
+  const goodEventId = i18n.translate('xpack.slo.sloDetails.eventsChartPanel.goodEventsLabel', {
+    defaultMessage: 'Good events',
+  });
+
+  const badEventId = i18n.translate('xpack.slo.sloDetails.eventsChartPanel.badEventsLabel', {
+    defaultMessage: 'Bad events',
+  });
+
+  const barClickHandler = (params: XYChartElementEvent[]) => {
+    if (slo?.indicator?.type === 'sli.kql.custom') {
+      const [datanum, eventDetail] = params[0];
+      const isBad = eventDetail.specId === badEventId;
+      const timeRange = {
+        from: moment(datanum.x).toISOString(),
+        to: moment(datanum.x).add(intervalInMilliseconds, 'ms').toISOString(),
+        mode: 'absolute' as const,
+      };
+      openInDiscover(discover, slo, isBad, !isBad, timeRange);
+    }
+  };
+
+  return (
+    <>
+      {isLoading && <EuiLoadingChart size="m" mono data-test-subj="sliEventsChartLoading" />}
+
+      {!isLoading && (
+        <Chart size={{ height: 150, width: '100%' }} ref={chartRef}>
+          <Tooltip type={TooltipType.VerticalCursor} />
+          <Settings
+            baseTheme={baseTheme}
+            showLegend={true}
+            showLegendExtra={false}
+            legendPosition={Position.Left}
+            noResults={<EuiIcon type="visualizeApp" size="l" color="subdued" title="no results" />}
+            onPointerUpdate={handleCursorUpdate}
+            externalPointerEvents={{
+              tooltip: { visible: true },
+            }}
+            pointerUpdateDebounce={0}
+            pointerUpdateTrigger={'x'}
+            locale={i18n.getLocale()}
+            onElementClick={barClickHandler as ElementClickListener}
+          />
+          {annotation}
+          <Axis
+            id="bottom"
+            title={bottomTitle}
+            position={Position.Bottom}
+            showOverlappingTicks
+            tickFormat={(d) => moment(d).format(dateFormat)}
+          />
+          <Axis
+            id="left"
+            position={Position.Left}
+            tickFormat={(d) => numeral(d).format(yAxisNumberFormat)}
+            domain={domain}
+          />
+          <>
+            <BarSeries
+              id={goodEventId}
+              color={euiTheme.colors.success}
+              barSeriesStyle={{
+                rect: { fill: euiTheme.colors.success },
+                displayValue: { fill: euiTheme.colors.success },
+              }}
+              xScaleType={ScaleType.Time}
+              yScaleType={ScaleType.Linear}
+              xAccessor="key"
+              yAccessors={['value']}
+              stackAccessors={[0]}
+              data={
+                data?.map((datum) => ({
+                  key: new Date(datum.date).getTime(),
+                  value: datum.events?.good,
+                })) ?? []
+              }
+            />
+
+            <BarSeries
+              id={badEventId}
+              color={euiTheme.colors.danger}
+              barSeriesStyle={{
+                rect: { fill: euiTheme.colors.danger },
+                displayValue: { fill: euiTheme.colors.danger },
+              }}
+              xScaleType={ScaleType.Time}
+              yScaleType={ScaleType.Linear}
+              xAccessor="key"
+              yAccessors={['value']}
+              stackAccessors={[0]}
+              data={
+                data?.map((datum) => ({
+                  key: new Date(datum.date).getTime(),
+                  value: datum.events?.bad,
+                })) ?? []
+              }
+            />
+          </>
+        </Chart>
+      )}
+    </>
+  );
+}
diff --git a/x-pack/plugins/security_solution/public/timelines/store/reducer.ts b/x-pack/plugins/security_solution/public/timelines/store/reducer.ts
index 1fec1c76430ebd..cc42e286a8325a 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/reducer.ts
+++ b/x-pack/plugins/security_solution/public/timelines/store/reducer.ts
@@ -4,3 +4,637 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+
+import { reducerWithInitialState } from 'typescript-fsa-reducers';
+
+import {
+  addNote,
+  addNoteToEvent,
+  addProvider,
+  addTimeline,
+  applyKqlFilterQuery,
+  createTimeline,
+  dataProviderEdited,
+  endTimelineSaving,
+  pinEvent,
+  removeProvider,
+  setActiveTabTimeline,
+  setExcludedRowRendererIds,
+  setFilters,
+  setInsertTimeline,
+  setSavedQueryId,
+  showCallOutUnauthorizedMsg,
+  showTimeline,
+  startTimelineSaving,
+  unPinEvent,
+  updateDataProviderEnabled,
+  updateDataProviderExcluded,
+  updateDataProviderType,
+  updateDataView,
+  updateIsFavorite,
+  updateKqlMode,
+  updateProviders,
+  updateRange,
+  updateTimeline,
+  updateGraphEventId,
+  updateTitleAndDescription,
+  updateSessionViewConfig,
+  toggleModalSaveTimeline,
+  updateEqlOptions,
+  toggleDetailPanel,
+  setEventsLoading,
+  removeColumn,
+  upsertColumn,
+  updateColumns,
+  updateIsLoading,
+  updateSort,
+  clearSelected,
+  setSelected,
+  setEventsDeleted,
+  initializeTimelineSettings,
+  updateItemsPerPage,
+  updateItemsPerPageOptions,
+  applyDeltaToColumnWidth,
+  clearEventsDeleted,
+  clearEventsLoading,
+  updateSavedSearchId,
+  updateSavedSearch,
+  initializeSavedSearch,
+  setIsDiscoverSavedSearchLoaded,
+  setDataProviderVisibility,
+  setChanged,
+  updateRowHeight,
+  updateSampleSize,
+  updateColumnWidth,
+  setConfirmingNoteId,
+  deleteNoteFromEvent,
+} from './actions';
+
+import {
+  addNewTimeline,
+  addTimelineNote,
+  addTimelineNoteToEvent,
+  addTimelineProviders,
+  addTimelineToStore,
+  applyKqlFilterQueryDraft,
+  pinTimelineEvent,
+  removeTimelineProvider,
+  unPinTimelineEvent,
+  updateExcludedRowRenderersIds,
+  updateTimelineIsFavorite,
+  updateTimelineKqlMode,
+  updateTimelineProviderEnabled,
+  updateTimelineProviderExcluded,
+  updateTimelineProviderProperties,
+  updateTimelineProviderType,
+  updateTimelineProviders,
+  updateTimelineRange,
+  updateTimelineShowTimeline,
+  updateTimelineTitleAndDescription,
+  updateSavedQuery,
+  updateTimelineGraphEventId,
+  updateFilters,
+  updateTimelineSessionViewConfig,
+  updateTimelineDetailsPanel,
+  setLoadingTableEvents,
+  removeTableColumn,
+  upsertTableColumn,
+  updateTableColumns,
+  updateTableSort,
+  setSelectedTableEvents,
+  setDeletedTableEvents,
+  setInitializeTimelineSettings,
+  applyDeltaToTableColumnWidth,
+  updateTimelinePerPageOptions,
+  updateTimelineItemsPerPage,
+  updateTimelineColumnWidth,
+} from './helpers';
+
+import type { TimelineState } from './types';
+import { EMPTY_TIMELINE_BY_ID } from './types';
+import { TimelineType } from '../../../common/api/timeline';
+
+export const initialTimelineState: TimelineState = {
+  timelineById: EMPTY_TIMELINE_BY_ID,
+  showCallOutUnauthorizedMsg: false,
+  insertTimeline: null,
+};
+
+/** The reducer for all timeline actions  */
+export const timelineReducer = reducerWithInitialState(initialTimelineState)
+  .case(addTimeline, (state, { id, timeline, resolveTimelineConfig }) => ({
+    ...state,
+    timelineById: addTimelineToStore({
+      id,
+      timeline,
+      resolveTimelineConfig,
+      timelineById: state.timelineById,
+    }),
+  }))
+  .case(createTimeline, (state, { id, timelineType = TimelineType.default, ...timelineProps }) => {
+    return {
+      ...state,
+      timelineById: addNewTimeline({
+        id,
+        timelineById: state.timelineById,
+        timelineType,
+        ...timelineProps,
+      }),
+    };
+  })
+  .case(addNote, (state, { id, noteId }) => ({
+    ...state,
+    timelineById: addTimelineNote({ id, noteId, timelineById: state.timelineById }),
+  }))
+  .case(addNoteToEvent, (state, { id, noteId, eventId }) => ({
+    ...state,
+    timelineById: addTimelineNoteToEvent({ id, noteId, eventId, timelineById: state.timelineById }),
+  }))
+  .case(addProvider, (state, { id, providers }) => ({
+    ...state,
+    timelineById: addTimelineProviders({ id, providers, timelineById: state.timelineById }),
+  }))
+  .case(applyKqlFilterQuery, (state, { id, filterQuery }) => ({
+    ...state,
+    timelineById: applyKqlFilterQueryDraft({
+      id,
+      filterQuery,
+      timelineById: state.timelineById,
+    }),
+  }))
+  .case(showTimeline, (state, { id, show }) => ({
+    ...state,
+    timelineById: updateTimelineShowTimeline({ id, show, timelineById: state.timelineById }),
+  }))
+  .case(updateGraphEventId, (state, { id, graphEventId }) => ({
+    ...state,
+    timelineById: updateTimelineGraphEventId({
+      id,
+      graphEventId,
+      timelineById: state.timelineById,
+    }),
+  }))
+  .case(updateSessionViewConfig, (state, { id, sessionViewConfig }) => ({
+    ...state,
+    timelineById: updateTimelineSessionViewConfig({
+      id,
+      sessionViewConfig,
+      timelineById: state.timelineById,
+    }),
+  }))
+  .case(pinEvent, (state, { id, eventId }) => ({
+    ...state,
+    timelineById: pinTimelineEvent({ id, eventId, timelineById: state.timelineById }),
+  }))
+  .case(removeProvider, (state, { id, providerId, andProviderId }) => ({
+    ...state,
+    timelineById: removeTimelineProvider({
+      id,
+      providerId,
+      timelineById: state.timelineById,
+      andProviderId,
+    }),
+  }))
+  .case(startTimelineSaving, (state, { id }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        isSaving: true,
+      },
+    },
+  }))
+  .case(endTimelineSaving, (state, { id }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        isSaving: false,
+      },
+    },
+  }))
+  .case(setExcludedRowRendererIds, (state, { id, excludedRowRendererIds }) => ({
+    ...state,
+    timelineById: updateExcludedRowRenderersIds({
+      id,
+      excludedRowRendererIds,
+      timelineById: state.timelineById,
+    }),
+  }))
+  .case(updateTimeline, (state, { id, timeline }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: timeline,
+    },
+  }))
+  .case(unPinEvent, (state, { id, eventId }) => ({
+    ...state,
+    timelineById: unPinTimelineEvent({ id, eventId, timelineById: state.timelineById }),
+  }))
+  .case(updateIsFavorite, (state, { id, isFavorite }) => ({
+    ...state,
+    timelineById: updateTimelineIsFavorite({ id, isFavorite, timelineById: state.timelineById }),
+  }))
+  .case(updateKqlMode, (state, { id, kqlMode }) => ({
+    ...state,
+    timelineById: updateTimelineKqlMode({ id, kqlMode, timelineById: state.timelineById }),
+  }))
+  .case(updateTitleAndDescription, (state, { id, title, description }) => ({
+    ...state,
+    timelineById: updateTimelineTitleAndDescription({
+      id,
+      title,
+      description,
+      timelineById: state.timelineById,
+    }),
+  }))
+  .case(updateProviders, (state, { id, providers }) => ({
+    ...state,
+    timelineById: updateTimelineProviders({ id, providers, timelineById: state.timelineById }),
+  }))
+  .case(updateRange, (state, { id, start, end }) => ({
+    ...state,
+    timelineById: updateTimelineRange({ id, start, end, timelineById: state.timelineById }),
+  }))
+  .case(updateDataProviderEnabled, (state, { id, enabled, providerId, andProviderId }) => ({
+    ...state,
+    timelineById: updateTimelineProviderEnabled({
+      id,
+      enabled,
+      providerId,
+      timelineById: state.timelineById,
+      andProviderId,
+    }),
+  }))
+  .case(updateDataProviderExcluded, (state, { id, excluded, providerId, andProviderId }) => ({
+    ...state,
+    timelineById: updateTimelineProviderExcluded({
+      id,
+      excluded,
+      providerId,
+      timelineById: state.timelineById,
+      andProviderId,
+    }),
+  }))
+
+  .case(
+    dataProviderEdited,
+    (state, { andProviderId, excluded, field, id, operator, providerId, value }) => ({
+      ...state,
+      timelineById: updateTimelineProviderProperties({
+        andProviderId,
+        excluded,
+        field,
+        id,
+        operator,
+        providerId,
+        timelineById: state.timelineById,
+        value,
+      }),
+    })
+  )
+  .case(updateDataProviderType, (state, { id, type, providerId, andProviderId }) => ({
+    ...state,
+    timelineById: updateTimelineProviderType({
+      id,
+      type,
+      providerId,
+      timelineById: state.timelineById,
+      andProviderId,
+    }),
+  }))
+  .case(showCallOutUnauthorizedMsg, (state) => ({
+    ...state,
+    showCallOutUnauthorizedMsg: true,
+  }))
+  .case(setSavedQueryId, (state, { id, savedQueryId }) => ({
+    ...state,
+    timelineById: updateSavedQuery({
+      id,
+      savedQueryId,
+      timelineById: state.timelineById,
+    }),
+  }))
+  .case(setFilters, (state, { id, filters }) => ({
+    ...state,
+    timelineById: updateFilters({
+      id,
+      filters,
+      timelineById: state.timelineById,
+    }),
+  }))
+  .case(setInsertTimeline, (state, insertTimeline) => ({
+    ...state,
+    insertTimeline,
+  }))
+  .case(updateDataView, (state, { id, dataViewId, indexNames }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        dataViewId,
+        indexNames,
+      },
+    },
+  }))
+  .case(setActiveTabTimeline, (state, { id, activeTab, scrollToTop }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        activeTab,
+        prevActiveTab: state.timelineById[id].activeTab,
+        scrollToTop: scrollToTop
+          ? {
+              timestamp: Math.floor(Date.now() / 1000), // convert to seconds to avoid unnecessary rerenders for multiple clicks
+            }
+          : undefined,
+      },
+    },
+  }))
+  .case(toggleModalSaveTimeline, (state, { id, showModalSaveTimeline }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        showSaveModal: showModalSaveTimeline,
+      },
+    },
+  }))
+  .case(updateEqlOptions, (state, { id, field, value }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        eqlOptions: {
+          ...(state.timelineById[id].eqlOptions ?? {}),
+          [field]: value,
+        },
+      },
+    },
+  }))
+  .case(toggleDetailPanel, (state, action) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [action.id]: {
+        ...state.timelineById[action.id],
+        expandedDetail: {
+          ...state.timelineById[action.id].expandedDetail,
+          ...updateTimelineDetailsPanel(action),
+        },
+      },
+    },
+  }))
+  .case(setEventsLoading, (state, { id, eventIds, isLoading }) => ({
+    ...state,
+    timelineById: setLoadingTableEvents({
+      id,
+      eventIds,
+      timelineById: state.timelineById,
+      isLoading,
+    }),
+  }))
+  .case(removeColumn, (state, { id, columnId }) => ({
+    ...state,
+    timelineById: removeTableColumn({
+      id,
+      columnId,
+      timelineById: state.timelineById,
+    }),
+  }))
+  .case(upsertColumn, (state, { column, id, index }) => ({
+    ...state,
+    timelineById: upsertTableColumn({ column, id, index, timelineById: state.timelineById }),
+  }))
+  .case(updateColumns, (state, { id, columns }) => ({
+    ...state,
+    timelineById: updateTableColumns({
+      id,
+      columns,
+      timelineById: state.timelineById,
+    }),
+  }))
+  .case(updateIsLoading, (state, { id, isLoading }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        isLoading,
+      },
+    },
+  }))
+  .case(updateSort, (state, { id, sort }) => ({
+    ...state,
+    timelineById: updateTableSort({ id, sort, timelineById: state.timelineById }),
+  }))
+  .case(setSelected, (state, { id, eventIds, isSelected, isSelectAllChecked }) => ({
+    ...state,
+    timelineById: setSelectedTableEvents({
+      id,
+      eventIds,
+      timelineById: state.timelineById,
+      isSelected,
+      isSelectAllChecked,
+    }),
+  }))
+  .case(clearSelected, (state, { id }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        selectedEventIds: {},
+        isSelectAllChecked: false,
+      },
+    },
+  }))
+  .case(setEventsDeleted, (state, { id, eventIds, isDeleted }) => ({
+    ...state,
+    timelineById: setDeletedTableEvents({
+      id,
+      eventIds,
+      timelineById: state.timelineById,
+      isDeleted,
+    }),
+  }))
+  .case(initializeTimelineSettings, (state, { id, ...timelineSettingsProps }) => ({
+    ...state,
+    timelineById: setInitializeTimelineSettings({
+      id,
+      timelineById: state.timelineById,
+      timelineSettingsProps,
+    }),
+  }))
+  .case(updateItemsPerPage, (state, { id, itemsPerPage }) => ({
+    ...state,
+    timelineById: updateTimelineItemsPerPage({
+      id,
+      itemsPerPage,
+      timelineById: state.timelineById,
+    }),
+  }))
+  .case(updateItemsPerPageOptions, (state, { id, itemsPerPageOptions }) => ({
+    ...state,
+    timelineById: updateTimelinePerPageOptions({
+      id,
+      itemsPerPageOptions,
+      timelineById: state.timelineById,
+    }),
+  }))
+  .case(applyDeltaToColumnWidth, (state, { id, columnId, delta }) => ({
+    ...state,
+    timelineById: applyDeltaToTableColumnWidth({
+      id,
+      columnId,
+      delta,
+      timelineById: state.timelineById,
+    }),
+  }))
+  .case(clearEventsDeleted, (state, { id }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        deletedEventIds: [],
+      },
+    },
+  }))
+  .case(clearEventsLoading, (state, { id }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        loadingEventIds: [],
+      },
+    },
+  }))
+  .case(updateSavedSearchId, (state, { id, savedSearchId }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        savedSearchId,
+      },
+    },
+  }))
+  .case(initializeSavedSearch, (state, { id, savedSearch }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        savedSearch,
+      },
+    },
+  }))
+  .case(updateSavedSearch, (state, { id, savedSearch }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        savedSearch,
+      },
+    },
+  }))
+  .case(setIsDiscoverSavedSearchLoaded, (state, { id, isDiscoverSavedSearchLoaded }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        isDiscoverSavedSearchLoaded,
+      },
+    },
+  }))
+  .case(setDataProviderVisibility, (state, { id, isDataProviderVisible }) => {
+    return {
+      ...state,
+      timelineById: {
+        ...state.timelineById,
+        [id]: {
+          ...state.timelineById[id],
+          isDataProviderVisible,
+        },
+      },
+    };
+  })
+  .case(setChanged, (state, { id, changed }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        changed,
+      },
+    },
+  }))
+  .case(updateColumnWidth, (state, { id, columnId, width }) => ({
+    ...state,
+    timelineById: updateTimelineColumnWidth({
+      columnId,
+      id,
+      timelineById: state.timelineById,
+      width,
+    }),
+  }))
+
+  .case(updateSampleSize, (state, { id, sampleSize }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        sampleSize,
+      },
+    },
+  }))
+
+  .case(updateRowHeight, (state, { id, rowHeight }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        rowHeight,
+      },
+    },
+  }))
+  .case(setConfirmingNoteId, (state, { id, confirmingNoteId }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        confirmingNoteId,
+      },
+    },
+  }))
+  .case(deleteNoteFromEvent, (state, { id, noteId, eventId }) => ({
+    ...state,
+    timelineById: {
+      ...state.timelineById,
+      [id]: {
+        ...state.timelineById[id],
+        eventIdToNoteIds: {
+          ...state.timelineById[id].eventIdToNoteIds,
+          [eventId]: state.timelineById[id].eventIdToNoteIds[eventId].filter(
+            (note) => note !== noteId
+          ),
+        },
+      },
+    },
+  }))
+  .build();

From cf159a76c519125e688742d8e6fd973788f47d8d Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Wed, 27 Mar 2024 06:53:08 +0100
Subject: [PATCH 53/65] review feedback

---
 .../components/with_data_view/translations.ts |  4 +-
 .../body/renderers/formatted_field_udt.tsx    | 55 ++++++++--------
 .../query_tab_unified_components.test.tsx     |  1 +
 .../data_table/index.test.tsx                 | 19 ++++--
 .../unified_components/index.test.tsx         | 66 +++++++++++--------
 .../timeline/unified_components/index.tsx     |  6 +-
 .../public/timelines/store/helpers.test.ts    |  4 +-
 7 files changed, 82 insertions(+), 73 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/with_data_view/translations.ts b/x-pack/plugins/security_solution/public/common/components/with_data_view/translations.ts
index df1784874a9261..a0104b594a9e38 100644
--- a/x-pack/plugins/security_solution/public/common/components/with_data_view/translations.ts
+++ b/x-pack/plugins/security_solution/public/common/components/with_data_view/translations.ts
@@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
 export const DATA_VIEW_MANDATORY = i18n.translate(
   'xpack.securitySolution.components.dataViewMandatory',
   {
-    defaultMessage: 'DataView is mandatory but was not provided',
+    defaultMessage: 'The DataView is required, but was not provided',
   }
 );
 
@@ -18,6 +18,6 @@ export const DATA_VIEW_MANDATORY_MSG = i18n.translate(
   'xpack.securitySolution.components.dataViewMandatoryDetailMessage',
   {
     defaultMessage:
-      'It looks like DataView is not selected properly. Please select the appropriate DataView and index patterns',
+      'The DataView is not selected properly. Please select the appropriate DataView and index patterns',
   }
 );
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
index 0fcf4caae750bf..545a198593fe8b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/formatted_field_udt.tsx
@@ -21,33 +21,30 @@ export const getFormattedFields = ({
   headers: ColumnHeaderOptions[];
   scopeId: string;
 }) => {
-  return headers
-    .map((h) => h.id)
-    .reduce(
-      (
-        obj: Record<string, (props: EuiDataGridCellValueElementProps) => React.ReactNode>,
-        field: string,
-        currentIdx
-      ) => {
-        obj[field] = function UnifiedFieldRender(props: EuiDataGridCellValueElementProps) {
-          return (
-            <DefaultCellRenderer
-              {...props}
-              isDraggable={false}
-              isTimeline={true}
-              isDetails={false}
-              isExpanded={false}
-              isExpandable={true}
-              data={dataTableRows[props.rowIndex].data}
-              eventId={dataTableRows[props.rowIndex]._id}
-              scopeId={scopeId}
-              linkValues={undefined}
-              header={headers[currentIdx]}
-            />
-          );
-        };
-        return obj;
-      },
-      {}
-    );
+  return headers.reduce(
+    (
+      obj: Record<string, (props: EuiDataGridCellValueElementProps) => React.ReactNode>,
+      header: ColumnHeaderOptions
+    ) => {
+      obj[header.id] = function UnifiedFieldRender(props: EuiDataGridCellValueElementProps) {
+        return (
+          <DefaultCellRenderer
+            {...props}
+            isDraggable={false}
+            isTimeline={true}
+            isDetails={false}
+            isExpanded={false}
+            isExpandable={true}
+            data={dataTableRows[props.rowIndex].data}
+            eventId={dataTableRows[props.rowIndex]._id}
+            scopeId={scopeId}
+            linkValues={undefined}
+            header={header}
+          />
+        );
+      };
+      return obj;
+    },
+    {}
+  );
 };
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
index dc3699b0ed5089..de7542ee923146 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
@@ -144,6 +144,7 @@ describe('query tab with unified timeline', () => {
   });
 
   beforeEach(() => {
+    // increase timeout for these tests as they are rendering a complete table with ~30 rows which can take time.
     const ONE_SECOND = 1000;
     jest.setTimeout(10 * ONE_SECOND);
     HTMLElement.prototype.getBoundingClientRect = jest.fn(() => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
index 2849c973e432db..d9e0f582a00a29 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
@@ -66,6 +66,13 @@ const TestComponent = (props: TestComponentProps) => {
   );
 };
 
+const getTimelineFromStore = (
+  store: ReturnType<typeof createMockStore>,
+  timelineId: string = TimelineId.test
+) => {
+  return store.getState().timeline.timelineById[timelineId];
+};
+
 describe('unified data table', () => {
   beforeEach(() => {
     (useSourcererDataView as jest.Mock).mockReturnValue(mockSourcererScope);
@@ -210,9 +217,7 @@ describe('unified data table', () => {
     );
 
     await waitFor(() => {
-      expect(customMockStore.getState().timeline.timelineById[TimelineId.test]?.rowHeight).toEqual(
-        rowHeight.new
-      );
+      expect(getTimelineFromStore(customMockStore)?.rowHeight).toEqual(rowHeight.new);
     });
   });
 
@@ -303,12 +308,14 @@ describe('unified data table', () => {
       const customMockStore = createMockStore();
       render(<TestComponent store={customMockStore} />);
       expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+      // make sure that items per page is as per the props passed above
+      expect(screen.getByTestId('tablePaginationPopoverButton')).toHaveTextContent(
+        `Rows per page: 50`
+      );
       fireEvent.click(screen.getByTestId('tablePaginationPopoverButton'));
       fireEvent.click(screen.getByTestId(`tablePagination-25-rows`));
       await waitFor(() => {
-        expect(
-          customMockStore.getState().timeline.timelineById[TimelineId.test]?.itemsPerPage
-        ).toEqual(25);
+        expect(getTimelineFromStore(customMockStore)?.itemsPerPage).toEqual(25);
       });
     });
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
index 67428302172d89..171465a8666388 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
@@ -29,7 +29,6 @@ import { timelineActions } from '../../../store';
 import type { ExperimentalFeatures } from '../../../../../common';
 import { allowedExperimentalValues } from '../../../../../common';
 import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
-import { cloneDeep } from 'lodash';
 import { TimelineTabs } from '@kbn/securitysolution-data-table';
 import { DataLoadingState } from '@kbn/unified-data-table';
 import { createFilterManagerMock } from '@kbn/data-plugin/public/query/filter_manager/filter_manager.mock';
@@ -80,6 +79,8 @@ const columnsToDisplay = [
   },
 ];
 
+const localMockedTimelineData = structuredClone(mockTimelineData);
+
 const TestComponent = (props: Partial<ComponentProps<typeof UnifiedTimeline>>) => {
   const testComponentDefaultProps: ComponentProps<typeof QueryTabContent> = {
     columns: getColumnHeaders(columnsToDisplay, mockSourcererScope.browserFields),
@@ -96,9 +97,9 @@ const TestComponent = (props: Partial<ComponentProps<typeof UnifiedTimeline>>) =
         sortDirection: 'desc',
       },
     ],
-    events: structuredClone(mockTimelineData),
+    events: localMockedTimelineData,
     refetch: jest.fn(),
-    totalCount: mockTimelineData.length,
+    totalCount: localMockedTimelineData.length,
     onEventClosed: jest.fn(),
     expandedDetail: {},
     showExpandedDetails: false,
@@ -141,12 +142,19 @@ const renderTestComponents = (props?: Partial<ComponentProps<typeof TestComponen
   });
 };
 
+const getTimelineFromStore = (
+  store: ReturnType<typeof createMockStore>,
+  timelineId: string = TimelineId.test
+) => {
+  return store.getState().timeline.timelineById[timelineId];
+};
+
 const loadPageMock = jest.fn();
 
 const useTimelineEventsMock = jest.fn(() => [
   false,
   {
-    events: cloneDeep(mockTimelineData),
+    events: localMockedTimelineData,
     pageInfo: {
       activePage: 0,
       totalPages: 10,
@@ -239,7 +247,7 @@ describe('unified timeline', () => {
       fireEvent.click(screen.getByTitle('Move left'));
 
       await waitFor(() => {
-        const newColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+        const newColumns = getTimelineFromStore(customStore).columns;
         expect(newColumns[0].id).toBe('message');
       });
     });
@@ -275,7 +283,7 @@ describe('unified timeline', () => {
       fireEvent.click(screen.getByTitle('Move right'));
 
       await waitFor(() => {
-        const newColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+        const newColumns = getTimelineFromStore(customStore).columns;
         expect(newColumns[2].id).toBe('message');
       });
     });
@@ -301,7 +309,7 @@ describe('unified timeline', () => {
       );
 
       // column is currently present in the state
-      const currentColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+      const currentColumns = getTimelineFromStore(customStore).columns;
       expect(currentColumns).toMatchObject(
         expect.arrayContaining([
           expect.objectContaining({
@@ -318,7 +326,7 @@ describe('unified timeline', () => {
 
       // column should now be removed
       await waitFor(() => {
-        const newColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+        const newColumns = getTimelineFromStore(customStore).columns;
         expect(newColumns).not.toMatchObject(
           expect.arrayContaining([
             expect.objectContaining({
@@ -353,7 +361,7 @@ describe('unified timeline', () => {
       fireEvent.click(screen.getByTitle('Sort Old-New'));
 
       await waitFor(() => {
-        const newSort = customStore.getState().timeline.timelineById[TimelineId.test].sort;
+        const newSort = getTimelineFromStore(customStore).sort;
         expect(newSort).toMatchObject([
           {
             columnId: '@timestamp',
@@ -390,7 +398,7 @@ describe('unified timeline', () => {
       fireEvent.click(screen.getByTitle('Sort A-Z'));
 
       await waitFor(() => {
-        const newSort = customStore.getState().timeline.timelineById[TimelineId.test].sort;
+        const newSort = getTimelineFromStore(customStore).sort;
         expect(newSort).toMatchObject([
           {
             columnId: '@timestamp',
@@ -439,7 +447,7 @@ describe('unified timeline', () => {
       fireEvent.click(screen.getByTitle('Sort Low-High'));
 
       await waitFor(() => {
-        const newSort = customStore.getState().timeline.timelineById[TimelineId.test].sort;
+        const newSort = getTimelineFromStore(customStore).sort;
         expect(newSort).toMatchObject([
           {
             columnId: '@timestamp',
@@ -542,8 +550,8 @@ describe('unified timeline', () => {
         );
       });
     });
-    it('should remove the column when clicked on ⊕ sign', async () => {
-      const field = {
+    it('should add the column when clicked on + sign', async () => {
+      const fieldToBeAdded = {
         name: 'agent.id',
       };
 
@@ -556,29 +564,29 @@ describe('unified timeline', () => {
 
       expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('9');
 
-      expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(0);
+      expect(screen.queryAllByTestId(`dataGridHeaderCell-${fieldToBeAdded.name}`)).toHaveLength(0);
 
       const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
 
       // / new columns does not exists yet
-      const currentColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+      const currentColumns = getTimelineFromStore(customStore).columns;
       expect(currentColumns).not.toMatchObject(
         expect.arrayContaining([
           expect.objectContaining({
-            id: field.name,
+            id: fieldToBeAdded.name,
           }),
         ])
       );
 
-      fireEvent.click(within(availableFields).getByTestId(`fieldToggle-${field.name}`));
+      fireEvent.click(within(availableFields).getByTestId(`fieldToggle-${fieldToBeAdded.name}`));
 
       // new columns should exist now
       await waitFor(() => {
-        const newColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+        const newColumns = getTimelineFromStore(customStore).columns;
         expect(newColumns).toMatchObject(
           expect.arrayContaining([
             expect.objectContaining({
-              id: field.name,
+              id: fieldToBeAdded.name,
             }),
           ])
         );
@@ -586,7 +594,7 @@ describe('unified timeline', () => {
     });
 
     it('should remove the column when clicked on X sign', async () => {
-      const field = {
+      const fieldToBeRemoved = {
         name: 'event.severity',
       };
 
@@ -597,29 +605,31 @@ describe('unified timeline', () => {
         expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toBeVisible();
       });
 
-      expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(1);
+      expect(screen.queryAllByTestId(`dataGridHeaderCell-${fieldToBeRemoved.name}`)).toHaveLength(
+        1
+      );
 
       const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
 
-      // / new columns does exists
-      const currentColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+      // new columns does exists
+      const currentColumns = getTimelineFromStore(customStore).columns;
       expect(currentColumns).toMatchObject(
         expect.arrayContaining([
           expect.objectContaining({
-            id: field.name,
+            id: fieldToBeRemoved.name,
           }),
         ])
       );
 
-      fireEvent.click(within(availableFields).getByTestId(`fieldToggle-${field.name}`));
+      fireEvent.click(within(availableFields).getByTestId(`fieldToggle-${fieldToBeRemoved.name}`));
 
-      // new columns should exist now
+      // new columns should not exist now
       await waitFor(() => {
-        const newColumns = customStore.getState().timeline.timelineById[TimelineId.test].columns;
+        const newColumns = getTimelineFromStore(customStore).columns;
         expect(newColumns).not.toMatchObject(
           expect.arrayContaining([
             expect.objectContaining({
-              id: field.name,
+              id: fieldToBeRemoved.name,
             }),
           ])
         );
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
index 5a76e2949d98c8..1c4a923e7efcc1 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.tsx
@@ -322,10 +322,6 @@ const UnifiedTimelineComponent: React.FC<Props> = ({
     onFieldEdited();
   }, [onFieldEdited]);
 
-  if (!dataView) {
-    return null;
-  }
-
   return (
     <TimelineBodyContainer className="timelineBodyContainer" ref={setSidebarContainer}>
       <TimelineResizableLayout
@@ -410,6 +406,6 @@ const UnifiedTimelineComponent: React.FC<Props> = ({
   );
 };
 
-export const UnifiedTimeline = withDataView<Props>(React.memo(UnifiedTimelineComponent));
+export const UnifiedTimeline = React.memo(withDataView<Props>(UnifiedTimelineComponent));
 // eslint-disable-next-line import/no-default-export
 export { UnifiedTimeline as default };
diff --git a/x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts b/x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts
index 21c6ee0ffee160..7ff9cb00a47e02 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts
+++ b/x-pack/plugins/security_solution/public/timelines/store/helpers.test.ts
@@ -1840,9 +1840,7 @@ describe('Timeline', () => {
   describe('#updateTimelineColumnWidth', () => {
     let mockTimelineById: TimelineById;
     beforeEach(() => {
-      mockTimelineById = {
-        ...structuredClone(timelineByIdMock),
-      };
+      mockTimelineById = structuredClone(timelineByIdMock);
       mockTimelineById.foo.columns = structuredClone(defaultUdtHeaders);
     });
 

From 8694f9e036a28d3bcf74629631a16a6fe5b7a5d1 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Wed, 27 Mar 2024 07:36:15 +0100
Subject: [PATCH 54/65] fix: try increasing test timeout

---
 .../components/timeline/unified_components/index.test.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
index 171465a8666388..ee93c78b7ead41 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
@@ -250,7 +250,7 @@ describe('unified timeline', () => {
         const newColumns = getTimelineFromStore(customStore).columns;
         expect(newColumns[0].id).toBe('message');
       });
-    });
+    }, 100000);
 
     it('should move column right correctly ', async () => {
       const field = {
@@ -286,7 +286,7 @@ describe('unified timeline', () => {
         const newColumns = getTimelineFromStore(customStore).columns;
         expect(newColumns[2].id).toBe('message');
       });
-    });
+    }, 100000);
 
     it('should remove column ', async () => {
       const field = {

From 56c1ae667a277b95ff0bdabf1f203f7bcf280ff0 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Wed, 27 Mar 2024 07:51:27 +0100
Subject: [PATCH 55/65] update test snapshot

---
 .../drag_drop_context_wrapper.test.tsx.snap       | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/__snapshots__/drag_drop_context_wrapper.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/__snapshots__/drag_drop_context_wrapper.test.tsx.snap
index 5ec3b5e1581382..c4941d1ff08b95 100644
--- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/__snapshots__/drag_drop_context_wrapper.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/__snapshots__/drag_drop_context_wrapper.test.tsx.snap
@@ -647,6 +647,21 @@ exports[`DragDropContextWrapper rendering it renders against the snapshot 1`] =
           },
         },
       },
+      "process": Object {
+        "fields": Object {
+          "process.args": Object {
+            "aggregatable": true,
+            "esTypes": Array [
+              "keyword",
+            ],
+            "format": "",
+            "name": "process.args",
+            "readFromDocValues": true,
+            "searchable": true,
+            "type": "string",
+          },
+        },
+      },
       "source": Object {
         "fields": Object {
           "source.ip": Object {

From 0bfc88bd594baecd6a46824339c29f47a50ff6ed Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Wed, 27 Mar 2024 09:42:32 +0100
Subject: [PATCH 56/65] fix: add timeouts to test

---
 .../body/unified_timeline_body.test.tsx       |   8 +-
 .../unified_components/index.test.tsx         | 755 ++++++++++--------
 2 files changed, 408 insertions(+), 355 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.test.tsx
index 3b1756dde8b83e..401fe8763ada50 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.test.tsx
@@ -15,7 +15,11 @@ import { UnifiedTimelineBody } from './unified_timeline_body';
 import { render, screen } from '@testing-library/react';
 import { defaultHeaders, mockTimelineData, TestProviders } from '../../../../common/mock';
 
-jest.mock('../unified_components');
+jest.mock('../unified_components', () => {
+  return {
+    UnifiedTimeline: jest.fn(),
+  };
+});
 
 const mockEventsData = structuredClone(mockTimelineData);
 
@@ -54,7 +58,7 @@ const MockUnifiedTimelineComponent = jest.fn(() => <div />);
 
 describe('UnifiedTimelineBody', () => {
   beforeEach(() => {
-    (UnifiedTimeline as jest.Mock).mockImplementation(MockUnifiedTimelineComponent);
+    (UnifiedTimeline as unknown as jest.Mock).mockImplementation(MockUnifiedTimelineComponent);
   });
   it('should pass correct page rows', () => {
     const { rerender } = renderTestComponents();
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
index ee93c78b7ead41..2ca35818df7444 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/index.test.tsx
@@ -79,6 +79,10 @@ const columnsToDisplay = [
   },
 ];
 
+// These tests can take more than standard timeout of 5s
+// that is why we are setting it to 10s
+const SPECIAL_TEST_TIMEOUT = 10000;
+
 const localMockedTimelineData = structuredClone(mockTimelineData);
 
 const TestComponent = (props: Partial<ComponentProps<typeof UnifiedTimeline>>) => {
@@ -216,424 +220,469 @@ describe('unified timeline', () => {
   });
 
   describe('columns', () => {
-    it('should move column left correctly ', async () => {
-      const field = {
-        name: 'message',
-      };
-      const { container } = renderTestComponents();
-
-      await waitFor(() => {
-        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
-      });
-      expect(container.querySelector(`[data-gridcell-column-id="${field.name}"]`)).toHaveAttribute(
-        'data-gridcell-column-index',
-        '3'
-      );
-
-      expect(
-        container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
-      ).toBeInTheDocument();
-
-      fireEvent.click(
-        container.querySelector(
-          `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
-        ) as HTMLElement
-      );
-
-      await waitFor(() => {
-        expect(screen.getByTitle('Move left')).toBeEnabled();
-      });
-
-      fireEvent.click(screen.getByTitle('Move left'));
-
-      await waitFor(() => {
-        const newColumns = getTimelineFromStore(customStore).columns;
-        expect(newColumns[0].id).toBe('message');
-      });
-    }, 100000);
-
-    it('should move column right correctly ', async () => {
-      const field = {
-        name: 'message',
-      };
-      const { container } = renderTestComponents();
-
-      await waitFor(() => {
-        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
-      });
-      expect(container.querySelector(`[data-gridcell-column-id="${field.name}"]`)).toHaveAttribute(
-        'data-gridcell-column-index',
-        '3'
-      );
-
-      expect(
-        container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
-      ).toBeInTheDocument();
-
-      fireEvent.click(
-        container.querySelector(
-          `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
-        ) as HTMLElement
-      );
-
-      await waitFor(() => {
-        expect(screen.getByTitle('Move right')).toBeEnabled();
-      });
-
-      fireEvent.click(screen.getByTitle('Move right'));
-
-      await waitFor(() => {
-        const newColumns = getTimelineFromStore(customStore).columns;
-        expect(newColumns[2].id).toBe('message');
-      });
-    }, 100000);
-
-    it('should remove column ', async () => {
-      const field = {
-        name: 'message',
-      };
-      const { container } = renderTestComponents();
-
-      await waitFor(() => {
-        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
-      });
-
-      expect(
-        container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
-      ).toBeInTheDocument();
-
-      fireEvent.click(
-        container.querySelector(
-          `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
-        ) as HTMLElement
-      );
-
-      // column is currently present in the state
-      const currentColumns = getTimelineFromStore(customStore).columns;
-      expect(currentColumns).toMatchObject(
-        expect.arrayContaining([
-          expect.objectContaining({
-            id: field.name,
-          }),
-        ])
-      );
-
-      await waitFor(() => {
-        expect(screen.getByTitle('Remove column')).toBeVisible();
-      });
-
-      fireEvent.click(screen.getByTitle('Remove column'));
-
-      // column should now be removed
-      await waitFor(() => {
-        const newColumns = getTimelineFromStore(customStore).columns;
-        expect(newColumns).not.toMatchObject(
+    it(
+      'should move column left correctly ',
+      async () => {
+        const field = {
+          name: 'message',
+        };
+        const { container } = renderTestComponents();
+
+        await waitFor(() => {
+          expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+        });
+        expect(
+          container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
+        ).toHaveAttribute('data-gridcell-column-index', '3');
+
+        expect(
+          container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
+        ).toBeInTheDocument();
+
+        fireEvent.click(
+          container.querySelector(
+            `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
+          ) as HTMLElement
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTitle('Move left')).toBeEnabled();
+        });
+
+        fireEvent.click(screen.getByTitle('Move left'));
+
+        await waitFor(() => {
+          const newColumns = getTimelineFromStore(customStore).columns;
+          expect(newColumns[0].id).toBe('message');
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
+
+    it(
+      'should move column right correctly ',
+      async () => {
+        const field = {
+          name: 'message',
+        };
+        const { container } = renderTestComponents();
+
+        await waitFor(() => {
+          expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+        });
+        expect(
+          container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
+        ).toHaveAttribute('data-gridcell-column-index', '3');
+
+        expect(
+          container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
+        ).toBeInTheDocument();
+
+        fireEvent.click(
+          container.querySelector(
+            `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
+          ) as HTMLElement
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTitle('Move right')).toBeEnabled();
+        });
+
+        fireEvent.click(screen.getByTitle('Move right'));
+
+        await waitFor(() => {
+          const newColumns = getTimelineFromStore(customStore).columns;
+          expect(newColumns[2].id).toBe('message');
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
+
+    it(
+      'should remove column ',
+      async () => {
+        const field = {
+          name: 'message',
+        };
+        const { container } = renderTestComponents();
+
+        await waitFor(() => {
+          expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+        });
+
+        expect(
+          container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
+        ).toBeInTheDocument();
+
+        fireEvent.click(
+          container.querySelector(
+            `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
+          ) as HTMLElement
+        );
+
+        // column is currently present in the state
+        const currentColumns = getTimelineFromStore(customStore).columns;
+        expect(currentColumns).toMatchObject(
           expect.arrayContaining([
             expect.objectContaining({
               id: field.name,
             }),
           ])
         );
-      });
-    });
 
-    it('should sort date column', async () => {
-      const { container } = renderTestComponents();
-      await waitFor(() => {
-        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
-      });
+        await waitFor(() => {
+          expect(screen.getByTitle('Remove column')).toBeVisible();
+        });
 
-      expect(container.querySelector('[data-gridcell-column-id="@timestamp"]')).toBeInTheDocument();
+        fireEvent.click(screen.getByTitle('Remove column'));
 
-      fireEvent.click(
-        container.querySelector(
-          '[data-gridcell-column-id="@timestamp"] .euiDataGridHeaderCell__icon'
-        ) as HTMLElement
-      );
+        // column should now be removed
+        await waitFor(() => {
+          const newColumns = getTimelineFromStore(customStore).columns;
+          expect(newColumns).not.toMatchObject(
+            expect.arrayContaining([
+              expect.objectContaining({
+                id: field.name,
+              }),
+            ])
+          );
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-      await waitFor(() => {
-        expect(screen.getByTitle('Sort Old-New')).toBeVisible();
-      });
-      expect(screen.getByTitle('Sort New-Old')).toBeVisible();
+    it(
+      'should sort date column',
+      async () => {
+        const { container } = renderTestComponents();
+        await waitFor(() => {
+          expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+        });
 
-      useTimelineEventsMock.mockClear();
+        expect(
+          container.querySelector('[data-gridcell-column-id="@timestamp"]')
+        ).toBeInTheDocument();
 
-      fireEvent.click(screen.getByTitle('Sort Old-New'));
+        fireEvent.click(
+          container.querySelector(
+            '[data-gridcell-column-id="@timestamp"] .euiDataGridHeaderCell__icon'
+          ) as HTMLElement
+        );
 
-      await waitFor(() => {
-        const newSort = getTimelineFromStore(customStore).sort;
-        expect(newSort).toMatchObject([
-          {
-            columnId: '@timestamp',
-            columnType: 'date',
-            sortDirection: 'asc',
-          },
-        ]);
-      });
-    });
+        await waitFor(() => {
+          expect(screen.getByTitle('Sort Old-New')).toBeVisible();
+        });
+        expect(screen.getByTitle('Sort New-Old')).toBeVisible();
 
-    it('should sort string column correctly', async () => {
-      const { container } = renderTestComponents();
-      await waitFor(() => {
-        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
-      });
+        useTimelineEventsMock.mockClear();
 
-      expect(container.querySelector('[data-gridcell-column-id="host.name"]')).toBeInTheDocument();
+        fireEvent.click(screen.getByTitle('Sort Old-New'));
 
-      fireEvent.click(
-        container.querySelector(
-          '[data-gridcell-column-id="host.name"] .euiDataGridHeaderCell__icon'
-        ) as HTMLElement
-      );
+        await waitFor(() => {
+          const newSort = getTimelineFromStore(customStore).sort;
+          expect(newSort).toMatchObject([
+            {
+              columnId: '@timestamp',
+              columnType: 'date',
+              sortDirection: 'asc',
+            },
+          ]);
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-      await waitFor(() => {
-        expect(screen.getByTestId('dataGridHeaderCellActionGroup-host.name')).toBeVisible();
-      });
+    it(
+      'should sort string column correctly',
+      async () => {
+        const { container } = renderTestComponents();
+        await waitFor(() => {
+          expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+        });
 
-      expect(screen.getByTitle('Sort A-Z')).toBeVisible();
-      expect(screen.getByTitle('Sort Z-A')).toBeVisible();
+        expect(
+          container.querySelector('[data-gridcell-column-id="host.name"]')
+        ).toBeInTheDocument();
 
-      useTimelineEventsMock.mockClear();
+        fireEvent.click(
+          container.querySelector(
+            '[data-gridcell-column-id="host.name"] .euiDataGridHeaderCell__icon'
+          ) as HTMLElement
+        );
 
-      fireEvent.click(screen.getByTitle('Sort A-Z'));
+        await waitFor(() => {
+          expect(screen.getByTestId('dataGridHeaderCellActionGroup-host.name')).toBeVisible();
+        });
 
-      await waitFor(() => {
-        const newSort = getTimelineFromStore(customStore).sort;
-        expect(newSort).toMatchObject([
-          {
-            columnId: '@timestamp',
-            columnType: 'date',
-            sortDirection: 'desc',
-          },
-          {
-            sortDirection: 'asc',
-            columnId: 'host.name',
-            columnType: 'string',
-          },
-        ]);
-      });
-    });
+        expect(screen.getByTitle('Sort A-Z')).toBeVisible();
+        expect(screen.getByTitle('Sort Z-A')).toBeVisible();
+
+        useTimelineEventsMock.mockClear();
+
+        fireEvent.click(screen.getByTitle('Sort A-Z'));
+
+        await waitFor(() => {
+          const newSort = getTimelineFromStore(customStore).sort;
+          expect(newSort).toMatchObject([
+            {
+              columnId: '@timestamp',
+              columnType: 'date',
+              sortDirection: 'desc',
+            },
+            {
+              sortDirection: 'asc',
+              columnId: 'host.name',
+              columnType: 'string',
+            },
+          ]);
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-    it('should sort number column', async () => {
-      const field = {
-        name: 'event.severity',
-        type: 'number',
-      };
+    it(
+      'should sort number column',
+      async () => {
+        const field = {
+          name: 'event.severity',
+          type: 'number',
+        };
+
+        const { container } = renderTestComponents();
+        await waitFor(() => {
+          expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+        });
 
-      const { container } = renderTestComponents();
-      await waitFor(() => {
-        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
-      });
+        expect(
+          container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
+        ).toBeInTheDocument();
 
-      expect(
-        container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
-      ).toBeInTheDocument();
+        fireEvent.click(
+          container.querySelector(
+            `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
+          ) as HTMLElement
+        );
 
-      fireEvent.click(
-        container.querySelector(
-          `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
-        ) as HTMLElement
-      );
+        await waitFor(() => {
+          expect(screen.getByTestId(`dataGridHeaderCellActionGroup-${field.name}`)).toBeVisible();
+        });
 
-      await waitFor(() => {
-        expect(screen.getByTestId(`dataGridHeaderCellActionGroup-${field.name}`)).toBeVisible();
-      });
+        expect(screen.getByTitle('Sort Low-High')).toBeVisible();
+        expect(screen.getByTitle('Sort High-Low')).toBeVisible();
+
+        useTimelineEventsMock.mockClear();
+
+        fireEvent.click(screen.getByTitle('Sort Low-High'));
+
+        await waitFor(() => {
+          const newSort = getTimelineFromStore(customStore).sort;
+          expect(newSort).toMatchObject([
+            {
+              columnId: '@timestamp',
+              columnType: 'date',
+              sortDirection: 'desc',
+            },
+            {
+              sortDirection: 'asc',
+              columnId: 'event.severity',
+              columnType: 'number',
+            },
+          ]);
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-      expect(screen.getByTitle('Sort Low-High')).toBeVisible();
-      expect(screen.getByTitle('Sort High-Low')).toBeVisible();
+    it(
+      'should be able to edit DataView Field',
+      async () => {
+        const field = {
+          name: 'message',
+        };
+        const { container } = renderTestComponents();
 
-      useTimelineEventsMock.mockClear();
+        await waitFor(() => {
+          expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+        });
+        expect(
+          container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
+        ).toHaveAttribute('data-gridcell-column-index', '3');
+
+        expect(
+          container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
+        ).toBeInTheDocument();
+
+        fireEvent.click(
+          container.querySelector(
+            `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
+          ) as HTMLElement
+        );
 
-      fireEvent.click(screen.getByTitle('Sort Low-High'));
+        await waitFor(() => {
+          expect(screen.getByTitle('Edit data view field')).toBeEnabled();
+        });
 
-      await waitFor(() => {
-        const newSort = getTimelineFromStore(customStore).sort;
-        expect(newSort).toMatchObject([
-          {
-            columnId: '@timestamp',
-            columnType: 'date',
-            sortDirection: 'desc',
-          },
-          {
-            sortDirection: 'asc',
-            columnId: 'event.severity',
-            columnType: 'number',
-          },
-        ]);
-      });
-    });
+        fireEvent.click(screen.getByTitle('Edit data view field'));
 
-    it('should be able to edit DataView Field', async () => {
-      const field = {
-        name: 'message',
-      };
-      const { container } = renderTestComponents();
-
-      await waitFor(() => {
-        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
-      });
-      expect(container.querySelector(`[data-gridcell-column-id="${field.name}"]`)).toHaveAttribute(
-        'data-gridcell-column-index',
-        '3'
-      );
-
-      expect(
-        container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
-      ).toBeInTheDocument();
-
-      fireEvent.click(
-        container.querySelector(
-          `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
-        ) as HTMLElement
-      );
-
-      await waitFor(() => {
-        expect(screen.getByTitle('Edit data view field')).toBeEnabled();
-      });
-
-      fireEvent.click(screen.getByTitle('Edit data view field'));
-
-      await waitFor(() => {
-        expect(kibanaServiceMock.dataViewFieldEditor.openEditor).toHaveBeenNthCalledWith(1, {
-          ctx: {
-            dataView: expect.objectContaining({
-              id: 'security-solution',
-            }),
-          },
-          fieldName: 'message',
-          onSave: expect.any(Function),
+        await waitFor(() => {
+          expect(kibanaServiceMock.dataViewFieldEditor.openEditor).toHaveBeenNthCalledWith(1, {
+            ctx: {
+              dataView: expect.objectContaining({
+                id: 'security-solution',
+              }),
+            },
+            fieldName: 'message',
+            onSave: expect.any(Function),
+          });
         });
-      });
-    });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
   });
 
   describe('unified field list', () => {
-    it('should be able to add filters', async () => {
-      const field = {
-        name: 'event.severity',
-      };
-
-      renderTestComponents();
-      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
-
-      await waitFor(() => {
-        expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toBeVisible();
-      });
+    it(
+      'should be able to add filters',
+      async () => {
+        const field = {
+          name: 'event.severity',
+        };
+
+        renderTestComponents();
+        expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+
+        await waitFor(() => {
+          expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toBeVisible();
+        });
 
-      expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(1);
+        expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(1);
 
-      const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
+        const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
 
-      fireEvent.click(within(availableFields).getByTestId(`field-${field.name}-showDetails`));
+        fireEvent.click(within(availableFields).getByTestId(`field-${field.name}-showDetails`));
 
-      await waitFor(() => {
-        expect(screen.getByTestId(`timelineFieldListPanelAddExistFilter-${field.name}`));
-      });
+        await waitFor(() => {
+          expect(screen.getByTestId(`timelineFieldListPanelAddExistFilter-${field.name}`));
+        });
 
-      fireEvent.click(screen.getByTestId(`timelineFieldListPanelAddExistFilter-${field.name}`));
-      await waitFor(() => {
-        expect(mockTimelineFilterManager.addFilters).toHaveBeenNthCalledWith(
-          1,
-          expect.arrayContaining([
-            expect.objectContaining({
-              query: {
-                exists: {
-                  field: field.name,
+        fireEvent.click(screen.getByTestId(`timelineFieldListPanelAddExistFilter-${field.name}`));
+        await waitFor(() => {
+          expect(mockTimelineFilterManager.addFilters).toHaveBeenNthCalledWith(
+            1,
+            expect.arrayContaining([
+              expect.objectContaining({
+                query: {
+                  exists: {
+                    field: field.name,
+                  },
                 },
-              },
-              meta: expect.objectContaining({
-                negate: false,
-                disabled: false,
+                meta: expect.objectContaining({
+                  negate: false,
+                  disabled: false,
+                }),
               }),
-            }),
-          ])
-        );
-      });
-    });
-    it('should add the column when clicked on + sign', async () => {
-      const fieldToBeAdded = {
-        name: 'agent.id',
-      };
-
-      renderTestComponents();
-      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
-
-      await waitFor(() => {
-        expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toBeVisible();
-      });
-
-      expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('9');
-
-      expect(screen.queryAllByTestId(`dataGridHeaderCell-${fieldToBeAdded.name}`)).toHaveLength(0);
+            ])
+          );
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
+    it(
+      'should add the column when clicked on + sign',
+      async () => {
+        const fieldToBeAdded = {
+          name: 'agent.id',
+        };
+
+        renderTestComponents();
+        expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+
+        await waitFor(() => {
+          expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toBeVisible();
+        });
 
-      const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
+        expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('9');
 
-      // / new columns does not exists yet
-      const currentColumns = getTimelineFromStore(customStore).columns;
-      expect(currentColumns).not.toMatchObject(
-        expect.arrayContaining([
-          expect.objectContaining({
-            id: fieldToBeAdded.name,
-          }),
-        ])
-      );
+        expect(screen.queryAllByTestId(`dataGridHeaderCell-${fieldToBeAdded.name}`)).toHaveLength(
+          0
+        );
 
-      fireEvent.click(within(availableFields).getByTestId(`fieldToggle-${fieldToBeAdded.name}`));
+        const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
 
-      // new columns should exist now
-      await waitFor(() => {
-        const newColumns = getTimelineFromStore(customStore).columns;
-        expect(newColumns).toMatchObject(
+        // / new columns does not exists yet
+        const currentColumns = getTimelineFromStore(customStore).columns;
+        expect(currentColumns).not.toMatchObject(
           expect.arrayContaining([
             expect.objectContaining({
               id: fieldToBeAdded.name,
             }),
           ])
         );
-      });
-    });
 
-    it('should remove the column when clicked on X sign', async () => {
-      const fieldToBeRemoved = {
-        name: 'event.severity',
-      };
+        fireEvent.click(within(availableFields).getByTestId(`fieldToggle-${fieldToBeAdded.name}`));
 
-      renderTestComponents();
-      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+        // new columns should exist now
+        await waitFor(() => {
+          const newColumns = getTimelineFromStore(customStore).columns;
+          expect(newColumns).toMatchObject(
+            expect.arrayContaining([
+              expect.objectContaining({
+                id: fieldToBeAdded.name,
+              }),
+            ])
+          );
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-      await waitFor(() => {
-        expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toBeVisible();
-      });
+    it(
+      'should remove the column when clicked on X sign',
+      async () => {
+        const fieldToBeRemoved = {
+          name: 'event.severity',
+        };
 
-      expect(screen.queryAllByTestId(`dataGridHeaderCell-${fieldToBeRemoved.name}`)).toHaveLength(
-        1
-      );
+        renderTestComponents();
+        expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
 
-      const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
+        await waitFor(() => {
+          expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toBeVisible();
+        });
 
-      // new columns does exists
-      const currentColumns = getTimelineFromStore(customStore).columns;
-      expect(currentColumns).toMatchObject(
-        expect.arrayContaining([
-          expect.objectContaining({
-            id: fieldToBeRemoved.name,
-          }),
-        ])
-      );
+        expect(screen.queryAllByTestId(`dataGridHeaderCell-${fieldToBeRemoved.name}`)).toHaveLength(
+          1
+        );
 
-      fireEvent.click(within(availableFields).getByTestId(`fieldToggle-${fieldToBeRemoved.name}`));
+        const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
 
-      // new columns should not exist now
-      await waitFor(() => {
-        const newColumns = getTimelineFromStore(customStore).columns;
-        expect(newColumns).not.toMatchObject(
+        // new columns does exists
+        const currentColumns = getTimelineFromStore(customStore).columns;
+        expect(currentColumns).toMatchObject(
           expect.arrayContaining([
             expect.objectContaining({
               id: fieldToBeRemoved.name,
             }),
           ])
         );
-      });
-    });
+
+        fireEvent.click(
+          within(availableFields).getByTestId(`fieldToggle-${fieldToBeRemoved.name}`)
+        );
+
+        // new columns should not exist now
+        await waitFor(() => {
+          const newColumns = getTimelineFromStore(customStore).columns;
+          expect(newColumns).not.toMatchObject(
+            expect.arrayContaining([
+              expect.objectContaining({
+                id: fieldToBeRemoved.name,
+              }),
+            ])
+          );
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
   });
 });

From 770f1f86c7842781eefc209301a9eb36bf7e7346 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Wed, 27 Mar 2024 15:42:00 +0100
Subject: [PATCH 57/65] test: add timeout

---
 .../query_tab_unified_components.test.tsx     | 578 ++++++++++--------
 .../data_table/index.test.tsx                 | 472 +++++++-------
 2 files changed, 577 insertions(+), 473 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
index de7542ee923146..e692e9441caa90 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
@@ -54,6 +54,10 @@ jest.mock('../../../../common/lib/kuery');
 
 jest.mock('../../../../common/hooks/use_experimental_features');
 
+// These tests can take more than standard timeout of 5s
+// that is why we are setting it to 10s
+const SPECIAL_TEST_TIMEOUT = 10000;
+
 const useIsExperimentalFeatureEnabledMock = jest.fn((feature: keyof ExperimentalFeatures) => {
   if (feature === 'unifiedComponentsInTimelineEnabled') {
     return true;
@@ -174,330 +178,378 @@ describe('query tab with unified timeline', () => {
   });
 
   describe('render', () => {
-    it('should render unifiedDataTable in timeline', async () => {
-      renderTestComponents();
-      await waitFor(() => {
-        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
-      });
-    });
+    it(
+      'should render unifiedDataTable in timeline',
+      async () => {
+        renderTestComponents();
+        await waitFor(() => {
+          expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-    it('should render unified-field-list in timeline', async () => {
-      renderTestComponents();
-      await waitFor(() => {
-        expect(screen.getByTestId('timeline-sidebar')).toBeVisible();
-      });
-    });
+    it(
+      'should render unified-field-list in timeline',
+      async () => {
+        renderTestComponents();
+        await waitFor(() => {
+          expect(screen.getByTestId('timeline-sidebar')).toBeVisible();
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
   });
 
   describe('pagination', () => {
-    it('should paginate correctly', async () => {
-      renderTestComponents();
-
-      await waitFor(() => {
-        expect(screen.getByTestId('tablePaginationPopoverButton')).toHaveTextContent(
-          'Rows per page: 5'
-        );
-      });
-
-      expect(screen.getByTestId('pagination-button-0')).toHaveAttribute('aria-current', 'true');
-      expect(screen.getByTestId('pagination-button-6')).toBeVisible();
-
-      fireEvent.click(screen.getByTestId('pagination-button-6'));
-
-      await waitFor(() => {
-        expect(screen.getByTestId('pagination-button-6')).toHaveAttribute('aria-current', 'true');
-      });
-    });
+    it(
+      'should paginate correctly',
+      async () => {
+        renderTestComponents();
+
+        await waitFor(() => {
+          expect(screen.getByTestId('tablePaginationPopoverButton')).toHaveTextContent(
+            'Rows per page: 5'
+          );
+        });
 
-    it('should load more records according to sample size correctly', async () => {
-      renderTestComponents();
-      await waitFor(() => {
         expect(screen.getByTestId('pagination-button-0')).toHaveAttribute('aria-current', 'true');
         expect(screen.getByTestId('pagination-button-6')).toBeVisible();
-      });
-      // Go to last page
-      fireEvent.click(screen.getByTestId('pagination-button-6'));
-      await waitFor(() => {
-        expect(screen.getByTestId('dscGridSampleSizeFetchMoreLink')).toBeVisible();
-      });
-      fireEvent.click(screen.getByTestId('dscGridSampleSizeFetchMoreLink'));
-      expect(loadPageMock).toHaveBeenNthCalledWith(1, 1);
-    });
-  });
-
-  describe('columns', () => {
-    it('should move column left/right correctly ', async () => {
-      const { container } = renderTestComponents();
-
-      await waitFor(() => {
-        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
-      });
-      expect(container.querySelector('[data-gridcell-column-id="message"]')).toHaveAttribute(
-        'data-gridcell-column-index',
-        '12'
-      );
 
-      expect(container.querySelector('[data-gridcell-column-id="message"]')).toBeInTheDocument();
+        fireEvent.click(screen.getByTestId('pagination-button-6'));
 
-      fireEvent.click(
-        container.querySelector(
-          '[data-gridcell-column-id="message"] .euiDataGridHeaderCell__icon'
-        ) as HTMLElement
-      );
+        await waitFor(() => {
+          expect(screen.getByTestId('pagination-button-6')).toHaveAttribute('aria-current', 'true');
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-      await waitFor(() => {
-        expect(screen.getByTitle('Move left')).toBeEnabled();
-      });
+    it(
+      'should load more records according to sample size correctly',
+      async () => {
+        renderTestComponents();
+        await waitFor(() => {
+          expect(screen.getByTestId('pagination-button-0')).toHaveAttribute('aria-current', 'true');
+          expect(screen.getByTestId('pagination-button-6')).toBeVisible();
+        });
+        // Go to last page
+        fireEvent.click(screen.getByTestId('pagination-button-6'));
+        await waitFor(() => {
+          expect(screen.getByTestId('dscGridSampleSizeFetchMoreLink')).toBeVisible();
+        });
+        fireEvent.click(screen.getByTestId('dscGridSampleSizeFetchMoreLink'));
+        expect(loadPageMock).toHaveBeenNthCalledWith(1, 1);
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
+  });
 
-      fireEvent.click(screen.getByTitle('Move left'));
+  describe('columns', () => {
+    it(
+      'should move column left/right correctly ',
+      async () => {
+        const { container } = renderTestComponents();
 
-      await waitFor(() => {
+        await waitFor(() => {
+          expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+        });
         expect(container.querySelector('[data-gridcell-column-id="message"]')).toHaveAttribute(
           'data-gridcell-column-index',
-          '11'
+          '12'
         );
-      });
-    }, 10000);
-
-    it('should remove column left/right ', async () => {
-      const { container } = renderTestComponents();
-
-      await waitFor(() => {
-        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
-      });
-
-      expect(container.querySelector('[data-gridcell-column-id="message"]')).toBeInTheDocument();
 
-      fireEvent.click(
-        container.querySelector(
-          '[data-gridcell-column-id="message"] .euiDataGridHeaderCell__icon'
-        ) as HTMLElement
-      );
-
-      await waitFor(() => {
-        expect(screen.getByTitle('Remove column')).toBeVisible();
-      });
-
-      fireEvent.click(screen.getByTitle('Remove column'));
+        expect(container.querySelector('[data-gridcell-column-id="message"]')).toBeInTheDocument();
 
-      await waitFor(() => {
-        expect(
-          container.querySelector('[data-gridcell-column-id="message"]')
-        ).not.toBeInTheDocument();
-      });
-    });
+        fireEvent.click(
+          container.querySelector(
+            '[data-gridcell-column-id="message"] .euiDataGridHeaderCell__icon'
+          ) as HTMLElement
+        );
 
-    it('should sort date column', async () => {
-      const { container } = renderTestComponents();
-      await waitFor(() => {
-        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
-      });
+        await waitFor(() => {
+          expect(screen.getByTitle('Move left')).toBeEnabled();
+        });
 
-      expect(container.querySelector('[data-gridcell-column-id="@timestamp"]')).toBeInTheDocument();
+        fireEvent.click(screen.getByTitle('Move left'));
 
-      fireEvent.click(
-        container.querySelector(
-          '[data-gridcell-column-id="@timestamp"] .euiDataGridHeaderCell__icon'
-        ) as HTMLElement
-      );
+        await waitFor(() => {
+          expect(container.querySelector('[data-gridcell-column-id="message"]')).toHaveAttribute(
+            'data-gridcell-column-index',
+            '11'
+          );
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-      await waitFor(() => {
-        expect(screen.getByTitle('Sort Old-New')).toBeVisible();
-      });
-      expect(screen.getByTitle('Sort New-Old')).toBeVisible();
+    it(
+      'should remove column left/right ',
+      async () => {
+        const { container } = renderTestComponents();
 
-      useTimelineEventsMock.mockClear();
+        await waitFor(() => {
+          expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+        });
 
-      fireEvent.click(screen.getByTitle('Sort Old-New'));
+        expect(container.querySelector('[data-gridcell-column-id="message"]')).toBeInTheDocument();
 
-      await waitFor(() => {
-        expect(useTimelineEventsMock).toHaveBeenNthCalledWith(
-          1,
-          expect.objectContaining({
-            sort: [
-              {
-                direction: 'asc',
-                esTypes: [],
-                field: '@timestamp',
-                type: 'date',
-              },
-            ],
-          })
+        fireEvent.click(
+          container.querySelector(
+            '[data-gridcell-column-id="message"] .euiDataGridHeaderCell__icon'
+          ) as HTMLElement
         );
-      });
-    });
-
-    it('should sort string column correctly', async () => {
-      const { container } = renderTestComponents();
-      await waitFor(() => {
-        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
-      });
 
-      expect(container.querySelector('[data-gridcell-column-id="host.name"]')).toBeInTheDocument();
+        await waitFor(() => {
+          expect(screen.getByTitle('Remove column')).toBeVisible();
+        });
 
-      fireEvent.click(
-        container.querySelector(
-          '[data-gridcell-column-id="host.name"] .euiDataGridHeaderCell__icon'
-        ) as HTMLElement
-      );
+        fireEvent.click(screen.getByTitle('Remove column'));
 
-      await waitFor(() => {
-        expect(screen.getByTestId('dataGridHeaderCellActionGroup-host.name')).toBeVisible();
-      });
-
-      expect(screen.getByTitle('Sort A-Z')).toBeVisible();
-      expect(screen.getByTitle('Sort Z-A')).toBeVisible();
+        await waitFor(() => {
+          expect(
+            container.querySelector('[data-gridcell-column-id="message"]')
+          ).not.toBeInTheDocument();
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-      useTimelineEventsMock.mockClear();
+    it(
+      'should sort date column',
+      async () => {
+        const { container } = renderTestComponents();
+        await waitFor(() => {
+          expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+        });
 
-      fireEvent.click(screen.getByTitle('Sort A-Z'));
+        expect(
+          container.querySelector('[data-gridcell-column-id="@timestamp"]')
+        ).toBeInTheDocument();
 
-      await waitFor(() => {
-        expect(useTimelineEventsMock).toHaveBeenNthCalledWith(
-          1,
-          expect.objectContaining({
-            sort: [
-              {
-                direction: 'desc',
-                esTypes: [],
-                field: '@timestamp',
-                type: 'date',
-              },
-              {
-                direction: 'asc',
-                esTypes: [],
-                field: 'host.name',
-                type: 'string',
-              },
-            ],
-          })
+        fireEvent.click(
+          container.querySelector(
+            '[data-gridcell-column-id="@timestamp"] .euiDataGridHeaderCell__icon'
+          ) as HTMLElement
         );
-      });
-    });
 
-    it('should sort number column', async () => {
-      const field = {
-        name: 'event.severity',
-        type: 'number',
-      };
+        await waitFor(() => {
+          expect(screen.getByTitle('Sort Old-New')).toBeVisible();
+        });
+        expect(screen.getByTitle('Sort New-Old')).toBeVisible();
+
+        useTimelineEventsMock.mockClear();
+
+        fireEvent.click(screen.getByTitle('Sort Old-New'));
+
+        await waitFor(() => {
+          expect(useTimelineEventsMock).toHaveBeenNthCalledWith(
+            1,
+            expect.objectContaining({
+              sort: [
+                {
+                  direction: 'asc',
+                  esTypes: [],
+                  field: '@timestamp',
+                  type: 'date',
+                },
+              ],
+            })
+          );
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-      const { container } = renderTestComponents();
-      await waitFor(() => {
-        expect(screen.getByTestId('discoverDocTable')).toBeVisible();
-      });
+    it(
+      'should sort string column correctly',
+      async () => {
+        const { container } = renderTestComponents();
+        await waitFor(() => {
+          expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+        });
 
-      expect(
-        container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
-      ).toBeInTheDocument();
+        expect(
+          container.querySelector('[data-gridcell-column-id="host.name"]')
+        ).toBeInTheDocument();
 
-      fireEvent.click(
-        container.querySelector(
-          `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
-        ) as HTMLElement
-      );
+        fireEvent.click(
+          container.querySelector(
+            '[data-gridcell-column-id="host.name"] .euiDataGridHeaderCell__icon'
+          ) as HTMLElement
+        );
 
-      await waitFor(() => {
-        expect(screen.getByTestId(`dataGridHeaderCellActionGroup-${field.name}`)).toBeVisible();
-      });
+        await waitFor(() => {
+          expect(screen.getByTestId('dataGridHeaderCellActionGroup-host.name')).toBeVisible();
+        });
 
-      expect(screen.getByTitle('Sort Low-High')).toBeVisible();
-      expect(screen.getByTitle('Sort High-Low')).toBeVisible();
+        expect(screen.getByTitle('Sort A-Z')).toBeVisible();
+        expect(screen.getByTitle('Sort Z-A')).toBeVisible();
+
+        useTimelineEventsMock.mockClear();
+
+        fireEvent.click(screen.getByTitle('Sort A-Z'));
+
+        await waitFor(() => {
+          expect(useTimelineEventsMock).toHaveBeenNthCalledWith(
+            1,
+            expect.objectContaining({
+              sort: [
+                {
+                  direction: 'desc',
+                  esTypes: [],
+                  field: '@timestamp',
+                  type: 'date',
+                },
+                {
+                  direction: 'asc',
+                  esTypes: [],
+                  field: 'host.name',
+                  type: 'string',
+                },
+              ],
+            })
+          );
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-      useTimelineEventsMock.mockClear();
+    it(
+      'should sort number column',
+      async () => {
+        const field = {
+          name: 'event.severity',
+          type: 'number',
+        };
+
+        const { container } = renderTestComponents();
+        await waitFor(() => {
+          expect(screen.getByTestId('discoverDocTable')).toBeVisible();
+        });
 
-      fireEvent.click(screen.getByTitle('Sort Low-High'));
+        expect(
+          container.querySelector(`[data-gridcell-column-id="${field.name}"]`)
+        ).toBeInTheDocument();
 
-      await waitFor(() => {
-        expect(useTimelineEventsMock).toHaveBeenNthCalledWith(
-          1,
-          expect.objectContaining({
-            sort: [
-              {
-                direction: 'desc',
-                esTypes: [],
-                field: '@timestamp',
-                type: 'date',
-              },
-              {
-                direction: 'asc',
-                esTypes: [],
-                field: field.name,
-                type: field.type,
-              },
-            ],
-          })
+        fireEvent.click(
+          container.querySelector(
+            `[data-gridcell-column-id="${field.name}"] .euiDataGridHeaderCell__icon`
+          ) as HTMLElement
         );
-      });
-    });
+
+        await waitFor(() => {
+          expect(screen.getByTestId(`dataGridHeaderCellActionGroup-${field.name}`)).toBeVisible();
+        });
+
+        expect(screen.getByTitle('Sort Low-High')).toBeVisible();
+        expect(screen.getByTitle('Sort High-Low')).toBeVisible();
+
+        useTimelineEventsMock.mockClear();
+
+        fireEvent.click(screen.getByTitle('Sort Low-High'));
+
+        await waitFor(() => {
+          expect(useTimelineEventsMock).toHaveBeenNthCalledWith(
+            1,
+            expect.objectContaining({
+              sort: [
+                {
+                  direction: 'desc',
+                  esTypes: [],
+                  field: '@timestamp',
+                  type: 'date',
+                },
+                {
+                  direction: 'asc',
+                  esTypes: [],
+                  field: field.name,
+                  type: field.type,
+                },
+              ],
+            })
+          );
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
   });
 
   describe('left controls', () => {
-    it('should clear all sorting', async () => {
-      renderTestComponents();
-      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+    it(
+      'should clear all sorting',
+      async () => {
+        renderTestComponents();
+        expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
 
-      expect(screen.getByTestId('dataGridColumnSortingButton')).toBeVisible();
-      expect(
-        within(screen.getByTestId('dataGridColumnSortingButton')).getByRole('marquee')
-      ).toHaveTextContent('1');
+        expect(screen.getByTestId('dataGridColumnSortingButton')).toBeVisible();
+        expect(
+          within(screen.getByTestId('dataGridColumnSortingButton')).getByRole('marquee')
+        ).toHaveTextContent('1');
 
-      fireEvent.click(screen.getByTestId('dataGridColumnSortingButton'));
+        fireEvent.click(screen.getByTestId('dataGridColumnSortingButton'));
 
-      // // timestamp sorting indicators
-      expect(
-        await screen.findByTestId('euiDataGridColumnSorting-sortColumn-@timestamp')
-      ).toBeVisible();
+        // // timestamp sorting indicators
+        expect(
+          await screen.findByTestId('euiDataGridColumnSorting-sortColumn-@timestamp')
+        ).toBeVisible();
 
-      expect(screen.getByTestId('dataGridHeaderCellSortingIcon-@timestamp')).toBeVisible();
+        expect(screen.getByTestId('dataGridHeaderCellSortingIcon-@timestamp')).toBeVisible();
 
-      fireEvent.click(screen.getByTestId('dataGridColumnSortingClearButton'));
+        fireEvent.click(screen.getByTestId('dataGridColumnSortingClearButton'));
 
-      await waitFor(() => {
-        expect(screen.queryByTestId('dataGridHeaderCellSortingIcon-@timestamp')).toBeNull();
-      });
-    });
+        await waitFor(() => {
+          expect(screen.queryByTestId('dataGridHeaderCellSortingIcon-@timestamp')).toBeNull();
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-    it('should be able to sort by multiple columns', async () => {
-      renderTestComponents();
-      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+    it(
+      'should be able to sort by multiple columns',
+      async () => {
+        renderTestComponents();
+        expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
 
-      expect(screen.getByTestId('dataGridColumnSortingButton')).toBeVisible();
-      expect(
-        within(screen.getByTestId('dataGridColumnSortingButton')).getByRole('marquee')
-      ).toHaveTextContent('1');
+        expect(screen.getByTestId('dataGridColumnSortingButton')).toBeVisible();
+        expect(
+          within(screen.getByTestId('dataGridColumnSortingButton')).getByRole('marquee')
+        ).toHaveTextContent('1');
 
-      fireEvent.click(screen.getByTestId('dataGridColumnSortingButton'));
+        fireEvent.click(screen.getByTestId('dataGridColumnSortingButton'));
 
-      // // timestamp sorting indicators
-      expect(
-        await screen.findByTestId('euiDataGridColumnSorting-sortColumn-@timestamp')
-      ).toBeVisible();
+        // // timestamp sorting indicators
+        expect(
+          await screen.findByTestId('euiDataGridColumnSorting-sortColumn-@timestamp')
+        ).toBeVisible();
 
-      expect(screen.getByTestId('dataGridHeaderCellSortingIcon-@timestamp')).toBeVisible();
+        expect(screen.getByTestId('dataGridHeaderCellSortingIcon-@timestamp')).toBeVisible();
 
-      // add more columns to sorting
-      fireEvent.click(screen.getByText(/Pick fields to sort by/));
+        // add more columns to sorting
+        fireEvent.click(screen.getByText(/Pick fields to sort by/));
 
-      await waitFor(() => {
-        expect(
-          screen.getByTestId('dataGridColumnSortingPopoverColumnSelection-event.severity')
-        ).toBeVisible();
-      });
+        await waitFor(() => {
+          expect(
+            screen.getByTestId('dataGridColumnSortingPopoverColumnSelection-event.severity')
+          ).toBeVisible();
+        });
 
-      fireEvent.click(
-        screen.getByTestId('dataGridColumnSortingPopoverColumnSelection-event.severity')
-      );
+        fireEvent.click(
+          screen.getByTestId('dataGridColumnSortingPopoverColumnSelection-event.severity')
+        );
 
-      // check new columns for sorting validity
-      await waitFor(() => {
-        expect(screen.getByTestId('dataGridHeaderCellSortingIcon-event.severity')).toBeVisible();
-      });
-      expect(
-        screen.getByTestId('euiDataGridColumnSorting-sortColumn-event.severity')
-      ).toBeVisible();
+        // check new columns for sorting validity
+        await waitFor(() => {
+          expect(screen.getByTestId('dataGridHeaderCellSortingIcon-event.severity')).toBeVisible();
+        });
+        expect(
+          screen.getByTestId('euiDataGridColumnSorting-sortColumn-event.severity')
+        ).toBeVisible();
 
-      expect(screen.getByTestId('dataGridHeaderCellSortingIcon-@timestamp')).toBeVisible();
-    }, 10000);
+        expect(screen.getByTestId('dataGridHeaderCellSortingIcon-@timestamp')).toBeVisible();
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
   });
 
   describe('unified fields list', () => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
index d9e0f582a00a29..4beae12e85a95b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.test.tsx
@@ -35,6 +35,10 @@ type TestComponentProps = Partial<ComponentProps<typeof TimelineDataTable>> & {
   store?: ReturnType<typeof createMockStore>;
 };
 
+// These tests can take more than standard timeout of 5s
+// that is why we are setting it to 10s
+const SPECIAL_TEST_TIMEOUT = 10000;
+
 const TestComponent = (props: TestComponentProps) => {
   const { store = createMockStore(), ...restProps } = props;
   useSourcererDataView();
@@ -78,268 +82,316 @@ describe('unified data table', () => {
     (useSourcererDataView as jest.Mock).mockReturnValue(mockSourcererScope);
   });
 
-  it('should display unified data table', async () => {
-    render(<TestComponent />);
-    expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
-  });
-
-  describe('custom cell rendering based on data Type', () => {
-    it('should render source.ip as link', async () => {
-      const eventsWithSourceIp = mockTimelineData.filter(
-        (event) => event.ecs?.source?.ip?.length ?? -1 > 0
-      );
-
-      const { container } = render(<TestComponent events={eventsWithSourceIp} />);
-
-      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
-
-      const sourceIpCell = container.querySelector(
-        '[data-gridcell-column-id="source.ip"][data-test-subj="dataGridRowCell"]'
-      ) as HTMLElement;
-
-      expect(sourceIpCell).toBeVisible();
-
-      expect(within(sourceIpCell).getByTestId('network-details')).toHaveClass('euiLink');
-    });
-    it('should render destination.ip as link', async () => {
-      const eventsWithDestIp = mockTimelineData.filter(
-        (event) => event.ecs?.destination?.ip?.length ?? -1 > 0
-      );
-
-      const { container } = render(<TestComponent events={eventsWithDestIp} />);
-
-      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
-
-      const destIpCell = container.querySelector(
-        '[data-gridcell-column-id="destination.ip"][data-test-subj="dataGridRowCell"]'
-      ) as HTMLElement;
-
-      expect(destIpCell).toBeVisible();
-
-      expect(within(destIpCell).getByTestId('network-details')).toHaveClass('euiLink');
-    });
-    it('should render host.name as link', async () => {
-      const hostTestId = 'host-details-button';
-      const eventsWithHostName = mockTimelineData.filter(
-        (event) => event.ecs?.host?.name?.length ?? -1 > 0
-      );
-
-      const { container } = render(<TestComponent events={eventsWithHostName} />);
-
+  it(
+    'should display unified data table',
+    async () => {
+      render(<TestComponent />);
       expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+    },
+    SPECIAL_TEST_TIMEOUT
+  );
 
-      const hostNameCell = container.querySelector(
-        '[data-gridcell-column-id="host.name"][data-test-subj="dataGridRowCell"]'
-      ) as HTMLElement;
+  describe('custom cell rendering based on data Type', () => {
+    it(
+      'should render source.ip as link',
+      async () => {
+        const eventsWithSourceIp = mockTimelineData.filter(
+          (event) => event.ecs?.source?.ip?.length ?? -1 > 0
+        );
 
-      expect(hostNameCell).toBeVisible();
+        const { container } = render(<TestComponent events={eventsWithSourceIp} />);
 
-      expect(within(hostNameCell).getByTestId(hostTestId)).toHaveClass('euiLink');
-    });
-    it('should render user.name as link', async () => {
-      const userTestId = 'users-link-anchor';
-      const eventsWithUserName = mockTimelineData.filter(
-        (event) => event.ecs?.user?.name?.length ?? -1 > 0
-      );
+        expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
 
-      const { container } = render(<TestComponent events={eventsWithUserName} />);
+        const sourceIpCell = container.querySelector(
+          '[data-gridcell-column-id="source.ip"][data-test-subj="dataGridRowCell"]'
+        ) as HTMLElement;
 
-      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+        expect(sourceIpCell).toBeVisible();
 
-      const userNameCell = container.querySelector(
-        '[data-gridcell-column-id="user.name"][data-test-subj="dataGridRowCell"]'
-      ) as HTMLElement;
+        expect(within(sourceIpCell).getByTestId('network-details')).toHaveClass('euiLink');
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
+    it(
+      'should render destination.ip as link',
+      async () => {
+        const eventsWithDestIp = mockTimelineData.filter(
+          (event) => event.ecs?.destination?.ip?.length ?? -1 > 0
+        );
 
-      expect(userNameCell).toBeVisible();
+        const { container } = render(<TestComponent events={eventsWithDestIp} />);
 
-      expect(within(userNameCell).getByTestId(userTestId)).toHaveClass('euiLink');
-    });
-  });
+        expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
 
-  it('should refetch on sample size change', async () => {
-    render(<TestComponent />);
+        const destIpCell = container.querySelector(
+          '[data-gridcell-column-id="destination.ip"][data-test-subj="dataGridRowCell"]'
+        ) as HTMLElement;
 
-    expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+        expect(destIpCell).toBeVisible();
 
-    const toolbarSettings = screen.getByTestId('dataGridDisplaySelectorButton');
+        expect(within(destIpCell).getByTestId('network-details')).toHaveClass('euiLink');
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
+    it(
+      'should render host.name as link',
+      async () => {
+        const hostTestId = 'host-details-button';
+        const eventsWithHostName = mockTimelineData.filter(
+          (event) => event.ecs?.host?.name?.length ?? -1 > 0
+        );
 
-    fireEvent.click(toolbarSettings);
+        const { container } = render(<TestComponent events={eventsWithHostName} />);
 
-    await waitFor(() => {
-      expect(screen.getAllByTestId('unifiedDataTableSampleSizeInput')[0]).toBeVisible();
-    });
+        expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
 
-    fireEvent.change(screen.getAllByTestId('unifiedDataTableSampleSizeInput')[0], {
-      target: { value: '10' },
-    });
+        const hostNameCell = container.querySelector(
+          '[data-gridcell-column-id="host.name"][data-test-subj="dataGridRowCell"]'
+        ) as HTMLElement;
 
-    await waitFor(() => {
-      expect(refetchMock).toHaveBeenCalledTimes(1);
-    });
-  });
+        expect(hostNameCell).toBeVisible();
 
-  it('should update row Height correctly', async () => {
-    const rowHeight = {
-      initial: 2,
-      new: 1,
-    };
-    const customMockStore = createMockStore();
-
-    customMockStore.dispatch(
-      timelineActions.updateRowHeight({
-        id: TimelineId.test,
-        rowHeight: rowHeight.initial,
-      })
+        expect(within(hostNameCell).getByTestId(hostTestId)).toHaveClass('euiLink');
+      },
+      SPECIAL_TEST_TIMEOUT
     );
+    it(
+      'should render user.name as link',
+      async () => {
+        const userTestId = 'users-link-anchor';
+        const eventsWithUserName = mockTimelineData.filter(
+          (event) => event.ecs?.user?.name?.length ?? -1 > 0
+        );
 
-    render(<TestComponent store={customMockStore} />);
+        const { container } = render(<TestComponent events={eventsWithUserName} />);
 
-    expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+        expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
 
-    const toolbarSettings = screen.getByTestId('dataGridDisplaySelectorButton');
+        const userNameCell = container.querySelector(
+          '[data-gridcell-column-id="user.name"][data-test-subj="dataGridRowCell"]'
+        ) as HTMLElement;
 
-    fireEvent.click(toolbarSettings);
+        expect(userNameCell).toBeVisible();
 
-    await waitFor(() => {
-      expect(
-        screen.getAllByTestId('unifiedDataTableRowHeightSettings_lineCountNumber')[0]
-      ).toBeVisible();
-    });
-    expect(
-      screen.getAllByTestId('unifiedDataTableRowHeightSettings_lineCountNumber')[0]
-    ).toHaveValue(String(rowHeight.initial));
-
-    fireEvent.change(
-      screen.getAllByTestId('unifiedDataTableRowHeightSettings_lineCountNumber')[0],
-      {
-        target: { value: String(rowHeight.new) },
-      }
+        expect(within(userNameCell).getByTestId(userTestId)).toHaveClass('euiLink');
+      },
+      SPECIAL_TEST_TIMEOUT
     );
-
-    await waitFor(() => {
-      expect(getTimelineFromStore(customMockStore)?.rowHeight).toEqual(rowHeight.new);
-    });
   });
 
-  describe('details flyout', () => {
-    it('should show defails flyout when clicked on expand event', async () => {
-      render(<TestComponent showExpandedDetails={true} />);
+  it(
+    'should refetch on sample size change',
+    async () => {
+      render(<TestComponent />);
 
       expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
 
-      fireEvent.click(screen.getAllByTestId('docTableExpandToggleColumn')[0]);
+      const toolbarSettings = screen.getByTestId('dataGridDisplaySelectorButton');
+
+      fireEvent.click(toolbarSettings);
 
       await waitFor(() => {
-        expect(screen.getByTestId('timeline:details-panel:flyout')).toBeVisible();
+        expect(screen.getAllByTestId('unifiedDataTableSampleSizeInput')[0]).toBeVisible();
       });
-    });
 
-    it('should show details flyout when expandedDetails state is set', async () => {
-      const customMockStore = createMockStore();
-      const mockExpandedDetail: ExpandedDetailTimeline = {
-        query: {
-          params: {
-            eventId: 'some_id',
-            indexName: 'security-*',
-          },
-          panelView: 'eventDetail',
-        },
-      };
-      customMockStore.dispatch(
-        timelineActions.toggleDetailPanel({
-          id: TimelineId.test,
-          tabType: TimelineTabs.query,
-          ...mockExpandedDetail.query,
-        })
-      );
-
-      render(
-        <TestComponent
-          store={customMockStore}
-          showExpandedDetails={true}
-          expandedDetail={mockExpandedDetail}
-        />
-      );
+      fireEvent.change(screen.getAllByTestId('unifiedDataTableSampleSizeInput')[0], {
+        target: { value: '10' },
+      });
 
       await waitFor(() => {
-        expect(screen.getByTestId('timeline:details-panel:flyout')).toBeVisible();
+        expect(refetchMock).toHaveBeenCalledTimes(1);
       });
-    });
-    it('should close details flyout when close icon is clicked', async () => {
-      const customMockStore = createMockStore();
-      const mockExpandedDetail: ExpandedDetailTimeline = {
-        query: {
-          params: {
-            eventId: 'some_id',
-            indexName: 'security-*',
-          },
-          panelView: 'eventDetail',
-        },
+    },
+    SPECIAL_TEST_TIMEOUT
+  );
+
+  it(
+    'should update row Height correctly',
+    async () => {
+      const rowHeight = {
+        initial: 2,
+        new: 1,
       };
+      const customMockStore = createMockStore();
 
       customMockStore.dispatch(
-        timelineActions.toggleDetailPanel({
+        timelineActions.updateRowHeight({
           id: TimelineId.test,
-          tabType: TimelineTabs.query,
-          ...mockExpandedDetail.query,
+          rowHeight: rowHeight.initial,
         })
       );
 
-      render(
-        <TestComponent
-          store={customMockStore}
-          showExpandedDetails={true}
-          expandedDetail={mockExpandedDetail}
-        />
+      render(<TestComponent store={customMockStore} />);
+
+      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+
+      const toolbarSettings = screen.getByTestId('dataGridDisplaySelectorButton');
+
+      fireEvent.click(toolbarSettings);
+
+      await waitFor(() => {
+        expect(
+          screen.getAllByTestId('unifiedDataTableRowHeightSettings_lineCountNumber')[0]
+        ).toBeVisible();
+      });
+      expect(
+        screen.getAllByTestId('unifiedDataTableRowHeightSettings_lineCountNumber')[0]
+      ).toHaveValue(String(rowHeight.initial));
+
+      fireEvent.change(
+        screen.getAllByTestId('unifiedDataTableRowHeightSettings_lineCountNumber')[0],
+        {
+          target: { value: String(rowHeight.new) },
+        }
       );
 
       await waitFor(() => {
-        expect(screen.getByTestId('euiFlyoutCloseButton')).toBeVisible();
+        expect(getTimelineFromStore(customMockStore)?.rowHeight).toEqual(rowHeight.new);
       });
+    },
+    SPECIAL_TEST_TIMEOUT
+  );
+
+  describe('details flyout', () => {
+    it(
+      'should show defails flyout when clicked on expand event',
+      async () => {
+        render(<TestComponent showExpandedDetails={true} />);
+
+        expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+
+        fireEvent.click(screen.getAllByTestId('docTableExpandToggleColumn')[0]);
+
+        await waitFor(() => {
+          expect(screen.getByTestId('timeline:details-panel:flyout')).toBeVisible();
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-      fireEvent.click(screen.getByTestId('euiFlyoutCloseButton'));
-      expect(onEventClosedMock).toHaveBeenCalledTimes(1);
-    });
+    it(
+      'should show details flyout when expandedDetails state is set',
+      async () => {
+        const customMockStore = createMockStore();
+        const mockExpandedDetail: ExpandedDetailTimeline = {
+          query: {
+            params: {
+              eventId: 'some_id',
+              indexName: 'security-*',
+            },
+            panelView: 'eventDetail',
+          },
+        };
+        customMockStore.dispatch(
+          timelineActions.toggleDetailPanel({
+            id: TimelineId.test,
+            tabType: TimelineTabs.query,
+            ...mockExpandedDetail.query,
+          })
+        );
+
+        render(
+          <TestComponent
+            store={customMockStore}
+            showExpandedDetails={true}
+            expandedDetail={mockExpandedDetail}
+          />
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTestId('timeline:details-panel:flyout')).toBeVisible();
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
+    it(
+      'should close details flyout when close icon is clicked',
+      async () => {
+        const customMockStore = createMockStore();
+        const mockExpandedDetail: ExpandedDetailTimeline = {
+          query: {
+            params: {
+              eventId: 'some_id',
+              indexName: 'security-*',
+            },
+            panelView: 'eventDetail',
+          },
+        };
+
+        customMockStore.dispatch(
+          timelineActions.toggleDetailPanel({
+            id: TimelineId.test,
+            tabType: TimelineTabs.query,
+            ...mockExpandedDetail.query,
+          })
+        );
+
+        render(
+          <TestComponent
+            store={customMockStore}
+            showExpandedDetails={true}
+            expandedDetail={mockExpandedDetail}
+          />
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTestId('euiFlyoutCloseButton')).toBeVisible();
+        });
+
+        fireEvent.click(screen.getByTestId('euiFlyoutCloseButton'));
+        expect(onEventClosedMock).toHaveBeenCalledTimes(1);
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
   });
 
   describe('pagination', () => {
     // change the number of items per page
-    it('should change the number of items per page', async () => {
-      const customMockStore = createMockStore();
-      render(<TestComponent store={customMockStore} />);
-      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
-      // make sure that items per page is as per the props passed above
-      expect(screen.getByTestId('tablePaginationPopoverButton')).toHaveTextContent(
-        `Rows per page: 50`
-      );
-      fireEvent.click(screen.getByTestId('tablePaginationPopoverButton'));
-      fireEvent.click(screen.getByTestId(`tablePagination-25-rows`));
-      await waitFor(() => {
-        expect(getTimelineFromStore(customMockStore)?.itemsPerPage).toEqual(25);
-      });
-    });
+    it(
+      'should change the number of items per page',
+      async () => {
+        const customMockStore = createMockStore();
+        render(<TestComponent store={customMockStore} />);
+        expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+        // make sure that items per page is as per the props passed above
+        expect(screen.getByTestId('tablePaginationPopoverButton')).toHaveTextContent(
+          `Rows per page: 50`
+        );
+        fireEvent.click(screen.getByTestId('tablePaginationPopoverButton'));
+        fireEvent.click(screen.getByTestId(`tablePagination-25-rows`));
+        await waitFor(() => {
+          expect(getTimelineFromStore(customMockStore)?.itemsPerPage).toEqual(25);
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-    it('should be able to load more records once user have seen all the records loaded according to sample size', async () => {
-      const customMockStore = createMockStore();
-      customMockStore.dispatch(
-        timelineActions.updateSampleSize({
-          id: TimelineId.test,
-          sampleSize: 10,
-        })
-      );
-      render(
-        <TestComponent
-          store={customMockStore}
-          itemsPerPage={25}
-          events={structuredClone(mockTimelineData).slice(0, 10)}
-        />
-      );
-      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
-      expect(screen.getByTestId('dscGridSampleSizeFetchMoreLink')).toBeVisible();
-      fireEvent.click(screen.getByTestId('dscGridSampleSizeFetchMoreLink'));
-      await waitFor(() => {
-        expect(onChangePageMock).toHaveBeenNthCalledWith(1, 1);
-      });
-    });
+    it(
+      'should be able to load more records once user have seen all the records loaded according to sample size',
+      async () => {
+        const customMockStore = createMockStore();
+        customMockStore.dispatch(
+          timelineActions.updateSampleSize({
+            id: TimelineId.test,
+            sampleSize: 10,
+          })
+        );
+        render(
+          <TestComponent
+            store={customMockStore}
+            itemsPerPage={25}
+            events={structuredClone(mockTimelineData).slice(0, 10)}
+          />
+        );
+        expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+        expect(screen.getByTestId('dscGridSampleSizeFetchMoreLink')).toBeVisible();
+        fireEvent.click(screen.getByTestId('dscGridSampleSizeFetchMoreLink'));
+        await waitFor(() => {
+          expect(onChangePageMock).toHaveBeenNthCalledWith(1, 1);
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
   });
 });

From d01ba9493bff0999d69bef9ae4d3ffa9dc15aa20 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Wed, 27 Mar 2024 15:45:49 +0100
Subject: [PATCH 58/65] fix: add z-index to old flyout

---
 .../public/timelines/components/side_panel/index.tsx   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx
index f5d971f9eeeb6b..deb82934dc8234 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx
@@ -12,6 +12,7 @@ import { EuiFlyout } from '@elastic/eui';
 
 import type { EntityType } from '@kbn/timelines-plugin/common';
 import { dataTableActions, dataTableSelectors } from '@kbn/securitysolution-data-table';
+import styled from 'styled-components';
 import { getScopedActions, isInTableScope, isTimelineScope } from '../../../helpers';
 import { timelineSelectors } from '../../store';
 import { timelineDefaults } from '../../store/defaults';
@@ -35,6 +36,11 @@ interface DetailsPanelProps {
   isReadOnly?: boolean;
 }
 
+// hack to to get around the fact that this flyout causes issue with timeline modal z-index
+const StyleEuiFlyout = styled(EuiFlyout)`
+  z-index: 1002;
+`;
+
 /**
  * This panel is used in both the main timeline as well as the flyouts on the host, detection, cases, and network pages.
  * To prevent duplication the `isFlyoutView` prop is passed to determine the layout that should be used
@@ -166,7 +172,7 @@ export const DetailsPanel = React.memo(
     }
 
     return isFlyoutView ? (
-      <EuiFlyout
+      <StyleEuiFlyout
         data-test-subj="timeline:details-panel:flyout"
         size={panelSize}
         onClose={closePanel}
@@ -174,7 +180,7 @@ export const DetailsPanel = React.memo(
         key={flyoutUniqueKey}
       >
         {visiblePanel}
-      </EuiFlyout>
+      </StyleEuiFlyout>
     ) : (
       visiblePanel
     );

From a4b1e9c5be94d8c2c1405e07c5fff6f71c750476 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Wed, 27 Mar 2024 17:32:32 +0100
Subject: [PATCH 59/65] tests: update cypress +  jest test timeout

---
 .../query_tab_unified_components.test.tsx     | 210 ++++++++++--------
 .../cypress/screens/unified_timeline.ts       |   8 +-
 .../cypress/tasks/unified_timeline.ts         |  10 +-
 3 files changed, 133 insertions(+), 95 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
index e692e9441caa90..2436e1dd5c0298 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
@@ -553,117 +553,149 @@ describe('query tab with unified timeline', () => {
   });
 
   describe('unified fields list', () => {
-    it('should add the column when clicked on X sign', async () => {
-      const field = {
-        name: 'event.severity',
-      };
+    it(
+      'should add the column when clicked on X sign',
+      async () => {
+        const field = {
+          name: 'event.severity',
+        };
 
-      renderTestComponents();
-      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+        renderTestComponents();
+        expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
 
-      await waitFor(() => {
-        expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('11');
-      });
+        await waitFor(() => {
+          expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent(
+            '11'
+          );
+        });
 
-      // column exists in the table
-      expect(screen.getByTestId(`dataGridHeaderCell-${field.name}`)).toBeVisible();
+        // column exists in the table
+        expect(screen.getByTestId(`dataGridHeaderCell-${field.name}`)).toBeVisible();
 
-      fireEvent.click(screen.getAllByTestId(`fieldToggle-${field.name}`)[0]);
+        fireEvent.click(screen.getAllByTestId(`fieldToggle-${field.name}`)[0]);
 
-      // column not longer exists in the table
-      await waitFor(() => {
-        expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('10');
-      });
-      expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(0);
-    });
+        // column not longer exists in the table
+        await waitFor(() => {
+          expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent(
+            '10'
+          );
+        });
+        expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(0);
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-    it('should remove the column when clicked on ⊕ sign', async () => {
-      const field = {
-        name: 'agent.id',
-      };
+    it(
+      'should remove the column when clicked on ⊕ sign',
+      async () => {
+        const field = {
+          name: 'agent.id',
+        };
 
-      renderTestComponents();
-      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+        renderTestComponents();
+        expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
 
-      await waitFor(() => {
-        expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('11');
-      });
+        await waitFor(() => {
+          expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent(
+            '11'
+          );
+        });
 
-      expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(0);
+        expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(0);
 
-      // column exists in the table
-      const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
+        // column exists in the table
+        const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
 
-      fireEvent.click(within(availableFields).getByTestId(`fieldToggle-${field.name}`));
+        fireEvent.click(within(availableFields).getByTestId(`fieldToggle-${field.name}`));
 
-      await waitFor(() => {
-        expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent('12');
-      });
-      expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(1);
-    });
+        await waitFor(() => {
+          expect(screen.getByTestId('fieldListGroupedSelectedFields-count')).toHaveTextContent(
+            '12'
+          );
+        });
+        expect(screen.queryAllByTestId(`dataGridHeaderCell-${field.name}`)).toHaveLength(1);
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
 
-    it('should should show callout when field search does not matches any field', async () => {
-      renderTestComponents();
-      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+    it(
+      'should should show callout when field search does not matches any field',
+      async () => {
+        renderTestComponents();
+        expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
 
-      await waitFor(() => {
-        expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toHaveTextContent('36');
-      });
+        await waitFor(() => {
+          expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toHaveTextContent(
+            '36'
+          );
+        });
 
-      fireEvent.change(screen.getByTestId('fieldListFiltersFieldSearch'), {
-        target: { value: 'fake_field' },
-      });
+        fireEvent.change(screen.getByTestId('fieldListFiltersFieldSearch'), {
+          target: { value: 'fake_field' },
+        });
 
-      await waitFor(() => {
-        expect(
-          screen.getByTestId('fieldListGroupedAvailableFieldsNoFieldsCallout-noFieldsMatch')
-        ).toBeVisible();
-      });
-
-      expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toHaveTextContent('0');
-    }, 10000);
-
-    it('should toggle side bar correctly', async () => {
-      renderTestComponents();
-      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
-      await waitFor(() => {
-        expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toHaveTextContent('36');
-      });
-
-      fireEvent.click(screen.getByTitle('Hide sidebar'));
-
-      await waitFor(() => {
-        expect(screen.queryAllByTestId('fieldListGroupedAvailableFields-count')).toHaveLength(0);
-      });
-    }, 10000);
-
-    it('should have all populated fields in Available fields section', async () => {
-      const listOfPopulatedFields = new Set(
-        flatten(
-          mockTimelineData.map((dataItem) =>
-            dataItem.data.map((item) =>
-              item.value && item.value.length > 0 ? item.field : undefined
+        await waitFor(() => {
+          expect(
+            screen.getByTestId('fieldListGroupedAvailableFieldsNoFieldsCallout-noFieldsMatch')
+          ).toBeVisible();
+        });
+
+        expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toHaveTextContent('0');
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
+
+    it(
+      'should toggle side bar correctly',
+      async () => {
+        renderTestComponents();
+        expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+        await waitFor(() => {
+          expect(screen.getByTestId('fieldListGroupedAvailableFields-count')).toHaveTextContent(
+            '36'
+          );
+        });
+
+        fireEvent.click(screen.getByTitle('Hide sidebar'));
+
+        await waitFor(() => {
+          expect(screen.queryAllByTestId('fieldListGroupedAvailableFields-count')).toHaveLength(0);
+        });
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
+
+    it(
+      'should have all populated fields in Available fields section',
+      async () => {
+        const listOfPopulatedFields = new Set(
+          flatten(
+            mockTimelineData.map((dataItem) =>
+              dataItem.data.map((item) =>
+                item.value && item.value.length > 0 ? item.field : undefined
+              )
             )
-          )
-        ).filter((item) => typeof item !== 'undefined')
-      );
+          ).filter((item) => typeof item !== 'undefined')
+        );
 
-      renderTestComponents();
+        renderTestComponents();
 
-      expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
-      expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
+        expect(await screen.findByTestId('timeline-sidebar')).toBeVisible();
+        expect(await screen.findByTestId('discoverDocTable')).toBeVisible();
 
-      changeItemsPerPageTo(100);
+        changeItemsPerPageTo(100);
 
-      const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
+        const availableFields = screen.getByTestId('fieldListGroupedAvailableFields');
 
-      for (const field of listOfPopulatedFields) {
-        fireEvent.change(screen.getByTestId('fieldListFiltersFieldSearch'), {
-          target: { value: field },
-        });
+        for (const field of listOfPopulatedFields) {
+          fireEvent.change(screen.getByTestId('fieldListFiltersFieldSearch'), {
+            target: { value: field },
+          });
 
-        expect(within(availableFields).getByTestId(`field-${field}`));
-      }
-    });
+          expect(within(availableFields).getByTestId(`field-${field}`));
+        }
+      },
+      SPECIAL_TEST_TIMEOUT
+    );
   });
 });
diff --git a/x-pack/test/security_solution_cypress/cypress/screens/unified_timeline.ts b/x-pack/test/security_solution_cypress/cypress/screens/unified_timeline.ts
index f8504cdf798f5d..36aeb7d616128d 100644
--- a/x-pack/test/security_solution_cypress/cypress/screens/unified_timeline.ts
+++ b/x-pack/test/security_solution_cypress/cypress/screens/unified_timeline.ts
@@ -9,12 +9,16 @@ import { getDataTestSubjectSelector } from '../helpers/common';
 
 export const TIMELINE_DETAILS_FLYOUT_BTN = getDataTestSubjectSelector('docTableExpandToggleColumn');
 
-export const HOST_DETAILS_FLYOUT = getDataTestSubjectSelector('host-details-button');
+export const HOST_DETAILS_LINK = getDataTestSubjectSelector('host-details-button');
 
-export const USER_DETAILS_FLYOUT = getDataTestSubjectSelector('users-link-anchor');
+export const USER_DETAILS_LINK = getDataTestSubjectSelector('users-link-anchor');
 
 export const TIMELINE_DETAILS_FLYOUT = getDataTestSubjectSelector('timeline:details-panel:flyout');
 
+export const HOST_DETAILS_FLYOUT = getDataTestSubjectSelector('host-panel-header');
+
+export const USER_DETAILS_FLYOUT = getDataTestSubjectSelector('user-panel-header');
+
 export const TIMELINE_DETAILS_FLYOUT_CLOSE_BTN = getDataTestSubjectSelector('euiFlyoutCloseButton');
 
 export const TIMELINE_UNIFIED_DATA_GRID = `${getDataTestSubjectSelector(
diff --git a/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts b/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts
index 1004f75fa854ab..c89b8745b1c73d 100644
--- a/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts
+++ b/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts
@@ -9,10 +9,12 @@ import {
   GET_UNIFIED_DATA_GRID_CELL,
   GET_UNIFIED_DATA_GRID_CELL_HEADER,
   HOST_DETAILS_FLYOUT,
+  HOST_DETAILS_LINK,
   TIMELINE_DETAILS_FLYOUT,
   TIMELINE_DETAILS_FLYOUT_BTN,
   TIMELINE_DETAILS_FLYOUT_CLOSE_BTN,
   USER_DETAILS_FLYOUT,
+  USER_DETAILS_LINK,
 } from '../screens/unified_timeline';
 
 export const openEventDetailsFlyout = (rowIndex: number) => {
@@ -21,13 +23,13 @@ export const openEventDetailsFlyout = (rowIndex: number) => {
 };
 
 export const openHostDetailsFlyout = (rowIndex: number) => {
-  cy.get(HOST_DETAILS_FLYOUT).eq(rowIndex).click();
-  cy.get(TIMELINE_DETAILS_FLYOUT).should('be.visible');
+  cy.get(HOST_DETAILS_LINK).eq(rowIndex).click();
+  cy.get(HOST_DETAILS_FLYOUT).should('be.visible');
 };
 
 export const openUserDetailsFlyout = (rowIndex: number) => {
-  cy.get(USER_DETAILS_FLYOUT).eq(rowIndex).click();
-  cy.get(TIMELINE_DETAILS_FLYOUT).should('be.visible');
+  cy.get(USER_DETAILS_LINK).eq(rowIndex).click();
+  cy.get(USER_DETAILS_FLYOUT).should('be.visible');
 };
 
 export const getUnifiedTableHeaderColumn = (columnName: string) => {

From 472c173e90a552b07464d979a7fa7618d3478075 Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Wed, 27 Mar 2024 16:30:51 -0400
Subject: [PATCH 60/65] update timeout time

---
 .../query_tab_content/query_tab_unified_components.test.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
index 2436e1dd5c0298..05aae984f0357a 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/query_tab_unified_components.test.tsx
@@ -55,8 +55,8 @@ jest.mock('../../../../common/lib/kuery');
 jest.mock('../../../../common/hooks/use_experimental_features');
 
 // These tests can take more than standard timeout of 5s
-// that is why we are setting it to 10s
-const SPECIAL_TEST_TIMEOUT = 10000;
+// that is why we are setting it to 15s
+const SPECIAL_TEST_TIMEOUT = 15000;
 
 const useIsExperimentalFeatureEnabledMock = jest.fn((feature: keyof ExperimentalFeatures) => {
   if (feature === 'unifiedComponentsInTimelineEnabled') {

From 7360c8cc11181cd701c9ee6903f92a3231b4560c Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Thu, 28 Mar 2024 10:07:47 +0100
Subject: [PATCH 61/65] fix: merge issues

---
 ...cator_match_rule_suppression_serverless_essentials.cy.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/x-pack/test/security_solution_cypress/cypress/e2e/detection_response/detection_engine/rule_creation/indicator_match_rule_suppression_serverless_essentials.cy.ts b/x-pack/test/security_solution_cypress/cypress/e2e/detection_response/detection_engine/rule_creation/indicator_match_rule_suppression_serverless_essentials.cy.ts
index 59bf7e6d0d23b2..239c1ba4e9682e 100644
--- a/x-pack/test/security_solution_cypress/cypress/e2e/detection_response/detection_engine/rule_creation/indicator_match_rule_suppression_serverless_essentials.cy.ts
+++ b/x-pack/test/security_solution_cypress/cypress/e2e/detection_response/detection_engine/rule_creation/indicator_match_rule_suppression_serverless_essentials.cy.ts
@@ -37,12 +37,6 @@ describe(
           { product_line: 'security', product_tier: 'essentials' },
           { product_line: 'endpoint', product_tier: 'essentials' },
         ],
-        // alertSuppressionForIndicatorMatchRuleEnabled feature flag is also enabled in a global config
-        kbnServerArgs: [
-          `--xpack.securitySolution.enableExperimental=${JSON.stringify([
-            'alertSuppressionForIndicatorMatchRuleEnabled',
-          ])}`,
-        ],
       },
     },
   },

From 84fe0fb70e9047a73114df163d9e01f8628cc010 Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Thu, 28 Mar 2024 10:49:19 +0100
Subject: [PATCH 62/65] fix: review feedback cypress

---
 .../timelines/unified_components/query_tab.cy.ts      | 11 +++++++++--
 .../cypress/tasks/discover.ts                         |  2 +-
 .../cypress/tasks/unified_timeline.ts                 |  5 -----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts b/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
index 8cef9077aaa190..2571f529dcf084 100644
--- a/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
+++ b/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
@@ -11,7 +11,12 @@ import {
   openHostDetailsFlyout,
   openUserDetailsFlyout,
 } from '../../../../tasks/unified_timeline';
-import { GET_UNIFIED_DATA_GRID_CELL_HEADER } from '../../../../screens/unified_timeline';
+import {
+  GET_UNIFIED_DATA_GRID_CELL_HEADER,
+  HOST_DETAILS_FLYOUT,
+  TIMELINE_DETAILS_FLYOUT,
+  USER_DETAILS_FLYOUT,
+} from '../../../../screens/unified_timeline';
 import { GET_DISCOVER_DATA_GRID_CELL_HEADER } from '../../../../screens/discover';
 import { addFieldToTable, removeFieldFromTable } from '../../../../tasks/discover';
 import { login } from '../../../../tasks/login';
@@ -54,13 +59,15 @@ describe(
       it('should be able to open/close details details/host/user flyout', () => {
         cy.log('Event Details Flyout');
         openEventDetailsFlyout(0);
+        cy.get(TIMELINE_DETAILS_FLYOUT).should('be.visible');
         closeTimelineFlyout();
         cy.log('Host Details Flyout');
         openHostDetailsFlyout(0);
+        cy.get(HOST_DETAILS_FLYOUT).should('be.visible');
         closeTimelineFlyout();
         cy.log('User Details Flyout');
         openUserDetailsFlyout(0);
-        closeTimelineFlyout();
+        cy.get(USER_DETAILS_FLYOUT).should('be.visible');
       });
     });
   }
diff --git a/x-pack/test/security_solution_cypress/cypress/tasks/discover.ts b/x-pack/test/security_solution_cypress/cypress/tasks/discover.ts
index 8bc39cc7ccd5e2..e888f75149b2de 100644
--- a/x-pack/test/security_solution_cypress/cypress/tasks/discover.ts
+++ b/x-pack/test/security_solution_cypress/cypress/tasks/discover.ts
@@ -113,7 +113,7 @@ export const addFieldToTable = (fieldId: string) => {
 };
 
 export const removeFieldFromTable = (fieldId: string) => {
-  cy.get(GET_DISCOVER_COLUMN_TOGGLE_BTN(fieldId)).first().trigger('click');
+  cy.get(GET_DISCOVER_COLUMN_TOGGLE_BTN(fieldId)).first().click();
 };
 
 export const createAdHocDataView = (name: string, indexPattern: string, save: boolean = false) => {
diff --git a/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts b/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts
index c89b8745b1c73d..d53ef784a8d246 100644
--- a/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts
+++ b/x-pack/test/security_solution_cypress/cypress/tasks/unified_timeline.ts
@@ -8,28 +8,23 @@
 import {
   GET_UNIFIED_DATA_GRID_CELL,
   GET_UNIFIED_DATA_GRID_CELL_HEADER,
-  HOST_DETAILS_FLYOUT,
   HOST_DETAILS_LINK,
   TIMELINE_DETAILS_FLYOUT,
   TIMELINE_DETAILS_FLYOUT_BTN,
   TIMELINE_DETAILS_FLYOUT_CLOSE_BTN,
-  USER_DETAILS_FLYOUT,
   USER_DETAILS_LINK,
 } from '../screens/unified_timeline';
 
 export const openEventDetailsFlyout = (rowIndex: number) => {
   cy.get(TIMELINE_DETAILS_FLYOUT_BTN).eq(rowIndex).click();
-  cy.get(TIMELINE_DETAILS_FLYOUT).should('be.visible');
 };
 
 export const openHostDetailsFlyout = (rowIndex: number) => {
   cy.get(HOST_DETAILS_LINK).eq(rowIndex).click();
-  cy.get(HOST_DETAILS_FLYOUT).should('be.visible');
 };
 
 export const openUserDetailsFlyout = (rowIndex: number) => {
   cy.get(USER_DETAILS_LINK).eq(rowIndex).click();
-  cy.get(USER_DETAILS_FLYOUT).should('be.visible');
 };
 
 export const getUnifiedTableHeaderColumn = (columnName: string) => {

From c312a7b331426f09c82ad81092905198cafe697a Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Thu, 28 Mar 2024 15:39:17 +0100
Subject: [PATCH 63/65] fix: add brokenInServerlessQA tag

---
 .../investigations/timelines/unified_components/query_tab.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts b/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
index 2571f529dcf084..058025b5969568 100644
--- a/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
+++ b/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
@@ -28,7 +28,7 @@ import { ALERTS_URL } from '../../../../urls/navigation';
 describe(
   'Unsaved Timeline query tab',
   {
-    tags: ['@ess', '@serverless'],
+    tags: ['@ess', '@serverless', '@brokenInServerlessQA'],
     env: {
       ftrConfig: {
         kbnServerArgs: [

From 2df4376546795d9862b0d1061a5dd23253d98700 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Fri, 29 Mar 2024 18:18:06 +0000
Subject: [PATCH 64/65] [CI] Auto-commit changed files from 'node
 scripts/eslint --no-cache --fix'

---
 .../timeline_actions/use_investigate_in_timeline.tsx       | 7 ++++++-
 .../public/timelines/components/open_timeline/helpers.ts   | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx
index be65aeb78d989e..0cbd2daa58221c 100644
--- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx
@@ -168,7 +168,12 @@ export const useInvestigateInTimeline = ({
         ruleNote,
       });
     },
-    [updateTimeline, updateTimelineIsLoading, clearActiveTimeline, unifiedComponentsInTimelineEnabled]
+    [
+      updateTimeline,
+      updateTimelineIsLoading,
+      clearActiveTimeline,
+      unifiedComponentsInTimelineEnabled,
+    ]
   );
 
   const investigateInTimelineAlertClick = useCallback(async () => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
index 50ec27d5ee22fb..835862c04ced86 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.ts
@@ -374,7 +374,7 @@ export const useQueryTimelineById = () => {
             timelineToOpen,
             duplicate,
             timelineType,
-            unifiedComponentsInTimelineEnabled,
+            unifiedComponentsInTimelineEnabled
           );
 
           if (onOpenTimeline != null) {

From 4aa05e986d331ce5b3683825799c36079f887ee7 Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Mon, 1 Apr 2024 11:15:53 -0400
Subject: [PATCH 65/65] update timeline helpers tests

---
 .../components/open_timeline/helpers.test.ts  | 96 ++++++++++---------
 1 file changed, 50 insertions(+), 46 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts
index 01ab0b8d57f4ce..3732e818dffcc7 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/helpers.test.ts
@@ -7,6 +7,7 @@
 
 import { cloneDeep, getOr, omit } from 'lodash/fp';
 import { renderHook } from '@testing-library/react-hooks';
+import { waitFor } from '@testing-library/react';
 
 import { mockTimelineResults, mockGetOneTimelineResult } from '../../../common/mock';
 import { timelineDefaults } from '../../store/defaults';
@@ -773,39 +774,34 @@ describe('helpers', () => {
       });
     });
     describe('open a timeline when unifiedComponentsInTimelineEnabled is true', () => {
-      const updateIsLoading = jest.fn();
       const untitledTimeline = { ...mockSelectedTimeline, title: '' };
       const onOpenTimeline = jest.fn();
-
-      const updateTimelineHandler = jest.fn();
-
-      const updateTimeline = jest.fn(() => updateTimelineHandler);
-
       afterEach(() => {
         jest.clearAllMocks();
       });
 
       it('should update timeline correctly when timeline is untitled', async () => {
-        const args: QueryTimelineById<{}> = {
+        const args: QueryTimelineById = {
           duplicate: false,
           graphEventId: '',
           timelineId: undefined,
           timelineType: TimelineType.default,
           onOpenTimeline,
           openTimeline: true,
-          updateIsLoading,
-          updateTimeline,
           unifiedComponentsInTimelineEnabled: true,
         };
         (resolveTimeline as jest.Mock).mockResolvedValue(untitledTimeline);
-        queryTimelineById<{}>(args as unknown as QueryTimelineById<{}>);
+        renderHook(async () => {
+          const queryTimelineById = useQueryTimelineById();
+          queryTimelineById(args);
+        });
 
-        expect(updateIsLoading).toHaveBeenCalledWith({
+        expect(dispatchUpdateIsLoading).toHaveBeenCalledWith({
           id: TimelineId.active,
           isLoading: true,
         });
 
-        expect(updateTimeline).toHaveBeenNthCalledWith(
+        expect(mockUpdateTimeline).toHaveBeenNthCalledWith(
           1,
           expect.objectContaining({
             id: TimelineId.active,
@@ -814,72 +810,80 @@ describe('helpers', () => {
             }),
           })
         );
-        expect(updateIsLoading).toHaveBeenCalledWith({
+        expect(dispatchUpdateIsLoading).toHaveBeenCalledWith({
           id: TimelineId.active,
           isLoading: false,
         });
       });
 
       it('should update timeline correctly when timeline is already saved and onOpenTimeline is not provided', async () => {
-        const args: QueryTimelineById<{}> = {
+        const args: QueryTimelineById = {
           duplicate: false,
           graphEventId: '',
           timelineId: TimelineId.active,
           timelineType: TimelineType.default,
           onOpenTimeline: undefined,
           openTimeline: true,
-          updateIsLoading,
-          updateTimeline,
           unifiedComponentsInTimelineEnabled: true,
         };
 
         (resolveTimeline as jest.Mock).mockResolvedValue(mockSelectedTimeline);
+        renderHook(async () => {
+          const queryTimelineById = useQueryTimelineById();
+          queryTimelineById(args);
+        });
 
-        await queryTimelineById<{}>(args as unknown as QueryTimelineById<{}>);
+        expect(dispatchUpdateIsLoading).toHaveBeenCalledWith({
+          id: TimelineId.active,
+          isLoading: true,
+        });
 
-        expect(updateTimeline).toHaveBeenNthCalledWith(
-          1,
-          expect.objectContaining({
-            timeline: expect.objectContaining({
-              columns: mockSelectedTimeline.data.timeline.columns.map((col) => ({
-                columnHeaderType: col.columnHeaderType,
-                id: col.id,
-                initialWidth: defaultUdtHeaders.find((defaultCol) => col.id === defaultCol.id)
-                  ?.initialWidth,
-              })),
-            }),
-          })
-        );
+        await waitFor(() => {
+          expect(mockUpdateTimeline).toHaveBeenNthCalledWith(
+            1,
+            expect.objectContaining({
+              timeline: expect.objectContaining({
+                columns: mockSelectedTimeline.data.timeline.columns.map((col) => ({
+                  columnHeaderType: col.columnHeaderType,
+                  id: col.id,
+                  initialWidth: defaultUdtHeaders.find((defaultCol) => col.id === defaultCol.id)
+                    ?.initialWidth,
+                })),
+              }),
+            })
+          );
+        });
       });
 
       it('should update timeline correctly when timeline is already saved and onOpenTimeline IS provided', async () => {
-        const args: QueryTimelineById<{}> = {
+        const args: QueryTimelineById = {
           duplicate: false,
           graphEventId: '',
           timelineId: TimelineId.active,
           timelineType: TimelineType.default,
           onOpenTimeline,
           openTimeline: true,
-          updateIsLoading,
-          updateTimeline,
           unifiedComponentsInTimelineEnabled: true,
         };
 
         (resolveTimeline as jest.Mock).mockResolvedValue(mockSelectedTimeline);
+        renderHook(async () => {
+          const queryTimelineById = useQueryTimelineById();
+          queryTimelineById(args);
+        });
 
-        await queryTimelineById<{}>(args as unknown as QueryTimelineById<{}>);
-
-        expect(onOpenTimeline).toHaveBeenNthCalledWith(
-          1,
-          expect.objectContaining({
-            columns: mockSelectedTimeline.data.timeline.columns.map((col) => ({
-              columnHeaderType: col.columnHeaderType,
-              id: col.id,
-              initialWidth: defaultUdtHeaders.find((defaultCol) => col.id === defaultCol.id)
-                ?.initialWidth,
-            })),
-          })
-        );
+        waitFor(() => {
+          expect(onOpenTimeline).toHaveBeenCalledWith(
+            expect.objectContaining({
+              columns: mockSelectedTimeline.data.timeline.columns.map((col) => ({
+                columnHeaderType: col.columnHeaderType,
+                id: col.id,
+                initialWidth: defaultUdtHeaders.find((defaultCol) => col.id === defaultCol.id)
+                  ?.initialWidth,
+              })),
+            })
+          );
+        });
       });
     });
   });