From afb18b8142f3df935f08cbf3f2053e490efc87bd Mon Sep 17 00:00:00 2001
From: sawhil <sawhil.khan@gmail.com>
Date: Mon, 14 Apr 2025 01:44:32 +0530
Subject: [PATCH] fix: pr comments - used useSafeNavigate hook

---
 .../SpanLineActionButtons.styles.scss             |  3 ---
 .../TraceWaterfallStates/Success/Success.tsx      | 15 +++++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/container/TraceWaterfall/SpanLineActionButtons/SpanLineActionButtons.styles.scss b/frontend/src/container/TraceWaterfall/SpanLineActionButtons/SpanLineActionButtons.styles.scss
index 6cfa385f6f..c3893bbf13 100644
--- a/frontend/src/container/TraceWaterfall/SpanLineActionButtons/SpanLineActionButtons.styles.scss
+++ b/frontend/src/container/TraceWaterfall/SpanLineActionButtons/SpanLineActionButtons.styles.scss
@@ -32,9 +32,6 @@
 		border: 1px solid var(--bg-vanilla-400);
 		background: var(--bg-vanilla-400);
 
-		.ant-btn-default {
-		}
-
 		.copy-span-btn {
 			border-color: var(--bg-vanilla-400) !important;
 		}
diff --git a/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx
index 9e432d8b25..3a28b90a39 100644
--- a/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx
+++ b/frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx
@@ -11,6 +11,8 @@ import { themeColors } from 'constants/theme';
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
 import SpanLineActionButtons from 'container/TraceWaterfall/SpanLineActionButtons';
 import { IInterestedSpan } from 'container/TraceWaterfall/TraceWaterfall';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import {
 	AlertCircle,
@@ -28,7 +30,6 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
 import { Span } from 'types/api/trace/getTraceV2';
 import { toFixed } from 'utils/toFixed';
 
@@ -169,9 +170,8 @@ function SpanDuration({
 	const leftOffset = ((span.timestamp - traceMetadata.startTime) * 1e2) / spread;
 	const width = (span.durationNano * 1e2) / (spread * 1e6);
 
-	const { search } = useLocation();
-	const history = useHistory();
-	const searchParams = new URLSearchParams(search);
+	const urlQuery = useUrlQuery();
+	const { safeNavigate } = useSafeNavigate();
 
 	let color = generateColor(span.serviceName, themeColors.traceDetailColors);
 
@@ -199,8 +199,11 @@ function SpanDuration({
 			onMouseLeave={handleMouseLeave}
 			onClick={(): void => {
 				setSelectedSpan(span);
-				searchParams.set('spanId', span.spanId);
-				history.replace({ search: searchParams.toString() });
+				if (span?.spanId) {
+					urlQuery.set('spanId', span?.spanId);
+				}
+
+				safeNavigate({ search: urlQuery.toString() });
 			}}
 		>
 			<div