[APM] Breadcrumbs not updating from service jump on service map (#136144)

* invalidating useEffect to update breadcrumbs

* removing useEffect

* removing callback function

* adding callback

* adding usEffect

* fixing

* adding fnDeps param

* addressing pr comments

* addressing pr comments

.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,7 +30,8 @@ export function DependencyDetailOverview() {
 
   const apmRouter = useApmRouter();
 
-  useBreadcrumb([
+  useBreadcrumb(
+    () => [
       {
         title: i18n.translate(
           'xpack.apm.dependencyDetailOverview.breadcrumbTitle',
@@ -49,7 +50,19 @@ export function DependencyDetailOverview() {
           },
         }),
       },
-  ]);
+    ],
+    [
+      apmRouter,
+      comparisonEnabled,
+      dependencyName,
+      environment,
+      kuery,
+      rangeFrom,
+      rangeTo,
+      refreshInterval,
+      refreshPaused,
+    ]
+  );
 
   return (
     <>

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

@@ -31,7 +31,8 @@ export function DependencyDetailView({
 
   const apmRouter = useApmRouter();
 
-  useBreadcrumb([
+  useBreadcrumb(
+    () => [
       {
         title: DependenciesInventoryTitle,
         href: apmRouter.link('/dependencies/inventory', {
@@ -61,6 +62,18 @@ export function DependencyDetailView({
           },
         }),
       },
-  ]);
+    ],
+    [
+      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,7 +127,8 @@ export function ErrorGroupDetails() {
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  useBreadcrumb({
+  useBreadcrumb(
+    () => ({
       title: groupId,
       href: apmRouter.link('/services/{serviceName}/errors/{groupId}', {
         path: {
@@ -143,7 +144,19 @@ export function ErrorGroupDetails() {
           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,7 +60,8 @@ export function ServiceNodeMetrics() {
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
-  useBreadcrumb({
+  useBreadcrumb(
+    () => ({
       title: getServiceNodeName(serviceNodeName),
       href: apmRouter.link(
         '/services/{serviceName}/nodes/{serviceNodeName}/metrics',
@@ -72,7 +73,9 @@ export function ServiceNodeMetrics() {
           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({
+  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,7 +19,8 @@ export function ApmServiceWrapper() {
 
   const router = useApmRouter();
 
-  useBreadcrumb([
+  useBreadcrumb(
+    () => [
       {
         title: ServiceInventoryTitle,
         href: router.link('/services', { query }),
@@ -31,7 +32,9 @@ export function ApmServiceWrapper() {
           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({
+  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,7 +116,8 @@ export function ServiceGroupTemplate({
 
   const tabs = useTabs(serviceGroupContextTab);
   const selectedTab = tabs?.find(({ isSelected }) => isSelected);
-  useBreadcrumb([
+  useBreadcrumb(
+    () => [
       {
         title: i18n.translate('xpack.apm.serviceGroups.breadcrumb.title', {
           defaultMessage: 'Services',
@@ -139,7 +140,9 @@ export function ServiceGroupTemplate({
             } as { title: string; href: string },
           ]
         : []),
-  ]);
+    ],
+    [query, router, selectedTab, serviceGroupName, serviceGroupsLink]
+  );
   return (
     <ApmMainTemplate
       pageTitle={isServiceGroupsEnabled ? serviceGroupsPageTitle : pageTitle}

x-pack/plugins/apm/public/context/breadcrumbs/use_breadcrumb.ts

@@ -10,7 +10,10 @@ import { useContext, useEffect, useRef } from 'react';
 import { castArray } from 'lodash';
 import { Breadcrumb, BreadcrumbsContext } from './context';
 
-export function useBreadcrumb(breadcrumb: Breadcrumb | Breadcrumb[]) {
+export function useBreadcrumb(
+  callback: () => Breadcrumb | Breadcrumb[],
+  fnDeps: any[]
+) {
   const api = useContext(BreadcrumbsContext);
 
   if (!api) {
@@ -29,7 +32,7 @@ export function useBreadcrumb(breadcrumb: Breadcrumb | Breadcrumb[]) {
     matchedRoute.current = match?.route;
 
     if (matchedRoute.current) {
-      api.set(matchedRoute.current, castArray(breadcrumb));
+      api.set(matchedRoute.current, castArray(callback()));
     }
 
     return () => {
@@ -38,5 +41,5 @@ export function useBreadcrumb(breadcrumb: Breadcrumb | Breadcrumb[]) {
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [match, ...fnDeps]);
 }

x-pack/plugins/apm/public/hooks/use_dependency_detail_operations_breadcrumb.ts

@@ -26,7 +26,8 @@ export function useDependencyDetailOperationsBreadcrumb() {
 
   const apmRouter = useApmRouter();
 
-  useBreadcrumb([
+  useBreadcrumb(
+    () => [
       {
         title: i18n.translate(
           'xpack.apm.dependencyDetailOperations.breadcrumbTitle',
@@ -45,5 +46,17 @@ export function useDependencyDetailOperationsBreadcrumb() {
           },
         }),
       },
-  ]);
+    ],
+    [
+      apmRouter,
+      comparisonEnabled,
+      dependencyName,
+      environment,
+      kuery,
+      rangeFrom,
+      rangeTo,
+      refreshInterval,
+      refreshPaused,
+    ]
+  );
 }