Fix expand link in related resource panel (#8515)

highlight · May 15, 2024 · 69fbe8d · 69fbe8d
1 parent 72395a1
commit 69fbe8d
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 31 deletions.
diff --git a/frontend/src/components/RelatedResources/Panel.tsx b/frontend/src/components/RelatedResources/Panel.tsx
@@ -1,6 +1,5 @@
 import { Box, Dialog } from '@highlight-run/ui/components'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { useLocation } from 'react-router-dom'
 
 import { useRelatedResource } from '@/components/RelatedResources/hooks'
 import {
@@ -28,8 +27,7 @@ type PanelComponent = React.FC<Props> & {
 export const Panel: PanelComponent = ({ children, open }) => {
 	const dragHandleRef = useRef<HTMLDivElement>(null)
 	const [dragging, setDragging] = useState(false)
-	const { resource, remove, panelWidth, setPanelWidth } = useRelatedResource()
-	const location = useLocation()
+	const { remove, panelWidth, setPanelWidth } = useRelatedResource()
 	const dialogStore = Dialog.useStore({
 		open,
 		setOpen: (open) => {
@@ -77,13 +75,6 @@ export const Panel: PanelComponent = ({ children, open }) => {
 		}
 	}, [dragging, handleMouseMove, handleMouseUp])
 
-	useEffect(() => {
-		if (resource) {
-			remove()
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [location.pathname])
-
 	return (
 		<Dialog
 			store={dialogStore}

diff --git a/frontend/src/components/RelatedResources/PanelHeader.tsx b/frontend/src/components/RelatedResources/PanelHeader.tsx
@@ -12,14 +12,14 @@ import {
 import { message } from 'antd'
 import { useCallback } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
-import { useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 
 import { Button } from '@/components/Button'
 import { PreviousNextGroup } from '@/components/PreviousNextGroup/PreviousNextGroup'
 import { useRelatedResource } from '@/components/RelatedResources/hooks'
 
 type Props = React.PropsWithChildren & {
-	path: string
+	path?: string
 }
 
 export const PanelHeader: React.FC<Props> = ({ children, path }) => {
@@ -62,14 +62,16 @@ export const PanelHeader: React.FC<Props> = ({ children, path }) => {
 				{children}
 			</Stack>
 
-			<ButtonIcon
-				icon={<IconSolidArrowsExpand />}
-				emphasis="low"
-				kind="secondary"
-				onClick={() => {
-					navigate(path)
-				}}
-			/>
+			{path && (
+				<Link to={path}>
+					<ButtonIcon
+						icon={<IconSolidArrowsExpand />}
+						emphasis="low"
+						kind="secondary"
+						onClick={() => null}
+					/>
+				</Link>
+			)}
 
 			<ButtonIcon
 				icon={<IconSolidX />}

diff --git a/frontend/src/components/RelatedResources/RelatedResourcePanel.tsx b/frontend/src/components/RelatedResources/RelatedResourcePanel.tsx
@@ -50,7 +50,7 @@ export const RelatedResourcePanel: React.FC<Props> = ({}) => {
 					traceId={resource.id}
 					spanId={resource.spanID}
 				>
-					<TracePanel resource={resource} />
+					<TracePanel />
 				</TraceProvider>
 			)}
 		</Panel>

diff --git a/frontend/src/components/RelatedResources/TracePanel.tsx b/frontend/src/components/RelatedResources/TracePanel.tsx
@@ -1,25 +1,20 @@
 import { Box, Callout, Text } from '@highlight-run/ui/components'
 
 import LoadingBox from '@/components/LoadingBox'
-import { RelatedTrace } from '@/components/RelatedResources/hooks'
 import { Panel } from '@/components/RelatedResources/Panel'
-import { useNumericProjectId } from '@/hooks/useProjectId'
 import { TraceHeader } from '@/pages/Traces/TraceHeader'
 import { useTrace } from '@/pages/Traces/TraceProvider'
 import { TraceSpanAttributes } from '@/pages/Traces/TraceSpanAttributes'
 import { TraceVisualizer } from '@/pages/Traces/TraceVisualizer'
 
-export const TracePanel: React.FC<{ resource: RelatedTrace }> = ({
-	resource,
-}) => {
-	const { projectId } = useNumericProjectId()
-	const path = `/${projectId}/traces/${resource.id}`
+export const TracePanel: React.FC = () => {
 	const { highlightedSpan, loading, selectedSpan, traces } = useTrace()
 	const span = selectedSpan || highlightedSpan
+	const path = `${window.location.pathname}${window.location.search}`
 
 	return (
 		<>
-			<Panel.Header path={path}>
+			<Panel.Header>
 				<Panel.HeaderCopyLinkButton path={path} />
 				<Panel.HeaderDivider />
 			</Panel.Header>

diff --git a/frontend/src/components/RelatedResources/hooks.ts b/frontend/src/components/RelatedResources/hooks.ts
@@ -45,7 +45,7 @@ export type RelatedResource =
 	| RelatedLogs
 
 const LOCAL_STORAGE_WIDTH_KEY = 'related-resource-panel-width'
-const RELATED_RESOURCE_PARAM = 'related_resource'
+export const RELATED_RESOURCE_PARAM = 'related_resource'
 
 const localStorageWidth = localStorage.getItem(LOCAL_STORAGE_WIDTH_KEY)
 const panelWidthVar = makeVar<number>(
@@ -112,7 +112,7 @@ export const useRelatedResource = () => {
 
 			searchParams.set(
 				RELATED_RESOURCE_PARAM,
-				encodeURI(JSON.stringify(newResource)),
+				JSON.stringify(newResource), // setSearchParams encodes the string
 			)
 
 			setSearchParams(Object.fromEntries(searchParams.entries()))