[APM] Breadcrumbs not updating from service jump on service map

.eslintrc.js

@@ -979,7 +979,7 @@ module.exports = {
         'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
         'react-hooks/exhaustive-deps': [
           'error',
-          { additionalHooks: '^(useFetcher|useProgressiveFetcher)$' },
+          { additionalHooks: '^(useFetcher|useProgressiveFetcher|useBreadcrumb)$' },
         ],
       },
     },

x-pack/plugins/apm/public/components/app/breadcrumb/index.tsx

@@ -18,7 +18,10 @@ export const Breadcrumb = ({
   children: React.ReactElement;
 }) => {
   const { core } = useApmPluginContext();
-  useBreadcrumb({ title, href: core.http.basePath.prepend('/app/apm' + href) });
+  useBreadcrumb(
+    () => ({ title, href: core.http.basePath.prepend('/app/apm' + href) }),
+    [core.http.basePath, href, title]
+  );
 
   return children;
 };

x-pack/plugins/apm/public/components/app/dependency_detail_overview/index.tsx

@@ -30,26 +30,39 @@ export function DependencyDetailOverview() {
 
   const apmRouter = useApmRouter();
 
-  useBreadcrumb([
-    {
-      title: i18n.translate(
-        'xpack.apm.dependencyDetailOverview.breadcrumbTitle',
-        { defaultMessage: 'Overview' }
-      ),
-      href: apmRouter.link('/dependencies/overview', {
-        query: {
-          dependencyName,
-          rangeFrom,
-          rangeTo,
-          refreshInterval,
-          refreshPaused,
-          environment,
-          kuery,
-          comparisonEnabled,
-        },
-      }),
-    },
-  ]);
+  useBreadcrumb(
+    () => [
+      {
+        title: i18n.translate(
+          'xpack.apm.dependencyDetailOverview.breadcrumbTitle',
+          { defaultMessage: 'Overview' }
+        ),
+        href: apmRouter.link('/dependencies/overview', {
+          query: {
+            dependencyName,
+            rangeFrom,
+            rangeTo,
+            refreshInterval,
+            refreshPaused,
+            environment,
+            kuery,
+            comparisonEnabled,
+          },
+        }),
+      },
+    ],
+    [
+      apmRouter,
+      comparisonEnabled,
+      dependencyName,
+      environment,
+      kuery,
+      rangeFrom,
+      rangeTo,
+      refreshInterval,
+      refreshPaused,
+    ]
+  );
 
   return (
     <>

x-pack/plugins/apm/public/components/app/dependency_detail_view/index.tsx

@@ -31,36 +31,49 @@ export function DependencyDetailView({
 
   const apmRouter = useApmRouter();
 
-  useBreadcrumb([
-    {
-      title: DependenciesInventoryTitle,
-      href: apmRouter.link('/dependencies/inventory', {
-        query: {
-          rangeFrom,
-          rangeTo,
-          refreshInterval,
-          refreshPaused,
-          environment,
-          kuery,
-          comparisonEnabled,
-        },
-      }),
-    },
-    {
-      title: dependencyName,
-      href: apmRouter.link('/dependencies', {
-        query: {
-          dependencyName,
-          rangeFrom,
-          rangeTo,
-          refreshInterval,
-          refreshPaused,
-          environment,
-          kuery,
-          comparisonEnabled,
-        },
-      }),
-    },
-  ]);
+  useBreadcrumb(
+    () => [
+      {
+        title: DependenciesInventoryTitle,
+        href: apmRouter.link('/dependencies/inventory', {
+          query: {
+            rangeFrom,
+            rangeTo,
+            refreshInterval,
+            refreshPaused,
+            environment,
+            kuery,
+            comparisonEnabled,
+          },
+        }),
+      },
+      {
+        title: dependencyName,
+        href: apmRouter.link('/dependencies', {
+          query: {
+            dependencyName,
+            rangeFrom,
+            rangeTo,
+            refreshInterval,
+            refreshPaused,
+            environment,
+            kuery,
+            comparisonEnabled,
+          },
+        }),
+      },
+    ],
+    [
+      apmRouter,
+      comparisonEnabled,
+      dependencyName,
+      environment,
+      kuery,
+      rangeFrom,
+      rangeTo,
+      refreshInterval,
+      refreshPaused,
+    ]
+  );
   return <DependencyDetailTemplate>{children}</DependencyDetailTemplate>;
 }

x-pack/plugins/apm/public/components/app/error_group_details/index.tsx

@@ -127,23 +127,36 @@ export function ErrorGroupDetails() {
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  useBreadcrumb({
-    title: groupId,
-    href: apmRouter.link('/services/{serviceName}/errors/{groupId}', {
-      path: {
-        serviceName,
-        groupId,
-      },
-      query: {
-        rangeFrom,
-        rangeTo,
-        environment,
-        kuery,
-        serviceGroup,
-        comparisonEnabled,
-      },
+  useBreadcrumb(
+    () => ({
+      title: groupId,
+      href: apmRouter.link('/services/{serviceName}/errors/{groupId}', {
+        path: {
+          serviceName,
+          groupId,
+        },
+        query: {
+          rangeFrom,
+          rangeTo,
+          environment,
+          kuery,
+          serviceGroup,
+          comparisonEnabled,
+        },
+      }),
     }),
-  });
+    [
+      apmRouter,
+      comparisonEnabled,
+      environment,
+      groupId,
+      kuery,
+      rangeFrom,
+      rangeTo,
+      serviceGroup,
+      serviceName,
+    ]
+  );
 
   const { data: errorGroupData } = useFetcher(
     (callApmApi) => {

x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx

@@ -60,19 +60,22 @@ export function ServiceNodeMetrics() {
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  useBreadcrumb({
-    title: getServiceNodeName(serviceNodeName),
-    href: apmRouter.link(
-      '/services/{serviceName}/nodes/{serviceNodeName}/metrics',
-      {
-        path: {
-          serviceName,
-          serviceNodeName,
-        },
-        query,
-      }
-    ),
-  });
+  useBreadcrumb(
+    () => ({
+      title: getServiceNodeName(serviceNodeName),
+      href: apmRouter.link(
+        '/services/{serviceName}/nodes/{serviceNodeName}/metrics',
+        {
+          path: {
+            serviceName,
+            serviceNodeName,
+          },
+          query,
+        }
+      ),
+    }),
+    [apmRouter, query, serviceName, serviceNodeName]
+  );
 
   const { data } = useServiceMetricChartsFetcher({
     serviceNodeName,

x-pack/plugins/apm/public/components/app/transaction_details/index.tsx

@@ -44,13 +44,16 @@ export function TransactionDetails() {
     replace(history, { query: { transactionType } });
   }
 
-  useBreadcrumb({
-    title: transactionName,
-    href: apmRouter.link('/services/{serviceName}/transactions/view', {
-      path,
-      query,
+  useBreadcrumb(
+    () => ({
+      title: transactionName,
+      href: apmRouter.link('/services/{serviceName}/transactions/view', {
+        path,
+        query,
+      }),
     }),
-  });
+    [apmRouter, path, query, transactionName]
+  );
 
   const isServerless = isServerlessAgent(runtimeName);
 

x-pack/plugins/apm/public/components/routing/service_detail/apm_service_wrapper.tsx

@@ -19,19 +19,22 @@ export function ApmServiceWrapper() {
 
   const router = useApmRouter();
 
-  useBreadcrumb([
-    {
-      title: ServiceInventoryTitle,
-      href: router.link('/services', { query }),
-    },
-    {
-      title: serviceName,
-      href: router.link('/services/{serviceName}', {
-        query,
-        path: { serviceName },
-      }),
-    },
-  ]);
+  useBreadcrumb(
+    () => [
+      {
+        title: ServiceInventoryTitle,
+        href: router.link('/services', { query }),
+      },
+      {
+        title: serviceName,
+        href: router.link('/services/{serviceName}', {
+          query,
+          path: { serviceName },
+        }),
+      },
+    ],
+    [query, router, serviceName]
+  );
 
   return <Outlet />;
 }

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

@@ -86,13 +86,16 @@ function TemplateWithContext({
 
   const tabs = useTabs({ selectedTab });
 
-  useBreadcrumb({
-    title,
-    href: router.link(`/services/{serviceName}/${selectedTab}` as const, {
-      path: { serviceName },
-      query,
+  useBreadcrumb(
+    () => ({
+      title,
+      href: router.link(`/services/{serviceName}/${selectedTab}` as const, {
+        path: { serviceName },
+        query,
+      }),
     }),
-  });
+    [query, router, selectedTab, serviceName, title]
+  );
 
   return (
     <ApmMainTemplate

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

@@ -116,30 +116,33 @@ export function ServiceGroupTemplate({
 
   const tabs = useTabs(serviceGroupContextTab);
   const selectedTab = tabs?.find(({ isSelected }) => isSelected);
-  useBreadcrumb([
-    {
-      title: i18n.translate('xpack.apm.serviceGroups.breadcrumb.title', {
-        defaultMessage: 'Services',
-      }),
-      href: serviceGroupsLink,
-    },
-    ...(selectedTab
-      ? [
-          ...(serviceGroupName
-            ? [
-                {
-                  title: serviceGroupName,
-                  href: router.link('/services', { query }),
-                },
-              ]
-            : []),
-          {
-            title: selectedTab.label,
-            href: selectedTab.href,
-          } as { title: string; href: string },
-        ]
-      : []),
-  ]);
+  useBreadcrumb(
+    () => [
+      {
+        title: i18n.translate('xpack.apm.serviceGroups.breadcrumb.title', {
+          defaultMessage: 'Services',
+        }),
+        href: serviceGroupsLink,
+      },
+      ...(selectedTab
+        ? [
+            ...(serviceGroupName
+              ? [
+                  {
+                    title: serviceGroupName,
+                    href: router.link('/services', { query }),
+                  },
+                ]
+              : []),
+            {
+              title: selectedTab.label,
+              href: selectedTab.href,
+            } as { title: string; href: string },
+          ]
+        : []),
+    ],
+    [query, router, selectedTab, serviceGroupName, serviceGroupsLink]
+  );
   return (
     <ApmMainTemplate
       pageTitle={isServiceGroupsEnabled ? serviceGroupsPageTitle : pageTitle}