From 606c6958664b30805a022b3a46e01f38c466f611 Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Tue, 25 Jun 2024 09:02:58 -0700 Subject: [PATCH] Convert `styled-component` usage to Emotion vanilla CSS (#186849) ## Summary Follow up to https://github.com/elastic/kibana/pull/186324/commits/9125e17a7f1f042e1f0a18b9788ba19f9285ff70 - move away from using `euiStyled` (which throws errors if plugin(s) using the component aren't wrapped in `KibanaStyledComponentsThemeProvider`. See EUI's Emotion FAQ for more information: https://github.com/elastic/eui/discussions/6828 ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - ~[ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/))~ - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --- .../action_notify_when.tsx | 29 ++++++++++++------- .../action_type_form.test.tsx | 29 +++++++++---------- 2 files changed, 31 insertions(+), 27 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_notify_when.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_notify_when.tsx index c1a34bdd146e5..ce9ddfcad2be1 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_notify_when.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_notify_when.tsx @@ -7,9 +7,9 @@ import { RuleAction, RuleNotifyWhen } from '@kbn/alerting-plugin/common'; import React, { useState, useEffect, useCallback, useMemo } from 'react'; +import { css } from '@emotion/css'; // We can't use @emotion/react - this component gets used with plugins that use both styled-components and Emotion import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; import { EuiFlexGroup, EuiFlexItem, @@ -23,6 +23,7 @@ import { EuiButtonEmpty, EuiContextMenuPanel, EuiContextMenuItem, + useEuiTheme, } from '@elastic/eui'; import { some, filter, map } from 'fp-ts/lib/Option'; import { pipe } from 'fp-ts/lib/pipeable'; @@ -242,28 +243,39 @@ export const ActionNotifyWhen = ({ [onSummaryChange, selectedOptionDoesNotExist, onNotifyWhenChange, getDefaultNotifyWhenOption] ); + const { euiTheme } = useEuiTheme(); + const summaryContextMenuOptionStyles = useMemo( + () => css` + min-width: 300px; + padding: ${euiTheme.size.s}; + `, + [euiTheme] + ); + const summaryOptions = useMemo( () => [ - selectSummaryOption(true)} icon={frequency.summary ? 'check' : 'empty'} id="actionNotifyWhen-option-summary" data-test-subj="actionNotifyWhen-option-summary" + className={summaryContextMenuOptionStyles} > {SUMMARY_OF_ALERTS} - , - , + selectSummaryOption(false)} icon={!frequency.summary ? 'check' : 'empty'} id="actionNotifyWhen-option-for_each" data-test-subj="actionNotifyWhen-option-for_each" + className={summaryContextMenuOptionStyles} > {FOR_EACH_ALERT} - , + , ], - [frequency.summary, selectSummaryOption] + [frequency.summary, selectSummaryOption, summaryContextMenuOptionStyles] ); const summaryOrPerRuleSelect = ( @@ -387,8 +399,3 @@ const SUMMARY_OF_ALERTS = i18n.translate( 'xpack.triggersActionsUI.sections.ruleForm.actionNotifyWhen.summaryOption', { defaultMessage: 'Summary of alerts' } ); - -const SummaryContextMenuOption = euiStyled(EuiContextMenuItem)` - min-width: 300px; - padding: ${({ theme }) => theme.eui.euiSizeS}; -`; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.test.tsx index 0a71603a5b55a..cbf6c17e78481 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.test.tsx @@ -18,7 +18,6 @@ import { } from '../../../types'; import { act } from 'react-dom/test-utils'; import { EuiFieldText } from '@elastic/eui'; -import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; import { I18nProvider, __IntlProvider as IntlProvider } from '@kbn/i18n-react'; import { render, waitFor, screen } from '@testing-library/react'; import { DEFAULT_FREQUENCY } from '../../../common/constants'; @@ -414,21 +413,19 @@ describe('action_type_form', () => { frequency: DEFAULT_FREQUENCY, }; const wrapper = render( - - - {getActionTypeForm({ - index: 1, - actionItem, - setActionFrequencyProperty: () => { - actionItem.frequency = { - notifyWhen: RuleNotifyWhen.ACTIVE, - throttle: null, - summary: true, - }; - }, - })} - - + + {getActionTypeForm({ + index: 1, + actionItem, + setActionFrequencyProperty: () => { + actionItem.frequency = { + notifyWhen: RuleNotifyWhen.ACTIVE, + throttle: null, + summary: true, + }; + }, + })} + ); const summaryOrPerRuleSelect = wrapper.getByTestId('summaryOrPerRuleSelect');