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

frontend/src/container/TraceDetail/SelectedSpanDetails/index.tsx

@@ -1,12 +1,13 @@
-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';
 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 = {

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

@@ -20,4 +20,8 @@
 			background-color: white !important;
 		}
 	}
+
+	.expand-collapse-btn {
+		margin: 12px 0 0 12px;
+	}
 }

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