Fix session details navigation (#347)

* Fix session details back button

* Do not fetch capture details until capture id is set

* Fix broken session link in occurrence table

ui/src/pages/occurrences/occurrence-columns.tsx

@@ -81,7 +81,7 @@ export const columns: (projectId: string) => TableColumn<Occurrence>[] = (
       name: translate(STRING.FIELD_LABEL_SESSION),
       sortField: 'event',
       renderCell: (item: Occurrence) => (
-        <Link to={APP_ROUTES.SESSION_DETAILS({ projectId, sessionId: item.id })}>
+        <Link to={APP_ROUTES.SESSION_DETAILS({ projectId, sessionId: item.sessionId })}>
           <BasicTableCell value={item.sessionLabel} theme={CellTheme.Primary} />
         </Link>
       ),

ui/src/pages/session-details/playback/playback-controls/playback-controls.tsx

@@ -10,13 +10,15 @@ import { useState } from 'react'
 import { useThreshold } from 'utils/threshold/thresholdContext'
 import { CaptureInfo } from '../capture-info/capture-info'
 import { CaptureJob } from '../capture-job/capture-job'
-import { useActiveCaptureId } from '../useActiveCapture'
 import { PipelinesPicker } from './pipelines-picker'
 import styles from './playback-controls.module.scss'
 import { StarButton } from './star-button'
 
-export const PlaybackControls = () => {
-  const { activeCaptureId } = useActiveCaptureId()
+export const PlaybackControls = ({
+  activeCaptureId,
+}: {
+  activeCaptureId: string
+}) => {
   const { capture, isFetching } = useCaptureDetails(activeCaptureId as string)
   const { defaultThreshold, threshold, setThreshold } = useThreshold()
   const [showDetails, setShowDetails] = useState(false)

ui/src/pages/session-details/playback/playback.tsx

@@ -6,7 +6,7 @@ import { CapturePicker } from './capture-picker/capture-picker'
 import { Frame } from './frame/frame'
 import { PlaybackControls } from './playback-controls/playback-controls'
 import styles from './playback.module.scss'
-import { useActiveCapture } from './useActiveCapture'
+import { useActiveCapture, useActiveCaptureId } from './useActiveCapture'
 
 export const Playback = ({ session }: { session: SessionDetails }) => {
   const { threshold } = useThreshold()
@@ -21,6 +21,7 @@ export const Playback = ({ session }: { session: SessionDetails }) => {
   } = useInfiniteCaptures(session.id, session.captureOffset, threshold)
   const { activeCapture, setActiveCapture } = useActiveCapture(captures)
   const [showOverlay, setShowOverlay] = useState(false)
+  const { activeCaptureId } = useActiveCaptureId()
 
   if (!session.firstCapture) {
     return null
@@ -41,7 +42,9 @@ export const Playback = ({ session }: { session: SessionDetails }) => {
             showOverlay={showOverlay}
           />
         </div>
-        <PlaybackControls />
+        {activeCaptureId && (
+          <PlaybackControls activeCaptureId={activeCaptureId} />
+        )}
       </div>
 
       <div className={styles.capturePicker}>

ui/src/pages/session-details/playback/useActiveCapture.ts

@@ -13,7 +13,7 @@ export const useActiveCaptureId = () => {
   const setActiveCaptureId = (captureId: string) => {
     searchParams.delete(SEARCH_PARAM_KEY)
     searchParams.set(SEARCH_PARAM_KEY, captureId)
-    setSearchParams(searchParams)
+    setSearchParams(searchParams, { replace: true })
   }
 
   return { activeCaptureId, setActiveCaptureId }

ui/src/pages/session-details/playback/useActiveOccurrences.ts

@@ -12,7 +12,7 @@ export const useActiveOccurrences = () => {
     (occurrences: string[]) => {
       searchParams.delete(SEARCH_PARAM_KEY)
       occurrences.forEach((o) => searchParams.append(SEARCH_PARAM_KEY, o))
-      setSearchParams(searchParams)
+      setSearchParams(searchParams, { replace: true })
     },
     [searchParams, setSearchParams]
   )