feat: add expand/collapse button to the top in trace details (#5980)

* feat: add expand/collapse button to the top in trace details

* fix: make the trace details collapsed sidebar match the design

* fix: failing test by modifying the expand button class name

frontend/src/container/AppLayout/index.tsx

@@ -232,19 +232,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) {
@@ -304,6 +301,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 											isMessagingQueues()
 												? 0
 												: '0 1rem',
+
+										...(isTraceDetailsView() ? { marginRight: 0 } : {}),
 									}}
 								>
 									{isToDisplayLayout && !renderFullScreen && <TopNav />}

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,14 @@ function SelectedSpanDetails(props: SelectedSpanDetailsProps): JSX.Element {
 				styledclass={[styles.selectedSpanDetailsContainer, styles.overflow]}
 				direction="vertical"
 			>
-				<Typography.Text
-					strong
-					style={{
-						marginTop: '16px',
-					}}
-				>
-					Details for selected Span
-				</Typography.Text>
+				<Row align="middle" justify="space-between">
+					<Typography.Text strong>Details for selected Span</Typography.Text>
+					<Button
+						className="periscope-btn nav-item-label expand-collapse-btn"
+						icon={<PanelRight size={16} />}
+						onClick={(): void => setCollapsed((prev) => !prev)}
+					/>
+				</Row>
 
 				<Typography.Text style={{ fontWeight: 700 }}>Service</Typography.Text>
 
@@ -170,6 +172,7 @@ interface SelectedSpanDetailsProps {
 	firstSpanStartTime: number;
 	traceStartTime?: number;
 	traceEndTime?: number;
+	setCollapsed: Dispatch<SetStateAction<boolean>>;
 }
 
 SelectedSpanDetails.defaultProps = {

frontend/src/container/TraceDetail/TraceDetails.styles.scss

@@ -20,4 +20,10 @@
 			background-color: white !important;
 		}
 	}
+
+	.expand-collapse-btn {
+		padding: 4px;
+		height: auto;
+		width: auto;
+	}
 }

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';
@@ -267,14 +268,21 @@ 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"
 			>
-				{!collapsed && (
 				<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 +295,8 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 								.filter(Boolean)
 								.find((tree) => tree)}
 						/>
-					</StyledCol>
 					)}
+				</StyledCol>
 			</Sider>
 		</StyledRow>
 	);

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;
 `;
 
 /**

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();
 	});