From 64e06ab3f9e675fbc130bac4edc0af447ee5f659 Mon Sep 17 00:00:00 2001
From: Yunus M <myounis.ar@live.com>
Date: Thu, 20 Jun 2024 11:34:27 +0530
Subject: [PATCH] fix: update from typography link to react router dom link
 component to maintain global state (#5279)

---
 .../container/TraceDetail/TraceDetails.styles.scss   | 12 +++++++++++-
 frontend/src/container/TraceDetail/index.tsx         |  3 ++-
 .../container/TracesExplorer/TracesView/configs.tsx  |  8 ++++----
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/frontend/src/container/TraceDetail/TraceDetails.styles.scss b/frontend/src/container/TraceDetail/TraceDetails.styles.scss
index 676160aecc..0c309bc83d 100644
--- a/frontend/src/container/TraceDetail/TraceDetails.styles.scss
+++ b/frontend/src/container/TraceDetail/TraceDetails.styles.scss
@@ -1,7 +1,17 @@
 .span-details-sider {
+	padding-top: 16px;
+
+	::-webkit-scrollbar {
+		width: 0.2em;
+	}
+
+	::-webkit-scrollbar-track {
+		box-shadow: inset 0 0 6px rgba(18, 18, 18, 0.3);
+	}
+
 	&.dark {
 		.ant-layout-sider-trigger {
-			background-color: black !important;
+			background-color: #0b0c0e !important;
 		}
 	}
 
diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx
index 67b55a1bca..4b333e0dad 100644
--- a/frontend/src/container/TraceDetail/index.tsx
+++ b/frontend/src/container/TraceDetail/index.tsx
@@ -246,13 +246,14 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 
 			<Sider
 				className={cx('span-details-sider', isDarkMode ? 'dark' : 'light')}
-				style={{ background: isDarkMode ? '#000' : '#fff' }}
+				style={{ background: isDarkMode ? '#0b0c0e' : '#fff' }}
 				theme={isDarkMode ? 'dark' : 'light'}
 				collapsible
 				collapsed={collapsed}
 				reverseArrow
 				width={300}
 				collapsedWidth={40}
+				defaultCollapsed
 				onCollapse={(value): void => setCollapsed(value)}
 			>
 				{!collapsed && (
diff --git a/frontend/src/container/TracesExplorer/TracesView/configs.tsx b/frontend/src/container/TracesExplorer/TracesView/configs.tsx
index a6296e362a..f5980a044d 100644
--- a/frontend/src/container/TracesExplorer/TracesView/configs.tsx
+++ b/frontend/src/container/TracesExplorer/TracesView/configs.tsx
@@ -3,7 +3,7 @@ import { ColumnsType } from 'antd/es/table';
 import ROUTES from 'constants/routes';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
-import { generatePath } from 'react-router-dom';
+import { generatePath, Link } from 'react-router-dom';
 import { ListItem } from 'types/api/widgets/getQuery';
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];
@@ -38,14 +38,14 @@ export const columns: ColumnsType<ListItem['data']> = [
 		dataIndex: 'traceID',
 		key: 'traceID',
 		render: (traceID: string): JSX.Element => (
-			<Typography.Link
-				href={generatePath(ROUTES.TRACE_DETAIL, {
+			<Link
+				to={generatePath(ROUTES.TRACE_DETAIL, {
 					id: traceID,
 				})}
 				data-testid="trace-id"
 			>
 				{traceID}
-			</Typography.Link>
+			</Link>
 		),
 	},
 ];