[Security Solution] Fix : Row Renderer setting persistence and stylin…

…g. (#192189) ## Summary Handles [#190310](#190310). ### Issues There are 2 issue today with Row renderer setting. This PR fixed both of those. 1. The setting was not retained when a timeline was saved and re-opened. https://github.com/user-attachments/assets/07e1ce0a-5022-43bf-a2cd-54cbf1d06d68 2. The styling of Event Renderer was messed up. <img width="1726" alt="grafik" src="https://github.com/user-attachments/assets/00e1d975-9a80-41d9-91c8-2d71e0f2c113">
elastic · Sep 5, 2024 · f13b80b · f13b80b
1 parent 1a8bbc5
commit f13b80b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 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
@@ -24,6 +24,7 @@ import {
 } from './helpers';
 import type { OpenTimelineResult } from './types';
 import { TimelineId } from '../../../../common/types/timeline';
+import type { RowRendererId } from '../../../../common/api/timeline';
 import { TimelineTypeEnum, TimelineStatusEnum } from '../../../../common/api/timeline';
 import {
   mockTimeline as mockSelectedTimeline,
@@ -559,7 +560,7 @@ describe('helpers', () => {
       });
     });
 
-    test('should produce correct model if unifiedComponentsInTimelineDisabled is false and custom set of columns is passed', () => {
+    test('should produce correct model if unifiedComponentsInTimelineDisabled == false and custom set of columns is passed', () => {
       const customColumns = defaultUdtHeaders.slice(0, 2);
       const timeline = {
         savedObjectId: 'savedObject-1',
@@ -586,6 +587,35 @@ describe('helpers', () => {
         columns: customColumns,
       });
     });
+
+    test('should produce correct model if unifiedComponentsInTimelineDisabled == false and custom set of excludedRowRendererIds is passed', () => {
+      const excludedRowRendererIds: RowRendererId[] = ['zeek'];
+      const timeline = {
+        savedObjectId: 'savedObject-1',
+        title: 'Awesome Timeline',
+        version: '1',
+        status: TimelineStatusEnum.active,
+        timelineType: TimelineTypeEnum.default,
+        excludedRowRendererIds,
+      };
+
+      const newTimeline = defaultTimelineToTimelineModel(
+        timeline,
+        false,
+        TimelineTypeEnum.default,
+        false
+      );
+      expect(newTimeline).toEqual({
+        ...defaultTimeline,
+        dateRange: { end: '2020-07-08T08:20:18.966Z', start: '2020-07-07T08:20:18.966Z' },
+        status: TimelineStatusEnum.active,
+        title: 'Awesome Timeline',
+        timelineType: TimelineTypeEnum.default,
+        defaultColumns: defaultUdtHeaders,
+        columns: defaultUdtHeaders,
+        excludedRowRendererIds,
+      });
+    });
   });
 
   describe('queryTimelineById', () => {

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
@@ -262,7 +262,7 @@ export const defaultTimelineToTimelineModel = (
           }
         : timeline.dateRange,
     dataProviders: getDataProviders(duplicate, timeline.dataProviders, timelineType),
-    excludedRowRendererIds: isTemplate ? [] : RowRendererValues,
+    excludedRowRendererIds: isTemplate ? [] : timeline.excludedRowRendererIds ?? RowRendererValues,
     eventIdToNoteIds: setEventIdToNoteIds(duplicate, timeline.eventIdToNoteIds),
     filters: timeline.filters != null ? timeline.filters.map(setTimelineFilters) : [],
     isFavorite: duplicate

diff --git a/x-pack/plugins/security_solution/public/timelines/components/row_renderer_switch/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/row_renderer_switch/index.tsx
@@ -9,7 +9,6 @@ import type { EuiSwitchEvent } from '@elastic/eui';
 import { EuiToolTip, EuiSwitch, EuiFormRow, useGeneratedHtmlId } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import styled from 'styled-components';
 import { RowRendererValues } from '../../../../common/api/timeline';
 import type { State } from '../../../common/store';
 import { setExcludedRowRendererIds } from '../../store/actions';
@@ -20,12 +19,6 @@ interface RowRendererSwitchProps {
   timelineId: string;
 }
 
-const CustomFormRow = styled(EuiFormRow)`
-  .euiFormRow__label {
-    font-weight: 400;
-  }
-`;
-
 export const RowRendererSwitch = React.memo(function RowRendererSwitch(
   props: RowRendererSwitchProps
 ) {
@@ -75,15 +68,15 @@ export const RowRendererSwitch = React.memo(function RowRendererSwitch(
 
   return (
     <EuiToolTip position="top" content={i18n.EVENT_RENDERERS_SWITCH_WARNING}>
-      <CustomFormRow display="columnCompressedSwitch" label={rowRendererLabel}>
+      <EuiFormRow hasChildLabel={false}>
         <EuiSwitch
           data-test-subj="row-renderer-switch"
-          label=""
+          label={rowRendererLabel}
           checked={isAnyRowRendererEnabled}
           onChange={onChange}
           compressed
         />
-      </CustomFormRow>
+      </EuiFormRow>
     </EuiToolTip>
   );
 });