From b7b724b4f677db8b3ca0b7d5a35a822fef9766a0 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 1 Dec 2021 21:47:32 -0500
Subject: [PATCH] [Security Solution] Fixes the formatting of the Alert Summary
 View in Timeline (#120185) (#120190)

## [Security Solution] Fixes the formatting of the Alert Summary View in Timeline

This PR fixes a formatting issue in Timeline resulting from redundant actions, (see <https://github.com/elastic/kibana/issues/120181> for repro steps), as shown in the Before / After screenshots below:

**Before**

![redundant-actions-cause-formatting-issue](https://user-images.githubusercontent.com/4459398/144320934-6e929c83-e096-4b5c-a8ab-36863a8b9ded.png)

_Above: Before - The Alert summary view in Timeline renders redundant actions, resulting in the formatting above_

**After**

![redundant-actions-fixed](https://user-images.githubusercontent.com/4459398/144324353-3337700f-11ab-4c48-ae80-b881ab73131a.png)

_Above: After - The redundant hover actions are gone, and the formatting is correct_

### No changes to the `Security > Alerts` view

The Security Alerts view is **unchanged**, per the screenshots below:

**Before**

![security_alerts_before_fix](https://user-images.githubusercontent.com/4459398/144323960-7b95ab29-60fa-47ab-b258-9dd9ded4efe6.png)

_Above: Before - Hover actions in the Alert summary in Security > Alerts before the fix_

**After**

![security_alerts_after_fix_noop](https://user-images.githubusercontent.com/4459398/144324007-09df11b7-d22c-4600-bdc6-b1ff113f34ed.png)

_Above: After - `noop` The Alert summary in Security > Alerts remains **unchanged** after the fix_

Co-authored-by: Andrew Goldstein <andrew-goldstein@users.noreply.github.com>
---
 .../event_details/alert_summary_view.test.tsx | 19 ++++++++++++++++
 .../event_details/alert_summary_view.tsx      | 22 ++++++++++---------
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.test.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.test.tsx
index fcc943f565895..0aa9c5601f87e 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.test.tsx
@@ -14,6 +14,7 @@ import { TimelineEventsDetailsItem } from '../../../../common/search_strategy';
 import { useRuleWithFallback } from '../../../detections/containers/detection_engine/rules/use_rule_with_fallback';
 
 import { TestProviders, TestProvidersComponent } from '../../mock';
+import { TimelineId } from '../../../../common';
 import { mockBrowserFields } from '../../containers/source/mock';
 
 jest.mock('../../lib/kibana');
@@ -49,6 +50,24 @@ describe('AlertSummaryView', () => {
     expect(getByTestId('summary-view')).toBeInTheDocument();
   });
 
+  test('it renders the action cell by default', () => {
+    const { getAllByTestId } = render(
+      <TestProviders>
+        <AlertSummaryView {...props} />
+      </TestProviders>
+    );
+    expect(getAllByTestId('hover-actions-filter-for').length).toBeGreaterThan(0);
+  });
+
+  test('it does NOT render the action cell for the active timeline', () => {
+    const { queryAllByTestId } = render(
+      <TestProviders>
+        <AlertSummaryView {...props} timelineId={TimelineId.active} />
+      </TestProviders>
+    );
+    expect(queryAllByTestId('hover-actions-filter-for').length).toEqual(0);
+  });
+
   test("render no investigation guide if it doesn't exist", async () => {
     (useRuleWithFallback as jest.Mock).mockReturnValue({
       rule: {
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx
index 19a23e5002567..82259aa2312ae 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx
@@ -14,7 +14,7 @@ import { AlertSummaryRow, getSummaryColumns, SummaryRow } from './helpers';
 
 import { ActionCell } from './table/action_cell';
 import { FieldValueCell } from './table/field_value_cell';
-import { TimelineEventsDetailsItem } from '../../../../common';
+import { TimelineEventsDetailsItem, TimelineId } from '../../../../common';
 
 import { getSummaryRows } from './get_alert_summary_rows';
 
@@ -37,15 +37,17 @@ const getDescription = ({
       isDraggable={isDraggable}
       values={values}
     />
-    <ActionCell
-      contextId={timelineId}
-      data={data}
-      eventId={eventId}
-      fieldFromBrowserField={fieldFromBrowserField}
-      linkValue={linkValue}
-      timelineId={timelineId}
-      values={values}
-    />
+    {timelineId !== TimelineId.active && (
+      <ActionCell
+        contextId={timelineId}
+        data={data}
+        eventId={eventId}
+        fieldFromBrowserField={fieldFromBrowserField}
+        linkValue={linkValue}
+        timelineId={timelineId}
+        values={values}
+      />
+    )}
   </>
 );