feat: add tree view component

package.json

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

src/Common/Hooks/UseRegisterShortcut/types.ts

@@ -31,6 +31,8 @@ export const KEYBOARD_KEYS_MAP = {
     X: 'X',
     A: 'A',
     N: 'N',
+    S: 'S',
+    '/': '/',
     Escape: 'Esc',
     Enter: '↩',
     ArrowLeft: '←',

src/Common/Tooltip/Tooltip.tsx

@@ -14,12 +14,12 @@
  * 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 ShortcutKeyComboTooltipContent from './ShortcutKeyComboTooltipContent'
 import { TooltipProps } from './types'
+import useIsTextTruncated from './UseIsTextTruncated'
 
 import './styles.scss'
 
@@ -32,19 +32,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/UseIsTextTruncated.ts

@@ -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/Tooltip/index.ts

@@ -17,3 +17,4 @@
 export { TOOLTIP_CONTENTS } from './constants'
 export { default as Tooltip } from './Tooltip'
 export type { TooltipProps } from './types'
+export { default as useIsTextTruncated } from './UseIsTextTruncated'

src/Pages/ResourceBrowser/ResourceBrowser.Types.ts

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

src/Pages/ResourceBrowser/constants.tsx

@@ -116,16 +116,14 @@ export const NODE_DRAIN_OPTIONS_CHECKBOX_CONFIG: {
 export const GVK_FILTER_KIND_QUERY_PARAM_KEY = 'gvkFilterKind'
 export const GVK_FILTER_API_VERSION_QUERY_PARAM_KEY = 'gvkFilterApiVersion'
 
-export const DUMMY_RESOURCE_GVK_VERSION = 'v1'
-
 export const RESOURCE_BROWSER_ROUTES = {
     OVERVIEW: `${URLS.RESOURCE_BROWSER}/:clusterId/overview`,
     MONITORING_DASHBOARD: `${URLS.RESOURCE_BROWSER}/:clusterId/monitoring-dashboard`,
     TERMINAL: `${URLS.RESOURCE_BROWSER}/:clusterId/terminal`,
     CLUSTER_UPGRADE: `${URLS.RESOURCE_BROWSER}/:clusterId/cluster-upgrade`,
-    NODE_DETAIL: `${URLS.RESOURCE_BROWSER}/:clusterId/node/:name`,
-    K8S_RESOURCE_DETAIL: `${URLS.RESOURCE_BROWSER}/:clusterId/:namespace/:kind/:group/:version/:name`,
-    K8S_RESOURCE_LIST: `${URLS.RESOURCE_BROWSER}/:clusterId/:kind/:group/:version`,
+    NODE_DETAIL: `${URLS.RESOURCE_BROWSER}/:clusterId/node/detail/:name`,
+    K8S_RESOURCE_DETAIL: `${URLS.RESOURCE_BROWSER}/:clusterId/:namespace/:kind/:group/:name`,
+    K8S_RESOURCE_LIST: `${URLS.RESOURCE_BROWSER}/:clusterId/:kind/:group`,
     RESOURCE_RECOMMENDER: `${URLS.RESOURCE_BROWSER}/:clusterId/resource-recommender`,
 } as const
 

src/Shared/Components/ActionMenu/ActionMenuItem.tsx

@@ -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 = () => (

src/Shared/Components/ActionMenu/types.ts

@@ -1,14 +1,9 @@
-import { LegacyRef, MouseEvent, ReactElement, Ref } from 'react'
+import { LegacyRef, MouseEvent, Ref } from 'react'
 import { LinkProps } from 'react-router-dom'
 
-import { OmitNever } from '@Shared/types'
-
-import { ButtonProps } from '../Button'
-import { IconsProps } from '../Icon'
-import { NumbersCountProps } from '../NumbersCount'
 import { PopoverProps, UsePopoverProps } from '../Popover'
 import { SelectPickerOptionType, SelectPickerProps } from '../SelectPicker'
-import { DTSwitchProps } from '../Switch'
+import { ActionMenuItemIconType, TrailingItemType } from '../TrailingItem'
 
 type ConditionalActionMenuComponentType =
     | {
@@ -32,48 +27,6 @@ type ConditionalActionMenuComponentType =
           href?: never
       }
 
-type ActionMenuItemIconType = Pick<IconsProps, 'name'> & {
-    /** @default 'N800' */
-    color?: IconsProps['color']
-}
-
-type TrailingItemType =
-    | {
-          type: 'icon'
-          config: ActionMenuItemIconType
-      }
-    | {
-          type: 'text'
-          config: {
-              value: string
-              icon?: ActionMenuItemIconType
-          }
-      }
-    | {
-          type: 'counter'
-          config: {
-              value: NumbersCountProps['count']
-          }
-      }
-    | {
-          type: 'switch'
-          config: Pick<
-              DTSwitchProps,
-              | 'ariaLabel'
-              | 'isChecked'
-              | 'indeterminate'
-              | 'isDisabled'
-              | 'isLoading'
-              | 'name'
-              | 'onChange'
-              | 'tooltipContent'
-          >
-      }
-    | {
-          type: 'button'
-          config: OmitNever<Omit<Extract<ButtonProps, { icon: ReactElement }>, 'size' | 'variant'>>
-      }
-
 export type ActionMenuItemType<T extends string | number = string | number> = Omit<
     SelectPickerOptionType,
     'label' | 'value' | 'endIcon' | 'startIcon'

src/Shared/Components/CICDHistory/utils.tsx

@@ -23,7 +23,7 @@ import { DATE_TIME_FORMATS, URLS } from '@Common/Constants'
 import { DeploymentAppTypes } from '@Common/Types'
 import { ALL_RESOURCE_KIND_FILTER } from '@Shared/constants'
 import { isTimeStringAvailable } from '@Shared/Helpers'
-import { DUMMY_RESOURCE_GVK_VERSION, K8S_EMPTY_GROUP } from '@Pages/ResourceBrowser'
+import { K8S_EMPTY_GROUP } from '@Pages/ResourceBrowser'
 
 import { DeploymentStatusBreakdownItemType, Node, ResourceKindType, WorkflowStatusEnum } from '../../types'
 import { Icon } from '../Icon'
@@ -234,7 +234,7 @@ export const getHistoryItemStatusIconFromWorkflowStages = (
 }
 
 export const getWorkerPodBaseUrl = (clusterId: number = DEFAULT_CLUSTER_ID, podNamespace: string = DEFAULT_NAMESPACE) =>
-    `${URLS.RESOURCE_BROWSER}/${clusterId}/${podNamespace}/pod/${K8S_EMPTY_GROUP}/${DUMMY_RESOURCE_GVK_VERSION}`
+    `${URLS.RESOURCE_BROWSER}/${clusterId}/${podNamespace}/pod/${K8S_EMPTY_GROUP}`
 
 export const getWorkflowNodeStatusTitle = (status: string) => {
     if (!status) {

src/Shared/Components/CollapsibleList/CollapsibleList.component.tsx

@@ -33,6 +33,9 @@ const renderWithTippy = (tippyProps: TippyProps) => (children: React.ReactElemen
     </Tippy>
 )
 
+/**
+ * @deprecated - Please use `TreeView` component instead.
+ */
 export const CollapsibleList = <TabType extends TabOptions>({
     config,
     tabType,