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

refactoring: get rid of SidebarItem.props.subMenus in favour of props.children only (#2384)

Browse Source 
Signed-off-by: Roman <ixrock@gmail.com>
This commit is contained in:
Roman 2021-03-25 13:19:58 +02:00 committed by GitHub
parent 7a35253710
commit 2c50e7aa1c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/renderer/components/layout/sidebar-item.tsx
View File

@ -26,7 +26,6 @@ interface SidebarItemProps {
* this item should be shown as active
*/
isActive?: boolean;
subMenus?: React.ReactNode | React.ComponentType<SidebarItemProps>[];
}
@observer
@ -53,11 +52,9 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
}
@computed get isExpandable(): boolean {
if (this.compact) {
return false; // not available currently
}
if (this.compact) return false; // not available in compact-mode currently
return Boolean(this.props.subMenus || this.props.children);
return Boolean(this.props.children);
}
toggleExpand = () => {
@ -66,8 +63,22 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
});
};
renderSubMenu() {
const { isExpandable, expanded, isActive } = this;
if (!isExpandable || !expanded) {
return;
}
return (
<ul className={cssNames("sub-menu", { active: isActive })}>
{this.props.children}
</ul>
);
}
render() {
const { isHidden, icon, text, children, url, className, subMenus } = this.props;
const { isHidden, icon, text, url, className } = this.props;
if (isHidden) return null;
@ -90,12 +101,7 @@ export class SidebarItem extends React.Component<SidebarItemProps> {
material={expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}
/>}
</NavLink>
{isExpandable && expanded && (
<ul className={cssNames("sub-menu", { active: isActive })}>
{subMenus}
{children}
</ul>
)}
{this.renderSubMenu()}
</div>
);
}

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

@ -51,25 +51,20 @@ export class Sidebar extends React.Component<Props> {
}
return Object.entries(crdStore.groups).map(([group, crds]) => {
const crdGroupSubMenu: React.ReactNode = crds.map((crd) => {
const id = `crd-group:${group}`;
const crdGroupsPageUrl = crdURL({ query: { groups: group } });
return (
<SidebarItem key={id} id={id} text={group} url={crdGroupsPageUrl}>
{crds.map((crd) => (
<SidebarItem
key={crd.getResourceApiBase()}
id={`crd-resource:${crd.getResourceApiBase()}`}
url={crd.getResourceUrl()}
text={crd.getResourceTitle()}
/>
);
});
return (
<SidebarItem
key={group}
text={group}
id={`crd-group:${group}`}
url={crdURL({ query: { groups: group } })}
subMenus={crdGroupSubMenu}
/>
))}
</SidebarItem>
);
});
}
@ -147,8 +142,9 @@ export class Sidebar extends React.Component<Props> {
isActive={isActive}
text={menuItem.title}
icon={<menuItem.components.Icon/>}
subMenus={this.renderTreeFromTabRoutes(tabRoutes)}
/>
>
{this.renderTreeFromTabRoutes(tabRoutes)}
</SidebarItem>
);
});
}
@ -175,88 +171,94 @@ export class Sidebar extends React.Component<Props> {
<div className={cssNames("sidebar-nav flex column box grow-fixed", { compact })}>
<SidebarItem
id="cluster"
text="Cluster"
isActive={isActiveRoute(clusterRoute)}
isHidden={!isAllowedResource("nodes")}
url={clusterURL()}
text="Cluster"
icon={<Icon svg="kube"/>}
/>
<SidebarItem
id="nodes"
text="Nodes"
isActive={isActiveRoute(nodesRoute)}
isHidden={!isAllowedResource("nodes")}
url={nodesURL()}
text="Nodes"
icon={<Icon svg="nodes"/>}
/>
<SidebarItem
id="workloads"
text="Workloads"
isActive={isActiveRoute(workloadsRoute)}
isHidden={Workloads.tabRoutes.length == 0}
url={workloadsURL({ query })}
subMenus={this.renderTreeFromTabRoutes(Workloads.tabRoutes)}
text="Workloads"
icon={<Icon svg="workloads"/>}
/>
>
{this.renderTreeFromTabRoutes(Workloads.tabRoutes)}
</SidebarItem>
<SidebarItem
id="config"
text="Configuration"
isActive={isActiveRoute(configRoute)}
isHidden={Config.tabRoutes.length == 0}
url={configURL({ query })}
subMenus={this.renderTreeFromTabRoutes(Config.tabRoutes)}
text="Configuration"
icon={<Icon material="list"/>}
/>
>
{this.renderTreeFromTabRoutes(Config.tabRoutes)}
</SidebarItem>
<SidebarItem
id="networks"
text="Network"
isActive={isActiveRoute(networkRoute)}
isHidden={Network.tabRoutes.length == 0}
url={networkURL({ query })}
subMenus={this.renderTreeFromTabRoutes(Network.tabRoutes)}
text="Network"
icon={<Icon material="device_hub"/>}
/>
>
{this.renderTreeFromTabRoutes(Network.tabRoutes)}
</SidebarItem>
<SidebarItem
id="storage"
text="Storage"
isActive={isActiveRoute(storageRoute)}
isHidden={Storage.tabRoutes.length == 0}
url={storageURL({ query })}
subMenus={this.renderTreeFromTabRoutes(Storage.tabRoutes)}
icon={<Icon svg="storage"/>}
text="Storage"
/>
>
{this.renderTreeFromTabRoutes(Storage.tabRoutes)}
</SidebarItem>
<SidebarItem
id="namespaces"
text="Namespaces"
isActive={isActiveRoute(namespacesRoute)}
isHidden={!isAllowedResource("namespaces")}
url={namespacesURL()}
icon={<Icon material="layers"/>}
text="Namespaces"
/>
<SidebarItem
id="events"
text="Events"
isActive={isActiveRoute(eventRoute)}
isHidden={!isAllowedResource("events")}
url={eventsURL({ query })}
icon={<Icon material="access_time"/>}
text="Events"
/>
<SidebarItem
id="apps"
text="Apps" // helm charts
isActive={isActiveRoute(appsRoute)}
url={appsURL({ query })}
subMenus={this.renderTreeFromTabRoutes(Apps.tabRoutes)}
icon={<Icon material="apps"/>}
text="Apps"
/>
>
{this.renderTreeFromTabRoutes(Apps.tabRoutes)}
</SidebarItem>
<SidebarItem
id="users"
text="Access Control"
isActive={isActiveRoute(usersManagementRoute)}
url={usersManagementURL({ query })}
subMenus={this.renderTreeFromTabRoutes(UserManagement.tabRoutes)}
icon={<Icon material="security"/>}
text="Access Control"
/>
>
{this.renderTreeFromTabRoutes(UserManagement.tabRoutes)}
</SidebarItem>
<SidebarItem
id="custom-resources"
text="Custom Resources"