feat: add support for extensible shortcut for LogResizeButton

Author: Elessar1802

src/Common/Constants.ts

@@ -548,3 +548,5 @@ export const VULNERABILITIES_SORT_PRIORITY = {
     low: 4,
     unknown: 5,
 }
+
+export const IS_PLATFORM_MAC_OS = window.navigator.userAgent.toUpperCase().includes('MAC')

src/Common/Tooltip/ShortcutKeyComboTooltipContent.tsx

@@ -3,13 +3,15 @@ import { KEYBOARD_KEYS_MAP, TooltipProps } from './types'
 const ShortcutKeyComboTooltipContent = ({ text, combo }: TooltipProps['shortcutKeyCombo']) => (
     <div className="flexbox dc__gap-8 px-8 py-4 flex-wrap">
         <span className="lh-18 fs-12 fw-4 cn-0">{text}</span>
-        <div className="flexbox dc__gap-4 dc__align-items-center flex-wrap">
-            {combo.map((key) => (
-                <span key={key} className="shortcut-keys__chip dc__capitalize lh-16 fs-11 fw-5 flex">
-                    {KEYBOARD_KEYS_MAP[key]}
-                </span>
-            ))}
-        </div>
+        {!!combo?.length && (
+            <div className="flexbox dc__gap-4 dc__align-items-center flex-wrap">
+                {combo.map((key) => (
+                    <span key={key} className="shortcut-keys__chip dc__capitalize lh-16 fs-11 fw-5 flex">
+                        {KEYBOARD_KEYS_MAP[key]}
+                    </span>
+                ))}
+            </div>
+        )}
     </div>
 )
 

src/Common/Tooltip/types.ts

@@ -1,9 +1,8 @@
+import { IS_PLATFORM_MAC_OS } from '@Common/Constants'
 import { TippyProps } from '@tippyjs/react'
 
-const isMacOS = navigator.userAgent.toUpperCase().includes('MAC')
-
 export const KEYBOARD_KEYS_MAP = {
-    Control: isMacOS ? '⌘' : 'Ctrl',
+    Control: IS_PLATFORM_MAC_OS ? '⌘' : 'Ctrl',
     Shift: '⇧',
     F: 'F',
     E: 'E',

src/Shared/Components/CICDHistory/History.components.tsx

@@ -18,7 +18,14 @@ import Tippy from '@tippyjs/react'
 import { useEffect, useRef } from 'react'
 import { useLocation } from 'react-router-dom'
 import { withShortcut, IWithShortcut } from 'react-keybind'
-import { ClipboardButton, GenericEmptyState, Tooltip, extractImage, useSuperAdmin } from '../../../Common'
+import {
+    ClipboardButton,
+    GenericEmptyState,
+    Tooltip,
+    extractImage,
+    IS_PLATFORM_MAC_OS,
+    useSuperAdmin,
+} from '../../../Common'
 import { EMPTY_STATE_STATUS } from '../../constants'
 import { ReactComponent as DropDownIcon } from '../../../Assets/Icon/ic-chevron-down.svg'
 import { GitChangesType, LogResizeButtonType, ScrollerType } from './types'
@@ -29,47 +36,63 @@ import { ReactComponent as ZoomOut } from '../../../Assets/Icon/ic-exit-fullscre
 import './cicdHistory.scss'
 
 export const LogResizeButton = withShortcut(
-    ({ fullScreenView, setFullScreenView, shortcut }: LogResizeButtonType & IWithShortcut): JSX.Element => {
+    ({
+        shortcutCombo = ['F'],
+        onlyOnLogs = true,
+        fullScreenView,
+        setFullScreenView,
+        shortcut,
+    }: LogResizeButtonType & IWithShortcut): JSX.Element => {
         const { pathname } = useLocation()
-        const zoomButtonRef = useRef<HTMLDivElement>(null)
+        const zoomButtonRef = useRef<HTMLButtonElement>(null)
 
-        const toggleFullScreen = (): void => {
+        const toggleFullScreen = () => {
             // NOTE: need to use ref due to the problem of stale function reference after registering the callback
             setFullScreenView(!(zoomButtonRef.current.dataset.isFullscreenView === 'true'))
         }
 
+        const showButton = pathname.includes('/logs') || !onlyOnLogs
+        const doesShortcutContainCmdKey = shortcutCombo.some((key) => key === 'Control') && IS_PLATFORM_MAC_OS
+
         useEffect(() => {
-            shortcut.registerShortcut(toggleFullScreen, ['f'], 'ToggleFullscreen', 'Enter/Exit fullscreen')
-            shortcut.registerShortcut(
-                () => setFullScreenView(false),
-                ['Escape'],
-                'ToggleFullscreen',
-                'Enter/Exit fullscreen',
-            )
+            const combo = shortcutCombo
+                .map((key) => {
+                    if (key === 'Control') {
+                        return IS_PLATFORM_MAC_OS ? 'cmd' : 'ctrl'
+                    }
+                    return key.toLowerCase()
+                })
+                .join('+')
+
+            // FIXME: disabling shortcut for macos since pressing cmd breaks shortcuts through react-keybind
+            if (showButton && shortcutCombo.length && !doesShortcutContainCmdKey) {
+                shortcut.registerShortcut(toggleFullScreen, [combo], 'ToggleFullscreen', 'Enter/Exit fullscreen')
+            }
 
             return () => {
-                shortcut.unregisterShortcut(['f'])
-                shortcut.unregisterShortcut(['Escape'])
+                shortcut.unregisterShortcut([combo])
             }
-        }, [pathname.includes('/logs')])
+        }, [showButton])
 
         return (
-            pathname.includes('/logs') && (
+            showButton && (
                 <Tooltip
                     placement="left"
                     shortcutKeyCombo={{
                         text: fullScreenView ? 'Exit fullscreen' : 'Enter fullscreen',
-                        combo: ['F'] as const,
+                        combo: doesShortcutContainCmdKey ? null : shortcutCombo,
                     }}
                 >
-                    <div
+                    <button
+                        type="button"
+                        aria-label="Enter/Exit fullscreen"
                         ref={zoomButtonRef}
                         data-is-fullscreen-view={fullScreenView}
-                        className={`zoom ${fullScreenView ? 'zoom--out' : 'zoom--in'} pointer dc__zi-4 flex`}
+                        className={`zoom ${fullScreenView ? 'zoom--out' : 'zoom--in'} pointer dc__zi-4 flex dc__transparent`}
                         onClick={toggleFullScreen}
                     >
                         {fullScreenView ? <ZoomOut className="icon-dim-16" /> : <ZoomIn className="icon-dim-16" />}
-                    </div>
+                    </button>
                 </Tooltip>
             )
         )

src/Shared/Components/CICDHistory/types.tsx

@@ -27,6 +27,7 @@ import {
     PaginationProps,
     useScrollable,
     SortingOrder,
+    SupportedKeyboardKeysType,
 } from '../../../Common'
 import { DeploymentStageType } from '../../constants'
 import { AggregationKeys, GitTriggers, Node, NodeType, ResourceKindType, ResourceVersionType } from '../../types'
@@ -46,9 +47,8 @@ export enum FetchIdDataStatus {
 }
 
 export interface LogResizeButtonType {
-    shortcutCombo?: string[]
+    shortcutCombo?: SupportedKeyboardKeysType[]
     onlyOnLogs?: boolean
-    disableKeybindings?: boolean
     fullScreenView: boolean
     setFullScreenView: React.Dispatch<React.SetStateAction<boolean>>
 }