[7.x] [SIEM] - Fix Jest test errors and warnings (#41712)

x-pack/legacy/plugins/siem/public/components/autocomplete_field/suggestion_item.tsx

@@ -8,7 +8,7 @@ import { EuiIcon } from '@elastic/eui';
 import { transparentize } from 'polished';
 import React from 'react';
 import { AutocompleteSuggestion } from 'ui/autocomplete_providers';
-
+import styled from 'styled-components';
 import euiStyled from '../../../../../common/eui_styled_components';
 
 interface SuggestionItemProps {
@@ -64,7 +64,7 @@ const SuggestionItemField = euiStyled.div`
   padding: ${props => props.theme.eui.euiSizeXS};
 `;
 
-const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: string }>`
+const SuggestionItemIconField = styled(SuggestionItemField)<{ suggestionType: string }>`
   background-color: ${props =>
     transparentize(0.9, getEuiIconColor(props.theme, props.suggestionType))};
   color: ${props => getEuiIconColor(props.theme, props.suggestionType)};
@@ -73,12 +73,12 @@ const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: str
   width: ${props => props.theme.eui.euiSizeXL};
 `;
 
-const SuggestionItemTextField = SuggestionItemField.extend`
+const SuggestionItemTextField = styled(SuggestionItemField)`
   flex: 2 0 0;
   font-family: ${props => props.theme.eui.euiCodeFontFamily};
 `;
 
-const SuggestionItemDescriptionField = SuggestionItemField.extend`
+const SuggestionItemDescriptionField = styled(SuggestionItemField)`
   flex: 3 0 0;
 
   p {

x-pack/legacy/plugins/siem/public/components/event_details/columns.tsx

@@ -184,9 +184,10 @@ export const getColumns = ({
   },
   {
     field: 'valuesConcatenated',
+    name: i18n.BLANK,
+    render: () => null,
     sortable: false,
     truncateText: true,
-    render: () => null,
     width: '1px',
   },
 ];

x-pack/legacy/plugins/siem/public/components/event_details/translations.ts

@@ -26,6 +26,10 @@ export const DESCRIPTION = i18n.translate('xpack.siem.eventDetails.description',
   defaultMessage: 'Description',
 });
 
+export const BLANK = i18n.translate('xpack.siem.eventDetails.blank', {
+  defaultMessage: ' ',
+});
+
 export const PLACEHOLDER = i18n.translate('xpack.siem.eventDetails.filter.placeholder', {
   defaultMessage: 'Filter by Field, Value, or Description...',
 });

x-pack/legacy/plugins/siem/public/components/ml/conditional_links/add_entities_to_kql.test.ts

@@ -7,6 +7,16 @@
 import { entityToKql, entitiesToKql, addEntitiesToKql } from './add_entities_to_kql';
 
 describe('add_entities_to_kql', () => {
+  // Suppress warnings about invalid RISON as this is what we are testing
+  /* eslint-disable no-console */
+  const originalError = console.log;
+  beforeAll(() => {
+    console.log = jest.fn();
+  });
+
+  afterAll(() => {
+    console.log = originalError;
+  });
   describe('#entityToKql', () => {
     test('returns empty string with no entity names defined and an empty entity string', () => {
       const entity = entityToKql([], '');

x-pack/legacy/plugins/siem/public/components/ml/conditional_links/replace_kql_query_location_for_host_page.test.ts

@@ -6,7 +6,17 @@
 
 import { replaceKqlQueryLocationForHostPage } from './replace_kql_query_location_for_host_page';
 
+// Suppress warnings about invalid RISON as this is what we are testing
+/* eslint-disable no-console */
+const originalError = console.log;
 describe('replace_kql_query_location_for_host_page', () => {
+  beforeAll(() => {
+    console.log = jest.fn();
+  });
+
+  afterAll(() => {
+    console.log = originalError;
+  });
   test('replaces host details and type details for a page', () => {
     const replacement = replaceKqlQueryLocationForHostPage(
       '(filterQuery:(expression:\'process.name: "some-name"\',kind:kuery),queryLocation:hosts.details,type:details)'

x-pack/legacy/plugins/siem/public/components/ml/conditional_links/replace_kql_query_location_for_network_page.test.ts

@@ -5,8 +5,17 @@
  */
 
 import { replaceKqlQueryLocationForNetworkPage } from './replace_kql_query_location_for_network_page';
-
+// Suppress warnings about invalid RISON as this is what we are testing
+/* eslint-disable no-console */
+const originalError = console.log;
 describe('replace_kql_query_location_for_host_page', () => {
+  beforeAll(() => {
+    console.log = jest.fn();
+  });
+
+  afterAll(() => {
+    console.log = originalError;
+  });
   test('replaces host details and type details for a page', () => {
     const replacement = replaceKqlQueryLocationForNetworkPage(
       '(filterQuery:(expression:\'process.name: "some-name"\',kind:kuery),queryLocation:network.details,type:details)'

x-pack/legacy/plugins/siem/public/components/ml/conditional_links/rison_helpers.test.ts

@@ -7,7 +7,17 @@
 import { decodeRison, isRisonObject, isRegularString } from './rison_helpers';
 
 describe('rison_helpers', () => {
+  // Suppress warnings about invalid RISON as this is what we are testing
+  /* eslint-disable no-console */
+  const originalError = console.log;
   describe('#decodeRison', () => {
+    beforeAll(() => {
+      console.log = jest.fn();
+    });
+
+    afterAll(() => {
+      console.log = originalError;
+    });
     test('returns null if given a bad value for RISON', () => {
       const expected = decodeRison('some invalid value');
       expect(expected).toEqual(null);

x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/actions_columns.tsx

@@ -4,15 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { EuiButtonIcon, EuiToolTip, EuiIcon } from '@elastic/eui';
 import * as React from 'react';
+import styled from 'styled-components';
 
 import { ACTION_COLUMN_WIDTH, PositionedIcon } from './common_styles';
 import { DeleteTimelines, OnOpenTimeline, OpenTimelineResult } from '../types';
 import { DeleteTimelineModalButton } from '../delete_timeline_modal';
 
 import * as i18n from '../translations';
 
+const HeaderIcon = styled(EuiIcon)`
+  position: relative;
+  left: 9px;
+`;
+
 /**
  * Returns the action columns (e.g. delete, open duplicate timeline)
  */
@@ -26,7 +32,12 @@ export const getActionsColumns = ({
   showDeleteAction: boolean;
 }) => {
   const deleteTimelineColumn = {
-    align: 'center',
+    align: 'right',
+    name: (
+      <EuiToolTip content={i18n.DELETE}>
+        <HeaderIcon data-test-subj="delete-header-icon" size="s" color="subdued" type="trash" />
+      </EuiToolTip>
+    ),
     field: 'savedObjectId',
     render: (savedObjectId: string, { title }: OpenTimelineResult) => (
       <PositionedIcon>
@@ -42,7 +53,12 @@ export const getActionsColumns = ({
   };
 
   const openAsDuplicateColumn = {
-    align: 'center',
+    align: 'right',
+    name: (
+      <EuiToolTip content={i18n.OPEN_AS_DUPLICATE}>
+        <HeaderIcon data-test-subj="duplicate-header-icon" size="s" color="subdued" type="copy" />
+      </EuiToolTip>
+    ),
     field: 'savedObjectId',
     render: (savedObjectId: string, timelineResult: OpenTimelineResult) => (
       <PositionedIcon>