Merge pull request #2381 from redpanda-data/jc/fix-mf-router-recreation-loop

fix(federation): prevent router recreation loop in MF mode

Author: c-julin

frontend/src/components/misc/router-sync.test.tsx

@@ -0,0 +1,107 @@
+/**
+ * Copyright 2026 Redpanda Data, Inc.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the file https://github.com/redpanda-data/redpanda/blob/dev/licenses/bsl.md
+ *
+ * As of the Change Date specified in that file, in accordance with
+ * the Business Source License, use of this software will be governed
+ * by the Apache License, Version 2.0
+ */
+
+import { render } from '@testing-library/react';
+
+const mockNavigate = vi.fn();
+const mockLocation = { pathname: '/topics', searchStr: '' };
+const mockRouter = {};
+
+vi.mock('@tanstack/react-router', () => ({
+  useNavigate: () => mockNavigate,
+  useLocation: () => mockLocation,
+  useRouter: () => mockRouter,
+}));
+
+vi.mock('../../config', () => ({
+  config: {
+    jwt: undefined as string | undefined,
+    clusterId: undefined as string | undefined,
+  },
+  isEmbedded: vi.fn(() => false),
+}));
+
+vi.mock('../../hubspot/hubspot.helper', () => ({
+  trackHubspotPage: vi.fn(),
+}));
+
+vi.mock('../../state/app-global', () => ({
+  appGlobal: {
+    setNavigate: vi.fn(),
+    setRouter: vi.fn(),
+    setLocation: vi.fn(),
+  },
+}));
+
+vi.mock('../../state/backend-api', () => ({
+  api: {
+    errors: [],
+  },
+}));
+
+import { RouterSync } from './router-sync';
+import { config, isEmbedded } from '../../config';
+
+describe('RouterSync', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    config.jwt = undefined;
+    config.clusterId = undefined;
+    mockLocation.pathname = '/topics';
+  });
+
+  test('does not dispatch [console] navigated events when not embedded', () => {
+    const dispatchSpy = vi.spyOn(window, 'dispatchEvent');
+    vi.mocked(isEmbedded).mockReturnValue(false);
+
+    render(<RouterSync />);
+
+    const consoleEvents = dispatchSpy.mock.calls.filter(
+      ([event]) => event instanceof CustomEvent && event.type === '[console] navigated'
+    );
+    expect(consoleEvents).toHaveLength(0);
+
+    dispatchSpy.mockRestore();
+  });
+
+  test('does not dispatch [console] navigated events in federated mode (clusterId set)', () => {
+    const dispatchSpy = vi.spyOn(window, 'dispatchEvent');
+    vi.mocked(isEmbedded).mockReturnValue(true);
+    config.clusterId = 'test-cluster-123';
+    mockLocation.pathname = '/schema-registry';
+
+    render(<RouterSync />);
+
+    const consoleEvents = dispatchSpy.mock.calls.filter(
+      ([event]) => event instanceof CustomEvent && event.type === '[console] navigated'
+    );
+    expect(consoleEvents).toHaveLength(0);
+
+    dispatchSpy.mockRestore();
+  });
+
+  test('dispatches [console] navigated events in embedded non-federated mode', () => {
+    const dispatchSpy = vi.spyOn(window, 'dispatchEvent');
+    vi.mocked(isEmbedded).mockReturnValue(true);
+    config.clusterId = undefined;
+    mockLocation.pathname = '/schema-registry';
+
+    render(<RouterSync />);
+
+    const consoleEvents = dispatchSpy.mock.calls.filter(
+      ([event]) => event instanceof CustomEvent && event.type === '[console] navigated'
+    );
+    expect(consoleEvents).toHaveLength(1);
+    expect((consoleEvents[0][0] as CustomEvent).detail).toBe('/schema-registry');
+
+    dispatchSpy.mockRestore();
+  });
+});

frontend/src/components/misc/router-sync.tsx

@@ -12,7 +12,7 @@
 import { useLocation, useNavigate, useRouter } from '@tanstack/react-router';
 import { useEffect, useRef } from 'react';
 
-import { isEmbedded } from '../../config';
+import { config as appConfig, isEmbedded } from '../../config';
 import { trackHubspotPage } from '../../hubspot/hubspot.helper';
 import { appGlobal } from '../../state/app-global';
 import { api } from '../../state/backend-api';
@@ -54,10 +54,13 @@ export const RouterSync = () => {
     appGlobal.setLocation(location);
   }, [location]);
 
-  // Notify shell (Cloud UI) when Console navigates internally
-  // This enables bidirectional sync between TanStack Router and React Router DOM
+  // Notify shell (Cloud UI) when Console navigates internally.
+  // Skip in MFv2 federated mode — console-app.tsx handles navigation sync
+  // via the onRouteChange callback. Dispatching events here too creates a
+  // feedback loop: Console dispatches → cloud-ui navigates → Console sees
+  // new path → dispatches again.
   useEffect(() => {
-    if (isEmbedded() && location.pathname && previousPathRef.current !== location.pathname) {
+    if (isEmbedded() && !isFederatedMode() && location.pathname && previousPathRef.current !== location.pathname) {
       // Dispatch event for shell to sync its router state
       window.dispatchEvent(new CustomEvent('[console] navigated', { detail: location.pathname }));
       previousPathRef.current = location.pathname;
@@ -66,3 +69,13 @@ export const RouterSync = () => {
 
   return null;
 };
+
+/**
+ * Detect MFv2 federated mode. In federated mode, console-app.tsx sets up its own
+ * navigation sync via onRouteChange — the legacy window event dispatch is not needed.
+ */
+function isFederatedMode(): boolean {
+  // config.clusterId is only set in federated mode (via setup() in console-app.tsx).
+  // In standalone mode, it's undefined.
+  return appConfig.clusterId !== undefined && appConfig.clusterId !== '';
+}

frontend/src/federation/console-app.test.tsx

@@ -262,6 +262,49 @@ describe('ConsoleApp', () => {
     });
   });
 
+  describe('Router Stability', () => {
+    test('does not recreate router when initialPath prop changes', async () => {
+      const { createRouter, createMemoryHistory } = await import('@tanstack/react-router');
+
+      const { rerender } = render(<ConsoleApp {...defaultProps} initialPath="/topics" />);
+
+      await waitFor(() => {
+        expect(mockGetAccessToken).toHaveBeenCalled();
+      });
+
+      const createRouterCallCount = vi.mocked(createRouter).mock.calls.length;
+      const createMemoryHistoryCallCount = vi.mocked(createMemoryHistory).mock.calls.length;
+
+      // Rerender with a different initialPath (simulates cloud-ui navigation)
+      rerender(<ConsoleApp {...defaultProps} initialPath="/groups" />);
+
+      // Router should NOT have been recreated
+      expect(vi.mocked(createRouter).mock.calls.length).toBe(createRouterCallCount);
+      expect(vi.mocked(createMemoryHistory).mock.calls.length).toBe(createMemoryHistoryCallCount);
+    });
+
+    test('uses first initialPath for memory history, ignores subsequent changes', async () => {
+      const { createMemoryHistory } = await import('@tanstack/react-router');
+
+      const { rerender } = render(<ConsoleApp {...defaultProps} initialPath="/topics" />);
+
+      await waitFor(() => {
+        expect(mockGetAccessToken).toHaveBeenCalled();
+      });
+
+      // Verify initial path was used
+      expect(vi.mocked(createMemoryHistory)).toHaveBeenCalledWith(
+        expect.objectContaining({ initialEntries: ['/topics'] })
+      );
+
+      const callCount = vi.mocked(createMemoryHistory).mock.calls.length;
+
+      // Changing initialPath should not create a new memory history
+      rerender(<ConsoleApp {...defaultProps} initialPath="/schema-registry" />);
+      expect(vi.mocked(createMemoryHistory).mock.calls.length).toBe(callCount);
+    });
+  });
+
   describe('Search Params Handling', () => {
     test('onRouteChange includes searchStr when route resolves with search params', async () => {
       // Get a reference to the subscribe callback so we can invoke it manually

frontend/src/federation/console-app.tsx

@@ -234,10 +234,16 @@ function ConsoleAppInner({
     [configOverrides?.urlOverride?.grpc, tokenRefreshInterceptor]
   );
 
+  // Capture initialPath on first render only — subsequent navigation is handled
+  // by the navigateTo prop via router.navigate(). Including initialPath in the
+  // useMemo deps would recreate the entire router on every host navigation,
+  // remounting all route components and retriggering all data fetches.
+  const initialPathRef = useRef(initialPath);
+
   // Create memory history router (host controls browser URL)
   const router = useMemo(() => {
     const memoryHistory = createMemoryHistory({
-      initialEntries: [initialPath],
+      initialEntries: [initialPathRef.current],
     });
 
     const r = createRouter({
@@ -252,7 +258,7 @@ function ConsoleAppInner({
     });
 
     return r;
-  }, [initialPath, queryClient, dataplaneTransport]);
+  }, [queryClient, dataplaneTransport]);
 
   // Subscribe to route changes and notify host (with loop prevention)
   useEffect(() => {