From 98da4aff48b2b90a0bd8ee894a77e68943ba7b2a Mon Sep 17 00:00:00 2001
From: ahmadshaheer <ashaheerki@gmail.com>
Date: Sun, 15 Sep 2024 18:01:45 +0430
Subject: [PATCH 1/3] feat: add expand/collapse button to the top in trace
 details

---
 .../TraceDetail/SelectedSpanDetails/index.tsx | 21 +++++++++++++------
 .../TraceDetail/TraceDetails.styles.scss      |  4 ++++
 frontend/src/container/TraceDetail/index.tsx  | 19 ++++++++++++-----
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
index 39e180ee12..0b1569d9e0 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Modal, Tabs, Tooltip, Typography } from 'antd';
+import { Button, Modal, Row, Tabs, Tooltip, Typography } from 'antd';
 import Editor from 'components/Editor';
 import { StyledSpace } from 'components/Styled';
 import { QueryParams } from 'constants/query';
@@ -6,7 +6,8 @@ import ROUTES from 'constants/routes';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
-import { useState } from 'react';
+import { PanelRight } from 'lucide-react';
+import { Dispatch, SetStateAction, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { AppState } from 'store/reducers';
@@ -28,6 +29,7 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 		firstSpanStartTime,
 		traceStartTime = minTime,
 		traceEndTime = maxTime,
+		setCollapsed,
 	} = props;
 
 	const { id: traceId } = useParams<Params>();
@@ -96,14 +98,20 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 				styledclass={[styles.selectedSpanDetailsContainer, styles.overflow]}
 				direction="vertical"
 			>
-				<Typography.Text
-					strong
+				<Row
+					align="middle"
+					justify="space-between"
 					style={{
 						marginTop: '16px',
 					}}
 				>
-					Details for selected Span
-				</Typography.Text>
+					<Typography.Text strong>Details for selected Span</Typography.Text>
+					<Button
+						className="periscope-btn nav-item-label "
+						icon={<PanelRight size={16} />}
+						onClick={(): void => setCollapsed((prev) => !prev)}
+					/>
+				</Row>
 
 				<Typography.Text style={{ fontWeight: 700 }}>Service</Typography.Text>
 
@@ -170,6 +178,7 @@ interface SelectedSpanDetailsProps {
 	firstSpanStartTime: number;
 	traceStartTime?: number;
 	traceEndTime?: number;
+	setCollapsed: Dispatch<SetStateAction<boolean>>;
 }
 
 SelectedSpanDetails.defaultProps = {
diff --git a/frontend/src/container/TraceDetail/TraceDetails.styles.scss b/frontend/src/container/TraceDetail/TraceDetails.styles.scss
index 0c309bc83d..1456d3d8e3 100644
--- a/frontend/src/container/TraceDetail/TraceDetails.styles.scss
+++ b/frontend/src/container/TraceDetail/TraceDetails.styles.scss
@@ -20,4 +20,8 @@
 			background-color: white !important;
 		}
 	}
+
+	.expand-collapse-btn {
+		margin: 12px 0 0 12px;
+	}
 }
diff --git a/frontend/src/container/TraceDetail/index.tsx b/frontend/src/container/TraceDetail/index.tsx
index 096b648acf..d6795d24db 100644
--- a/frontend/src/container/TraceDetail/index.tsx
+++ b/frontend/src/container/TraceDetail/index.tsx
@@ -22,6 +22,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import { spanServiceNameToColorMapping } from 'lib/getRandomColor';
 import history from 'lib/history';
 import { map } from 'lodash-es';
+import { PanelRight } from 'lucide-react';
 import { SPAN_DETAILS_LEFT_COL_WIDTH } from 'pages/TraceDetail/constants';
 import { useEffect, useMemo, useState } from 'react';
 import { ITraceForest, PayloadProps } from 'types/api/trace/getTraceItem';
@@ -269,12 +270,20 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 				width={300}
 				collapsedWidth={40}
 				defaultCollapsed
-				onCollapse={(value): void => setCollapsed(value)}
+				// onCollapse={(value): void => setCollapsed(value)}
+				trigger={null}
 				data-testid="span-details-sider"
 			>
-				{!collapsed && (
-					<StyledCol styledclass={[styles.selectedSpanDetailContainer]}>
+				<StyledCol styledclass={[styles.selectedSpanDetailContainer]}>
+					{collapsed ? (
+						<Button
+							className="periscope-btn nav-item-label expand-collapse-btn"
+							icon={<PanelRight size={16} />}
+							onClick={(): void => setCollapsed((prev) => !prev)}
+						/>
+					) : (
 						<SelectedSpanDetails
+							setCollapsed={setCollapsed}
 							firstSpanStartTime={firstSpanStartTime}
 							traceStartTime={traceStartTime}
 							traceEndTime={traceEndTime}
@@ -287,8 +296,8 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 								.filter(Boolean)
 								.find((tree) => tree)}
 						/>
-					</StyledCol>
-				)}
+					)}
+				</StyledCol>
 			</Sider>
 		</StyledRow>
 	);

From 8e70bb4d58e53ae0d44c718c663ac8ffb4d57072 Mon Sep 17 00:00:00 2001
From: ahmadshaheer <ashaheerki@gmail.com>
Date: Sun, 15 Sep 2024 19:08:20 +0430
Subject: [PATCH 2/3] 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;
 `;
 
 /**

From b0fa464b460526ff4b819d7be0f0b1b3629d208a Mon Sep 17 00:00:00 2001
From: ahmadshaheer <ashaheerki@gmail.com>
Date: Fri, 27 Sep 2024 19:02:49 +0430
Subject: [PATCH 3/3] fix: failing test by modifying the expand button class
 name

---
 frontend/src/pages/TraceDetail/__test__/TraceDetail.test.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/pages/TraceDetail/__test__/TraceDetail.test.tsx b/frontend/src/pages/TraceDetail/__test__/TraceDetail.test.tsx
index b16bb6c735..3f2d419f72 100644
--- a/frontend/src/pages/TraceDetail/__test__/TraceDetail.test.tsx
+++ b/frontend/src/pages/TraceDetail/__test__/TraceDetail.test.tsx
@@ -139,9 +139,7 @@ describe('TraceDetail', () => {
 		const slider = await findByTestId('span-details-sider');
 		expect(slider).toBeInTheDocument();
 
-		fireEvent.click(
-			slider.querySelector('.ant-layout-sider-trigger') as HTMLElement,
-		);
+		fireEvent.click(slider.querySelector('.expand-collapse-btn') as HTMLElement);
 
 		expect(queryByText('Details for selected Span')).not.toBeInTheDocument();
 	});