[Observability Onboarding] Update question contents to match new desi…

…gns (elastic#184866)

## Summary

Resolves elastic#184108.

Resolves elastic#181855.

Updates the o11y onboarding flow's first question to match our latest
designs. This includes changing the avatar icon at the beginning of the
flow, updating the copy for the first question, adding a list of
integration icons that pertain to each question, and including a badge
to indicate that the user can add additional integrations for each
option.

From a technical perspective, I have added a type to indicate the
supported icon values. Many of these logos are natively supported by
EUI, but I did introduce three new SVG to the plugin's assets folder.

### Before

<img width="1403" alt="image"
src="https://github.com/elastic/kibana/assets/18429259/9472b386-713b-4365-8f5e-1f76435d978f">


### After

<img width="703" alt="image"
src="https://github.com/elastic/kibana/assets/18429259/0a54194a-406d-4e1b-b96f-efc6588f55a6">

x-pack/plugins/observability_solution/observability_onboarding/public/application/onboarding_flow_form/onboarding_flow_form.tsx

@@ -8,6 +8,7 @@ import { i18n } from '@kbn/i18n';
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { useKibana } from '@kbn/kibana-react-plugin/public';
 import type { FunctionComponent } from 'react';
 import {
   EuiAvatar,
@@ -20,6 +21,8 @@ import {
   EuiTitle,
   useGeneratedHtmlId,
   useEuiTheme,
+  EuiBadge,
+  EuiIcon,
 } from '@elastic/eui';
 
 import { useSearchParams } from 'react-router-dom-v5-compat';
@@ -33,8 +36,23 @@ interface UseCaseOption {
   id: Category;
   label: string;
   description: React.ReactNode;
+  logos?: SupportedLogo[];
+  showIntegrationsBadge?: boolean;
 }
 
+type SupportedLogo =
+  | 'aws'
+  | 'azure'
+  | 'docker'
+  | 'dotnet'
+  | 'prometheus'
+  | 'gcp'
+  | 'java'
+  | 'javascript'
+  | 'kubernetes'
+  | 'nginx'
+  | 'opentelemetry';
+
 export const OnboardingFlowForm: FunctionComponent = () => {
   const options: UseCaseOption[] = [
     {
@@ -50,6 +68,8 @@ export const OnboardingFlowForm: FunctionComponent = () => {
             'Detect patterns, gain insights from logs, get alerted when surpassing error thresholds',
         }
       ),
+      logos: ['azure', 'aws', 'nginx', 'gcp'],
+      showIntegrationsBadge: true,
     },
     {
       id: 'apm',
@@ -64,6 +84,7 @@ export const OnboardingFlowForm: FunctionComponent = () => {
             'Catch application problems, get alerted on performance issues or SLO breaches, expedite root cause analysis and remediation',
         }
       ),
+      logos: ['opentelemetry', 'java', 'javascript', 'dotnet'],
     },
     {
       id: 'infra',
@@ -78,6 +99,8 @@ export const OnboardingFlowForm: FunctionComponent = () => {
             'Check my system’s health, get alerted on performance issues or SLO breaches, expedite root cause analysis and remediation',
         }
       ),
+      logos: ['kubernetes', 'prometheus', 'docker', 'opentelemetry'],
+      showIntegrationsBadge: true,
     },
   ];
 
@@ -129,12 +152,11 @@ export const OnboardingFlowForm: FunctionComponent = () => {
   return (
     <EuiPanel hasBorder paddingSize="xl">
       <TitleWithIcon
-        iconType="indexRollupApp"
+        iconType="createSingleMetricJob"
         title={i18n.translate(
           'xpack.observability_onboarding.experimentalOnboardingFlow.strong.startCollectingYourDataLabel',
           {
-            defaultMessage:
-              'Start collecting your data by selecting one of the following use cases',
+            defaultMessage: 'What do you want to monitor?',
           }
         )}
       />
@@ -155,6 +177,27 @@ export const OnboardingFlowForm: FunctionComponent = () => {
                   <EuiText color="subdued" size="s">
                     {option.description}
                   </EuiText>
+                  {(option.logos || option.showIntegrationsBadge) && (
+                    <>
+                      <EuiSpacer size="m" />
+                      <EuiFlexGroup gutterSize="s" responsive={false}>
+                        {option.logos?.map((logo) => (
+                          <EuiFlexItem key={logo} grow={false}>
+                            <LogoIcon logo={logo} />
+                          </EuiFlexItem>
+                        ))}
+                        {option.showIntegrationsBadge && (
+                          <EuiBadge color="hollow">
+                            <FormattedMessage
+                              defaultMessage="+ Integrations"
+                              id="xpack.observability_onboarding.experimentalOnboardingFlow.form.addIntegrations"
+                              description="A badge indicating that the user can add additional observability integrations to their deployment via this option"
+                            />
+                          </EuiBadge>
+                        )}
+                      </EuiFlexGroup>
+                    </>
+                  )}
                 </>
               }
               checked={option.id === searchParams.get('category')}
@@ -241,22 +284,7 @@ interface TitleWithIconProps {
 const TitleWithIcon: FunctionComponent<TitleWithIconProps> = ({ title, iconType }) => (
   <EuiFlexGroup responsive={false} gutterSize="m" alignItems="center">
     <EuiFlexItem grow={false}>
-      <EuiAvatar
-        size="l"
-        name={title}
-        iconType={iconType}
-        iconSize="l"
-        color="subdued"
-        css={{
-          /**
-           * Nudges the icon a bit to the
-           * right because it's not symmetrical and
-           * look off-center by default. This makes
-           * it visually centered.
-           */
-          padding: '24px 22px 24px 26px',
-        }}
-      />
+      <EuiAvatar size="l" name={title} iconType={iconType} iconSize="l" color="subdued" />
     </EuiFlexItem>
     <EuiFlexItem>
       <EuiTitle size="s">
@@ -278,3 +306,35 @@ function scrollIntoViewWithOffset(element: HTMLElement, offset = 0) {
     top: element.getBoundingClientRect().top - document.body.getBoundingClientRect().top - offset,
   });
 }
+
+function useIconForLogo(logo?: SupportedLogo): string | undefined {
+  const {
+    services: { http },
+  } = useKibana();
+  switch (logo) {
+    case 'aws':
+      return 'logoAWS';
+    case 'azure':
+      return 'logoAzure';
+    case 'gcp':
+      return 'logoGCP';
+    case 'kubernetes':
+      return 'logoKubernetes';
+    case 'nginx':
+      return 'logoNginx';
+    case 'prometheus':
+      return 'logoPrometheus';
+    case 'docker':
+      return 'logoDocker';
+    default:
+      return http?.staticAssets.getPluginAssetHref(`${logo}.svg`);
+  }
+}
+
+function LogoIcon({ logo }: { logo: SupportedLogo }) {
+  const iconType = useIconForLogo(logo);
+  if (iconType) {
+    return <EuiIcon type={iconType} />;
+  }
+  return null;
+}