[8.15] [Observability Onboarding] Fix onboarding nav (#187498) (#187776)

# Backport This will backport the following commits from `main` to `8.15`: - [[Observability Onboarding] Fix onboarding nav (#187498)](https://github.com/elastic/kibana/pull/187498)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Justin Kambic <jk@elastic.co>
2025-04-23 09:19:04 -04:00 · 2024-07-09 09:03:16 +02:00 · 2024-07-09 09:03:16 +02:00 · db7098b1d7
commit db7098b1d7
parent b4cff4dca9
3 changed files with 33 additions and 13 deletions
--- a/x-pack/plugins/observability_solution/observability/public/pages/overview/components/header_menu/header_menu.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/pages/overview/components/header_menu/header_menu.tsx
@ -6,6 +6,10 @@
 */

 import { EuiFlexGroup, EuiFlexItem, EuiHeaderLink, EuiHeaderLinks } from '@elastic/eui';
+import {
+  ObservabilityOnboardingLocatorParams,
+  OBSERVABILITY_ONBOARDING_LOCATOR,
+} from '@kbn/deeplinks-observability';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { usePluginContext } from '../../../../hooks/use_plugin_context';
@ -14,7 +18,12 @@ import { useKibana } from '../../../../utils/kibana_react';
 import HeaderMenuPortal from './header_menu_portal';

 export function HeaderMenu(): React.ReactElement | null {
-  const { http, theme } = useKibana().services;
+  const { share, theme } = useKibana().services;
+
+  const onboardingLocator = share?.url.locators.get<ObservabilityOnboardingLocatorParams>(
+    OBSERVABILITY_ONBOARDING_LOCATOR
+  );
+  const href = onboardingLocator?.useUrl({});

  const { appMountParameters } = usePluginContext();

@ -26,13 +35,9 @@ export function HeaderMenu(): React.ReactElement | null {
      <EuiFlexGroup responsive={false} gutterSize="s">
        <EuiFlexItem>
          <EuiHeaderLinks>
-            <EuiHeaderLink
-              color="primary"
-              href={http.basePath.prepend('/app/integrations/browse')}
-              iconType="indexOpen"
-            >
+            <EuiHeaderLink color="primary" href={href} iconType="indexOpen">
              {i18n.translate('xpack.observability.home.addData', {
-                defaultMessage: 'Add integrations',
+                defaultMessage: 'Add data',
              })}
            </EuiHeaderLink>
          </EuiHeaderLinks>
--- a/x-pack/plugins/observability_solution/observability/public/pages/overview/components/observability_onboarding_callout.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/pages/overview/components/observability_onboarding_callout.tsx
@ -14,14 +14,19 @@ import {
  EuiText,
  EuiTitle,
 } from '@elastic/eui';
+import { ObservabilityOnboardingLocatorParams } from '@kbn/deeplinks-observability';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { useUiTracker } from '@kbn/observability-shared-plugin/public';
 import React, { useCallback } from 'react';
+import { ObservabilityPublicPluginsStart } from '../../../plugin';
 import { useObservabilityOnboarding } from '../../../hooks/use_observability_onboarding';

 export function ObservabilityOnboardingCallout() {
-  const { application } = useKibana().services;
+  const { application, share } = useKibana<ObservabilityPublicPluginsStart>().services;
+  const onboardingHref = share?.url.locators
+    .get<ObservabilityOnboardingLocatorParams>('OBSERVABILITY_ONBOARDING_LOCATOR')
+    ?.useUrl({ category: 'logs' });

  const trackMetric = useUiTracker({ app: 'observability-overview' });
  const { isObservabilityOnboardingDismissed, dismissObservabilityOnboarding } =
@ -34,7 +39,7 @@ export function ObservabilityOnboardingCallout() {

  const getStarted = () => {
    trackMetric({ metric: 'observability_onboarding_get_started' });
-    application?.navigateToApp('observabilityOnboarding');
+    application?.navigateToUrl(onboardingHref!);
  };

  return !isObservabilityOnboardingDismissed ? (
--- a/x-pack/plugins/observability_solution/observability/public/pages/overview/components/sections/empty/empty_sections.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/pages/overview/components/sections/empty/empty_sections.tsx
@ -10,6 +10,7 @@ import React, { useContext } from 'react';
 import { ThemeContext } from 'styled-components';
 import { i18n } from '@kbn/i18n';
 import { HttpSetup } from '@kbn/core/public';
+import { OBSERVABILITY_ONBOARDING_LOCATOR } from '@kbn/deeplinks-observability';
 import { FETCH_STATUS } from '@kbn/observability-shared-plugin/public';

 import { useKibana } from '../../../../../utils/kibana_react';
@ -18,11 +19,14 @@ import { useHasData } from '../../../../../hooks/use_has_data';
 import { EmptySection, Section } from './empty_section';

 export function EmptySections() {
-  const { http } = useKibana().services;
+  const { http, share } = useKibana().services;
+  const onboardingMetricsHref = share?.url.locators
+    .get(OBSERVABILITY_ONBOARDING_LOCATOR)
+    ?.useUrl({ category: 'metrics' });
  const theme = useContext(ThemeContext);
  const { hasDataMap } = useHasData();

-  const appEmptySections = getEmptySections({ http }).filter(({ id }) => {
+  const appEmptySections = getEmptySections({ http, onboardingMetricsHref }).filter(({ id }) => {
    const app = hasDataMap[id];
    if (app) {
      return app.status === FETCH_STATUS.FAILURE || !app.hasData;
@ -57,7 +61,13 @@ export function EmptySections() {
  );
 }

-const getEmptySections = ({ http }: { http: HttpSetup }): Section[] => {
+const getEmptySections = ({
+  http,
+  onboardingMetricsHref,
+}: {
+  http: HttpSetup;
+  onboardingMetricsHref?: string;
+}): Section[] => {
  return [
    {
      id: 'infra_logs',
@ -101,7 +111,7 @@ const getEmptySections = ({ http }: { http: HttpSetup }): Section[] => {
      linkTitle: i18n.translate('xpack.observability.emptySection.apps.metrics.link', {
        defaultMessage: 'Install Metricbeat',
      }),
-      href: http.basePath.prepend('/app/home#/tutorial_directory/metrics'),
+      href: onboardingMetricsHref ?? http.basePath.prepend('/app/home#/tutorial_directory/metrics'),
    },
    {
      id: 'uptime',