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 { Icon } from "../icon";
import { autobind, cssNames, IClassName } from "../../utils"; import { autobind, cssNames, IClassName } from "../../utils";
import { Badge } from "../badge"; import { Badge } from "../badge";
import { isActiveRoute, navigate } from "../../navigation"; import { navigate, navigation } from "../../navigation";
import { addClusterURL } from "../+add-cluster"; import { addClusterURL } from "../+add-cluster";
import { clusterSettingsURL } from "../+cluster-settings"; import { clusterSettingsURL } from "../+cluster-settings";
import { landingURL } from "../+landing-page"; import { landingURL } from "../+landing-page";
@ -151,13 +151,14 @@ export class ClustersMenu extends React.Component<Props> {
{globalPageMenuRegistry.getItems().map(({ title, target, components: { Icon } }) => { {globalPageMenuRegistry.getItems().map(({ title, target, components: { Icon } }) => {
const registeredPage = globalPageRegistry.getByPageMenuTarget(target); const registeredPage = globalPageRegistry.getByPageMenuTarget(target);
if (!registeredPage) return; if (!registeredPage) return;
const { routePath, exact, extensionId, id: pageId } = registeredPage; const { extensionId, id: pageId } = registeredPage;
const pageUrl = getExtensionPageUrl({ extensionId, pageId, params: target.params }); const pageUrl = getExtensionPageUrl({ extensionId, pageId, params: target.params });
const isActive = pageUrl === navigation.location.pathname;
return ( return (
<Icon <Icon
key={routePath} key={pageUrl}
tooltip={title} tooltip={title}
active={isActiveRoute({ path: routePath, exact })} active={isActive}
onClick={() => navigate(pageUrl)} 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 { crdStore } from "../+custom-resources/crd.store";
import { CrdList, crdResourcesRoute, crdRoute, crdURL } from "../+custom-resources"; import { CrdList, crdResourcesRoute, crdRoute, crdURL } from "../+custom-resources";
import { CustomResources } from "../+custom-resources/custom-resources"; import { CustomResources } from "../+custom-resources/custom-resources";
import { isActiveRoute } from "../../navigation"; import { isActiveRoute, navigation } from "../../navigation";
import { isAllowedResource } from "../../../common/rbac" import { isAllowedResource } from "../../../common/rbac"
import { Spinner } from "../spinner"; import { Spinner } from "../spinner";
import { clusterPageMenuRegistry, clusterPageRegistry, getExtensionPageUrl } from "../../../extensions/registries"; 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 } }) => { {clusterPageMenuRegistry.getItems().map(({ title, target, components: { Icon } }) => {
const registeredPage = clusterPageRegistry.getByPageMenuTarget(target); const registeredPage = clusterPageRegistry.getByPageMenuTarget(target);
if (!registeredPage) return; if (!registeredPage) return;
const { routePath, exact, extensionId, id: pageId } = registeredPage; const { extensionId, id: pageId } = registeredPage;
const pageUrl = getExtensionPageUrl({ extensionId, pageId, params: target.params }); const pageUrl = getExtensionPageUrl({ extensionId, pageId, params: target.params });
const isActive = pageUrl === navigation.location.pathname;
return ( return (
<SidebarNavItem <SidebarNavItem
key={pageUrl} key={pageUrl} url={pageUrl}
url={pageUrl} text={title} icon={<Icon/>}
text={title} isActive={isActive}
icon={<Icon/>}
isActive={isActiveRoute({ path: routePath, exact })}
/> />
) )
})} })}

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 { export function isActiveRoute(route: string | string[] | RouteProps): boolean {
return !!matchPath(navigation.location.pathname, route); return !!matchParams(route);
} }
// common params for all pages // common params for all pages