Merge branch 'fix/expand-all-logs' of github.com:devtron-labs/devtron-fe-common-lib into feat/fullscreen-terminal

Author: Elessar1802

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

@@ -15,7 +15,7 @@
  */
 
 import Tippy from '@tippyjs/react'
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 import { withShortcut, IWithShortcut } from 'react-keybind'
 import {
@@ -44,12 +44,11 @@ export const LogResizeButton = withShortcut(
         shortcut,
     }: LogResizeButtonType & IWithShortcut): JSX.Element => {
         const { pathname } = useLocation()
-        const zoomButtonRef = useRef<HTMLButtonElement>(null)
 
-        const toggleFullScreen = () => {
+        const toggleFullScreen = useCallback((): void => {
             // NOTE: need to use ref due to the problem of stale function reference after registering the callback
-            setFullScreenView(!(zoomButtonRef.current.dataset.isFullscreenView === 'true'))
-        }
+            setFullScreenView(!fullScreenView)
+        }, [fullScreenView])
 
         const showButton = pathname.includes('/logs') || !onlyOnLogs
         const doesShortcutContainCmdKey = shortcutCombo.some((key) => key === 'Control') && IS_PLATFORM_MAC_OS
@@ -72,7 +71,7 @@ export const LogResizeButton = withShortcut(
             return () => {
                 shortcut.unregisterShortcut([combo])
             }
-        }, [showButton])
+        }, [showButton, toggleFullScreen])
 
         return (
             showButton && (
@@ -85,13 +84,15 @@ export const LogResizeButton = withShortcut(
                 >
                     <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 dc__transparent`}
+                        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" /> : <ZoomIn className="icon-dim-16" />}
+                        {fullScreenView ? (
+                            <ZoomOut className="icon-dim-16 dc__no-shrink" />
+                        ) : (
+                            <ZoomIn className="icon-dim-16 dc__no-shrink" />
+                        )}
                     </button>
                 </Tooltip>
             )

src/Shared/Components/CICDHistory/LogsRenderer.tsx

@@ -15,7 +15,7 @@
  */
 
 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'
@@ -189,7 +189,6 @@ const LogsRenderer = ({
     // State for logs list in case no stages are available
     const [logsList, setLogsList] = useState<string[]>([])
     const { searchKey, handleSearch } = useUrlFilters()
-    const accordionExpansionStateTogglerButtonRef = useRef<HTMLButtonElement>(null)
 
     const areAllStagesExpanded = useMemo(() => stageList.every((item) => item.isOpen), [stageList])
 
@@ -386,15 +385,14 @@ const LogsRenderer = ({
         // And for other cases we would use handleSearchEnter
     }, [streamDataList, areEventsProgressing])
 
-    const handleToggleOpenAllStages = () => {
+    const handleToggleOpenAllStages = useCallback(() => {
         setStageList((prev) =>
             prev.map((stage) => ({
                 ...stage,
-                // NOTE: need to use ref due to the problem of stale function reference after registering the callback
-                isOpen: !(accordionExpansionStateTogglerButtonRef.current.dataset.toggleState === 'true'),
+                isOpen: !areAllStagesExpanded,
             })),
         )
-    }
+    }, [areAllStagesExpanded])
 
     useEffect(() => {
         shortcut.registerShortcut(
@@ -407,7 +405,7 @@ const LogsRenderer = ({
         return () => {
             shortcut.unregisterShortcut(['e'])
         }
-    }, [])
+    }, [handleToggleOpenAllStages])
 
     const handleSearchEnter = (searchText: string) => {
         handleSearch(searchText)
@@ -468,7 +466,6 @@ const LogsRenderer = ({
                                     onClick={handleToggleOpenAllStages}
                                     aria-label="Expand all stages"
                                     data-toggle-state={areAllStagesExpanded}
-                                    ref={accordionExpansionStateTogglerButtonRef}
                                 >
                                     {areAllStagesExpanded ? (
                                         <ICCollapseAll className="icon-dim-16 dc__no-shrink dc__transition--transform scn-0" />

src/Shared/Components/CICDHistory/cicdHistory.scss

@@ -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;
-        }
     }
 }
 
@@ -295,3 +277,29 @@
     }
 }
 
+.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);
+        }
+    }
+}