refactor: Collapsible List, DeploymentConfigDiffNavigation: add support in NavLink to check for search params for active state

Author: RohitRaj011

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

@@ -7,6 +7,7 @@ import { ReactComponent as ICExpand } from '@Icons/ic-expand.svg'
 
 import { Collapse } from '../Collapse'
 import { CollapsibleListProps } from './CollapsibleList.types'
+import { checkNavLinkActiveState } from './utils'
 import './CollapsibleList.scss'
 
 const renderWithTippy = (tippyProps: TippyProps) => (children: React.ReactElement) => (
@@ -66,6 +67,7 @@ export const CollapsibleList = ({ config, onCollapseBtnClick }: CollapsibleListP
                                         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"
+                                        isActive={checkNavLinkActiveState(href)}
                                         onClick={(e) => {
                                             // Prevent navigation to the same page
                                             if (href === pathname) {

src/Shared/Components/CollapsibleList/utils.ts

@@ -0,0 +1,30 @@
+import { NavLinkProps } from 'react-router-dom'
+
+/**
+ * Determines if a navigation link is active based on the current location.
+ *
+ * This function checks if the provided `href` matches the current location's pathname
+ * and/or search query, and returns a boolean indicating whether the link should be considered active.
+ *
+ * @param href - The target URL or path to compare against the current location.
+ *
+ * @returns A function that takes the current location and returns a boolean:
+ * - `true` if the `href` matches the current location's pathname and/or search query.
+ * - `false` otherwise.
+ */
+export const checkNavLinkActiveState =
+    (href: string): NavLinkProps['isActive'] =>
+    (_, location) => {
+        const [pathString, queryString] = href.split('?')
+
+        if (pathString && queryString) {
+            return `${location.pathname}${location.search}` === href
+        }
+        if (pathString) {
+            return location.pathname === pathString
+        }
+        if (queryString) {
+            return location.search === `?${queryString}`
+        }
+        return false
+    }

src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx

@@ -7,6 +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 { checkNavLinkActiveState } from '../CollapsibleList/utils'
 import { CollapsibleList } from '../CollapsibleList'
 import { DeploymentConfigDiffNavigationProps } from './DeploymentConfigDiff.types'
 
@@ -107,6 +108,7 @@ export const DeploymentConfigDiffNavigation = ({
                 <NavLink
                     key={title}
                     data-testid="env-deployment-template"
+                    isActive={checkNavLinkActiveState(href)}
                     className="dc__nav-item cursor dc__gap-8 fs-13 lh-32 cn-7 w-100 br-4 px-8 flexbox dc__align-items-center dc__content-space dc__no-decor"
                     to={href}
                     onClick={onClick}