From 32da501f29cf3e75afbef2f7b958ccf86a047ff9 Mon Sep 17 00:00:00 2001
From: Kate Patticha <aikaterini.patticha@elastic.co>
Date: Mon, 18 Jul 2022 16:02:26 +0200
Subject: [PATCH 1/2] [APM] Adding tech preview on Alert Tab feature

---
 .../templates/apm_service_template/index.tsx     | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx b/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
index da604911aec62..0ad6c6e39e38c 100644
--- a/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
+++ b/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
@@ -36,6 +36,7 @@ import { ServiceIcons } from '../../../shared/service_icons';
 import { ApmMainTemplate } from '../apm_main_template';
 import { AnalyzeDataButton } from './analyze_data_button';
 import { getAlertingCapabilities } from '../../../alerting/get_alerting_capabilities';
+import { TechnicalPreviewBadge } from '../../../shared/technical_preview_badge';
 
 type Tab = NonNullable<EuiPageHeaderProps['tabs']>[0] & {
   key:
@@ -330,9 +331,18 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
         path: { serviceName },
         query,
       }),
-      label: i18n.translate('xpack.apm.home.alertsTabLabel', {
-        defaultMessage: 'Alerts',
-      }),
+      label: (
+        <EuiFlexGroup direction="row" gutterSize="xs">
+          <EuiFlexItem>
+            <TechnicalPreviewBadge icon="beaker" />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            {i18n.translate('xpack.apm.home.alertsTabLabel', {
+              defaultMessage: 'Alerts',
+            })}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ),
       hidden: !(isAlertingAvailable && canReadAlerts),
     },
   ];

From 371d2ea66cd2d76554c7dd06d362579c917020bf Mon Sep 17 00:00:00 2001
From: Kate Patticha <aikaterini.patticha@elastic.co>
Date: Tue, 19 Jul 2022 14:33:38 +0200
Subject: [PATCH 2/2] Display the icon on the right side

---
 .../routing/templates/apm_service_template/index.tsx      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx b/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
index 0ad6c6e39e38c..6f1d236059bb7 100644
--- a/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
+++ b/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
@@ -332,15 +332,15 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
         query,
       }),
       label: (
-        <EuiFlexGroup direction="row" gutterSize="xs">
-          <EuiFlexItem>
-            <TechnicalPreviewBadge icon="beaker" />
-          </EuiFlexItem>
+        <EuiFlexGroup gutterSize="xs">
           <EuiFlexItem>
             {i18n.translate('xpack.apm.home.alertsTabLabel', {
               defaultMessage: 'Alerts',
             })}
           </EuiFlexItem>
+          <EuiFlexItem>
+            <TechnicalPreviewBadge icon="beaker" />
+          </EuiFlexItem>
         </EuiFlexGroup>
       ),
       hidden: !(isAlertingAvailable && canReadAlerts),