From 4b4c5ce491aa6539867c3de789ff604880a7fc2e Mon Sep 17 00:00:00 2001 From: Karen Grigoryan Date: Thu, 13 Feb 2025 17:14:34 +0100 Subject: [PATCH] [Security Solution][Explore] Migrate from styled-components in shared (#210311) Addresses #206436 - Replace styled-components with @emotion/react and @emotion/styled across multiple components - Remove `@kbn/ui-theme` instances - Update test cases to use @emotion/jest matchers for toHaveStyleRule to work properly - Adjust styles to use `css` from `@emotion/react` - Remove unused imports and updated snapshots https://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7 --- .../styled_components_files.js | 25 --- .../common/components/charts/barchart.tsx | 2 +- .../components/charts/chart_place_holder.tsx | 2 +- .../common/components/charts/common.test.tsx | 9 +- .../common/components/charts/common.tsx | 2 +- .../common/components/charts/donutchart.tsx | 71 ++++----- .../charts/draggable_legend.test.tsx | 148 +++++++++--------- .../components/charts/draggable_legend.tsx | 67 ++++---- .../charts/draggable_legend_item.tsx | 4 +- .../common/components/charts/legend_item.tsx | 2 +- .../__snapshots__/index.test.tsx.snap | 8 +- .../components/conditions_table/index.tsx | 6 +- .../common/components/empty_page/index.tsx | 2 +- .../guided_onboarding_tour/tour_step.tsx | 2 +- .../__snapshots__/index.test.tsx.snap | 6 +- .../components/header_page/index.test.tsx | 16 -- .../common/components/header_page/index.tsx | 54 ++++--- .../common/components/header_page/title.tsx | 2 +- .../__snapshots__/index.test.tsx.snap | 7 +- .../components/header_section/index.test.tsx | 23 ++- .../components/header_section/index.tsx | 79 +++++----- .../common/components/inspect/modal.tsx | 2 +- .../common/components/links/helpers.tsx | 2 +- .../components/matrix_histogram/index.tsx | 2 +- .../matrix_histogram/matrix_loader.tsx | 2 +- .../components/news_feed/post/index.tsx | 2 +- .../public/common/components/page/index.tsx | 54 ++++--- .../common/components/page_wrapper/index.tsx | 7 +- .../__snapshots__/helpers.test.tsx.snap | 6 +- .../common/components/tables/helpers.tsx | 25 +-- .../common/components/top_n/top_n.test.tsx | 8 +- .../public/common/components/top_n/top_n.tsx | 68 ++++---- .../visualization_actions/actions.test.tsx | 2 +- .../visualization_actions/actions.tsx | 4 +- .../visualization_actions/lens_embeddable.tsx | 44 +++--- .../visualization_embeddable.tsx | 3 +- .../public/common/jest.config.js | 8 + .../authentications_host_table.test.tsx.snap | 40 ++--- .../authentications_user_table.test.tsx.snap | 40 ++--- .../netflow/__snapshots__/index.test.tsx.snap | 19 +-- .../netflow_row_renderer.test.tsx.snap | 19 +-- 41 files changed, 433 insertions(+), 461 deletions(-) diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js index 7d001d18563e4..4b5db911e65a7 100644 --- a/packages/kbn-babel-preset/styled_components_files.js +++ b/packages/kbn-babel-preset/styled_components_files.js @@ -177,19 +177,10 @@ module.exports = { /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]and_or_badge[\/\\]rounded_badge_antenna.test.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]and_or_badge[\/\\]rounded_badge_antenna.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]auto_download[\/\\]auto_download.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]barchart.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]chart_place_holder.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]common.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]donutchart.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]draggable_legend.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]draggable_legend_item.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]legend_item.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]conditions_table[\/\\]index.stories.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]conditions_table[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]drag_and_drop[\/\\]draggable_wrapper.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]drag_and_drop[\/\\]droppable_wrapper.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]drag_and_drop[\/\\]provider_container.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]empty_page[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]empty_value[\/\\]empty_value.test.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]empty_value[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]endpoint[\/\\]agents[\/\\]agent_status[\/\\]agent_status.tsx/, @@ -197,22 +188,14 @@ module.exports = { /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]events_viewer[\/\\]summary_view_select[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]field_selection[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]filters_global[\/\\]filters_global.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]guided_onboarding_tour[\/\\]tour_step.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]header_actions[\/\\]actions.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]header_page[\/\\]index.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]header_page[\/\\]title.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]header_section[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]health_truncate_text[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]hover_visibility_container[\/\\]index.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]inspect[\/\\]modal.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]item_details_card[\/\\]index.stories.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]item_details_card[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]line_clamp[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]link_icon[\/\\]index.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]links[\/\\]helpers.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]loader[\/\\]index.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]matrix_histogram[\/\\]index.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]matrix_histogram[\/\\]matrix_loader.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]ml[\/\\]score[\/\\]anomaly_score.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]ml[\/\\]score[\/\\]create_description_list.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]ml[\/\\]tables[\/\\]basic_table.tsx/, @@ -222,16 +205,12 @@ module.exports = { /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]ml_popover[\/\\]jobs_table[\/\\]showing_count.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]ml_popover[\/\\]ml_popover.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]ml_popover[\/\\]upgrade_contents.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]news_feed[\/\\]post[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]no_privileges[\/\\]no_privileges.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]page[\/\\]index.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]page_wrapper[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]panel[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]popover_items[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]progress_inline[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]selectable_text[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]subtitle[\/\\]index.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]tables[\/\\]helpers.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]text_field_value[\/\\]index.stories.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]threat_match[\/\\]and_badge.test.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]threat_match[\/\\]and_badge.tsx/, @@ -247,13 +226,9 @@ module.exports = { /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]toasters[\/\\]modal_all_errors.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]toolbar[\/\\]bulk_actions[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]toolbar[\/\\]unit[\/\\]styles.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]top_n[\/\\]top_n.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]truncatable_text[\/\\]truncatable_text.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]utility_bar[\/\\]styles.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]utility_bar[\/\\]utility_bar_action.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]visualization_actions[\/\\]actions.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]visualization_actions[\/\\]lens_embeddable.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]visualization_actions[\/\\]visualization_embeddable.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]mock[\/\\]storybook_providers.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]mock[\/\\]test_providers.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]detection_engine[\/\\]rule_creation[\/\\]components[\/\\]eql_query_edit[\/\\]eql_overview_link.tsx/, diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx index 526261d13bca6..42a98a0b743db 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx @@ -13,7 +13,7 @@ import { Chart, BarSeries, Axis, Position, ScaleType, Settings } from '@elastic/ import { getOr, get, isNumber } from 'lodash/fp'; import deepmerge from 'deepmerge'; import { v4 as uuidv4 } from 'uuid'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import deepEqual from 'fast-deep-equal'; import { escapeDataProviderId } from '../drag_and_drop/helpers'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/chart_place_holder.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/chart_place_holder.tsx index bce7146d3c1db..a3938242c910e 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/chart_place_holder.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/chart_place_holder.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { EuiFlexItem, EuiText, EuiFlexGroup } from '@elastic/eui'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import type { ChartSeriesData } from './common'; import { checkIfAllValuesAreZero } from './common'; import * as i18n from './translation'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.test.tsx index f600eb501d189..5652d1337020c 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.test.tsx @@ -5,9 +5,12 @@ * 2.0. */ -import { shallow } from 'enzyme'; +import { mount } from 'enzyme'; import React from 'react'; import { renderHook } from '@testing-library/react'; +import { matchers } from '@emotion/jest'; + +expect.extend(matchers); import { useDarkMode } from '../../lib/kibana'; import type { ChartSeriesData } from './common'; @@ -25,12 +28,12 @@ jest.mock('../../lib/kibana'); describe('WrappedByAutoSizer', () => { it('should render correct default height', () => { - const wrapper = shallow(); + const wrapper = mount(); expect(wrapper).toHaveStyleRule('height', defaultChartHeight); }); it('should render correct given height', () => { - const wrapper = shallow(); + const wrapper = mount(); expect(wrapper).toHaveStyleRule('height', '100px'); }); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.tsx index 120fb6977b0de..feb683c681418 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.tsx @@ -20,7 +20,7 @@ import type { import { LEGACY_DARK_THEME, LEGACY_LIGHT_THEME, Position } from '@elastic/charts'; import { EuiFlexGroup } from '@elastic/eui'; import React from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { useDarkMode } from '../../lib/kibana'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx index 2d5dcafc77df5..de711b6d086b3 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx @@ -5,11 +5,11 @@ * 2.0. */ -import type { EuiFlexGroupProps } from '@elastic/eui'; import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui'; import React, { useCallback, useMemo } from 'react'; import type { Datum, NodeColorAccessor, PartialTheme, ElementClickListener } from '@elastic/charts'; +import type { SerializedStyles } from '@emotion/react'; import { Chart, Partition, @@ -18,10 +18,9 @@ import { defaultPartitionValueFormatter, } from '@elastic/charts'; import { isEmpty } from 'lodash'; -import type { FlattenSimpleInterpolation } from 'styled-components'; -import styled from 'styled-components'; import { i18n } from '@kbn/i18n'; +import { css } from '@emotion/react'; import { useThemes } from './common'; import { DraggableLegend } from './draggable_legend'; import type { LegendItem } from './draggable_legend_item'; @@ -63,36 +62,34 @@ export interface DonutChartWrapperProps { children?: React.ReactElement; dataExists: boolean; donutTextWrapperClassName?: string; - donutTextWrapperStyles?: FlattenSimpleInterpolation; + donutTextWrapperStyles?: SerializedStyles; isChartEmbeddablesEnabled?: boolean; label?: React.ReactElement | string; title: React.ReactElement | string | number | null; } -/* Make this position absolute in order to overlap the text onto the donut */ -export const DonutTextWrapper = styled(EuiFlexGroup)< - EuiFlexGroupProps & { - $dataExists?: boolean; - $donutTextWrapperStyles?: FlattenSimpleInterpolation; - $isChartEmbeddablesEnabled?: boolean; - className?: string; - } ->` - top: ${({ $isChartEmbeddablesEnabled, $dataExists }) => - $isChartEmbeddablesEnabled && !$dataExists ? `66%` : `34%;`}; - width: 100%; - max-width: 77px; - position: absolute; - z-index: 1; - - ${({ className, $donutTextWrapperStyles }) => - className && $donutTextWrapperStyles ? `&.${className} {${$donutTextWrapperStyles}}` : ''} -`; - -export const StyledEuiFlexItem = styled(EuiFlexItem)` - position: relative; - align-items: center; -`; +const getStyles = ( + dataExists: boolean, + isChartEmbeddablesEnabled?: boolean, + donutTextWrapperStyles?: SerializedStyles, + className?: string +) => { + return { + donutTextWrapper: css` + top: ${isChartEmbeddablesEnabled && !dataExists ? '66%' : '34%'}; + width: 100%; + max-width: 77px; + position: absolute; // Make this position absolute in order to overlap the text onto the donut + z-index: 1; + + ${className && donutTextWrapperStyles ? `&.${className} {${donutTextWrapperStyles}}` : ''} + `, + flexItem: css` + position: relative; + align-items: center; + `, + }; +}; const DonutChartWrapperComponent: React.FC = ({ children, @@ -104,6 +101,12 @@ const DonutChartWrapperComponent: React.FC = ({ title, }) => { const { euiTheme } = useEuiTheme(); + const styles = getStyles( + dataExists, + isChartEmbeddablesEnabled, + donutTextWrapperStyles, + donutTextWrapperClassName + ); const emptyLabelStyle = useMemo( () => ({ color: euiTheme.colors.textSubdued, @@ -120,11 +123,9 @@ const DonutChartWrapperComponent: React.FC = ({ gutterSize="l" data-test-subj="donut-chart" > - - + = ({ )} - + {children} - + ); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx index c79a158d4d1ef..f437c1671c381 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx @@ -5,9 +5,11 @@ * 2.0. */ -import type { ReactWrapper } from 'enzyme'; -import { mount } from 'enzyme'; +import { screen, render } from '@testing-library/react'; import React from 'react'; +import { matchers } from '@emotion/jest'; + +expect.extend(matchers); import '../../mock/react_beautiful_dnd'; import { TestProviders } from '../../mock'; @@ -61,102 +63,102 @@ const legendItems: LegendItem[] = [ describe('DraggableLegend', () => { const height = 400; - describe('rendering', () => { - let wrapper: ReactWrapper; - - beforeEach(() => { - wrapper = mount( - - - - ); - }); - - it(`renders a container with the specified non-zero 'height'`, () => { - expect(wrapper.find('[data-test-subj="draggable-legend"]').first()).toHaveStyleRule( - 'height', - `${height}px` - ); - }); - - it(`renders a container with the default 'min-width'`, () => { - expect(wrapper.find('[data-test-subj="draggable-legend"]').first()).toHaveStyleRule( - 'min-width', - `${DEFAULT_WIDTH}px` - ); - }); - - it(`renders a container with the specified 'min-width'`, () => { - const width = 1234; - - wrapper = mount( - - - - ); - - expect(wrapper.find('[data-test-subj="draggable-legend"]').first()).toHaveStyleRule( - 'min-width', - `${width}px` - ); - }); - - it('scrolls when necessary', () => { - expect(wrapper.find('[data-test-subj="draggable-legend"]').first()).toHaveStyleRule( - 'overflow', - 'auto' - ); - }); - - it('renders the legend items', () => { - legendItems.forEach((item) => - expect( - wrapper.find(`[data-test-subj="legend-item-${item.dataProviderId}"]`).first().text() - ).toEqual(item.value) - ); - }); - - it('renders a spacer for every legend item', () => { - expect(wrapper.find('[data-test-subj="draggable-legend-spacer"]').hostNodes().length).toEqual( - legendItems.length - ); - }); + + it(`renders a container with the specified non-zero 'height'`, () => { + render( + + + + ); + expect(screen.getByTestId('draggable-legend')).toHaveStyleRule('height', `${height}px`); + }); + + it("renders a container with the default 'min-width'", () => { + render( + + + + ); + expect(screen.getByTestId('draggable-legend')).toHaveStyleRule( + 'min-width', + `${DEFAULT_WIDTH}px` + ); + }); + + it(`renders a container with the specified 'min-width'`, () => { + const width = 1234; + + render( + + + + ); + + expect(screen.getByTestId('draggable-legend')).toHaveStyleRule('min-width', `${width}px`); }); - it('does NOT render the legend when an empty collection of legendItems is provided', () => { - const wrapper = mount( + it('scrolls when necessary', () => { + render( + + + + ); + expect(screen.getByTestId('draggable-legend')).toHaveStyleRule('overflow', 'auto'); + }); + + it('renders the legend items', () => { + const { container } = render( + + + + ); + + legendItems.forEach((item) => + expect( + container.querySelector(`[data-provider-id="draggableId.content.${item.dataProviderId}"]`) + ).toHaveTextContent(item.value.toString()) + ); + }); + + it('renders a spacer for every legend item', () => { + render( + + + + ); + expect(screen.getAllByTestId('draggable-legend-spacer').length).toEqual(legendItems.length); + }); + + it('does NOT render the legend when an empty collection of legendItems is provided', async () => { + render( ); - expect(wrapper.find('[data-test-subj="draggable-legend"]').exists()).toBe(false); + expect(screen.queryByTestId('draggable-legend')).toBeNull(); }); it(`renders a legend with the minimum height when 'height' is zero`, () => { - const wrapper = mount( + render( ); - expect(wrapper.find('[data-test-subj="draggable-legend"]').first()).toHaveStyleRule( + expect(screen.getByTestId('draggable-legend')).toHaveStyleRule( 'height', `${MIN_LEGEND_HEIGHT}px` ); }); it('renders a legend with specified class names', () => { - const wrapper = mount( + render( ); - expect(wrapper.find('[data-test-subj="draggable-legend"]').first().getDOMNode()).toHaveClass( - 'foo', - 'bar', - 'baz' - ); + expect(screen.getByTestId('draggable-legend')).toHaveClass('foo', 'bar', 'baz'); }); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.tsx index 6c22e648426eb..b1716773a0e3b 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.tsx @@ -5,10 +5,10 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, useEuiTheme } from '@elastic/eui'; import { rgba } from 'polished'; import React from 'react'; -import styled from 'styled-components'; +import { css } from '@emotion/react'; import type { LegendItem } from './draggable_legend_item'; import { DraggableLegendItem } from './draggable_legend_item'; @@ -16,32 +16,40 @@ import { DraggableLegendItem } from './draggable_legend_item'; export const MIN_LEGEND_HEIGHT = 175; export const DEFAULT_WIDTH = 165; // px -const DraggableLegendContainer = styled.div<{ height: number; $minWidth: number }>` - height: ${({ height }) => `${height}px`}; - overflow: auto; - scrollbar-width: thin; - width: 100%; - @media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) { - width: 165px; - } - min-width: ${({ $minWidth }) => `${$minWidth}px`}; +const useStyles = (height: number, minWidth: number) => { + const { euiTheme } = useEuiTheme(); - &::-webkit-scrollbar { - height: ${({ theme }) => theme.eui.euiScrollBar}; - width: ${({ theme }) => theme.eui.euiScrollBar}; - } + return { + draggableLegendContainer: css` + height: ${height}px; + overflow: auto; + scrollbar-width: thin; + width: 100%; - &::-webkit-scrollbar-thumb { - background-clip: content-box; - background-color: ${({ theme }) => rgba(theme.eui.euiColorDarkShade, 0.5)}; - border: ${({ theme }) => theme.eui.euiScrollBarCorner} solid transparent; - } + @media only screen and (min-width: ${euiTheme.breakpoint.m}) { + width: 165px; + } - &::-webkit-scrollbar-corner, - &::-webkit-scrollbar-track { - background-color: transparent; - } -`; + min-width: ${minWidth}px; + + &::-webkit-scrollbar { + height: ${euiTheme.size.base}; + width: ${euiTheme.size.base}; + } + + &::-webkit-scrollbar-thumb { + background-clip: content-box; + background-color: ${rgba(euiTheme.colors.darkShade, 0.5)}; + border: ${euiTheme.border.radius.small} solid transparent; + } + + &::-webkit-scrollbar-corner, + &::-webkit-scrollbar-track { + background-color: transparent; + } + `, + }; +}; const DraggableLegendComponent: React.FC<{ className?: string; @@ -56,16 +64,17 @@ const DraggableLegendComponent: React.FC<{ minWidth = DEFAULT_WIDTH, isInlineActions = false, }) => { + const styles = useStyles(height === 0 ? MIN_LEGEND_HEIGHT : height, minWidth); + if (legendItems.length === 0) { return null; } return ( - @@ -77,7 +86,7 @@ const DraggableLegendComponent: React.FC<{ ))} - + ); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx index 331fe9c0c8a74..4aa0c06f964da 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx @@ -8,7 +8,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiText } from '@elastic/eui'; import numeral from '@elastic/numeral'; import React, { useMemo } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants'; import { DefaultDraggable } from '../draggables'; @@ -24,7 +24,7 @@ import { import { getSourcererScopeId } from '../../../helpers'; const CountFlexItem = styled(EuiFlexItem)` - ${({ theme }) => `margin-right: ${theme.eui.euiSizeS};`} + ${({ theme }) => `margin-right: ${theme.euiTheme.size.s};`} `; export interface LegendItem { diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/legend_item.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/legend_item.tsx index 45dbe5c7f7162..3104d121026c6 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/legend_item.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/legend_item.tsx @@ -7,7 +7,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiText } from '@elastic/eui'; import React from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { EMPTY_VALUE_LABEL } from './translation'; import { hasValueToDisplay } from '../../utils/validators'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/conditions_table/__snapshots__/index.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/conditions_table/__snapshots__/index.test.tsx.snap index 9f25007a5cb90..6b8688994fbdb 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/conditions_table/__snapshots__/index.test.tsx.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/conditions_table/__snapshots__/index.test.tsx.snap @@ -13,14 +13,14 @@ exports[`conditions_table ConditionsTable should render multi item table with an ] } > - - + - - + theme.eui.euiSizeXL}; - padding-bottom: ${({ theme }) => theme.eui.euiSizeS}; + padding-top: ${({ theme }) => theme.euiTheme.size.xl}; + padding-bottom: ${({ theme }) => theme.euiTheme.size.s}; `; type ConditionsTableProps = EuiBasicTableProps & { diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_page/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_page/index.tsx index 7a15e17bffc13..00abf7905b392 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_page/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_page/index.tsx @@ -16,7 +16,7 @@ import { } from '@elastic/eui'; import type { MouseEventHandler, ReactNode } from 'react'; import React, { useMemo } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; const EmptyPrompt = styled(EuiEmptyPrompt)` align-self: center; /* Corrects horizontal centering in IE11 */ diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_step.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_step.tsx index 8fec6e25f5169..1bf7c61d44825 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_step.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_step.tsx @@ -11,7 +11,7 @@ import type { EuiTourStepProps } from '@elastic/eui'; import { EuiButtonEmpty, EuiImage, EuiSpacer, EuiText, EuiTourStep } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { useShallowEqualSelector } from '../../hooks/use_selector'; import { TimelineId } from '../../../../common/types'; import { timelineDefaults } from '../../../timelines/store/defaults'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap index ba7e8f8ef4fce..8cd4da9a40747 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap @@ -5,7 +5,9 @@ exports[`HeaderPage it renders 1`] = ` - + - + diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.test.tsx index 4e95954e70dee..3adf4f79e263e 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.test.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import { euiDarkVars } from '@kbn/ui-theme'; import { shallow } from 'enzyme'; import React from 'react'; @@ -123,21 +122,6 @@ describe('HeaderPage', () => { expect(wrapper.find('[data-test-subj="header-page-supplements"]').first().exists()).toBe(false); }); - test('it DOES NOT apply border styles when border is false', () => { - const wrapper = mount( - - - - ); - const securitySolutionHeaderPage = wrapper.find('.securitySolutionHeaderPage').first(); - - expect(securitySolutionHeaderPage).not.toHaveStyleRule( - 'border-bottom', - euiDarkVars.euiBorderThin - ); - expect(securitySolutionHeaderPage).not.toHaveStyleRule('padding-bottom', euiDarkVars.euiSizeL); - }); - test('it renders the right side items', () => { const wrapper = mount( diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.tsx index 21f310f5344c9..8027ff625ace6 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.tsx @@ -11,10 +11,10 @@ import { EuiPageHeaderSection, EuiSpacer, useEuiTheme, + euiFontSize, } from '@elastic/eui'; import React from 'react'; import { css } from '@emotion/react'; -import styled, { css as styleCss } from 'styled-components'; import type { LinkIconProps } from '../link_icon'; import { LinkIcon } from '../link_icon'; @@ -30,25 +30,6 @@ interface HeaderProps { isLoading?: boolean; } -const LinkBack = styled.div.attrs({ - className: 'securitySolutionHeaderPage__linkBack', -})` - ${({ theme }) => styleCss` - font-size: ${theme.eui.euiFontSizeXS}; - line-height: ${theme.eui.euiLineHeight}; - margin-bottom: ${theme.eui.euiSizeS}; - `} -`; -LinkBack.displayName = 'LinkBack'; - -const HeaderSection = styled(EuiPageHeaderSection)` - // Without min-width: 0, as a flex child, it wouldn't shrink properly - // and could overflow its parent. - min-width: 0; - max-width: 100%; -`; -HeaderSection.displayName = 'HeaderSection'; - function Divider(): JSX.Element { const { euiTheme } = useEuiTheme(); @@ -81,14 +62,30 @@ export interface HeaderPageProps extends HeaderProps { titleNode?: React.ReactElement; } +const useHeaderLinkBackStyles = () => { + const euiThemeContext = useEuiTheme(); + const fontSizeXs = euiFontSize(euiThemeContext, 'xs').fontSize; + const lineHeightS = euiFontSize(euiThemeContext, 's').lineHeight; + const { euiTheme } = euiThemeContext; + + return { + linkBack: css` + font-size: ${fontSizeXs}; + line-height: ${lineHeightS}; + margin-bottom: ${euiTheme.size.s}; + `, + }; +}; + export const HeaderLinkBack: React.FC<{ backOptions: BackOptions }> = React.memo( ({ backOptions }) => { + const styles = useHeaderLinkBackStyles(); const { navigateToUrl } = useKibana().services.application; const { formatUrl } = useFormatUrl(backOptions.pageId); const backUrl = formatUrl(backOptions.path ?? ''); return ( - +
{ @@ -100,12 +97,21 @@ export const HeaderLinkBack: React.FC<{ backOptions: BackOptions }> = React.memo > {backOptions.text} - +
); } ); HeaderLinkBack.displayName = 'HeaderLinkBack'; +const headerPageStyles = { + // Without min-width: 0, as a flex child, it wouldn't shrink properly + // and could overflow its parent. + headerSection: css` + min-width: 0; + max-width: 100%; + `, +}; + const HeaderPageComponent: React.FC = ({ backOptions, backComponent, @@ -121,7 +127,7 @@ const HeaderPageComponent: React.FC = ({ }) => ( <> - + {backOptions && } {!backOptions && backComponent && <>{backComponent}} @@ -134,7 +140,7 @@ const HeaderPageComponent: React.FC = ({ )} {border && isLoading && } - + {children && ( diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/title.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/title.tsx index 2da771d0163bd..14bf4dfe7fada 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/title.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/title.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { EuiBetaBadge, EuiBadge, EuiTitle } from '@elastic/eui'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import type { BadgeOptions, TitleProp } from './types'; import { TruncatableText } from '../truncatable_text'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/__snapshots__/index.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/__snapshots__/index.test.tsx.snap index 3ef2ecf88449b..24ce833a307c8 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/__snapshots__/index.test.tsx.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/__snapshots__/index.test.tsx.snap @@ -1,9 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`HeaderSection it renders 1`] = ` -
-
+ `; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.test.tsx index 4f4a15695b216..5f4fa2528aba9 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.test.tsx @@ -5,13 +5,17 @@ * 2.0. */ -import { euiDarkVars } from '@kbn/ui-theme'; import { mount, shallow } from 'enzyme'; import React from 'react'; +import { matchers } from '@emotion/jest'; + +expect.extend(matchers); import { TestProviders } from '../../mock'; import { getHeaderAlignment, HeaderSection } from '.'; import { ModalInspectQuery } from '../inspect/modal'; +import { renderHook } from '@testing-library/react'; +import { useEuiTheme } from '@elastic/eui'; jest.mock('../inspect/modal', () => { const actual = jest.requireActual('../inspect/modal'); @@ -118,8 +122,12 @@ describe('HeaderSection', () => { ); const siemHeaderSection = wrapper.find('.siemHeaderSection').first(); - expect(siemHeaderSection).toHaveStyleRule('border-bottom', euiDarkVars.euiBorderThin); - expect(siemHeaderSection).toHaveStyleRule('padding-bottom', euiDarkVars.euiSizeL); + expect(siemHeaderSection.exists()).toBe(true); + + const { result } = renderHook(() => useEuiTheme()); + + expect(siemHeaderSection).toHaveStyleRule('border-bottom', result.current.euiTheme.border.thin); + expect(siemHeaderSection).toHaveStyleRule('padding-bottom', result.current.euiTheme.size.l); }); test('it DOES NOT apply border styles when border is false', () => { @@ -130,8 +138,13 @@ describe('HeaderSection', () => { ); const siemHeaderSection = wrapper.find('.siemHeaderSection').first(); - expect(siemHeaderSection).not.toHaveStyleRule('border-bottom', euiDarkVars.euiBorderThin); - expect(siemHeaderSection).not.toHaveStyleRule('padding-bottom', euiDarkVars.euiSizeL); + const { result } = renderHook(() => useEuiTheme()); + + expect(siemHeaderSection).not.toHaveStyleRule( + 'border-bottom', + result.current.euiTheme.border.thin + ); + expect(siemHeaderSection).not.toHaveStyleRule('padding-bottom', result.current.euiTheme.size.l); }); test('it splits the title and supplement areas evenly when split is true', () => { diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.tsx index 75cd089a87e36..fd3854eb27a45 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.tsx @@ -6,9 +6,16 @@ */ import type { EuiTitleSize } from '@elastic/eui'; -import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIconTip, EuiTitle } from '@elastic/eui'; +import { + EuiButtonIcon, + EuiFlexGroup, + EuiFlexItem, + EuiIconTip, + EuiTitle, + useEuiTheme, +} from '@elastic/eui'; import React, { useCallback } from 'react'; -import styled, { css } from 'styled-components'; +import { css } from '@emotion/react'; import classnames from 'classnames'; import { InspectButton } from '../inspect'; @@ -16,46 +23,35 @@ import { InspectButton } from '../inspect'; import { Subtitle } from '../subtitle'; import * as i18n from '../../containers/query_toggle/translations'; -interface HeaderProps { - border?: boolean; - height?: number; - className?: string; // eslint-disable-line react/no-unused-prop-types - $hideSubtitle?: boolean; // eslint-disable-line react/no-unused-prop-types -} - -const Header = styled.header` - &.toggle-expand { - margin-bottom: ${({ theme }) => theme.eui.euiSizeL}; - } - - .no-margin { - margin-top: 0 !important; - margin-bottom: 0 !important; - } - - ${({ height }) => - height && - css` - height: ${height}px; - `} - margin-bottom: 0; - user-select: text; - - ${({ border }) => - border && - css` - border-bottom: ${({ theme }) => theme.eui.euiBorderThin}; - padding-bottom: ${({ theme }) => theme.eui.euiSizeL}; - `} -`; -Header.displayName = 'Header'; +const useStyles = (border?: boolean, height?: number) => { + const { euiTheme } = useEuiTheme(); + + return { + header: css` + margin-bottom: 0; + user-select: text; + ${height ? `height: ${height}px;` : ''} + ${border ? `border-bottom: ${euiTheme.border.thin}; padding-bottom: ${euiTheme.size.l};` : ''} + + &.toggle-expand { + margin-bottom: ${euiTheme.size.l}; + } + + .no-margin { + margin-top: 0 !important; + margin-bottom: 0 !important; + } + `, + }; +}; -export interface HeaderSectionProps extends HeaderProps { +export interface HeaderSectionProps { alignHeader?: 'center' | 'baseline' | 'stretch' | 'flexStart' | 'flexEnd'; children?: React.ReactNode; outerDirection?: 'row' | 'rowReverse' | 'column' | 'columnReverse' | undefined; growLeftSplit?: boolean; headerFilters?: string | React.ReactNode; + border?: boolean; height?: number; hideSubtitle?: boolean; id?: string; @@ -114,6 +110,7 @@ const HeaderSectionComponent: React.FC = ({ tooltip, tooltipTitle, }) => { + const styles = useStyles(border, height); const toggle = useCallback(() => { if (toggleQuery) { toggleQuery(!toggleStatus); @@ -125,13 +122,7 @@ const HeaderSectionComponent: React.FC = ({ siemHeaderSection: true, }); return ( -
+
= ({ )} -
+
); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/inspect/modal.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/inspect/modal.tsx index bb0a20b7736b0..3598ec8ff33ab 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/inspect/modal.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/inspect/modal.tsx @@ -21,7 +21,7 @@ import { import numeral from '@elastic/numeral'; import type { ReactNode } from 'react'; import React, { useMemo, Fragment } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { useLocation } from 'react-router-dom'; import type { InputsModelId } from '../../store/inputs/constants'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/links/helpers.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/links/helpers.tsx index 5aed35ccb4b4c..9a7a4fd2038d7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/links/helpers.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/links/helpers.tsx @@ -21,7 +21,7 @@ import { EuiLink, EuiPopover, } from '@elastic/eui'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { FormattedMessage } from '@kbn/i18n-react'; import { defaultToEmptyTag } from '../empty_value'; export interface ReputationLinkSetting { diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/index.tsx index bcc98f089cf62..e773527a1b545 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/index.tsx @@ -6,7 +6,7 @@ */ import React, { useState, useEffect, useCallback, useMemo } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { EuiFlexGroup, EuiFlexItem, EuiSelect, EuiSpacer } from '@elastic/eui'; import type { AggregationsTermsAggregateBase } from '@elastic/elasticsearch/lib/api/types'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/matrix_loader.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/matrix_loader.tsx index 8eca508a4b74b..e8b703f34c7cc 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/matrix_loader.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/matrix_loader.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; const StyledEuiFlexGroup = styled(EuiFlexGroup)` flex: 1; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/news_feed/post/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/news_feed/post/index.tsx index cc9332cb1c2a0..f2d910343b0ff 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/news_feed/post/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/news_feed/post/index.tsx @@ -7,7 +7,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui'; import React from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { PreferenceFormattedP1DTDate } from '../../formatted_date'; import { showNewsItem } from '../helpers'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/page/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/page/index.tsx index dd0af06904ef9..cc5e30351df92 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/page/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/page/index.tsx @@ -5,8 +5,12 @@ * 2.0. */ -import { EuiBadge, EuiDescriptionList, EuiFlexGroup, EuiIcon } from '@elastic/eui'; -import styled, { createGlobalStyle, css } from 'styled-components'; +import React, { memo } from 'react'; +import type { ComponentProps, FC } from 'react'; +import type { UseEuiTheme } from '@elastic/eui'; +import { EuiBadge, EuiDescriptionList, EuiFlexGroup, EuiIcon, useEuiFontSize } from '@elastic/eui'; +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; export const SecuritySolutionAppWrapper = styled.div` display: flex; @@ -22,7 +26,7 @@ SecuritySolutionAppWrapper.displayName = 'SecuritySolutionAppWrapper'; * components, that position themselves just below the kibana header, are displayed correctly * when shown above content that is set to `full screen`. */ -export const FULL_SCREEN_CONTENT_OVERRIDES_CSS_STYLESHEET = () => css` +export const FULL_SCREEN_CONTENT_OVERRIDES_CSS_STYLESHEET = ` .euiOverlayMask[data-relative-to-header='below'] { top: 0 !important; } @@ -34,12 +38,10 @@ export const FULL_SCREEN_CONTENT_OVERRIDES_CSS_STYLESHEET = () => css` `; /* - SIDE EFFECT: the following `createGlobalStyle` overrides default styling in angular code that was not theme-friendly + SIDE EFFECT: the following `appGlobalStyles` overrides default styling in angular code that was not theme-friendly and `EuiPopover`, `EuiToolTip` global styles */ -export const AppGlobalStyle = createGlobalStyle<{ - theme: { eui: { euiColorPrimary: string; euiColorLightShade: string; euiSizeS: string } }; -}>` +export const appGlobalStyles = ({ euiTheme }: UseEuiTheme): string => ` /* overrides the default styling of EuiDataGrid expand popover footer to make it a column of actions instead of the default actions row @@ -69,8 +71,8 @@ export const AppGlobalStyle = createGlobalStyle<{ } .euiText + .euiPopoverFooter { - border-top: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; - margin-top: ${({ theme }) => theme.eui.euiSizeS}; + border-top: 1px solid ${euiTheme.colors.lightShade}; + margin-top: ${euiTheme.size.s}; } } @@ -107,20 +109,24 @@ export const AppGlobalStyle = createGlobalStyle<{ } `; -export const DescriptionListStyled = styled(EuiDescriptionList)` - ${({ theme }) => ` - word-break: break-word; - dt { - font-size: ${theme.eui.euiFontSizeXS} !important; - } - dd { - width: fit-content; - } - dd > div { - width: fit-content; - } - `} -`; +export const DescriptionListStyled: FC> = memo( + ({ css: cssProp, ...props }) => { + const baseStyles = css` + word-break: break-word; + dt { + font-size: ${useEuiFontSize('xs').fontSize} !important; + } + dd { + width: fit-content; + } + dd > div { + width: fit-content; + } + `; + + return ; + } +); DescriptionListStyled.displayName = 'DescriptionListStyled'; @@ -153,7 +159,7 @@ export const OverviewWrapper = styled(EuiFlexGroup)` .euiButtonIcon { position: absolute; - right: ${(props) => props.theme.eui.euiSizeM}; + right: ${({ theme }) => theme.euiTheme.size.m}; top: 6px; z-index: 2; } diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/page_wrapper/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/page_wrapper/index.tsx index acedbe669f36a..65b2ee7bdab59 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/page_wrapper/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/page_wrapper/index.tsx @@ -7,11 +7,12 @@ import classNames from 'classnames'; import React, { useEffect } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; +import { Global } from '@emotion/react'; import type { CommonProps } from '@elastic/eui'; import { useGlobalFullScreen } from '../../containers/use_full_screen'; -import { AppGlobalStyle } from '../page'; +import { appGlobalStyles } from '../page'; const Wrapper = styled.div` &.securitySolutionWrapper--fullHeight { @@ -55,7 +56,7 @@ const SecuritySolutionPageWrapperComponent: React.FC< return ( {children} - + ); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/__snapshots__/helpers.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/__snapshots__/helpers.test.tsx.snap index c91ece7818df0..e3b4f43293c23 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/__snapshots__/helpers.test.tsx.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/__snapshots__/helpers.test.tsx.snap @@ -23,11 +23,7 @@ exports[`Table Helpers #RowItemOverflow it returns correctly against snapshot 1` /> diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/helpers.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/helpers.tsx index 2c21ffa8cbd70..14edb569ca401 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/helpers.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/helpers.tsx @@ -6,7 +6,7 @@ */ import React, { useCallback, useMemo, useState } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; -import { euiThemeVars } from '@kbn/ui-theme'; +import { css } from '@emotion/react'; import { EuiLink, EuiPopover, @@ -15,18 +15,15 @@ import { EuiTextColor, EuiFlexGroup, EuiFlexItem, + useEuiFontSize, + useEuiTheme, } from '@elastic/eui'; -import styled from 'styled-components'; import { SecurityCellActions, CellActionsMode, SecurityCellActionsTrigger } from '../cell_actions'; import { escapeDataProviderId } from '../drag_and_drop/helpers'; import { defaultToEmptyTag, getEmptyTagValue } from '../empty_value'; import { MoreRowItems } from '../page'; import { MoreContainer } from '../../../timelines/components/field_renderers/more_container'; -const Subtext = styled.div` - font-size: ${(props) => props.theme.eui.euiFontSizeXS}; -`; - interface GetRowItemsWithActionsParams { values: string[] | null | undefined; fieldName: string; @@ -98,6 +95,7 @@ export const RowItemOverflowComponent: React.FC = ({ overflowIndexStart = 5, maxOverflowItems = 5, }) => { + const { euiTheme } = useEuiTheme(); const maxVisibleValues = useMemo( () => values.slice(0, maxOverflowItems + 1), [values, maxOverflowItems] @@ -117,7 +115,7 @@ export const RowItemOverflowComponent: React.FC = ({ {values.length > overflowIndexStart + maxOverflowItems && ( @@ -148,14 +146,23 @@ interface PopoverComponentProps { idPrefix: string; } +const useStyles = () => { + return { + subtext: css` + font-size: ${useEuiFontSize('xs').fontSize}; + `, + }; +}; + const PopoverComponent: React.FC = ({ children, count, idPrefix }) => { + const styles = useStyles(); const [isOpen, setIsOpen] = useState(false); const onButtonClick = useCallback(() => { setIsOpen(!isOpen); }, [isOpen]); return ( - +
@@ -174,7 +181,7 @@ const PopoverComponent: React.FC = ({ children, count, id > {children} - +
); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.test.tsx index 73086e2d584be..4067827e6de98 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.test.tsx @@ -8,7 +8,7 @@ import type { ReactWrapper } from 'enzyme'; import { mount } from 'enzyme'; import React from 'react'; -import { waitFor } from '@testing-library/react'; +import { screen, render, waitFor, fireEvent } from '@testing-library/react'; import { TestProviders, mockDataViewSpec } from '../../mock'; @@ -116,9 +116,8 @@ describe('TopN', () => { toggleTopN, }; describe('common functionality', () => { - let wrapper: ReactWrapper; beforeEach(() => { - wrapper = mount( + render( @@ -126,8 +125,7 @@ describe('TopN', () => { }); test('it invokes the toggleTopN function when the close button is clicked', () => { - wrapper.find('[data-test-subj="close"]').first().simulate('click'); - wrapper.update(); + fireEvent.click(screen.getByTestId('close')); expect(toggleTopN).toHaveBeenCalled(); }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.tsx index 5c3cecfe3fce3..7b21dcd945d8d 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.tsx @@ -5,9 +5,9 @@ * 2.0. */ -import { EuiButtonIcon, EuiSuperSelect } from '@elastic/eui'; +import { EuiButtonIcon, EuiSuperSelect, useEuiTheme } from '@elastic/eui'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import styled from 'styled-components'; +import { css } from '@emotion/react'; import type { Filter, Query } from '@kbn/es-query'; import type { DataViewSpec } from '@kbn/data-plugin/common'; @@ -21,28 +21,31 @@ import { getSourcererScopeName, removeIgnoredAlertFilters } from './helpers'; import * as i18n from './translations'; import type { AlertsStackByField } from '../../../detections/components/alerts_kpis/common/types'; -const TopNContainer = styled.div` - min-width: 600px; -`; - -const CloseButton = styled(EuiButtonIcon)` - position: absolute; - right: 4px; - top: 4px; -`; - -const ViewSelect = styled(EuiSuperSelect)` - width: 170px; -`; - -const TopNContent = styled.div` - margin-top: 4px; - margin-right: ${({ theme }) => theme.eui.euiSizeXS}; - - .euiPanel { - border: none; - } -`; +const useStyles = () => { + const { euiTheme } = useEuiTheme(); + + return { + topNContainer: css` + min-width: 600px; + `, + closeButton: css` + position: absolute; + right: 4px; + top: 4px; + `, + viewSelect: css` + width: 170px; + `, + topNContent: css` + margin-top: 4px; + margin-right: ${euiTheme.size.xs}; + + .euiPanel { + border: none; + } + `, + }; +}; export interface Props extends Pick { filterQuery?: string; @@ -78,6 +81,7 @@ const TopNComponent: React.FC = ({ toggleTopN, applyGlobalQueriesAndFilters, }) => { + const styles = useStyles(); const [view, setView] = useState(defaultView); const onViewSelected = useCallback( (value: string) => setView(value as TimelineEventsType), @@ -91,7 +95,8 @@ const TopNComponent: React.FC = ({ const headerChildren = useMemo( () => ( - + css={styles.viewSelect} data-test-subj="view-select" disabled={options.length === 1} onChange={onViewSelected} @@ -99,7 +104,7 @@ const TopNComponent: React.FC = ({ valueOfSelected={view} /> ), - [onViewSelected, options, view] + [onViewSelected, options, styles.viewSelect, view] ); // alert workflow statuses (e.g. open | closed) and other alert-specific @@ -110,8 +115,8 @@ const TopNComponent: React.FC = ({ ); return ( - - +
+
{view === 'raw' || view === 'all' ? ( = ({ hideQueryToggle /> )} - +
- - +
); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.test.tsx index 7557d4bc76820..f836484efb454 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.test.tsx @@ -29,7 +29,7 @@ jest.mock('@elastic/eui', () => { const original = jest.requireActual('@elastic/eui'); return { ...original, - EuiContextMenu: jest.fn().mockReturnValue(
), + EuiContextMenu: jest.fn(() =>
), }; }); diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.tsx index bcdb9d163164c..61eea9fa57b94 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.tsx @@ -8,7 +8,7 @@ import { EuiButtonIcon, EuiContextMenu, EuiPopover } from '@elastic/eui'; import { buildContextMenuForActions } from '@kbn/ui-actions-plugin/public'; import React, { useCallback, useMemo, useState } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import useAsync from 'react-use/lib/useAsync'; import { InputsModelId } from '../../store/inputs/constants'; @@ -31,7 +31,7 @@ const Wrapper = styled.div` z-index: 1; } &.histogram-viz-actions { - padding: ${({ theme }) => theme.eui.euiSizeS}; + padding: ${({ theme }) => theme.euiTheme.size.s}; } `; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx index 871750d5ad00f..e4124e826b083 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx @@ -10,7 +10,6 @@ import { useDispatch } from 'react-redux'; import { FormattedMessage } from '@kbn/i18n-react'; import { ViewMode } from '@kbn/embeddable-plugin/public'; -import styled from 'styled-components'; import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; import type { RangeFilterParams } from '@kbn/es-query'; import type { ClickTriggerEvent, MultiClickTriggerEvent } from '@kbn/charts-plugin/public'; @@ -19,6 +18,7 @@ import type { TypedLensByValueInput, XYState, } from '@kbn/lens-plugin/public'; +import { css } from '@emotion/react'; import { setAbsoluteRangeDatePicker } from '../../store/inputs/actions'; import { useKibana } from '../../lib/kibana'; import { useLensAttributes } from './use_lens_attributes'; @@ -35,20 +35,20 @@ import { useInspect } from '../inspect/use_inspect'; const DISABLED_ACTIONS = ['ACTION_CUSTOMIZE_PANEL']; -const LensComponentWrapper = styled.div<{ - $height?: number; - width?: string | number; -}>` - height: ${({ $height }) => ($height ? `${$height}px` : 'auto')}; - width: ${({ width }) => width ?? 'auto'}; - - .expExpressionRenderer__expression { - padding: 2px 0 0 0 !important; - } - .legacyMtrVis__container { - padding: 0; - } -`; +const getStyles = (width?: string | number, height?: number) => { + return { + lensComponentWrapper: css({ + height: height ? `${height}px` : 'auto', + width: width ?? 'auto', + '.expExpressionRenderer__expression': { + padding: '2px 0 0 0 !important', + }, + '.legacyMtrVis__container': { + padding: 0, + }, + }), + }; +}; const LensEmbeddableComponent: React.FC = ({ applyGlobalQueriesAndFilters = true, @@ -71,7 +71,12 @@ const LensEmbeddableComponent: React.FC = ({ disableOnClickFilter = false, casesAttachmentMetadata, }) => { - const style = useMemo( + const styles = useMemo( + () => getStyles(wrapperWidth, wrapperHeight), + [wrapperWidth, wrapperHeight] + ); + + const lensComponentStyle = useMemo( () => ({ height: wrapperHeight ?? '100%', minWidth: '100px', @@ -79,6 +84,7 @@ const LensEmbeddableComponent: React.FC = ({ }), [wrapperHeight, wrapperWidth] ); + const { lens, data: { @@ -240,7 +246,7 @@ const LensEmbeddableComponent: React.FC = ({ return ( <> {attributes && searchSessionId && ( - +
= ({ overrides={overrides} searchSessionId={searchSessionId} showInspector={false} - style={style} + style={lensComponentStyle} syncCursor={false} syncTooltips={false} timeRange={timerange} viewMode={ViewMode.VIEW} withDefaultActions={false} /> - +
)} {isShowingModal && request != null && response != null && ( /x-pack/solutions/security/plugins/security_solution/public/common/**/*.{ts,tsx}', ], moduleNameMapper: require('../../server/__mocks__/module_name_map'), + transform: { + ...rootConfig.transform, + '^.+\\.(js|tsx?)$': + '/x-pack/solutions/security/plugins/security_solution/jest/babel-transformer.js', + }, }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap index 45a1e70d9ba81..fe13a71198890 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap @@ -1,53 +1,36 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Authentication Host Table Component rendering it renders the host authentication table 1`] = ` -.c2 .siemSubtitle__item { +.c1 .siemSubtitle__item { color: #7a7f89; font-size: 12px; line-height: 1.5; } -.c1 { - margin-bottom: 0; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; -} - -.c1.toggle-expand { - margin-bottom: 24px; -} - -.c1 .no-margin { - margin-top: 0 !important; - margin-bottom: 0 !important; -} - .c0 { position: relative; } -.c3 tbody th, -.c3 tbody td { +.c2 tbody th, +.c2 tbody td { vertical-align: top; } -.c3 tbody .euiTableCellContent { +.c2 tbody .euiTableCellContent { display: block; } -.c4 { +.c3 { margin-top: 4px; } @media only screen and (min-width:575px) { - .c2 .siemSubtitle__item { + .c1 .siemSubtitle__item { display: inline-block; margin-right: 16px; } - .c2 .siemSubtitle__item:last-child { + .c1 .siemSubtitle__item:last-child { margin-right: 0; } } @@ -57,7 +40,8 @@ exports[`Authentication Host Table Component rendering it renders the host authe data-test-subj="authentications-host-table-loading-false" >

ja3 @@ -1275,7 +1270,7 @@ exports[`Netflow renders correctly against snapshot 1`] = ` class="euiBadge__text emotion-euiBadge__text" > client cert @@ -1335,7 +1330,7 @@ exports[`Netflow renders correctly against snapshot 1`] = ` class="euiBadge__text emotion-euiBadge__text" > server cert diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap index 9f3f775516d91..9130545c7dfb1 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap +++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap @@ -24,16 +24,11 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = ` display: inline-block; } -.c5 svg { - position: relative; - top: -1px; -} - -.c7 { +.c6 { margin-right: 5px; } -.c6 { +.c5 { margin-right: 5px; } @@ -543,7 +538,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = ` class="euiFlexItem emotion-euiFlexItem-growZero" >
ja3 @@ -1299,7 +1294,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = ` class="euiBadge__text emotion-euiBadge__text" > client cert @@ -1359,7 +1354,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = ` class="euiBadge__text emotion-euiBadge__text" > server cert