Merge branch 'develop' of github.com:devtron-labs/devtron-fe-common-lib into feat/toast-manager

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.2.32-beta-4",
+    "version": "0.3.3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -1,4 +1,4 @@
-import { useCallback, useState, cloneElement } from 'react'
+import { useState, cloneElement } from 'react'
 import TippyJS from '@tippyjs/react'
 import { TooltipProps } from './types'
 
@@ -12,25 +12,26 @@ const Tooltip = ({
 }: TooltipProps) => {
     const [isTextTruncated, setIsTextTruncated] = useState(false)
 
-    const refCallback = useCallback((node: HTMLDivElement) => {
-        if (node) {
-            // NOTE: for line-clamp we need to check scrollHeight against clientHeight since orientation
-            // is set to vertical through -webkit-box-orient prop that is needed for line-clamp to work
-            // see: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
-            setIsTextTruncated(node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight)
+    const handleMouseEnterEvent: React.MouseEventHandler = (event) => {
+        const { currentTarget: node } = event
+        const isTextOverflowing = node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight
+        if (isTextOverflowing && !isTextTruncated) {
+            setIsTextTruncated(true)
+        } else if (!isTextOverflowing && isTextTruncated) {
+            setIsTextTruncated(false)
         }
-    }, [])
+    }
 
     return (!isTextTruncated || !showOnTruncate) && !alwaysShowTippyOnHover ? (
-        cloneElement(child, { ...child.props, ref: refCallback })
+        cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })
     ) : (
         <TippyJS
             arrow={false}
             placement="top"
             {...rest}
             className={`default-tt ${wordBreak ? 'dc__word-break-all' : ''} dc__mxw-200-imp ${rest.className}`}
         >
-            {cloneElement(child, { ...child.props, ref: refCallback })}
+            {cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })}
         </TippyJS>
     )
 }

src/Common/Tooltip/Tooltip.tsx

@@ -83,10 +83,10 @@ const DeploymentHistoryConfigList = ({
                 deploymentHistoryList &&
                 deploymentHistoryList.map((historicalComponent, index) => (
                     // eslint-disable-next-line react/no-array-index-key
-                    <div className="px-20 pt-20 fs-13 cn-9" key={`history-list__${index}`}>
+                    <div className="px-20 pt-20 fs-13 cn-9 flexbox-col dc__gap-12" key={`history-list__${index}`}>
                         {historicalComponent.childList?.length > 0 ? (
                             <>
-                                <div className="fs-14 fw-6 mb-12">
+                                <div className="fs-14 fw-6">
                                     {DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP[historicalComponent.name].DISPLAY_NAME}
                                 </div>
                                 {historicalComponent.childList.map((historicalComponentName, childIndex) =>