diff --git a/frontend/src/constants/app.ts b/frontend/src/constants/app.ts index d260806856..c82e2a34e8 100644 --- 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 index 4ab7752fac..8b68b7195e 100644 --- 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 index 2ae1531c79..a991f08351 100644 --- 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 index 4cf2e0f5bb..4f5a3c43d7 100644 --- 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'; @@ -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( - 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 ( - + {pageTitle} @@ -321,25 +283,11 @@ function AppLayout(props: AppLayoutProps): JSX.Element { )} - + {isToDisplayLayout && !renderFullScreen && ( - + )} -
+
}> diff --git a/frontend/src/container/SideNav/SideNav.styles.scss b/frontend/src/container/SideNav/SideNav.styles.scss index 2f5167f104..1a148e2469 100644 --- 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 index 1ba863d8ec..16787bc3d8 100644 --- 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), ); @@ -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 ( -
-
+
+
{licenseTag}
)}
- - -
{isCloudUserVal && ( @@ -504,14 +483,6 @@ function SideNav({ }} /> )} - -
- {collapsed ? ( - - ) : ( - - )} -
diff --git a/frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss b/frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss index cf6eb52b10..4323f901d5 100644 --- 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/actions/app/index.ts b/frontend/src/store/actions/app/index.ts deleted file mode 100644 index cb2a26f9e6..0000000000 --- a/frontend/src/store/actions/app/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './sideBarCollapse'; diff --git a/frontend/src/store/actions/app/sideBarCollapse.ts b/frontend/src/store/actions/app/sideBarCollapse.ts deleted file mode 100644 index c99d79b6fb..0000000000 --- a/frontend/src/store/actions/app/sideBarCollapse.ts +++ /dev/null @@ -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) => void) => { - setLocalStorageKey(IS_SIDEBAR_COLLAPSED, `${collapseState}`); - return (dispatch: Dispatch): void => { - dispatch({ - type: 'SIDEBAR_COLLAPSE', - payload: collapseState, - }); - }; -}; diff --git a/frontend/src/store/actions/index.ts b/frontend/src/store/actions/index.ts index 3074cdb3a2..f50fb7477c 100644 --- 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 index 4db3965cad..bdb80d2565 100644 --- a/frontend/src/store/reducers/app.ts +++ b/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, diff --git a/frontend/src/types/actions/app.ts b/frontend/src/types/actions/app.ts index 78a5da72ad..54b1992af2 100644 --- 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 index 545cff7156..c51defcfb0 100644 --- 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 index 2dd3d40466..0de47618ab 100644 --- 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" - } - ] - } - ] -} \ No newline at end of file + "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" + } + ] + } + ] +}