Merge pull request #734 from devtron-labs/fix/target-platform-tooltip

fix: add logsRendererRef to fix target platform tippy clipping from search bar and other sticky divs

Author: AbhishekA1509

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">

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)

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'
 
@@ -834,6 +834,7 @@ export interface LogStageAccordionProps extends StageDetailType, Pick<LogsRender
      */
     isLoading: boolean
     searchIndex: string
+    logsRendererRef: MutableRefObject<HTMLDivElement>
 }
 
 export interface CreateMarkupReturnType {

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>

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'> {}