From e800e896a3920bdf9bdc6e49437b3a0ec9bb7bae Mon Sep 17 00:00:00 2001
From: ahmadshaheer <ashaheerki@gmail.com>
Date: Sun, 15 Sep 2024 19:08:20 +0430
Subject: [PATCH] fix: make the trace details collapsed sidebar match the
 design

---
 frontend/src/container/AppLayout/index.tsx    | 23 +++++++++----------
 .../TraceDetail/SelectedSpanDetails/index.tsx | 10 ++------
 .../TraceDetail/TraceDetails.styles.scss      |  4 +++-
 frontend/src/container/TraceDetail/index.tsx  |  3 +--
 frontend/src/container/TraceDetail/styles.ts  |  2 ++
 5 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx
index 4cf2e0f5bb..893f487471 100644
--- a/frontend/src/container/AppLayout/index.tsx
+++ b/frontend/src/container/AppLayout/index.tsx
@@ -255,19 +255,16 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const isDashboardListView = (): boolean => routeKey === 'ALL_DASHBOARD';
 	const isAlertHistory = (): boolean => routeKey === 'ALERT_HISTORY';
 	const isAlertOverview = (): boolean => routeKey === 'ALERT_OVERVIEW';
-	const isDashboardView = (): boolean => {
-		/**
-		 * need to match using regex here as the getRoute function will not work for
-		 * routes with id
-		 */
-		const regex = /^\/dashboard\/[a-zA-Z0-9_-]+$/;
-		return regex.test(pathname);
-	};
+	const isPathMatch = (regex: RegExp): boolean => regex.test(pathname);
 
-	const isDashboardWidgetView = (): boolean => {
-		const regex = /^\/dashboard\/[a-zA-Z0-9_-]+\/new$/;
-		return regex.test(pathname);
-	};
+	const isDashboardView = (): boolean =>
+		isPathMatch(/^\/dashboard\/[a-zA-Z0-9_-]+$/);
+
+	const isDashboardWidgetView = (): boolean =>
+		isPathMatch(/^\/dashboard\/[a-zA-Z0-9_-]+\/new$/);
+
+	const isTraceDetailsView = (): boolean =>
+		isPathMatch(/^\/trace\/[a-zA-Z0-9]+(\?.*)?$/);
 
 	useEffect(() => {
 		if (isDarkMode) {
@@ -356,6 +353,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 											isMessagingQueues()
 												? 0
 												: '0 1rem',
+
+										...(isTraceDetailsView() ? { marginRight: 0 } : {}),
 									}}
 								>
 									{isToDisplayLayout && !renderFullScreen && <TopNav />}
diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
index 0b1569d9e0..d8eb1a6972 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
@@ -98,16 +98,10 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 				styledclass={[styles.selectedSpanDetailsContainer, styles.overflow]}
 				direction="vertical"
 			>
-				<Row
-					align="middle"
-					justify="space-between"
-					style={{
-						marginTop: '16px',
-					}}
-				>
+				<Row align="middle" justify="space-between">
 					<Typography.Text strong>Details for selected Span</Typography.Text>
 					<Button
-						className="periscope-btn nav-item-label "
+						className="periscope-btn nav-item-label expand-collapse-btn"
 						icon={<PanelRight size={16} />}
 						onClick={(): void => setCollapsed((prev) => !prev)}
 					/>
diff --git a/frontend/src/container/TraceDetail/TraceDetails.styles.scss b/frontend/src/container/TraceDetail/TraceDetails.styles.scss
index 1456d3d8e3..c4c63392dd 100644
--- a/frontend/src/container/TraceDetail/TraceDetails.styles.scss
+++ b/frontend/src/container/TraceDetail/TraceDetails.styles.scss
@@ -22,6 +22,8 @@
 	}
 
 	.expand-collapse-btn {
-		margin: 12px 0 0 12px;
+		padding: 4px;
+		height: auto;
+		width: auto;
 	}
 }
diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx
index d6795d24db..5d4183c7f6 100644
--- a/frontend/src/container/TraceDetail/index.tsx
+++ b/frontend/src/container/TraceDetail/index.tsx
@@ -268,9 +268,8 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 				collapsed={collapsed}
 				reverseArrow
 				width={300}
-				collapsedWidth={40}
+				collapsedWidth={48}
 				defaultCollapsed
-				// onCollapse={(value): void => setCollapsed(value)}
 				trigger={null}
 				data-testid="span-details-sider"
 			>
diff --git a/frontend/src/container/TraceDetail/styles.ts b/frontend/src/container/TraceDetail/styles.ts
index 85a74f90b0..da4e75c484 100644
--- a/frontend/src/container/TraceDetail/styles.ts
+++ b/frontend/src/container/TraceDetail/styles.ts
@@ -59,6 +59,8 @@ export const selectedSpanDetailContainer = css`
 	position: relative;
 	display: flex;
 	flex-direction: column;
+	align-items: center;
+	padding-top: 12px;
 `;
 
 /**