feat: state based collapsible list

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.5.6",
+    "version": "0.5.8",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
@@ -84,7 +84,6 @@
         "react-draggable": "^4.4.5",
         "react-ga4": "^1.4.1",
         "react-mde": "^11.5.0",
-        "react-router": "^5.3.0",
         "react-router-dom": "^5.3.0",
         "react-select": "5.8.0",
         "rxjs": "^7.8.1",

src/Common/Constants.ts

@@ -66,6 +66,7 @@ export const URLS = {
     GLOBAL_CONFIG_SCOPED_VARIABLES: '/global-config/scoped-variables',
     GLOBAL_CONFIG_DEPLOYMENT_CHARTS_LIST: '/global-config/deployment-charts',
     NETWORK_STATUS_INTERFACE: '/network-status-interface',
+    CONFIG_DRIFT: 'config-drift',
 }
 
 export const ROUTES = {

src/Shared/Components/CICDHistory/AppStatusDetailsChart.tsx

@@ -16,18 +16,34 @@
 
 import { useMemo, useState } from 'react'
 import Tippy from '@tippyjs/react'
+import { useHistory } from 'react-router-dom'
+import { URLS } from '@Common/Constants'
 import { ReactComponent as InfoIcon } from '../../../Assets/Icon/ic-info-filled.svg'
 import { ReactComponent as Chat } from '../../../Assets/Icon/ic-chat-circle-dots.svg'
-import { AppStatusDetailsChartType, AggregatedNodes, STATUS_SORTING_ORDER } from './types'
+import { AppStatusDetailsChartType, AggregatedNodes, STATUS_SORTING_ORDER, NodeFilters } from './types'
 import { StatusFilterButtonComponent } from './StatusFilterButtonComponent'
-import { DEPLOYMENT_STATUS, APP_STATUS_HEADERS } from '../../constants'
+import { DEPLOYMENT_STATUS, APP_STATUS_HEADERS, ComponentSizeType } from '../../constants'
 import { IndexStore } from '../../Store'
 import { aggregateNodes } from '../../Helpers'
+import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 
-const AppStatusDetailsChart = ({ filterRemoveHealth = false, showFooter }: AppStatusDetailsChartType) => {
+const AppStatusDetailsChart = ({
+    filterRemoveHealth = false,
+    showFooter,
+    showConfigDriftInfo = false,
+    onClose,
+}: AppStatusDetailsChartType) => {
+    const history = useHistory()
     const _appDetails = IndexStore.getAppDetails()
     const [currentFilter, setCurrentFilter] = useState('')
 
+    const { appId, environmentId: envId } = _appDetails
+
+    const handleCompareDesiredManifest = () => {
+        onClose()
+        history.push(`${URLS.APP}/${appId}${URLS.DETAILS}/${envId}/${URLS.APP_DETAILS_K8}/${URLS.CONFIG_DRIFT}`)
+    }
+
     const nodes: AggregatedNodes = useMemo(
         () => aggregateNodes(_appDetails.resourceTree?.nodes || [], _appDetails.resourceTree?.podMetadata || []),
         [_appDetails],
@@ -100,6 +116,7 @@ const AppStatusDetailsChart = ({ filterRemoveHealth = false, showFooter }: AppSt
                             .filter(
                                 (nodeDetails) =>
                                     currentFilter === 'all' ||
+                                    (currentFilter === NodeFilters.drifted && nodeDetails.hasDrift) ||
                                     nodeDetails.health.status?.toLowerCase() === currentFilter,
                             )
                             .map((nodeDetails) => (
@@ -123,7 +140,24 @@ const AppStatusDetailsChart = ({ filterRemoveHealth = false, showFooter }: AppSt
                                     >
                                         {nodeDetails.status ? nodeDetails.status : nodeDetails.health.status}
                                     </div>
-                                    <div>{getNodeMessage(nodeDetails.kind, nodeDetails.name)}</div>
+                                    <div className="flexbox-col dc__gap-4">
+                                        {showConfigDriftInfo && nodeDetails.hasDrift && (
+                                            <div className="flexbox dc__gap-8 dc__align-items-center">
+                                                <span className="fs-13 fw-4 lh-20 cy-7">Config drift detected</span>
+                                                {onClose && appId && envId && (
+                                                    <Button
+                                                        dataTestId="show-config-drift"
+                                                        text="Compare with desired"
+                                                        variant={ButtonVariantType.text}
+                                                        style={ButtonStyleType.default}
+                                                        onClick={handleCompareDesiredManifest}
+                                                        size={ComponentSizeType.small}
+                                                    />
+                                                )}
+                                            </div>
+                                        )}
+                                        <div>{getNodeMessage(nodeDetails.kind, nodeDetails.name)}</div>
+                                    </div>
                                 </div>
                             ))
                     ) : (

src/Shared/Components/CICDHistory/StatusFilterButtonComponent.tsx

@@ -18,9 +18,8 @@
 import { useEffect, useState } from 'react'
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
 import { PopupMenu, StyledRadioGroup as RadioGroup } from '../../../Common'
-import { NodeStatus, StatusFilterButtonType } from './types'
+import { NodeFilters, NodeStatus, StatusFilterButtonType } from './types'
 import { IndexStore } from '../../Store'
-
 import './StatusFilterButtonComponent.scss'
 
 export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: StatusFilterButtonType) => {
@@ -32,10 +31,15 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
     let progressingNodeCount: number = 0
     let failedNodeCount: number = 0
     let missingNodeCount: number = 0
+    let driftedNodeCount: number = 0
 
     nodes?.forEach((_node) => {
         const _nodeHealth = _node.health?.status
 
+        if (_node.hasDrift) {
+            driftedNodeCount += 1
+        }
+
         if (_nodeHealth?.toLowerCase() === NodeStatus.Healthy) {
             healthyNodeCount += 1
         } else if (_nodeHealth?.toLowerCase() === NodeStatus.Degraded) {
@@ -58,6 +62,11 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
             isSelected: NodeStatus.Progressing == selectedTab,
         },
         { status: NodeStatus.Healthy, count: healthyNodeCount, isSelected: NodeStatus.Healthy == selectedTab },
+        window._env_.FEATURE_CONFIG_DRIFT_ENABLE && {
+            status: NodeFilters.drifted,
+            count: driftedNodeCount,
+            isSelected: selectedTab === NodeFilters.drifted,
+        },
     ]
     const validFilterOptions = filterOptions.filter(({ count }) => count > 0)
     const displayedInlineFilters = validFilterOptions.slice(
@@ -72,7 +81,8 @@ export const StatusFilterButtonComponent = ({ nodes, handleFilterClick }: Status
             (selectedTab === NodeStatus.Healthy && healthyNodeCount === 0) ||
             (selectedTab === NodeStatus.Degraded && failedNodeCount === 0) ||
             (selectedTab === NodeStatus.Progressing && progressingNodeCount === 0) ||
-            (selectedTab === NodeStatus.Missing && missingNodeCount === 0)
+            (selectedTab === NodeStatus.Missing && missingNodeCount === 0) ||
+            (selectedTab === NodeFilters.drifted && driftedNodeCount === 0)
         ) {
             setSelectedTab('all')
         } else if (handleFilterClick) {

src/Shared/Components/CICDHistory/types.tsx

@@ -519,6 +519,8 @@ export interface DeploymentHistorySidebarType {
 export interface AppStatusDetailsChartType {
     filterRemoveHealth?: boolean
     showFooter: boolean
+    showConfigDriftInfo?: boolean
+    onClose?: () => void
 }
 
 export interface StatusFilterButtonType {
@@ -535,6 +537,10 @@ export enum NodeStatus {
     Unknown = 'unknown',
 }
 
+export enum NodeFilters {
+    drifted = 'drifted',
+}
+
 type NodesMap = {
     [key in NodeType]?: Map<string, any>
 }

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

@@ -5,7 +5,7 @@ import { ConditionalWrap } from '@Common/Helper'
 import { ReactComponent as ICExpand } from '@Icons/ic-expand.svg'
 
 import { Collapse } from '../Collapse'
-import { CollapsibleListProps } from './CollapsibleList.types'
+import { CollapsibleListItem, CollapsibleListProps, TabOptions } from './CollapsibleList.types'
 import './CollapsibleList.scss'
 
 const renderWithTippy = (tippyProps: TippyProps) => (children: React.ReactElement) => (
@@ -14,9 +14,80 @@ const renderWithTippy = (tippyProps: TippyProps) => (children: React.ReactElemen
     </Tippy>
 )
 
-export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListProps) => {
+export const CollapsibleList = <TabType extends TabOptions>({
+    config,
+    tabType,
+    onCollapseBtnClick,
+}: CollapsibleListProps<TabType>) => {
     const { pathname } = useLocation()
 
+    const getTabContent = (item: CollapsibleListItem<TabOptions>) => {
+        const { title, subtitle, strikeThrough, iconConfig } = item
+        return (
+            <>
+                <div className="flexbox-col flex-grow-1 mw-none">
+                    <span
+                        className={`collapsible__item__title dc__truncate fs-13 lh-20 ${strikeThrough ? 'dc__strike-through' : ''}`}
+                    >
+                        {title}
+                    </span>
+                    {subtitle && <span className="dc__truncate fw-4 lh-1-5 cn-7">{subtitle}</span>}
+                </div>
+                {iconConfig && (
+                    <ConditionalWrap
+                        condition={!!iconConfig.tooltipProps}
+                        wrap={renderWithTippy(iconConfig.tooltipProps)}
+                    >
+                        <iconConfig.Icon
+                            {...iconConfig.props}
+                            className={`icon-dim-20 p-2 dc__no-shrink cursor ${iconConfig.props?.className || ''}`}
+                        />
+                    </ConditionalWrap>
+                )}
+            </>
+        )
+    }
+
+    const getButtonTabItem = (item: CollapsibleListItem<'button'>) => {
+        const { title, isActive, onClick } = item
+        return (
+            <button
+                key={title}
+                className={`collapsible__item flexbox dc__align-items-center dc__gap-8 dc__no-decor br-4 py-6 px-8 cursor ${isActive ? 'active' : ''} dc__unset-button-styles w-100`}
+                onClick={(e) => {
+                    // Prevent navigation to the same page
+                    if (isActive) {
+                        e.preventDefault()
+                    }
+                    onClick?.(e)
+                }}
+                type="button"
+            >
+                {getTabContent(item)}
+            </button>
+        )
+    }
+
+    const getNavLinkTabItem = (item: CollapsibleListItem<'navLink'>) => {
+        const { title, href, onClick } = item
+        return (
+            <NavLink
+                key={title}
+                to={href}
+                className="collapsible__item flexbox dc__align-items-center dc__gap-8 dc__no-decor br-4 py-6 px-8 cursor"
+                onClick={(e) => {
+                    // Prevent navigation to the same page
+                    if (href === pathname) {
+                        e.preventDefault()
+                    }
+                    onClick?.(e)
+                }}
+            >
+                {getTabContent(item)}
+            </NavLink>
+        )
+    }
+
     return (
         <div className="mw-none bcn-0">
             {config.map(({ id, header, headerIconConfig, items, noItemsText, isExpanded }) => (
@@ -60,42 +131,11 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                                     </span>
                                 </div>
                             ) : (
-                                items.map(({ title, strikeThrough, href, iconConfig, subtitle, onClick }) => (
-                                    <NavLink
-                                        key={title}
-                                        to={href}
-                                        className="collapsible__item flexbox dc__align-items-center dc__gap-8 dc__no-decor br-4 py-6 px-8 cursor"
-                                        onClick={(e) => {
-                                            // Prevent navigation to the same page
-                                            if (href === pathname) {
-                                                e.preventDefault()
-                                            }
-                                            onClick?.(e)
-                                        }}
-                                    >
-                                        <div className="flexbox-col flex-grow-1 mw-none">
-                                            <span
-                                                className={`collapsible__item__title dc__truncate fs-13 lh-20 ${strikeThrough ? 'dc__strike-through' : ''}`}
-                                            >
-                                                {title}
-                                            </span>
-                                            {subtitle && (
-                                                <span className="dc__truncate fw-4 lh-1-5 cn-7">{subtitle}</span>
-                                            )}
-                                        </div>
-                                        {iconConfig && (
-                                            <ConditionalWrap
-                                                condition={!!iconConfig.tooltipProps}
-                                                wrap={renderWithTippy(iconConfig.tooltipProps)}
-                                            >
-                                                <iconConfig.Icon
-                                                    {...iconConfig.props}
-                                                    className={`icon-dim-20 p-2 dc__no-shrink cursor ${iconConfig.props?.className || ''}`}
-                                                />
-                                            </ConditionalWrap>
-                                        )}
-                                    </NavLink>
-                                ))
+                                items.map((item) =>
+                                    tabType === 'button'
+                                        ? getButtonTabItem(item as CollapsibleListItem<'button'>)
+                                        : getNavLinkTabItem(item as CollapsibleListItem<'navLink'>),
+                                )
                             )}
                         </div>
                     </Collapse>