Adding experimental badge

elastic · Sep 14, 2023 · da2670e · da2670e
1 parent 6ab7ec4
commit da2670e
Showing 1 changed file with 42 additions and 4 deletions.
diff --git a/...ck/plugins/stack_alerts/public/rule_types/es_query/expression/query_form_type_chooser.tsx b/...ck/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>