feat: remove all references of sidebar collapse

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

Hide file tree

Showing 13 changed files with 36 additions and 147 deletions.
diff --git a/frontend/src/constants/app.ts b/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 =

diff --git a/frontend/src/constants/shortcuts/globalShortcuts.ts b/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',

diff --git a/frontend/src/container/AppLayout/AppLayout.styles.scss b/frontend/src/container/AppLayout/AppLayout.styles.scss
@@ -16,12 +16,6 @@
 			width: 100%;
 		}
 	}
-
-	&.docked {
-		.app-content {
-			width: calc(100% - 240px);
-		}
-	}
 }
 
 .chat-support-gateway {

diff --git a/frontend/src/container/AppLayout/index.tsx b/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';
@@ -50,10 +48,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		(state) => state.app,
 	);
 
-	const [collapsed] = useState<boolean>(
-		getLocalStorageKey(IS_SIDEBAR_COLLAPSED) === 'true',
-	);
-
 	const { notifications } = useNotifications();
 
 	const isDarkMode = useIsDarkMode();
@@ -262,15 +256,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		}
 	}, [isDarkMode]);
 
-	const isSideNavCollapsed = getLocalStorageKey(IS_SIDEBAR_COLLAPSED);
-
 	return (
-		<Layout
-			className={cx(
-				isDarkMode ? 'darkMode' : 'lightMode',
-				isSideNavCollapsed ? 'sidebarCollapsed' : '',
-			)}
-		>
+		<Layout className={cx(isDarkMode ? 'darkMode' : 'lightMode')}>
 			<Helmet>
 				<title>{pageTitle}</title>
 			</Helmet>
@@ -296,20 +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} />
 				)}
-				<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>

diff --git a/frontend/src/container/SideNav/SideNav.styles.scss b/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 {

diff --git a/frontend/src/container/SideNav/SideNav.tsx b/frontend/src/container/SideNav/SideNav.tsx
@@ -350,7 +350,6 @@ function SideNav({
 		);
 
 		return (): void => {
-			deregisterShortcut(GlobalShortcuts.SidebarCollapse);
 			deregisterShortcut(GlobalShortcuts.NavigateToServices);
 			deregisterShortcut(GlobalShortcuts.NavigateToTraces);
 			deregisterShortcut(GlobalShortcuts.NavigateToLogs);

diff --git a/frontend/src/store/actions/app/index.ts b/frontend/src/store/actions/app/index.ts
diff --git a/frontend/src/store/actions/app/sideBarCollapse.ts b/frontend/src/store/actions/app/sideBarCollapse.ts
diff --git a/frontend/src/store/actions/index.ts b/frontend/src/store/actions/index.ts
@@ -1,4 +1,3 @@
-export * from './app';
 export * from './global';
 export * from './metrics';
 export * from './serviceMap';

diff --git a/frontend/src/store/reducers/app.ts b/frontend/src/store/reducers/app.ts
@@ -4,7 +4,6 @@ import { getInitialUserTokenRefreshToken } from 'store/utils';
 import {
 	AppAction,
 	LOGGED_IN,
-	SIDEBAR_COLLAPSE,
 	UPDATE_CONFIGS,
 	UPDATE_CURRENT_ERROR,
 	UPDATE_CURRENT_VERSION,
@@ -43,7 +42,6 @@ const getInitialUser = (): User | null => {
 
 const InitialValue: InitialValueTypes = {
 	isLoggedIn: getLocalStorageKey(LOCALSTORAGE.IS_LOGGED_IN) === 'true',
-	isSideBarCollapsed: true,
 	currentVersion: '',
 	latestVersion: '',
 	featureResponse: {
@@ -75,13 +73,6 @@ const appReducer = (
 			};
 		}
 
-		case SIDEBAR_COLLAPSE: {
-			return {
-				...state,
-				isSideBarCollapsed: action.payload,
-			};
-		}
-
 		case UPDATE_FEATURE_FLAG_RESPONSE: {
 			return {
 				...state,

diff --git a/frontend/src/types/actions/app.ts b/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

diff --git a/frontend/src/types/reducer/app.ts b/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;

diff --git a/frontend/tests/auth.json b/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"
+				}
+			]
+		}
+	]
+}