From 05c985c3144a9c848915482097864aa52ddc3d9c Mon Sep 17 00:00:00 2001
From: AbhishekA1509 <abhishek@devtron.ai>
Date: Thu, 15 May 2025 16:46:29 +0530
Subject: [PATCH] feat: add logsRendererRef to LogStageAccordion and
 LogsRenderer components

---
 src/Shared/Components/CICDHistory/LogStageAccordion.tsx   | 8 +++++++-
 src/Shared/Components/CICDHistory/LogsRenderer.tsx        | 8 +++++++-
 src/Shared/Components/CICDHistory/types.tsx               | 3 ++-
 .../TargetPlatforms/TargetPlatformListTooltip.tsx         | 3 ++-
 src/Shared/Components/TargetPlatforms/types.ts            | 6 +++---
 5 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/Shared/Components/CICDHistory/LogStageAccordion.tsx b/src/Shared/Components/CICDHistory/LogStageAccordion.tsx
index aa21f4c34..cfb9577d9 100644
--- a/src/Shared/Components/CICDHistory/LogStageAccordion.tsx
+++ b/src/Shared/Components/CICDHistory/LogStageAccordion.tsx
@@ -43,6 +43,7 @@ const LogStageAccordion = ({
     fullScreenView,
     searchIndex,
     targetPlatforms,
+    logsRendererRef,
 }: LogStageAccordionProps) => {
     const handleAccordionToggle = () => {
         if (isOpen) {
@@ -78,6 +79,8 @@ const LogStageAccordion = ({
         }
     }
 
+    const getLogsRendererReference = () => logsRendererRef.current
+
     return (
         <div className="flexbox-col dc__gap-8">
             <button
@@ -103,7 +106,10 @@ const LogStageAccordion = ({
                 <div className="flexbox dc__gap-8 dc__align-items-center">
                     {!!targetPlatforms?.length && (
                         <>
-                            <TargetPlatformListTooltip targetPlatforms={targetPlatforms}>
+                            <TargetPlatformListTooltip
+                                targetPlatforms={targetPlatforms}
+                                appendTo={getLogsRendererReference}
+                            >
                                 <div className="flexbox dc__gap-4 dc__align-items-center">
                                     <ICStack className="dc__no-shrink icon-stroke__white icon-dim-12" />
                                     <span className="text__white fs-13 fw-4 lh-20">
diff --git a/src/Shared/Components/CICDHistory/LogsRenderer.tsx b/src/Shared/Components/CICDHistory/LogsRenderer.tsx
index 3ef941bb6..5f82948ff 100644
--- a/src/Shared/Components/CICDHistory/LogsRenderer.tsx
+++ b/src/Shared/Components/CICDHistory/LogsRenderer.tsx
@@ -179,6 +179,8 @@ const useCIEventSource = (url: string, maxLength?: number): [string[], EventSour
 
 const LogsRenderer = ({ triggerDetails, isBlobStorageConfigured, parentType, fullScreenView }: LogsRendererType) => {
     const { pipelineId, envId, appId } = useParams<DeploymentHistoryBaseParamsType>()
+    const logsRendererRef = useRef<HTMLDivElement>(null)
+
     const logsURL =
         parentType === HistoryComponentType.CI
             ? `${Host}/${ROUTES.CI_CONFIG_GET}/${pipelineId}/workflow/${triggerDetails.id}/logs`
@@ -579,6 +581,7 @@ const LogsRenderer = ({ triggerDetails, isBlobStorageConfigured, parentType, ful
                                     isLoading={index === stageList.length - 1 && areEventsProgressing}
                                     fullScreenView={fullScreenView}
                                     searchIndex={searchResults[currentSearchIndex]}
+                                    logsRendererRef={logsRendererRef}
                                 />
                             ),
                         )}
@@ -615,7 +618,10 @@ const LogsRenderer = ({ triggerDetails, isBlobStorageConfigured, parentType, ful
     }
 
     return (
-        <div className={`flexbox-col flex-grow-1 ${getComponentSpecificThemeClass(AppThemeType.dark)}`}>
+        <div
+            className={`flexbox-col flex-grow-1 ${getComponentSpecificThemeClass(AppThemeType.dark)}`}
+            ref={logsRendererRef}
+        >
             {triggerDetails.podStatus !== POD_STATUS.PENDING &&
             logsNotAvailable &&
             (!isBlobStorageConfigured || !triggerDetails.blobStorageEnabled)
diff --git a/src/Shared/Components/CICDHistory/types.tsx b/src/Shared/Components/CICDHistory/types.tsx
index 96d353dae..76d920f2f 100644
--- a/src/Shared/Components/CICDHistory/types.tsx
+++ b/src/Shared/Components/CICDHistory/types.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { CSSProperties, ReactElement, ReactNode } from 'react'
+import { CSSProperties, MutableRefObject, ReactElement, ReactNode } from 'react'
 
 import { SupportedKeyboardKeysType } from '@Common/Hooks/UseRegisterShortcut/types'
 
@@ -892,6 +892,7 @@ export interface LogStageAccordionProps extends StageDetailType, Pick<LogsRender
      */
     isLoading: boolean
     searchIndex: string
+    logsRendererRef: MutableRefObject<HTMLDivElement>
 }
 
 export interface CreateMarkupReturnType {
diff --git a/src/Shared/Components/TargetPlatforms/TargetPlatformListTooltip.tsx b/src/Shared/Components/TargetPlatforms/TargetPlatformListTooltip.tsx
index 31fad83e2..31a9e19cd 100644
--- a/src/Shared/Components/TargetPlatforms/TargetPlatformListTooltip.tsx
+++ b/src/Shared/Components/TargetPlatforms/TargetPlatformListTooltip.tsx
@@ -33,12 +33,13 @@ const TooltipContent = ({ targetPlatforms }: Pick<TargetPlatformListTooltipProps
     </div>
 )
 
-const TargetPlatformListTooltip = ({ targetPlatforms, children }: TargetPlatformListTooltipProps) => (
+const TargetPlatformListTooltip = ({ targetPlatforms, children, appendTo }: TargetPlatformListTooltipProps) => (
     <Tooltip
         content={<TooltipContent targetPlatforms={targetPlatforms} />}
         placement="right"
         alwaysShowTippyOnHover
         interactive
+        appendTo={appendTo}
     >
         {children}
     </Tooltip>
diff --git a/src/Shared/Components/TargetPlatforms/types.ts b/src/Shared/Components/TargetPlatforms/types.ts
index 99258901f..5df88d691 100644
--- a/src/Shared/Components/TargetPlatforms/types.ts
+++ b/src/Shared/Components/TargetPlatforms/types.ts
@@ -18,6 +18,6 @@ import { TooltipProps } from '@Common/Tooltip/types'
 import { TargetPlatformsDTO } from '@Shared/types'
 
 export interface TargetPlatformBadgeListProps extends Required<Pick<TargetPlatformsDTO, 'targetPlatforms'>> {}
-export interface TargetPlatformListTooltipProps extends Pick<TargetPlatformsDTO, 'targetPlatforms'> {
-    children: TooltipProps['children']
-}
+export interface TargetPlatformListTooltipProps
+    extends Pick<TargetPlatformsDTO, 'targetPlatforms'>,
+        Pick<TooltipProps, 'children' | 'appendTo'> {}