(rocketmq-dashboard) branch rocketmq-studio updated: fix(clients): reset the text search and type filter when the nameserver changes (#4595)

[lizhimin]

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


The following commit(s) were added to refs/heads/rocketmq-studio by this push:
     new d8157bf68 fix(clients): reset the text search and type filter when the 
nameserver changes (#4595)
d8157bf68 is described below

commit d8157bf686f80bcd55b92b2391a56d96abbbe110
Author: Apulupie <167634780+frun...@users.noreply.github.com>
AuthorDate: Mon Sep 21 21:04:05 2026 +0800

    fix(clients): reset the text search and type filter when the nameserver 
changes (#4595)
    
    `handleNameserverChange` in `web/src/pages/cluster/clients.tsx` reset 
almost everything that describes the previous endpoint — the page, the selected 
endpoint, the connections, `clusterFilter`, `columnFilters`, the selected 
connection, the load error and the loading flag — but not `search` or 
`typeFilter`. Both still filter the new endpoint's rows: `typeFilter` is sent 
on the request as `type`, and `search` is applied client-side through 
`matchesClientSearch`. Filtering to consumers a [...]
    
    Both are now reset alongside the other endpoint-scoped state, and the added 
test asserts the request goes out without a `type` and that the search box is 
empty. Every setter runs inside the same event callback, so React batches them 
into one render and the load effect still fires once.
    
    Fixes #4596
---
 .../pages/cluster/__tests__/ClientsPage.test.tsx   | 30 ++++++++++++++++++++++
 web/src/pages/cluster/clients.tsx                  |  2 ++
 2 files changed, 32 insertions(+)

diff --git a/web/src/pages/cluster/__tests__/ClientsPage.test.tsx 
b/web/src/pages/cluster/__tests__/ClientsPage.test.tsx
index cfa478a5a..e53199dbd 100644
--- a/web/src/pages/cluster/__tests__/ClientsPage.test.tsx
+++ b/web/src/pages/cluster/__tests__/ClientsPage.test.tsx
@@ -527,6 +527,36 @@ describe('Clients page', () => {
     await 
expect(blob.text()).resolves.toContain('billing-svc-0@10.0.3.10:49155');
   });
 
+  it('clears the text search and type filter when the nameserver changes', 
async () => {
+    
vi.mocked(connectionsService.listConnections).mockResolvedValue(connections);
+    const user = userEvent.setup();
+    renderWithProviders(<ClientsPage />);
+
+    expect(await 
screen.findByText('order-svc-0@10.0.1.12:49152')).toBeInTheDocument();
+    
expect(screen.getByText('payment-svc-0@10.0.1.13:49153')).toBeInTheDocument();
+
+    const searchInput = screen.getByPlaceholderText('搜索 Client ID 或地址');
+    await user.type(searchInput, 'order-svc');
+    await user.click(screen.getByRole('combobox', { name: '类型' }));
+    await selectOption(user, 'Consumer');
+
+    expect(connectionsService.listConnections).toHaveBeenLastCalledWith(
+      expect.objectContaining({ namesrvAddr: 'namesrv-1:9876', type: 
'Consumer' }),
+    );
+    
expect(screen.queryByText('payment-svc-0@10.0.1.13:49153')).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('combobox', { name: 'NameServer' }));
+    await selectOption(user, 'rocketmq2 (namesrv-2:9876)');
+
+    await waitFor(() => {
+      expect(connectionsService.listConnections).toHaveBeenLastCalledWith(
+        expect.objectContaining({ namesrvAddr: 'namesrv-2:9876', type: 
undefined }),
+      );
+    });
+    expect(screen.getByPlaceholderText('搜索 Client ID 或地址')).toHaveValue('');
+    expect(await 
screen.findByText('audit-svc-0@10.0.2.10:49154')).toBeInTheDocument();
+  });
+
   it('renders empty distributions when no connections are available', async () 
=> {
     vi.mocked(connectionsService.listConnections).mockResolvedValue([]);
     renderWithProviders(<ClientsPage />);
diff --git a/web/src/pages/cluster/clients.tsx 
b/web/src/pages/cluster/clients.tsx
index 9ceaebfe6..256cb8cb5 100644
--- a/web/src/pages/cluster/clients.tsx
+++ b/web/src/pages/cluster/clients.tsx
@@ -191,6 +191,8 @@ const ClientsPage = () => {
     setSelectedEndpoint(endpoint);
     setConnections([]);
     setClusterFilter('ALL');
+    setSearch('');
+    setTypeFilter('ALL');
     // Column filters describe the previous endpoint's rows; keeping them (or 
antd's
     // uncontrolled internal filter state) would hide every row of the new 
endpoint.
     setColumnFilters({});