Merge pull request #309 from devtron-labs/feat/fullscreen-terminal

feat: add support to go fullscreen for all terminals

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.6-beta-5",
+    "version": "0.3.6-beta-7",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -548,3 +548,6 @@ export const VULNERABILITIES_SORT_PRIORITY = {
     low: 4,
     unknown: 5,
 }
+
+// TODO: might not work need to verify
+export const IS_PLATFORM_MAC_OS = window.navigator.userAgent.toUpperCase().includes('MAC')

src/Common/Constants.ts

@@ -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/ShortcutKeyComboTooltipContent.tsx

@@ -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/Common/Tooltip/types.ts

@@ -18,7 +18,14 @@ import Tippy from '@tippyjs/react'
 import { useCallback, useEffect } 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,44 +36,56 @@ 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'],
+        showOnlyWhenPathIncludesLogs = true,
+        fullScreenView,
+        setFullScreenView,
+        shortcut,
+    }: LogResizeButtonType & IWithShortcut): JSX.Element => {
         const { pathname } = useLocation()
 
         const toggleFullScreen = useCallback((): void => {
             // NOTE: need to use ref due to the problem of stale function reference after registering the callback
             setFullScreenView(!fullScreenView)
         }, [fullScreenView])
 
+        const showButton = !showOnlyWhenPathIncludesLogs || pathname.includes('/logs')
+        const doesShortcutContainCmdKey = shortcutCombo.some((key) => key === 'Control') && IS_PLATFORM_MAC_OS
+
         useEffect(() => {
-            if (pathname.includes('/logs')) {
-                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, toggleFullScreen])
+        }, [showButton, toggleFullScreen])
 
         return (
-            pathname.includes('/logs') && (
+            showButton && (
                 <Tooltip
                     placement="left"
                     shortcutKeyCombo={{
                         text: fullScreenView ? 'Exit fullscreen' : 'Enter fullscreen',
-                        combo: ['F'] as const,
+                        combo: doesShortcutContainCmdKey ? null : shortcutCombo,
                     }}
                 >
                     <button
                         type="button"
                         aria-label="Enter/Exit fullscreen view"
-                        className="zoom dc__zi-4 flex dc__transparent log-resize-button"
+                        className="zoom dc__zi-4 flex dc__no-border log-resize-button"
                         onClick={toggleFullScreen}
                     >
                         {fullScreenView ? (

src/Shared/Components/CICDHistory/History.components.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,6 +47,8 @@ export enum FetchIdDataStatus {
 }
 
 export interface LogResizeButtonType {
+    shortcutCombo?: SupportedKeyboardKeysType[]
+    showOnlyWhenPathIncludesLogs?: boolean
     fullScreenView: boolean
     setFullScreenView: React.Dispatch<React.SetStateAction<boolean>>
 }