[APM] Update onboarding link to use locator with "application" as cat…

…egory parameter (elastic#197780) ## Summary Closes elastic#197590. This PR addresses an issue with the onboarding link used by the `addApmData` constant, where the "Application" option fails to preselect. The issue is caused by the URL being incorrectly formed, with the category parameter set to `apm` instead of `application`. To resolve this, the PR introduces two main changes: - Update to use the correct locator - Modify the category parameter to use `application` instead of `apm` |Before|After| |-|-| |![before](https://github.com/user-attachments/assets/650066b8-85a8-4ff4-a7eb-fef46708ea9d)|![after](https://github.com/user-attachments/assets/508bb258-e2c2-4057-9242-653864548e4a)|
kdelemme · Oct 25, 2024 · 4798c59 · 4798c59
1 parent b680626
commit 4798c59
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 44 deletions.
diff --git a/...ins/observability_solution/apm/public/components/app/service_tab_empty_state/constants.ts b/...ins/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'>

diff --git a/...lugins/observability_solution/apm/public/components/app/service_tab_empty_state/index.tsx b/...lugins/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
   );
 

diff --git a/...n/apm/public/components/routing/app_root/apm_header_action_menu/add_data_context_menu.tsx b/...n/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,31 +72,35 @@ 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: () => {
             reportButtonClick('associate_existing_service_logs');
           },
         },
         {
-          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');
+                },
+              },
+            ]
+          : []),
       ],
     },
   ];

diff --git a/.../plugins/observability_solution/apm/public/components/shared/add_data_buttons/buttons.tsx b/.../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,34 +50,47 @@ 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>
   );
 }
 
 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>
   );
 }
diff --git 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;
+}