[Oblt Onboarding] Add breadcrumbs for quick start flows (#216470)

Closes https://github.com/elastic/kibana/issues/191646

This change adds breadcrumbs to the project navigation bar for every
quickstart flow.

| Classic Navigation | Solution Navigation |
| --- | --- |
| ![CleanShot 2025-03-31 at 15 32
08@2x](https://github.com/user-attachments/assets/d9489e9c-1df1-43f2-99ec-b82128a1be85)
| ![CleanShot 2025-03-31 at 15 31
13@2x](https://github.com/user-attachments/assets/28180e0b-da00-4773-b9e5-a4d7e1c97424)
|

x-pack/solutions/observability/plugins/observability_onboarding/public/application/observability_onboarding_flow.tsx

@@ -20,6 +20,7 @@ import {
   FirehosePage,
 } from './pages';
 import { ObservabilityOnboardingAppServices } from '..';
+import { useFlowBreadcrumb } from './shared/use_flow_breadcrumbs';
 
 const queryClient = new QueryClient();
 
@@ -31,6 +32,8 @@ export function ObservabilityOnboardingFlow() {
     },
   } = useKibana<ObservabilityOnboardingAppServices>();
 
+  useFlowBreadcrumb(null);
+
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [pathname]);

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

@@ -34,8 +34,15 @@ import { isSupportedLogo, LogoIcon } from '../../shared/logo_icon';
 import { FeedbackButtons } from '../shared/feedback_buttons';
 import { ObservabilityOnboardingContextValue } from '../../../plugin';
 import { SupportedIntegrationsList } from './supported_integrations_list';
+import { useFlowBreadcrumb } from '../../shared/use_flow_breadcrumbs';
 
 export const AutoDetectPanel: FunctionComponent = () => {
+  useFlowBreadcrumb({
+    text: i18n.translate(
+      'xpack.observability_onboarding.autoDetectPanel.breadcrumbs.autoDetectLabel',
+      { defaultMessage: 'Elastic Agent: Logs & Metrics' }
+    ),
+  });
   const { status, data, error, refetch, installedIntegrations } = useOnboardingFlow();
   const command = data ? getAutoDetectCommand(data) : undefined;
   const accordionId = useGeneratedHtmlId({ prefix: 'accordion' });

x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/firehose/index.tsx

@@ -34,6 +34,7 @@ import { ObservabilityOnboardingAppServices } from '../../..';
 import { useWindowBlurDataMonitoringTrigger } from '../shared/use_window_blur_data_monitoring_trigger';
 import { ExistingDataCallout } from './existing_data_callout';
 import { usePopulatedAWSIndexList } from './use_populated_aws_index_list';
+import { useFlowBreadcrumb } from '../../shared/use_flow_breadcrumbs';
 
 const OPTIONS = [
   {
@@ -55,6 +56,12 @@ const OPTIONS = [
 ];
 
 export function FirehosePanel() {
+  useFlowBreadcrumb({
+    text: i18n.translate('xpack.observability_onboarding.autoDetectPanel.breadcrumbs.firehose', {
+      defaultMessage: 'AWS Firehose',
+    }),
+  });
+
   const [selectedOptionId, setSelectedOptionId] = useState<CreateStackOption>(
     CreateStackOption.AWS_CONSOLE_UI
   );

x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/kubernetes/index.tsx

@@ -23,8 +23,14 @@ import { DataIngestStatus } from './data_ingest_status';
 import { FeedbackButtons } from '../shared/feedback_buttons';
 import { useKubernetesFlow } from './use_kubernetes_flow';
 import { useWindowBlurDataMonitoringTrigger } from '../shared/use_window_blur_data_monitoring_trigger';
+import { useFlowBreadcrumb } from '../../shared/use_flow_breadcrumbs';
 
 export const KubernetesPanel: React.FC = () => {
+  useFlowBreadcrumb({
+    text: i18n.translate('xpack.observability_onboarding.autoDetectPanel.breadcrumbs.k8s', {
+      defaultMessage: 'Kubernetes: Logs & Metrics',
+    }),
+  });
   const { data, status, error, refetch } = useKubernetesFlow();
   const { onPageReady } = usePerformanceContext();
 

x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/otel_kubernetes/otel_kubernetes_panel.tsx

@@ -33,12 +33,18 @@ import { GetStartedPanel } from '../shared/get_started_panel';
 import { FeedbackButtons } from '../shared/feedback_buttons';
 import { CopyToClipboardButton } from '../shared/copy_to_clipboard_button';
 import { useKubernetesFlow } from '../kubernetes/use_kubernetes_flow';
+import { useFlowBreadcrumb } from '../../shared/use_flow_breadcrumbs';
 
 const OTEL_HELM_CHARTS_REPO = 'https://open-telemetry.github.io/opentelemetry-helm-charts';
 const OTEL_KUBE_STACK_VERSION = '0.3.9';
 const CLUSTER_OVERVIEW_DASHBOARD_ID = 'kubernetes_otel-cluster-overview';
 
 export const OtelKubernetesPanel: React.FC = () => {
+  useFlowBreadcrumb({
+    text: i18n.translate('xpack.observability_onboarding.autoDetectPanel.breadcrumbs.k8sOtel', {
+      defaultMessage: 'Kubernetes: OpenTelemetry',
+    }),
+  });
   const { data, error, refetch } = useKubernetesFlow('kubernetes_otel');
   const [idSelected, setIdSelected] = useState('nodejs');
   const {

x-pack/solutions/observability/plugins/observability_onboarding/public/application/quickstart_flows/otel_logs/index.tsx

@@ -33,6 +33,7 @@ import { useFetcher } from '../../../hooks/use_fetcher';
 import { MultiIntegrationInstallBanner } from './multi_integration_install_banner';
 import { EmptyPrompt } from '../shared/empty_prompt';
 import { FeedbackButtons } from '../shared/feedback_buttons';
+import { useFlowBreadcrumb } from '../../shared/use_flow_breadcrumbs';
 
 const HOST_COMMAND = i18n.translate(
   'xpack.observability_onboarding.otelLogsPanel.p.runTheCommandOnYourHostLabel',
@@ -43,6 +44,11 @@ const HOST_COMMAND = i18n.translate(
 );
 
 export const OtelLogsPanel: React.FC = () => {
+  useFlowBreadcrumb({
+    text: i18n.translate('xpack.observability_onboarding.autoDetectPanel.breadcrumbs.otelHost', {
+      defaultMessage: 'OpenTelemetry: Logs & Metrics',
+    }),
+  });
   const { onPageReady } = usePerformanceContext();
   const {
     services: {

x-pack/solutions/observability/plugins/observability_onboarding/public/application/shared/use_flow_breadcrumbs.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 { ChromeBreadcrumb } from '@kbn/core/public';
+import { i18n } from '@kbn/i18n';
+import { useBreadcrumbs } from '@kbn/observability-shared-plugin/public';
+
+export function useFlowBreadcrumb(breadcrumb: ChromeBreadcrumb | null) {
+  useBreadcrumbs(breadcrumb !== null ? [breadcrumb] : [], {
+    app: {
+      id: 'observabilityOnboarding',
+      label: i18n.translate(
+        'xpack.observability_onboarding.otelKubernetesPanel.breadcrumbs.addDataLabel',
+        { defaultMessage: 'Add Data' }
+      ),
+    },
+    absoluteProjectStyleBreadcrumbs: false,
+  });
+}