fix: in react ui, clicking on demo from welcome page closes sidebar

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

Author: starpit

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

@@ -1,5 +1,5 @@
-import { Link } from "react-router"
 import { Button, Panel, PanelMain } from "@patternfly/react-core"
+import { Link, useLocation, useSearchParams } from "react-router"
 
 import Tile from "./welcome/Tile"
 import Result from "../view/Result"
@@ -11,7 +11,11 @@ import { hasResult } from "../helpers"
 
 import DemoIcon from "@patternfly/react-icons/dist/esm/icons/sun-icon"
 
-function demoTiles() {
+function DemoTiles() {
+  const { hash } = useLocation()
+  const [searchParams] = useSearchParams()
+  const s = searchParams.toString()
+
   return demos.map((demo) => {
     // TODO useMemo()
     const data = JSON.parse(demo.trace)
@@ -33,7 +37,14 @@ function demoTiles() {
         }
       >
         <Button isInline variant="link">
-          <Link to={"/demos/" + encodeURIComponent(demo.name)}>
+          <Link
+            to={
+              "/demos/" +
+              encodeURIComponent(demo.name) +
+              (s ? `?${s}` : "") +
+              hash
+            }
+          >
             Show this Demo
           </Link>
         </Button>
@@ -47,7 +58,7 @@ export default function Demos() {
     <Welcome
       breadcrumb1="Demos"
       intro="Here are some built-in PDL demos"
-      tiles={demoTiles()}
+      tiles={<DemoTiles />}
     />
   )
 }

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

@@ -1,5 +1,5 @@
-import { Link } from "react-router"
 import { Button, Panel, PanelMain } from "@patternfly/react-core"
+import { Link, useLocation, useSearchParams } from "react-router"
 
 import Tile from "./welcome/Tile"
 import Result from "../view/Result"
@@ -11,7 +11,11 @@ import { nonNullable } from "../helpers"
 
 import MyIcon from "@patternfly/react-icons/dist/esm/icons/user-icon"
 
-function myTiles() {
+function MyTiles() {
+  const { hash } = useLocation()
+  const [searchParams] = useSearchParams()
+  const s = searchParams.toString()
+
   return getMyTraces()
     .map(({ title, filename, value }) => {
       try {
@@ -35,7 +39,11 @@ function myTiles() {
             }
           >
             <Button isInline variant="link">
-              <Link to={"/my/" + encodeURIComponent(title)}>
+              <Link
+                to={
+                  "/my/" + encodeURIComponent(title) + (s ? `?${s}` : "") + hash
+                }
+              >
                 Show this Trace
               </Link>
             </Button>
@@ -53,7 +61,7 @@ export default function MyTraces() {
     <Welcome
       breadcrumb1="My Traces"
       intro="Here are your recently uploaded traces"
-      tiles={myTiles()}
+      tiles={<MyTiles />}
     />
   )
 }

pdl-live-react/src/page/welcome/tiles/Demos.tsx

@@ -1,12 +1,16 @@
-import { Link } from "react-router"
 import { Button } from "@patternfly/react-core"
+import { Link, useLocation, useSearchParams } from "react-router"
 
 import Tile from "../Tile"
 import demos from "../../../demos/demos"
 
 import DemoIcon from "@patternfly/react-icons/dist/esm/icons/sun-icon"
 
 export default function Demos() {
+  const { hash } = useLocation()
+  const [searchParams] = useSearchParams()
+  const s = searchParams.toString()
+
   return (
     <Tile
       title="View a Demo"
@@ -15,7 +19,14 @@ export default function Demos() {
     >
       {demos.map((demo) => (
         <Button key={demo.name} isInline variant="link">
-          <Link to={"/demos/" + encodeURIComponent(demo.name)}>
+          <Link
+            to={
+              "/demos/" +
+              encodeURIComponent(demo.name) +
+              (s ? `?${s}` : "") +
+              hash
+            }
+          >
             {demo.name}
           </Link>
         </Button>

pdl-live-react/src/page/welcome/tiles/MyTraces.tsx

@@ -1,12 +1,16 @@
-import { Link } from "react-router"
 import { Button } from "@patternfly/react-core"
+import { Link, useLocation, useSearchParams } from "react-router"
 
 import Tile from "../Tile"
 import { getMyTraces } from "../../MyTraces"
 
 import MyIcon from "@patternfly/react-icons/dist/esm/icons/user-icon"
 
 export default function MyTraces() {
+  const { hash } = useLocation()
+  const [searchParams] = useSearchParams()
+  const s = searchParams.toString()
+
   const myTraces = getMyTraces()
 
   return (
@@ -17,7 +21,11 @@ export default function MyTraces() {
     >
       {myTraces.map(({ title, filename }) => (
         <Button key={filename} isInline variant="link">
-          <Link to={"/my/" + encodeURIComponent(title)}>{title}</Link>
+          <Link
+            to={"/my/" + encodeURIComponent(title) + (s ? `?${s}` : "") + hash}
+          >
+            {title}
+          </Link>
         </Button>
       ))}
     </Tile>