chore: enhance MessagesPage to manage URL parameters and prevent stale selections

Author: debdevops

README.md

@@ -28,7 +28,7 @@ Production breaks at 2 AM. Your cloud portal shows **5,000 messages in the Dead-
 > **Your cloud console shows you counts. ServiceHub shows you answers.**
 
 > [!IMPORTANT]
-> **Built for strict environments.** Read-only by default (`Peek`, never consume) · connection strings AES-GCM-256 encrypted at rest · **zero external calls** — pattern analysis runs entirely in your browser, no message data ever leaves your network · destructive actions (replay, send) blocked on production namespaces. Details in [Security](#security).
+> **Built for strict environments.** Read-only by default (`Peek`, never consume) · connection strings AES-GCM-256 encrypted at rest · **zero external calls by default** — pattern analysis runs entirely in your browser and no message data ever leaves your network ([telemetry](#application-insights-telemetry) is opt-in and disabled unless you enable it) · destructive actions (replay, send) blocked on production namespaces. Details in [Security](#security).
 
 > [!TIP]
 > **No credentials?** Try the built-in [Simulator Mode](#simulator-mode) — runs 3 synthetic namespaces (Azure + AWS + GCP) with 50 seeded messages each. No cloud account needed.

apps/web/src/__tests__/pages/MessagesPage.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, useLocation, useNavigate } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { MessagesPage } from '@/pages/MessagesPage';
 
@@ -89,13 +89,32 @@ const mockMessagesData = {
   totalCount: 2,
 };
 
+// Exposes the live router URL to assertions, and a button that simulates the
+// app's sidebar navigation to another queue while (realistically) carrying the
+// existing query params along — including a stale ?message= deep link.
+function LocationProbe() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  return (
+    <>
+      <span data-testid="location-search">{location.search}</span>
+      <button onClick={() => navigate('/messages?namespace=ns1&queue=other-queue&message=msg-1')}>
+        go-other-queue
+      </button>
+    </>
+  );
+}
+
 function createWrapper(initialPath = '/messages?namespace=ns1&queue=test-queue') {
   const queryClient = new QueryClient({
     defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
   });
   return ({ children }: { children: React.ReactNode }) => (
     <MemoryRouter initialEntries={[initialPath]}>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      <QueryClientProvider client={queryClient}>
+        {children}
+        <LocationProbe />
+      </QueryClientProvider>
     </MemoryRouter>
   );
 }
@@ -288,12 +307,39 @@ describe('MessagesPage', () => {
       expect(screen.getByTestId('selected-id')).toHaveTextContent('msg-2');
     });
 
+    it('mirrors the selection into the URL so the link is shareable', () => {
+      const Wrapper = createWrapper();
+      render(<Wrapper><MessagesPage /></Wrapper>);
+      expect(screen.getByTestId('location-search')).not.toHaveTextContent('message=');
+      fireEvent.click(screen.getByText('Select msg-2'));
+      expect(screen.getByTestId('location-search')).toHaveTextContent('message=msg-2');
+    });
+
     it('clears the selection when switching queue tabs', () => {
       const Wrapper = createWrapper('/messages?namespace=ns1&queue=test-queue&message=msg-1');
       render(<Wrapper><MessagesPage /></Wrapper>);
       expect(screen.getByTestId('selected-id')).toHaveTextContent('msg-1');
       fireEvent.click(screen.getByText(/Dead-Letter \(/));
       expect(screen.getByTestId('selected-id')).toHaveTextContent('none');
     });
+
+    it('removes the message param from the URL when switching queue tabs', () => {
+      const Wrapper = createWrapper('/messages?namespace=ns1&queue=test-queue&message=msg-1');
+      render(<Wrapper><MessagesPage /></Wrapper>);
+      expect(screen.getByTestId('location-search')).toHaveTextContent('message=msg-1');
+      fireEvent.click(screen.getByText(/Dead-Letter \(/));
+      expect(screen.getByTestId('location-search')).not.toHaveTextContent('message=');
+    });
+
+    it('clears selection and the stale message param when navigating to another entity', () => {
+      const Wrapper = createWrapper('/messages?namespace=ns1&queue=test-queue&message=msg-1');
+      render(<Wrapper><MessagesPage /></Wrapper>);
+      expect(screen.getByTestId('selected-id')).toHaveTextContent('msg-1');
+      // Sidebar-style navigation to a different queue carrying the old param along
+      fireEvent.click(screen.getByText('go-other-queue'));
+      expect(screen.getByTestId('selected-id')).toHaveTextContent('none');
+      expect(screen.getByTestId('location-search')).toHaveTextContent('queue=other-queue');
+      expect(screen.getByTestId('location-search')).not.toHaveTextContent('message=');
+    });
   });
 });

apps/web/src/pages/MessagesPage.tsx

@@ -179,15 +179,26 @@ export function MessagesPage() {
     }
   }, [queueTypeParam]);
 
-  // Clear selection when switching queues/topics to prevent stale detail panel.
-  // Skipped on first render so a deep-linked "?message=<id>" selection survives page load.
+  // Clear selection when switching queues/topics to prevent stale detail panel,
+  // and drop the ?message= param so the URL never carries a deep link into an
+  // entity the message doesn't belong to. Skipped on first render so a
+  // deep-linked "?message=<id>" selection survives page load.
   const isFirstEntityRender = useRef(true);
   useEffect(() => {
     if (isFirstEntityRender.current) {
       isFirstEntityRender.current = false;
       return;
     }
     setSelectedMessageId(null);
+    setSearchParams(prev => {
+      const next = new URLSearchParams(prev);
+      next.delete('message');
+      return next;
+    }, { replace: true });
+    // setSearchParams is deliberately omitted from deps: react-router recreates it on
+    // every location change, so including it re-runs this effect after each URL update
+    // and wipes a selection the instant it is made.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [namespaceId, queueName, topicName, subscriptionName]);
 
   // Reset pagination when queue/topic/tab changes