(rocketmq-dashboard) 30/45: fix: load producer topics from Studio API response (#501)

[li...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

lizhimins pushed a commit to branch rocketmq-studio
in repository https://gitbox.apache.org/repos/asf/rocketmq-dashboard.git

commit 28ed0d47f3094b50b47d419ce14bbac62ad452a9
Author: aias00 <li...@apache.org>
AuthorDate: Thu Jul 23 22:42:59 2026 -0700

    fix: load producer topics from Studio API response (#501)
    
    Fix Producer page topic list to read from Studio API new format (data[].name) with backward compatibility for legacy topicList format.
---
 web/src/api/producer.test.ts | 12 +++++++++++-
 web/src/api/producer.ts      | 14 ++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/web/src/api/producer.test.ts b/web/src/api/producer.test.ts
index c87fa070..b5b3f31c 100644
--- a/web/src/api/producer.test.ts
+++ b/web/src/api/producer.test.ts
@@ -33,7 +33,17 @@ describe('Producer API', () => {
     vi.unstubAllGlobals();
   });
 
-  it('fetches topic list sorted alphabetically', async () => {
+  it('fetches Studio topic records sorted alphabetically', async () => {
+    mock.onGet('/topics').reply(200, {
+      code: 200,
+      data: [{ name: 'order-events' }, { name: 'user-signup' }, { name: 'batch-process' }],
+    });
+
+    const result = await fetchTopicList();
+    expect(result).toEqual(['batch-process', 'order-events', 'user-signup']);
+  });
+
+  it('keeps compatibility with legacy topicList responses', async () => {
     mock.onGet('/topics').reply(200, {
       topicList: ['order-events', 'user-signup', 'batch-process'],
     });
diff --git a/web/src/api/producer.ts b/web/src/api/producer.ts
index 80e76f58..26c31aba 100644
--- a/web/src/api/producer.ts
+++ b/web/src/api/producer.ts
@@ -25,12 +25,22 @@ export interface ProducerConnection {
   versionDesc: string;
 }
 
+interface TopicRecord {
+  name: string;
+}
+
+interface TopicListResponse {
+  data?: TopicRecord[];
+  topicList?: string[];
+}
+
 // ─── API ────────────────────────────────────────────────────────
 
 /** Fetch all topic names */
 export async function fetchTopicList(): Promise<string[]> {
-  const res = await client.get<{ topicList: string[] }>('/topics');
-  return (res.data?.topicList ?? []).sort();
+  const res = await client.get<TopicListResponse>('/topics');
+  const topics = res.data.data?.map((topic) => topic.name) ?? res.data.topicList ?? [];
+  return topics.sort();
 }
 
 /** Query producer connections by topic and group */