[8.16] [APM] Update onboarding link to use locator with "application" as category parameter (#197780) (#197819)

# Backport This will backport the following commits from `main` to `8.16`: - [[APM] Update onboarding link to use locator with "application" as category parameter (#197780)](https://github.com/elastic/kibana/pull/197780)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Irene Blanco <irene.blanco@elastic.co>
2025-04-24 09:48:58 -04:00 · 2024-10-26 05:23:24 +11:00 · 2024-10-26 05:23:24 +11:00 · 724be35d2d
commit 724be35d2d
parent 14c8a9e2ec
5 changed files with 95 additions and 44 deletions
--- a/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/constants.ts
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/constants.ts
@ -5,10 +5,13 @@
 * 2.0.
 */

-import type { ObservabilityOnboardingLocatorParams } from '@kbn/deeplinks-observability';
 import { i18n } from '@kbn/i18n';
 import type { AddDataPanelProps } from '@kbn/observability-shared-plugin/public';
 import type { LocatorPublic } from '@kbn/share-plugin/common';
+import {
+  ApmOnboardingLocatorCategory,
+  ApmOnboardingLocatorParams,
+} from '../../../locator/onboarding_locator';

 export type AddAPMCalloutKeys =
  | 'serviceOverview'
@ -19,13 +22,11 @@ export type AddAPMCalloutKeys =
  | 'metrics'
  | 'errorGroupOverview';

-const defaultActions = (
-  locator: LocatorPublic<ObservabilityOnboardingLocatorParams> | undefined
-) => {
+const defaultActions = (locator: LocatorPublic<ApmOnboardingLocatorParams> | undefined) => {
  return {
    actions: {
      primary: {
-        href: locator?.getRedirectUrl({ category: 'application' }),
+        href: locator?.getRedirectUrl({ category: ApmOnboardingLocatorCategory.Apm }),
        label: i18n.translate('xpack.apm.serviceTabEmptyState.defaultPrimaryActionLabel', {
          defaultMessage: 'Add APM',
        }),
@ -42,7 +43,7 @@ const defaultActions = (

 export const addAPMCalloutDefinitions = (
  baseFolderPath: string,
-  locator: LocatorPublic<ObservabilityOnboardingLocatorParams> | undefined
+  locator: LocatorPublic<ApmOnboardingLocatorParams> | undefined
 ): Record<
  AddAPMCalloutKeys,
  Omit<AddDataPanelProps, 'onDismiss' | 'onAddData' | 'onLearnMore' | 'onTryIt'>
--- a/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_tab_empty_state/index.tsx
@ -8,10 +8,8 @@
 import React from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { AddDataPanel } from '@kbn/observability-shared-plugin/public';
-import {
-  OBSERVABILITY_ONBOARDING_LOCATOR,
-  ObservabilityOnboardingLocatorParams,
-} from '@kbn/deeplinks-observability';
+import { OBSERVABILITY_ONBOARDING_LOCATOR } from '@kbn/deeplinks-observability';
+import { ApmOnboardingLocatorParams } from '../../../locator/onboarding_locator';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { EmptyStateClickParams, EntityInventoryAddDataParams } from '../../../services/telemetry';
 import { ApmPluginStartDeps, ApmServices } from '../../../plugin';
@ -39,7 +37,7 @@ export function ServiceTabEmptyState({ id, onDismiss }: ServiceTabEmptyStateProp

  const { share } = useApmPluginContext();

-  const onboardingLocator = share.url.locators.get<ObservabilityOnboardingLocatorParams>(
+  const onboardingLocator = share.url.locators.get<ApmOnboardingLocatorParams>(
    OBSERVABILITY_ONBOARDING_LOCATOR
  );

--- a/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/add_data_context_menu.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/add_data_context_menu.tsx
@ -13,14 +13,16 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
+import { OBSERVABILITY_ONBOARDING_LOCATOR } from '@kbn/deeplinks-observability';
+import { ApmOnboardingLocatorParams } from '../../../../locator/onboarding_locator';
 import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
 import { useKibana } from '../../../../context/kibana_context/use_kibana';
 import { ApmPluginStartDeps, ApmServices } from '../../../../plugin';
 import { EntityInventoryAddDataParams } from '../../../../services/telemetry';
 import {
-  associateServiceLogs,
-  collectServiceLogs,
-  addApmData,
+  associateServiceLogsProps,
+  collectServiceLogsProps,
+  addApmDataProps,
 } from '../../../shared/add_data_buttons/buttons';

 const addData = i18n.translate('xpack.apm.addDataContextMenu.link', {
@ -34,8 +36,17 @@ export function AddDataContextMenu() {
    core: {
      http: { basePath },
    },
+    share: {
+      url: { locators },
+    },
  } = useApmPluginContext();

+  const onboardingLocator = locators.get<ApmOnboardingLocatorParams>(
+    OBSERVABILITY_ONBOARDING_LOCATOR
+  );
+
+  const addApmButtonData = addApmDataProps(onboardingLocator);
+
  const button = (
    <EuiHeaderLink
      color="text"
@ -61,8 +72,8 @@ export function AddDataContextMenu() {
      title: addData,
      items: [
        {
-          name: associateServiceLogs.name,
-          href: associateServiceLogs.link,
+          name: associateServiceLogsProps.name,
+          href: associateServiceLogsProps.link,
          'data-test-subj': 'apmAddDataAssociateServiceLogs',
          target: '_blank',
          onClick: () => {
@ -70,22 +81,26 @@ export function AddDataContextMenu() {
          },
        },
        {
-          name: collectServiceLogs.name,
-          href: basePath.prepend(collectServiceLogs.link),
+          name: collectServiceLogsProps.name,
+          href: basePath.prepend(collectServiceLogsProps.link),
          'data-test-subj': 'apmAddDataCollectServiceLogs',
          onClick: () => {
            reportButtonClick('collect_new_service_logs');
          },
        },
-        {
-          name: addApmData.name,
-          href: basePath.prepend(addApmData.link),
-          icon: 'plusInCircle',
-          'data-test-subj': 'apmAddDataApmAgent',
-          onClick: () => {
-            reportButtonClick('add_apm_agent');
-          },
-        },
+        ...(addApmButtonData.link
+          ? [
+              {
+                name: addApmButtonData.name,
+                href: addApmButtonData.link,
+                icon: 'plusInCircle',
+                'data-test-subj': 'apmAddDataApmAgent',
+                onClick: () => {
+                  reportButtonClick('add_apm_agent');
+                },
+              },
+            ]
+          : []),
      ],
    },
  ];
--- a/x-pack/plugins/observability_solution/apm/public/components/shared/add_data_buttons/buttons.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/shared/add_data_buttons/buttons.tsx
@ -11,23 +11,31 @@
 import { EuiButton, EuiButtonSize } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { OBSERVABILITY_ONBOARDING_LOCATOR } from '@kbn/deeplinks-observability';
+import { LocatorPublic } from '@kbn/share-plugin/common';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
+import {
+  ApmOnboardingLocatorCategory,
+  ApmOnboardingLocatorParams,
+} from '../../../locator/onboarding_locator';

-export const addApmData = {
-  name: i18n.translate('xpack.apm.add.apm.agent.button.', {
-    defaultMessage: 'Add APM',
-  }),
-  link: '/app/observabilityOnboarding/?category=apm',
+export const addApmDataProps = (locator: LocatorPublic<ApmOnboardingLocatorParams> | undefined) => {
+  return {
+    name: i18n.translate('xpack.apm.add.apm.agent.button.', {
+      defaultMessage: 'Add APM',
+    }),
+    link: locator?.getRedirectUrl({ category: ApmOnboardingLocatorCategory.Apm }),
+  };
 };

-export const associateServiceLogs = {
+export const associateServiceLogsProps = {
  name: i18n.translate('xpack.apm.associate.service.logs.button', {
    defaultMessage: 'Associate existing service logs',
  }),
  link: 'https://ela.st/new-experience-associate-service-logs',
 };

-export const collectServiceLogs = {
+export const collectServiceLogsProps = {
  name: i18n.translate('xpack.apm.collect.service.logs.button', {
    defaultMessage: 'Collect new service logs',
  }),
@ -42,18 +50,31 @@ interface AddApmDataProps {
 }

 export function AddApmData({ fill = false, size = 's', ...props }: AddApmDataProps) {
-  const { core } = useApmPluginContext();
-  const { basePath } = core.http;
+  const {
+    share: {
+      url: { locators },
+    },
+  } = useApmPluginContext();
+
+  const onboardingLocator = locators.get<ApmOnboardingLocatorParams>(
+    OBSERVABILITY_ONBOARDING_LOCATOR
+  );
+
+  const addApmDataButtonProps = addApmDataProps(onboardingLocator);
+
+  if (!addApmDataButtonProps.link) {
+    return;
+  }

  return (
    <EuiButton
      data-test-subj={props['data-test-subj']}
      size={size}
      onClick={props.onClick}
-      href={basePath.prepend(addApmData.link)}
+      href={addApmDataButtonProps?.link}
      fill={fill}
    >
-      {addApmData.name}
+      {addApmDataButtonProps.name}
    </EuiButton>
  );
 }
@ -61,15 +82,15 @@ export function AddApmData({ fill = false, size = 's', ...props }: AddApmDataPro
 export function AssociateServiceLogs({ onClick }: { onClick?: () => void }) {
  return (
    <EuiButton
-      data-test-subj="associateServiceLogsButton"
+      data-test-subj="associateServiceLogsPropsButton"
      size="s"
      onClick={onClick}
-      href={associateServiceLogs.link}
+      href={associateServiceLogsProps.link}
      target="_blank"
      iconType="popout"
      iconSide="right"
    >
-      {associateServiceLogs.name}
+      {associateServiceLogsProps.name}
    </EuiButton>
  );
 }
@ -80,12 +101,12 @@ export function CollectServiceLogs({ onClick }: { onClick?: () => void }) {

  return (
    <EuiButton
-      data-test-subj="collectServiceLogsButton"
+      data-test-subj="collectServiceLogsPropsButton"
      size="s"
      onClick={onClick}
-      href={basePath.prepend(collectServiceLogs.link)}
+      href={basePath.prepend(collectServiceLogsProps.link)}
    >
-      {collectServiceLogs.name}
+      {collectServiceLogsProps.name}
    </EuiButton>
  );
 }
--- a/x-pack/plugins/observability_solution/apm/public/locator/onboarding_locator.ts
+++ b/x-pack/plugins/observability_solution/apm/public/locator/onboarding_locator.ts
@ -0,0 +1,16 @@
+/*
+ * 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 { ObservabilityOnboardingLocatorParams } from '@kbn/deeplinks-observability';
+
+export enum ApmOnboardingLocatorCategory {
+  Apm = 'application',
+}
+
+export interface ApmOnboardingLocatorParams extends ObservabilityOnboardingLocatorParams {
+  category: ApmOnboardingLocatorCategory;
+}