feat: state based collapsible list

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>

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 {
+    /**
+     * 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 {
+    /**
+     * 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
+}
+
+export type TabOptions = 'button' | 'navLink'
+
+type ConditionalTabType<TabType extends TabOptions> = TabType extends 'button' ? ButtonTab : NavLinkTab
+
+export type CollapsibleListItem<TabType extends TabOptions> = ConditionalTabType<TabType> & {
     /**
      * The title of the list item.
      */
@@ -31,17 +59,9 @@ 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 {
+export interface CollapsibleListConfig<TabType extends 'button' | 'navLink'> {
     /**
      * The unique identifier for the collapsible list.
      */
@@ -79,18 +99,22 @@ export interface CollapsibleListConfig {
     /**
      * An array of items to be displayed in the collapsible list.
      */
-    items: CollapsibleListItem[]
+    items: CollapsibleListItem<TabType>[]
     /**
      * Boolean indicating whether the list is expanded or not.
      */
     isExpanded?: boolean
 }
 
-export interface CollapsibleListProps {
+export interface CollapsibleListProps<TabType extends TabOptions> {
     /**
      * An array of collapsible list configurations.
      */
-    config: CollapsibleListConfig[]
+    config: CollapsibleListConfig<TabType>[]
+    /**
+     * Type of tab list: button or navLink
+     */
+    tabType: TabType
     /**
      * Function to handle the collapse button click event.
      *

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

@@ -51,12 +51,13 @@ export type DeploymentConfigDiffSelectPickerProps =
           selectPickerProps: SelectPickerProps
       }
 
-export interface DeploymentConfigDiffNavigationItem extends Pick<CollapsibleListItem, 'href' | 'title' | 'onClick'> {
+export interface DeploymentConfigDiffNavigationItem
+    extends Pick<CollapsibleListItem<'navLink'>, 'href' | 'title' | 'onClick'> {
     diffState: DeploymentConfigListItem['diffState']
 }
 
 export interface DeploymentConfigDiffNavigationCollapsibleItem
-    extends Pick<CollapsibleListConfig, 'id' | 'header' | 'noItemsText'> {
+    extends Pick<CollapsibleListConfig<'navLink'>, 'id' | 'header' | 'noItemsText'> {
     items: DeploymentConfigDiffNavigationItem[]
 }
 

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx

@@ -38,28 +38,30 @@ export const DeploymentConfigDiffNavigation = ({
     }, [collapsibleNavList])
 
     /** Collapsible List Config. */
-    const collapsibleListConfig = collapsibleNavList.map<CollapsibleListConfig>(({ items, ...resListItem }) => ({
-        ...resListItem,
-        isExpanded: expandedIds[resListItem.id],
-        items: items.map<CollapsibleListConfig['items'][0]>(({ diffState, ...resItem }) => ({
-            ...resItem,
-            strikeThrough: showDetailedDiffState && diffState === DeploymentConfigDiffState.DELETED,
-            ...(!hideDiffState && diffState !== DeploymentConfigDiffState.NO_DIFF
-                ? {
-                      iconConfig: {
-                          Icon: showDetailedDiffState ? diffStateIconMap[diffState] : diffStateIconMap.hasDiff,
-                          tooltipProps: {
-                              content: showDetailedDiffState
-                                  ? diffStateTooltipTextMap[diffState]
-                                  : diffStateTooltipTextMap.hasDiff,
-                              arrow: false,
-                              placement: 'right' as const,
+    const collapsibleListConfig = collapsibleNavList.map<CollapsibleListConfig<'navLink'>>(
+        ({ items, ...resListItem }) => ({
+            ...resListItem,
+            isExpanded: expandedIds[resListItem.id],
+            items: items.map<CollapsibleListConfig<'navLink'>['items'][0]>(({ diffState, ...resItem }) => ({
+                ...resItem,
+                strikeThrough: showDetailedDiffState && diffState === DeploymentConfigDiffState.DELETED,
+                ...(!hideDiffState && diffState !== DeploymentConfigDiffState.NO_DIFF
+                    ? {
+                          iconConfig: {
+                              Icon: showDetailedDiffState ? diffStateIconMap[diffState] : diffStateIconMap.hasDiff,
+                              tooltipProps: {
+                                  content: showDetailedDiffState
+                                      ? diffStateTooltipTextMap[diffState]
+                                      : diffStateTooltipTextMap.hasDiff,
+                                  arrow: false,
+                                  placement: 'right' as const,
+                              },
                           },
-                      },
-                  }
-                : {}),
-        })),
-    }))
+                      }
+                    : {}),
+            })),
+        }),
+    )
 
     // METHODS
     /** Handles collapse button click. */
@@ -143,7 +145,7 @@ export const DeploymentConfigDiffNavigation = ({
                     </NavLink>
                 )
             })}
-            <CollapsibleList config={collapsibleListConfig} onCollapseBtnClick={onCollapseBtnClick} />
+            <CollapsibleList config={collapsibleListConfig} tabType="navLink" onCollapseBtnClick={onCollapseBtnClick} />
             {navHelpText && (
                 <div className="mt-8 py-6 px-8 flexbox dc__align-items-center dc__gap-8">
                     <span className="flex p-2 dc__align-self-start">