fix: use url hash for active tab state

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

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

Author: starpit

pdl-live-react/src/Viewer.tsx

@@ -1,6 +1,7 @@
-import { useCallback, useContext, useMemo, useState } from "react"
+import { useLocation } from "react-router"
+import { useContext, useMemo } from "react"
 
-import { Tabs, Tab, TabTitleText, type TabsProps } from "@patternfly/react-core"
+import { Tabs, Tab, TabTitleText } from "@patternfly/react-core"
 
 import Code from "./view/Code"
 import Transcript from "./view/transcript/Transcript"
@@ -12,6 +13,9 @@ import "./Viewer.css"
 
 /** This is the main view component */
 export default function Viewer({ value }: { value: string }) {
+  // We will use this to find the current active tab (below)
+  let { hash: activeTab } = useLocation()
+
   // DarkMode state
   const darkMode = useContext(DarkModeContext)
 
@@ -20,28 +24,46 @@ export default function Viewer({ value }: { value: string }) {
     [value],
   )
 
-  const [activeTab, setActiveTab] = useState<string | number>("transcript")
-  const handleTabClick = useCallback<Required<TabsProps>["onSelect"]>(
-    (_event, tab) => setActiveTab(tab),
-    [setActiveTab],
-  )
+  if (!data) {
+    return "Invalid trace content"
+  }
+
+  // Note: please keep eventKey===href
+  const tabs = [
+    <Tab
+      key="#transcript"
+      href="#transcript"
+      eventKey="#transcript"
+      title={<TabTitleText>Transcript</TabTitleText>}
+    >
+      <Transcript data={data} />
+    </Tab>,
+    <Tab
+      key="#source"
+      href="#source"
+      eventKey="#source"
+      title={<TabTitleText>Source</TabTitleText>}
+    >
+      <Code block={data} darkMode={darkMode} limitHeight={false} />
+    </Tab>,
+    <Tab
+      key="#raw"
+      href="#raw"
+      eventKey="#raw"
+      title={<TabTitleText>Raw Trace</TabTitleText>}
+    >
+      <Code block={data} darkMode={darkMode} limitHeight={false} raw />
+    </Tab>,
+  ]
+
+  if (!tabs.find((tab) => tab.props.href === activeTab)) {
+    // User provided bogus hash, default to first tab
+    activeTab = tabs[0].props.href
+  }
 
   return (
-    data && (
-      <Tabs activeKey={activeTab} onSelect={handleTabClick}>
-        <Tab
-          eventKey="transcript"
-          title={<TabTitleText>Transcript</TabTitleText>}
-        >
-          <Transcript data={data} />
-        </Tab>
-        <Tab eventKey="source" title={<TabTitleText>Source</TabTitleText>}>
-          <Code block={data} darkMode={darkMode} limitHeight={false} />
-        </Tab>
-        <Tab eventKey="rawtrace" title={<TabTitleText>Raw Trace</TabTitleText>}>
-          <Code block={data} darkMode={darkMode} limitHeight={false} raw />
-        </Tab>
-      </Tabs>
-    )
+    <Tabs activeKey={activeTab} component="nav">
+      {tabs}
+    </Tabs>
   )
 }