[Onboarding][Auto-detect] Update design for supported integrations badges

x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/auto_detect/auto_detect_panel.tsx

@@ -13,9 +13,6 @@ import {
   EuiCodeBlock,
   EuiSpacer,
   EuiSkeletonText,
-  EuiBadge,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiText,
   useGeneratedHtmlId,
   EuiIcon,
@@ -38,6 +35,7 @@ import { isSupportedLogo, LogoIcon } from '../../shared/logo_icon';
 import { FeedbackButtons } from '../shared/feedback_buttons';
 import { ObservabilityOnboardingContextValue } from '../../../plugin';
 import { useAutoDetectTelemetry } from './use_auto_detect_telemetry';
+import { SupportedIntegrationsList } from './supported_integrations_list';
 
 export const AutoDetectPanel: FunctionComponent = () => {
   const { status, data, error, refetch, installedIntegrations } = useOnboardingFlow();
@@ -92,28 +90,7 @@ export const AutoDetectPanel: FunctionComponent = () => {
                   </p>
                 </EuiText>
                 <EuiSpacer size="s" />
-                <EuiFlexGroup gutterSize="s">
-                  {[
-                    'Apache',
-                    'Docker',
-                    'Nginx',
-                    'System',
-                    'MySQL',
-                    'PostgreSQL',
-                    'Redis',
-                    'HAProxy',
-                    'Kafka',
-                    'RabbitMQ',
-                    'Prometheus',
-                    'Tomcat',
-                    'MongoDB',
-                    'Custom .log files',
-                  ].map((item) => (
-                    <EuiFlexItem key={item} grow={false}>
-                      <EuiBadge color="hollow">{item}</EuiBadge>
-                    </EuiFlexItem>
-                  ))}
-                </EuiFlexGroup>
+                <SupportedIntegrationsList />
                 <EuiSpacer />
                 {/* Bash syntax highlighting only highlights a few random numbers (badly) so it looks less messy to go with plain text */}
                 <EuiCodeBlock paddingSize="m" language="text">

x-pack/plugins/observability_solution/observability_onboarding/public/application/quickstart_flows/auto_detect/supported_integrations_list.tsx

@@ -0,0 +1,98 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import {
+  EuiBadge,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiTextColor,
+  EuiToolTip,
+  IconType,
+  useEuiTheme,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import apacheIconSrc from '../../../assets/apache.svg';
+import dockerIconSrc from '../../../assets/docker.svg';
+import nginxIconSrc from '../../../assets/nginx.svg';
+import mysqlIconSrc from '../../../assets/mysql.svg';
+
+const SUPPORTED_INTEGRATIONS_LIST = [
+  'Apache',
+  'Docker',
+  'Nginx',
+  'System',
+  'MySQL',
+  'PostgreSQL',
+  'Redis',
+  'Haproxy',
+  'Kafka',
+  'RabbitMQ',
+  'Prometheus',
+  'Apache Tomcat',
+  'MongoDB',
+] as const;
+
+type SupportedIntegrationName = (typeof SUPPORTED_INTEGRATIONS_LIST)[number];
+
+interface SupportedIntegrationItem {
+  title: SupportedIntegrationName;
+  icon: IconType;
+}
+
+const FEATURED_INTEGRATIONS_LIST: SupportedIntegrationItem[] = [
+  { title: 'Apache', icon: apacheIconSrc },
+  { title: 'Docker', icon: dockerIconSrc },
+  { title: 'Nginx', icon: nginxIconSrc },
+  { title: 'MySQL', icon: mysqlIconSrc },
+  { title: 'System', icon: 'desktop' },
+];
+
+export function SupportedIntegrationsList() {
+  const {
+    euiTheme: { colors },
+  } = useEuiTheme();
+  const customLogFilesTitle = i18n.translate(
+    'xpack.observability_onboarding.autoDetectPanel.supportedIntegrationsList.customIntegrationTitle',
+    { defaultMessage: 'Custom .log files' }
+  );
+  return (
+    <EuiFlexGroup gutterSize="s" responsive={false} css={{ flexWrap: 'wrap' }}>
+      {FEATURED_INTEGRATIONS_LIST.map(({ title, icon }) => (
+        <EuiFlexItem grow={false}>
+          <EuiBadge iconType={icon} color="hollow" key={title}>
+            {title}
+          </EuiBadge>
+        </EuiFlexItem>
+      ))}
+
+      <EuiBadge iconType="documents" color="hollow">
+        {customLogFilesTitle}
+      </EuiBadge>
+
+      <EuiToolTip
+        content={
+          <EuiText size="s">
+            <ul>
+              {SUPPORTED_INTEGRATIONS_LIST.map((integration) => (
+                <li key={integration}>{integration}</li>
+              ))}
+              <li>{customLogFilesTitle}</li>
+            </ul>
+          </EuiText>
+        }
+      >
+        <EuiBadge color="hollow">
+          <EuiTextColor color={colors.link}>
+            {`+${SUPPORTED_INTEGRATIONS_LIST.length - FEATURED_INTEGRATIONS_LIST.length}`}
+          </EuiTextColor>
+        </EuiBadge>
+      </EuiToolTip>
+    </EuiFlexGroup>
+  );
+}