diff --git a/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/query_form_type_chooser.tsx b/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/query_form_type_chooser.tsx index 63d0b0d36fe53..0077a035d1e8d 100644 --- a/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/query_form_type_chooser.tsx +++ b/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/query_form_type_chooser.tsx @@ -7,6 +7,7 @@ import React, { useMemo } from 'react'; import { + EuiBetaBadge, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, @@ -21,6 +22,24 @@ import { i18n } from '@kbn/i18n'; import { SearchType } from '../types'; import { useTriggerUiActionServices } from '../util'; +export const ExperimentalBadge = React.memo(() => ( + +)); +ExperimentalBadge.displayName = 'ExperimentalBadge'; + export interface QueryFormTypeProps { searchType: SearchType | null; onFormTypeSelect: (formType: SearchType | null) => void; @@ -94,9 +113,18 @@ export const QueryFormTypeChooser: React.FC = ({ <> - -
{activeFormTypeItem?.label}
-
+ + + +
{activeFormTypeItem?.label}
+
+
+ {activeFormTypeItem?.formType === SearchType.esqlQuery && ( + + + + )} +
= ({ color="primary" label={ - {item.label} + + + {item.label} + + {item.formType === SearchType.esqlQuery && ( + + + + )} +

{item.description}