feat: remove sidebar doc option

SigNoz · Sep 27, 2024 · 9b06170 · 9b06170
1 parent e4d1452
commit 9b06170
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 67 deletions.
diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx
@@ -22,22 +22,13 @@ import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import {
-	ReactNode,
-	useCallback,
-	useEffect,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
+import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Dispatch } from 'redux';
-import { sideBarCollapse } from 'store/actions';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import {
@@ -59,7 +50,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		(state) => state.app,
 	);
 
-	const [collapsed, setCollapsed] = useState<boolean>(
+	const [collapsed] = useState<boolean>(
 		getLocalStorageKey(IS_SIDEBAR_COLLAPSED) === 'true',
 	);
 
@@ -117,14 +108,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const latestCurrentCounter = useRef(0);
 	const latestVersionCounter = useRef(0);
 
-	const onCollapse = useCallback(() => {
-		setCollapsed((collapsed) => !collapsed);
-	}, []);
-
-	useLayoutEffect(() => {
-		dispatch(sideBarCollapse(collapsed));
-	}, [collapsed, dispatch]);
-
 	useEffect(() => {
 		if (
 			getUserLatestVersionResponse.isFetched &&
@@ -281,14 +264,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const isSideNavCollapsed = getLocalStorageKey(IS_SIDEBAR_COLLAPSED);
 
-	/**
-	 * Note: Right now we don't have a page-level method to pass the sidebar collapse state.
-	 * Since the use case for overriding is not widely needed, we are setting it here
-	 * so that the workspace locked page will have an expanded sidebar regardless of how users
-	 * have set it or what is stored in localStorage. This will not affect the localStorage config.
-	 */
-	const isWorkspaceLocked = pathname === ROUTES.WORKSPACE_LOCKED;
-
 	return (
 		<Layout
 			className={cx(
@@ -329,12 +304,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 				)}
 			>
 				{isToDisplayLayout && !renderFullScreen && (
-					<SideNav
-						licenseData={licenseData}
-						isFetching={isFetching}
-						onCollapse={onCollapse}
-						collapsed={isWorkspaceLocked ? false : collapsed}
-					/>
+					<SideNav licenseData={licenseData} isFetching={isFetching} />
 				)}
 				<div
 					className={cx('app-content', collapsed ? 'collapsed' : '')}

diff --git a/frontend/src/container/SideNav/SideNav.tsx b/frontend/src/container/SideNav/SideNav.tsx
@@ -3,7 +3,7 @@
 import './SideNav.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
-import { Button, Tooltip } from 'antd';
+import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { FeatureKeys } from 'constants/features';
@@ -16,9 +16,6 @@ import history from 'lib/history';
 import {
 	AlertTriangle,
 	CheckSquare,
-	ChevronLeftCircle,
-	ChevronRightCircle,
-	PanelRight,
 	RocketIcon,
 	UserCircle,
 } from 'lucide-react';
@@ -55,13 +52,9 @@ interface UserManagementMenuItems {
 function SideNav({
 	licenseData,
 	isFetching,
-	onCollapse,
-	collapsed,
 }: {
 	licenseData: any;
 	isFetching: boolean;
-	onCollapse: () => void;
-	collapsed: boolean;
 }): JSX.Element {
 	const [menuItems, setMenuItems] = useState(defaultMenuItems);
 
@@ -330,8 +323,6 @@ function SideNav({
 	};
 
 	useEffect(() => {
-		registerShortcut(GlobalShortcuts.SidebarCollapse, onCollapse);
-
 		registerShortcut(GlobalShortcuts.NavigateToServices, () =>
 			onClickHandler(ROUTES.APPLICATION, null),
 		);
@@ -368,11 +359,11 @@ function SideNav({
 			deregisterShortcut(GlobalShortcuts.NavigateToExceptions);
 			deregisterShortcut(GlobalShortcuts.NavigateToMessagingQueues);
 		};
-	}, [deregisterShortcut, onClickHandler, onCollapse, registerShortcut]);
+	}, [deregisterShortcut, onClickHandler, registerShortcut]);
 
 	return (
-		<div className={cx('sidenav-container', !collapsed ? 'docked' : '')}>
-			<div className={cx('sideNav', !collapsed ? 'docked' : '')}>
+		<div className={cx('sidenav-container')}>
+			<div className={cx('sideNav')}>
 				<div className="brand">
 					<div className="brand-company-meta">
 						<div
@@ -392,17 +383,6 @@ function SideNav({
 							<div className="license tag nav-item-label">{licenseTag}</div>
 						)}
 					</div>
-
-					<Tooltip
-						title={collapsed ? 'Dock Sidebar' : 'Undock Sidebar'}
-						placement="right"
-					>
-						<Button
-							className="periscope-btn nav-item-label dockBtn"
-							icon={<PanelRight size={16} />}
-							onClick={onCollapse}
-						/>
-					</Tooltip>
 				</div>
 
 				{isCloudUserVal && (
@@ -504,14 +484,6 @@ function SideNav({
 								}}
 							/>
 						)}
-
-						<div className="collapse-expand-handlers" onClick={onCollapse}>
-							{collapsed ? (
-								<ChevronRightCircle size={18} />
-							) : (
-								<ChevronLeftCircle size={18} />
-							)}
-						</div>
 					</div>
 				</div>
 			</div>

diff --git a/frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss b/frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss
@@ -1,6 +1,7 @@
 .trace-explorer-header {
 	display: flex;
 	justify-content: space-between;
+	align-items: center;
 
 	.trace-explorer-run-query {
 		display: flex;

diff --git a/frontend/src/store/reducers/app.ts b/frontend/src/store/reducers/app.ts
@@ -1,5 +1,4 @@
 import getLocalStorageKey from 'api/browser/localstorage/get';
-import { IS_SIDEBAR_COLLAPSED } from 'constants/app';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { getInitialUserTokenRefreshToken } from 'store/utils';
 import {
@@ -44,7 +43,7 @@ const getInitialUser = (): User | null => {
 
 const InitialValue: InitialValueTypes = {
 	isLoggedIn: getLocalStorageKey(LOCALSTORAGE.IS_LOGGED_IN) === 'true',
-	isSideBarCollapsed: getLocalStorageKey(IS_SIDEBAR_COLLAPSED) === 'true',
+	isSideBarCollapsed: true,
 	currentVersion: '',
 	latestVersion: '',
 	featureResponse: {