github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.x] [Security Solution][Explore] Migrate from styled-components in shared (#210311) (#211224)

Browse source 
# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Solution][Explore] Migrate from styled-components in shared
(#210311)](https://github.com/elastic/kibana/pull/210311)

<!--- Backport version: 9.6.4 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Karen
Grigoryan","email":"karen.grigoryan@elastic.co"},"sourceCommit":{"committedDate":"2025-02-13T16:14:34Z","message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting","Team:Threat Hunting:Explore","backport:version","v8.18.0","EUI
Visual Refresh","v9.1.0","v8.19.0"],"title":"[Security
Solution][Explore] Migrate from styled-components in
shared","number":210311,"url":"https://github.com/elastic/kibana/pull/210311","mergeCommit":{"message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210311","number":210311,"mergeCommit":{"message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Karen Grigoryan 2025-02-14 17:04:32 +01:00 • committed by GitHub
parent 273f2c1881
commit 7ed5290798
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
41 changed files with 426 additions and 454 deletions
Download patch file Download diff file Expand all files Collapse all files

25
packages/kbn-babel-preset/styled_components_files.js
View file

@ -213,19 +213,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/,
@ -233,23 +224,15 @@ 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[\/\\]editable_title.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/,
@ -259,16 +242,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/,
@ -284,13 +263,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/,

2
x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx
View file

@ -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';

2
x-pack/solutions/security/plugins/security_solution/public/common/components/charts/chart_place_holder.tsx
View file

@ -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';

9
x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.test.tsx
View file

@ -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(<WrappedByAutoSizer />);
const wrapper = mount(<WrappedByAutoSizer />);
expect(wrapper).toHaveStyleRule('height', defaultChartHeight);
});
it('should render correct given height', () => {
const wrapper = shallow(<WrappedByAutoSizer height="100px" />);
const wrapper = mount(<WrappedByAutoSizer height="100px" />);
expect(wrapper).toHaveStyleRule('height', '100px');
});
});

2
x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.tsx
View file

@ -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';

69
x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx
View file

@ -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;
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 ? `&.${className} {${$donutTextWrapperStyles}}` : ''}
`;
export const StyledEuiFlexItem = styled(EuiFlexItem)`
position: relative;
align-items: center;
`;
${className && donutTextWrapperStyles ? `&.${className} {${donutTextWrapperStyles}}` : ''}
`,
flexItem: css`
position: relative;
align-items: center;
`,
};
};
const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
children,
@ -104,6 +101,12 @@ const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
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<DonutChartWrapperProps> = ({
gutterSize="l"
data-test-subj="donut-chart"
>
<StyledEuiFlexItem grow={isChartEmbeddablesEnabled}>
<DonutTextWrapper
$dataExists={dataExists}
$donutTextWrapperStyles={donutTextWrapperStyles}
$isChartEmbeddablesEnabled={isChartEmbeddablesEnabled}
<EuiFlexItem css={styles.flexItem} grow={isChartEmbeddablesEnabled}>
<EuiFlexGroup
css={styles.donutTextWrapper}
alignItems="center"
className={donutTextWrapperClassName}
direction="column"
@ -145,9 +146,9 @@ const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
</EuiToolTip>
</EuiFlexItem>
)}
</DonutTextWrapper>
</EuiFlexGroup>
{children}
</StyledEuiFlexItem>
</EuiFlexItem>
</EuiFlexGroup>
);
};

146
x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx
View file

@ -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(
<TestProviders>
<DraggableLegend height={height} legendItems={legendItems} />
</TestProviders>
);
});
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(
<TestProviders>
<DraggableLegend height={height} legendItems={legendItems} minWidth={width} />
</TestProviders>
);
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(
<TestProviders>
<DraggableLegend height={height} legendItems={legendItems} />
</TestProviders>
);
expect(screen.getByTestId('draggable-legend')).toHaveStyleRule('height', `${height}px`);
});
it('does NOT render the legend when an empty collection of legendItems is provided', () => {
const wrapper = mount(
it("renders a container with the default 'min-width'", () => {
render(
<TestProviders>
<DraggableLegend height={height} legendItems={legendItems} />
</TestProviders>
);
expect(screen.getByTestId('draggable-legend')).toHaveStyleRule(
'min-width',
`${DEFAULT_WIDTH}px`
);
});
it(`renders a container with the specified 'min-width'`, () => {
const width = 1234;
render(
<TestProviders>
<DraggableLegend height={height} legendItems={legendItems} minWidth={width} />
</TestProviders>
);
expect(screen.getByTestId('draggable-legend')).toHaveStyleRule('min-width', `${width}px`);
});
it('scrolls when necessary', () => {
render(
<TestProviders>
<DraggableLegend height={height} legendItems={legendItems} />
</TestProviders>
);
expect(screen.getByTestId('draggable-legend')).toHaveStyleRule('overflow', 'auto');
});
it('renders the legend items', () => {
const { container } = render(
<TestProviders>
<DraggableLegend height={height} legendItems={legendItems} />
</TestProviders>
);
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(
<TestProviders>
<DraggableLegend height={height} legendItems={legendItems} />
</TestProviders>
);
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(
<TestProviders>
<DraggableLegend height={height} legendItems={[]} />
</TestProviders>
);
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(
<TestProviders>
<DraggableLegend height={0} legendItems={legendItems} />
</TestProviders>
);
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(
<TestProviders>
<DraggableLegend className="foo bar baz" height={0} legendItems={legendItems} />
</TestProviders>
);
expect(wrapper.find('[data-test-subj="draggable-legend"]').first().getDOMNode()).toHaveClass(
'foo',
'bar',
'baz'
);
expect(screen.getByTestId('draggable-legend')).toHaveClass('foo', 'bar', 'baz');
});
});

67
x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.tsx
View file

@ -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 (
<DraggableLegendContainer
<div
css={styles.draggableLegendContainer}
className={className}
data-test-subj="draggable-legend"
height={height === 0 ? MIN_LEGEND_HEIGHT : height}
$minWidth={minWidth}
>
<EuiText size="xs">
<EuiFlexGroup direction="column" gutterSize="none">
@ -77,7 +86,7 @@ const DraggableLegendComponent: React.FC<{
))}
</EuiFlexGroup>
</EuiText>
</DraggableLegendContainer>
</div>
);
};

4
x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx
View file

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

2
x-pack/solutions/security/plugins/security_solution/public/common/components/charts/legend_item.tsx
View file

@ -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';

8
x-pack/solutions/security/plugins/security_solution/public/common/components/conditions_table/__snapshots__/index.test.tsx.snap generated
View file

@ -13,14 +13,14 @@ exports[`conditions_table ConditionsTable should render multi item table with an
]
}
>
<Styled(EuiFlexItem)
<conditions_table--AndOrBadgeContainer
grow={false}
>
<AndOrBadge
includeAntennas={true}
type="and"
/>
</Styled(EuiFlexItem)>
</conditions_table--AndOrBadgeContainer>
</EuiHideFor>
<EuiFlexItem
grow={1}
@ -83,14 +83,14 @@ exports[`conditions_table ConditionsTable should render multi item table with or
]
}
>
<Styled(EuiFlexItem)
<conditions_table--AndOrBadgeContainer
grow={false}
>
<AndOrBadge
includeAntennas={true}
type="or"
/>
</Styled(EuiFlexItem)>
</conditions_table--AndOrBadgeContainer>
</EuiHideFor>
<EuiFlexItem
grow={1}

6
x-pack/solutions/security/plugins/security_solution/public/common/components/conditions_table/index.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import type { EuiBasicTableProps } from '@elastic/eui';
import { EuiBasicTable, EuiFlexGroup, EuiFlexItem, EuiHideFor } from '@elastic/eui';
@ -14,8 +14,8 @@ import type { AndOr } from '../and_or_badge';
import { AndOrBadge } from '../and_or_badge';
const AndOrBadgeContainer = styled(EuiFlexItem)`
padding-top: ${({ theme }) => 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<T extends object> = EuiBasicTableProps<T> & {

2
x-pack/solutions/security/plugins/security_solution/public/common/components/empty_page/index.tsx
View file

@ -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 */

2
x-pack/solutions/security/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_step.tsx
View file

@ -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';

6
x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap generated
View file

@ -5,7 +5,9 @@ exports[`HeaderPage it renders 1`] = `
<EuiPageHeader
alignItems="center"
>
<HeaderSection>
<EuiPageHeaderSection
css="unknown styles"
>
<Memo(TitleComponent)
badgeOptions={
Object {
@ -23,7 +25,7 @@ exports[`HeaderPage it renders 1`] = `
data-test-subj="header-page-subtitle"
items="Test subtitle"
/>
</HeaderSection>
</EuiPageHeaderSection>
<EuiPageHeaderSection
data-test-subj="header-page-supplements"
>

16
x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.test.tsx
View file

@ -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(
<TestProviders>
<HeaderPage title="Test title" />
</TestProviders>
);
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(
<TestProviders>

54
x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.tsx
View file

@ -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 (
<LinkBack>
<div css={styles.linkBack} className="securitySolutionHeaderPage__linkBack">
<LinkIcon
dataTestSubj={backOptions.dataTestSubj ?? 'link-back'}
onClick={(ev: Event) => {
@ -100,12 +97,21 @@ export const HeaderLinkBack: React.FC<{ backOptions: BackOptions }> = React.memo
>
{backOptions.text}
</LinkIcon>
</LinkBack>
</div>
);
}
);
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<HeaderPageProps> = ({
backOptions,
backComponent,
@ -121,7 +127,7 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
}) => (
<>
<EuiPageHeader alignItems="center" rightSideItems={rightSideItems}>
<HeaderSection>
<EuiPageHeaderSection css={headerPageStyles.headerSection}>
{backOptions && <HeaderLinkBack backOptions={backOptions} />}
{!backOptions && backComponent && <>{backComponent}</>}
@ -134,7 +140,7 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
</>
)}
{border && isLoading && <EuiProgress size="xs" color="accent" />}
</HeaderSection>
</EuiPageHeaderSection>
{children && (
<EuiPageHeaderSection data-test-subj="header-page-supplements">

2
x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/title.tsx
View file

@ -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';

7
x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/__snapshots__/index.test.tsx.snap generated
View file

@ -1,9 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`HeaderSection it renders 1`] = `
<Header
$hideSubtitle={false}
className="toggle-expand siemHeaderSection"
<header
css="unknown styles"
data-test-subj="header-section"
>
<EuiFlexGroup
@ -62,5 +61,5 @@ exports[`HeaderSection it renders 1`] = `
/>
</EuiFlexItem>
</EuiFlexGroup>
</Header>
</header>
`;

23
x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.test.tsx
View file

@ -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', () => {

73
x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.tsx
View file

@ -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 useStyles = (border?: boolean, height?: number) => {
const { euiTheme } = useEuiTheme();
const Header = styled.header<HeaderProps>`
&.toggle-expand {
margin-bottom: ${({ theme }) => theme.eui.euiSizeL};
}
return {
header: css`
margin-bottom: 0;
user-select: text;
${height ? `height: ${height}px;` : ''}
${border ? `border-bottom: ${euiTheme.border.thin}; padding-bottom: ${euiTheme.size.l};` : ''}
.no-margin {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
&.toggle-expand {
margin-bottom: ${euiTheme.size.l};
}
${({ height }) =>
height &&
css`
height: ${height}px;
`}
margin-bottom: 0;
user-select: text;
.no-margin {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
`,
};
};
${({ border }) =>
border &&
css`
border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
padding-bottom: ${({ theme }) => theme.eui.euiSizeL};
`}
`;
Header.displayName = 'Header';
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<HeaderSectionProps> = ({
tooltip,
tooltipTitle,
}) => {
const styles = useStyles(border, height);
const toggle = useCallback(() => {
if (toggleQuery) {
toggleQuery(!toggleStatus);
@ -125,13 +122,7 @@ const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
siemHeaderSection: true,
});
return (
<Header
data-test-subj="header-section"
border={border}
height={height}
className={classNames}
$hideSubtitle={hideSubtitle}
>
<header css={styles.header} data-test-subj="header-section" className={classNames}>
<EuiFlexGroup
data-test-subj="headerSectionOuterFlexGroup"
direction={outerDirection}
@ -221,7 +212,7 @@ const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
</EuiFlexItem>
)}
</EuiFlexGroup>
</Header>
</header>
);
};

2
x-pack/solutions/security/plugins/security_solution/public/common/components/inspect/modal.tsx
View file

@ -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';

2
x-pack/solutions/security/plugins/security_solution/public/common/components/links/helpers.tsx
View file

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

2
x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/index.tsx
View file

@ -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';

2
x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/matrix_loader.tsx
View file

@ -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;

2
x-pack/solutions/security/plugins/security_solution/public/common/components/news_feed/post/index.tsx
View file

@ -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';

54
x-pack/solutions/security/plugins/security_solution/public/common/components/page/index.tsx
View file

@ -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<ComponentProps<typeof EuiDescriptionList>> = 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 <EuiDescriptionList css={[baseStyles, cssProp]} {...props} />;
}
);
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;
}

7
x-pack/solutions/security/plugins/security_solution/public/common/components/page_wrapper/index.tsx
View file

@ -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 (
<Wrapper className={classes} style={style} {...otherProps}>
{children}
<AppGlobalStyle />
<Global styles={appGlobalStyles} />
</Wrapper>
);
};

6
x-pack/solutions/security/plugins/security_solution/public/common/components/tables/__snapshots__/helpers.test.tsx.snap generated
View file

@ -23,11 +23,7 @@ exports[`Table Helpers #RowItemOverflow it returns correctly against snapshot 1`
/>
</EuiText>
<EuiFlexGroup
css={
Object {
"paddingTop": "12px",
}
}
css="unknown styles"
data-test-subj="popover-additional-overflow"
>
<EuiFlexItem>

25
x-pack/solutions/security/plugins/security_solution/public/common/components/tables/helpers.tsx
View file

@ -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<RowItemOverflowProps> = ({
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<RowItemOverflowProps> = ({
</EuiText>
{values.length > overflowIndexStart + maxOverflowItems && (
<EuiFlexGroup
css={{ paddingTop: euiThemeVars.euiSizeM }}
css={{ paddingTop: euiTheme.size.m }}
data-test-subj="popover-additional-overflow"
>
<EuiFlexItem>
@ -148,14 +146,23 @@ interface PopoverComponentProps {
idPrefix: string;
}
const useStyles = () => {
return {
subtext: css`
font-size: ${useEuiFontSize('xs').fontSize};
`,
};
};
const PopoverComponent: React.FC<PopoverComponentProps> = ({ children, count, idPrefix }) => {
const styles = useStyles();
const [isOpen, setIsOpen] = useState(false);
const onButtonClick = useCallback(() => {
setIsOpen(!isOpen);
}, [isOpen]);
return (
<Subtext>
<div css={styles.subtext}>
<EuiPopover
button={
<EuiLink onClick={onButtonClick} data-test-subj="overflow-button">
@ -174,7 +181,7 @@ const PopoverComponent: React.FC<PopoverComponentProps> = ({ children, count, id
>
{children}
</EuiPopover>
</Subtext>
</div>
);
};

8
x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.test.tsx
View file

@ -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, mockIndexPattern } from '../../mock';
@ -116,9 +116,8 @@ describe('TopN', () => {
toggleTopN,
};
describe('common functionality', () => {
let wrapper: ReactWrapper;
beforeEach(() => {
wrapper = mount(
render(
<TestProviders>
<TopN {...testProps} />
</TestProviders>
@ -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();
});

64
x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.tsx
View file

@ -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 { DataViewBase, Filter, Query } from '@kbn/es-query';
import type { GlobalTimeArgs } from '../../containers/use_global_time';
@ -20,28 +20,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 useStyles = () => {
const { euiTheme } = useEuiTheme();
const CloseButton = styled(EuiButtonIcon)`
position: absolute;
right: 4px;
top: 4px;
`;
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};
const ViewSelect = styled(EuiSuperSelect<string>)`
width: 170px;
`;
const TopNContent = styled.div`
margin-top: 4px;
margin-right: ${({ theme }) => theme.eui.euiSizeXS};
.euiPanel {
border: none;
}
`;
.euiPanel {
border: none;
}
`,
};
};
export interface Props extends Pick<GlobalTimeArgs, 'from' | 'to' | 'deleteQuery' | 'setQuery'> {
filterQuery?: string;
@ -77,6 +80,7 @@ const TopNComponent: React.FC<Props> = ({
toggleTopN,
applyGlobalQueriesAndFilters,
}) => {
const styles = useStyles();
const [view, setView] = useState<TimelineEventsType>(defaultView);
const onViewSelected = useCallback(
(value: string) => setView(value as TimelineEventsType),
@ -90,7 +94,8 @@ const TopNComponent: React.FC<Props> = ({
const headerChildren = useMemo(
() => (
<ViewSelect
<EuiSuperSelect<string>
css={styles.viewSelect}
data-test-subj="view-select"
disabled={options.length === 1}
onChange={onViewSelected}
@ -98,7 +103,7 @@ const TopNComponent: React.FC<Props> = ({
valueOfSelected={view}
/>
),
[onViewSelected, options, view]
[onViewSelected, options, styles.viewSelect, view]
);
// alert workflow statuses (e.g. open | closed) and other alert-specific
@ -109,8 +114,8 @@ const TopNComponent: React.FC<Props> = ({
);
return (
<TopNContainer data-test-subj="topN-container">
<TopNContent>
<div css={styles.topNContainer} data-test-subj="topN-container">
<div css={styles.topNContent}>
{view === 'raw' || view === 'all' ? (
<EventsByDataset
filterQuery={filterQuery}
@ -141,15 +146,16 @@ const TopNComponent: React.FC<Props> = ({
hideQueryToggle
/>
)}
</TopNContent>
</div>
<CloseButton
<EuiButtonIcon
css={styles.closeButton}
aria-label={i18n.CLOSE}
data-test-subj="close"
iconType="cross"
onClick={toggleTopN}
/>
</TopNContainer>
</div>
);
};

2
x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.test.tsx
View file

@ -29,7 +29,7 @@ jest.mock('@elastic/eui', () => {
const original = jest.requireActual('@elastic/eui');
return {
...original,
EuiContextMenu: jest.fn().mockReturnValue(<div data-test-subj="viz-actions-menu" />),
EuiContextMenu: jest.fn(() => <div data-test-subj="viz-actions-menu" />),
};
});

4
x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.tsx
View file

@ -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};
}
`;

44
x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx
View file

@ -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<LensEmbeddableComponentProps> = ({
applyGlobalQueriesAndFilters = true,
@ -71,7 +71,12 @@ const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
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<LensEmbeddableComponentProps> = ({
}),
[wrapperHeight, wrapperWidth]
);
const {
lens,
data: {
@ -240,7 +246,7 @@ const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
return (
<>
{attributes && searchSessionId && (
<LensComponentWrapper $height={wrapperHeight} width={wrapperWidth}>
<div css={styles.lensComponentWrapper}>
<LensComponent
attributes={attributes}
disabledActions={DISABLED_ACTIONS}
@ -252,14 +258,14 @@ const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
overrides={overrides}
searchSessionId={searchSessionId}
showInspector={false}
style={style}
style={lensComponentStyle}
syncCursor={false}
syncTooltips={false}
timeRange={timerange}
viewMode={ViewMode.VIEW}
withDefaultActions={false}
/>
</LensComponentWrapper>
</div>
)}
{isShowingModal && request != null && response != null && (
<ModalInspectQuery

3
x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/visualization_embeddable.tsx
View file

@ -7,7 +7,8 @@
import React, { useCallback, useEffect, useRef, useMemo } from 'react';
import { useDispatch } from 'react-redux';
import { css } from 'styled-components';
import { css } from '@emotion/react';
import { ChartLabel } from '../../../overview/components/detection_response/alerts_by_status/chart_label';
import { useDeepEqualSelector } from '../../hooks/use_selector';
import { inputsActions, inputsSelectors } from '../../store/inputs';

8
x-pack/solutions/security/plugins/security_solution/public/common/jest.config.js
View file

@ -5,6 +5,9 @@
* 2.0.
*/
// eslint-disable-next-line import/no-extraneous-dependencies
const rootConfig = require('@kbn/test/jest-preset');
module.exports = {
preset: '@kbn/test',
rootDir: '../../../../../../..',
@ -16,4 +19,9 @@ module.exports = {
'<rootDir>/x-pack/solutions/security/plugins/security_solution/public/common/**/*.{ts,tsx}',
],
moduleNameMapper: require('../../server/__mocks__/module_name_map'),
transform: {
...rootConfig.transform,
'^.+\\.(js|tsx?)$':
'<rootDir>/x-pack/solutions/security/plugins/security_solution/jest/babel-transformer.js',
},
};

40
x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap generated
View file

@ -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"
>
<header
class="c1 toggle-expand siemHeaderSection"
class="toggle-expand siemHeaderSection"
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
data-test-subj="header-section"
>
<div
@ -144,7 +128,7 @@ exports[`Authentication Host Table Component rendering it renders the host authe
class="euiFlexItem emotion-euiFlexItem-grow-1"
>
<div
class="c2 siemSubtitle"
class="c1 siemSubtitle"
>
<p
class="siemSubtitle__item siemSubtitle__item--text"
@ -157,7 +141,7 @@ exports[`Authentication Host Table Component rendering it renders the host authe
</div>
</header>
<div
class="euiBasicTable c3"
class="euiBasicTable c2"
data-test-subj="paginated-basic-table"
>
<table
@ -352,7 +336,7 @@ exports[`Authentication Host Table Component rendering it renders the host authe
</table>
</div>
<div
class="euiFlexGroup c4 emotion-euiFlexGroup-l-spaceBetween-center-row"
class="euiFlexGroup c3 emotion-euiFlexGroup-l-spaceBetween-center-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"

40
x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_user_table.test.tsx.snap generated
View file

@ -1,53 +1,36 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Authentication User Table Component rendering it renders the user 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 User Table Component rendering it renders the user authe
data-test-subj="table-users-authentications-loading-false"
>
<header
class="c1 toggle-expand siemHeaderSection"
class="toggle-expand siemHeaderSection"
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
data-test-subj="header-section"
>
<div
@ -144,7 +128,7 @@ exports[`Authentication User Table Component rendering it renders the user authe
class="euiFlexItem emotion-euiFlexItem-grow-1"
>
<div
class="c2 siemSubtitle"
class="c1 siemSubtitle"
>
<p
class="siemSubtitle__item siemSubtitle__item--text"
@ -157,7 +141,7 @@ exports[`Authentication User Table Component rendering it renders the user authe
</div>
</header>
<div
class="euiBasicTable c3"
class="euiBasicTable c2"
data-test-subj="paginated-basic-table"
>
<table
@ -352,7 +336,7 @@ exports[`Authentication User Table Component rendering it renders the user authe
</table>
</div>
<div
class="euiFlexGroup c4 emotion-euiFlexGroup-l-spaceBetween-center-row"
class="euiFlexGroup c3 emotion-euiFlexGroup-l-spaceBetween-center-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"

19
x-pack/solutions/security/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap generated
View file

@ -10,16 +10,11 @@ exports[`Netflow renders correctly against snapshot 1`] = `
display: inline-block;
}
.c3 svg {
position: relative;
top: -1px;
}
.c5 {
.c4 {
margin-right: 5px;
}
.c4 {
.c3 {
margin-right: 5px;
}
@ -519,7 +514,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c3"
class="css-ggf2mo"
>
<a
class="euiLink emotion-euiLink-primary"
@ -985,7 +980,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c3"
class="css-ggf2mo"
>
<a
class="euiLink emotion-euiLink-primary"
@ -1215,7 +1210,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
class="euiBadge__text emotion-euiBadge__text"
>
<span
class="c4"
class="c3"
>
ja3
</span>
@ -1275,7 +1270,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
class="euiBadge__text emotion-euiBadge__text"
>
<span
class="c5"
class="c4"
>
client cert
</span>
@ -1335,7 +1330,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
class="euiBadge__text emotion-euiBadge__text"
>
<span
class="c5"
class="c4"
>
server cert
</span>

19
x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap generated
View file

@ -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"
>
<div
class="c5"
class="css-ggf2mo"
>
<a
class="euiLink emotion-euiLink-primary"
@ -1009,7 +1004,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="c5"
class="css-ggf2mo"
>
<a
class="euiLink emotion-euiLink-primary"
@ -1239,7 +1234,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
class="euiBadge__text emotion-euiBadge__text"
>
<span
class="c6"
class="c5"
>
ja3
</span>
@ -1299,7 +1294,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
class="euiBadge__text emotion-euiBadge__text"
>
<span
class="c7"
class="c6"
>
client cert
</span>
@ -1359,7 +1354,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
class="euiBadge__text emotion-euiBadge__text"
>
<span
class="c7"
class="c6"
>
server cert
</span>