chore: edit typing for collapsible list

Author: arunjaindev

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 { CollapsibleListItem, CollapsibleListProps } from './CollapsibleList.types'
+import { CollapsibleListItem, CollapsibleListProps, TabOptions } from './CollapsibleList.types'
 import './CollapsibleList.scss'
 
 const renderWithTippy = (tippyProps: TippyProps) => (children: React.ReactElement) => (
@@ -14,10 +14,14 @@ 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) => {
+    const getTabContent = (item: CollapsibleListItem<TabOptions>) => {
         const { title, subtitle, iconConfig } = item
         return (
             <>
@@ -40,27 +44,8 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
         )
     }
 
-    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
+    const getButtonTabItem = (item: CollapsibleListItem<'button'>) => {
+        const { title, isActive, onClick } = item
         return (
             <button
                 key={title}
@@ -79,6 +64,26 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
         )
     }
 
+    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 }) => (
@@ -122,7 +127,11 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                                     </span>
                                 </div>
                             ) : (
-                                items.map((item) => getTabItem(item))
+                                items.map((item) =>
+                                    tabType === 'button'
+                                        ? getButtonTabItem(item as CollapsibleListItem<'button'>)
+                                        : getNavLinkTabItem(item as CollapsibleListItem<'navLink'>),
+                                )
                             )}
                         </div>
                     </Collapse>

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

@@ -2,7 +2,6 @@ import React from 'react'
 import { TippyProps } from '@tippyjs/react'
 
 interface ButtonTab {
-    tabType: 'button'
     /**
      * Is tab active ( for button tab )
      */
@@ -15,7 +14,6 @@ interface ButtonTab {
 }
 
 interface NavLinkTab {
-    tabType: 'navLink'
     /**
      * The URL of the nav link.
      */
@@ -27,9 +25,11 @@ interface NavLinkTab {
     isActive?: never
 }
 
-type ConditionalTabType = ButtonTab | NavLinkTab
+export type TabOptions = 'button' | 'navLink'
 
-export type CollapsibleListItem = ConditionalTabType & {
+type ConditionalTabType<TabType extends TabOptions> = TabType extends 'button' ? ButtonTab : NavLinkTab
+
+export type CollapsibleListItem<TabType extends TabOptions> = ConditionalTabType<TabType> & {
     /**
      * The title of the list item.
      */
@@ -57,7 +57,7 @@ export type CollapsibleListItem = ConditionalTabType & {
     }
 }
 
-export interface CollapsibleListConfig {
+export interface CollapsibleListConfig<TabType extends 'button' | 'navLink'> {
     /**
      * The unique identifier for the collapsible list.
      */
@@ -95,18 +95,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

@@ -41,14 +41,14 @@ export type DeploymentConfigDiffSelectPickerProps =
           selectPickerProps: SelectPickerProps
       }
 
-export interface DeploymentConfigDiffNavigationItem extends Pick<CollapsibleListItem, 'title'> {
+export interface DeploymentConfigDiffNavigationItem extends Pick<CollapsibleListItem<'navLink'>, 'title'> {
     hasDiff?: boolean
     href: string
     onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void
 }
 
 export interface DeploymentConfigDiffNavigationCollapsibleItem
-    extends Pick<CollapsibleListConfig, 'id' | 'header' | 'noItemsText'> {
+    extends Pick<CollapsibleListConfig<'navLink'>, 'id' | 'header' | 'noItemsText'> {
     items: DeploymentConfigDiffNavigationItem[]
 }
 

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx

@@ -34,23 +34,28 @@ export const DeploymentConfigDiffNavigation = ({
     }, [collapsibleNavList])
 
     /** Collapsible List Config. */
-    const collapsibleListConfig: CollapsibleListConfig[] = collapsibleNavList.map(({ items, ...resListItem }) => ({
-        ...resListItem,
-        isExpanded: expandedIds[resListItem.id],
-        items: items.map(({ hasDiff, ...resItem }) => ({
-            tabType: 'navLink',
-            ...resItem,
-            ...(hasDiff
-                ? {
-                      iconConfig: {
-                          Icon: ICDiffFileUpdated,
-                          props: { className: 'icon-dim-16 dc__no-shrink' },
-                          tooltipProps: { content: 'File has difference', arrow: false, placement: 'right' as const },
-                      },
-                  }
-                : {}),
-        })),
-    }))
+    const collapsibleListConfig: CollapsibleListConfig<'navLink'>[] = collapsibleNavList.map(
+        ({ items, ...resListItem }) => ({
+            ...resListItem,
+            isExpanded: expandedIds[resListItem.id],
+            items: items.map(({ hasDiff, ...resItem }) => ({
+                ...resItem,
+                ...(hasDiff
+                    ? {
+                          iconConfig: {
+                              Icon: ICDiffFileUpdated,
+                              props: { className: 'icon-dim-16 dc__no-shrink' },
+                              tooltipProps: {
+                                  content: 'File has difference',
+                                  arrow: false,
+                                  placement: 'right' as const,
+                              },
+                          },
+                      }
+                    : {}),
+            })),
+        }),
+    )
 
     // METHODS
     /** Handles collapse button click. */
@@ -122,7 +127,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">