From 27a14f93dfedd7864d6181d8625b40e3845d0235 Mon Sep 17 00:00:00 2001
From: liuhy <liuhongyu@apache.org>
Date: Sun, 26 Jul 2026 00:41:50 -0700
Subject: [PATCH] [Studio] Return message mock copies

---
 web/src/services/messageService.test.ts | 67 +++++++++++++++++++++++++
 web/src/services/messageService.ts      | 21 ++++++--
 2 files changed, 85 insertions(+), 3 deletions(-)
 create mode 100644 web/src/services/messageService.test.ts

diff --git a/web/src/services/messageService.test.ts b/web/src/services/messageService.test.ts
new file mode 100644
index 00000000..42b0c926
--- /dev/null
+++ b/web/src/services/messageService.test.ts
@@ -0,0 +1,67 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it, vi } from 'vitest';
+import { getMessageTrace, listDLQGroups, queryMessages } from './messageService';
+
+vi.mock('../config', () => ({
+  API_BASE_URL: '/api',
+  USE_MOCK: true,
+}));
+
+describe('message service mock data', () => {
+  it('returns copied message rows and properties', async () => {
+    const first = await queryMessages({ msgId: 'AC1E0A6400002A9F0000000001A3F2B1' });
+    expect(first[0].topic).toBe('order-create');
+    expect(first[0].properties.KEYS).toBe('order-12345');
+
+    first[0].topic = 'mutated-topic';
+    first[0].properties.KEYS = 'mutated-key';
+
+    const second = await queryMessages({ msgId: 'AC1E0A6400002A9F0000000001A3F2B1' });
+    expect(second[0].topic).toBe('order-create');
+    expect(second[0].properties.KEYS).toBe('order-12345');
+    expect(second[0]).not.toBe(first[0]);
+    expect(second[0].properties).not.toBe(first[0].properties);
+  });
+
+  it('returns copied message trace rows', async () => {
+    const first = await getMessageTrace('AC1E0A6400002A9F0000000001A3F2B1');
+    expect(first?.nodes[0].title).toBe('Producer 发送');
+    expect(first?.consumerStatus[0].group).toBe('cg-order-processor');
+
+    first!.nodes[0].title = 'mutated-node';
+    first!.consumerStatus[0].group = 'mutated-group';
+
+    const second = await getMessageTrace('AC1E0A6400002A9F0000000001A3F2B1');
+    expect(second?.nodes[0].title).toBe('Producer 发送');
+    expect(second?.consumerStatus[0].group).toBe('cg-order-processor');
+    expect(second?.nodes[0]).not.toBe(first?.nodes[0]);
+    expect(second?.consumerStatus[0]).not.toBe(first?.consumerStatus[0]);
+  });
+
+  it('returns copied DLQ group rows', async () => {
+    const first = await listDLQGroups();
+    expect(first[0].groupName).toBe('cg-order-processor');
+
+    first[0].groupName = 'mutated-group';
+
+    const second = await listDLQGroups();
+    expect(second[0].groupName).toBe('cg-order-processor');
+    expect(second[0]).not.toBe(first[0]);
+  });
+});
diff --git a/web/src/services/messageService.ts b/web/src/services/messageService.ts
index 81896b59..ee929f1e 100644
--- a/web/src/services/messageService.ts
+++ b/web/src/services/messageService.ts
@@ -5,24 +5,39 @@ import type { MessageQuery, MessageRecord, TraceRecord, DLQGroup } from '../api/
 import { mockMessages, mockMessageTraces } from '../mock/messages';
 import { mockDLQGroups } from '../mock/dlq';
 
+const cloneMessage = (message: MessageRecord): MessageRecord => ({
+  ...message,
+  properties: { ...message.properties },
+});
+
+const cloneTrace = (trace: TraceRecord): TraceRecord => ({
+  nodes: trace.nodes.map((node) => ({ ...node })),
+  consumerStatus: trace.consumerStatus.map((status) => ({ ...status })),
+});
+
+const cloneDLQGroup = (group: DLQGroup): DLQGroup => ({ ...group });
+
 export async function queryMessages(params: MessageQuery): Promise<MessageRecord[]> {
   if (USE_MOCK) {
     let result = [...mockMessages];
     if (params.topic) result = result.filter((m) => m.topic === params.topic);
     if (params.key) result = result.filter((m) => m.key.includes(params.key!));
     if (params.msgId) result = result.filter((m) => m.msgId === params.msgId);
-    return sortMessagesByStoreTimeDesc(result as unknown as MessageRecord[]);
+    return sortMessagesByStoreTimeDesc((result as unknown as MessageRecord[]).map(cloneMessage));
   }
   return messageApi.queryMessages(params);
 }
 
 export async function getMessageTrace(msgId: string): Promise<TraceRecord | null> {
-  if (USE_MOCK) return (mockMessageTraces[msgId] as unknown as TraceRecord) ?? null;
+  if (USE_MOCK) {
+    const trace = mockMessageTraces[msgId] as unknown as TraceRecord | undefined;
+    return trace ? cloneTrace(trace) : null;
+  }
   return messageApi.getMessageTrace(msgId);
 }
 
 export async function listDLQGroups(): Promise<DLQGroup[]> {
-  if (USE_MOCK) return mockDLQGroups as unknown as DLQGroup[];
+  if (USE_MOCK) return (mockDLQGroups as unknown as DLQGroup[]).map(cloneDLQGroup);
   return messageApi.listDLQGroups();
 }