feat: state based collapsible list

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

@@ -6,7 +6,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 } from './CollapsibleList.types'
 import './CollapsibleList.scss'
 
 const renderWithTippy = (tippyProps: TippyProps) => (children: React.ReactElement) => (
@@ -18,6 +18,68 @@ const renderWithTippy = (tippyProps: TippyProps) => (children: React.ReactElemen
 export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListProps) => {
     const { pathname } = useLocation()
 
+    const getTabContent = (item: CollapsibleListItem) => {
+        const { title, subtitle, iconConfig } = item
+        return (
+            <>
+                <div className="flexbox-col flex-grow-1 mw-none dc__align-start">
+                    <span className="collapsible__item__title dc__truncate fs-13 lh-20">{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 dc__no-shrink cursor ${iconConfig.props?.className || ''}`}
+                        />
+                    </ConditionalWrap>
+                )}
+            </>
+        )
+    }
+
+    const getTabItem = (item: CollapsibleListItem) => {
+        const { title, href, isActive, onClick, tabType } = item
+        if (tabType === 'navLink') {
+            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>
+            )
+        }
+        // Since is active is boolean we need to explicitly handle for null
+        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>
+        )
+    }
+
     return (
         <div className="mw-none bcn-0">
             {config.map(({ id, header, headerIconConfig, items, noItemsText, isExpanded }) => (
@@ -61,40 +123,7 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                                     </span>
                                 </div>
                             ) : (
-                                items.map(({ title, 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">
-                                                {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 dc__no-shrink cursor ${iconConfig.props?.className || ''}`}
-                                                />
-                                            </ConditionalWrap>
-                                        )}
-                                    </NavLink>
-                                ))
+                                items.map((item) => getTabItem(item))
                             )}
                         </div>
                     </Collapse>

src/Shared/Components/CollapsibleList/CollapsibleList.types.ts

@@ -1,7 +1,35 @@
 import React from 'react'
 import { TippyProps } from '@tippyjs/react'
 
-export interface CollapsibleListItem {
+interface ButtonTab {
+    tabType: 'button'
+    /**
+     * Is tab active ( for button tab )
+     */
+    isActive: boolean
+    /**
+     * The callback function to handle click events on the button.
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+    href?: never
+}
+
+interface NavLinkTab {
+    tabType: 'navLink'
+    /**
+     * The URL of the nav link.
+     */
+    href: string
+    /**
+     * The callback function to handle click events on the nav link.
+     */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void
+    isActive?: never
+}
+
+type ConditionalTabType = ButtonTab | NavLinkTab
+
+export type CollapsibleListItem = ConditionalTabType & {
     /**
      * The title of the list item.
      */
@@ -27,14 +55,6 @@ export interface CollapsibleListItem {
          */
         tooltipProps?: TippyProps
     }
-    /**
-     * The URL of the nav link.
-     */
-    href?: string
-    /**
-     * The callback function to handle click events on the nav link.
-     */
-    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void
 }
 
 export interface CollapsibleListConfig {

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts

@@ -41,8 +41,10 @@ export type DeploymentConfigDiffSelectPickerProps =
           selectPickerProps: SelectPickerProps
       }
 
-export interface DeploymentConfigDiffNavigationItem extends Pick<CollapsibleListItem, 'href' | 'title' | 'onClick'> {
+export interface DeploymentConfigDiffNavigationItem extends Pick<CollapsibleListItem, 'title'> {
     hasDiff?: boolean
+    href: string
+    onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void
 }
 
 export interface DeploymentConfigDiffNavigationCollapsibleItem

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx

@@ -7,7 +7,7 @@ import { ReactComponent as ICInfoOutlined } from '@Icons/ic-info-outlined.svg'
 import { ReactComponent as ICDiffFileUpdated } from '@Icons/ic-diff-file-updated.svg'
 import { StyledRadioGroup } from '@Common/index'
 
-import { CollapsibleList } from '../CollapsibleList'
+import { CollapsibleList, CollapsibleListConfig } from '../CollapsibleList'
 import { DeploymentConfigDiffNavigationProps } from './DeploymentConfigDiff.types'
 
 // LOADING SHIMMER
@@ -34,10 +34,11 @@ export const DeploymentConfigDiffNavigation = ({
     }, [collapsibleNavList])
 
     /** Collapsible List Config. */
-    const collapsibleListConfig = collapsibleNavList.map(({ items, ...resListItem }) => ({
+    const collapsibleListConfig: CollapsibleListConfig[] = collapsibleNavList.map(({ items, ...resListItem }) => ({
         ...resListItem,
         isExpanded: expandedIds[resListItem.id],
         items: items.map(({ hasDiff, ...resItem }) => ({
+            tabType: 'navLink',
             ...resItem,
             ...(hasDiff
                 ? {