[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 <#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 <[email protected]>

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: {

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}
+ />
+ )}
  </>
 );