`
- ${({ theme, width }) => css`
- background-color: ${theme.eui.euiColorLightestShade};
- border: ${theme.eui.euiBorderWidthThin} solid ${theme.eui.euiColorMediumShade};
- border-radius: ${theme.eui.euiBorderRadius};
- left: 0;
- padding: ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.m};
- position: absolute;
- top: calc(100% + ${theme.eui.euiSize});
- width: ${width}px;
- z-index: 9990;
- `}
+ background-color: ${({ theme }) => theme.eui.euiColorLightestShade};
+ border: ${({ theme }) => theme.eui.euiBorderWidthThin} solid
+ ${({ theme }) => theme.eui.euiColorMediumShade};
+ border-radius: ${({ theme }) => theme.eui.euiBorderRadius};
+ left: 0;
+ padding: ${({ theme }) => theme.eui.paddingSizes.s} ${({ theme }) => theme.eui.paddingSizes.s}
+ ${({ theme }) => theme.eui.paddingSizes.m};
+ position: absolute;
+ top: calc(100% + ${({ theme }) => theme.eui.euiSize});
+ width: ${({ width }) => width}px;
+ z-index: 9990;
`;
FieldsBrowserContainer.displayName = 'FieldsBrowserContainer';
diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx
index 9c2cf2cb0e0b28..d5d8c547755664 100644
--- a/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/field_name.tsx
@@ -16,7 +16,7 @@ import {
EuiToolTip,
} from '@elastic/eui';
import React, { useContext } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
import { WithCopyToClipboard } from '../../lib/clipboard/with_copy_to_clipboard';
import { ColumnHeader } from '../timeline/body/column_headers/column_header';
@@ -30,51 +30,55 @@ import * as i18n from './translations';
* The name of a (draggable) field
*/
export const FieldNameContainer = styled.span`
- ${({ theme }) => css`
- padding: 5px;
- {
- border-radius: 4px;
- padding: 0 4px 0 8px;
- position: relative;
+ padding: 5px;
+ {
+ border-radius: 4px;
+ padding: 0 4px 0 8px;
+ position: relative;
+
+ &::before {
+ background-image: linear-gradient(
+ 135deg,
+ ${({ theme }) => theme.eui.euiColorMediumShade} 25%,
+ transparent 25%
+ ),
+ linear-gradient(-135deg, ${({ theme }) =>
+ theme.eui.euiColorMediumShade} 25%, transparent 25%),
+ linear-gradient(135deg, transparent 75%, ${({ theme }) =>
+ theme.eui.euiColorMediumShade} 75%),
+ linear-gradient(-135deg, transparent 75%, ${({ theme }) =>
+ theme.eui.euiColorMediumShade} 75%);
+ background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
+ background-size: 2px 2px;
+ bottom: 2px;
+ content: '';
+ display: block;
+ left: 2px;
+ position: absolute;
+ top: 2px;
+ width: 4px;
+ }
+
+ &:hover,
+ &:focus {
+ transition: background-color 0.7s ease;
+ background-color: #000;
+ color: #fff;
&::before {
background-image: linear-gradient(
135deg,
- ${theme.eui.euiColorMediumShade} 25%,
+ #fff 25%,
transparent 25%
),
- linear-gradient(-135deg, ${theme.eui.euiColorMediumShade} 25%, transparent 25%),
- linear-gradient(135deg, transparent 75%, ${theme.eui.euiColorMediumShade} 75%),
- linear-gradient(-135deg, transparent 75%, ${theme.eui.euiColorMediumShade} 75%);
- background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
- background-size: 2px 2px;
- bottom: 2px;
- content: '';
- display: block;
- left: 2px;
- position: absolute;
- top: 2px;
- width: 4px;
+ linear-gradient(-135deg, ${({ theme }) =>
+ theme.eui.euiColorLightestShade} 25%, transparent 25%),
+ linear-gradient(135deg, transparent 75%, ${({ theme }) =>
+ theme.eui.euiColorLightestShade} 75%),
+ linear-gradient(-135deg, transparent 75%, ${({ theme }) =>
+ theme.eui.euiColorLightestShade} 75%);
}
-
- &:hover,
- &:focus {
- transition: background-color 0.7s ease;
- background-color: #000;
- color: #fff;
-
- &::before {
- background-image: linear-gradient(
- 135deg,
- #fff 25%,
- transparent 25%
- ),
- linear-gradient(-135deg, ${theme.eui.euiColorLightestShade} 25%, transparent 25%),
- linear-gradient(135deg, transparent 75%, ${theme.eui.euiColorLightestShade} 75%),
- linear-gradient(-135deg, transparent 75%, ${theme.eui.euiColorLightestShade} 75%);
- }
- }
- `}
+ }
`;
FieldNameContainer.displayName = 'FieldNameContainer';
diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/index.test.tsx
index 8948f765b8fbca..e943ca6f3e8631 100644
--- a/x-pack/legacy/plugins/siem/public/components/fields_browser/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/index.test.tsx
@@ -6,7 +6,6 @@
import { mount } from 'enzyme';
import * as React from 'react';
-import 'jest-styled-components';
import { mockBrowserFields } from '../../containers/source/mock';
import { TestProviders } from '../../mock';
diff --git a/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx b/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx
index 892c160d054bdc..bdda8497a8bcb6 100644
--- a/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/filters_global/filters_global.tsx
@@ -18,25 +18,23 @@ const disableSticky = 'screen and (max-width: ' + euiLightVars.euiBreakpoints.s
const disableStickyMq = window.matchMedia(disableSticky);
const Wrapper = styled.aside<{ isSticky?: boolean }>`
- ${props => css`
- position: relative;
- z-index: ${props.theme.eui.euiZNavigation};
- background: ${props.theme.eui.euiColorEmptyShade};
- border-bottom: ${props.theme.eui.euiBorderThin};
- padding: ${props.theme.eui.paddingSizes.m} ${gutterTimeline} ${
- props.theme.eui.paddingSizes.m
- } ${props.theme.eui.paddingSizes.l};
-
- ${props.isSticky &&
- `
+ position: relative;
+ z-index: ${({ theme }) => theme.eui.euiZNavigation};
+ background: ${({ theme }) => theme.eui.euiColorEmptyShade};
+ border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
+ padding: ${({ theme }) => theme.eui.paddingSizes.m} ${gutterTimeline} ${({ theme }) =>
+ theme.eui.paddingSizes.m} ${({ theme }) => theme.eui.paddingSizes.l};
+
+ ${({ isSticky }) =>
+ isSticky &&
+ css`
top: ${offsetChrome}px !important;
`}
- @media only ${disableSticky} {
- position: static !important;
- z-index: ${props.theme.eui.euiZContent} !important;
- }
- `}
+ @media only ${disableSticky} {
+ position: static !important;
+ z-index: ${({ theme }) => theme.eui.euiZContent} !important;
+ }
`;
Wrapper.displayName = 'Wrapper';
diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.test.tsx
index 4b7b935b1f536b..65233e55901ff8 100644
--- a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.test.tsx
@@ -6,7 +6,6 @@
import { mount, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
-import 'jest-styled-components';
import * as React from 'react';
import { flyoutHeaderHeight } from '../';
diff --git a/x-pack/legacy/plugins/siem/public/components/header_page/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/header_page/index.test.tsx
index ae33b63e93d39f..9c50a915b7ba8b 100644
--- a/x-pack/legacy/plugins/siem/public/components/header_page/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/header_page/index.test.tsx
@@ -7,7 +7,6 @@
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { mount, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
-import 'jest-styled-components';
import React from 'react';
import { TestProviders } from '../../mock';
diff --git a/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx
index fffeece818d13e..4a6da9c80968f2 100644
--- a/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/header_section/index.test.tsx
@@ -7,7 +7,6 @@
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { mount, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
-import 'jest-styled-components';
import React from 'react';
import { TestProviders } from '../../mock';
diff --git a/x-pack/legacy/plugins/siem/public/components/header_section/index.tsx b/x-pack/legacy/plugins/siem/public/components/header_section/index.tsx
index e46ae55a57a45e..14af10eb6cd9bf 100644
--- a/x-pack/legacy/plugins/siem/public/components/header_section/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/header_section/index.tsx
@@ -15,19 +15,18 @@ interface HeaderProps {
border?: boolean;
}
-const Header = styled.header.attrs({
+const Header = styled.header.attrs(() => ({
className: 'siemHeaderSection',
-})
`
- ${({ border, theme }) => css`
- margin-bottom: ${theme.eui.euiSizeL};
- user-select: text;
+}))`
+ margin-bottom: ${({ theme }) => theme.eui.euiSizeL};
+ user-select: text;
- ${border &&
- css`
- border-bottom: ${theme.eui.euiBorderThin};
- padding-bottom: ${theme.eui.paddingSizes.l};
- `}
- `}
+ ${({ border }) =>
+ border &&
+ css`
+ border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
+ padding-bottom: ${({ theme }) => theme.eui.paddingSizes.l};
+ `}
`;
Header.displayName = 'Header';
diff --git a/x-pack/legacy/plugins/siem/public/components/link_icon/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/link_icon/index.test.tsx
index 8e4387f35056ef..451db49028ee1b 100644
--- a/x-pack/legacy/plugins/siem/public/components/link_icon/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/link_icon/index.test.tsx
@@ -6,7 +6,6 @@
import { mount, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
-import 'jest-styled-components';
import React from 'react';
import { TestProviders } from '../../mock';
diff --git a/x-pack/legacy/plugins/siem/public/components/loader/index.tsx b/x-pack/legacy/plugins/siem/public/components/loader/index.tsx
index 988fa4a677d7ae..55628fe2e8d336 100644
--- a/x-pack/legacy/plugins/siem/public/components/loader/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/loader/index.tsx
@@ -18,14 +18,14 @@ import { pure } from 'recompose';
import styled, { css } from 'styled-components';
const Aside = styled.aside<{ overlay?: boolean; overlayBackground?: string }>`
- ${({ overlay, overlayBackground, theme }) => css`
- padding: ${theme.eui.paddingSizes.m};
+ padding: ${({ theme }) => theme.eui.paddingSizes.m};
- ${overlay &&
- `
- background: ${
- overlayBackground ? rgba(overlayBackground, 0.9) : rgba(theme.eui.euiColorEmptyShade, 0.9)
- };
+ ${({ overlay, overlayBackground, theme }) =>
+ overlay &&
+ css`
+ background: ${overlayBackground
+ ? rgba(overlayBackground, 0.9)
+ : rgba(theme.eui.euiColorEmptyShade, 0.9)};
bottom: 0;
left: 0;
position: absolute;
@@ -33,22 +33,21 @@ const Aside = styled.aside<{ overlay?: boolean; overlayBackground?: string }>`
top: 0;
z-index: ${theme.eui.euiZLevel1};
`}
- `}
`;
Aside.displayName = 'Aside';
-const FlexGroup = styled(EuiFlexGroup).attrs({
+const FlexGroup = styled(EuiFlexGroup).attrs(() => ({
alignItems: 'center',
direction: 'column',
gutterSize: 's',
justifyContent: 'center',
-})<{ overlay: { overlay?: boolean } }>`
+}))<{ overlay: { overlay?: boolean } }>`
${({ overlay }) =>
overlay &&
- `
- height: 100%;
- `}
+ css`
+ height: 100%;
+ `}
`;
FlexGroup.displayName = 'FlexGroup';
diff --git a/x-pack/legacy/plugins/siem/public/components/loading/index.tsx b/x-pack/legacy/plugins/siem/public/components/loading/index.tsx
index 5b9cb487897394..eb85edce78a8ff 100644
--- a/x-pack/legacy/plugins/siem/public/components/loading/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/loading/index.tsx
@@ -7,11 +7,11 @@
import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiPanel, EuiText } from '@elastic/eui';
import * as React from 'react';
import { pure } from 'recompose';
-import styled, { injectGlobal } from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
-// SIDE EFFECT: the following `injectGlobal` overrides default styling in angular code that was not theme-friendly
+// SIDE EFFECT: the following `createGlobalStyle` overrides default styling in angular code that was not theme-friendly
// eslint-disable-next-line no-unused-expressions
-injectGlobal`
+createGlobalStyle`
.euiPanel-loading-hide-border {
border: none;
}
diff --git a/x-pack/legacy/plugins/siem/public/components/markdown/markdown_hint.test.tsx b/x-pack/legacy/plugins/siem/public/components/markdown/markdown_hint.test.tsx
index a1d12f0d4e29e9..6319af3e6ffa13 100644
--- a/x-pack/legacy/plugins/siem/public/components/markdown/markdown_hint.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/markdown/markdown_hint.test.tsx
@@ -6,7 +6,6 @@
import { mount, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
-import 'jest-styled-components';
import * as React from 'react';
import { MarkdownHint } from './markdown_hint';
diff --git a/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
index 8760dce2b76dff..9813456e416383 100644
--- a/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/ml/score/__snapshots__/anomaly_score.test.tsx.snap
@@ -82,7 +82,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
}
@@ -105,9 +105,9 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
-
+
17
-
+
,
"title": "Max Anomaly Score",
},
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/add_note/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/notes/add_note/index.test.tsx
index a764727e8af262..fc76780ef80c79 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/add_note/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/notes/add_note/index.test.tsx
@@ -6,7 +6,6 @@
import { mount, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
-import 'jest-styled-components';
import * as React from 'react';
import { AddNote } from '.';
diff --git a/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
index 7a8232357d3e10..7e4b6babae449c 100644
--- a/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
@@ -1,7 +1,493 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NoteCardBody renders correctly against snapshot 1`] = `
-
+
+
+
`;
diff --git a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.test.tsx b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.test.tsx
index 26dc0ca455f73b..e5047662eef678 100644
--- a/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/open_timeline/timelines_table/icon_header_columns.test.tsx
@@ -7,7 +7,6 @@
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { cloneDeep, omit } from 'lodash/fp';
import { mountWithIntl } from 'test_utils/enzyme_helpers';
-import 'jest-styled-components';
import * as React from 'react';
import { ThemeProvider } from 'styled-components';
diff --git a/x-pack/legacy/plugins/siem/public/components/page/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/index.tsx
index d211d1513767d0..bc701006c3a9c0 100644
--- a/x-pack/legacy/plugins/siem/public/components/page/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/index.tsx
@@ -13,11 +13,11 @@ import {
EuiIcon,
EuiPage,
} from '@elastic/eui';
-import styled, { injectGlobal } from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
-// SIDE EFFECT: the following `injectGlobal` overrides default styling in angular code that was not theme-friendly
+// SIDE EFFECT: the following `createGlobalStyle` overrides default styling in angular code that was not theme-friendly
// eslint-disable-next-line no-unused-expressions
-injectGlobal`
+createGlobalStyle`
div.app-wrapper {
background-color: rgba(0,0,0,0);
}
diff --git a/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap
index 14c5538843ef5d..e000eeb14214e8 100644
--- a/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/paginated_table/__snapshots__/index.test.tsx.snap
@@ -1,107 +1,593 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Paginated Table Component rendering it renders the default load more table 1`] = `
-
- My test supplement.
-
- }
- headerTitle="Hosts"
- headerTooltip="My test tooltip"
- headerUnit="Test Unit"
- itemsPerRow={
- Array [
- Object {
- "numberOfRow": 2,
- "text": "2 rows",
- },
- Object {
- "numberOfRow": 5,
- "text": "5 rows",
- },
- Object {
- "numberOfRow": 10,
- "text": "10 rows",
- },
- Object {
- "numberOfRow": 20,
- "text": "20 rows",
- },
- Object {
- "numberOfRow": 50,
- "text": "50 rows",
- },
- ]
- }
- limit={1}
- loadPage={[Function]}
- loading={false}
- pageOfItems={
- Array [
- Object {
- "cursor": Object {
- "value": "98966fa2013c396155c460d35c0902be",
- },
- "host": Object {
- "_id": "cPsuhGcB0WOhS6qyTKC0",
- "firstSeen": "2018-12-06T15:40:53.319Z",
- "name": "elrond.elstc.co",
- "os": "Ubuntu",
- "version": "18.04.1 LTS (Bionic Beaver)",
+
+>
+
+ My test supplement.
+
+ }
+ headerTitle="Hosts"
+ headerTooltip="My test tooltip"
+ headerUnit="Test Unit"
+ itemsPerRow={
+ Array [
+ Object {
+ "numberOfRow": 2,
+ "text": "2 rows",
+ },
+ Object {
+ "numberOfRow": 5,
+ "text": "5 rows",
+ },
+ Object {
+ "numberOfRow": 10,
+ "text": "10 rows",
+ },
+ Object {
+ "numberOfRow": 20,
+ "text": "20 rows",
+ },
+ Object {
+ "numberOfRow": 50,
+ "text": "50 rows",
+ },
+ ]
+ }
+ limit={1}
+ loadPage={[Function]}
+ loading={false}
+ pageOfItems={
+ Array [
+ Object {
+ "cursor": Object {
+ "value": "98966fa2013c396155c460d35c0902be",
+ },
+ "host": Object {
+ "_id": "cPsuhGcB0WOhS6qyTKC0",
+ "firstSeen": "2018-12-06T15:40:53.319Z",
+ "name": "elrond.elstc.co",
+ "os": "Ubuntu",
+ "version": "18.04.1 LTS (Bionic Beaver)",
+ },
+ },
+ Object {
+ "cursor": Object {
+ "value": "aa7ca589f1b8220002f2fc61c64cfbf1",
+ },
+ "host": Object {
+ "_id": "KwQDiWcB0WOhS6qyXmrW",
+ "firstSeen": "2018-12-07T14:12:38.560Z",
+ "name": "siem-kibana",
+ "os": "Debian GNU/Linux",
+ "version": "9 (stretch)",
+ },
+ },
+ ]
+ }
+ showMorePagesIndicator={true}
+ totalCount={10}
+ updateActivePage={[Function]}
+ updateLimitPagination={[Function]}
+ />
+
`;
diff --git a/x-pack/legacy/plugins/siem/public/components/paginated_table/index.tsx b/x-pack/legacy/plugins/siem/public/components/paginated_table/index.tsx
index 7be0c1885811ba..aedec1a340bfde 100644
--- a/x-pack/legacy/plugins/siem/public/components/paginated_table/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/paginated_table/index.tsx
@@ -17,7 +17,7 @@ import {
} from '@elastic/eui';
import { noop } from 'lodash/fp';
import React, { memo, useState, useEffect } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
import { Direction } from '../../graphql/types';
import { AuthTableColumns } from '../page/hosts/authentications_table';
@@ -319,37 +319,35 @@ const BasicTable = styled(EuiBasicTable)`
BasicTable.displayName = 'BasicTable';
-const FooterAction = styled(EuiFlexGroup).attrs({
+const FooterAction = styled(EuiFlexGroup).attrs(() => ({
alignItems: 'center',
responsive: false,
-})`
- margin-top: ${props => props.theme.eui.euiSizeXS};
+}))`
+ margin-top: ${({ theme }) => theme.eui.euiSizeXS};
`;
FooterAction.displayName = 'FooterAction';
const PaginationEuiFlexItem = styled(EuiFlexItem)`
- ${props => css`
- @media only screen and (min-width: ${props.theme.eui.euiBreakpoints.m}) {
- .euiButtonIcon:last-child {
- margin-left: 28px;
- }
+ @media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
+ .euiButtonIcon:last-child {
+ margin-left: 28px;
+ }
- .euiPagination {
- position: relative;
- }
+ .euiPagination {
+ position: relative;
+ }
- .euiPagination::before {
- bottom: 0;
- color: ${props.theme.eui.euiButtonColorDisabled};
- content: '\\2026';
- font-size: ${props.theme.eui.euiFontSizeS};
- padding: 5px ${props.theme.eui.euiSizeS};
- position: absolute;
- right: ${props.theme.eui.euiSizeL};
- }
+ .euiPagination::before {
+ bottom: 0;
+ color: ${({ theme }) => theme.eui.euiButtonColorDisabled};
+ content: '\\2026';
+ font-size: ${({ theme }) => theme.eui.euiFontSizeS};
+ padding: 5px ${({ theme }) => theme.eui.euiSizeS};
+ position: absolute;
+ right: ${({ theme }) => theme.eui.euiSizeL};
}
- `}
+ }
`;
PaginationEuiFlexItem.displayName = 'PaginationEuiFlexItem';
diff --git a/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap
index 432abd799b48af..6ae630f363b588 100644
--- a/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/resize_handle/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Resizeable it renders 1`] = `
}
diff --git a/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx
index 6bb036a88a9d74..f84276f99315d4 100644
--- a/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/resize_handle/index.test.tsx
@@ -6,7 +6,6 @@
import { mount, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
-import 'jest-styled-components';
import * as React from 'react';
import { TestProviders } from '../../mock/test_providers';
diff --git a/x-pack/legacy/plugins/siem/public/components/resize_handle/index.tsx b/x-pack/legacy/plugins/siem/public/components/resize_handle/index.tsx
index 0a6203056fd20f..eb3326c2f2cd0c 100644
--- a/x-pack/legacy/plugins/siem/public/components/resize_handle/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/resize_handle/index.tsx
@@ -7,7 +7,7 @@
import React, { useEffect, useRef } from 'react';
import { fromEvent, Observable, Subscription } from 'rxjs';
import { concatMap, takeUntil } from 'rxjs/operators';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
export type OnResize = ({ delta, id }: { delta: number; id: string }) => void;
@@ -42,16 +42,14 @@ interface Props extends ResizeHandleContainerProps {
}
const ResizeHandleContainer = styled.div`
- ${({ bottom, height, left, positionAbsolute, right, theme, top }) => css`
- bottom: ${positionAbsolute && bottom};
- cursor: ${resizeCursorStyle};
- height: ${height};
- left: ${positionAbsolute && left};
- position: ${positionAbsolute && 'absolute'};
- right: ${positionAbsolute && right};
- top: ${positionAbsolute && top};
- z-index: ${positionAbsolute && theme.eui.euiZLevel1};
- `}
+ bottom: ${({ positionAbsolute, bottom }) => positionAbsolute && bottom};
+ cursor: ${resizeCursorStyle};
+ height: ${({ height }) => height};
+ left: ${({ positionAbsolute, left }) => positionAbsolute && left};
+ position: ${({ positionAbsolute }) => positionAbsolute && 'absolute'};
+ right: ${({ positionAbsolute, right }) => positionAbsolute && right};
+ top: ${({ positionAbsolute, top }) => positionAbsolute && top};
+ z-index: ${({ positionAbsolute, theme }) => positionAbsolute && theme.eui.euiZLevel1};
`;
ResizeHandleContainer.displayName = 'ResizeHandleContainer';
@@ -69,7 +67,7 @@ export const Resizeable = React.memo(
const dragEventTargets = useRef>([]);
const dragSubscription = useRef(null);
const prevX = useRef(0);
- const ref = useRef>(React.createRef());
+ const ref = useRef(null);
const upSubscription = useRef(null);
const isResizingRef = useRef(false);
@@ -80,7 +78,7 @@ export const Resizeable = React.memo(
};
useEffect(() => {
const move$ = fromEvent(document, 'mousemove');
- const down$ = fromEvent(ref.current.current!, 'mousedown');
+ const down$ = fromEvent(ref.current!, 'mousedown');
const up$ = fromEvent(document, 'mouseup');
drag$.current = down$.pipe(concatMap(() => move$.pipe(takeUntil(up$))));
@@ -131,7 +129,7 @@ export const Resizeable = React.memo(
bottom={bottom}
data-test-subj="resize-handle-container"
height={height}
- innerRef={ref.current}
+ ref={ref}
left={left}
positionAbsolute={positionAbsolute}
right={right}
diff --git a/x-pack/legacy/plugins/siem/public/components/selectable_text/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/selectable_text/index.test.tsx
index 3ecbfcc6307523..95c68d0233c691 100644
--- a/x-pack/legacy/plugins/siem/public/components/selectable_text/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/selectable_text/index.test.tsx
@@ -6,7 +6,6 @@
import { mount, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
-import 'jest-styled-components';
import * as React from 'react';
import { SelectableText } from '.';
diff --git a/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.test.tsx
index b5147d395c7381..fc1c6e00edc033 100644
--- a/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.test.tsx
@@ -6,7 +6,6 @@
import { mount, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
-import 'jest-styled-components';
import React from 'react';
import { TestProviders } from '../../mock';
diff --git a/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.tsx b/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.tsx
index 6359063798ba8e..20aea3251d8381 100644
--- a/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/skeleton_row/index.tsx
@@ -5,24 +5,22 @@
*/
import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
interface RowProps {
rowHeight?: string;
rowPadding?: string;
}
-const Row = styled.div.attrs({
+const Row = styled.div.attrs(({ rowHeight, rowPadding, theme }) => ({
className: 'siemSkeletonRow',
-})`
- ${({ rowHeight, rowPadding, theme }) => css`
- border-bottom: ${theme.eui.euiBorderThin};
- display: flex;
- height: ${rowHeight ? rowHeight : theme.eui.euiSizeXL};
- padding: ${rowPadding
- ? rowPadding
- : theme.eui.paddingSizes.s + ' ' + theme.eui.paddingSizes.xs};
- `}
+ rowHeight: rowHeight || theme.eui.euiSizeXL,
+ rowPadding: rowPadding || `${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.xs}`,
+}))`
+ border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
+ display: flex;
+ height: ${({ rowHeight }) => rowHeight};
+ padding: ${({ rowPadding }) => rowPadding};
`;
Row.displayName = 'Row';
@@ -31,18 +29,18 @@ interface CellProps {
cellMargin?: string;
}
-const Cell = styled.div.attrs({
+const Cell = styled.div.attrs(({ cellColor, cellMargin, theme }) => ({
className: 'siemSkeletonRow__cell',
-})`
- ${({ cellColor, cellMargin, theme }) => css`
- background-color: ${cellColor ? cellColor : theme.eui.euiColorLightestShade};
- border-radius: 2px;
- flex: 1;
+ cellColor: cellColor || theme.eui.euiColorLightestShade,
+ cellMargin: cellMargin || theme.eui.gutterTypes.gutterSmall,
+}))`
+ background-color: ${({ cellColor }) => cellColor};
+ border-radius: 2px;
+ flex: 1;
- & + & {
- margin-left: ${cellMargin ? cellMargin : theme.eui.gutterTypes.gutterSmall};
- }
- `}
+ & + & {
+ margin-left: ${({ cellMargin }) => cellMargin};
+ }
`;
Cell.displayName = 'Cell';
diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap
index 7475220b56e77d..952d92f532c837 100644
--- a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap
@@ -38,11 +38,11 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] =
data-test-subj="stat-item"
>
—
@@ -292,11 +292,11 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] =
data-test-subj="stat-item"
>
—
@@ -616,11 +616,11 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
data-test-subj="stat-item"
>