fix(ci): pin buf-action to 1.65.0 and seed topics via gRPC in add-topic-step test

- buf.yml: buf-action defaults to the latest buf, whose formatter collapses
  single-field messages and flags ~40 already-formatted protos. Pin to 1.65.0
  (the repo's canonical version from taskfiles/proto.yaml) so CI matches
  `task proto:generate`.
- add-topic-step.test.tsx: topics now load via the gRPC ListTopics query over
  the test's router transport, not config.fetch. Register a listTopics handler
  (with a topicNames override) and drop the dead mockFetch-based seeding and the
  `expect(mockFetch).toHaveBeenCalled()` assertions that could never pass.

Author: jvorcak

.github/workflows/buf.yml

@@ -47,6 +47,10 @@ jobs:
       - name: Buf – lint, format & breaking
         uses: bufbuild/buf-action@v1
         with:
+          # Pin to the repo's canonical buf version (see taskfiles/proto.yaml install-buf)
+          # so CI formatting matches `task proto:generate`; buf-action defaults to latest,
+          # whose formatter reformats single-field messages and produces spurious diffs.
+          version: 1.65.0
           lint: true
           format: true
           breaking: ${{ github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'Buf Skip Breaking') }}
@@ -79,6 +83,7 @@ jobs:
       - name: Buf – push to registry
         uses: bufbuild/buf-action@v1
         with:
+          version: 1.65.0
           # No validation - already done in validate job
           lint: false
           format: false
@@ -112,6 +117,7 @@ jobs:
       - name: Buf – archive label (ignore if not found)
         uses: bufbuild/buf-action@v1
         with:
+          version: 1.65.0
           # Only archive - no other operations
           push: true
           token: ${{ env.BUF_TOKEN }}

frontend/src/components/pages/rp-connect/onboarding/add-topic-step.test.tsx

@@ -12,8 +12,8 @@
 import { create } from '@bufbuild/protobuf';
 import { ConnectError, createRouterTransport } from '@connectrpc/connect';
 import userEvent from '@testing-library/user-event';
-import { CreateTopicResponseSchema } from 'protogen/redpanda/api/dataplane/v1/topic_pb';
-import { createTopic } from 'protogen/redpanda/api/dataplane/v1/topic-TopicService_connectquery';
+import { CreateTopicResponseSchema, ListTopicsResponseSchema } from 'protogen/redpanda/api/dataplane/v1/topic_pb';
+import { createTopic, listTopics } from 'protogen/redpanda/api/dataplane/v1/topic-TopicService_connectquery';
 import type { ComponentProps } from 'react';
 import { useRef } from 'react';
 import { render, screen, waitFor } from 'test-utils';
@@ -60,21 +60,7 @@ import { AddTopicStep } from './add-topic-step';
 
 // ── Helpers ────────────────────────────────────────────────────────────
 
-/** gRPC ListTopicsResponse (proto JSON shape) for useListTopicsQuery */
-function createTopicsResponse(topicNames: string[]) {
-  return {
-    topics: topicNames.map((name) => ({
-      name,
-      internal: false,
-      partitionCount: 1,
-      replicationFactor: 3,
-      cleanupPolicy: 'delete',
-      logDirSummary: { totalSizeBytes: 0, replicaErrors: [], hint: '' },
-    })),
-  };
-}
-
-function createTransport(overrides?: { createTopicMock?: ReturnType<typeof vi.fn> }) {
+function createTransport(overrides?: { createTopicMock?: ReturnType<typeof vi.fn>; topicNames?: string[] }) {
   return createRouterTransport(({ rpc }) => {
     rpc(
       createTopic,
@@ -87,6 +73,20 @@ function createTransport(overrides?: { createTopicMock?: ReturnType<typeof vi.fn
           })
         )
     );
+    // useListTopicsQuery resolves topics over the gRPC transport, so seed them here.
+    rpc(listTopics, () =>
+      create(ListTopicsResponseSchema, {
+        topics: (overrides?.topicNames ?? []).map((name) => ({
+          name,
+          internal: false,
+          partitionCount: 1,
+          replicationFactor: 3,
+          cleanupPolicy: 'delete',
+          logDirSummary: { totalSizeBytes: 0n, replicaErrors: [], hint: '' },
+        })),
+        nextPageToken: '',
+      })
+    );
   });
 }
 
@@ -111,22 +111,13 @@ function TestHarness({ onResult, ...props }: HarnessProps) {
 describe('AddTopicStep', () => {
   beforeEach(() => {
     mockFetch.mockReset();
-    // Default: return empty topic list
-    mockFetch.mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve(createTopicsResponse([])),
-    });
   });
 
   it('existing topic returns name via triggerSubmit', async () => {
     const user = userEvent.setup();
-    mockFetch.mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve(createTopicsResponse(['my-topic', 'other-topic'])),
-    });
 
     let result: unknown;
-    const transport = createTransport();
+    const transport = createTransport({ topicNames: ['my-topic', 'other-topic'] });
 
     render(
       <TestHarness
@@ -138,11 +129,6 @@ describe('AddTopicStep', () => {
       { transport }
     );
 
-    // Wait for topics to load so the combobox has options
-    await waitFor(() => {
-      expect(mockFetch).toHaveBeenCalled();
-    });
-
     // The component starts in "Existing" mode when topics exist.
     // Open the combobox, type to filter, then click the matching option.
     // (Pressing Enter races cmdk's highlighted-value bookkeeping in CI under
@@ -283,11 +269,7 @@ describe('AddTopicStep', () => {
   });
 
   it('selectionMode=existing shows combobox', async () => {
-    mockFetch.mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve(createTopicsResponse(['topic-a'])),
-    });
-    const transport = createTransport();
+    const transport = createTransport({ topicNames: ['topic-a'] });
 
     render(<TestHarness onResult={() => {}} selectionMode="existing" />, { transport });
 
@@ -297,19 +279,10 @@ describe('AddTopicStep', () => {
 
   it('existing topic alert shown in create mode when name matches', async () => {
     const user = userEvent.setup();
-    mockFetch.mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve(createTopicsResponse(['existing-topic'])),
-    });
-    const transport = createTransport();
+    const transport = createTransport({ topicNames: ['existing-topic'] });
 
     render(<TestHarness onResult={() => {}} selectionMode="both" />, { transport });
 
-    // Wait for topics to load
-    await waitFor(() => {
-      expect(mockFetch).toHaveBeenCalled();
-    });
-
     // Switch to "New" tab (single-select ToggleGroupItem renders as role="radio")
     const newButton = await screen.findByRole('radio', { name: 'New' });
     await user.click(newButton);
@@ -357,11 +330,7 @@ describe('AddTopicStep', () => {
   });
 
   it('selectionMode=both renders toggle group', async () => {
-    mockFetch.mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve(createTopicsResponse(['t1'])),
-    });
-    const transport = createTransport();
+    const transport = createTransport({ topicNames: ['t1'] });
 
     render(<TestHarness onResult={() => {}} selectionMode="both" />, { transport });