Bug 2090895: Support startsWith Nav Extension property

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 {

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() {

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)

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() {

frontend/public/components/nav/NavLinkRoot.tsx

@@ -26,13 +26,11 @@ const navLinkRootMapStateToProps = (
   state: RootState,
   { component: Component, ...props }: NavLinkRootProps,
 ): NavLinkRootStateProps => {
+  const activeNamespace = getActiveNamespace(state);
+  const location = stripNS(state.UI.get('location'));
   return {
-    activeNamespace: getActiveNamespace(state),
-    isActive: Component.isActive(
-      props,
-      stripNS(state.UI.get('location')),
-      getActiveNamespace(state),
-    ),
+    activeNamespace,
+    isActive: Component.isActive(props, location, activeNamespace),
   };
 };