feat: refactor tooltip implementation for target platforms and improve styling in related components

Author: AbhishekA1509

src/Shared/Components/CICDHistory/LogStageAccordion.tsx

@@ -1,7 +1,6 @@
 import { RefCallback } from 'react'
 import DOMPurify from 'dompurify'
 import { getTimeDifference } from '@Shared/Helpers'
-import { Tooltip } from '@Common/Tooltip'
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
 import { ReactComponent as ICStack } from '@Icons/ic-stack.svg'
 import { LogStageAccordionProps } from './types'
@@ -83,21 +82,18 @@ const LogStageAccordion = ({
                     </div>
                 </div>
 
-                <div className="flexbox dc__gap-8">
+                <div className="flexbox dc__gap-8 dc__align-items-center">
                     {!!targetPlatforms?.length && (
                         <>
-                            <Tooltip
-                                content={<TargetPlatformListTooltip targetPlatforms={targetPlatforms} />}
-                                alwaysShowTippyOnHover
-                            >
+                            <TargetPlatformListTooltip targetPlatforms={targetPlatforms}>
                                 <div className="flexbox dc__gap-4 dc__align-items-center">
                                     <ICStack className="scn-0 dc__no-shrink icon-stroke__white icon-dim-12" />
                                     <span className="text__white fs-13 fw-4 lh-20">
                                         {targetPlatforms.length}&nbsp;target platform
                                         {targetPlatforms.length > 1 ? 's' : ''}
                                     </span>
                                 </div>
-                            </Tooltip>
+                            </TargetPlatformListTooltip>
 
                             {!!endTime && <div className="dc__bullet--white dc__bullet" />}
                         </>

src/Shared/Components/ImageCard/SequentialCDCardTitle/SequentialCDCardTitle.tsx

@@ -20,7 +20,7 @@ import { ARTIFACT_STATUS, STAGE_TYPE } from '../../../constants'
 import { DeploymentEnvState } from './DeploymentEnvState'
 import { DEPLOYMENT_ENV_TEXT } from './DeploymentEnvState/constants'
 import { SequentialCDCardTitleProps } from '../types'
-import { ImageTagButton, Tooltip } from '../../../../Common'
+import { ImageTagButton } from '../../../../Common'
 
 const SequentialCDCardTitle = ({
     isLatest,
@@ -118,11 +118,10 @@ const SequentialCDCardTitle = ({
 
     return (
         <div className={`bg__primary pb-8 br-4 flex left ${addFlexGap ? 'dc__gap-8' : ''}`}>
+            {renderContent()}
+
             {!!targetPlatforms?.length && (
-                <Tooltip
-                    content={<TargetPlatformListTooltip targetPlatforms={targetPlatforms} />}
-                    alwaysShowTippyOnHover
-                >
+                <TargetPlatformListTooltip targetPlatforms={targetPlatforms}>
                     <div>
                         <ImageTagButton
                             text="Multi-arch image"
@@ -134,10 +133,8 @@ const SequentialCDCardTitle = ({
                             isSuperAdmin
                         />
                     </div>
-                </Tooltip>
+                </TargetPlatformListTooltip>
             )}
-
-            {renderContent()}
         </div>
     )
 }

src/Shared/Components/TargetPlatforms/TargetPlatformBadgeList.tsx

@@ -5,7 +5,7 @@ import { TargetPlatformBadgeListProps } from './types'
 const TargetPlatformBadge = ({ name }: TargetPlatformBadgeListProps['targetPlatforms'][number]) => (
     <div className="bg__secondary py-2 px-6 dc__mxw-200">
         <Tooltip content={name}>
-            <span className="dc__truncate cn-7 fs-13 fw-5 lh-20">{name}</span>
+            <span className="dc__truncate cn-7 fs-12 fw-5 lh-16">{name}</span>
         </Tooltip>
     </div>
 )
@@ -16,10 +16,10 @@ const TargetPlatformBadgeList = ({ targetPlatforms }: TargetPlatformBadgeListPro
     }
 
     return (
-        <div className="flexbox dc__gap-8 dc__align-items-center">
-            <ICStack className="icon-dim-16 dc__no-shrink scn-7" />
+        <div className="flexbox dc__gap-8 dc__align-start">
+            <ICStack className="icon-dim-20 dc__no-shrink scn-7 p-2" />
 
-            <div className="flexbox dc__gap-8 flex-wrap">
+            <div className="flexbox dc__gap-6 flex-wrap">
                 {targetPlatforms.map(({ name }) => (
                     <TargetPlatformBadge key={name} name={name} />
                 ))}

src/Shared/Components/TargetPlatforms/TargetPlatformListTooltip.tsx

@@ -1,17 +1,24 @@
+import { Tooltip } from '@Common/Tooltip'
 import { TargetPlatformListTooltipProps } from './types'
 
-const TargetPlatformListTooltip = ({ targetPlatforms }: TargetPlatformListTooltipProps) => (
-    <div className="flexbox-col dc__gap-2 fs-12 lh-18 cn-0 w-200">
-        <h6 className="m-0 fw-6">Target platforms</h6>
+const TooltipContent = ({ targetPlatforms }: Pick<TargetPlatformListTooltipProps, 'targetPlatforms'>) => (
+    <div className="flexbox-col dc__gap-4">
+        <h6 className="m-0 fw-6 lh-18 fs-12">Target platforms</h6>
 
-        <ul className="pl-12 m-0">
+        <ul className="pl-12 m-0 dc__overflow-auto mxh-140">
             {targetPlatforms.map(({ name }) => (
-                <li key={name} className="dc__word-break">
+                <li key={name} className="dc__word-break lh-18">
                     {name}
                 </li>
             ))}
         </ul>
     </div>
 )
 
+const TargetPlatformListTooltip = ({ targetPlatforms, children }: TargetPlatformListTooltipProps) => (
+    <Tooltip content={<TooltipContent targetPlatforms={targetPlatforms} />} alwaysShowTippyOnHover interactive>
+        {children}
+    </Tooltip>
+)
+
 export default TargetPlatformListTooltip

src/Shared/Components/TargetPlatforms/types.ts

@@ -1,4 +1,7 @@
+import { TooltipProps } from '@Common/Tooltip/types'
 import { TargetPlatformsDTO } from '@Shared/types'
 
 export interface TargetPlatformBadgeListProps extends Pick<TargetPlatformsDTO, 'targetPlatforms'> {}
-export interface TargetPlatformListTooltipProps extends Pick<TargetPlatformsDTO, 'targetPlatforms'> {}
+export interface TargetPlatformListTooltipProps extends Pick<TargetPlatformsDTO, 'targetPlatforms'> {
+    children: TooltipProps['children']
+}