Merge pull request #312 from devtron-labs/fix/expand-all-logs

fix: use react-keybind for logs resize button & expand all logs accordions

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.7",
+    "version": "0.3.6-beta-5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -87,6 +87,7 @@
         "react-mde": "^11.5.0",
         "react-router": "^5.3.0",
         "react-router-dom": "^5.3.0",
+        "react-keybind": "^0.9.4",
         "rxjs": "^7.8.1",
         "yaml": "^2.4.1"
     },

package.json

@@ -6,6 +6,7 @@ export const KEYBOARD_KEYS_MAP = {
     Control: isMacOS ? '⌘' : 'Ctrl',
     Shift: '⇧',
     F: 'F',
+    E: 'E',
 } as const
 
 export type SupportedKeyboardKeysType = keyof typeof KEYBOARD_KEYS_MAP

src/Common/Tooltip/types.ts

@@ -15,9 +15,10 @@
  */
 
 import Tippy from '@tippyjs/react'
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { ClipboardButton, GenericEmptyState, extractImage, useKeyDown, useSuperAdmin } from '../../../Common'
+import { withShortcut, IWithShortcut } from 'react-keybind'
+import { ClipboardButton, GenericEmptyState, Tooltip, extractImage, 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'
@@ -27,53 +28,62 @@ import { ReactComponent as ZoomIn } from '../../../Assets/Icon/ic-fullscreen.svg
 import { ReactComponent as ZoomOut } from '../../../Assets/Icon/ic-exit-fullscreen.svg'
 import './cicdHistory.scss'
 
-export const LogResizeButton = ({ fullScreenView, setFullScreenView }: LogResizeButtonType): JSX.Element => {
-    const { pathname } = useLocation()
+export const LogResizeButton = withShortcut(
+    ({ fullScreenView, setFullScreenView, shortcut }: LogResizeButtonType & IWithShortcut): JSX.Element => {
+        const { pathname } = useLocation()
 
-    const keys = useKeyDown()
+        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 toggleFullScreen = (): void => {
-        setFullScreenView(!fullScreenView)
-    }
+        useEffect(() => {
+            if (pathname.includes('/logs')) {
+                shortcut.registerShortcut(toggleFullScreen, ['f'], 'ToggleFullscreen', 'Enter/Exit fullscreen')
+                shortcut.registerShortcut(
+                    () => setFullScreenView(false),
+                    ['Escape'],
+                    'ToggleFullscreen',
+                    'Enter/Exit fullscreen',
+                )
+            }
 
-    useEffect(() => {
-        if (!pathname.includes('/logs')) {
-            return
-        }
-        // eslint-disable-next-line default-case
-        switch (keys.join('')) {
-            case 'f':
-                toggleFullScreen()
-                break
-            case 'Escape':
-                setFullScreenView(false)
-                break
-        }
-    }, [keys])
+            return () => {
+                shortcut.unregisterShortcut(['f'])
+                shortcut.unregisterShortcut(['Escape'])
+            }
+        }, [pathname, toggleFullScreen])
 
-    return (
-        pathname.includes('/logs') && (
-            <Tippy
-                placement="top"
-                arrow={false}
-                className="default-tt"
-                content={fullScreenView ? 'Exit fullscreen (f)' : 'Enter fullscreen (f)'}
-            >
-                <div>
-                    {fullScreenView ? (
-                        <ZoomOut className="zoom zoom--out pointer dc__zi-4" onClick={toggleFullScreen} />
-                    ) : (
-                        <ZoomIn className="zoom zoom--in pointer dc__zi-4" onClick={toggleFullScreen} />
-                    )}
-                </div>
-            </Tippy>
+        return (
+            pathname.includes('/logs') && (
+                <Tooltip
+                    placement="left"
+                    shortcutKeyCombo={{
+                        text: fullScreenView ? 'Exit fullscreen' : 'Enter fullscreen',
+                        combo: ['F'] as const,
+                    }}
+                >
+                    <button
+                        type="button"
+                        aria-label="Enter/Exit fullscreen view"
+                        className="zoom dc__zi-4 flex dc__transparent log-resize-button"
+                        onClick={toggleFullScreen}
+                    >
+                        {fullScreenView ? (
+                            <ZoomOut className="icon-dim-16 dc__no-shrink" />
+                        ) : (
+                            <ZoomIn className="icon-dim-16 dc__no-shrink" />
+                        )}
+                    </button>
+                </Tooltip>
+            )
         )
-    )
-}
+    },
+)
 
 export const Scroller = ({ scrollToTop, scrollToBottom, style }: ScrollerType): JSX.Element => (
     <div style={style} className="dc__element-scroller flex column top br-4">
-        <Tippy className="default-tt" arrow={false} content="Scroll to Top">
+        <Tippy className="default-tt" arrow={false} content="Scroll to Top" placement="left">
             <button
                 className="flex"
                 disabled={!scrollToTop}
@@ -84,7 +94,7 @@ export const Scroller = ({ scrollToTop, scrollToBottom, style }: ScrollerType):
                 <DropDownIcon className="rotate" style={{ ['--rotateBy' as any]: '180deg' }} />
             </button>
         </Tippy>
-        <Tippy className="default-tt" arrow={false} content="Scroll to Bottom">
+        <Tippy className="default-tt" arrow={false} content="Scroll to Bottom" placement="left">
             <button
                 className="flex"
                 disabled={!scrollToBottom}

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

@@ -15,13 +15,14 @@
  */
 
 import { useParams } from 'react-router-dom'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import AnsiUp from 'ansi_up'
 import DOMPurify from 'dompurify'
 import { ANSI_UP_REGEX, ComponentSizeType } from '@Shared/constants'
 import { escapeRegExp } from '@Shared/Helpers'
 import { ReactComponent as ICExpandAll } from '@Icons/ic-expand-all.svg'
 import { ReactComponent as ICCollapseAll } from '@Icons/ic-collapse-all.svg'
+import { withShortcut, IWithShortcut } from 'react-keybind'
 import {
     Progressing,
     Host,
@@ -30,7 +31,6 @@ import {
     ROUTES,
     SearchBar,
     useUrlFilters,
-    stopPropagation,
     Tooltip,
 } from '../../../Common'
 import LogStageAccordion from './LogStageAccordion'
@@ -170,12 +170,13 @@ const useCIEventSource = (url: string, maxLength?: number): [string[], EventSour
     return [dataVal, eventSourceRef.current, logsNotAvailableError]
 }
 
-export const LogsRenderer = ({
+const LogsRenderer = ({
     triggerDetails,
     isBlobStorageConfigured,
     parentType,
     fullScreenView,
-}: LogsRendererType): JSX.Element => {
+    shortcut,
+}: LogsRendererType & IWithShortcut) => {
     const { pipelineId, envId, appId } = useParams<DeploymentHistoryBaseParamsType>()
     const logsURL =
         parentType === HistoryComponentType.CI
@@ -384,6 +385,28 @@ export const LogsRenderer = ({
         // And for other cases we would use handleSearchEnter
     }, [streamDataList, areEventsProgressing])
 
+    const handleToggleOpenAllStages = useCallback(() => {
+        setStageList((prev) =>
+            prev.map((stage) => ({
+                ...stage,
+                isOpen: !areAllStagesExpanded,
+            })),
+        )
+    }, [areAllStagesExpanded])
+
+    useEffect(() => {
+        shortcut.registerShortcut(
+            handleToggleOpenAllStages,
+            ['e'],
+            'ExpandCollapseLogStages',
+            'Expand/Collapse all log stages',
+        )
+
+        return () => {
+            shortcut.unregisterShortcut(['e'])
+        }
+    }, [handleToggleOpenAllStages])
+
     const handleSearchEnter = (searchText: string) => {
         handleSearch(searchText)
         const newStageList = getStageListFromStreamData(searchText)
@@ -402,15 +425,6 @@ export const LogsRenderer = ({
         setStageList(newLogs)
     }
 
-    const handleToggleOpenAllStages = () => {
-        setStageList(
-            stageList.map((stage) => ({
-                ...stage,
-                isOpen: !areAllStagesExpanded,
-            })),
-        )
-    }
-
     const renderLogs = () => {
         if (areStagesAvailable) {
             return (
@@ -427,11 +441,7 @@ export const LogsRenderer = ({
                             backgroundColor: '#0C1021',
                         }}
                     >
-                        <div
-                            className="flexbox logs-renderer__search-bar logs-renderer__filters-border-bottom pl-12"
-                            // Doing this since we have binded 'f' with full screen and SearchVar has not exposed event on search, so on pressing f it goes to full screen
-                            onKeyDown={stopPropagation}
-                        >
+                        <div className="flexbox logs-renderer__search-bar logs-renderer__filters-border-bottom pl-12">
                             <SearchBar
                                 noBackgroundAndBorder
                                 containerClassName="w-100"
@@ -445,16 +455,17 @@ export const LogsRenderer = ({
                             <Tooltip
                                 shortcutKeyCombo={{
                                     text: areAllStagesExpanded ? 'Collapse all stages' : 'Expand all stages',
-                                    combo: ['Control', 'Shift', 'F'] as const,
+                                    combo: ['E'] as const,
                                 }}
                                 className="dc__mxw-500"
                                 placement="left"
                             >
                                 <button
                                     type="button"
-                                    className="dc__unset-button-styles px-10 flex dc__bg-n0--opacity-0_2"
+                                    className="dc__unset-button-styles px-10 flex dc__bg-n0--opacity-0_2 pointer"
                                     onClick={handleToggleOpenAllStages}
                                     aria-label="Expand all stages"
+                                    data-toggle-state={areAllStagesExpanded}
                                 >
                                     {areAllStagesExpanded ? (
                                         <ICCollapseAll className="icon-dim-16 dc__no-shrink dc__transition--transform scn-0" />
@@ -522,4 +533,4 @@ export const LogsRenderer = ({
         : renderLogs()
 }
 
-export default LogsRenderer
+export default withShortcut(LogsRenderer)

src/Shared/Components/CICDHistory/LogsRenderer.tsx

@@ -64,7 +64,7 @@ import { getTagDetails, getTriggerDetails, cancelCiTrigger, cancelPrePostCdTrigg
 import { DEFAULT_ENV, TIMEOUT_VALUE, WORKER_POD_BASE_URL } from './constants'
 import { GitTriggers } from '../../types'
 import warn from '../../../Assets/Icon/ic-warning.svg'
-import { LogsRenderer } from './LogsRenderer'
+import LogsRenderer from './LogsRenderer'
 import DeploymentDetailSteps from './DeploymentDetailSteps'
 import { DeploymentHistoryDetailedView, DeploymentHistoryConfigList } from './DeploymentHistoryDiff'
 import { GitChanges, Scroller } from './History.components'

src/Shared/Components/CICDHistory/TriggerOutput.tsx

@@ -37,20 +37,6 @@
         position: absolute;
         bottom: 12px;
         right: 12px;
-        transition: top 0.3s;
-        padding: 6px;
-        width: 32px;
-        height: 32px;
-        border-radius: 4px;
-        box-shadow:
-            0 0 4px 0 rgba(0, 10, 20, 0.5),
-            0 0 4px 0 rgba(0, 10, 20, 0.5);
-        background-color: #2c3354;
-        opacity: 0.8;
-
-        &:hover {
-            opacity: 1;
-        }
     }
 
     .ci-details__history {
@@ -110,10 +96,6 @@
                 transition: height 0.3s;
             }
         }
-
-        .zoom {
-            transition: top 0.3s;
-        }
     }
 }
 
@@ -294,3 +276,30 @@
         width: min(100%, 800px);
     }
 }
+
+.log-resize-button {
+    transition: opacity 0.2s ease-in-out;
+    padding: 6px;
+    width: 32px;
+    height: 32px;
+    border-radius: 4px;
+    box-shadow:
+        0 0 4px 0 rgba(0, 10, 20, 0.5),
+        0 0 4px 0 rgba(0, 10, 20, 0.5);
+    background-color: #2c3354;
+    opacity: 0.8;
+    z-index: 11;
+
+    & > svg {
+        transition: transform 0.2s ease-in-out;
+        transform: scale(1);
+    }
+
+    &:hover {
+        opacity: 1;
+
+        & > svg {
+            transform: scale(1.1);
+        }
+    }
+}

src/Shared/Components/CICDHistory/cicdHistory.scss

@@ -26,7 +26,7 @@ export * from './service'
 export * from './History.components'
 export * from './utils'
 export * from './TriggerOutput'
-export * from './LogsRenderer'
+export { default as LogsRenderer } from './LogsRenderer'
 export * from './DeploymentHistoryDiff'
 export * from './CiPipelineSourceConfig'
 export * from './StatusFilterButtonComponent'