From da2670e3d73b3fe0d88bf4305e3023cc26b8f927 Mon Sep 17 00:00:00 2001
From: Alexandra Doak <alexandra.doak@elastic.co>
Date: Thu, 14 Sep 2023 09:50:25 -0700
Subject: [PATCH 1/2] Adding experimental badge

---
 .../expression/query_form_type_chooser.tsx    | 46 +++++++++++++++++--
 1 file changed, 42 insertions(+), 4 deletions(-)

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..5f14f37c0b2aa 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(() => (
+  <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
@@ -113,6 +141,7 @@ export const QueryFormTypeChooser: React.FC<QueryFormTypeProps> = ({
             />
           </EuiFlexItem>
         </EuiFlexGroup>
+        <EuiSpacer size="xs" />
         <EuiText color="subdued" size="s" data-test-subj="selectedRuleFormTypeDescription">
           {activeFormTypeItem?.description}
         </EuiText>
@@ -140,7 +169,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>

From 5cb92dbcecefe9f31f7e732ca03f72e9c0bf070b Mon Sep 17 00:00:00 2001
From: Alexandra Doak <alexandra.doak@elastic.co>
Date: Thu, 14 Sep 2023 09:54:35 -0700
Subject: [PATCH 2/2] Remove spacer

---
 .../rule_types/es_query/expression/query_form_type_chooser.tsx   | 1 -
 1 file changed, 1 deletion(-)

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 5f14f37c0b2aa..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
@@ -141,7 +141,6 @@ export const QueryFormTypeChooser: React.FC<QueryFormTypeProps> = ({
             />
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiSpacer size="xs" />
         <EuiText color="subdued" size="s" data-test-subj="selectedRuleFormTypeDescription">
           {activeFormTypeItem?.description}
         </EuiText>