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

feat: replace resource browser sidebar by tree view

Author: AbhishekA1509

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.17.0-pre-1",
+        "@devtron-labs/devtron-fe-common-lib": "1.17.0-pre-5",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/components/ResourceBrowser/ResourceList/ResourceList.component.tsx

@@ -17,15 +17,14 @@
 import React, { MouseEventHandler, useEffect, useState } from 'react'
 import { ClearIndicatorProps, components, ValueContainerProps } from 'react-select'
 
-import { Button, ButtonVariantType, ComponentSizeType, Tooltip } from '@devtron-labs/devtron-fe-common-lib'
+import { Button, ButtonVariantType, ComponentSizeType } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as ClearIcon } from '@Icons/ic-error.svg'
 import { ReactComponent as SearchIcon } from '@Icons/ic-search.svg'
 import { ReactComponent as Warning } from '@Icons/ic-warning.svg'
 
 import { handleUTCTime } from '../../common'
 import { ShortcutKeyBadge } from '../../common/formFields/Widgets/Widgets'
-import { SidebarChildButtonPropsType } from '../Types'
 
 export const KindSearchValueContainer = (props: ValueContainerProps) => {
     const { selectProps, children } = props
@@ -96,38 +95,3 @@ export const renderRefreshBar =
     (show: boolean, lastSyncTime: string, callback: () => void): (() => JSX.Element) =>
     () =>
         !show ? null : <WarningStrip lastSyncTime={lastSyncTime} callback={callback} />
-
-export const SidebarChildButton: React.FC<SidebarChildButtonPropsType> = ({
-    parentRef,
-    group,
-    version,
-    text,
-    kind,
-    namespaced,
-    isSelected,
-    onClick,
-}) => (
-    <button
-        type="button"
-        className="dc__unset-button-styles"
-        key={text}
-        ref={parentRef}
-        data-group={group}
-        data-version={version}
-        data-kind={kind}
-        data-namespaced={namespaced}
-        data-selected={isSelected}
-        onClick={onClick}
-        aria-label={`Select ${text}`}
-    >
-        <Tooltip content={text} placement="right">
-            <div
-                className={`fs-13 pointer dc__ellipsis-right dc__align-left dc__border-radius-4-imp fw-4 pt-6 lh-20 pr-8 pb-6 pl-8 ${
-                    isSelected ? 'bcb-1 cb-5' : 'cn-9 dc__hover-n50'
-                }`}
-            >
-                {text}
-            </div>
-        </Tooltip>
-    </button>
-)

src/components/ResourceBrowser/ResourceList/Sidebar.tsx

@@ -14,34 +14,32 @@
  * limitations under the License.
  */
 
-import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { generatePath, useHistory, useLocation, useParams } from 'react-router-dom'
 import ReactSelect, { GroupBase, InputActionMeta } from 'react-select'
 import Select, { FormatOptionLabelMeta } from 'react-select/base'
 import DOMPurify from 'dompurify'
 
 import {
-    ApiResourceGroupType,
+    capitalizeFirstLetter,
     highlightSearchText,
     K8S_EMPTY_GROUP,
     Nodes,
+    NodeType,
     ReactSelectInputAction,
     RESOURCE_BROWSER_ROUTES,
+    TreeNode,
+    TreeView,
     URL_FILTER_KEYS,
     useRegisterShortcut,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { ReactComponent as ICExpand } from '../../../assets/icons/ic-expand.svg'
-import { AggregationKeys } from '../../app/types'
-import { KIND_SEARCH_COMMON_STYLES, ResourceBrowserTabsId, SIDEBAR_KEYS } from '../Constants'
-import { K8SObjectChildMapType, K8SObjectMapType, K8sObjectOptionType, SidebarType } from '../Types'
-import {
-    convertK8sObjectMapToOptionsList,
-    convertResourceGroupListToK8sObjectList,
-    getK8SObjectMapAfterGroupHeadingClick,
-} from '../Utils'
-import { KindSearchClearIndicator, KindSearchValueContainer, SidebarChildButton } from './ResourceList.component'
+import { KIND_SEARCH_COMMON_STYLES, ResourceBrowserTabsId } from '../Constants'
+import { K8sObjectOptionType, RBResourceSidebarDataAttributeType, SidebarType } from '../Types'
+import { convertK8sObjectMapToOptionsList, convertResourceGroupListToK8sObjectList } from '../Utils'
+import { KindSearchClearIndicator, KindSearchValueContainer } from './ResourceList.component'
 import { K8sResourceListURLParams } from './types'
+import { getRBSidebarTreeViewNodeId, getRBSidebarTreeViewNodes } from './utils'
 
 const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateTabLastSyncMoment }: SidebarType) => {
     const { registerShortcut, unregisterShortcut } = useRegisterShortcut()
@@ -50,8 +48,7 @@ const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateT
     const { clusterId, kind, group } = useParams<K8sResourceListURLParams>()
     const [searchText, setSearchText] = useState('')
     /* NOTE: apiResources prop will only change after a component mount/dismount */
-    const [list, setList] = useState(convertResourceGroupListToK8sObjectList(apiResources || null, kind))
-    const preventScrollRef = useRef(false)
+    const list = convertResourceGroupListToK8sObjectList(apiResources || null, kind)
     const searchInputRef = useRef<Select<K8sObjectOptionType, false, GroupBase<K8sObjectOptionType>>>(null)
     const k8sObjectOptionsList = useMemo(
         () => convertK8sObjectMapToOptionsList(convertResourceGroupListToK8sObjectList(apiResources || null, kind)),
@@ -96,62 +93,29 @@ const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateT
         }
     }, [])
 
-    const getGroupHeadingClickHandler =
-        (preventCollapse = false, preventScroll = false) =>
-        (e: React.MouseEvent<HTMLButtonElement> | { currentTarget: { dataset: { groupName: string } } }) => {
-            preventScrollRef.current = preventScroll
-            setList(getK8SObjectMapAfterGroupHeadingClick(e, list, preventCollapse))
-        }
-
-    const selectNode = (
-        e: React.MouseEvent<HTMLButtonElement> | { currentTarget: Pick<K8sObjectOptionType, 'dataset'> },
-        groupName?: string,
-    ): void => {
-        const _selectedKind = e.currentTarget.dataset.kind.toLowerCase()
-        const _selectedGroup = e.currentTarget.dataset.group.toLowerCase()
-
+    const selectNode = (selectedKind: string, selectedGroup: string): void => {
         const params = new URLSearchParams(location.search)
         params.delete(URL_FILTER_KEYS.PAGE_NUMBER)
         params.delete(URL_FILTER_KEYS.SORT_BY)
         params.delete(URL_FILTER_KEYS.SORT_ORDER)
-        if (_selectedKind !== Nodes.Event.toLowerCase()) {
+        if (selectedKind !== Nodes.Event.toLowerCase()) {
             params.delete('eventType')
         }
         const path = generatePath(RESOURCE_BROWSER_ROUTES.K8S_RESOURCE_LIST, {
             clusterId,
-            kind: _selectedKind,
-            group: _selectedGroup || K8S_EMPTY_GROUP,
+            kind: selectedKind,
+            group: selectedGroup || K8S_EMPTY_GROUP,
         })
 
         if (path === location.pathname) {
             return
         }
 
         const _url = `${path}?${params.toString()}`
-
-        updateK8sResourceTab({ url: _url, dynamicTitle: e.currentTarget.dataset.kind, retainSearchParams: true })
+        updateK8sResourceTab({ url: _url, dynamicTitle: capitalizeFirstLetter(selectedKind), retainSearchParams: true })
         updateTabLastSyncMoment(ResourceBrowserTabsId.k8s_Resources)
 
         push(_url)
-
-        /**
-         * If groupName present then kind selection is from search dropdown,
-         * - Expand parent group if not already expanded
-         * - Auto scroll to selection
-         * Else reset prevent scroll to true
-         */
-        if (groupName) {
-            getGroupHeadingClickHandler(
-                true,
-                false,
-            )({
-                currentTarget: {
-                    dataset: {
-                        groupName,
-                    },
-                },
-            })
-        }
     }
 
     useEffect(() => {
@@ -169,89 +133,9 @@ const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateT
                     (option.dataset.group || K8S_EMPTY_GROUP).toLowerCase() === lowercasedGroup,
             ) ?? k8sObjectOptionsList[0]
         /* NOTE: if nodeType doesn't match the selectedResource kind, set it accordingly */
-        selectNode(
-            {
-                currentTarget: {
-                    dataset: match.dataset,
-                },
-            },
-            match.groupName,
-        )
+        selectNode(match.dataset.kind.toLowerCase(), match.dataset.group.toLowerCase())
     }, [kind, group, k8sObjectOptionsList])
 
-    const selectedChildRef: React.Ref<HTMLButtonElement> = (node) => {
-        /**
-         * NOTE: all list items will be passed this ref callback
-         * The correct node will get scrolled into view */
-        if (node?.dataset.selected !== 'true' || preventScrollRef.current) {
-            return
-        }
-        node?.scrollIntoView({ block: 'center' })
-    }
-
-    const renderChild = (childData: ApiResourceGroupType, useGroupName = false) => {
-        const nodeName = useGroupName && childData.gvk.Group ? childData.gvk.Group : childData.gvk.Kind
-        const isSelected =
-            useGroupName && childData.gvk.Group
-                ? selectedResource?.gvk?.Group === childData.gvk.Group &&
-                  selectedResource?.gvk?.Kind === childData.gvk.Kind
-                : selectedResource?.gvk?.Kind === childData.gvk.Kind &&
-                  (selectedResource?.gvk?.Group === childData.gvk.Group ||
-                      selectedResource?.gvk?.Group === K8S_EMPTY_GROUP)
-        return (
-            <SidebarChildButton
-                parentRef={selectedChildRef}
-                text={nodeName}
-                group={childData.gvk.Group}
-                version={childData.gvk.Version}
-                kind={childData.gvk.Kind}
-                namespaced={childData.namespaced}
-                isSelected={isSelected}
-                onClick={selectNode}
-            />
-        )
-    }
-
-    const renderK8sResourceChildren = (key: string, value: K8SObjectChildMapType, k8sObject: K8SObjectMapType) => {
-        const keyLowerCased = key.toLowerCase()
-        if (
-            keyLowerCased === 'node' ||
-            keyLowerCased === SIDEBAR_KEYS.namespaceGVK.Kind.toLowerCase() ||
-            keyLowerCased === SIDEBAR_KEYS.eventGVK.Kind.toLowerCase()
-        ) {
-            return null
-        }
-        if (value.data.length === 1) {
-            return renderChild(value.data[0])
-        }
-        return (
-            <Fragment key={`${k8sObject.name}/${key}-child`}>
-                <button
-                    type="button"
-                    className="dc__unset-button-styles"
-                    data-group-name={`${k8sObject.name}/${key}`}
-                    onClick={getGroupHeadingClickHandler(false, true) as React.MouseEventHandler<HTMLButtonElement>}
-                >
-                    <div className="flex pointer dc__align-left">
-                        <ICExpand
-                            className={`${value.isExpanded ? 'fcn-9' : 'fcn-5'}  rotate icon-dim-24 pointer`}
-                            style={{
-                                ['--rotateBy' as string]: value.isExpanded ? '90deg' : '0deg',
-                            }}
-                        />
-                        <span className="fs-13 cn-9 fw-6 pointer w-100 pt-6 pb-6">{key}</span>
-                    </div>
-                </button>
-                <div className="pl-20 flexbox-col">
-                    {value.isExpanded &&
-                        value.data.map((_child) => (
-                            <React.Fragment key={_child.gvk.Group}>{renderChild(_child, true)}</React.Fragment>
-                        ))}
-                </div>
-            </Fragment>
-        )
-    }
-
     const handleInputChange = (newValue: string, actionMeta: InputActionMeta): void => {
         if (actionMeta.action !== ReactSelectInputAction.inputChange) {
             return
@@ -268,14 +152,11 @@ const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateT
         if (!option) {
             return
         }
-        selectNode(
-            {
-                currentTarget: {
-                    dataset: option.dataset,
-                },
-            },
-            option.groupName,
-        )
+        selectNode(option.dataset.kind.toLowerCase(), option.dataset.group.toLowerCase())
+    }
+
+    const handleTreeViewNodeSelect = (node: TreeNode<RBResourceSidebarDataAttributeType>): void => {
+        selectNode(node.dataAttributes?.['data-kind'], node.dataAttributes?.['data-group'])
     }
 
     const formatOptionLabel = (
@@ -315,6 +196,8 @@ const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateT
 
     const noOptionsMessage = () => 'No matching kind'
 
+    const treeViewNodes = getRBSidebarTreeViewNodes(list)
+
     return (
         <div className="w-250 dc__no-shrink dc__overflow-hidden flexbox-col">
             <div className="k8s-object-kind-search bg__primary pt-16 pb-8 px-10 w-100 cursor">
@@ -348,82 +231,13 @@ const Sidebar = ({ apiResources, selectedResource, updateK8sResourceTab, updateT
             </div>
 
             <div className="dc__overflow-auto flexbox-col flex-grow-1 dc__border-top-n1 p-8 dc__user-select-none">
-                <div className="pb-8 flexbox-col">
-                    {!!list?.size && !!list.get(AggregationKeys.Nodes) && (
-                        <SidebarChildButton
-                            parentRef={selectedChildRef}
-                            text={SIDEBAR_KEYS.nodes}
-                            group={SIDEBAR_KEYS.nodeGVK.Group}
-                            version={SIDEBAR_KEYS.nodeGVK.Version}
-                            kind={SIDEBAR_KEYS.nodeGVK.Kind}
-                            namespaced={false}
-                            isSelected={kind === SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase()}
-                            onClick={selectNode}
-                        />
-                    )}
-                    {!!list?.size && !!list.get(AggregationKeys.Events) && (
-                        <SidebarChildButton
-                            parentRef={selectedChildRef}
-                            text={SIDEBAR_KEYS.events}
-                            group={SIDEBAR_KEYS.eventGVK.Group}
-                            version={SIDEBAR_KEYS.eventGVK.Version}
-                            kind={SIDEBAR_KEYS.eventGVK.Kind}
-                            namespaced
-                            isSelected={kind === SIDEBAR_KEYS.eventGVK.Kind.toLowerCase()}
-                            onClick={selectNode}
-                        />
-                    )}
-                    {!!list?.size && !!list.get(AggregationKeys.Namespaces) && (
-                        <SidebarChildButton
-                            parentRef={selectedChildRef}
-                            text={SIDEBAR_KEYS.namespaces}
-                            group={SIDEBAR_KEYS.namespaceGVK.Group}
-                            version={SIDEBAR_KEYS.namespaceGVK.Version}
-                            kind={SIDEBAR_KEYS.namespaceGVK.Kind}
-                            namespaced={false}
-                            isSelected={kind === SIDEBAR_KEYS.namespaceGVK.Kind.toLowerCase()}
-                            onClick={selectNode}
-                        />
-                    )}
-                </div>
-                {!!list?.size &&
-                    [...list.values()].map((k8sObject) =>
-                        k8sObject.name === AggregationKeys.Events ||
-                        k8sObject.name === AggregationKeys.Namespaces ||
-                        k8sObject.name === AggregationKeys.Nodes ? null : (
-                            <div key={`${k8sObject.name}-parent`}>
-                                <button
-                                    type="button"
-                                    className={`dc__unset-button-styles dc__zi-1 bg__primary w-100 ${k8sObject.isExpanded ? 'dc__position-sticky' : ''}`}
-                                    style={{ top: '-8px' }}
-                                    data-group-name={k8sObject.name}
-                                    onClick={getGroupHeadingClickHandler(false, true)}
-                                >
-                                    <div className="flex pointer dc__align-left">
-                                        <ICExpand
-                                            className={`${k8sObject.isExpanded ? 'fcn-9' : 'fcn-5'} rotate icon-dim-24 pointer`}
-                                            style={{
-                                                ['--rotateBy' as string]: !k8sObject.isExpanded ? '0deg' : '90deg',
-                                            }}
-                                        />
-                                        <span
-                                            className="fs-13 cn-9 fw-6 pointer w-100 pt-6 pb-6"
-                                            data-testid={`k8sObject-${k8sObject.name}`}
-                                        >
-                                            {k8sObject.name}
-                                        </span>
-                                    </div>
-                                </button>
-                                {k8sObject.isExpanded && (
-                                    <div className="pl-20 flexbox-col">
-                                        {[...k8sObject.child.entries()].map(([key, value]) =>
-                                            renderK8sResourceChildren(key, value, k8sObject),
-                                        )}
-                                    </div>
-                                )}
-                            </div>
-                        ),
+                <TreeView<RBResourceSidebarDataAttributeType>
+                    nodes={treeViewNodes}
+                    selectedId={getRBSidebarTreeViewNodeId(
+                        selectedResource?.gvk || { Group: '', Version: '', Kind: '' as NodeType },
                     )}
+                    onSelect={handleTreeViewNodeSelect}
+                />
             </div>
         </div>
     )