hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

fix: proper isActive state matching for page-menu-target to page considering current document location

Browse Source 
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2020-11-16 14:49:47 +02:00
parent adc7f5f565
commit ba9fad772c
3 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/renderer/components/cluster-manager/clusters-menu.tsx
View File

@ -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)}
/>
)

13
src/renderer/components/layout/sidebar.tsx
View File

@ -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}
/>
)
})}

6
src/renderer/navigation.ts
View File

@ -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