[8.14] [ResponseOps] Bring back EuiThemeProvider to fix o11y and stack monitoring rules in stack management (#188724)

x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/popover_expression.tsx

@@ -14,10 +14,11 @@ interface Props {
   value: React.ReactNode;
   children?: React.ReactNode;
   color?: ExpressionColor;
+  dataTestSubj?: string;
 }
 
 export function PopoverExpression(props: Props) {
-  const { title, value, children, color } = props;
+  const { title, value, children, color, dataTestSubj } = props;
   const [popoverOpen, setPopoverOpen] = useState(false);
 
   return (
@@ -27,6 +28,7 @@ export function PopoverExpression(props: Props) {
       closePopover={() => setPopoverOpen(false)}
       button={
         <EuiExpression
+          data-test-subj={dataTestSubj}
           description={title}
           value={value}
           isActive={popoverOpen}

x-pack/plugins/observability_solution/apm/public/components/alerting/utils/fields.tsx

@@ -34,6 +34,7 @@ export function ServiceField({
 }) {
   return (
     <PopoverExpression
+      dataTestSubj="apmServiceField"
       value={currentValue || allOptionText}
       title={i18n.translate('xpack.apm.alerting.fields.service', {
         defaultMessage: 'Service',
@@ -68,6 +69,7 @@ export function EnvironmentField({
 }) {
   return (
     <PopoverExpression
+      dataTestSubj="apmEnvironmentField"
       value={getEnvironmentLabel(currentValue)}
       title={i18n.translate('xpack.apm.alerting.fields.environment', {
         defaultMessage: 'Environment',
@@ -106,7 +108,11 @@ export function TransactionNameField({
   });
 
   return (
-    <PopoverExpression value={currentValue || allOptionText} title={label}>
+    <PopoverExpression
+      dataTestSubj="apmTransactionNameField"
+      value={currentValue || allOptionText}
+      title={label}
+    >
       <SuggestionsSelect
         customOptions={[{ label: allOptionText, value: undefined }]}
         customOptionText={i18n.translate('xpack.apm.alerting.transaction.name.custom.text', {
@@ -139,7 +145,11 @@ export function TransactionTypeField({
     defaultMessage: 'Type',
   });
   return (
-    <PopoverExpression value={currentValue || allOptionText} title={label}>
+    <PopoverExpression
+      dataTestSubj="apmTransactionTypeField"
+      value={currentValue || allOptionText}
+      title={label}
+    >
       <SuggestionsSelect
         customOptions={[{ label: allOptionText, value: undefined }]}
         customOptionText={i18n.translate('xpack.apm.transactionTypesSelectCustomOptionText', {
@@ -172,7 +182,11 @@ export function ErrorGroupingKeyField({
     defaultMessage: 'Error grouping key',
   });
   return (
-    <PopoverExpression value={currentValue || allOptionText} title={label}>
+    <PopoverExpression
+      dataTestSubj="apmErrorGroupingKeyField"
+      value={currentValue || allOptionText}
+      title={label}
+    >
       <SuggestionsSelect
         customOptions={[{ label: allOptionText, value: undefined }]}
         customOptionText={i18n.translate('xpack.apm.errorKeySelectCustomOptionText', {

x-pack/plugins/triggers_actions_ui/public/application/sections/rule_form/rule_form.tsx

@@ -43,7 +43,10 @@ import {
   EuiToolTip,
   EuiCallOut,
   EuiAccordion,
+  useEuiTheme,
+  COLOR_MODES_STANDARD,
 } from '@elastic/eui';
+import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { capitalize } from 'lodash';
 import { KibanaFeature } from '@kbn/features-plugin/public';
 import {
@@ -199,6 +202,7 @@ export const RuleForm = ({
     dataViews,
   } = useKibana().services;
   const canShowActions = hasShowActionsCapability(capabilities);
+  const { colorMode } = useEuiTheme();
 
   const [ruleTypeModel, setRuleTypeModel] = useState<RuleTypeModel | null>(null);
   const flyoutBodyOverflowRef = useRef<HTMLDivElement | HTMLSpanElement | null>(null);
@@ -765,24 +769,26 @@ export const RuleForm = ({
               </SectionLoading>
             }
           >
-            <RuleParamsExpressionComponent
-              id={rule.id}
-              ruleParams={rule.params}
-              ruleInterval={`${ruleInterval ?? 1}${ruleIntervalUnit}`}
-              ruleThrottle={''}
-              alertNotifyWhen={rule.notifyWhen ?? 'onActionGroupChange'}
-              errors={errors}
-              setRuleParams={setRuleParams}
-              setRuleProperty={setRuleProperty}
-              defaultActionGroupId={defaultActionGroupId}
-              actionGroups={selectedRuleType.actionGroups}
-              metadata={metadata}
-              charts={charts}
-              data={data}
-              dataViews={dataViews}
-              unifiedSearch={unifiedSearch}
-              onChangeMetaData={onChangeMetaData}
-            />
+            <EuiThemeProvider darkMode={colorMode === COLOR_MODES_STANDARD.dark}>
+              <RuleParamsExpressionComponent
+                id={rule.id}
+                ruleParams={rule.params}
+                ruleInterval={`${ruleInterval ?? 1}${ruleIntervalUnit}`}
+                ruleThrottle={''}
+                alertNotifyWhen={rule.notifyWhen ?? 'onActionGroupChange'}
+                errors={errors}
+                setRuleParams={setRuleParams}
+                setRuleProperty={setRuleProperty}
+                defaultActionGroupId={defaultActionGroupId}
+                actionGroups={selectedRuleType.actionGroups}
+                metadata={metadata}
+                charts={charts}
+                data={data}
+                dataViews={dataViews}
+                unifiedSearch={unifiedSearch}
+                onChangeMetaData={onChangeMetaData}
+              />
+            </EuiThemeProvider>
           </Suspense>
         </EuiErrorBoundary>
       ) : null}

x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/alert_create_flyout.ts

@@ -8,6 +8,9 @@
 import expect from '@kbn/expect';
 import { asyncForEach } from '@kbn/std';
 import { omit } from 'lodash';
+import { apm, timerange } from '@kbn/apm-synthtrace-client';
+import { ApmSynthtraceEsClient } from '@kbn/apm-synthtrace';
+import { getApmSynthtraceEsClient } from '../../../common/utils/synthtrace/apm_es_client';
 import { FtrProviderContext } from '../../ftr_provider_context';
 import { generateUniqueKey } from '../../lib/get_test_data';
 
@@ -20,6 +23,8 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const retry = getService('retry');
   const rules = getService('rules');
   const toasts = getService('toasts');
+  const esClient = getService('es');
+  const apmSynthtraceKibanaClient = getService('apmSynthtraceKibanaClient');
 
   async function getAlertsByName(name: string) {
     const {
@@ -71,6 +76,12 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
     await nameInput.click();
   }
 
+  async function defineAPMErrorCountRule(ruleName: string) {
+    await pageObjects.triggersActionsUI.clickCreateAlertButton();
+    await testSubjects.click(`apm.error_rate-SelectOption`);
+    await testSubjects.setValue('ruleNameInput', ruleName);
+  }
+
   async function defineAlwaysFiringAlert(alertName: string) {
     await pageObjects.triggersActionsUI.clickCreateAlertButton();
     await testSubjects.click('test.always-firing-SelectOption');
@@ -82,6 +93,45 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
   }
 
   describe('create alert', function () {
+    let apmSynthtraceEsClient: ApmSynthtraceEsClient;
+    before(async () => {
+      const version = (await apmSynthtraceKibanaClient.installApmPackage()).version;
+      apmSynthtraceEsClient = await getApmSynthtraceEsClient({
+        client: esClient,
+        packageVersion: version,
+      });
+      const opbeansJava = apm
+        .service({ name: 'opbeans-java', environment: 'production', agentName: 'java' })
+        .instance('instance');
+
+      const opbeansNode = apm
+        .service({ name: 'opbeans-node', environment: 'production', agentName: 'node' })
+        .instance('instance');
+
+      const events = timerange('now-15m', 'now')
+        .ratePerMinute(1)
+        .generator((timestamp) => {
+          return [
+            opbeansJava
+              .transaction({ transactionName: 'tx-java' })
+              .timestamp(timestamp)
+              .duration(100)
+              .failure()
+              .errors(opbeansJava.error({ message: 'a java error' }).timestamp(timestamp + 50)),
+
+            opbeansNode
+              .transaction({ transactionName: 'tx-node' })
+              .timestamp(timestamp)
+              .duration(100)
+              .success(),
+          ];
+        });
+
+      return Promise.all([apmSynthtraceEsClient.index(events)]);
+    });
+
+    after(() => apmSynthtraceEsClient.clean());
+
     beforeEach(async () => {
       await pageObjects.common.navigateToApp('triggersActions');
       await testSubjects.click('rulesTab');
@@ -321,6 +371,19 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       await discardNewRuleCreation();
     });
 
+    // Related issue that this test is trying to prevent:
+    // https://github.com/elastic/kibana/issues/186969
+    it('should successfully show the APM error count rule flyout', async () => {
+      const ruleName = generateUniqueKey();
+      await defineAPMErrorCountRule(ruleName);
+
+      await testSubjects.existOrFail('apmServiceField');
+      await testSubjects.existOrFail('apmEnvironmentField');
+      await testSubjects.existOrFail('apmErrorGroupingKeyField');
+
+      await discardNewRuleCreation();
+    });
+
     it('should successfully test valid es_query alert', async () => {
       const alertName = generateUniqueKey();
       await defineEsQueryAlert(alertName);