feat: remove sidebar dock option (#6083)

* feat: remove sidebar doc option

* feat: remove all references of sidebar collapse

frontend/src/constants/app.ts

@@ -6,7 +6,6 @@ export const AUTH0_REDIRECT_PATH = '/redirect';
 
 export const DEFAULT_AUTH0_APP_REDIRECTION_PATH = ROUTES.APPLICATION;
 
-export const IS_SIDEBAR_COLLAPSED = 'isSideBarCollapsed';
 export const INVITE_MEMBERS_HASH = '#invite-team-members';
 
 export const SIGNOZ_UPGRADE_PLAN_URL =

frontend/src/constants/shortcuts/globalShortcuts.ts

@@ -1,8 +1,4 @@
-import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
-
-const userOS = getUserOperatingSystem();
 export const GlobalShortcuts = {
-	SidebarCollapse: '\\+meta',
 	NavigateToServices: 's+shift',
 	NavigateToTraces: 't+shift',
 	NavigateToLogs: 'l+shift',
@@ -13,7 +9,6 @@ export const GlobalShortcuts = {
 };
 
 export const GlobalShortcutsName = {
-	SidebarCollapse: `${userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'}+\\`,
 	NavigateToServices: 'shift+s',
 	NavigateToTraces: 'shift+t',
 	NavigateToLogs: 'shift+l',
@@ -24,7 +19,6 @@ export const GlobalShortcutsName = {
 };
 
 export const GlobalShortcutsDescription = {
-	SidebarCollapse: 'Collpase the sidebar',
 	NavigateToServices: 'Navigate to Services page',
 	NavigateToTraces: 'Navigate to Traces page',
 	NavigateToLogs: 'Navigate to logs page',

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -16,12 +16,6 @@
 			width: 100%;
 		}
 	}
-
-	&.docked {
-		.app-content {
-			width: calc(100% - 240px);
-		}
-	}
 }
 
 .chat-support-gateway {

frontend/src/container/AppLayout/index.tsx

@@ -5,13 +5,11 @@ import './AppLayout.styles.scss';
 
 import * as Sentry from '@sentry/react';
 import { Flex } from 'antd';
-import getLocalStorageKey from 'api/browser/localstorage/get';
 import getUserLatestVersion from 'api/user/getLatestVersion';
 import getUserVersion from 'api/user/getVersion';
 import cx from 'classnames';
 import ChatSupportGateway from 'components/ChatSupportGateway/ChatSupportGateway';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { IS_SIDEBAR_COLLAPSED } from 'constants/app';
 import { FeatureKeys } from 'constants/features';
 import ROUTES from 'constants/routes';
 import SideNav from 'container/SideNav';
@@ -22,22 +20,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,10 +48,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		(state) => state.app,
 	);
 
-	const [collapsed, setCollapsed] = useState<boolean>(
-		getLocalStorageKey(IS_SIDEBAR_COLLAPSED) === 'true',
-	);
-
 	const { notifications } = useNotifications();
 
 	const isDarkMode = useIsDarkMode();
@@ -117,14 +102,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 &&
@@ -279,23 +256,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		}
 	}, [isDarkMode]);
 
-	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(
-				isDarkMode ? 'darkMode' : 'lightMode',
-				isSideNavCollapsed ? 'sidebarCollapsed' : '',
-			)}
-		>
+		<Layout className={cx(isDarkMode ? 'darkMode' : 'lightMode')}>
 			<Helmet>
 				<title>{pageTitle}</title>
 			</Helmet>
@@ -321,25 +283,11 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 				</div>
 			)}
 
-			<Flex
-				className={cx(
-					'app-layout',
-					isDarkMode ? 'darkMode' : 'lightMode',
-					!collapsed && !renderFullScreen ? 'docked' : '',
-				)}
-			>
+			<Flex className={cx('app-layout', isDarkMode ? 'darkMode' : 'lightMode')}>
 				{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' : '')}
-					data-overlayscrollbars-initialize
-				>
+				<div className="app-content" data-overlayscrollbars-initialize>
 					<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 						<LayoutContent data-overlayscrollbars-initialize>
 							<OverlayScrollbar>

frontend/src/container/SideNav/SideNav.styles.scss

@@ -3,10 +3,6 @@
 	height: 100%;
 	position: relative;
 	z-index: 1;
-
-	&.docked {
-		width: 240px;
-	}
 }
 
 .sideNav {
@@ -229,39 +225,6 @@
 			display: block;
 		}
 	}
-
-	&.docked {
-		flex: 0 0 240px;
-		max-width: 240px;
-		min-width: 240px;
-		width: 240px;
-
-		.secondary-nav-items {
-			width: 240px;
-		}
-
-		.brand {
-			justify-content: space-between;
-		}
-
-		.get-started-nav-items {
-			.get-started-btn {
-				justify-content: flex-start;
-			}
-		}
-
-		.collapse-expand-handlers {
-			display: block;
-		}
-
-		.nav-item-label {
-			display: block;
-		}
-
-		.nav-item-beta {
-			display: block;
-		}
-	}
 }
 
 .lightMode {

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),
 		);
@@ -359,7 +350,6 @@ function SideNav({
 		);
 
 		return (): void => {
-			deregisterShortcut(GlobalShortcuts.SidebarCollapse);
 			deregisterShortcut(GlobalShortcuts.NavigateToServices);
 			deregisterShortcut(GlobalShortcuts.NavigateToTraces);
 			deregisterShortcut(GlobalShortcuts.NavigateToLogs);
@@ -368,11 +358,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 +382,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 +483,6 @@ function SideNav({
 								}}
 							/>
 						)}
-
-						<div className="collapse-expand-handlers" onClick={onCollapse}>
-							{collapsed ? (
-								<ChevronRightCircle size={18} />
-							) : (
-								<ChevronLeftCircle size={18} />
-							)}
-						</div>
 					</div>
 				</div>
 			</div>

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;

frontend/src/store/actions/app/index.ts

@@ -1 +0,0 @@
-export * from './sideBarCollapse';

frontend/src/store/actions/app/sideBarCollapse.ts

@@ -1,16 +0,0 @@
-import setLocalStorageKey from 'api/browser/localstorage/set';
-import { IS_SIDEBAR_COLLAPSED } from 'constants/app';
-import { Dispatch } from 'redux';
-import AppActions from 'types/actions';
-
-export const sideBarCollapse = (
-	collapseState: boolean,
-): ((dispatch: Dispatch<AppActions>) => void) => {
-	setLocalStorageKey(IS_SIDEBAR_COLLAPSED, `${collapseState}`);
-	return (dispatch: Dispatch<AppActions>): void => {
-		dispatch({
-			type: 'SIDEBAR_COLLAPSE',
-			payload: collapseState,
-		});
-	};
-};

frontend/src/store/actions/index.ts

@@ -1,4 +1,3 @@
-export * from './app';
 export * from './global';
 export * from './metrics';
 export * from './serviceMap';

frontend/src/store/reducers/app.ts

@@ -1,11 +1,9 @@
 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 {
 	AppAction,
 	LOGGED_IN,
-	SIDEBAR_COLLAPSE,
 	UPDATE_CONFIGS,
 	UPDATE_CURRENT_ERROR,
 	UPDATE_CURRENT_VERSION,
@@ -44,7 +42,6 @@ const getInitialUser = (): User | null => {
 
 const InitialValue: InitialValueTypes = {
 	isLoggedIn: getLocalStorageKey(LOCALSTORAGE.IS_LOGGED_IN) === 'true',
-	isSideBarCollapsed: getLocalStorageKey(IS_SIDEBAR_COLLAPSED) === 'true',
 	currentVersion: '',
 	latestVersion: '',
 	featureResponse: {
@@ -76,13 +73,6 @@ const appReducer = (
 			};
 		}
 
-		case SIDEBAR_COLLAPSE: {
-			return {
-				...state,
-				isSideBarCollapsed: action.payload,
-			};
-		}
-
 		case UPDATE_FEATURE_FLAG_RESPONSE: {
 			return {
 				...state,

frontend/src/types/actions/app.ts

@@ -34,11 +34,6 @@ export interface LoggedInUser {
 	};
 }
 
-export interface SideBarCollapse {
-	type: typeof SIDEBAR_COLLAPSE;
-	payload: boolean;
-}
-
 export interface UpdateAppVersion {
 	type: typeof UPDATE_CURRENT_VERSION;
 	payload: {
@@ -137,7 +132,6 @@ export interface UpdateFeatureFlag {
 
 export type AppAction =
 	| LoggedInUser
-	| SideBarCollapse
 	| UpdateAppVersion
 	| UpdateLatestVersion
 	| UpdateVersionError

frontend/src/types/reducer/app.ts

@@ -17,7 +17,6 @@ export interface User {
 
 export default interface AppReducer {
 	isLoggedIn: boolean;
-	isSideBarCollapsed: boolean;
 	currentVersion: string;
 	latestVersion: string;
 	isCurrentVersionError: boolean;

frontend/tests/auth.json

@@ -1,38 +1,34 @@
 {
-  "cookies": [],
-  "origins": [
-    {
-      "origin": "http://localhost:3301",
-      "localStorage": [
-        {
-          "name": "isSideBarCollapsed",
-          "value": "false"
-        },
-        {
-          "name": "metricsTimeDurations",
-          "value": "{}"
-        },
-        {
-          "name": "i18nextLng",
-          "value": "en-US"
-        },
-        {
-          "name": "reactQueryDevtoolsSortFn",
-          "value": "\"Status > Last Updated\""
-        },
-        {
-          "name": "AUTH_TOKEN",
-          "value": "authtoken"
-        },
-        {
-          "name": "IS_LOGGED_IN",
-          "value": "true"
-        },
-        {
-          "name": "REFRESH_AUTH_TOKEN",
-          "value": "refreshJwt"
-        }
-      ]
-    }
-  ]
-}
+	"cookies": [],
+	"origins": [
+		{
+			"origin": "http://localhost:3301",
+			"localStorage": [
+				{
+					"name": "metricsTimeDurations",
+					"value": "{}"
+				},
+				{
+					"name": "i18nextLng",
+					"value": "en-US"
+				},
+				{
+					"name": "reactQueryDevtoolsSortFn",
+					"value": "\"Status > Last Updated\""
+				},
+				{
+					"name": "AUTH_TOKEN",
+					"value": "authtoken"
+				},
+				{
+					"name": "IS_LOGGED_IN",
+					"value": "true"
+				},
+				{
+					"name": "REFRESH_AUTH_TOKEN",
+					"value": "refreshJwt"
+				}
+			]
+		}
+	]
+}