(rocketmq-dashboard) branch rocketmq-studio updated: fix(consumer): remount content by selected instance (#1707)

[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 4c97aac3 fix(consumer): remount content by selected instance (#1707)
4c97aac3 is described below

commit 4c97aac32a01bde5acd3700439886392b6d1d808
Author: aias00 <liuhon...@apache.org>
AuthorDate: Tue Aug 11 21:16:06 2026 +0800

    fix(consumer): remount content by selected instance (#1707)
---
 .../pages/instance/__tests__/ConsumerPage.test.tsx |  1 +
 web/src/pages/instance/consumer.tsx                | 37 +++++++++++-----------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/web/src/pages/instance/__tests__/ConsumerPage.test.tsx 
b/web/src/pages/instance/__tests__/ConsumerPage.test.tsx
index 0dd8b5b8..433b6193 100644
--- a/web/src/pages/instance/__tests__/ConsumerPage.test.tsx
+++ b/web/src/pages/instance/__tests__/ConsumerPage.test.tsx
@@ -364,6 +364,7 @@ describe('Consumer page', () => {
     await waitFor(() =>
       expect(consumerService.listConsumerGroups).toHaveBeenCalledWith({ 
instanceId: 'instance-b' }),
     );
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     await user.click(await screen.findByRole('button', { name: /详情/ }));
 
     await waitFor(() =>
diff --git a/web/src/pages/instance/consumer.tsx 
b/web/src/pages/instance/consumer.tsx
index adb92bae..7e30eece 100644
--- a/web/src/pages/instance/consumer.tsx
+++ b/web/src/pages/instance/consumer.tsx
@@ -184,15 +184,20 @@ export const diagnosticCacheKey = (instanceId: string, 
groupName: string) =>
 /* ═══════════════════════════════════════════
    ConsumerPage
    ═══════════════════════════════════════════ */
-const ConsumerPage = () => {
+type ConsumerPageContentProps = ReturnType<typeof useInstanceFilter>;
+
+const ConsumerPageContent = ({
+  selectedInstanceId,
+  selectedInstance,
+  selectInstance,
+  instanceOptions,
+}: ConsumerPageContentProps) => {
   const { t } = useLang();
-  const { selectedInstanceId, selectedInstance, selectInstance, 
instanceOptions } =
-    useInstanceFilter();
   const isCloudInstance =
     selectedInstance?.vendor === 'ALIYUN' || selectedInstance?.vendor === 
'TENCENT';
   const hasSelectedInstance = Boolean(selectedInstanceId);
   const [groups, setGroups] = useState<ConsumerGroup[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(hasSelectedInstance);
   const [submitting, setSubmitting] = useState(false);
   const [resetSubmitting, setResetSubmitting] = useState(false);
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
@@ -233,23 +238,9 @@ const ConsumerPage = () => {
   const groupRequestIdRef = useRef(0);
   const stackRequestIdRef = useRef(0);
 
-  useEffect(() => {
-    stackRequestIdRef.current += 1;
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- clear state 
owned by the previous instance
-    setSelectedGroup(null);
-    setModalOpen(false);
-    setResetGroup(null);
-    setResetTopic(undefined);
-    setResetModalOpen(false);
-  }, [selectedInstanceId]);
-
   useEffect(() => {
     if (!selectedInstanceId) {
       groupRequestIdRef.current += 1;
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- clear 
state when the instance scope is removed
-      setGroups([]);
-      setSelectedRowKeys([]);
-      setLoading(false);
       return;
     }
     const requestId = ++groupRequestIdRef.current;
@@ -1722,4 +1713,14 @@ const ConsumerPage = () => {
   );
 };
 
+const ConsumerPage = () => {
+  const instanceFilter = useInstanceFilter();
+  return (
+    <ConsumerPageContent
+      key={instanceFilter.selectedInstanceId || 'no-selected-instance'}
+      {...instanceFilter}
+    />
+  );
+};
+
 export default ConsumerPage;