diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js index 4e7a6f913acf1..6fdbf8533f53f 100644 --- a/packages/kbn-babel-preset/styled_components_files.js +++ b/packages/kbn-babel-preset/styled_components_files.js @@ -260,7 +260,6 @@ module.exports = { /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/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]detection_engine[\/\\]rule_creation[\/\\]components[\/\\]ml_job_link[\/\\]ml_job_link.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]detection_engine[\/\\]rule_creation[\/\\]components[\/\\]ml_jobs_description[\/\\]ml_job_item.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]detection_engine[\/\\]rule_creation[\/\\]components[\/\\]rule_actions_field[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]detection_engine[\/\\]rule_creation[\/\\]components[\/\\]step_about_rule_details[\/\\]index.test.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]detection_engine[\/\\]rule_creation[\/\\]components[\/\\]step_content_wrapper[\/\\]index.tsx/, @@ -351,10 +350,8 @@ module.exports = { /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]entity_analytics[\/\\]components[\/\\]severity[\/\\]common[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]entity_analytics[\/\\]components[\/\\]severity[\/\\]severity_bar.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]entity_analytics[\/\\]components[\/\\]styled_basic_table.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]exceptions[\/\\]components[\/\\]exceptions_list_card[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]exceptions[\/\\]components[\/\\]exceptions_utility[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]exceptions[\/\\]components[\/\\]shared_list_utilty_bar[\/\\]index.tsx/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]exceptions[\/\\]pages[\/\\]shared_lists[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]components[\/\\]paginated_table[\/\\]index.test.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]components[\/\\]paginated_table[\/\\]index.tsx/, /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]flyout[\/\\]document_details[\/\\]left[\/\\]components[\/\\]investigation_guide_view.tsx/, diff --git a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx index 2e489cb5dca97..3df4b7fd04234 100644 --- a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx +++ b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx @@ -18,7 +18,6 @@ import { } from '@elastic/eui'; import type { ExpressionColor } from '@elastic/eui/src/components/expression/expression'; import type { EuiFacetGroupLayout } from '@elastic/eui/src/components/facet/facet_group'; -import { euiThemeVars } from '@kbn/ui-theme'; import { ListTypeText, ViewerStatus } from '../types'; import * as i18n from '../translations'; import illustration from '../assets/images/illustration_product_no_results_magnifying_glass.svg'; @@ -33,10 +32,6 @@ interface EmptyViewerStateProps { onEmptyButtonStateClick?: () => void | null; } -const panelCss = css` - margin: ${euiThemeVars.euiSizeL} 0; - padding: ${euiThemeVars.euiSizeL} 0; -`; const EmptyViewerStateComponent: FC = ({ title, body, @@ -47,6 +42,10 @@ const EmptyViewerStateComponent: FC = ({ onEmptyButtonStateClick, }) => { const { euiTheme } = useEuiTheme(); + const panelCss = css` + margin: ${euiTheme.size.l} 0; + padding: ${euiTheme.size.l} 0; + `; const euiEmptyPromptProps = useMemo(() => { switch (viewerStatus) { diff --git a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/conditions.styles.tsx b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/conditions.styles.tsx deleted file mode 100644 index d0278771b249d..0000000000000 --- a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/conditions.styles.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; - -// TODO check font Roboto Mono -export const nestedGroupSpaceCss = css` - margin-left: ${euiThemeVars.euiSizeXL}; - margin-bottom: ${euiThemeVars.euiSizeXS}; - padding-top: ${euiThemeVars.euiSizeXS}; -`; - -export const valueContainerCss = css` - display: flex; - align-items: center; - margin-left: ${euiThemeVars.euiSizeS}; -`; -export const expressionContainerCss = css` - display: flex; - align-items: center; -`; diff --git a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/entry_content/__snapshots__/entry_content.test.tsx.snap b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/entry_content/__snapshots__/entry_content.test.tsx.snap index f814be75fa63e..a24b783532c2e 100644 --- a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/entry_content/__snapshots__/entry_content.test.tsx.snap +++ b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/entry_content/__snapshots__/entry_content.test.tsx.snap @@ -6,49 +6,45 @@ exports[`EntryContent should render a nested value 1`] = ` data-test-subj="EntryContentlistlist_id0EntryContent" >
+ + +
+ + -
- - - + included in + - - included in - - - - list_id - + list_id -
+
diff --git a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/entry_content/index.tsx b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/entry_content/index.tsx index 7f75694b16d34..5b0a4b2092ea9 100644 --- a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/entry_content/index.tsx +++ b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/entry_content/index.tsx @@ -6,13 +6,9 @@ */ import React, { ElementType, FC, memo } from 'react'; -import { EuiExpression, EuiToken, EuiFlexGroup } from '@elastic/eui'; +import { EuiExpression, EuiToken, EuiFlexGroup, useEuiTheme, EuiFlexItem } from '@elastic/eui'; +import { css } from '@emotion/react'; import { ListOperatorTypeEnum } from '@kbn/securitysolution-io-ts-list-types'; -import { - nestedGroupSpaceCss, - valueContainerCss, - expressionContainerCss, -} from '../conditions.styles'; import type { Entry } from '../types'; import * as i18n from '../../translations'; import { getValue, getValueExpression } from './entry_content.helper'; @@ -31,49 +27,49 @@ export const EntryContent: FC = memo( const value = getValue(entry); const operator = 'operator' in entry ? entry.operator : ''; + const { euiTheme } = useEuiTheme(); + const nestedGroupSpaceStyles = css` + margin-left: ${euiTheme.size.l}; + margin-bottom: ${euiTheme.size.xs}; + padding-top: ${euiTheme.size.xs}; + `; + const valueContainerStyles = css` + flex-direction: row; + `; + const entryKey = `${field}${type}${value}${index}`; return (
-
- {isNestedEntry ? ( - - - -
- - {getValueExpression( - type as ListOperatorTypeEnum, - operator, - value, - showValueListModal - )} -
- - ) : ( - <> - - + {isNestedEntry ? ( + + + + {getValueExpression( type as ListOperatorTypeEnum, operator, value, showValueListModal )} - - )} -
+ + + ) : ( + <> + + {getValueExpression(type as ListOperatorTypeEnum, operator, value, showValueListModal)} + + )}
); } diff --git a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/meta/details_info/index.tsx b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/meta/details_info/index.tsx index 209ce3b59553c..89f94e60d3c64 100644 --- a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/meta/details_info/index.tsx +++ b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/meta/details_info/index.tsx @@ -6,9 +6,8 @@ */ import React, { memo } from 'react'; -import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; +import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiText, useEuiTheme } from '@elastic/eui'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import * as i18n from '../../translations'; interface MetaInfoDetailsProps { @@ -18,11 +17,13 @@ interface MetaInfoDetailsProps { dataTestSubj?: string; } -const euiBadgeFontFamily = css` - font-family: ${euiThemeVars.euiFontFamily}; -`; export const MetaInfoDetails = memo( ({ label, lastUpdate, lastUpdateValue, dataTestSubj }) => { + const { euiTheme } = useEuiTheme(); + const euiBadgeFontFamily = css` + font-family: ${euiTheme.font.family}; + `; + return ( { exceptionsUtilityComponent={() => null} getFormattedComments={() => []} showValueListModal={MockedShowValueListModal} - /> + />, + { wrapper: EuiThemeProvider } ); expect(wrapper.getByTestId('exceptionsContainer')).toBeInTheDocument(); fireEvent.click(wrapper.getByTestId('exceptionItemCardMetaInfoEmptyButton')); diff --git a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_items/index.tsx b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_items/index.tsx index 6fde321cfcb93..f44fc8db1a1e2 100644 --- a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_items/index.tsx +++ b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_items/index.tsx @@ -6,7 +6,6 @@ */ import React, { ElementType } from 'react'; -import { css } from '@emotion/react'; import type { FC } from 'react'; import { EuiCommentProps, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; @@ -16,7 +15,6 @@ import type { ExceptionListTypeEnum, } from '@kbn/securitysolution-io-ts-list-types'; -import { euiThemeVars } from '@kbn/ui-theme'; import { EmptyViewerState, ExceptionItemCard, Pagination, PaginationProps } from '../..'; import type { @@ -26,13 +24,6 @@ import type { GetExceptionItemProps, } from '../types'; -const exceptionItemCss = css` - margin: ${euiThemeVars.euiSize} 0; - &div:first-child { - margin: ${euiThemeVars.euiSizeXS} 0 ${euiThemeVars.euiSize}; - } -`; - interface ExceptionItemsProps { lastUpdated: string | number | null; viewerStatus: ViewerStatus; @@ -98,13 +89,12 @@ const ExceptionItemsComponent: FC = ({ return ( <> - + {exceptions.map((exception) => (
1 1`] = `
{ }) as ReactElement[]; result.forEach((link) => { - const wrapper = render(link); + const wrapper = render(link, { + wrapper: EuiThemeProvider, + }); expect(wrapper.container).toMatchSnapshot(); expect(wrapper.getByTestId('generateLinedRulesMenuItemsTestActionItem1a2b3c')); expect(wrapper.getByTestId('generateLinedRulesMenuItemsTestLeftIcon')); @@ -52,7 +55,7 @@ describe('generateLinedRulesMenuItems', () => { it('should render the second linked rule and apply the css when the length is > 1', () => { const result: ReactElement[] = getSecurityLinkAction(dataTestSubj); - const wrapper = render(result[1]); + const wrapper = render(result[1], { wrapper: EuiThemeProvider }); expect(wrapper.container).toMatchSnapshot(); expect(wrapper.getByTestId('generateLinedRulesMenuItemsTestActionItem2a2b3c')); }); diff --git a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/generate_linked_rules_menu_item/index.tsx b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/generate_linked_rules_menu_item/index.tsx index 9187d0975e92a..efeb68a6edfe6 100644 --- a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/generate_linked_rules_menu_item/index.tsx +++ b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/generate_linked_rules_menu_item/index.tsx @@ -6,9 +6,9 @@ */ import React, { ElementType, ReactElement } from 'react'; +import styled from '@emotion/styled'; import { EuiContextMenuItem, EuiFlexGroup, EuiFlexItem, EuiIcon, IconType } from '@elastic/eui'; import { Rule } from '../types'; -import { itemContentCss, containerCss } from './menu_link.styles'; interface MenuItemLinkedRulesProps { leftIcon?: IconType; @@ -28,22 +28,28 @@ export const generateLinkedRulesMenuItems = ({ const SecurityLinkAnchor = securityLinkAnchorComponent; return linkedRules.map((rule) => { return ( - 1 ? containerCss : ''} + - + {leftIcon ? ( ) : null} - + - + ); }); }; + +const LinkedRulesMenuItem = styled(EuiContextMenuItem)` + &:not(:last-child) { + border-bottom: ${({ theme }) => theme.euiTheme.border.thin}; + } + color: ${({ theme }) => theme.euiTheme.colors.textPrimary}; +`; diff --git a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/generate_linked_rules_menu_item/menu_link.styles.ts b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/generate_linked_rules_menu_item/menu_link.styles.ts deleted file mode 100644 index 886369b22e23b..0000000000000 --- a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/generate_linked_rules_menu_item/menu_link.styles.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; - -export const containerCss = css` - border-bottom: 1px solid ${euiThemeVars.euiColorLightShade}; -`; - -export const itemContentCss = css` - color: ${euiThemeVars.euiColorPrimary}; - flex-basis: content; -`; diff --git a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/header_menu/header_menu.test.tsx b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/header_menu/header_menu.test.tsx index 2869b16e3aaa2..5ddac177a76fd 100644 --- a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/header_menu/header_menu.test.tsx +++ b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/header_menu/header_menu.test.tsx @@ -6,6 +6,7 @@ */ import { createEvent, fireEvent, render } from '@testing-library/react'; +import { EuiThemeProvider } from '@elastic/eui'; import React from 'react'; import { HeaderMenu } from '.'; import { actions, actionsWithDisabledDelete } from '../mocks/header.mock'; @@ -124,7 +125,9 @@ describe('HeaderMenu', () => { emptyButton actions={customActions} useCustomActions - /> + />, + + { wrapper: EuiThemeProvider } ); expect(wrapper.container).toMatchSnapshot(); diff --git a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap index 1fcea8da393df..0b11db767d13f 100644 --- a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap +++ b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap @@ -53,10 +53,10 @@ exports[`ExceptionListHeader should render edit modal 1`] = `

-
-
List Name -
-
+ -
-
+ +

-

-
-
List description -
-
+ -
-
-
+ + -
List ID : -
-
+ List_Id -
-
-
+ + +

@@ -273,10 +273,10 @@ exports[`ExceptionListHeader should render the List Header with name, default de

-
-
List Name -
-
+ -
-
+ +

-

-
-
Add a description -
-
+ -
-
-
+ + -
List ID : -
-
+ List_Id -
-
-
+ + +

@@ -493,10 +493,10 @@ exports[`ExceptionListHeader should render the List Header with name, default de

-
-
List Name -
-
+ -
+

-

-
-
Add a description -
-
+ -
-
+ -
List ID : -
-
+ List_Id -
-
-
+ + +

@@ -686,10 +686,10 @@ exports[`ExceptionListHeader should render the List Header with name, default de

-
-
List Name -
-
+ -
+

-

-
-
Add a description -
-
+ -
-
+ -
List ID : -
-
+ List_Id -
-
-
+ + +

diff --git a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/list_header/index.tsx b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/list_header/index.tsx index a50c0f17e449d..5b688999f2372 100644 --- a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/list_header/index.tsx +++ b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/list_header/index.tsx @@ -10,7 +10,14 @@ import React from 'react'; import { css } from '@emotion/react'; import type { FC } from 'react'; -import { EuiIcon, EuiPageHeader, EuiText, useEuiFontSize, useEuiTheme } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiIcon, + EuiPageHeader, + EuiText, + useEuiFontSize, + useEuiTheme, +} from '@elastic/eui'; import * as i18n from '../translations'; import { MenuItems } from './menu_items'; import { TextWithEdit } from '../text_with_edit'; @@ -76,7 +83,8 @@ const ExceptionListHeaderComponent: FC = ({ `; const descriptionContainerStyles = css` // negates the static EuiSpacer when using Title + Description in PageHeader - margin-top: -${euiTheme.size.l}; + margin-top: -${euiTheme.size.m}; + margin-bottom: ${euiTheme.size.s}; `; return ( @@ -95,7 +103,12 @@ const ExceptionListHeaderComponent: FC = ({ responsive data-test-subj={`${dataTestSubj || ''}PageHeader`} description={ -
+ = ({ text={listDetails.description || i18n.EXCEPTION_LIST_HEADER_DESCRIPTION} onEdit={onEdit} /> -
- {i18n.EXCEPTION_LIST_HEADER_LIST_ID}: - {listId} -
-
+ + + {i18n.EXCEPTION_LIST_HEADER_LIST_ID}: + + + {listId} + + + } rightSideItems={[ -
-
Test -
-
+ -
+
`; exports[`TextWithEdit should render the edit icon when isReadonly is false 1`] = `
-
-
Test -
-
+ -
-
+ +
`; diff --git a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/text_with_edit/index.tsx b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/text_with_edit/index.tsx index 1428dcfa238ea..07f5367bf8256 100644 --- a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/text_with_edit/index.tsx +++ b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/text_with_edit/index.tsx @@ -8,7 +8,7 @@ import React, { FC } from 'react'; import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { Interpolation, Theme } from '@emotion/react'; -import { textWithEditContainerCss, editIconCss } from './text_with_edit.styles'; +import { textWithEditContainerCss } from './text_with_edit.styles'; interface TextWithEditProps { isReadonly: boolean; dataTestSubj?: string; @@ -25,13 +25,13 @@ const TextWithEditComponent: FC = ({ textCss, }) => { return ( - - + + {text} - + {isReadonly ? null : ( = ({ value, tooltipIconType = 'iInCircle', @@ -33,14 +28,12 @@ export const ValueWithSpaceWarning: FC = ({ }); if (!showSpaceWarningIcon || !value) return null; return ( -
- - - -
+ + + ); }; diff --git a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/tsconfig.json b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/tsconfig.json index 5378a8fbdfe1a..03ab9b9afec10 100644 --- a/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/tsconfig.json +++ b/x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/tsconfig.json @@ -6,7 +6,8 @@ "jest", "node", "react", - "@emotion/react/types/css-prop" + "@emotion/react/types/css-prop", + "../../../../../typings/emotion.d.ts" ] }, "include": [ @@ -17,7 +18,6 @@ "kbn_references": [ "@kbn/securitysolution-io-ts-list-types", "@kbn/securitysolution-autocomplete", - "@kbn/ui-theme", "@kbn/i18n", "@kbn/i18n-react", ], diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_jobs_description/ml_job_item.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_jobs_description/ml_job_item.tsx index e32b8cb98270c..edb181ff9ee1c 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_jobs_description/ml_job_item.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation/components/ml_jobs_description/ml_job_item.tsx @@ -7,9 +7,8 @@ import type { FC, ReactNode } from 'react'; import React, { memo } from 'react'; -import styled from 'styled-components'; -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import { euiThemeVars } from '@kbn/ui-theme'; +import { css } from '@emotion/react'; +import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui'; import type { MlSummaryJob } from '@kbn/ml-plugin/public'; import * as i18n from './translations'; @@ -20,19 +19,19 @@ import { MlJobLink } from '../ml_job_link/ml_job_link'; import { MlAuditIcon } from '../ml_audit_icon'; import { MlJobStatusBadge } from '../ml_job_status_badge'; -const Wrapper = styled.div` - overflow: hidden; - margin-bottom: ${euiThemeVars.euiSizeS}; -`; - const MlJobItemComponent: FC<{ job: MlSummaryJob; switchComponent: ReactNode; }> = ({ job, switchComponent, ...props }) => { const isStarted = isJobStarted(job.jobState, job.datafeedState); + const { euiTheme } = useEuiTheme(); + const containerStyles = css` + overflow: hidden; + margin-bottom: ${euiTheme.size.s}; + `; return ( - +
@@ -46,7 +45,7 @@ const MlJobItemComponent: FC<{ {isStarted ? i18n.ML_STOP_JOB_LABEL : i18n.ML_RUN_JOB_LABEL} - +
); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/threshold_input/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/threshold_input/index.tsx index 26c12b2b6a88c..7e819565c9a6e 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/threshold_input/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/threshold_input/index.tsx @@ -12,6 +12,7 @@ import type { FieldHook } from '../../../../shared_imports'; import { Field } from '../../../../shared_imports'; import { THRESHOLD_FIELD_PLACEHOLDER } from './translations'; import * as styles from './styles'; +import { FieldSectionGroup } from './styles'; export interface FieldValueThreshold { field: string[]; @@ -66,7 +67,7 @@ const ThresholdInputComponent: React.FC = ({ return ( - + = ({ type={thresholdValue.type} /> - - + + = ({ type={thresholdCardinalityValue.type} /> - + ); }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/threshold_input/styles.ts b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/threshold_input/styles.ts index f37b6a5816272..31b64389a83bd 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/threshold_input/styles.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_creation_ui/components/threshold_input/styles.ts @@ -5,8 +5,9 @@ * 2.0. */ +import { EuiFlexGroup } from '@elastic/eui'; import { css, cx } from '@emotion/css'; -import { euiThemeVars } from '@kbn/ui-theme'; +import styled from '@emotion/styled'; const CONTAINER_BREAKPOINT = 500; @@ -35,7 +36,7 @@ export const operatorContainer = cx( text-align: center; @container (min-width: ${CONTAINER_BREAKPOINT}px) { - margin-top: ${euiThemeVars.euiSizeXL}; + align-self: center; justify-content: flex-start; flex: 0 0 auto; } @@ -51,12 +52,12 @@ export const input = cx( ` ); -export const fieldSection = css` - gap: ${euiThemeVars.euiSizeS}; +export const FieldSectionGroup = styled(EuiFlexGroup)` + gap: ${({ theme }) => theme.euiTheme.size.s}; flex-wrap: wrap; @container (min-width: ${CONTAINER_BREAKPOINT}px) { flex-wrap: nowrap; - gap: ${euiThemeVars.euiSizeL}; + gap: ${({ theme }) => theme.euiTheme.size.l}; } `; diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_exceptions/components/exception_item_card/meta.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_exceptions/components/exception_item_card/meta.tsx index 069cbce94cdd5..af8041e1aa111 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_exceptions/components/exception_item_card/meta.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_exceptions/components/exception_item_card/meta.tsx @@ -49,6 +49,16 @@ export const ExceptionItemCardMetaInfo = memo( border-right: ${euiTheme.border.thin}; padding: ${euiTheme.size.xs} ${euiTheme.size.m} ${euiTheme.size.xs} 0; `; + const referenceLinksContainerStyles = css` + div { + color: ${euiTheme.colors.textPrimary}; + padding: ${euiTheme.size.s}; + + &:not(:last-child) { + border-bottom: ${euiTheme.border.thin}; + } + } + `; const isExpired = useMemo( () => (item.expire_time ? new Date(item.expire_time) <= new Date() : false), [item] @@ -91,11 +101,18 @@ export const ExceptionItemCardMetaInfo = memo( data-test-subj={`${dataTestSubj}-rulesPopover`} id={'rulesPopover'} > - + ); - }, [listAndReferences, metaInfoItemStyles, dataTestSubj, isRulesPopoverOpen, itemActions]); + }, [ + listAndReferences, + metaInfoItemStyles, + dataTestSubj, + isRulesPopoverOpen, + referenceLinksContainerStyles, + itemActions, + ]); const listsAffected = useMemo((): JSX.Element => { if (listAndReferences == null) return <>; @@ -121,6 +138,7 @@ export const ExceptionItemCardMetaInfo = memo( > ( } else { return <>; } - }, [listAndReferences, dataTestSubj, isListsPopoverOpen]); + }, [listAndReferences, dataTestSubj, isListsPopoverOpen, referenceLinksContainerStyles]); return ( `-${size.s} ${size.m} 0 ${size.m}`}; `; const ListHeaderContainer = styled(EuiFlexGroup)` - padding: ${euiThemeVars.euiSizeS}; + padding: ${({ theme }) => theme.euiTheme.size.s}; text-align: initial; `; + export const ExceptionsListCard = memo( ({ exceptionsList, handleDelete, handleExport, handleDuplicate, readOnly }) => { const { @@ -156,10 +160,7 @@ export const ExceptionsListCard = memo( return ( <> setToggleAccordion(!toggleAccordion)} diff --git a/x-pack/solutions/security/plugins/security_solution/public/exceptions/pages/shared_lists/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/exceptions/pages/shared_lists/index.tsx index 423668347d4fc..873025bcd3baf 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/exceptions/pages/shared_lists/index.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/exceptions/pages/shared_lists/index.tsx @@ -22,14 +22,13 @@ import { EuiSpacer, EuiText, } from '@elastic/eui'; +import styled from '@emotion/styled'; import type { ExceptionListFilter, NamespaceType } from '@kbn/securitysolution-io-ts-list-types'; import { ExceptionListTypeEnum } from '@kbn/securitysolution-io-ts-list-types'; import { useApi, useExceptionLists } from '@kbn/securitysolution-list-hooks'; import { EmptyViewerState, ViewerStatus } from '@kbn/securitysolution-exception-list-components'; -import styled from 'styled-components'; -import { euiThemeVars } from '@kbn/ui-theme'; import { AutoDownload } from '../../../common/components/auto_download/auto_download'; import { useKibana } from '../../../common/lib/kibana'; import { useAppToasts } from '../../../common/hooks/use_app_toasts'; @@ -82,7 +81,7 @@ const SORT_FIELDS: Array<{ field: string; label: string; defaultOrder: 'asc' | ' ]; const ExceptionsTable = styled(EuiFlexGroup)` - padding: ${euiThemeVars.euiSizeL} 0; + padding: ${({ theme }) => theme.euiTheme.size.l} 0; `; export const SharedLists = React.memo(() => { diff --git a/x-pack/solutions/security/plugins/security_solution/public/value_list/components/info.tsx b/x-pack/solutions/security/plugins/security_solution/public/value_list/components/info.tsx index 328c1f0ed1931..42154e200dbc7 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/value_list/components/info.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/value_list/components/info.tsx @@ -6,19 +6,19 @@ */ import React from 'react'; import { EuiText } from '@elastic/eui'; -import { css } from '@emotion/css'; -import { euiThemeVars } from '@kbn/ui-theme'; +import styled from '@emotion/styled'; -const info = css` - margin-right: ${euiThemeVars.euiSizeS}; +const InfoContainer = styled(EuiText)` + margin-right: ${({ theme }) => theme.euiTheme.size.s}; `; -const infoLabel = css` - margin-right: ${euiThemeVars.euiSizeXS}; +const Label = styled.span` + font-weight: ${({ theme }) => theme.euiTheme.font.weight.bold}; + margin-right: ${({ theme }) => theme.euiTheme.size.xs}; `; export const Info = ({ label, value }: { value: React.ReactNode; label: string }) => ( - - {label} {value} - + + {value} + ); diff --git a/x-pack/solutions/security/plugins/security_solution/public/value_list/components/value_list_modal.tsx b/x-pack/solutions/security/plugins/security_solution/public/value_list/components/value_list_modal.tsx index f2741d80bd35a..3e242fc6d3ea4 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/value_list/components/value_list_modal.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/value_list/components/value_list_modal.tsx @@ -6,6 +6,7 @@ */ import React, { useState, useCallback } from 'react'; import { css } from '@emotion/css'; +import styled from '@emotion/styled'; import type { EuiSearchBarProps } from '@elastic/eui'; import { EuiModal, @@ -19,7 +20,6 @@ import { EuiSearchBar, } from '@elastic/eui'; import { useFindListItems, useGetListById } from '@kbn/securitysolution-list-hooks'; -import { euiThemeVars } from '@kbn/ui-theme'; import { FormattedDate } from '../../common/components/formatted_date'; import { useKibana } from '../../common/lib/kibana'; import { AddListItemPopover } from './add_list_item_popover'; @@ -35,9 +35,9 @@ import { getInfoTotalItems, } from '../translations'; -const modalBodyStyle = css` +const ModalBody = styled(EuiFlexGroup)` overflow: hidden; - padding: ${euiThemeVars.euiSize}; + padding: ${({ theme }) => theme.euiTheme.size.base}; `; const modalWindow = css` @@ -148,7 +148,7 @@ export const ValueListModal = ({ listId, onCloseModal, canWriteIndex }: ValueLis )} - + )} - + );