[ResponseOps][Alerting] Update Elasticsearch Query rule to display ES…

…|QL as "Technical Preview" (#166491)

Resolves #166288

## Summary

Updates the rule create / edit flyout to show ES|QL as "Technical
Preview"
<img width="559" alt="Screen Shot 2023-09-14 at 9 46 56 AM"
src="https://github.com/elastic/kibana/assets/109488926/10c13840-721f-4e6d-b8bf-9e58e75a78d2">

<img width="566" alt="Screen Shot 2023-09-14 at 9 47 42 AM"
src="https://github.com/elastic/kibana/assets/109488926/ec3f4ff4-2cd6-4771-80b2-72e6f394e141">


### Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)

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(() => (
+  <EuiBetaBadge
+    size="s"
+    label={i18n.translate('xpack.stackAlerts.esQuery.ui.selectQueryFormType.experimentalLabel', {
+      defaultMessage: 'Technical preview',
+    })}
+    tooltipContent={i18n.translate(
+      'xpack.stackAlerts.esQuery.ui.selectQueryFormType.experimentalDescription',
+      {
+        defaultMessage:
+          'This functionality is in technical preview and may be changed or removed completely in a future release. Elastic will take a best effort approach to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.',
+      }
+    )}
+    tooltipPosition="bottom"
+  />
+));
+ExperimentalBadge.displayName = 'ExperimentalBadge';
+
 export interface QueryFormTypeProps {
   searchType: SearchType | null;
   onFormTypeSelect: (formType: SearchType | null) => void;
@@ -94,9 +113,18 @@ export const QueryFormTypeChooser: React.FC<QueryFormTypeProps> = ({
       <>
         <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
           <EuiFlexItem>
-            <EuiTitle size="xs" data-test-subj="selectedRuleFormTypeTitle">
-              <h5>{activeFormTypeItem?.label}</h5>
-            </EuiTitle>
+            <EuiFlexGroup alignItems="center" gutterSize="s">
+              <EuiFlexItem grow={false}>
+                <EuiTitle size="xs" data-test-subj="selectedRuleFormTypeTitle">
+                  <h5>{activeFormTypeItem?.label}</h5>
+                </EuiTitle>
+              </EuiFlexItem>
+              {activeFormTypeItem?.formType === SearchType.esqlQuery && (
+                <EuiFlexItem>
+                  <ExperimentalBadge />
+                </EuiFlexItem>
+              )}
+            </EuiFlexGroup>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButtonIcon
@@ -140,7 +168,16 @@ export const QueryFormTypeChooser: React.FC<QueryFormTypeProps> = ({
             color="primary"
             label={
               <span>
-                <strong>{item.label}</strong>
+                <EuiFlexGroup alignItems="center" gutterSize="s">
+                  <EuiFlexItem grow={false}>
+                    <strong>{item.label}</strong>
+                  </EuiFlexItem>
+                  {item.formType === SearchType.esqlQuery && (
+                    <EuiFlexItem>
+                      <ExperimentalBadge />
+                    </EuiFlexItem>
+                  )}
+                </EuiFlexGroup>
                 <EuiText color="subdued" size="s">
                   <p>{item.description}</p>
                 </EuiText>