fix: in react ui, sidebar may re-close when navigating

This is related to #361, which only fixed half of the problem.

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/page/PageBreadcrumbs.tsx

@@ -1,4 +1,4 @@
-import { Link } from "react-router"
+import { useSearchParams, Link } from "react-router"
 import { useCallback } from "react"
 import { Breadcrumb, BreadcrumbItem } from "@patternfly/react-core"
 
@@ -14,7 +14,13 @@ export default function PageBreadcrumbs({
   breadcrumb1,
   breadcrumb2,
 }: PageBreadcrumbProps) {
-  const renderHome = useCallback(() => <Link to="/welcome">Home</Link>, [])
+  const [searchParams] = useSearchParams()
+  const s = searchParams.toString()
+  const search = s.length > 0 ? "?" + s : ""
+  const renderHome = useCallback(
+    () => <Link to={"/welcome" + search}>Home</Link>,
+    [search],
+  )
 
   return (
     <Breadcrumb>

pdl-live-react/src/page/Sidebar.tsx

@@ -12,9 +12,12 @@ import Demos from "./DemoNavItems"
 import MyTraces from "./MyTracesNavItems"
 
 export default function Sidebar() {
-  const [searchParams] = useSearchParams()
   const { hash, pathname: activeItem } = useLocation()
 
+  const [searchParams] = useSearchParams()
+  const s = searchParams.toString()
+  const search = (s.length > 0 ? "?" + s : "") + hash
+
   return (
     <PageSidebar isSidebarOpen={!!searchParams.get("sidebar")}>
       <PageSidebarBody>
@@ -24,19 +27,19 @@ export default function Sidebar() {
               itemId="welcome"
               isActive={activeItem === "" || activeItem === "/welcome"}
             >
-              <Link to="/welcome">Welcome</Link>
+              <Link to={"/welcome" + search}>Welcome</Link>
             </NavItem>
 
             <NavItem itemId="viewer" isActive={activeItem === "/upload"}>
-              <Link to={"/upload" + hash}>Upload a Trace</Link>
+              <Link to={"/upload" + search}>Upload a Trace</Link>
             </NavItem>
           </NavList>
 
-          <MyTraces hash={hash} activeItem={activeItem} />
+          <MyTraces hash={search + hash} activeItem={activeItem} />
           <Demos hash={hash} activeItem={activeItem} />
 
           <NavItem itemId="about" isActive={activeItem === "/about"}>
-            <Link to="/about">About PDL</Link>
+            <Link to={"/about" + search}>About PDL</Link>
           </NavItem>
         </Nav>
       </PageSidebarBody>