fix(frontend): use grpc base path

Author: malinskibeniamin

frontend/src/app.test.tsx

@@ -0,0 +1,133 @@
+/**
+ * Copyright 2022 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
+ */
+
+// This test imports app.tsx to assert its module-level transport wiring, so the
+// app's heavy runtime dependencies are mocked below.
+vi.mock('@connectrpc/connect-web', () => ({
+  createConnectTransport: vi.fn(() => ({ kind: 'transport' })),
+}));
+
+vi.mock('./config', () => ({
+  setup: vi.fn(() => vi.fn()),
+  getGrpcBasePath: vi.fn(() => '/redpanda-console'),
+  addBearerTokenInterceptor: vi.fn((next) => async (request: unknown) => await next(request)),
+  checkExpiredLicenseInterceptor: vi.fn((next) => async (request: unknown) => await next(request)),
+}));
+
+vi.mock('@builder.io/sdk-react', () => ({
+  Content: () => null,
+}));
+
+vi.mock('@connectrpc/connect-query', () => ({
+  TransportProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+vi.mock('@redpanda-data/ui', () => ({
+  ChakraProvider: ({ children }: { children: React.ReactNode }) => children,
+  redpandaToastOptions: {},
+}));
+
+vi.mock('@tanstack/react-query', () => ({
+  QueryClientProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+vi.mock('@tanstack/react-query-devtools', () => ({
+  ReactQueryDevtools: () => null,
+}));
+
+vi.mock('@tanstack/react-router', () => ({
+  createRouter: vi.fn(() => ({})),
+  RouterProvider: () => null,
+}));
+
+vi.mock('components/builder-io/builder-custom-components', () => ({
+  builderCustomComponents: [],
+}));
+
+vi.mock('components/constants', () => ({
+  BUILDER_API_KEY: 'test-key',
+}));
+
+vi.mock('custom-feature-flag-provider', () => ({
+  CustomFeatureFlagProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+vi.mock('hooks/use-developer-view', () => ({
+  default: () => false,
+}));
+
+vi.mock('protobuf-registry', () => ({
+  protobufRegistry: {},
+}));
+
+vi.mock('query-client', () => ({
+  default: {},
+}));
+
+vi.mock('utils/env', () => ({
+  getBasePath: () => '/redpanda-console',
+}));
+
+vi.mock('utils/redpanda-theme', () => ({
+  patchedRedpandaTheme: {},
+}));
+
+vi.mock('./components/misc/not-found-page', () => ({
+  NotFoundPage: () => null,
+}));
+
+vi.mock('./routeTree.gen', () => ({
+  routeTree: {},
+}));
+
+vi.mock('./state/ui', () => ({
+  installUISettingsSideEffects: vi.fn(() => vi.fn()),
+}));
+
+const importAppWithMocks = async ({ grpcBasePath = '/redpanda-console' }: { grpcBasePath?: string } = {}) => {
+  const { getGrpcBasePath } = await import('./config');
+  vi.mocked(getGrpcBasePath).mockReturnValue(grpcBasePath);
+
+  await import('./app');
+
+  const { createConnectTransport } = await import('@connectrpc/connect-web');
+
+  return { createConnectTransport, getGrpcBasePath };
+};
+
+describe('App dataplane transport', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    vi.resetAllMocks();
+  });
+
+  test('uses the configured gRPC base path for Connect Query requests', async () => {
+    const { createConnectTransport, getGrpcBasePath } = await importAppWithMocks();
+
+    expect(getGrpcBasePath).toHaveBeenCalledWith();
+    expect(createConnectTransport).toHaveBeenCalledWith(
+      expect.objectContaining({
+        baseUrl: '/redpanda-console',
+      })
+    );
+  });
+
+  test('keeps origin-root behavior for root-mounted deployments', async () => {
+    const { createConnectTransport, getGrpcBasePath } = await importAppWithMocks({ grpcBasePath: '' });
+
+    expect(getGrpcBasePath).toHaveBeenCalledWith();
+    expect(createConnectTransport).toHaveBeenCalledWith(
+      expect.objectContaining({
+        baseUrl: '',
+      })
+    );
+  });
+});

frontend/src/app.tsx

@@ -55,7 +55,7 @@ import { installUISettingsSideEffects } from './state/ui';
 
 // Create transport before router so loaders can use it
 const dataplaneTransport = createConnectTransport({
-  baseUrl: getGrpcBasePath(''), // Embedded mode handles the path separately.
+  baseUrl: getGrpcBasePath(),
   interceptors: [addBearerTokenInterceptor, checkExpiredLicenseInterceptor],
   jsonOptions: {
     registry: protobufRegistry,

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

@@ -11,6 +11,10 @@
 
 import { act, render, waitFor } from '@testing-library/react';
 
+vi.mock('@connectrpc/connect-web', () => ({
+  createConnectTransport: vi.fn(() => ({ kind: 'transport' })),
+}));
+
 // Mock TanStack Router before any imports
 vi.mock('@tanstack/react-router', async () => {
   const actual = await vi.importActual('@tanstack/react-router');
@@ -39,7 +43,7 @@ vi.mock('config', () => ({
     jwt: undefined as string | undefined,
   },
   setup: vi.fn(),
-  getGrpcBasePath: vi.fn(() => 'http://localhost:9090'),
+  getGrpcBasePath: vi.fn((overrideUrl?: string) => overrideUrl ?? 'http://localhost:9090'),
   addBearerTokenInterceptor: vi.fn((next) => async (request: unknown) => await next(request)),
   checkExpiredLicenseInterceptor: vi.fn((next) => async (request: unknown) => await next(request)),
 }));
@@ -74,9 +78,11 @@ vi.mock('./token-manager', () => ({
   },
 }));
 
+import { createConnectTransport } from '@connectrpc/connect-web';
+
 import { ConsoleApp } from './console-app';
 import type { ConsoleAppProps } from './types';
-import { config, setup } from '../config';
+import { config, getGrpcBasePath, setup } from '../config';
 
 describe('ConsoleApp', () => {
   const mockGetAccessToken = vi.fn();
@@ -463,6 +469,32 @@ describe('ConsoleApp', () => {
       });
     });
 
+    test('uses explicit gRPC URL override for the federated Connect Query transport', async () => {
+      render(<ConsoleApp {...defaultProps} config={{ urlOverride: { grpc: 'https://grpc.example.com' } }} />);
+
+      await waitFor(() => {
+        expect(getGrpcBasePath).toHaveBeenCalledWith('https://grpc.example.com');
+        expect(createConnectTransport).toHaveBeenCalledWith(
+          expect.objectContaining({
+            baseUrl: 'https://grpc.example.com',
+          })
+        );
+      });
+    });
+
+    test('uses the default gRPC base path for federated transport when no override is provided', async () => {
+      render(<ConsoleApp {...defaultProps} />);
+
+      await waitFor(() => {
+        expect(getGrpcBasePath).toHaveBeenCalledWith(undefined);
+        expect(createConnectTransport).toHaveBeenCalledWith(
+          expect.objectContaining({
+            baseUrl: 'http://localhost:9090',
+          })
+        );
+      });
+    });
+
     test('initializes without throwing when config is undefined', async () => {
       const propsWithoutConfig = {
         ...defaultProps,