[Observability Onboarding] Update Add data links to use improved deep linking (#184164)

## Summary

Resolves #179543.

This patch will update the deep linking used by `Add data` links
throughout Observability to pre-select the proper experience when
navigating. This will streamline the process for users to help them more
quickly ingest the data they need, allowing them to get value out of
solution pages with fewer clicks.

The changes (from the parent issue):

- [x] Allow o11y Onboarding Locator to take query params
4a024a09c7
- [x] 'Add data' on the top right of Logs Explorer page should link to
the new Add data UX where the use case 'collect and analyze logs' is
pre-selected.
1cef1c68d5
- [x] 'Add data' on the top right of Logs -> Stream page should link to
the new Add data UX where the use case 'collect and analyze logs' is
pre-selected.
75615b34dd
- [x] 'Add data' on the top right of Logs -> Anomalies page should link
to the new Add data UX where the use case 'collect and analyze logs' is
pre-selected.
75615b34dd
- [x] 'Add data' on the top right of Logs -> Categories page should link
to the new Add data UX where the use case 'collect and analyze logs' is
pre-selected.
75615b34dd
- [x] 'Add data' on the top right of Infrastructure -> Inventory page
should link to the new Add data UX where the use case 'monitor
infrastructure' is pre-selected.
07fac0f8b5
- [x] 'Add data' on the top right of Infrastructure -> Metrics Explorer
page should link to the new Add data UX where the use case 'monitor
infrastructure' is pre-selected.
07fac0f8b5
- [x] 'Add data' on the top right of Infrastructure -> Hosts page should
link to the new Add data UX where the use case 'monitor infrastructure'
is pre-selected.
07fac0f8b5

### Demo


![20240523142154](3528e730-c461-4a3c-9358-ab2912fae264)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

packages/deeplinks/observability/locators/observability_onboarding.ts

@@ -12,4 +12,5 @@ export const OBSERVABILITY_ONBOARDING_LOCATOR = 'OBSERVABILITY_ONBOARDING_LOCATO
 export interface ObservabilityOnboardingLocatorParams extends SerializableRecord {
   /** If given, it will load the given map else will load the create a new map page. */
   source?: 'customLogs' | 'systemLogs';
+  category?: string;
 }

x-pack/plugins/observability_solution/infra/public/pages/logs/page_content.tsx

@@ -11,9 +11,13 @@ import React, { useContext } from 'react';
 import { Routes, Route } from '@kbn/shared-ux-router';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { HeaderMenuPortal, useLinkProps } from '@kbn/observability-shared-plugin/public';
+import { SharePublicStart } from '@kbn/share-plugin/public/plugin';
+import {
+  ObservabilityOnboardingLocatorParams,
+  OBSERVABILITY_ONBOARDING_LOCATOR,
+} from '@kbn/deeplinks-observability';
 import { LazyAlertDropdownWrapper } from '../../alerting/log_threshold';
 import { HelpCenterContent } from '../../components/help_center_content';
-import { useKibanaContextForPlugin } from '../../hooks/use_kibana';
 import { useReadOnlyBadge } from '../../hooks/use_readonly_badge';
 import { HeaderActionMenuContext } from '../../utils/header_action_menu_provider';
 import { RedirectWithQueryParams } from '../../utils/redirect_with_query_params';
@@ -26,13 +30,13 @@ import { StateMachinePlayground } from '../../observability_logs/xstate_helpers'
 import { NotFoundPage } from '../404';
 
 export const LogsPageContent: React.FunctionComponent = () => {
-  const uiCapabilities = useKibana().services.application?.capabilities;
+  const { application, share } = useKibana<{ share: SharePublicStart }>().services;
+  const uiCapabilities = application?.capabilities;
+  const onboardingLocator = share?.url.locators.get<ObservabilityOnboardingLocatorParams>(
+    OBSERVABILITY_ONBOARDING_LOCATOR
+  );
   const { setHeaderActionMenu, theme$ } = useContext(HeaderActionMenuContext);
 
-  const {
-    application: { getUrlForApp },
-  } = useKibanaContextForPlugin().services;
-
   const enableDeveloperRoutes = isDevMode();
 
   useReadOnlyBadge(!uiCapabilities?.logs?.save);
@@ -81,7 +85,7 @@ export const LogsPageContent: React.FunctionComponent = () => {
                 </EuiHeaderLink>
                 <LazyAlertDropdownWrapper />
                 <EuiHeaderLink
-                  href={getUrlForApp('/observabilityOnboarding')}
+                  href={onboardingLocator?.useUrl({ category: 'logs' })}
                   color="primary"
                   iconType="indexOpen"
                 >

x-pack/plugins/observability_solution/infra/public/pages/metrics/index.tsx

@@ -20,6 +20,11 @@ import {
 import { useKibana, useUiSetting } from '@kbn/kibana-react-plugin/public';
 import { HeaderMenuPortal, useLinkProps } from '@kbn/observability-shared-plugin/public';
 import { enableInfrastructureHostsView } from '@kbn/observability-plugin/common';
+import { SharePublicStart } from '@kbn/share-plugin/public/plugin';
+import {
+  ObservabilityOnboardingLocatorParams,
+  OBSERVABILITY_ONBOARDING_LOCATOR,
+} from '@kbn/deeplinks-observability';
 import { HelpCenterContent } from '../../components/help_center_content';
 import { useReadOnlyBadge } from '../../hooks/use_readonly_badge';
 import { MetricsExplorerPage } from './metrics_explorer';
@@ -43,16 +48,19 @@ const ADD_DATA_LABEL = i18n.translate('xpack.infra.metricsHeaderAddDataButtonLab
 
 export const InfrastructurePage = () => {
   const config = usePluginConfig();
-  const uiCapabilities = useKibana().services.application?.capabilities;
+  const { application, share } = useKibana<{ share: SharePublicStart }>().services;
   const { setHeaderActionMenu, theme$ } = useContext(HeaderActionMenuContext);
   const isHostsViewEnabled = useUiSetting(enableInfrastructureHostsView);
 
+  const uiCapabilities = application?.capabilities;
+  const onboardingLocator = share?.url.locators.get<ObservabilityOnboardingLocatorParams>(
+    OBSERVABILITY_ONBOARDING_LOCATOR
+  );
+
   const settingsTabTitle = i18n.translate('xpack.infra.metrics.settingsTabTitle', {
     defaultMessage: 'Settings',
   });
 
-  const kibana = useKibana();
-
   useReadOnlyBadge(!uiCapabilities?.infrastructure?.save);
 
   const settingsLinkProps = useLinkProps({
@@ -92,9 +100,7 @@ export const InfrastructurePage = () => {
                         <MetricsAlertDropdown />
                       )}
                       <EuiHeaderLink
-                        href={kibana.services?.application?.getUrlForApp(
-                          '/observabilityOnboarding'
-                        )}
+                        href={onboardingLocator?.useUrl({ category: 'infra' })}
                         color="primary"
                         iconType="indexOpen"
                       >

x-pack/plugins/observability_solution/infra/tsconfig.json

@@ -103,7 +103,8 @@
     "@kbn/search-types",
     "@kbn/router-utils",
     "@kbn/react-kibana-context-render",
-    "@kbn/react-kibana-context-theme"
+    "@kbn/react-kibana-context-theme",
+    "@kbn/deeplinks-observability"
   ],
   "exclude": [
     "target/**/*"

x-pack/plugins/observability_solution/observability_logs_explorer/public/components/onboarding_link.tsx

@@ -31,12 +31,9 @@ export const OnboardingLink = React.memo(({ urlService }: { urlService: BrowserU
     OBSERVABILITY_ONBOARDING_LOCATOR
   );
 
-  const onboardingUrl = locator?.useUrl({});
-
-  const navigateToOnboarding = () => {
-    locator?.navigate({});
-  };
+  const onboardingUrl = locator?.useUrl({ category: 'logs' });
 
+  const navigateToOnboarding = () => locator?.navigate({ category: 'logs' });
   const onboardingLinkProps = getRouterLinkProps({
     href: onboardingUrl,
     onClick: navigateToOnboarding,

x-pack/plugins/observability_solution/observability_onboarding/public/locators/onboarding_locator/get_location.test.ts

@@ -0,0 +1,71 @@
+/*
+ * 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 { getLocation } from './get_location';
+import { PLUGIN_ID } from '../../../common';
+import { ObservabilityOnboardingLocatorParams } from '@kbn/deeplinks-observability';
+
+describe('getLocation', () => {
+  it('should return the correct location with source and query', () => {
+    const params: ObservabilityOnboardingLocatorParams = {
+      source: 'customLogs',
+      category: 'infra',
+    };
+
+    const result = getLocation(params);
+
+    expect(result).toEqual({
+      app: PLUGIN_ID,
+      path: '/customLogs?category=infra',
+      state: {},
+    });
+  });
+
+  it('should return the correct location with only source', () => {
+    const params: ObservabilityOnboardingLocatorParams = {
+      source: 'systemLogs',
+    };
+
+    const result = getLocation(params);
+
+    expect(result).toEqual({
+      app: PLUGIN_ID,
+      path: '/systemLogs',
+      state: {},
+    });
+  });
+
+  it('should return the correct location with only query', () => {
+    const params: ObservabilityOnboardingLocatorParams = {
+      source: undefined,
+      category: 'metrics',
+    };
+
+    const result = getLocation(params);
+
+    expect(result).toEqual({
+      app: PLUGIN_ID,
+      path: '/?category=metrics',
+      state: {},
+    });
+  });
+
+  it('should return the correct location with neither source nor query', () => {
+    const params: ObservabilityOnboardingLocatorParams = {
+      source: undefined,
+      query: undefined,
+    };
+
+    const result = getLocation(params);
+
+    expect(result).toEqual({
+      app: PLUGIN_ID,
+      path: '/',
+      state: {},
+    });
+  });
+});

x-pack/plugins/observability_solution/observability_onboarding/public/locators/onboarding_locator/get_location.ts

@@ -9,13 +9,21 @@ import type { ObservabilityOnboardingLocatorParams } from '@kbn/deeplinks-observ
 import { PLUGIN_ID } from '../../../common';
 
 export function getLocation(params: ObservabilityOnboardingLocatorParams) {
-  const { source } = params;
+  const { source, category } = params;
 
-  const path = ['/', source].filter(Boolean).join('');
+  const path = ['/'];
+
+  if (source) {
+    path.push(source);
+  }
+
+  if (category) {
+    path.push(`?category=${category}`);
+  }
 
   return {
     app: PLUGIN_ID,
-    path,
+    path: path.join(''),
     state: {},
   };
 }