From 44c8e2e96a97601394c9647e756f589569e88236 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Georgiana-Andreea=20Onolea=C8=9B=C4=83?= Date: Mon, 16 Dec 2024 12:06:09 +0200 Subject: [PATCH 01/24] [ResponseOps][UI]EUI Visual Refresh integration and QA - tasks 1 & 2 (#203068) Closes https://github.com/elastic/kibana/issues/202548 Closes https://github.com/elastic/kibana/issues/202549 ## Summary - no changes were needed to the use of "success" color as it was used for semantic purpose - replaced "textSuccess" to "successText" --------- Co-authored-by: Elastic Machine --- .../rule_form/src/rule_page/rule_page_name_input.tsx | 2 +- .../public/components/case_view/components/edit_category.tsx | 2 +- .../public/components/case_view/components/edit_tags.tsx | 2 +- .../cases/public/components/custom_fields/number/edit.tsx | 2 +- .../cases/public/components/custom_fields/text/edit.tsx | 2 +- .../public/components/edit_connector/connectors_form.tsx | 2 +- .../components/markdown_editor/editable_markdown_footer.tsx | 2 +- .../sections/action_connector_form/connector_add_modal.tsx | 2 +- .../action_connector_form/create_connector_flyout/index.tsx | 4 ++-- .../action_connector_form/edit_connector_flyout/index.tsx | 2 +- .../sections/alert_summary_widget/components/alert_counts.tsx | 2 +- .../public/application/sections/rule_form/rule_add_footer.tsx | 2 +- .../public/application/sections/rule_form/rule_edit.tsx | 2 +- 13 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/response-ops/rule_form/src/rule_page/rule_page_name_input.tsx b/packages/response-ops/rule_form/src/rule_page/rule_page_name_input.tsx index 75db3fc988a4b..4c78734163fee 100644 --- a/packages/response-ops/rule_form/src/rule_page/rule_page_name_input.tsx +++ b/packages/response-ops/rule_form/src/rule_page/rule_page_name_input.tsx @@ -115,7 +115,7 @@ export const RulePageNameInput = () => { ['Edit'] = ({ ['Edit'] = ({ = ({ = ( = ({ {onTestConnector && ( = ({ = ({ 0 ? euiTheme.colors.dangerText : euiTheme.colors.successText} + color={activeAlertCount > 0 ? euiTheme.colors.dangerText : euiTheme.colors.textSuccess} alertType={ALERT_STATUS_ACTIVE} handleClick={handleClick} showWarningIcon={true} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_add_footer.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_add_footer.tsx index 9ca30dd49660d..1e9c5eb1ca485 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_add_footer.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_add_footer.tsx @@ -75,7 +75,7 @@ export const RuleAddFooter = ({ Date: Mon, 16 Dec 2024 12:16:14 +0200 Subject: [PATCH 02/24] [ResponseOps][UI] EUI Visual Refresh integration and QA - replaced deprecated color variables (#203120) Closes https://github.com/elastic/kibana/issues/202550 ## Summary - All references to renamed tokens have been updated to use the new token name # previous color token -> new color token primaryText -> textPrimary accentText -> textAccent between this and textSuccess. warningText -> textWarning dangerText -> textDanger text -> textParagraph title -> textHeading subduedText -> textSubdued disabledText -> textDisabled successText -> textSuccess - replaced the color utility functions with EUI color tokens as they will be deprecated --- .../rule_form/src/rule_actions/rule_actions_item.tsx | 7 +++---- .../src/rule_actions/rule_actions_system_actions_item.tsx | 4 ++-- .../rule_form_errors/rule_form_error_prompt_wrapper.tsx | 6 ++++-- .../response-ops/rule_form/src/rule_page/rule_page.tsx | 5 +++-- .../public/components/streaming_response.tsx | 4 ++-- .../cases/public/components/recent_cases/recent_cases.tsx | 2 +- .../components/text_area_with_autocomplete/index.tsx | 3 +-- .../alert_summary_widget/components/alert_counts.tsx | 2 +- .../components/rule_execution_summary_and_chart.tsx | 2 +- .../components/rule_snooze/panel/base_snooze_panel.tsx | 4 +++- 10 files changed, 21 insertions(+), 18 deletions(-) diff --git a/packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx b/packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx index d3a77b21c1379..94773a4c361b9 100644 --- a/packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx +++ b/packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx @@ -16,7 +16,6 @@ import { EuiPanel, EuiButtonIcon, useEuiTheme, - useEuiBackgroundColor, EuiIcon, EuiText, EuiTabs, @@ -110,9 +109,9 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => { } = useRuleFormState(); const [tab, setTab] = useState(MESSAGES_TAB); - const subdued = useEuiBackgroundColor('subdued'); - const plain = useEuiBackgroundColor('plain'); const { euiTheme } = useEuiTheme(); + const subdued = euiTheme.colors.lightestShade; + const plain = euiTheme.colors.backgroundBasePlain; const [availableActionVariables, setAvailableActionVariables] = useState(() => { if (!selectedRuleType.actionVariables) { @@ -692,7 +691,7 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => { } buttonContentClassName="eui-fullWidth" buttonContent={ - + {accordionIcon} {connectorTitle} diff --git a/packages/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx b/packages/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx index 4ed0305ec6e8d..a545956e0232f 100644 --- a/packages/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx +++ b/packages/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx @@ -126,8 +126,8 @@ export const RuleActionsSystemActionsItem = (props: RuleActionsSystemActionsItem >({}); const [warning, setWarning] = useState(null); - const subdued = useEuiBackgroundColor('subdued'); const { euiTheme } = useEuiTheme(); + const subdued = euiTheme.colors.lightestShade; const dispatch = useRuleFormDispatch(); const actionTypeModel = actionTypeRegistry.get(action.actionTypeId); @@ -267,7 +267,7 @@ export const RuleActionsSystemActionsItem = (props: RuleActionsSystemActionsItem buttonContent={ diff --git a/packages/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx b/packages/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx index 359a7cc911a3e..b35e29ead0302 100644 --- a/packages/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx +++ b/packages/response-ops/rule_form/src/rule_form_errors/rule_form_error_prompt_wrapper.tsx @@ -8,7 +8,7 @@ */ import React from 'react'; -import { useEuiBackgroundColorCSS, EuiPageTemplate } from '@elastic/eui'; +import { EuiPageTemplate } from '@elastic/eui'; interface RuleFormErrorPromptWrapperProps { hasBorder?: boolean; @@ -18,7 +18,9 @@ interface RuleFormErrorPromptWrapperProps { export const RuleFormErrorPromptWrapper: React.FC< React.PropsWithChildren > = ({ children, hasBorder, hasShadow }) => { - const styles = useEuiBackgroundColorCSS().transparent; + const styles = { + backgroundColor: 'transparent', + }; return ( diff --git a/packages/response-ops/rule_form/src/rule_page/rule_page.tsx b/packages/response-ops/rule_form/src/rule_page/rule_page.tsx index 58f16403ecc12..b57ba74428dfb 100644 --- a/packages/response-ops/rule_form/src/rule_page/rule_page.tsx +++ b/packages/response-ops/rule_form/src/rule_page/rule_page.tsx @@ -18,7 +18,6 @@ import { EuiSpacer, EuiSteps, EuiStepsProps, - useEuiBackgroundColorCSS, } from '@elastic/eui'; import { checkActionFormActionTypeEnabled } from '@kbn/alerts-ui-shared'; import React, { useCallback, useMemo, useState } from 'react'; @@ -70,7 +69,9 @@ export const RulePage = (props: RulePageProps) => { const canReadConnectors = !!application.capabilities.actions?.show; - const styles = useEuiBackgroundColorCSS().transparent; + const styles = { + backgroundColor: 'transparent', + }; const onSaveInternal = useCallback(() => { onSave({ diff --git a/x-pack/examples/gen_ai_streaming_response_example/public/components/streaming_response.tsx b/x-pack/examples/gen_ai_streaming_response_example/public/components/streaming_response.tsx index 8cba309a1274e..1c3bdf0c9a655 100644 --- a/x-pack/examples/gen_ai_streaming_response_example/public/components/streaming_response.tsx +++ b/x-pack/examples/gen_ai_streaming_response_example/public/components/streaming_response.tsx @@ -150,13 +150,13 @@ export const StreamingResponse = ({ id={`streamingResponse`} css={css` .euiButtonIcon { - color: ${euiTheme.colors.primaryText}; + color: ${euiTheme.colors.textPrimary}; } `} buttonContent={ - + {i18n.translate( 'genAiStreamingResponseExample.app.component.streamingResponseTitle', diff --git a/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx b/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx index f3a276d66a9c0..1d17ea74777e8 100644 --- a/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx +++ b/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx @@ -28,7 +28,7 @@ import { useCasesContext } from '../cases_context/use_cases_context'; const getMarkdownContainerCss = (euiTheme: EuiThemeComputed<{}>) => css` max-height: 150px; overflow-y: auto; - color: ${euiTheme.colors.subduedText}; + color: ${euiTheme.colors.textSubdued}; `; const getTruncateCompCss = css` diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx index da3b08fda8e18..2d574bb19a6f9 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx @@ -17,7 +17,6 @@ import { EuiHighlight, EuiOutsideClickDetector, useEuiTheme, - useEuiBackgroundColor, } from '@elastic/eui'; import { ActionVariable } from '@kbn/alerting-plugin/common'; import { AddMessageVariables } from '@kbn/alerts-ui-shared'; @@ -48,7 +47,7 @@ export const TextAreaWithAutocomplete: React.FunctionComponent { const { euiTheme } = useEuiTheme(); - const backgroundColor = useEuiBackgroundColor('plain'); + const backgroundColor = euiTheme.colors.backgroundBasePlain; const textAreaRef = React.useRef(null); const selectableRef = React.useRef(null); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_counts.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_counts.tsx index c9f83a0eee527..10a62046b0ab9 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_counts.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_counts.tsx @@ -41,7 +41,7 @@ export const AlertCounts = ({ activeAlertCount, recoveredAlertCount, handleClick 0 ? euiTheme.colors.dangerText : euiTheme.colors.textSuccess} + color={activeAlertCount > 0 ? euiTheme.colors.textDanger : euiTheme.colors.textSuccess} alertType={ALERT_STATUS_ACTIVE} handleClick={handleClick} showWarningIcon={true} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx index d5d740748b371..de85e91f42361 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_execution_summary_and_chart.tsx @@ -192,7 +192,7 @@ export const RuleExecutionSummaryAndChart = (props: RuleExecutionSummaryAndChart )} - + {formatMillisForDisplay(computedRuleSummary.executionDuration.average)} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx index 3d6523a144e99..859da54a845f2 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx @@ -223,7 +223,9 @@ export const BaseSnoozePanel: React.FunctionComponent = ({ height: '36px', // Replicate euiPanel--accent vs euiPanel--subdued // Applying these classNames by themselves doesn't work due to a CSS-in-JS issue with EuiPanel - color: isActive ? '#a8376a' : euiTheme.colors.subduedText, + color: isActive + ? euiTheme.colors.textAccent + : euiTheme.colors.textSubdued, backgroundColor: isActive ? 'rgba(240,78,152,0.2)' : euiTheme.colors.body, }} className="euiButton euiPanel euiPanel--borderRadiusMedium euiPanel--noShadow euiPanel--noBorder" From 5f20ac60a3d98490eb2096156a88aaf08a40c307 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Georgiana-Andreea=20Onolea=C8=9B=C4=83?= Date: Mon, 16 Dec 2024 12:16:31 +0200 Subject: [PATCH 03/24] [ResponseOps] [UI] Color palette tokens and functions dynamically update with theme changes (#203448) Closes https://github.com/elastic/kibana/issues/202551 ## Summary - All usage of color palette tokens and functions now pull from the theme JSON tokens are anything from: @elastic/eui/dist/eui_theme_light.json @elastic/eui/dist/eui_theme_dark.json import { euiThemeVars } from '@kbn/ui-theme' --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .../src/alert_fields_table/index.tsx | 9 ++-- packages/kbn-alerts-ui-shared/tsconfig.json | 1 - .../accordion_panel/group_stats.tsx | 28 +++++++++-- .../kbn-grouping/src/components/grouping.tsx | 15 ++++-- .../kbn-grouping/src/components/styles.tsx | 48 +++++++----------- packages/kbn-grouping/tsconfig.json | 1 - .../components/link_icon.tsx | 49 +++++++++---------- .../components/page_header.tsx | 30 +++++++----- x-pack/plugins/alerting/tsconfig.json | 1 - .../components/all_cases/severity_filter.tsx | 7 ++- .../all_cases/use_cases_columns.tsx | 14 ++---- .../public/components/severity/config.ts | 29 ----------- .../public/components/severity/config.tsx | 47 ++++++++++++++++++ .../public/components/severity/selector.tsx | 7 ++- .../components/user_actions/severity.tsx | 7 +-- x-pack/plugins/cases/tsconfig.json | 1 - .../cases_webhook/severity_filter.test.tsx | 16 +++--- .../cases_webhook/severity_filter.tsx | 41 ++++++++-------- x-pack/plugins/stack_connectors/tsconfig.json | 1 - .../text_area_with_autocomplete/index.tsx | 4 +- .../alerts_page/hooks/use_rule_stats.tsx | 3 +- .../cells/alert_lifecycle_status_cell.tsx | 15 +++--- .../components/execution_duration_chart.tsx | 6 ++- .../plugins/triggers_actions_ui/tsconfig.json | 1 - 24 files changed, 206 insertions(+), 175 deletions(-) delete mode 100644 x-pack/plugins/cases/public/components/severity/config.ts create mode 100644 x-pack/plugins/cases/public/components/severity/config.tsx diff --git a/packages/kbn-alerts-ui-shared/src/alert_fields_table/index.tsx b/packages/kbn-alerts-ui-shared/src/alert_fields_table/index.tsx index 3da86b5f848f7..d00f888feff00 100644 --- a/packages/kbn-alerts-ui-shared/src/alert_fields_table/index.tsx +++ b/packages/kbn-alerts-ui-shared/src/alert_fields_table/index.tsx @@ -14,11 +14,12 @@ import { EuiTabbedContentProps, useEuiOverflowScroll, EuiBasicTableColumn, + useEuiTheme, + useEuiFontSize, } from '@elastic/eui'; import { css } from '@emotion/react'; import React, { memo, useMemo } from 'react'; import { Alert } from '@kbn/alerting-types'; -import { euiThemeVars } from '@kbn/ui-theme'; import { useEuiTablePersist } from '@kbn/shared-ux-table-persist'; export const search = { @@ -90,6 +91,8 @@ export interface AlertFieldsTableProps { * A paginated, filterable table to show alert object fields */ export const AlertFieldsTable = memo(({ alert, fields }: AlertFieldsTableProps) => { + const { euiTheme } = useEuiTheme(); + const xsFontSize = useEuiFontSize('xs').fontSize; const { pageSize, sorting, onTableChange } = useEuiTablePersist({ tableId: 'obltAlertFields', initialPageSize: 25, @@ -122,8 +125,8 @@ export const AlertFieldsTable = memo(({ alert, fields }: AlertFieldsTableProps) search={search} css={css` & .euiTableRow { - font-size: ${euiThemeVars.euiFontSizeXS}; - font-family: ${euiThemeVars.euiCodeFontFamily}; + font-size: ${xsFontSize}; + font-family: ${euiTheme.font.familyCode}; } `} /> diff --git a/packages/kbn-alerts-ui-shared/tsconfig.json b/packages/kbn-alerts-ui-shared/tsconfig.json index 30be2e17af3ea..b7deb1733e515 100644 --- a/packages/kbn-alerts-ui-shared/tsconfig.json +++ b/packages/kbn-alerts-ui-shared/tsconfig.json @@ -19,7 +19,6 @@ "@kbn/data-views-plugin", "@kbn/unified-search-plugin", "@kbn/es-query", - "@kbn/ui-theme", "@kbn/controls-plugin", "@kbn/embeddable-plugin", "@kbn/core-http-browser", diff --git a/packages/kbn-grouping/src/components/accordion_panel/group_stats.tsx b/packages/kbn-grouping/src/components/accordion_panel/group_stats.tsx index d7b05c0ef02f8..552a728bd11c5 100644 --- a/packages/kbn-grouping/src/components/accordion_panel/group_stats.tsx +++ b/packages/kbn-grouping/src/components/accordion_panel/group_stats.tsx @@ -15,13 +15,13 @@ import { EuiFlexItem, EuiPopover, EuiToolTip, + useEuiTheme, + useEuiFontSize, } from '@elastic/eui'; import React, { Fragment, useCallback, useMemo, useState } from 'react'; import { Filter } from '@kbn/es-query'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { GroupStatsItem } from '../types'; -import { statsContainerCss } from '../styles'; import { TAKE_ACTION } from '../translations'; interface GroupStatsProps { @@ -34,6 +34,7 @@ interface GroupStatsProps { } const Separator = () => { + const { euiTheme } = useEuiTheme(); return ( { css={css` align-self: center; height: 20px; - border-right: ${euiThemeVars.euiBorderThin}; + border-right: ${euiTheme.border.thin}; `} /> ); @@ -55,6 +56,9 @@ const GroupStatsComponent = ({ stats, takeActionItems: getTakeActionItems, }: GroupStatsProps) => { + const { euiTheme } = useEuiTheme(); + const xsFontSize = useEuiFontSize('xs').fontSize; + const [isPopoverOpen, setPopover] = useState(false); const takeActionItems = useMemo(() => { return getTakeActionItems?.(groupFilter, groupNumber) ?? []; @@ -86,14 +90,28 @@ const GroupStatsComponent = ({ return ( - + {stat.title} {component} ); }) ?? [], - [stats] + [stats, euiTheme, xsFontSize] ); const takeActionMenu = useMemo( diff --git a/packages/kbn-grouping/src/components/grouping.tsx b/packages/kbn-grouping/src/components/grouping.tsx index 36d284cf28df6..365055a7dbac8 100644 --- a/packages/kbn-grouping/src/components/grouping.tsx +++ b/packages/kbn-grouping/src/components/grouping.tsx @@ -13,6 +13,7 @@ import { EuiProgress, EuiSpacer, EuiTablePagination, + useEuiTheme, } from '@elastic/eui'; import type { Filter } from '@kbn/es-query'; import React, { useMemo, useState } from 'react'; @@ -78,6 +79,8 @@ const GroupingComponent = ({ unit = defaultUnit, groupsUnit = GROUPS_UNIT, }: GroupingProps) => { + const { euiTheme } = useEuiTheme(); + const [trigger, setTrigger] = useState>( {} ); @@ -198,12 +201,16 @@ const GroupingComponent = ({ {groupCount > 0 && unitCount > 0 ? ( - + {unitCountText} - + {groupCountText} @@ -219,7 +226,9 @@ const GroupingComponent = ({ )}
0 ? groupingContainerCssLevel : groupingContainerCss} + css={ + groupingLevel > 0 ? groupingContainerCssLevel(euiTheme) : groupingContainerCss(euiTheme) + } className="eui-xScroll" > {isLoading ? ( diff --git a/packages/kbn-grouping/src/components/styles.tsx b/packages/kbn-grouping/src/components/styles.tsx index e51ac01948a38..0c0e3c4bc2620 100644 --- a/packages/kbn-grouping/src/components/styles.tsx +++ b/packages/kbn-grouping/src/components/styles.tsx @@ -7,52 +7,38 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { EuiButtonEmpty, EuiContextMenu } from '@elastic/eui'; +import { EuiButtonEmpty, EuiContextMenu, type EuiThemeComputed } from '@elastic/eui'; import { euiStyled } from '@kbn/kibana-react-plugin/common'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; -export const countCss = css` - font-size: ${euiThemeVars.euiFontSizeXS}; - font-weight: ${euiThemeVars.euiFontWeightSemiBold}; - border-right: ${euiThemeVars.euiBorderThin}; +export const countCss = (euiTheme: EuiThemeComputed<{}>) => css` + font-size: ${euiTheme.euiFontSize.xs}; + font-weight: ${euiTheme.font.weight.semiBold}; + border-right: ${euiTheme.border.thin}; margin-right: 16px; padding-right: 16px; `; -export const statsContainerCss = css` - font-size: ${euiThemeVars.euiFontSizeXS}; - font-weight: ${euiThemeVars.euiFontWeightSemiBold}; - .smallDot { - width: 3px !important; - display: inline-block; - } - .euiBadge__text { - text-align: center; - width: 100%; - } -`; - -export const groupingContainerCss = css` +export const groupingContainerCss = (euiTheme: EuiThemeComputed<{}>) => css` .groupingAccordionForm .euiAccordion__childWrapper .euiAccordion__children { margin-left: 8px; margin-right: 8px; - border-left: ${euiThemeVars.euiBorderThin}; - border-right: ${euiThemeVars.euiBorderThin}; - border-bottom: ${euiThemeVars.euiBorderThin}; + border-left: ${euiTheme.border.thin}; + border-right: ${euiTheme.border.thin}; + border-bottom: ${euiTheme.border.thin}; border-radius: 0 0 6px 6px; } .groupingAccordionForm .euiAccordion__triggerWrapper { - border-bottom: ${euiThemeVars.euiBorderThin}; - border-left: ${euiThemeVars.euiBorderThin}; - border-right: ${euiThemeVars.euiBorderThin}; + border-bottom: ${euiTheme.border.thin}; + border-left: ${euiTheme.border.thin}; + border-right: ${euiTheme.border.thin}; border-radius: 6px; min-height: 78px; padding-left: 16px; padding-right: 16px; } .groupingAccordionForm { - border-top: ${euiThemeVars.euiBorderThin}; + border-top: ${euiTheme.border.thin}; border-bottom: none; border-radius: 6px; min-width: 1090px; @@ -65,17 +51,17 @@ export const groupingContainerCss = css` } `; -export const groupingContainerCssLevel = css` +export const groupingContainerCssLevel = (euiTheme: EuiThemeComputed<{}>) => css` .groupingAccordionFormLevel .euiAccordion__childWrapper .euiAccordion__children { margin-left: 8px; margin-right: 8px; border-left: none; border-right: none; - border-bottom: ${euiThemeVars.euiBorderThin}; + border-bottom: ${euiTheme.border.thin}; border-radius: 0; } .groupingAccordionFormLevel .euiAccordion__triggerWrapper { - border-bottom: ${euiThemeVars.euiBorderThin}; + border-bottom: ${euiTheme.border.thin}; border-left: none; border-right: none; min-height: 78px; @@ -104,7 +90,7 @@ export const StyledContextMenu = euiStyled(EuiContextMenu)` text-overflow: ellipsis; } .euiContextMenuItem { - border-bottom: ${euiThemeVars.euiBorderThin}; + border-bottom: ${(props) => props.theme.eui.border.thin}; } .euiContextMenuItem:last-child { border: none; diff --git a/packages/kbn-grouping/tsconfig.json b/packages/kbn-grouping/tsconfig.json index 6322bf0596c70..8893588c5c548 100644 --- a/packages/kbn-grouping/tsconfig.json +++ b/packages/kbn-grouping/tsconfig.json @@ -24,7 +24,6 @@ "@kbn/i18n-react", "@kbn/kibana-react-plugin", "@kbn/shared-svg", - "@kbn/ui-theme", "@kbn/analytics", ] } diff --git a/x-pack/plugins/alerting/public/pages/maintenance_windows/components/link_icon.tsx b/x-pack/plugins/alerting/public/pages/maintenance_windows/components/link_icon.tsx index c89f67e63aa02..c8e487d5c15d9 100644 --- a/x-pack/plugins/alerting/public/pages/maintenance_windows/components/link_icon.tsx +++ b/x-pack/plugins/alerting/public/pages/maintenance_windows/components/link_icon.tsx @@ -6,35 +6,12 @@ */ import type { IconSize, IconType } from '@elastic/eui'; -import { EuiIcon, EuiLink } from '@elastic/eui'; +import { EuiIcon, EuiLink, useEuiTheme } from '@elastic/eui'; import type { LinkAnchorProps } from '@elastic/eui/src/components/link/link'; import type { ReactNode } from 'react'; import React from 'react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { css } from '@emotion/react'; -function getStyles(iconSide: string) { - return { - link: css` - align-items: center; - display: inline-flex; - vertical-align: top; - white-space: nowrap; - flex-direction: ${iconSide === 'left' ? 'row' : 'row-reverse'}; - `, - leftSide: css` - margin-right: ${euiThemeVars.euiSizeXS}; - `, - rightSide: css` - flex-direction: row-reverse; - - .euiIcon { - margin-left: ${euiThemeVars.euiSizeXS}; - } - `, - }; -} - export interface LinkIconProps { children: string | ReactNode; iconSize?: IconSize; @@ -60,11 +37,17 @@ export const LinkIcon = React.memo( onClick, ...rest }) => { - const styles = getStyles(iconSide); + const { euiTheme } = useEuiTheme(); return ( ( {...rest} > ( ( ({ showBackButton = false, title, description }) => { + const { euiTheme } = useEuiTheme(); + const xsFontSize = useEuiFontSize('xs').fontSize; const { navigateToMaintenanceWindows } = useMaintenanceWindowsNavigation(); const navigateToMaintenanceWindowsClick = useCallback(() => { @@ -82,7 +83,14 @@ export const PageHeader = React.memo( {showBackButton && ( -
+
{i18n.MAINTENANCE_WINDOWS_RETURN_LINK} diff --git a/x-pack/plugins/alerting/tsconfig.json b/x-pack/plugins/alerting/tsconfig.json index 6019f8711d681..8c3d1863c2752 100644 --- a/x-pack/plugins/alerting/tsconfig.json +++ b/x-pack/plugins/alerting/tsconfig.json @@ -47,7 +47,6 @@ "@kbn/kibana-react-plugin", "@kbn/management-plugin", "@kbn/es-ui-shared-plugin", - "@kbn/ui-theme", "@kbn/core-doc-links-server-mocks", "@kbn/doc-links", "@kbn/core-saved-objects-utils-server", diff --git a/x-pack/plugins/cases/public/components/all_cases/severity_filter.tsx b/x-pack/plugins/cases/public/components/all_cases/severity_filter.tsx index dbc7bdef31c2a..621b1123a5c96 100644 --- a/x-pack/plugins/cases/public/components/all_cases/severity_filter.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/severity_filter.tsx @@ -5,10 +5,10 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiHealth } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import React from 'react'; import type { CaseSeverity } from '../../../common/types/domain'; -import { severities } from '../severity/config'; +import { severities, SeverityHealth } from '../severity/config'; import type { MultiSelectFilterOption } from './multi_select_filter'; import { MultiSelectFilter, mapToMultiSelectOption } from './multi_select_filter'; import * as i18n from './translations'; @@ -22,11 +22,10 @@ const options = mapToMultiSelectOption(Object.keys(severities) as CaseSeverity[] export const SeverityFilter: React.FC = ({ selectedOptionKeys, onChange }) => { const renderOption = (option: MultiSelectFilterOption) => { - const severityData = severities[option.label]; return ( - {severityData.label} + ); diff --git a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx index 73292ac9d71bd..da92ad3bd3908 100644 --- a/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/use_cases_columns.tsx @@ -18,7 +18,6 @@ import { EuiButton, EuiLink, EuiIcon, - EuiHealth, EuiToolTip, RIGHT_ALIGNMENT, } from '@elastic/eui'; @@ -26,7 +25,6 @@ import { Status } from '@kbn/cases-components/src/status/status'; import type { UserProfileWithAvatar } from '@kbn/user-profile-components'; import type { ActionConnector } from '../../../common/types/domain'; -import { CaseSeverity } from '../../../common/types/domain'; import type { CaseUI } from '../../../common/ui/types'; import type { CasesColumnSelection } from './types'; import { getEmptyCellValue } from '../empty_value'; @@ -38,7 +36,7 @@ import { useCasesColumnsConfiguration } from './use_cases_columns_configuration' import { useApplicationCapabilities, useKibana } from '../../common/lib/kibana'; import { TruncatedText } from '../truncated_text'; import { getConnectorIcon } from '../utils'; -import { severities } from '../severity/config'; +import { SeverityHealth } from '../severity/config'; import { AssigneesColumn } from './assignees_column'; import { builderMap as customFieldsBuilderMap } from '../custom_fields/builder'; import { useGetCaseConfiguration } from '../../containers/configure/use_get_case_configuration'; @@ -60,7 +58,6 @@ const getLineClampedCss = css` const renderStringField = (field: string, dataTestSubj: string) => field != null ? {field} : getEmptyCellValue(); - export interface GetCasesColumn { filterStatus: string[]; userProfiles: Map; @@ -298,14 +295,11 @@ export const useCasesColumns = ({ sortable: true, render: (severity: CaseUI['severity']) => { if (severity != null) { - const severityData = severities[severity ?? CaseSeverity.LOW]; return ( - - {severityData.label} - + severity={severity} + /> ); } return getEmptyCellValue(); diff --git a/x-pack/plugins/cases/public/components/severity/config.ts b/x-pack/plugins/cases/public/components/severity/config.ts deleted file mode 100644 index 85df4b527c1b5..0000000000000 --- a/x-pack/plugins/cases/public/components/severity/config.ts +++ /dev/null @@ -1,29 +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 { euiLightVars } from '@kbn/ui-theme'; -import { CaseSeverity } from '../../../common/types/domain'; -import { CRITICAL, HIGH, LOW, MEDIUM } from './translations'; - -export const severities = { - [CaseSeverity.LOW]: { - color: euiLightVars.euiColorVis0, - label: LOW, - }, - [CaseSeverity.MEDIUM]: { - color: euiLightVars.euiColorVis5, - label: MEDIUM, - }, - [CaseSeverity.HIGH]: { - color: euiLightVars.euiColorVis7, - label: HIGH, - }, - [CaseSeverity.CRITICAL]: { - color: euiLightVars.euiColorVis9, - label: CRITICAL, - }, -}; diff --git a/x-pack/plugins/cases/public/components/severity/config.tsx b/x-pack/plugins/cases/public/components/severity/config.tsx new file mode 100644 index 0000000000000..77e72089fa67a --- /dev/null +++ b/x-pack/plugins/cases/public/components/severity/config.tsx @@ -0,0 +1,47 @@ +/* + * 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 React from 'react'; + +import { useEuiTheme, EuiHealth } from '@elastic/eui'; +import { CaseSeverity } from '../../../common/types/domain'; +import { CRITICAL, HIGH, LOW, MEDIUM } from './translations'; + +interface Props { + severity: CaseSeverity; +} + +export const severities = { + [CaseSeverity.LOW]: { + label: LOW, + }, + [CaseSeverity.MEDIUM]: { + label: MEDIUM, + }, + [CaseSeverity.HIGH]: { + label: HIGH, + }, + [CaseSeverity.CRITICAL]: { + label: CRITICAL, + }, +}; + +export const SeverityHealth: React.FC = ({ severity }) => { + const { euiTheme } = useEuiTheme(); + + const severityData = { + low: { color: euiTheme.colors.vis.euiColorVis0, label: LOW }, + medium: { color: euiTheme.colors.vis.euiColorVis5, label: MEDIUM }, + high: { color: euiTheme.colors.vis.euiColorVis7, label: HIGH }, + critical: { color: euiTheme.colors.vis.euiColorVis9, label: CRITICAL }, + }; + + const { color, label } = severityData[severity]; + + return {label}; +}; +SeverityHealth.displayName = 'SeverityHealth'; diff --git a/x-pack/plugins/cases/public/components/severity/selector.tsx b/x-pack/plugins/cases/public/components/severity/selector.tsx index 90e38fc0a9c16..15f287973df34 100644 --- a/x-pack/plugins/cases/public/components/severity/selector.tsx +++ b/x-pack/plugins/cases/public/components/severity/selector.tsx @@ -6,10 +6,10 @@ */ import type { EuiSuperSelectOption } from '@elastic/eui'; -import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiSuperSelect } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiSuperSelect } from '@elastic/eui'; import React from 'react'; import type { CaseSeverity } from '../../../common/types/domain'; -import { severities } from './config'; +import { severities, SeverityHealth } from './config'; interface Props { selectedSeverity: CaseSeverity; @@ -26,7 +26,6 @@ export const SeveritySelector: React.FC = ({ }) => { const caseSeverities = Object.keys(severities) as CaseSeverity[]; const options: Array> = caseSeverities.map((severity) => { - const severityData = severities[severity]; return { value: severity, inputDisplay: ( @@ -37,7 +36,7 @@ export const SeveritySelector: React.FC = ({ data-test-subj={`case-severity-selection-${severity}`} > - {severityData.label} + ), diff --git a/x-pack/plugins/cases/public/components/user_actions/severity.tsx b/x-pack/plugins/cases/public/components/user_actions/severity.tsx index 8196acefc0faa..a03ed71361db1 100644 --- a/x-pack/plugins/cases/public/components/user_actions/severity.tsx +++ b/x-pack/plugins/cases/public/components/user_actions/severity.tsx @@ -5,17 +5,18 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiHealth } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import React from 'react'; import type { SnakeToCamelCase } from '../../../common/types'; import type { SeverityUserAction } from '../../../common/types/domain'; import { SET_SEVERITY_TO } from '../create/translations'; import { createCommonUpdateUserActionBuilder } from './common'; import type { UserActionBuilder } from './types'; -import { severities } from '../severity/config'; +import { severities, SeverityHealth } from '../severity/config'; const getLabelTitle = (userAction: SnakeToCamelCase) => { const severity = userAction.payload.severity; + const severityData = severities[severity]; if (severityData === undefined) { return null; @@ -29,7 +30,7 @@ const getLabelTitle = (userAction: SnakeToCamelCase) => { > {SET_SEVERITY_TO} - {severityData.label} + ); diff --git a/x-pack/plugins/cases/tsconfig.json b/x-pack/plugins/cases/tsconfig.json index 2a77cb0e7b5a1..0a8212c73e27a 100644 --- a/x-pack/plugins/cases/tsconfig.json +++ b/x-pack/plugins/cases/tsconfig.json @@ -38,7 +38,6 @@ "@kbn/licensing-plugin", "@kbn/user-profile-components", "@kbn/rule-data-utils", - "@kbn/ui-theme", "@kbn/std", "@kbn/test-jest-helpers", "@kbn/config-schema", diff --git a/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.test.tsx b/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.test.tsx index d65d15fd0fc3d..ccfdedcc47315 100644 --- a/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.test.tsx +++ b/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.test.tsx @@ -7,7 +7,8 @@ import React from 'react'; import { fireEvent, render } from '@testing-library/react'; -import { CaseSeverity, severities, SeverityFilter } from './severity_filter'; +import { CaseSeverity, SeverityFilter } from './severity_filter'; +import * as i18n from './translations'; const onSeverityChange = jest.fn(); const defaultProps = { selectedSeverity: CaseSeverity.LOW, @@ -26,11 +27,14 @@ describe('SeverityFilter', () => { expect(superSelect).toHaveTextContent('Low'); fireEvent.click(superSelect); const options = getAllByRole('option'); - const allSeverities = Object.keys(severities) as CaseSeverity[]; - expect(options).toHaveLength(allSeverities.length); - options.forEach((option, index) => { - expect(option).toHaveTextContent(severities[allSeverities[index]].label); - }); + + expect(options).toHaveLength(Object.values(CaseSeverity).length); + expect(options.map((option) => option.textContent)).toEqual([ + i18n.SEVERITY_LOW_LABEL, + i18n.SEVERITY_MEDIUM_LABEL, + i18n.SEVERITY_HIGH_LABEL, + i18n.SEVERITY_CRITICAL_LABEL, + ]); }); it('should call onSeverityChange with selected severity when an option is clicked', () => { diff --git a/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx b/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx index 619f4c58d12df..9d6a48198b54a 100644 --- a/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx +++ b/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import { euiLightVars } from '@kbn/ui-theme'; import React from 'react'; import { EuiFlexGroup, @@ -13,6 +12,7 @@ import { EuiHealth, EuiSuperSelect, EuiSuperSelectOption, + useEuiTheme, } from '@elastic/eui'; import * as i18n from './translations'; @@ -23,31 +23,32 @@ export enum CaseSeverity { CRITICAL = 'critical', } -export const severities = { - [CaseSeverity.LOW]: { - color: euiLightVars.euiColorVis0, - label: i18n.SEVERITY_LOW_LABEL, - }, - [CaseSeverity.MEDIUM]: { - color: euiLightVars.euiColorVis5, - label: i18n.SEVERITY_MEDIUM_LABEL, - }, - [CaseSeverity.HIGH]: { - color: euiLightVars.euiColorVis7, - label: i18n.SEVERITY_HIGH_LABEL, - }, - [CaseSeverity.CRITICAL]: { - color: euiLightVars.euiColorVis9, - label: i18n.SEVERITY_CRITICAL_LABEL, - }, -}; - interface Props { selectedSeverity: CaseSeverity; onSeverityChange: (status: CaseSeverity) => void; } export const SeverityFilter: React.FC = ({ selectedSeverity, onSeverityChange }) => { + const { euiTheme } = useEuiTheme(); + + const severities = { + [CaseSeverity.LOW]: { + color: euiTheme.colors.vis.euiColorVis0, + label: i18n.SEVERITY_LOW_LABEL, + }, + [CaseSeverity.MEDIUM]: { + color: euiTheme.colors.vis.euiColorVis5, + label: i18n.SEVERITY_MEDIUM_LABEL, + }, + [CaseSeverity.HIGH]: { + color: euiTheme.colors.vis.euiColorVis7, + label: i18n.SEVERITY_HIGH_LABEL, + }, + [CaseSeverity.CRITICAL]: { + color: euiTheme.colors.vis.euiColorVis9, + label: i18n.SEVERITY_CRITICAL_LABEL, + }, + }; const caseSeverities = Object.keys(severities) as CaseSeverity[]; const options: Array> = caseSeverities.map((severity) => { const severityData = severities[severity]; diff --git a/x-pack/plugins/stack_connectors/tsconfig.json b/x-pack/plugins/stack_connectors/tsconfig.json index fa7e2dd9be6f8..4b25779fddb7b 100644 --- a/x-pack/plugins/stack_connectors/tsconfig.json +++ b/x-pack/plugins/stack_connectors/tsconfig.json @@ -36,7 +36,6 @@ "@kbn/core-saved-objects-api-server-mocks", "@kbn/alerting-plugin", "@kbn/securitysolution-ecs", - "@kbn/ui-theme", "@kbn/cases-components", "@kbn/code-editor-mock", "@kbn/utility-types", diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx index 2d574bb19a6f9..896f7e2cb2e7d 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/text_area_with_autocomplete/index.tsx @@ -20,7 +20,6 @@ import { } from '@elastic/eui'; import { ActionVariable } from '@kbn/alerting-plugin/common'; import { AddMessageVariables } from '@kbn/alerts-ui-shared'; -import { euiThemeVars } from '@kbn/ui-theme'; import { filterSuggestions } from './lib/filter_suggestions_for_autocomplete'; import { templateActionVariable } from './lib/template_action_variable'; @@ -271,12 +270,13 @@ export const TextAreaWithAutocomplete: React.FunctionComponent props.theme.euiTheme.colors.lightShade}; height: 100%; `; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/cells/alert_lifecycle_status_cell.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/cells/alert_lifecycle_status_cell.tsx index c050ac2e4a3e2..8c04b48ee7670 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/cells/alert_lifecycle_status_cell.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/cells/alert_lifecycle_status_cell.tsx @@ -7,20 +7,16 @@ import { AlertStatus, ALERT_FLAPPING, ALERT_STATUS } from '@kbn/rule-data-utils'; import React, { memo } from 'react'; -import { EuiBadge, EuiFlexGroup, EuiToolTip } from '@elastic/eui'; +import { EuiBadge, EuiFlexGroup, EuiToolTip, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { AlertLifecycleStatusBadge } from '../../../components/alert_lifecycle_status_badge'; import { CellComponentProps } from '../types'; import { DefaultCell } from './default_cell'; import { useAlertMutedState } from '../hooks/alert_mute/use_alert_muted_state'; -const mutedBadgeStyle = css` - padding-inline: ${euiThemeVars.euiSizeXS}; -`; - const AlertLifecycleStatusCellComponent: React.FC = (props) => { + const { euiTheme } = useEuiTheme(); const { alert, showAlertStatusWithFlapping } = props; const { isMuted } = useAlertMutedState(alert); @@ -45,7 +41,12 @@ const AlertLifecycleStatusCellComponent: React.FC = (props) defaultMessage: 'Alert muted', })} > - + )} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx index 6ab5b96cade27..a3bc732beae9e 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx @@ -16,8 +16,8 @@ import { EuiTitle, EuiSelect, EuiLoadingChart, + useEuiTheme, } from '@elastic/eui'; -import { euiLightVars as lightEuiTheme } from '@kbn/ui-theme'; import { Axis, BarSeries, @@ -60,6 +60,8 @@ export const ExecutionDurationChart: React.FunctionComponent = ({ onChangeDuration, isLoading, }: ComponentOpts) => { + const { euiTheme } = useEuiTheme(); + const paddedExecutionDurations = padOrTruncateDurations( executionDuration.valuesWithTimestamp, numberOfExecutions @@ -117,7 +119,7 @@ export const ExecutionDurationChart: React.FunctionComponent = ({ theme={{ lineSeriesStyle: { point: { visible: 'never' }, - line: { stroke: lightEuiTheme.euiColorAccent }, + line: { stroke: euiTheme.colors.accent }, }, }} // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md diff --git a/x-pack/plugins/triggers_actions_ui/tsconfig.json b/x-pack/plugins/triggers_actions_ui/tsconfig.json index 7004ad1b1b08c..4cf0a2f63ffbb 100644 --- a/x-pack/plugins/triggers_actions_ui/tsconfig.json +++ b/x-pack/plugins/triggers_actions_ui/tsconfig.json @@ -41,7 +41,6 @@ "@kbn/core-http-browser", "@kbn/core-notifications-browser", "@kbn/core-doc-links-browser", - "@kbn/ui-theme", "@kbn/datemath", "@kbn/core-capabilities-common", "@kbn/shared-ux-router", From 60a9959009e6904e379225517a97f9979d71a75a Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Mon, 16 Dec 2024 12:39:21 +0200 Subject: [PATCH 04/24] changed color mapping --- .../cases/public/components/severity/config.tsx | 8 ++++---- .../cases_webhook/severity_filter.tsx | 8 ++++---- .../event_log/event_log_list_status.tsx | 16 ++++++++-------- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/x-pack/plugins/cases/public/components/severity/config.tsx b/x-pack/plugins/cases/public/components/severity/config.tsx index 77e72089fa67a..3430a543ba0d9 100644 --- a/x-pack/plugins/cases/public/components/severity/config.tsx +++ b/x-pack/plugins/cases/public/components/severity/config.tsx @@ -34,10 +34,10 @@ export const SeverityHealth: React.FC = ({ severity }) => { const { euiTheme } = useEuiTheme(); const severityData = { - low: { color: euiTheme.colors.vis.euiColorVis0, label: LOW }, - medium: { color: euiTheme.colors.vis.euiColorVis5, label: MEDIUM }, - high: { color: euiTheme.colors.vis.euiColorVis7, label: HIGH }, - critical: { color: euiTheme.colors.vis.euiColorVis9, label: CRITICAL }, + low: { color: euiTheme.colors.success, label: LOW }, + medium: { color: euiTheme.colors.warning, label: MEDIUM }, + high: { color: euiTheme.colors.accent, label: HIGH }, + critical: { color: euiTheme.colors.danger, label: CRITICAL }, }; const { color, label } = severityData[severity]; diff --git a/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx b/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx index 9d6a48198b54a..f3366b95be810 100644 --- a/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx +++ b/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx @@ -33,19 +33,19 @@ export const SeverityFilter: React.FC = ({ selectedSeverity, onSeverityCh const severities = { [CaseSeverity.LOW]: { - color: euiTheme.colors.vis.euiColorVis0, + color: euiTheme.colors.success, label: i18n.SEVERITY_LOW_LABEL, }, [CaseSeverity.MEDIUM]: { - color: euiTheme.colors.vis.euiColorVis5, + color: euiTheme.colors.warning, label: i18n.SEVERITY_MEDIUM_LABEL, }, [CaseSeverity.HIGH]: { - color: euiTheme.colors.vis.euiColorVis7, + color: euiTheme.colors.accent, label: i18n.SEVERITY_HIGH_LABEL, }, [CaseSeverity.CRITICAL]: { - color: euiTheme.colors.vis.euiColorVis9, + color: euiTheme.colors.danger, label: i18n.SEVERITY_CRITICAL_LABEL, }, }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx index 2dc460fc755ca..fcace082dad84 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx @@ -6,7 +6,7 @@ */ import React, { useMemo } from 'react'; -import { EuiIcon } from '@elastic/eui'; +import { EuiIcon, useEuiTheme } from '@elastic/eui'; import { RuleAlertingOutcome } from '@kbn/alerting-plugin/common'; import { RULE_LAST_RUN_OUTCOME_SUCCEEDED, @@ -30,13 +30,6 @@ const iconStyles = { marginRight: '8px', }; -const STATUS_TO_COLOR: Record = { - success: 'success', - failure: 'danger', - unknown: 'gray', - warning: 'warning', -}; - const STATUS_TO_OUTCOME: Record = { success: RULE_LAST_RUN_OUTCOME_SUCCEEDED, failure: RULE_LAST_RUN_OUTCOME_FAILED, @@ -45,7 +38,14 @@ const STATUS_TO_OUTCOME: Record = { }; export const EventLogListStatus = (props: EventLogListStatusProps) => { + const { euiTheme } = useEuiTheme(); const { status, useExecutionStatus = true } = props; + const STATUS_TO_COLOR: Record = { + success: euiTheme.colors.success, + failure: euiTheme.colors.danger, + unknown: euiTheme.colors.gray, + warning: euiTheme.colors.warning, + }; const color = STATUS_TO_COLOR[status] || 'gray'; const statusString = useMemo(() => { From 58d146c2375b25c43da46cd2521be5381a47eae7 Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Mon, 16 Dec 2024 16:34:36 +0200 Subject: [PATCH 05/24] removed running MW highlighted background --- .../components/maintenance_windows_list.tsx | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/x-pack/plugins/alerting/public/pages/maintenance_windows/components/maintenance_windows_list.tsx b/x-pack/plugins/alerting/public/pages/maintenance_windows/components/maintenance_windows_list.tsx index f91856dc8aec9..2bdd15f306d94 100644 --- a/x-pack/plugins/alerting/public/pages/maintenance_windows/components/maintenance_windows_list.tsx +++ b/x-pack/plugins/alerting/public/pages/maintenance_windows/components/maintenance_windows_list.tsx @@ -13,11 +13,9 @@ import { EuiFlexGroup, EuiFlexItem, EuiBadge, - useEuiTheme, EuiButton, EuiSearchBarProps, } from '@elastic/eui'; -import { css } from '@emotion/react'; import { SortDirection } from '../types'; import * as i18n from '../translations'; import { useEditMaintenanceWindowsNavigation } from '../../../hooks/use_navigation'; @@ -100,8 +98,6 @@ const rowProps = (item: MaintenanceWindow) => ({ export const MaintenanceWindowsList = React.memo( ({ isLoading, items, readOnly, refreshData }) => { - const { euiTheme } = useEuiTheme(); - const { navigateToEditMaintenanceWindows } = useEditMaintenanceWindowsNavigation(); const onEdit = useCallback( (id) => navigateToEditMaintenanceWindows(id), @@ -136,16 +132,6 @@ export const MaintenanceWindowsList = React.memo( return isLoadingFinish || isLoadingArchive || isLoadingFinishAndArchive || isLoading; }, [isLoadingFinish, isLoadingArchive, isLoadingFinishAndArchive, isLoading]); - const tableCss = useMemo(() => { - return css` - .euiTableRow { - &.running { - background-color: ${euiTheme.colors.highlight}; - } - } - `; - }, [euiTheme.colors.highlight]); - const actions: Array> = useMemo( () => [ { @@ -199,7 +185,6 @@ export const MaintenanceWindowsList = React.memo( return ( Date: Tue, 17 Dec 2024 10:08:55 +0200 Subject: [PATCH 06/24] fixes for check types --- .../kbn-grouping/src/components/grouping.tsx | 21 ++++++++++++------- .../kbn-grouping/src/components/styles.tsx | 10 +-------- 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/packages/kbn-grouping/src/components/grouping.tsx b/packages/kbn-grouping/src/components/grouping.tsx index 365055a7dbac8..ad655438440a0 100644 --- a/packages/kbn-grouping/src/components/grouping.tsx +++ b/packages/kbn-grouping/src/components/grouping.tsx @@ -14,7 +14,9 @@ import { EuiSpacer, EuiTablePagination, useEuiTheme, + useEuiFontSize, } from '@elastic/eui'; +import { css } from '@emotion/react'; import type { Filter } from '@kbn/es-query'; import React, { useMemo, useState } from 'react'; import { METRIC_TYPE, UiCounterMetricType } from '@kbn/analytics'; @@ -23,7 +25,7 @@ import { createGroupFilter, getNullGroupFilter } from '../containers/query/helpe import { GroupPanel } from './accordion_panel'; import { GroupStats } from './accordion_panel/group_stats'; import { EmptyGroupingComponent } from './empty_results_panel'; -import { countCss, groupingContainerCss, groupingContainerCssLevel } from './styles'; +import { groupingContainerCss, groupingContainerCssLevel } from './styles'; import { GROUPS_UNIT, NULL_GROUP } from './translations'; import type { ParsedGroupingAggregation, GroupPanelRenderer, GetGroupStats } from './types'; import { GroupingBucket, OnGroupToggle } from './types'; @@ -80,6 +82,15 @@ const GroupingComponent = ({ groupsUnit = GROUPS_UNIT, }: GroupingProps) => { const { euiTheme } = useEuiTheme(); + const xsFontSize = useEuiFontSize('xs').fontSize; + + const countCss = css` + font-size: ${xsFontSize}; + font-weight: ${euiTheme.font.weight.semiBold}; + border-right: ${euiTheme.border.thin}; + margin-right: 16px; + padding-right: 16px; + `; const [trigger, setTrigger] = useState>( {} @@ -201,16 +212,12 @@ const GroupingComponent = ({ {groupCount > 0 && unitCount > 0 ? ( - + {unitCountText} - + {groupCountText} diff --git a/packages/kbn-grouping/src/components/styles.tsx b/packages/kbn-grouping/src/components/styles.tsx index 0c0e3c4bc2620..bf36850480b14 100644 --- a/packages/kbn-grouping/src/components/styles.tsx +++ b/packages/kbn-grouping/src/components/styles.tsx @@ -11,14 +11,6 @@ import { EuiButtonEmpty, EuiContextMenu, type EuiThemeComputed } from '@elastic/ import { euiStyled } from '@kbn/kibana-react-plugin/common'; import { css } from '@emotion/react'; -export const countCss = (euiTheme: EuiThemeComputed<{}>) => css` - font-size: ${euiTheme.euiFontSize.xs}; - font-weight: ${euiTheme.font.weight.semiBold}; - border-right: ${euiTheme.border.thin}; - margin-right: 16px; - padding-right: 16px; -`; - export const groupingContainerCss = (euiTheme: EuiThemeComputed<{}>) => css` .groupingAccordionForm .euiAccordion__childWrapper .euiAccordion__children { margin-left: 8px; @@ -90,7 +82,7 @@ export const StyledContextMenu = euiStyled(EuiContextMenu)` text-overflow: ellipsis; } .euiContextMenuItem { - border-bottom: ${(props) => props.theme.eui.border.thin}; + border-bottom: ${(props) => props.theme.eui.euiBorderThin}; } .euiContextMenuItem:last-child { border: none; From 6bb2a1cd1566a201e45e8353053f01898ee9e0a6 Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Tue, 17 Dec 2024 11:48:57 +0200 Subject: [PATCH 07/24] addressed comments --- .../components/page_header.tsx | 3 +- .../public/components/severity/config.tsx | 29 ++++++++++++++++--- .../cases_webhook/severity_filter.tsx | 17 ++++++++--- .../alerts_page/hooks/use_rule_stats.tsx | 2 +- .../rule_snooze/panel/base_snooze_panel.tsx | 4 ++- 5 files changed, 44 insertions(+), 11 deletions(-) diff --git a/x-pack/plugins/alerting/public/pages/maintenance_windows/components/page_header.tsx b/x-pack/plugins/alerting/public/pages/maintenance_windows/components/page_header.tsx index 513ea26bfe55b..be29ba0160356 100644 --- a/x-pack/plugins/alerting/public/pages/maintenance_windows/components/page_header.tsx +++ b/x-pack/plugins/alerting/public/pages/maintenance_windows/components/page_header.tsx @@ -73,6 +73,7 @@ export const PageHeader = React.memo( ({ showBackButton = false, title, description }) => { const { euiTheme } = useEuiTheme(); const xsFontSize = useEuiFontSize('xs').fontSize; + const lineHeight = useEuiFontSize('xs').lineHeight; const { navigateToMaintenanceWindows } = useMaintenanceWindowsNavigation(); const navigateToMaintenanceWindowsClick = useCallback(() => { @@ -87,7 +88,7 @@ export const PageHeader = React.memo( data-test-subj="link-back" css={css` font-size: ${xsFontSize}; - line-height: ${euiTheme.font.lineHeightMultiplier}; + line-height: ${lineHeight}; margin-bottom: ${euiTheme.size.s}; `} > diff --git a/x-pack/plugins/cases/public/components/severity/config.tsx b/x-pack/plugins/cases/public/components/severity/config.tsx index 3430a543ba0d9..be6e3d5552df8 100644 --- a/x-pack/plugins/cases/public/components/severity/config.tsx +++ b/x-pack/plugins/cases/public/components/severity/config.tsx @@ -32,12 +32,33 @@ export const severities = { export const SeverityHealth: React.FC = ({ severity }) => { const { euiTheme } = useEuiTheme(); + const { hasVisColorAdjustment } = euiTheme; const severityData = { - low: { color: euiTheme.colors.success, label: LOW }, - medium: { color: euiTheme.colors.warning, label: MEDIUM }, - high: { color: euiTheme.colors.accent, label: HIGH }, - critical: { color: euiTheme.colors.danger, label: CRITICAL }, + low: { + color: hasVisColorAdjustment + ? euiTheme.colors.vis.euiColorVis0 + : euiTheme.colors.vis.euiColorVisSuccess0, + label: LOW, + }, + medium: { + color: hasVisColorAdjustment + ? euiTheme.colors.vis.euiColorVis5 + : euiTheme.colors.vis.euiColorVisWarning0, + label: MEDIUM, + }, + high: { + color: hasVisColorAdjustment + ? euiTheme.colors.vis.euiColorVis7 + : euiTheme.colors.vis.euiColorVisDanger1, + label: HIGH, + }, + critical: { + color: hasVisColorAdjustment + ? euiTheme.colors.vis.euiColorVis9 + : euiTheme.colors.vis.euiColorVisDanger0, + label: CRITICAL, + }, }; const { color, label } = severityData[severity]; diff --git a/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx b/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx index f3366b95be810..5a7019aaef3ce 100644 --- a/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx +++ b/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx @@ -30,22 +30,31 @@ interface Props { export const SeverityFilter: React.FC = ({ selectedSeverity, onSeverityChange }) => { const { euiTheme } = useEuiTheme(); + const { hasVisColorAdjustment } = euiTheme; const severities = { [CaseSeverity.LOW]: { - color: euiTheme.colors.success, + color: hasVisColorAdjustment + ? euiTheme.colors.vis.euiColorVis0 + : euiTheme.colors.vis.euiColorVisSuccess0, label: i18n.SEVERITY_LOW_LABEL, }, [CaseSeverity.MEDIUM]: { - color: euiTheme.colors.warning, + color: hasVisColorAdjustment + ? euiTheme.colors.vis.euiColorVis5 + : euiTheme.colors.vis.euiColorVisWarning0, label: i18n.SEVERITY_MEDIUM_LABEL, }, [CaseSeverity.HIGH]: { - color: euiTheme.colors.accent, + color: hasVisColorAdjustment + ? euiTheme.colors.vis.euiColorVis7 + : euiTheme.colors.vis.euiColorVisDanger1, label: i18n.SEVERITY_HIGH_LABEL, }, [CaseSeverity.CRITICAL]: { - color: euiTheme.colors.danger, + color: hasVisColorAdjustment + ? euiTheme.colors.vis.euiColorVis9 + : euiTheme.colors.vis.euiColorVisDanger0, label: i18n.SEVERITY_CRITICAL_LABEL, }, }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_page/hooks/use_rule_stats.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_page/hooks/use_rule_stats.tsx index 65e89cf600c9c..440943b580c65 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_page/hooks/use_rule_stats.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_page/hooks/use_rule_stats.tsx @@ -18,7 +18,7 @@ const Stat = styled(EuiStat)` `; const Divider = styled.div` - border-right: 1px solid ${(props) => props.theme.euiTheme.colors.lightShade}; + border-right: 1px solid ${(props) => props.theme.border.thin}; height: 100%; `; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx index 859da54a845f2..59545fa6f132e 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx @@ -226,7 +226,9 @@ export const BaseSnoozePanel: React.FunctionComponent = ({ color: isActive ? euiTheme.colors.textAccent : euiTheme.colors.textSubdued, - backgroundColor: isActive ? 'rgba(240,78,152,0.2)' : euiTheme.colors.body, + backgroundColor: isActive + ? euiTheme.colors.backgroundLightAccent + : euiTheme.colors.body, }} className="euiButton euiPanel euiPanel--borderRadiusMedium euiPanel--noShadow euiPanel--noBorder" onClick={onClickEditScheduleFactory(schedule as SnoozeSchedule)} From 7c644ef65061eeea045602583e44bdec43dfcdde Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Tue, 17 Dec 2024 15:16:05 +0200 Subject: [PATCH 08/24] small changes --- .../rule_form/src/rule_actions/rule_actions_item.tsx | 2 +- .../application/sections/alerts_page/hooks/use_rule_stats.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx b/packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx index 94773a4c361b9..af3f98dc51277 100644 --- a/packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx +++ b/packages/response-ops/rule_form/src/rule_actions/rule_actions_item.tsx @@ -691,7 +691,7 @@ export const RuleActionsItem = (props: RuleActionsItemProps) => { } buttonContentClassName="eui-fullWidth" buttonContent={ - + {accordionIcon} {connectorTitle} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_page/hooks/use_rule_stats.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_page/hooks/use_rule_stats.tsx index 440943b580c65..e16dcbb05d8c3 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_page/hooks/use_rule_stats.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_page/hooks/use_rule_stats.tsx @@ -18,7 +18,7 @@ const Stat = styled(EuiStat)` `; const Divider = styled.div` - border-right: 1px solid ${(props) => props.theme.border.thin}; + border-right: ${(props) => props.theme.euiTheme.border.thin}; height: 100%; `; From e2aebb6c2fb02d9c177f9c01c2c655dbc3ddb687 Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Wed, 18 Dec 2024 11:34:40 +0200 Subject: [PATCH 09/24] fixed check types and changed the warning colors to pull from euiTheme directly --- .../rule_actions_system_actions_item.tsx | 2 +- .../connector_rules_list.tsx | 6 ++-- .../sections/rule_details/components/rule.tsx | 6 ++-- .../rule_execution_status_filter.tsx | 2 +- .../rule_last_run_outcome_filter.tsx | 2 +- .../components/rules_list_statuses.tsx | 19 +++++----- .../rules_list_table_status_cell.tsx | 4 ++- .../common/lib/rule_status_helper.test.ts | 35 ++++++++++++------- .../public/common/lib/rule_status_helpers.ts | 31 +++++++++------- 9 files changed, 65 insertions(+), 42 deletions(-) diff --git a/packages/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx b/packages/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx index a545956e0232f..01a4385a6bfde 100644 --- a/packages/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx +++ b/packages/response-ops/rule_form/src/rule_actions/rule_actions_system_actions_item.tsx @@ -267,7 +267,7 @@ export const RuleActionsSystemActionsItem = (props: RuleActionsSystemActionsItem buttonContent={ diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_rules_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_rules_list.tsx index 719cd0fef2377..93a635ddc5bf4 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_rules_list.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_rules_list.tsx @@ -18,6 +18,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiFieldSearch, + useEuiTheme, } from '@elastic/eui'; import { fromKueryExpression } from '@kbn/es-query'; import { @@ -42,6 +43,7 @@ export interface ConnectorRulesListProps { export const ConnectorRulesList = (props: ConnectorRulesListProps) => { const { connector } = props; + const { euiTheme } = useEuiTheme(); const { application: { getUrlForApp }, @@ -192,7 +194,7 @@ export const ConnectorRulesList = (props: ConnectorRulesListProps) => { render: (_, rule: Rule) => { return ( rule.lastRun && ( - + {rulesLastRunOutcomeTranslationMapping[rule.lastRun.outcome]} ) @@ -200,7 +202,7 @@ export const ConnectorRulesList = (props: ConnectorRulesListProps) => { }, }, ]; - }, [ruleTypesState, tagPopoverOpenId, getUrlForApp, onSetTagPopoverOpenId]); + }, [ruleTypesState, tagPopoverOpenId, getUrlForApp, onSetTagPopoverOpenId, euiTheme]); const onChange = useCallback((e: ChangeEvent) => { setSearchText(e.target.value); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule.tsx index 593e0a989b5f3..fb5e6dab336ca 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule.tsx @@ -7,7 +7,7 @@ import React, { lazy, useCallback, useMemo } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiTabbedContent } from '@elastic/eui'; +import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiTabbedContent, useEuiTheme } from '@elastic/eui'; import { AlertStatusValues } from '@kbn/alerting-plugin/common'; import { ALERT_RULE_UUID } from '@kbn/rule-data-utils'; import { ALERT_TABLE_GENERIC_CONFIG_ID } from '../../../constants'; @@ -75,6 +75,8 @@ export function RuleComponent({ // eslint-disable-next-line react-hooks/exhaustive-deps const lastReloadRequestTime = useMemo(() => new Date().getTime(), [refreshToken]); + const { euiTheme } = useEuiTheme(); + const alerts = Object.entries(ruleSummary.alerts) .map(([alertId, alert]) => alertToListItem(durationEpoch, alertId, alert)) .sort((leftAlert, rightAlert) => leftAlert.sortPriority - rightAlert.sortPriority); @@ -89,7 +91,7 @@ export function RuleComponent({ [muteAlertInstance, requestRefresh, rule, unmuteAlertInstance] ); - const healthColor = getRuleHealthColor(rule); + const healthColor = getRuleHealthColor(rule, euiTheme); const statusMessage = getRuleStatusMessage({ rule, licenseErrorText: ALERT_STATUS_LICENSE_ERROR, diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_execution_status_filter.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_execution_status_filter.tsx index 84c02de34d339..2d0bd99f8ea84 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_execution_status_filter.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_execution_status_filter.tsx @@ -77,7 +77,7 @@ export const RuleExecutionStatusFilter: React.FunctionComponent {sortedRuleExecutionStatusValues.map((item: RuleExecutionStatuses) => { - const healthColor = getExecutionStatusHealthColor(item); + const healthColor = getExecutionStatusHealthColor(item, euiTheme); return ( {sortedRuleLastRunOutcomeValues.map((item: RuleLastRunOutcomes) => { - const healthColor = getOutcomeHealthColor(item); + const healthColor = getOutcomeHealthColor(item, euiTheme); return ( { + const { euiTheme } = useEuiTheme(); const { rulesStatuses, rulesLastRunOutcomes } = props; const isRuleUsingExecutionStatus = getIsExperimentalFeatureEnabled('ruleUseExecutionStatus'); @@ -35,27 +36,27 @@ export const RulesListStatuses = (props: RulesListStatusesProps) => { return ( - + {RULE_STATUS_ACTIVE(rulesStatuses.active)} - + {RULE_STATUS_ERROR(rulesStatuses.error)} - + {RULE_STATUS_WARNING(rulesStatuses.warning)} - + {RULE_STATUS_OK(rulesStatuses.ok)} - + {RULE_STATUS_PENDING(rulesStatuses.pending)} @@ -71,17 +72,17 @@ export const RulesListStatuses = (props: RulesListStatusesProps) => { return ( - + {RULE_LAST_RUN_OUTCOME_SUCCEEDED_DESCRIPTION(rulesLastRunOutcomes.succeeded)} - + {RULE_LAST_RUN_OUTCOME_FAILED_DESCRIPTION(rulesLastRunOutcomes.failed)} - + {RULE_LAST_RUN_OUTCOME_WARNING_DESCRIPTION(rulesLastRunOutcomes.warning)} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table_status_cell.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table_status_cell.tsx index 759e16c7f696d..4dbd49078a65d 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table_status_cell.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table_status_cell.tsx @@ -14,6 +14,7 @@ import { EuiHealth, EuiToolTip, EuiStat, + useEuiTheme, } from '@elastic/eui'; import { RuleTableItem } from '../../../../types'; import { @@ -33,11 +34,12 @@ export interface RulesListTableStatusCellProps { } export const RulesListTableStatusCell = (props: RulesListTableStatusCellProps) => { + const { euiTheme } = useEuiTheme(); const { rule, onManageLicenseClick } = props; const { lastRun } = rule; const isLicenseError = getIsLicenseError(rule); - const healthColor = getRuleHealthColor(rule); + const healthColor = getRuleHealthColor(rule, euiTheme); const statusMessage = getRuleStatusMessage({ rule, licenseErrorText: ALERT_STATUS_LICENSE_ERROR, diff --git a/x-pack/plugins/triggers_actions_ui/public/common/lib/rule_status_helper.test.ts b/x-pack/plugins/triggers_actions_ui/public/common/lib/rule_status_helper.test.ts index b2c4bc79ea78d..506a96db21074 100644 --- a/x-pack/plugins/triggers_actions_ui/public/common/lib/rule_status_helper.test.ts +++ b/x-pack/plugins/triggers_actions_ui/public/common/lib/rule_status_helper.test.ts @@ -6,6 +6,7 @@ */ import { getRuleHealthColor, getRuleStatusMessage } from './rule_status_helpers'; +import { EuiThemeComputed } from '@elastic/eui'; import { RuleTableItem } from '../../types'; import { getIsExperimentalFeatureEnabled } from '../get_experimental_features'; @@ -19,6 +20,16 @@ jest.mock('../get_experimental_features', () => ({ getIsExperimentalFeatureEnabled: jest.fn(), })); +const mockTheme = { + colors: { + success: '008A5E', + warning: '#FACB3D', + danger: '#C61E25', + primary: '#0B64DD', + accent: '#BC1E70', + }, +} as EuiThemeComputed; + const mockRule = { id: '1', enabled: true, @@ -70,33 +81,33 @@ beforeEach(() => { describe('getRuleHealthColor', () => { it('should return the correct color for successful rule', () => { - let color = getRuleHealthColor(mockRule); - expect(color).toEqual('success'); + let color = getRuleHealthColor(mockRule, mockTheme); + expect(color).toEqual(mockTheme.colors.success); (getIsExperimentalFeatureEnabled as jest.Mock).mockImplementation(() => true); - color = getRuleHealthColor(mockRule); - expect(color).toEqual('success'); + color = getRuleHealthColor(mockRule, mockTheme); + expect(color).toEqual(mockTheme.colors.success); }); it('should return the correct color for warning rule', () => { - let color = getRuleHealthColor(warningRule); - expect(color).toEqual('warning'); + let color = getRuleHealthColor(warningRule, mockTheme); + expect(color).toEqual(mockTheme.colors.warning); (getIsExperimentalFeatureEnabled as jest.Mock).mockImplementation(() => true); - color = getRuleHealthColor(warningRule); - expect(color).toEqual('warning'); + color = getRuleHealthColor(warningRule, mockTheme); + expect(color).toEqual(mockTheme.colors.warning); }); it('should return the correct color for failed rule', () => { - let color = getRuleHealthColor(failedRule); - expect(color).toEqual('danger'); + let color = getRuleHealthColor(failedRule, mockTheme); + expect(color).toEqual(mockTheme.colors.danger); (getIsExperimentalFeatureEnabled as jest.Mock).mockImplementation(() => true); - color = getRuleHealthColor(failedRule); - expect(color).toEqual('danger'); + color = getRuleHealthColor(failedRule, mockTheme); + expect(color).toEqual(mockTheme.colors.danger); }); }); diff --git a/x-pack/plugins/triggers_actions_ui/public/common/lib/rule_status_helpers.ts b/x-pack/plugins/triggers_actions_ui/public/common/lib/rule_status_helpers.ts index ceb83870ca724..fc5a7fec41943 100644 --- a/x-pack/plugins/triggers_actions_ui/public/common/lib/rule_status_helpers.ts +++ b/x-pack/plugins/triggers_actions_ui/public/common/lib/rule_status_helpers.ts @@ -9,45 +9,50 @@ import { RuleExecutionStatuses, RuleExecutionStatusErrorReasons, } from '@kbn/alerting-plugin/common'; +import { type EuiThemeComputed } from '@elastic/eui'; import { getIsExperimentalFeatureEnabled } from '../get_experimental_features'; import { Rule } from '../../types'; -export const getOutcomeHealthColor = (status: RuleLastRunOutcomes) => { +export const getOutcomeHealthColor = (status: RuleLastRunOutcomes, euiTheme: EuiThemeComputed) => { switch (status) { case 'succeeded': - return 'success'; + return euiTheme.colors.success; case 'failed': - return 'danger'; + return euiTheme.colors.danger; case 'warning': - return 'warning'; + return euiTheme.colors.warning; default: return 'subdued'; } }; -export const getExecutionStatusHealthColor = (status: RuleExecutionStatuses) => { +export const getExecutionStatusHealthColor = ( + status: RuleExecutionStatuses, + euiTheme: EuiThemeComputed +) => { switch (status) { case 'active': - return 'success'; + return euiTheme.colors.success; case 'error': - return 'danger'; + return euiTheme.colors.danger; case 'ok': - return 'primary'; + return euiTheme.colors.primary; case 'pending': - return 'accent'; + return euiTheme.colors.accent; case 'warning': - return 'warning'; + return euiTheme.colors.warning; default: return 'subdued'; } }; -export const getRuleHealthColor = (rule: Rule) => { +export const getRuleHealthColor = (rule: Rule, euiTheme: EuiThemeComputed) => { + console.log('colors: ', euiTheme.colors); const isRuleUsingExecutionStatus = getIsExperimentalFeatureEnabled('ruleUseExecutionStatus'); if (isRuleUsingExecutionStatus) { - return getExecutionStatusHealthColor(rule.executionStatus.status); + return getExecutionStatusHealthColor(rule.executionStatus.status, euiTheme); } - return (rule.lastRun && getOutcomeHealthColor(rule.lastRun.outcome)) || 'subdued'; + return (rule.lastRun && getOutcomeHealthColor(rule.lastRun.outcome, euiTheme)) || 'subdued'; }; export const getIsLicenseError = (rule: Rule) => { From c0ccec4decb79765790911268e4186c82726247a Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Wed, 18 Dec 2024 11:53:00 +0200 Subject: [PATCH 10/24] changed severity color values --- .../cases/public/components/severity/config.tsx | 17 ++++------------- .../cases_webhook/severity_filter.tsx | 17 ++++------------- 2 files changed, 8 insertions(+), 26 deletions(-) diff --git a/x-pack/plugins/cases/public/components/severity/config.tsx b/x-pack/plugins/cases/public/components/severity/config.tsx index be6e3d5552df8..efb4c1ad9d358 100644 --- a/x-pack/plugins/cases/public/components/severity/config.tsx +++ b/x-pack/plugins/cases/public/components/severity/config.tsx @@ -32,31 +32,22 @@ export const severities = { export const SeverityHealth: React.FC = ({ severity }) => { const { euiTheme } = useEuiTheme(); - const { hasVisColorAdjustment } = euiTheme; const severityData = { low: { - color: hasVisColorAdjustment - ? euiTheme.colors.vis.euiColorVis0 - : euiTheme.colors.vis.euiColorVisSuccess0, + color: euiTheme.flags.hasVisColorAdjustment ? '#54B399' : '#CAD3E2', label: LOW, }, medium: { - color: hasVisColorAdjustment - ? euiTheme.colors.vis.euiColorVis5 - : euiTheme.colors.vis.euiColorVisWarning0, + color: euiTheme.flags.hasVisColorAdjustment ? '#D6BF57' : '#FCD883', label: MEDIUM, }, high: { - color: hasVisColorAdjustment - ? euiTheme.colors.vis.euiColorVis7 - : euiTheme.colors.vis.euiColorVisDanger1, + color: euiTheme.flags.hasVisColorAdjustment ? '#DA8B45' : '#FC9188', label: HIGH, }, critical: { - color: hasVisColorAdjustment - ? euiTheme.colors.vis.euiColorVis9 - : euiTheme.colors.vis.euiColorVisDanger0, + color: euiTheme.flags.hasVisColorAdjustment ? '#E7664C' : '#C61E25', label: CRITICAL, }, }; diff --git a/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx b/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx index 5a7019aaef3ce..e463574cb2b6b 100644 --- a/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx +++ b/x-pack/plugins/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx @@ -30,31 +30,22 @@ interface Props { export const SeverityFilter: React.FC = ({ selectedSeverity, onSeverityChange }) => { const { euiTheme } = useEuiTheme(); - const { hasVisColorAdjustment } = euiTheme; const severities = { [CaseSeverity.LOW]: { - color: hasVisColorAdjustment - ? euiTheme.colors.vis.euiColorVis0 - : euiTheme.colors.vis.euiColorVisSuccess0, + color: euiTheme.flags.hasVisColorAdjustment ? '#54B399' : '#CAD3E2', label: i18n.SEVERITY_LOW_LABEL, }, [CaseSeverity.MEDIUM]: { - color: hasVisColorAdjustment - ? euiTheme.colors.vis.euiColorVis5 - : euiTheme.colors.vis.euiColorVisWarning0, + color: euiTheme.flags.hasVisColorAdjustment ? '#D6BF57' : '#FCD883', label: i18n.SEVERITY_MEDIUM_LABEL, }, [CaseSeverity.HIGH]: { - color: hasVisColorAdjustment - ? euiTheme.colors.vis.euiColorVis7 - : euiTheme.colors.vis.euiColorVisDanger1, + color: euiTheme.flags.hasVisColorAdjustment ? '#DA8B45' : '#FC9188', label: i18n.SEVERITY_HIGH_LABEL, }, [CaseSeverity.CRITICAL]: { - color: hasVisColorAdjustment - ? euiTheme.colors.vis.euiColorVis9 - : euiTheme.colors.vis.euiColorVisDanger0, + color: euiTheme.flags.hasVisColorAdjustment ? '#E7664C' : '#C61E25', label: i18n.SEVERITY_CRITICAL_LABEL, }, }; From a155c28196f4cbfb42c22f682b4c18932b3809c2 Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Wed, 18 Dec 2024 11:59:21 +0200 Subject: [PATCH 11/24] fixed check types --- .../common/components/event_log/event_log_list_status.tsx | 2 +- .../public/common/lib/rule_status_helpers.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx index fcace082dad84..53862a17df04f 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/event_log/event_log_list_status.tsx @@ -43,7 +43,7 @@ export const EventLogListStatus = (props: EventLogListStatusProps) => { const STATUS_TO_COLOR: Record = { success: euiTheme.colors.success, failure: euiTheme.colors.danger, - unknown: euiTheme.colors.gray, + unknown: euiTheme.colors.mediumShade, warning: euiTheme.colors.warning, }; const color = STATUS_TO_COLOR[status] || 'gray'; diff --git a/x-pack/plugins/triggers_actions_ui/public/common/lib/rule_status_helpers.ts b/x-pack/plugins/triggers_actions_ui/public/common/lib/rule_status_helpers.ts index fc5a7fec41943..26335b41cf5cb 100644 --- a/x-pack/plugins/triggers_actions_ui/public/common/lib/rule_status_helpers.ts +++ b/x-pack/plugins/triggers_actions_ui/public/common/lib/rule_status_helpers.ts @@ -47,7 +47,6 @@ export const getExecutionStatusHealthColor = ( }; export const getRuleHealthColor = (rule: Rule, euiTheme: EuiThemeComputed) => { - console.log('colors: ', euiTheme.colors); const isRuleUsingExecutionStatus = getIsExperimentalFeatureEnabled('ruleUseExecutionStatus'); if (isRuleUsingExecutionStatus) { return getExecutionStatusHealthColor(rule.executionStatus.status, euiTheme); From e5c1b96e5bd988d131d878fea17cd187548a9a53 Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Wed, 18 Dec 2024 14:48:52 +0200 Subject: [PATCH 12/24] fixes for the failes jest tests --- .../src/components/group_selector/index.test.tsx | 5 +++++ .../kbn-grouping/src/components/group_selector/index.tsx | 6 +++++- packages/kbn-grouping/src/components/styles.tsx | 2 +- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/kbn-grouping/src/components/group_selector/index.test.tsx b/packages/kbn-grouping/src/components/group_selector/index.test.tsx index 36ad1e96adcd7..83c40e6fc405f 100644 --- a/packages/kbn-grouping/src/components/group_selector/index.test.tsx +++ b/packages/kbn-grouping/src/components/group_selector/index.test.tsx @@ -65,6 +65,11 @@ const testProps = { }, ], title: 'Group alerts by', + euiTheme: { + border: { + thin: '1px solid #E3E8F2', + }, + }, }; describe('group selector', () => { beforeEach(() => { diff --git a/packages/kbn-grouping/src/components/group_selector/index.tsx b/packages/kbn-grouping/src/components/group_selector/index.tsx index b1bf17c26115a..82f21da011749 100644 --- a/packages/kbn-grouping/src/components/group_selector/index.tsx +++ b/packages/kbn-grouping/src/components/group_selector/index.tsx @@ -7,9 +7,10 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import type { +import { EuiContextMenuPanelDescriptor, EuiContextMenuPanelItemDescriptor, + useEuiTheme, } from '@elastic/eui'; import { EuiPopover } from '@elastic/eui'; import React, { useCallback, useMemo, useState } from 'react'; @@ -44,6 +45,8 @@ const GroupSelectorComponent = ({ [groupsSelected] ); + const { euiTheme } = useEuiTheme(); + const panels: EuiContextMenuPanelDescriptor[] = useMemo(() => { const isOptionDisabled = (key?: string) => { // Do not disable when maxGroupingLevels is 1 to allow toggling between groups @@ -147,6 +150,7 @@ const GroupSelectorComponent = ({ data-test-subj="groupByContextMenu" initialPanelId="firstPanel" panels={panels} + euiTheme={euiTheme} /> ); diff --git a/packages/kbn-grouping/src/components/styles.tsx b/packages/kbn-grouping/src/components/styles.tsx index bf36850480b14..ba058f5def2be 100644 --- a/packages/kbn-grouping/src/components/styles.tsx +++ b/packages/kbn-grouping/src/components/styles.tsx @@ -82,7 +82,7 @@ export const StyledContextMenu = euiStyled(EuiContextMenu)` text-overflow: ellipsis; } .euiContextMenuItem { - border-bottom: ${(props) => props.theme.eui.euiBorderThin}; + border-bottom: ${(props) => props.euiTheme.border.thin}; } .euiContextMenuItem:last-child { border: none; From 04ae65ef4b67e4296dcd14bedda72da7f6546895 Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Wed, 18 Dec 2024 15:06:45 +0200 Subject: [PATCH 13/24] small fix --- packages/kbn-grouping/src/components/styles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/kbn-grouping/src/components/styles.tsx b/packages/kbn-grouping/src/components/styles.tsx index ba058f5def2be..9d19fee6ed05d 100644 --- a/packages/kbn-grouping/src/components/styles.tsx +++ b/packages/kbn-grouping/src/components/styles.tsx @@ -75,7 +75,7 @@ export const groupingContainerCssLevel = (euiTheme: EuiThemeComputed<{}>) => css } `; -export const StyledContextMenu = euiStyled(EuiContextMenu)` +export const StyledContextMenu = euiStyled(EuiContextMenu)<{ euiTheme: EuiThemeComputed }>` width: 250px; & .euiContextMenuItem__text { overflow: hidden; From 1f4b4075ae3da602575a105eed411cf61c98b343 Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Wed, 18 Dec 2024 17:24:50 +0200 Subject: [PATCH 14/24] added missing data-test-subj to the severity options --- x-pack/plugins/cases/public/components/severity/config.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/cases/public/components/severity/config.tsx b/x-pack/plugins/cases/public/components/severity/config.tsx index efb4c1ad9d358..20a94087f18be 100644 --- a/x-pack/plugins/cases/public/components/severity/config.tsx +++ b/x-pack/plugins/cases/public/components/severity/config.tsx @@ -54,6 +54,10 @@ export const SeverityHealth: React.FC = ({ severity }) => { const { color, label } = severityData[severity]; - return {label}; + return ( + + {label} + + ); }; SeverityHealth.displayName = 'SeverityHealth'; From dc3c3fc1c4c121ef1b6c070246f57a5d50576ef2 Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Wed, 8 Jan 2025 15:18:25 +0200 Subject: [PATCH 15/24] fixed check type failure --- .../similar_cases/use_similar_cases_columns.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/x-pack/platform/plugins/shared/cases/public/components/similar_cases/use_similar_cases_columns.tsx b/x-pack/platform/plugins/shared/cases/public/components/similar_cases/use_similar_cases_columns.tsx index 54ad38363f14e..fe6075ca06cb9 100644 --- a/x-pack/platform/plugins/shared/cases/public/components/similar_cases/use_similar_cases_columns.tsx +++ b/x-pack/platform/plugins/shared/cases/public/components/similar_cases/use_similar_cases_columns.tsx @@ -12,15 +12,14 @@ import type { EuiTableComputedColumnType, EuiTableFieldDataColumnType, } from '@elastic/eui'; -import { EuiBadgeGroup, EuiBadge, EuiHealth, EuiToolTip } from '@elastic/eui'; +import { EuiBadgeGroup, EuiBadge, EuiToolTip } from '@elastic/eui'; import { Status } from '@kbn/cases-components/src/status/status'; -import { CaseSeverity } from '../../../common/types/domain'; import type { CaseUI, SimilarCaseUI } from '../../../common/ui/types'; import { getEmptyCellValue } from '../empty_value'; import { CaseDetailsLink } from '../links'; import { TruncatedText } from '../truncated_text'; -import { severities } from '../severity/config'; +import { SeverityHealth } from '../severity/config'; import { useCasesColumnsConfiguration } from '../all_cases/use_cases_columns_configuration'; import * as i18n from './translations'; @@ -157,14 +156,11 @@ export const useSimilarCasesColumns = (): UseSimilarCasesColumnsReturnValue => { sortable: false, render: (severity: CaseUI['severity']) => { if (severity != null) { - const severityData = severities[severity ?? CaseSeverity.LOW]; return ( - - {severityData.label} - + severity={severity} + /> ); } return getEmptyCellValue(); From 0fc2725d887977032cfefd29fa5b828a74fe116c Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Fri, 10 Jan 2025 15:41:30 +0200 Subject: [PATCH 16/24] changed button to EuiButton --- .../rule_snooze/panel/base_snooze_panel.tsx | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx index 59545fa6f132e..7eaf004acb36a 100644 --- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx +++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx @@ -216,35 +216,30 @@ export const BaseSnoozePanel: React.FunctionComponent = ({ const isActive = schedule.id && activeSnoozes.includes(schedule.id); return ( - + ); })} From 1ed6fe81d6b5be10d31d84d4ed961c406baf3fdb Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Fri, 10 Jan 2025 16:23:33 +0200 Subject: [PATCH 17/24] fixed check type --- .../components/rule_snooze/panel/base_snooze_panel.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx index 7eaf004acb36a..ded8bbcee6665 100644 --- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx +++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx @@ -218,16 +218,13 @@ export const BaseSnoozePanel: React.FunctionComponent = ({ From 06e4b1903dd11636d2e31f7440c879ab79f2ca94 Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Fri, 10 Jan 2025 17:07:45 +0200 Subject: [PATCH 18/24] fixed check type test --- .../components/rule_snooze/panel/base_snooze_panel.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx index ded8bbcee6665..db61f3353be1e 100644 --- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx +++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/panel/base_snooze_panel.tsx @@ -218,13 +218,18 @@ export const BaseSnoozePanel: React.FunctionComponent = ({ From 77906899fbec635c9ebe736c3ea676f95f1aa453 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Mon, 13 Jan 2025 09:42:21 +0000 Subject: [PATCH 19/24] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- .../shared/response-ops/rule_form/src/rule_page/rule_page.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page.tsx index 745db08556e39..a7280d184f8bb 100644 --- a/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page.tsx +++ b/src/platform/packages/shared/response-ops/rule_form/src/rule_page/rule_page.tsx @@ -16,7 +16,6 @@ import { EuiPageTemplate, EuiSpacer, EuiSteps, - EuiStepsProps, } from '@elastic/eui'; import { checkActionFormActionTypeEnabled } from '@kbn/alerts-ui-shared'; import React, { useCallback, useMemo, useState } from 'react'; From fa1537cbb7e1dc393e36ff448adef3492f3c0af6 Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Tue, 14 Jan 2025 13:55:59 +0200 Subject: [PATCH 20/24] addressed comments --- .../public/components/severity/config.tsx | 27 ++++++++++++------- .../cases_webhook/severity_filter.tsx | 23 +++------------- 2 files changed, 22 insertions(+), 28 deletions(-) diff --git a/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx b/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx index 20a94087f18be..9decc364318fe 100644 --- a/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx +++ b/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx @@ -7,7 +7,7 @@ import React from 'react'; -import { useEuiTheme, EuiHealth } from '@elastic/eui'; +import { useEuiTheme, EuiHealth, type EuiThemeComputed } from '@elastic/eui'; import { CaseSeverity } from '../../../common/types/domain'; import { CRITICAL, HIGH, LOW, MEDIUM } from './translations'; @@ -30,27 +30,36 @@ export const severities = { }, }; -export const SeverityHealth: React.FC = ({ severity }) => { - const { euiTheme } = useEuiTheme(); - - const severityData = { +export const getSeverityData = (euiTheme: EuiThemeComputed) => { + const isAmsterdam = euiTheme.flags.hasVisColorAdjustment; + return { low: { - color: euiTheme.flags.hasVisColorAdjustment ? '#54B399' : '#CAD3E2', + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.vis.euiColorSeverity5, label: LOW, }, medium: { - color: euiTheme.flags.hasVisColorAdjustment ? '#D6BF57' : '#FCD883', + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorSeverity7, label: MEDIUM, }, high: { - color: euiTheme.flags.hasVisColorAdjustment ? '#DA8B45' : '#FC9188', + color: isAmsterdam + ? euiTheme.colors.vis.euiColorVis7 + : euiTheme.colors.vis.euiColorSeverity10, label: HIGH, }, critical: { - color: euiTheme.flags.hasVisColorAdjustment ? '#E7664C' : '#C61E25', + color: isAmsterdam + ? euiTheme.colors.vis.euiColorVis9 + : euiTheme.colors.vis.euiColorSeverity14, label: CRITICAL, }, }; +}; + +export const SeverityHealth: React.FC = ({ severity }) => { + const { euiTheme } = useEuiTheme(); + + const severityData = getSeverityData(euiTheme); const { color, label } = severityData[severity]; diff --git a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx index e463574cb2b6b..92c2dc7c22aed 100644 --- a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx +++ b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx @@ -14,7 +14,8 @@ import { EuiSuperSelectOption, useEuiTheme, } from '@elastic/eui'; -import * as i18n from './translations'; + +import { getSeverityData } from '@kbn/cases-plugin/public/components/severity/config'; export enum CaseSeverity { LOW = 'low', @@ -31,24 +32,8 @@ interface Props { export const SeverityFilter: React.FC = ({ selectedSeverity, onSeverityChange }) => { const { euiTheme } = useEuiTheme(); - const severities = { - [CaseSeverity.LOW]: { - color: euiTheme.flags.hasVisColorAdjustment ? '#54B399' : '#CAD3E2', - label: i18n.SEVERITY_LOW_LABEL, - }, - [CaseSeverity.MEDIUM]: { - color: euiTheme.flags.hasVisColorAdjustment ? '#D6BF57' : '#FCD883', - label: i18n.SEVERITY_MEDIUM_LABEL, - }, - [CaseSeverity.HIGH]: { - color: euiTheme.flags.hasVisColorAdjustment ? '#DA8B45' : '#FC9188', - label: i18n.SEVERITY_HIGH_LABEL, - }, - [CaseSeverity.CRITICAL]: { - color: euiTheme.flags.hasVisColorAdjustment ? '#E7664C' : '#C61E25', - label: i18n.SEVERITY_CRITICAL_LABEL, - }, - }; + const severities = getSeverityData(euiTheme); + const caseSeverities = Object.keys(severities) as CaseSeverity[]; const options: Array> = caseSeverities.map((severity) => { const severityData = severities[severity]; From a2f0cb16b49768207cd35f7070a17483fbd7f9c4 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 14 Jan 2025 12:05:07 +0000 Subject: [PATCH 21/24] [CI] Auto-commit changed files from 'node scripts/styled_components_mapping' --- x-pack/platform/plugins/shared/stack_connectors/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/x-pack/platform/plugins/shared/stack_connectors/tsconfig.json b/x-pack/platform/plugins/shared/stack_connectors/tsconfig.json index 18d8722b51abd..dd8b994bf5c9e 100644 --- a/x-pack/platform/plugins/shared/stack_connectors/tsconfig.json +++ b/x-pack/platform/plugins/shared/stack_connectors/tsconfig.json @@ -44,6 +44,7 @@ "@kbn/response-ops-rule-form", "@kbn/inference-endpoint-ui-common", "@kbn/alerts-ui-shared", + "@kbn/cases-plugin", ], "exclude": [ "target/**/*", From caa5e1baf85b35473c124c540f25319d2a3c4c9c Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Tue, 14 Jan 2025 14:08:08 +0200 Subject: [PATCH 22/24] revert prev changes --- .../public/components/severity/config.tsx | 12 +++------ .../cases_webhook/severity_filter.tsx | 27 ++++++++++++++++--- 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx b/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx index 9decc364318fe..5c869385f2a73 100644 --- a/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx +++ b/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx @@ -30,9 +30,11 @@ export const severities = { }, }; -export const getSeverityData = (euiTheme: EuiThemeComputed) => { +export const SeverityHealth: React.FC = ({ severity }) => { + const { euiTheme } = useEuiTheme(); const isAmsterdam = euiTheme.flags.hasVisColorAdjustment; - return { + + const severityData = { low: { color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.vis.euiColorSeverity5, label: LOW, @@ -54,12 +56,6 @@ export const getSeverityData = (euiTheme: EuiThemeComputed) => { label: CRITICAL, }, }; -}; - -export const SeverityHealth: React.FC = ({ severity }) => { - const { euiTheme } = useEuiTheme(); - - const severityData = getSeverityData(euiTheme); const { color, label } = severityData[severity]; diff --git a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx index 92c2dc7c22aed..aefdd895a5b02 100644 --- a/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx +++ b/x-pack/platform/plugins/shared/stack_connectors/public/connector_types/cases_webhook/severity_filter.tsx @@ -15,7 +15,7 @@ import { useEuiTheme, } from '@elastic/eui'; -import { getSeverityData } from '@kbn/cases-plugin/public/components/severity/config'; +import * as i18n from './translations'; export enum CaseSeverity { LOW = 'low', @@ -31,9 +31,30 @@ interface Props { export const SeverityFilter: React.FC = ({ selectedSeverity, onSeverityChange }) => { const { euiTheme } = useEuiTheme(); + const isAmsterdam = euiTheme.flags.hasVisColorAdjustment; - const severities = getSeverityData(euiTheme); - + const severities = { + [CaseSeverity.LOW]: { + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis0 : euiTheme.colors.vis.euiColorSeverity5, + label: i18n.SEVERITY_LOW_LABEL, + }, + [CaseSeverity.MEDIUM]: { + color: isAmsterdam ? euiTheme.colors.vis.euiColorVis5 : euiTheme.colors.vis.euiColorSeverity7, + label: i18n.SEVERITY_MEDIUM_LABEL, + }, + [CaseSeverity.HIGH]: { + color: isAmsterdam + ? euiTheme.colors.vis.euiColorVis7 + : euiTheme.colors.vis.euiColorSeverity10, + label: i18n.SEVERITY_HIGH_LABEL, + }, + [CaseSeverity.CRITICAL]: { + color: isAmsterdam + ? euiTheme.colors.vis.euiColorVis9 + : euiTheme.colors.vis.euiColorSeverity14, + label: i18n.SEVERITY_CRITICAL_LABEL, + }, + }; const caseSeverities = Object.keys(severities) as CaseSeverity[]; const options: Array> = caseSeverities.map((severity) => { const severityData = severities[severity]; From 974f34c61440d97c2f6948173862368d717b48a7 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 14 Jan 2025 12:18:52 +0000 Subject: [PATCH 23/24] [CI] Auto-commit changed files from 'node scripts/styled_components_mapping' --- x-pack/platform/plugins/shared/stack_connectors/tsconfig.json | 1 - 1 file changed, 1 deletion(-) diff --git a/x-pack/platform/plugins/shared/stack_connectors/tsconfig.json b/x-pack/platform/plugins/shared/stack_connectors/tsconfig.json index dd8b994bf5c9e..18d8722b51abd 100644 --- a/x-pack/platform/plugins/shared/stack_connectors/tsconfig.json +++ b/x-pack/platform/plugins/shared/stack_connectors/tsconfig.json @@ -44,7 +44,6 @@ "@kbn/response-ops-rule-form", "@kbn/inference-endpoint-ui-common", "@kbn/alerts-ui-shared", - "@kbn/cases-plugin", ], "exclude": [ "target/**/*", From b0df5e363af159e37bee3d56fc42aa1178906913 Mon Sep 17 00:00:00 2001 From: Georgiana-Andreea Onoleata Date: Tue, 14 Jan 2025 14:34:06 +0200 Subject: [PATCH 24/24] removed unused import --- .../plugins/shared/cases/public/components/severity/config.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx b/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx index 5c869385f2a73..dd95baa5668e3 100644 --- a/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx +++ b/x-pack/platform/plugins/shared/cases/public/components/severity/config.tsx @@ -7,7 +7,7 @@ import React from 'react'; -import { useEuiTheme, EuiHealth, type EuiThemeComputed } from '@elastic/eui'; +import { useEuiTheme, EuiHealth } from '@elastic/eui'; import { CaseSeverity } from '../../../common/types/domain'; import { CRITICAL, HIGH, LOW, MEDIUM } from './translations';