refactor: review changes

frontend/src/AppRoutes/pageComponents.ts

@@ -64,10 +64,17 @@ export const TraceDetail = Loadable(
 		),
 );
 
+export const TraceDetailOldRedirect = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "TraceDetailOldRedirect" */ 'pages/TraceDetailOldRedirect/index'
+		),
+);
+
 export const TraceDetailV3 = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "TraceDetailV3 Page" */ 'pages/TraceDetailV3Page/index'
+			/* webpackChunkName: "TraceDetailV3 Page" */ 'pages/TraceDetailsV3/index'
 		),
 );
 

frontend/src/AppRoutes/routes.ts

@@ -47,7 +47,7 @@ import {
 	SomethingWentWrong,
 	StatusPage,
 	SupportPage,
-	TraceDetail,
+	TraceDetailOldRedirect,
 	TraceDetailV3,
 	TraceFilter,
 	TracesExplorer,
@@ -139,13 +139,11 @@ const routes: AppRoutes[] = [
 		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
-	// V3 trace details is gated until release: /trace serves V2 (public),
-	// /trace-old serves V3 (URL-only access). Flip the two `component`
-	// values back to release V3.
+	// Legacy /trace-old/:id redirects to the current /trace/:id view.
 	{
 		path: ROUTES.TRACE_DETAIL_OLD,
 		exact: true,
-		component: TraceDetail,
+		component: TraceDetailOldRedirect,
 		isPrivate: true,
 		key: 'TRACE_DETAIL_OLD',
 	},

frontend/src/constants/localStorage.ts

@@ -38,8 +38,8 @@ export enum LOCALSTORAGE {
 	DISSMISSED_COST_METER_INFO = 'DISMISSED_COST_METER_INFO',
 	DISMISSED_API_KEYS_DEPRECATION_BANNER = 'DISMISSED_API_KEYS_DEPRECATION_BANNER',
 	TRACE_DETAILS_SPAN_DETAILS_POSITION = 'TRACE_DETAILS_SPAN_DETAILS_POSITION',
-	TRACE_DETAILS_PREFER_OLD_VIEW = 'TRACE_DETAILS_PREFER_OLD_VIEW',
 	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
+	TRACE_DETAILS_PREFER_OLD_VIEW = 'TRACE_DETAILS_PREFER_OLD_VIEW',
 	DASHBOARD_PREFERENCES = 'DASHBOARD_PREFERENCES',
 	ACTIVE_SIGNOZ_INSTANCE_URL = 'ACTIVE_SIGNOZ_INSTANCE_URL',
 	DASHBOARDS_LIST_VISIBLE_COLUMNS = 'DASHBOARDS_LIST_VISIBLE_COLUMNS',

frontend/src/container/TraceMetadata/TraceMetadata.styles.scss

@@ -68,10 +68,6 @@
 				border-left: unset;
 				border-radius: 0px 4px 4px 0px;
 			}
-
-			.new-view-btn {
-				margin-left: 8px;
-			}
 		}
 
 		.second-row {

frontend/src/pages/TraceDetailOldRedirect/index.tsx

@@ -0,0 +1,18 @@
+import { Redirect, useParams } from 'react-router-dom';
+import { TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
+
+// Legacy /trace-old/:id now redirects to the current /trace/:id view,
+// preserving the query string and hash.
+export default function TraceDetailOldRedirect(): JSX.Element {
+	const { id } = useParams<TraceDetailV2URLProps>();
+
+	return (
+		<Redirect
+			to={{
+				pathname: `/trace/${id}`,
+				search: window.location.search,
+				hash: window.location.hash,
+			}}
+		/>
+	);
+}

frontend/src/pages/TraceDetailV3Page/index.tsx

@@ -1,25 +0,0 @@
-import { Redirect, useParams } from 'react-router-dom';
-import getLocalStorageKey from 'api/browser/localstorage/get';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
-
-import TraceDetailsV3 from '../TraceDetailsV3';
-
-export default function TraceDetailV3Page(): JSX.Element {
-	const { id } = useParams<TraceDetailV2URLProps>();
-	const preferOld =
-		getLocalStorageKey(LOCALSTORAGE.TRACE_DETAILS_PREFER_OLD_VIEW) === 'true';
-
-	if (preferOld) {
-		return (
-			<Redirect
-				to={{
-					pathname: `/trace-old/${id}`,
-					search: window.location.search,
-				}}
-			/>
-		);
-	}
-
-	return <TraceDetailsV3 />;
-}

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
 import {
@@ -8,11 +8,9 @@ import {
 	TooltipTrigger,
 } from '@signozhq/ui/tooltip';
 import { Skeleton } from 'antd';
-import setLocalStorageKey from 'api/browser/localstorage/set';
 import cx from 'classnames';
 import FieldsSelector from 'components/FieldsSelector';
 import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
-import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
 import dayjs from 'dayjs';
@@ -21,7 +19,6 @@ import {
 	ArrowLeft,
 	CalendarClock,
 	ChartPie,
-	CornerUpLeft,
 	Server,
 	Timer,
 } from '@signozhq/icons';
@@ -93,18 +90,6 @@ function TraceDetailsHeader({
 	const setPreviewFields = useTraceStore((s) => s.setPreviewFields);
 
 	const logTraceEvent = useTraceDetailLogEvent('v3', traceID || '');
-	const pageLoadedAtRef = useRef(Date.now());
-
-	const handleSwitchToOldView = useCallback((): void => {
-		logTraceEvent(TraceDetailEvents.ViewSwitched, {
-			[TraceDetailEventKeys.From]: 'v3',
-			[TraceDetailEventKeys.To]: 'v2',
-			[TraceDetailEventKeys.DwellMs]: Date.now() - pageLoadedAtRef.current,
-		});
-		setLocalStorageKey(LOCALSTORAGE.TRACE_DETAILS_PREFER_OLD_VIEW, 'true');
-		const oldUrl = `/trace-old/${traceID}${window.location.search}`;
-		history.replace(oldUrl);
-	}, [traceID, logTraceEvent]);
 
 	const handleToggleAnalytics = useCallback((): void => {
 		logTraceEvent(TraceDetailEvents.AnalyticsPanelToggled, {
@@ -172,20 +157,6 @@ function TraceDetailsHeader({
 						{!isFilterExpanded && (
 							<TooltipProvider>
 								<div className={styles.headerActions}>
-									<TooltipRoot>
-										<TooltipTrigger asChild>
-											<Button
-												variant="ghost"
-												size="icon"
-												color="secondary"
-												aria-label="Switch to legacy trace view"
-												onClick={handleSwitchToOldView}
-											>
-												<CornerUpLeft size={14} />
-											</Button>
-										</TooltipTrigger>
-										<TooltipContent>Switch to legacy trace view</TooltipContent>
-									</TooltipRoot>
 									<TooltipRoot>
 										<TooltipTrigger asChild>
 											<Button

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/__tests__/TraceDetailsHeader.test.tsx

@@ -26,13 +26,6 @@ jest.mock('react-router-dom', () => ({
 	useParams: (): { id: string } => ({ id: 'trace-123' }),
 }));
 
-const mockSetLocalStorageKey = jest.fn();
-jest.mock('api/browser/localstorage/set', () => ({
-	__esModule: true,
-	default: (key: string, value: string): void =>
-		mockSetLocalStorageKey(key, value),
-}));
-
 jest.mock(
 	'../../TraceWaterfall/TraceWaterfallStates/Success/Filters/Filters',
 	() => ({
@@ -97,15 +90,11 @@ describe('TraceDetailsHeader – back button', () => {
 describe('TraceDetailsHeader – action cluster', () => {
 	beforeEach(() => {
 		mockReplace.mockClear();
-		mockSetLocalStorageKey.mockClear();
 	});
 
 	it('does not render the action buttons while data is still loading', () => {
 		render(<TraceDetailsHeader {...baseProps} isDataLoaded={false} />);
 
-		expect(
-			screen.queryByRole('button', { name: /switch to legacy trace view/i }),
-		).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole('button', { name: /^analytics$/i }),
 		).not.toBeInTheDocument();
@@ -114,12 +103,9 @@ describe('TraceDetailsHeader – action cluster', () => {
 		).not.toBeInTheDocument();
 	});
 
-	it('renders Legacy View, Analytics, and Settings action buttons once data is loaded', () => {
+	it('renders Analytics and Settings action buttons once data is loaded', () => {
 		render(<TraceDetailsHeader {...baseProps} isDataLoaded />);
 
-		expect(
-			screen.getByRole('button', { name: /switch to legacy trace view/i }),
-		).toBeInTheDocument();
 		expect(
 			screen.getByRole('button', { name: /^analytics$/i }),
 		).toBeInTheDocument();
@@ -128,23 +114,6 @@ describe('TraceDetailsHeader – action cluster', () => {
 		).toBeInTheDocument();
 	});
 
-	it('routes to the legacy trace view and persists the preference on click', () => {
-		render(<TraceDetailsHeader {...baseProps} isDataLoaded />);
-
-		fireEvent.click(
-			screen.getByRole('button', { name: /switch to legacy trace view/i }),
-		);
-
-		expect(mockSetLocalStorageKey).toHaveBeenCalledWith(
-			'TRACE_DETAILS_PREFER_OLD_VIEW',
-			'true',
-		);
-		expect(mockReplace).toHaveBeenCalledTimes(1);
-		expect(mockReplace).toHaveBeenCalledWith(
-			expect.stringContaining('/trace-old/trace-123'),
-		);
-	});
-
 	it('toggles the AnalyticsPanel open state when the Analytics button is clicked', () => {
 		render(<TraceDetailsHeader {...baseProps} isDataLoaded />);
 

frontend/src/pages/TraceDetailsV3/events.ts

@@ -22,7 +22,6 @@ export enum TraceDetailEventKeys {
 	SpanPanelVariant = 'spanPanelVariant',
 	ColorByField = 'colorByField',
 	PreviewFieldsCount = 'previewFieldsCount',
-	EntryPreferOldView = 'entryPreferOldView',
 	// View switched
 	From = 'from',
 	To = 'to',

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -179,8 +179,6 @@ function TraceDetailsV3(): JSX.Element {
 				SpanDetailVariant.DOCKED_RIGHT,
 			[TraceDetailEventKeys.ColorByField]: colorByField.name,
 			[TraceDetailEventKeys.PreviewFieldsCount]: previewFieldsCount,
-			[TraceDetailEventKeys.EntryPreferOldView]:
-				getLocalStorageKey(LOCALSTORAGE.TRACE_DETAILS_PREFER_OLD_VIEW) === 'true',
 		});
 	}, [
 		traceId,