Merge pull request #803 from devtron-labs/feat/tree-view

feat: add tree view component

Author: AbhishekA1509

package-lock.json

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

package.json

@@ -0,0 +1,26 @@
+import { useState } from 'react'
+
+import { SUB_PIXEL_ERROR } from './constants'
+
+const useIsTextTruncated = () => {
+    const [isTextTruncated, setIsTextTruncated] = useState(false)
+
+    const handleMouseEnterEvent: React.MouseEventHandler = (event) => {
+        const { currentTarget: node } = event
+        const isTextOverflowing =
+            node.scrollWidth > node.clientWidth + SUB_PIXEL_ERROR ||
+            node.scrollHeight > node.clientHeight + SUB_PIXEL_ERROR
+        if (isTextOverflowing && !isTextTruncated) {
+            setIsTextTruncated(true)
+        } else if (!isTextOverflowing && isTextTruncated) {
+            setIsTextTruncated(false)
+        }
+    }
+
+    return {
+        isTextTruncated,
+        handleMouseEnterEvent,
+    }
+}
+
+export default useIsTextTruncated

src/Common/Hooks/UseIsTextTruncated/UseIsTextTruncated.ts

@@ -0,0 +1 @@
+export const SUB_PIXEL_ERROR = 1

src/Common/Hooks/UseIsTextTruncated/constants.ts

@@ -0,0 +1 @@
+export { default as useIsTextTruncated } from './UseIsTextTruncated'

src/Common/Hooks/UseIsTextTruncated/index.ts

@@ -16,6 +16,7 @@
 
 export { useClickOutside } from './UseClickOutside/UseClickOutside'
 export { useGetUserRoles } from './UseGetUserRoles'
+export { useIsTextTruncated } from './UseIsTextTruncated'
 export * from './UseRegisterShortcut'
 export * from './useStateFilters'
 export * from './useUrlFilters'

src/Common/Hooks/index.ts

@@ -14,10 +14,11 @@
  * limitations under the License.
  */
 
-import { cloneElement, useState } from 'react'
+import { cloneElement } from 'react'
 import TippyJS from '@tippyjs/react'
 
-import { SUB_PIXEL_ERROR } from './constants'
+import { useIsTextTruncated } from '@Common/Hooks'
+
 import ShortcutKeyComboTooltipContent from './ShortcutKeyComboTooltipContent'
 import { TooltipProps } from './types'
 
@@ -32,19 +33,7 @@ const Tooltip = ({
     children: child,
     ...rest
 }: TooltipProps) => {
-    const [isTextTruncated, setIsTextTruncated] = useState(false)
-
-    const handleMouseEnterEvent: React.MouseEventHandler = (event) => {
-        const { currentTarget: node } = event
-        const isTextOverflowing =
-            node.scrollWidth > node.clientWidth + SUB_PIXEL_ERROR ||
-            node.scrollHeight > node.clientHeight + SUB_PIXEL_ERROR
-        if (isTextOverflowing && !isTextTruncated) {
-            setIsTextTruncated(true)
-        } else if (!isTextOverflowing && isTextTruncated) {
-            setIsTextTruncated(false)
-        }
-    }
+    const { isTextTruncated, handleMouseEnterEvent } = useIsTextTruncated()
 
     const showTooltipWhenShortcutKeyComboProvided =
         !!shortcutKeyCombo && (alwaysShowTippyOnHover === undefined || alwaysShowTippyOnHover)

src/Common/Tooltip/Tooltip.tsx

@@ -17,5 +17,3 @@
 export const TOOLTIP_CONTENTS = {
     INVALID_INPUT: 'Valid input is required for all mandatory fields.',
 }
-
-export const SUB_PIXEL_ERROR = 1

src/Common/Tooltip/constants.tsx

@@ -38,7 +38,6 @@ export interface ApiResourceType {
 
 export interface K8SObjectBaseType {
     name: string
-    isExpanded: boolean
 }
 
 interface K8sRequestResourceIdentifierType {

src/Pages/ResourceBrowser/ResourceBrowser.Types.ts

@@ -2,14 +2,11 @@ import { LegacyRef, MouseEvent, Ref } from 'react'
 import { Link } from 'react-router-dom'
 
 import { Tooltip } from '@Common/Tooltip'
-import { ComponentSizeType } from '@Shared/constants'
 
-import { Button, ButtonProps, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
-import { NumbersCount } from '../NumbersCount'
 import { getTooltipProps } from '../SelectPicker/common'
-import { DTSwitch, DTSwitchProps } from '../Switch'
-import { ActionMenuItemProps, ActionMenuItemType } from './types'
+import { TrailingItem } from '../TrailingItem'
+import { ActionMenuItemProps } from './types'
 
 const COMMON_ACTION_MENU_ITEM_CLASS = 'w-100 flex left top dc__gap-8 py-6 px-8'
 
@@ -48,24 +45,6 @@ export const ActionMenuItem = <T extends string | number>({
         onClick(item, e)
     }
 
-    const handleTrailingSwitchChange =
-        ({ type: trailingItemType, config }: ActionMenuItemType<T>['trailingItem']): DTSwitchProps['onChange'] =>
-        (e) => {
-            if (trailingItemType === 'switch') {
-                e.stopPropagation()
-                config.onChange(e)
-            }
-        }
-
-    const handleTrailingButtonClick =
-        ({ type: trailingItemType, config }: ActionMenuItemType<T>['trailingItem']): ButtonProps['onClick'] =>
-        (e) => {
-            e.stopPropagation()
-            if (trailingItemType === 'button' && config.onClick) {
-                config.onClick(e)
-            }
-        }
-
     // RENDERERS
     const renderIcon = (iconProps: typeof startIcon) =>
         iconProps && (
@@ -79,42 +58,7 @@ export const ActionMenuItem = <T extends string | number>({
             return null
         }
 
-        const { type: trailingItemType, config } = trailingItem
-
-        switch (trailingItemType) {
-            case 'icon':
-                return renderIcon(config)
-            case 'text': {
-                const { value, icon } = config
-                return (
-                    <span className="flex dc__gap-2 mt-2">
-                        <span className="fs-12 lh-1-5 fw-4 cn-7">{value}</span>
-                        {icon && <Icon name={icon.name} color={icon.color || (isNegativeType ? 'R500' : 'N700')} />}
-                    </span>
-                )
-            }
-            case 'counter':
-                return <NumbersCount count={config.value} />
-            case 'switch':
-                return (
-                    <DTSwitch
-                        {...config}
-                        onChange={handleTrailingSwitchChange(trailingItem)}
-                        size={ComponentSizeType.small}
-                    />
-                )
-            case 'button':
-                return (
-                    <Button
-                        {...(config as ButtonProps)}
-                        onClick={handleTrailingButtonClick(trailingItem)}
-                        variant={ButtonVariantType.borderLess}
-                        size={ComponentSizeType.xxs}
-                    />
-                )
-            default:
-                return null
-        }
+        return <TrailingItem {...trailingItem} variant={type} />
     }
 
     const renderContent = () => (