From ba9fad772c541213548debed7cdf0e51757900dc Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Mon, 16 Nov 2020 14:49:47 +0200
Subject: [PATCH] fix: proper `isActive` state matching for page-menu-target to
 page considering current document location

Signed-off-by: Roman <ixrock@gmail.com>
---
 .../components/cluster-manager/clusters-menu.tsx    |  9 +++++----
 src/renderer/components/layout/sidebar.tsx          | 13 ++++++-------
 src/renderer/navigation.ts                          |  6 +++++-
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/cluster-manager/clusters-menu.tsx b/src/renderer/components/cluster-manager/clusters-menu.tsx
index 155561d996..1fb818a812 100644
--- a/src/renderer/components/cluster-manager/clusters-menu.tsx
+++ b/src/renderer/components/cluster-manager/clusters-menu.tsx
@@ -14,7 +14,7 @@ import { ClusterIcon } from "../cluster-icon";
 import { Icon } from "../icon";
 import { autobind, cssNames, IClassName } from "../../utils";
 import { Badge } from "../badge";
-import { isActiveRoute, navigate } from "../../navigation";
+import { navigate, navigation } from "../../navigation";
 import { addClusterURL } from "../+add-cluster";
 import { clusterSettingsURL } from "../+cluster-settings";
 import { landingURL } from "../+landing-page";
@@ -151,13 +151,14 @@ export class ClustersMenu extends React.Component<Props> {
           {globalPageMenuRegistry.getItems().map(({ title, target, components: { Icon } }) => {
             const registeredPage = globalPageRegistry.getByPageMenuTarget(target);
             if (!registeredPage) return;
-            const { routePath, exact, extensionId, id: pageId } = registeredPage;
+            const { extensionId, id: pageId } = registeredPage;
             const pageUrl = getExtensionPageUrl({ extensionId, pageId, params: target.params });
+            const isActive = pageUrl === navigation.location.pathname;
             return (
               <Icon
-                key={routePath}
+                key={pageUrl}
                 tooltip={title}
-                active={isActiveRoute({ path: routePath, exact })}
+                active={isActive}
                 onClick={() => navigate(pageUrl)}
               />
             )
diff --git a/src/renderer/components/layout/sidebar.tsx b/src/renderer/components/layout/sidebar.tsx
index d774fa475a..b77847b4ef 100644
--- a/src/renderer/components/layout/sidebar.tsx
+++ b/src/renderer/components/layout/sidebar.tsx
@@ -26,7 +26,7 @@ import { Network } from "../+network";
 import { crdStore } from "../+custom-resources/crd.store";
 import { CrdList, crdResourcesRoute, crdRoute, crdURL } from "../+custom-resources";
 import { CustomResources } from "../+custom-resources/custom-resources";
-import { isActiveRoute } from "../../navigation";
+import { isActiveRoute, navigation } from "../../navigation";
 import { isAllowedResource } from "../../../common/rbac"
 import { Spinner } from "../spinner";
 import { clusterPageMenuRegistry, clusterPageRegistry, getExtensionPageUrl } from "../../../extensions/registries";
@@ -194,15 +194,14 @@ export class Sidebar extends React.Component<Props> {
             {clusterPageMenuRegistry.getItems().map(({ title, target, components: { Icon } }) => {
               const registeredPage = clusterPageRegistry.getByPageMenuTarget(target);
               if (!registeredPage) return;
-              const { routePath, exact, extensionId, id: pageId } = registeredPage;
+              const { extensionId, id: pageId } = registeredPage;
               const pageUrl = getExtensionPageUrl({ extensionId, pageId, params: target.params });
+              const isActive = pageUrl === navigation.location.pathname;
               return (
                 <SidebarNavItem
-                  key={pageUrl}
-                  url={pageUrl}
-                  text={title}
-                  icon={<Icon/>}
-                  isActive={isActiveRoute({ path: routePath, exact })}
+                  key={pageUrl} url={pageUrl}
+                  text={title} icon={<Icon/>}
+                  isActive={isActive}
                 />
               )
             })}
diff --git a/src/renderer/navigation.ts b/src/renderer/navigation.ts
index e8d2dba2bb..70073d2ff2 100644
--- a/src/renderer/navigation.ts
+++ b/src/renderer/navigation.ts
@@ -22,8 +22,12 @@ export function navigate(location: LocationDescriptor) {
   }
 }
 
+export function matchParams<P>(route: string | string[] | RouteProps) {
+  return matchPath<P>(navigation.location.pathname, route);
+}
+
 export function isActiveRoute(route: string | string[] | RouteProps): boolean {
-  return !!matchPath(navigation.location.pathname, route);
+  return !!matchParams(route);
 }
 
 // common params for all pages