[APM] Fix breadcrumb for mobile services (#152440)

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



https://user-images.githubusercontent.com/3369346/222124968-fb0d51f2-c46c-4b0e-9173-27f3e1173cab.mov

---------

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

x-pack/plugins/apm/public/components/routing/mobile_service_detail/index.tsx

@@ -25,12 +25,12 @@ import { RedirectToDefaultServiceRouteView } from '../service_detail/redirect_to
 
 export function page({
   title,
-  tab,
+  tabKey,
   element,
   searchBarOptions,
 }: {
   title: string;
-  tab: React.ComponentProps<typeof MobileServiceTemplate>['selectedTab'];
+  tabKey: React.ComponentProps<typeof MobileServiceTemplate>['selectedTabKey'];
   element: React.ReactElement<any, any>;
   searchBarOptions?: {
     showKueryBar?: boolean;
@@ -46,7 +46,7 @@ export function page({
     element: (
       <MobileServiceTemplate
         title={title}
-        selectedTab={tab}
+        selectedTabKey={tabKey}
         searchBarOptions={searchBarOptions}
       >
         {element}
@@ -100,7 +100,7 @@ export const mobileServiceDetail = {
       '/mobile-services/{serviceName}/overview': {
         ...page({
           element: <MobileServiceOverview />,
-          tab: 'overview',
+          tabKey: 'overview',
           title: i18n.translate('xpack.apm.views.overview.title', {
             defaultMessage: 'Overview',
           }),
@@ -125,7 +125,7 @@ export const mobileServiceDetail = {
       },
       '/mobile-services/{serviceName}/transactions': {
         ...page({
-          tab: 'transactions',
+          tabKey: 'transactions',
           title: i18n.translate('xpack.apm.views.transactions.title', {
             defaultMessage: 'Transactions',
           }),
@@ -178,7 +178,7 @@ export const mobileServiceDetail = {
         },
       },
       '/mobile-services/{serviceName}/service-map': page({
-        tab: 'service-map',
+        tabKey: 'service-map',
         title: i18n.translate('xpack.apm.views.serviceMap.title', {
           defaultMessage: 'Service Map',
         }),
@@ -189,7 +189,7 @@ export const mobileServiceDetail = {
       }),
       '/mobile-services/{serviceName}/alerts': {
         ...page({
-          tab: 'alerts',
+          tabKey: 'alerts',
           title: i18n.translate('xpack.apm.views.alerts.title', {
             defaultMessage: 'Alerts',
           }),

x-pack/plugins/apm/public/components/routing/templates/mobile_service_template/index.tsx

@@ -36,7 +36,7 @@ type Tab = NonNullable<EuiPageHeaderProps['tabs']>[0] & {
 interface Props {
   title: string;
   children: React.ReactChild;
-  selectedTab: Tab['key'];
+  selectedTabKey: Tab['key'];
   searchBarOptions?: React.ComponentProps<typeof MobileSearchBar>;
 }
 
@@ -51,7 +51,7 @@ export function MobileServiceTemplate(props: Props) {
 function TemplateWithContext({
   title,
   children,
-  selectedTab,
+  selectedTabKey,
   searchBarOptions,
 }: Props) {
   const {
@@ -64,20 +64,38 @@ function TemplateWithContext({
 
   const router = useApmRouter();
 
-  const tabs = useTabs({ selectedTab });
+  const tabs = useTabs({ selectedTabKey });
+  const selectedTab = tabs?.find(({ isSelected }) => isSelected);
+
+  const servicesLink = router.link('/services', {
+    query: { ...query },
+  });
 
   useBreadcrumb(
-    () => ({
-      title,
-      href: router.link(
-        `/mobile-services/{serviceName}/${selectedTab}` as const,
-        {
-          path: { serviceName },
-          query,
-        }
-      ),
-    }),
-    [query, router, selectedTab, serviceName, title]
+    () => [
+      {
+        title: i18n.translate('xpack.apm.mobileServices.breadcrumb.title', {
+          defaultMessage: 'Services',
+        }),
+        href: servicesLink,
+      },
+      ...(selectedTab
+        ? [
+            {
+              title: serviceName,
+              href: router.link('/mobile-services/{serviceName}', {
+                path: { serviceName },
+                query,
+              }),
+            },
+            {
+              title: selectedTab.label,
+              href: selectedTab.href,
+            } as { title: string; href: string },
+          ]
+        : []),
+    ],
+    [query, router, selectedTab, serviceName, servicesLink]
   );
 
   return (
@@ -123,7 +141,7 @@ function TemplateWithContext({
   );
 }
 
-function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
+function useTabs({ selectedTabKey }: { selectedTabKey: Tab['key'] }) {
   const { core, plugins } = useApmPluginContext();
   const { capabilities } = core.application;
   const { isAlertingAvailable, canReadAlerts } = getAlertingCapabilities(
@@ -136,7 +154,7 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
   const {
     path: { serviceName },
     query: queryFromUrl,
-  } = useApmParams(`/mobile-services/{serviceName}/${selectedTab}` as const);
+  } = useApmParams(`/mobile-services/{serviceName}/${selectedTabKey}` as const);
 
   const query = omit(
     queryFromUrl,
@@ -203,6 +221,6 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
       href,
       label,
       append,
-      isSelected: key === selectedTab,
+      isSelected: key === selectedTabKey,
     }));
 }

x-pack/plugins/apm/public/plugin.ts

@@ -177,6 +177,7 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
                     matchPath(currentPath: string) {
                       return [
                         '/service-groups',
+                        '/mobile-services',
                         '/services',
                         '/service-map',
                       ].some((testPath) => currentPath.startsWith(testPath));