From ebe1717d5109cb2f014bd5340bf7d72bec794961 Mon Sep 17 00:00:00 2001
From: Andrew Ballantyne <aballant@redhat.com>
Date: Tue, 14 Jun 2022 13:03:55 -0400
Subject: [PATCH] Support startsWith directly in isActive

---
 frontend/public/components/nav/NavLink.tsx                | 5 +++--
 frontend/public/components/nav/NavLinkHref.tsx            | 6 +++++-
 frontend/public/components/nav/NavLinkResourceCluster.tsx | 1 +
 frontend/public/components/nav/NavLinkResourceNS.tsx      | 2 +-
 frontend/public/components/nav/NavLinkRoot.tsx            | 6 +-----
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/public/components/nav/NavLink.tsx b/frontend/public/components/nav/NavLink.tsx
index 96fcf5936dd..adf0de87724 100644
--- a/frontend/public/components/nav/NavLink.tsx
+++ b/frontend/public/components/nav/NavLink.tsx
@@ -12,8 +12,9 @@ export class NavLink<P extends NavLinkProps> extends React.PureComponent<P> {
   };
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-  static isActive(...args): boolean {
-    throw new Error('not implemented');
+  static isActive(props: NavLinkProps, location: string, activeNamespace?: string): boolean {
+    const { startsWith } = props;
+    return startsWith?.some((path) => location.startsWith(path));
   }
 
   get to(): string {
diff --git a/frontend/public/components/nav/NavLinkHref.tsx b/frontend/public/components/nav/NavLinkHref.tsx
index eddb377eb36..fb8ff7c602e 100644
--- a/frontend/public/components/nav/NavLinkHref.tsx
+++ b/frontend/public/components/nav/NavLinkHref.tsx
@@ -7,7 +7,11 @@ import { formatNamespacedRouteForHref, formatNamespacedRouteForResource } from '
 export class NavLinkHref extends NavLink<NavLinkHrefProps> {
   static isActive(props, resourcePath) {
     const noNSHref = stripNS(props.href);
-    return resourcePath === noNSHref || _.startsWith(resourcePath, `${noNSHref}/`);
+    return (
+      NavLink.isActive(props, resourcePath) ||
+      resourcePath === noNSHref ||
+      _.startsWith(resourcePath, `${noNSHref}/`)
+    );
   }
 
   get to() {
diff --git a/frontend/public/components/nav/NavLinkResourceCluster.tsx b/frontend/public/components/nav/NavLinkResourceCluster.tsx
index fa9b0809b14..581f58e83e9 100644
--- a/frontend/public/components/nav/NavLinkResourceCluster.tsx
+++ b/frontend/public/components/nav/NavLinkResourceCluster.tsx
@@ -13,6 +13,7 @@ export class NavLinkResourceCluster extends NavLink<NavLinkResourceClusterProps>
       );
     }
     return (
+      NavLink.isActive(props, resourcePath) ||
       resourcePath === props.resource ||
       _.startsWith(resourcePath, `${props.resource}/`) ||
       matchesModel(resourcePath, props.model)
diff --git a/frontend/public/components/nav/NavLinkResourceNS.tsx b/frontend/public/components/nav/NavLinkResourceNS.tsx
index 123c45f667d..b600d787263 100644
--- a/frontend/public/components/nav/NavLinkResourceNS.tsx
+++ b/frontend/public/components/nav/NavLinkResourceNS.tsx
@@ -14,7 +14,7 @@ export class NavLinkResourceNS extends NavLink<NavLinkResourceNSProps> {
       return matchesExtensionModel(resourcePath, props.model);
     }
     const href = stripNS(formatNamespacedRouteForResource(props.resource, activeNamespace));
-    return matchesPath(resourcePath, href);
+    return NavLink.isActive(props, resourcePath) || matchesPath(resourcePath, href);
   }
 
   get to() {
diff --git a/frontend/public/components/nav/NavLinkRoot.tsx b/frontend/public/components/nav/NavLinkRoot.tsx
index 5c56d28cb24..f48c779096e 100644
--- a/frontend/public/components/nav/NavLinkRoot.tsx
+++ b/frontend/public/components/nav/NavLinkRoot.tsx
@@ -26,15 +26,11 @@ const navLinkRootMapStateToProps = (
   state: RootState,
   { component: Component, ...props }: NavLinkRootProps,
 ): NavLinkRootStateProps => {
-  const { startsWith } = props;
-
   const activeNamespace = getActiveNamespace(state);
   const location = stripNS(state.UI.get('location'));
   return {
     activeNamespace,
-    isActive:
-      startsWith?.some((path) => location.startsWith(path)) ||
-      Component.isActive(props, location, activeNamespace),
+    isActive: Component.isActive(props, location, activeNamespace),
   };
 };