Skip to content

Commit c41178d

Browse files
logeekallogeekal
authored
[Security Solution] Remove unifiedComponentsInTimelineDisabled flag (elastic#195959)
## Summary Handles elastic/security-team#9645 Follow Up PR for removal of Old timeline Code : elastic#196243 - This PR removes `unifiedComponentsInTimelineDisabled` flag. What this means that that unified components in Timeline are now enabled by default. - Consequently, the old timeline table code becomes obsolete and is also removed. ( elastic#196243) ## Changes 1. Converted all cypress and jest tests that were testing old Timeline table to test new unified components in Timeline. If the test for new timeline already existed, old tests are also removed.
1 parent 1821093 commit c41178d

40 files changed

+1440
-6518
lines changed

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

-4
Original file line numberDiff line numberDiff line change
@@ -183,10 +183,6 @@ export const allowedExperimentalValues = Object.freeze({
183183
*
184184
*/
185185
timelineEsqlTabDisabled: false,
186-
/*
187-
* Disables experimental Discover components, UnifiedFieldList and UnifiedDataTable in Timeline.
188-
*/
189-
unifiedComponentsInTimelineDisabled: false,
190186

191187
/*
192188
* Disables date pickers and sourcerer in analyzer if needed.

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

+15-44
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import { TimelineTabs } from '../../../../common/types';
1414
import { HeaderActions } from './header_actions';
1515
import { timelineActions } from '../../../timelines/store';
1616
import { getColumnHeader } from '../../../timelines/components/timeline/body/column_headers/helpers';
17-
import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
1817

1918
jest.mock('../../hooks/use_experimental_features', () => ({
2019
useIsExperimentalFeatureEnabled: jest.fn(),
@@ -141,51 +140,23 @@ describe('HeaderActions', () => {
141140
});
142141
});
143142

144-
describe('conditional components based on unifiedComponentsInTimelineDisabled', () => {
145-
describe('when unifiedComponentsInTimelineDisabled is false', () => {
146-
beforeEach(() => {
147-
(useIsExperimentalFeatureEnabled as jest.Mock).mockReturnValue(false);
148-
});
149-
it('should not show the event renderer settings', () => {
150-
const result = render(
151-
<TestProviders>
152-
<HeaderActions {...defaultProps} />
153-
</TestProviders>
154-
);
155-
expect(result.queryByTestId('show-row-renderers-gear')).toBeNull();
156-
});
157-
158-
it('should not show the sorting settings', () => {
159-
const result = render(
160-
<TestProviders>
161-
<HeaderActions {...defaultProps} />
162-
</TestProviders>
163-
);
164-
expect(result.queryByTestId('timeline-sorting-fields')).toBeNull();
165-
});
143+
describe('Controls', () => {
144+
it('should not show the event renderer settings', () => {
145+
const result = render(
146+
<TestProviders>
147+
<HeaderActions {...defaultProps} />
148+
</TestProviders>
149+
);
150+
expect(result.queryByTestId('show-row-renderers-gear')).toBeNull();
166151
});
167152

168-
describe('when unifiedComponentsInTimelineDisabled is true', () => {
169-
beforeEach(() => {
170-
(useIsExperimentalFeatureEnabled as jest.Mock).mockReturnValue(true);
171-
});
172-
it('should show the event renderer settings', () => {
173-
const result = render(
174-
<TestProviders>
175-
<HeaderActions {...defaultProps} />
176-
</TestProviders>
177-
);
178-
result.getByTestId('show-row-renderers-gear');
179-
});
180-
181-
it('should show the sorting settings', () => {
182-
const result = render(
183-
<TestProviders>
184-
<HeaderActions {...defaultProps} />
185-
</TestProviders>
186-
);
187-
result.getByTestId('timeline-sorting-fields');
188-
});
153+
it('should not show the sorting settings', () => {
154+
const result = render(
155+
<TestProviders>
156+
<HeaderActions {...defaultProps} />
157+
</TestProviders>
158+
);
159+
expect(result.queryByTestId('timeline-sorting-fields')).toBeNull();
189160
});
190161
});
191162
});

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

+3-105
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,12 @@
66
*/
77

88
import React, { useMemo, useCallback, memo } from 'react';
9-
import type { EuiDataGridSorting, EuiDataGridSchemaDetector } from '@elastic/eui';
10-
import { EuiButtonIcon, EuiToolTip, useDataGridColumnSorting, EuiCheckbox } from '@elastic/eui';
9+
import { EuiButtonIcon, EuiToolTip, EuiCheckbox } from '@elastic/eui';
1110
import { useDispatch } from 'react-redux';
1211

1312
import styled from 'styled-components';
14-
import type { HeaderActionProps, SortDirection } from '../../../../common/types';
15-
import { TimelineTabs, TimelineId } from '../../../../common/types';
13+
import type { HeaderActionProps } from '../../../../common/types';
14+
import { TimelineId } from '../../../../common/types';
1615
import { isFullScreen } from '../../../timelines/components/timeline/body/column_headers';
1716
import { isActiveTimeline } from '../../../helpers';
1817
import { getColumnHeader } from '../../../timelines/components/timeline/body/column_headers/helpers';
@@ -21,28 +20,12 @@ import { useGlobalFullScreen, useTimelineFullScreen } from '../../containers/use
2120
import { useKibana } from '../../lib/kibana';
2221
import { DEFAULT_ACTION_BUTTON_WIDTH } from '.';
2322
import { EventsTh, EventsThContent } from '../../../timelines/components/timeline/styles';
24-
import { StatefulRowRenderersBrowser } from '../../../timelines/components/row_renderers_browser';
2523
import { EXIT_FULL_SCREEN } from '../exit_full_screen/translations';
2624
import { EventsSelect } from '../../../timelines/components/timeline/body/column_headers/events_select';
2725
import * as i18n from './translations';
28-
import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
2926
import { useDeepEqualSelector } from '../../hooks/use_selector';
3027
import { selectTimelineById } from '../../../timelines/store/selectors';
3128

32-
const SortingColumnsContainer = styled.div`
33-
button {
34-
color: ${({ theme }) => theme.eui.euiColorPrimary};
35-
}
36-
37-
.euiPopover .euiButtonEmpty {
38-
padding: 0;
39-
40-
.euiButtonEmpty__text {
41-
display: none;
42-
}
43-
}
44-
`;
45-
4629
const FieldBrowserContainer = styled.div`
4730
.euiToolTipAnchor {
4831
.euiButtonContent {
@@ -66,23 +49,15 @@ const ActionsContainer = styled.div`
6649
display: flex;
6750
`;
6851

69-
// Defined statically to reduce rerenders
70-
const emptySchema = {};
71-
const emptySchemaDetectors: EuiDataGridSchemaDetector[] = [];
72-
7352
const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
7453
({
75-
width,
7654
browserFields,
7755
columnHeaders,
78-
isEventViewer = false,
7956
isSelectAllChecked,
8057
onSelectAll,
8158
showEventsSelect,
8259
showSelectAllCheckbox,
8360
showFullScreenToggle = true,
84-
sort,
85-
tabType,
8661
timelineId,
8762
fieldBrowserOptions,
8863
}) => {
@@ -91,10 +66,6 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
9166
const { timelineFullScreen, setTimelineFullScreen } = useTimelineFullScreen();
9267
const dispatch = useDispatch();
9368

94-
const unifiedComponentsInTimelineDisabled = useIsExperimentalFeatureEnabled(
95-
'unifiedComponentsInTimelineDisabled'
96-
);
97-
9869
const { defaultColumns } = useDeepEqualSelector((state) =>
9970
selectTimelineById(state, timelineId)
10071
);
@@ -129,57 +100,6 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
129100
[onSelectAll]
130101
);
131102

132-
const onSortColumns = useCallback(
133-
(cols: EuiDataGridSorting['columns']) =>
134-
dispatch(
135-
timelineActions.updateSort({
136-
id: timelineId,
137-
sort: cols.map(({ id, direction }) => {
138-
const columnHeader = columnHeaders.find((ch) => ch.id === id);
139-
const columnType = columnHeader?.type ?? '';
140-
const esTypes = columnHeader?.esTypes ?? [];
141-
142-
return {
143-
columnId: id,
144-
columnType,
145-
esTypes,
146-
sortDirection: direction as SortDirection,
147-
};
148-
}),
149-
})
150-
),
151-
[columnHeaders, dispatch, timelineId]
152-
);
153-
154-
const sortedColumns = useMemo(
155-
() => ({
156-
onSort: onSortColumns,
157-
columns:
158-
sort?.map<{ id: string; direction: 'asc' | 'desc' }>(({ columnId, sortDirection }) => ({
159-
id: columnId,
160-
direction: sortDirection as 'asc' | 'desc',
161-
})) ?? [],
162-
}),
163-
[onSortColumns, sort]
164-
);
165-
const displayValues = useMemo(
166-
() =>
167-
columnHeaders?.reduce((acc, ch) => ({ ...acc, [ch.id]: ch.displayAsText ?? ch.id }), {}) ??
168-
{},
169-
[columnHeaders]
170-
);
171-
172-
const myColumns = useMemo(
173-
() =>
174-
columnHeaders?.map(({ aggregatable, displayAsText, id, type }) => ({
175-
id,
176-
isSortable: aggregatable,
177-
displayAsText,
178-
schema: type,
179-
})) ?? [],
180-
[columnHeaders]
181-
);
182-
183103
const onResetColumns = useCallback(() => {
184104
dispatch(timelineActions.updateColumns({ id: timelineId, columns: defaultColumns }));
185105
}, [defaultColumns, dispatch, timelineId]);
@@ -206,14 +126,6 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
206126
[columnHeaders, dispatch, timelineId, defaultColumns]
207127
);
208128

209-
const ColumnSorting = useDataGridColumnSorting({
210-
columns: myColumns,
211-
sorting: sortedColumns,
212-
schema: emptySchema,
213-
schemaDetectors: emptySchemaDetectors,
214-
displayValues,
215-
});
216-
217129
return (
218130
<ActionsContainer data-test-subj="header-actions-container">
219131
{showSelectAllCheckbox && (
@@ -242,11 +154,6 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
242154
</EventsTh>
243155
)}
244156

245-
{unifiedComponentsInTimelineDisabled && (
246-
<EventsTh role="button">
247-
<StatefulRowRenderersBrowser timelineId={timelineId} />
248-
</EventsTh>
249-
)}
250157
{showFullScreenToggle && (
251158
<EventsTh role="button">
252159
<EventsThContent textAlign="center" width={DEFAULT_ACTION_BUTTON_WIDTH}>
@@ -275,15 +182,6 @@ const HeaderActionsComponent: React.FC<HeaderActionProps> = memo(
275182
</EventsThContent>
276183
</EventsTh>
277184
)}
278-
{tabType !== TimelineTabs.eql && unifiedComponentsInTimelineDisabled && (
279-
<EventsTh role="button" data-test-subj="timeline-sorting-fields">
280-
<EventsThContent textAlign="center" width={DEFAULT_ACTION_BUTTON_WIDTH}>
281-
<EuiToolTip content={i18n.SORT_FIELDS}>
282-
<SortingColumnsContainer>{ColumnSorting}</SortingColumnsContainer>
283-
</EuiToolTip>
284-
</EventsThContent>
285-
</EventsTh>
286-
)}
287185

288186
{showEventsSelect && (
289187
<EventsTh role="button">

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

+1-6
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,6 @@ import { URL_PARAM_KEY } from '../use_url_state';
1919
import { useIsExperimentalFeatureEnabled } from '../use_experimental_features';
2020

2121
export const useInitTimelineFromUrlParam = () => {
22-
const unifiedComponentsInTimelineDisabled = useIsExperimentalFeatureEnabled(
23-
'unifiedComponentsInTimelineDisabled'
24-
);
25-
2622
const isEsqlTabDisabled = useIsExperimentalFeatureEnabled('timelineEsqlTabDisabled');
2723

2824
const queryTimelineById = useQueryTimelineById();
@@ -43,11 +39,10 @@ export const useInitTimelineFromUrlParam = () => {
4339
timelineId: initialState.id,
4440
openTimeline: initialState.isOpen,
4541
savedSearchId: initialState.savedSearchId,
46-
unifiedComponentsInTimelineDisabled,
4742
});
4843
}
4944
},
50-
[isEsqlTabDisabled, queryTimelineById, unifiedComponentsInTimelineDisabled]
45+
[isEsqlTabDisabled, queryTimelineById]
5146
);
5247

5348
useEffect(() => {

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

+1-15
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import {
2121
getQueryStringFromLocation,
2222
} from '../../utils/global_query_string/helpers';
2323
import { URL_PARAM_KEY } from '../use_url_state';
24-
import { useIsExperimentalFeatureEnabled } from '../use_experimental_features';
2524

2625
/**
2726
* 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 = () => {
4241
const oldSearch = usePrevious(search);
4342
const timelineIdFromReduxStore = flyoutTimeline?.savedObjectId ?? '';
4443

45-
const unifiedComponentsInTimelineDisabled = useIsExperimentalFeatureEnabled(
46-
'unifiedComponentsInTimelineDisabled'
47-
);
48-
4944
const [previousTimeline, currentTimeline] = useMemo(() => {
5045
const oldUrlStateString = getQueryStringKeyValue({
5146
urlKey: URL_PARAM_KEY.timeline,
@@ -74,18 +69,9 @@ export const useQueryTimelineByIdOnUrlChange = () => {
7469
graphEventId,
7570
timelineId: newId,
7671
openTimeline: true,
77-
unifiedComponentsInTimelineDisabled,
7872
});
7973
}
80-
}, [
81-
timelineIdFromReduxStore,
82-
oldId,
83-
newId,
84-
activeTab,
85-
graphEventId,
86-
queryTimelineById,
87-
unifiedComponentsInTimelineDisabled,
88-
]);
74+
}, [timelineIdFromReduxStore, oldId, newId, activeTab, graphEventId, queryTimelineById]);
8975
};
9076

9177
export const getQueryStringKeyValue = ({ search, urlKey }: { search: string; urlKey: string }) =>

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

+1-7
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,19 @@
88
import { useCallback } from 'react';
99
import { useQueryTimelineById } from '../../../timelines/components/open_timeline/helpers';
1010
import type { TimelineErrorCallback } from '../../../timelines/components/open_timeline/types';
11-
import { useIsExperimentalFeatureEnabled } from '../../hooks/use_experimental_features';
1211

1312
export const useTimelineClick = () => {
1413
const queryTimelineById = useQueryTimelineById();
1514

16-
const unifiedComponentsInTimelineDisabled = useIsExperimentalFeatureEnabled(
17-
'unifiedComponentsInTimelineDisabled'
18-
);
19-
2015
const handleTimelineClick = useCallback(
2116
(timelineId: string, onError: TimelineErrorCallback, graphEventId?: string) => {
2217
queryTimelineById({
2318
graphEventId,
2419
timelineId,
2520
onError,
26-
unifiedComponentsInTimelineDisabled,
2721
});
2822
},
29-
[queryTimelineById, unifiedComponentsInTimelineDisabled]
23+
[queryTimelineById]
3024
);
3125

3226
return handleTimelineClick;

0 commit comments

Comments
 (0)