[Onboarding] Add tech preview badges to onboarding flows (elastic#196926

) ## Summary Adds Tech Preview badges for the following flows: - Auto-detect Integrations with Elastic Agent (Tile + Page) - Kubernetes monitoring with Elastic Agent (Tile + Page) - Host monitoring with EDOT Collector (Tile) ### Auto-detect flow #### Tile <img width="394" alt="image" src="https://github.com/user-attachments/assets/b7bb75c0-4930-4294-bb25-7e44c4724cab"> #### Page <img width="1218" alt="image" src="https://github.com/user-attachments/assets/590f7999-579d-4b14-ae69-d726bf194948"> ### Kubernetes monitoring with EA #### Tile <img width="393" alt="image" src="https://github.com/user-attachments/assets/e8ddca06-5907-46f8-bddc-d5ef42a03a71"> #### Page <img width="1219" alt="image" src="https://github.com/user-attachments/assets/4936656e-e4b6-4b7e-821f-c3dd80529177"> ### Host monitoring (OTel) #### Tile <img width="390" alt="image" src="https://github.com/user-attachments/assets/7820fdb1-b119-48f3-8450-bbafcf81da6a"> --------- Co-authored-by: Joe Reuter <johannes.reuter@elastic.co>
mikecote · Oct 21, 2024 · d7e48fd · d7e48fd
1 parent 2d744ff
commit d7e48fd
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/...lity_onboarding/public/application/onboarding_flow_form/use_custom_cards_for_category.tsx b/...lity_onboarding/public/application/onboarding_flow_form/use_custom_cards_for_category.tsx
@@ -61,12 +61,12 @@ export function useCustomCardsForCategory(
             }
           ),
           extraLabelsBadges: [
-            <EuiFlexItem grow={false}>
+            <ExtraLabelBadgeWrapper>
               <LogoIcon logo="apple" size="m" />
-            </EuiFlexItem>,
-            <EuiFlexItem grow={false}>
+            </ExtraLabelBadgeWrapper>,
+            <ExtraLabelBadgeWrapper>
               <LogoIcon logo="linux" size="m" />
-            </EuiFlexItem>,
+            </ExtraLabelBadgeWrapper>,
           ],
           categories: ['observability'],
           icons: [
@@ -79,6 +79,7 @@ export function useCustomCardsForCategory(
           version: '',
           integration: '',
           isQuickstart: true,
+          release: 'preview',
         },
         {
           id: 'otel-logs',
@@ -98,12 +99,12 @@ export function useCustomCardsForCategory(
             }
           ),
           extraLabelsBadges: [
-            <EuiFlexItem grow={false}>
+            <ExtraLabelBadgeWrapper>
               <LogoIcon logo="apple" size="m" />
-            </EuiFlexItem>,
-            <EuiFlexItem grow={false}>
+            </ExtraLabelBadgeWrapper>,
+            <ExtraLabelBadgeWrapper>
               <LogoIcon logo="linux" size="m" />
-            </EuiFlexItem>,
+            </ExtraLabelBadgeWrapper>,
           ],
           categories: ['observability'],
           icons: [
@@ -116,6 +117,7 @@ export function useCustomCardsForCategory(
           version: '',
           integration: '',
           isQuickstart: true,
+          release: 'preview',
         },
       ];
 
@@ -139,9 +141,9 @@ export function useCustomCardsForCategory(
             }
           ),
           extraLabelsBadges: [
-            <EuiFlexItem grow={false}>
+            <ExtraLabelBadgeWrapper>
               <LogoIcon logo="kubernetes" size="m" />
-            </EuiFlexItem>,
+            </ExtraLabelBadgeWrapper>,
           ],
           categories: ['observability'],
           icons: [
@@ -154,6 +156,7 @@ export function useCustomCardsForCategory(
           version: '',
           integration: '',
           isQuickstart: true,
+          release: 'preview',
         },
         {
           id: 'otel-kubernetes',
@@ -173,9 +176,9 @@ export function useCustomCardsForCategory(
             }
           ),
           extraLabelsBadges: [
-            <EuiFlexItem grow={false}>
+            <ExtraLabelBadgeWrapper>
               <LogoIcon logo="kubernetes" size="m" />
-            </EuiFlexItem>,
+            </ExtraLabelBadgeWrapper>,
           ],
           categories: ['observability'],
           icons: [
@@ -356,3 +359,11 @@ export function useCustomCardsForCategory(
       return undefined;
   }
 }
+
+function ExtraLabelBadgeWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <EuiFlexItem grow={false} css={{ alignSelf: 'center' }}>
+      {children}
+    </EuiFlexItem>
+  );
+}
diff --git a/.../observability_solution/observability_onboarding/public/application/pages/auto_detect.tsx b/.../observability_solution/observability_onboarding/public/application/pages/auto_detect.tsx
@@ -29,6 +29,7 @@ export const AutoDetectPage = () => (
               'This installation scans your host and auto-detects log and metric files.',
           }
         )}
+        isTechnicalPreview={true}
       />
     }
   >

diff --git a/...s/observability_solution/observability_onboarding/public/application/pages/kubernetes.tsx b/...s/observability_solution/observability_onboarding/public/application/pages/kubernetes.tsx
@@ -29,6 +29,7 @@ export const KubernetesPage = () => (
               'This installation is tailored for configuring and collecting metrics and logs by deploying a new Elastic Agent within your host.',
           }
         )}
+        isTechnicalPreview={true}
       />
     }
   >