fix: date time value retain on location switch (#4546)

* fix: date time value retain on location switch

* chore: added inline comments

* feat: added shortcut strings based on user os

* feat: added shortcut strings based on user os

* feat: added shortcut strings based on user os

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -21,6 +21,7 @@ import {
 	useEffect,
 	useState,
 } from 'react';
+import { useLocation } from 'react-router-dom';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import CustomTimePickerPopoverContent from './CustomTimePickerPopoverContent';
@@ -68,6 +69,7 @@ function CustomTimePicker({
 	const [inputErrorMessage, setInputErrorMessage] = useState<string | null>(
 		null,
 	);
+	const location = useLocation();
 	const [isInputFocused, setIsInputFocused] = useState(false);
 
 	const getSelectedTimeRangeLabel = (
@@ -222,6 +224,15 @@ function CustomTimePicker({
 		setIsInputFocused(false);
 	};
 
+	// this is required as TopNav component wraps the components and we need to clear the state on path change
+	useEffect(() => {
+		setInputStatus('');
+		onError(false);
+		setInputErrorMessage(null);
+		setInputValue('');
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [location.pathname]);
+
 	return (
 		<div className="custom-time-picker">
 			<Popover

frontend/src/constants/shortcuts/globalShortcuts.ts

@@ -1,3 +1,6 @@
+import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
+
+const userOS = getUserOperatingSystem();
 export const GlobalShortcuts = {
 	SidebarCollapse: '\\+meta',
 	NavigateToServices: 's+shift',
@@ -8,6 +11,16 @@ export const GlobalShortcuts = {
 	NavigateToExceptions: 'e+shift',
 };
 
+export const GlobalShortcutsName = {
+	SidebarCollapse: `${userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'}+\\`,
+	NavigateToServices: 'shift+s',
+	NavigateToTraces: 'shift+t',
+	NavigateToLogs: 'shift+l',
+	NavigateToDashboards: 'shift+d',
+	NavigateToAlerts: 'shift+a',
+	NavigateToExceptions: 'shift+e',
+};
+
 export const GlobalShortcutsDescription = {
 	SidebarCollapse: 'Collpase the sidebar',
 	NavigateToServices: 'Navigate to Services page',

frontend/src/constants/shortcuts/logsExplorerShortcuts.ts

@@ -1,8 +1,18 @@
+import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
+
+const userOS = getUserOperatingSystem();
 export const LogsExplorerShortcuts = {
 	StageAndRunQuery: 'enter+meta',
 	FocusTheSearchBar: 's',
 };
 
+export const LogsExplorerShortcutsName = {
+	StageAndRunQuery: `${
+		userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'
+	}+enter`,
+	FocusTheSearchBar: 's',
+};
+
 export const LogsExplorerShortcutsDescription = {
 	StageAndRunQuery: 'Stage and Run the current query',
 	FocusTheSearchBar: 'Shift the focus to the last query filter bar',

frontend/src/pages/Shortcuts/utils.ts

@@ -2,10 +2,12 @@ import { TableProps } from 'antd';
 import {
 	GlobalShortcuts,
 	GlobalShortcutsDescription,
+	GlobalShortcutsName,
 } from 'constants/shortcuts/globalShortcuts';
 import {
 	LogsExplorerShortcuts,
 	LogsExplorerShortcutsDescription,
+	LogsExplorerShortcutsName,
 } from 'constants/shortcuts/logsExplorerShortcuts';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -14,6 +16,11 @@ export const ALL_SHORTCUTS: Record<string, Record<string, string>> = {
 	'Logs Explorer Shortcuts': LogsExplorerShortcuts,
 };
 
+export const ALL_SHORTCUTS_LABEL: Record<string, Record<string, string>> = {
+	'Global Shortcuts': GlobalShortcutsName,
+	'Logs Explorer Shortcuts': LogsExplorerShortcutsName,
+};
+
 export const ALL_SHORTCUTS_DESCRIPTION: Record<
 	string,
 	Record<string, string>
@@ -46,9 +53,10 @@ export function generateTableData(
 ): TableProps<ShortcutRow>['dataSource'] {
 	const shortcuts = ALL_SHORTCUTS[shortcutSection];
 	const shortcutsDescription = ALL_SHORTCUTS_DESCRIPTION[shortcutSection];
+	const shortcutsLabel = ALL_SHORTCUTS_LABEL[shortcutSection];
 	return Object.keys(shortcuts).map((shortcutName) => ({
 		key: `${shortcuts[shortcutName]} ${shortcutName}`,
-		shortcutKey: shortcuts[shortcutName],
+		shortcutKey: shortcutsLabel[shortcutName],
 		shortcutDescription: shortcutsDescription[shortcutName],
 	}));
 }

frontend/src/utils/getUserOS.ts

@@ -0,0 +1,14 @@
+export enum UserOperatingSystem {
+	WINDOWS = 'Windows',
+	MACOS = 'Mac OS',
+}
+
+export function getUserOperatingSystem(): UserOperatingSystem {
+	// https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent
+	if (window.navigator.userAgent.indexOf(UserOperatingSystem.WINDOWS) !== -1) {
+		return UserOperatingSystem.WINDOWS;
+	}
+
+	// default return is MacOS
+	return UserOperatingSystem.MACOS;
+}