[Security Solution] Remove unifiedComponentsInTimelineDisabled flag

x-pack/plugins/security_solution/common/experimental_features.ts

@@ -183,10 +183,6 @@ export const allowedExperimentalValues = Object.freeze({
    *
    */
   timelineEsqlTabDisabled: false,
-  /*
-   * Disables experimental Discover components, UnifiedFieldList and UnifiedDataTable in Timeline.
-   */
-  unifiedComponentsInTimelineDisabled: false,
 
   /*
    * Disables date pickers and sourcerer in analyzer if needed.

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

@@ -14,7 +14,6 @@ import { TimelineTabs } from '../../../../common/types';
 import { HeaderActions } from './header_actions';
 import { timelineActions } from '../../../timelines/store';
 import { getColumnHeader } from '../../../timelines/components/timeline/body/column_headers/helpers';
-import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
 
 jest.mock('../../hooks/use_experimental_features', () => ({
   useIsExperimentalFeatureEnabled: jest.fn(),
@@ -141,51 +140,23 @@ describe('HeaderActions', () => {
     });
   });
 
-  describe('conditional components based on unifiedComponentsInTimelineDisabled', () => {
-    describe('when unifiedComponentsInTimelineDisabled is false', () => {
-      beforeEach(() => {
-        (useIsExperimentalFeatureEnabled as jest.Mock).mockReturnValue(false);
-      });
-      it('should not show the event renderer settings', () => {
-        const result = render(
-          <TestProviders>
-            <HeaderActions {...defaultProps} />
-          </TestProviders>
-        );
-        expect(result.queryByTestId('show-row-renderers-gear')).toBeNull();
-      });
-
-      it('should not show the sorting settings', () => {
-        const result = render(
-          <TestProviders>
-            <HeaderActions {...defaultProps} />
-          </TestProviders>
-        );
-        expect(result.queryByTestId('timeline-sorting-fields')).toBeNull();
-      });
+  describe('Controls', () => {
+    it('should not show the event renderer settings', () => {
+      const result = render(
+        <TestProviders>
+          <HeaderActions {...defaultProps} />
+        </TestProviders>
+      );
+      expect(result.queryByTestId('show-row-renderers-gear')).toBeNull();
     });
 
-    describe('when unifiedComponentsInTimelineDisabled is true', () => {
-      beforeEach(() => {
-        (useIsExperimentalFeatureEnabled as jest.Mock).mockReturnValue(true);
-      });
-      it('should show the event renderer settings', () => {
-        const result = render(
-          <TestProviders>
-            <HeaderActions {...defaultProps} />
-          </TestProviders>
-        );
-        result.getByTestId('show-row-renderers-gear');
-      });
-
-      it('should show the sorting settings', () => {
-        const result = render(
-          <TestProviders>
-            <HeaderActions {...defaultProps} />
-          </TestProviders>
-        );
-        result.getByTestId('timeline-sorting-fields');
-      });
+    it('should not show the sorting settings', () => {
+      const result = render(
+        <TestProviders>
+          <HeaderActions {...defaultProps} />
+        </TestProviders>
+      );
+      expect(result.queryByTestId('timeline-sorting-fields')).toBeNull();
     });
   });
 });

x-pack/plugins/security_solution/public/common/components/header_actions/header_actions.tsx

@@ -6,13 +6,12 @@
  */
 
 import React, { useMemo, useCallback, memo } from 'react';
-import type { EuiDataGridSorting, EuiDataGridSchemaDetector } from '@elastic/eui';
-import { EuiButtonIcon, EuiToolTip, useDataGridColumnSorting, EuiCheckbox } from '@elastic/eui';
+import { EuiButtonIcon, EuiToolTip, EuiCheckbox } from '@elastic/eui';
 import { useDispatch } from 'react-redux';
 
 import styled from 'styled-components';
-import type { HeaderActionProps, SortDirection } from '../../../../common/types';
-import { TimelineTabs, TimelineId } from '../../../../common/types';
+import type { HeaderActionProps } from '../../../../common/types';
+import { TimelineId } from '../../../../common/types';
 import { isFullScreen } from '../../../timelines/components/timeline/body/column_headers';
 import { isActiveTimeline } from '../../../helpers';
 import { getColumnHeader } from '../../../timelines/components/timeline/body/column_headers/helpers';
@@ -21,28 +20,12 @@ import { useGlobalFullScreen, useTimelineFullScreen } from '../../containers/use
 import { useKibana } from '../../lib/kibana';
 import { DEFAULT_ACTION_BUTTON_WIDTH } from '.';
 import { EventsTh, EventsThContent } from '../../../timelines/components/timeline/styles';
-import { StatefulRowRenderersBrowser } from '../../../timelines/components/row_renderers_browser';
 import { EXIT_FULL_SCREEN } from '../exit_full_screen/translations';
 import { EventsSelect } from '../../../timelines/components/timeline/body/column_headers/events_select';
 import * as i18n from './translations';
-import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
 import { useDeepEqualSelector } from '../../hooks/use_selector';
 import { selectTimelineById } from '../../../timelines/store/selectors';
 
-const SortingColumnsContainer = styled.div`
-  button {
-    color: ${({ theme }) => theme.eui.euiColorPrimary};
-  }
-
-  .euiPopover .euiButtonEmpty {
-    padding: 0;
-
-    .euiButtonEmpty__text {
-      display: none;
-    }
-  }
-`;
-
 const FieldBrowserContainer = styled.div`
   .euiToolTipAnchor {
     .euiButtonContent {
@@ -66,23 +49,15 @@ const ActionsContainer = styled.div`
   display: flex;
 `;
 
-// Defined statically to reduce rerenders
-const emptySchema = {};
-const emptySchemaDetectors: EuiDataGridSchemaDetector[] = [];
-
 const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
   ({
-    width,
     browserFields,
     columnHeaders,
-    isEventViewer = false,
     isSelectAllChecked,
     onSelectAll,
     showEventsSelect,
     showSelectAllCheckbox,
     showFullScreenToggle = true,
-    sort,
-    tabType,
     timelineId,
     fieldBrowserOptions,
   }) => {
@@ -91,10 +66,6 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
     const { timelineFullScreen, setTimelineFullScreen } = useTimelineFullScreen();
     const dispatch = useDispatch();
 
-    const unifiedComponentsInTimelineDisabled = useIsExperimentalFeatureEnabled(
-      'unifiedComponentsInTimelineDisabled'
-    );
-
     const { defaultColumns } = useDeepEqualSelector((state) =>
       selectTimelineById(state, timelineId)
     );
@@ -129,57 +100,6 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
       [onSelectAll]
     );
 
-    const onSortColumns = useCallback(
-      (cols: EuiDataGridSorting['columns']) =>
-        dispatch(
-          timelineActions.updateSort({
-            id: timelineId,
-            sort: cols.map(({ id, direction }) => {
-              const columnHeader = columnHeaders.find((ch) => ch.id === id);
-              const columnType = columnHeader?.type ?? '';
-              const esTypes = columnHeader?.esTypes ?? [];
-
-              return {
-                columnId: id,
-                columnType,
-                esTypes,
-                sortDirection: direction as SortDirection,
-              };
-            }),
-          })
-        ),
-      [columnHeaders, dispatch, timelineId]
-    );
-
-    const sortedColumns = useMemo(
-      () => ({
-        onSort: onSortColumns,
-        columns:
-          sort?.map<{ id: string; direction: 'asc' | 'desc' }>(({ columnId, sortDirection }) => ({
-            id: columnId,
-            direction: sortDirection as 'asc' | 'desc',
-          })) ?? [],
-      }),
-      [onSortColumns, sort]
-    );
-    const displayValues = useMemo(
-      () =>
-        columnHeaders?.reduce((acc, ch) => ({ ...acc, [ch.id]: ch.displayAsText ?? ch.id }), {}) ??
-        {},
-      [columnHeaders]
-    );
-
-    const myColumns = useMemo(
-      () =>
-        columnHeaders?.map(({ aggregatable, displayAsText, id, type }) => ({
-          id,
-          isSortable: aggregatable,
-          displayAsText,
-          schema: type,
-        })) ?? [],
-      [columnHeaders]
-    );
-
     const onResetColumns = useCallback(() => {
       dispatch(timelineActions.updateColumns({ id: timelineId, columns: defaultColumns }));
     }, [defaultColumns, dispatch, timelineId]);
@@ -206,14 +126,6 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
       [columnHeaders, dispatch, timelineId, defaultColumns]
     );
 
-    const ColumnSorting = useDataGridColumnSorting({
-      columns: myColumns,
-      sorting: sortedColumns,
-      schema: emptySchema,
-      schemaDetectors: emptySchemaDetectors,
-      displayValues,
-    });
-
     return (
       <ActionsContainer data-test-subj="header-actions-container">
         {showSelectAllCheckbox && (
@@ -242,11 +154,6 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
           </EventsTh>
         )}
 
-        {unifiedComponentsInTimelineDisabled && (
-          <EventsTh role="button">
-            <StatefulRowRenderersBrowser timelineId={timelineId} />
-          </EventsTh>
-        )}
         {showFullScreenToggle && (
           <EventsTh role="button">
             <EventsThContent textAlign="center" width={DEFAULT_ACTION_BUTTON_WIDTH}>
@@ -275,15 +182,6 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
             </EventsThContent>
           </EventsTh>
         )}
-        {tabType !== TimelineTabs.eql && unifiedComponentsInTimelineDisabled && (
-          <EventsTh role="button" data-test-subj="timeline-sorting-fields">
-            <EventsThContent textAlign="center" width={DEFAULT_ACTION_BUTTON_WIDTH}>
-              <EuiToolTip content={i18n.SORT_FIELDS}>
-                <SortingColumnsContainer>{ColumnSorting}</SortingColumnsContainer>
-              </EuiToolTip>
-            </EventsThContent>
-          </EventsTh>
-        )}
 
         {showEventsSelect && (
           <EventsTh role="button">

x-pack/plugins/security_solution/public/common/hooks/timeline/use_init_timeline_url_param.ts

@@ -19,10 +19,6 @@ import { URL_PARAM_KEY } from '../use_url_state';
 import { useIsExperimentalFeatureEnabled } from '../use_experimental_features';
 
 export const useInitTimelineFromUrlParam = () => {
-  const unifiedComponentsInTimelineDisabled = useIsExperimentalFeatureEnabled(
-    'unifiedComponentsInTimelineDisabled'
-  );
-
   const isEsqlTabDisabled = useIsExperimentalFeatureEnabled('timelineEsqlTabDisabled');
 
   const queryTimelineById = useQueryTimelineById();
@@ -43,11 +39,10 @@ export const useInitTimelineFromUrlParam = () => {
           timelineId: initialState.id,
           openTimeline: initialState.isOpen,
           savedSearchId: initialState.savedSearchId,
-          unifiedComponentsInTimelineDisabled,
         });
       }
     },
-    [isEsqlTabDisabled, queryTimelineById, unifiedComponentsInTimelineDisabled]
+    [isEsqlTabDisabled, queryTimelineById]
   );
 
   useEffect(() => {

x-pack/plugins/security_solution/public/common/hooks/timeline/use_query_timeline_by_id_on_url_change.ts

@@ -21,7 +21,6 @@ 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
@@ -42,10 +41,6 @@ export const useQueryTimelineByIdOnUrlChange = () => {
   const oldSearch = usePrevious(search);
   const timelineIdFromReduxStore = flyoutTimeline?.savedObjectId ?? '';
 
-  const unifiedComponentsInTimelineDisabled = useIsExperimentalFeatureEnabled(
-    'unifiedComponentsInTimelineDisabled'
-  );
-
   const [previousTimeline, currentTimeline] = useMemo(() => {
     const oldUrlStateString = getQueryStringKeyValue({
       urlKey: URL_PARAM_KEY.timeline,
@@ -74,18 +69,9 @@ export const useQueryTimelineByIdOnUrlChange = () => {
         graphEventId,
         timelineId: newId,
         openTimeline: true,
-        unifiedComponentsInTimelineDisabled,
       });
     }
-  }, [
-    timelineIdFromReduxStore,
-    oldId,
-    newId,
-    activeTab,
-    graphEventId,
-    queryTimelineById,
-    unifiedComponentsInTimelineDisabled,
-  ]);
+  }, [timelineIdFromReduxStore, oldId, newId, activeTab, graphEventId, queryTimelineById]);
 };
 
 export const getQueryStringKeyValue = ({ search, urlKey }: { search: string; urlKey: string }) =>

x-pack/plugins/security_solution/public/common/utils/timeline/use_timeline_click.tsx

@@ -8,25 +8,19 @@
 import { useCallback } from 'react';
 import { useQueryTimelineById } from '../../../timelines/components/open_timeline/helpers';
 import type { TimelineErrorCallback } from '../../../timelines/components/open_timeline/types';
-import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
 
 export const useTimelineClick = () => {
   const queryTimelineById = useQueryTimelineById();
 
-  const unifiedComponentsInTimelineDisabled = useIsExperimentalFeatureEnabled(
-    'unifiedComponentsInTimelineDisabled'
-  );
-
   const handleTimelineClick = useCallback(
     (timelineId: string, onError: TimelineErrorCallback, graphEventId?: string) => {
       queryTimelineById({
         graphEventId,
         timelineId,
         onError,
-        unifiedComponentsInTimelineDisabled,
       });
     },
-    [queryTimelineById, unifiedComponentsInTimelineDisabled]
+    [queryTimelineById]
   );
 
   return handleTimelineClick;