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

Cluster sidebar dropdown (#4292)

Browse Source 
* Making cluster area hoverable

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Move sidebar cluster block to separate component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Clean up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Add keyboard support

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding tests

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Cleaning up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-11-09 13:41:46 +03:00 committed by GitHub
parent 262f471da8
commit b52bd29784
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 284 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
integration/__tests__/cluster-pages.tests.ts
View File

@ -331,6 +331,14 @@ utils.describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
await cleanup();
}, 10*60*1000);
it("shows cluster context menu in sidebar", async () => {
await frame.click(`[data-testid="sidebar-cluster-dropdown"]`);
await frame.waitForSelector(`.Menu >> text="Add to Hotbar"`);
await frame.waitForSelector(`.Menu >> text="Settings"`);
await frame.waitForSelector(`.Menu >> text="Disconnect"`);
await frame.waitForSelector(`.Menu >> text="Delete"`);
});
it("should navigate around common cluster pages", async () => {
for (const test of commonPageTests) {
if (isTopPageTest(test)) {
@ -362,6 +370,8 @@ utils.describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
}
}, 10*60*1000);
it("show logs and highlight the log search entries", async () => {
await frame.click(`a[href="/workloads"]`);
await frame.click(`a[href="/pods"]`);

74
src/renderer/components/layout/__tests__/sidebar-cluster.test.tsx Normal file
View File

@ -0,0 +1,74 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render, fireEvent } from "@testing-library/react";
import { SidebarCluster } from "../sidebar-cluster";
import { KubernetesCluster } from "../../../../common/catalog-entities";
jest.mock("../../../../common/hotbar-store", () => ({
HotbarStore: {
getInstance: () => ({
isAddedToActive: jest.fn(),
}),
},
}));
const clusterEntity = new KubernetesCluster({
metadata: {
uid: "test-uid",
name: "test-cluster",
source: "local",
labels: {},
},
spec: {
kubeconfigPath: "",
kubeconfigContext: "",
},
status: {
phase: "connected",
},
});
describe("<SidebarCluster/>", () => {
it("renders w/o errors", () => {
const { container } = render(<SidebarCluster clusterEntity={clusterEntity}/>);
expect(container).toBeInstanceOf(HTMLElement);
});
it("renders cluster avatar and name", () => {
const { getByText } = render(<SidebarCluster clusterEntity={clusterEntity}/>);
expect(getByText("tc")).toBeInTheDocument();
expect(getByText("test-cluster")).toBeInTheDocument();
});
it("renders cluster menu", async () => {
const { getByTestId, getByText } = render(<SidebarCluster clusterEntity={clusterEntity}/>);
const link = getByTestId("sidebar-cluster-dropdown");
fireEvent.click(link);
expect(await getByText("Add to Hotbar")).toBeInTheDocument();
});
});

57
src/renderer/components/layout/sidebar-cluster.module.css Normal file
View File

@ -0,0 +1,57 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.SidebarCluster {
display: flex;
align-items: center;
padding: 1.25rem;
cursor: pointer;
&:focus-visible {
background: var(--blue);
color: white;
}
&:hover {
background: var(--sidebarLogoBackground);
}
}
.clusterName {
font-weight: bold;
overflow: hidden;
word-break: break-word;
color: var(--textColorAccent);
display: -webkit-box;
/* Simulate text-overflow:ellipsis styles but for multiple text lines */
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.menu {
width: 185px;
margin-top: -10px;
}
.avatar {
font-weight: 500;
margin-right: 1.25rem;
}

140
src/renderer/components/layout/sidebar-cluster.tsx Normal file
View File

@ -0,0 +1,140 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import styles from "./sidebar-cluster.module.css";
import { observable } from "mobx";
import React, { useState } from "react";
import { HotbarStore } from "../../../common/hotbar-store";
import { broadcastMessage } from "../../../common/ipc";
import type { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../api/catalog-entity";
import { IpcRendererNavigationEvents } from "../../navigation/events";
import { Avatar } from "../avatar/avatar";
import { Icon } from "../icon";
import { navigate } from "../../navigation";
import { Menu, MenuItem } from "../menu";
import { ConfirmDialog } from "../confirm-dialog";
const contextMenu: CatalogEntityContextMenuContext = observable({
menuItems: [],
navigate: (url: string, forceMainFrame = true) => {
if (forceMainFrame) {
broadcastMessage(IpcRendererNavigationEvents.NAVIGATE_IN_APP, url);
} else {
navigate(url);
}
},
});
function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
if (menuItem.confirm) {
ConfirmDialog.open({
okButtonProps: {
primary: false,
accent: true,
},
ok: () => {
menuItem.onClick();
},
message: menuItem.confirm.message,
});
} else {
menuItem.onClick();
}
}
export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity }) {
const [opened, setOpened] = useState(false);
if (!clusterEntity) {
return null;
}
const onMenuOpen = () => {
const hotbarStore = HotbarStore.getInstance();
const isAddedToActive = HotbarStore.getInstance().isAddedToActive(clusterEntity);
const title = isAddedToActive
? "Remove from Hotbar"
: "Add to Hotbar";
const onClick = isAddedToActive
? () => hotbarStore.removeFromHotbar(metadata.uid)
: () => hotbarStore.addToHotbar(clusterEntity);
contextMenu.menuItems = [{ title, onClick }];
clusterEntity.onContextMenuOpen(contextMenu);
toggle();
};
const onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {
if (evt.code == "Space") {
toggle();
}
};
const toggle = () => {
setOpened(!opened);
};
const { metadata, spec } = clusterEntity;
const id = `cluster-${metadata.uid}`;
return (
<div
id={id}
className={styles.SidebarCluster}
tabIndex={0}
onKeyDown={onKeyDown}
role="menubar"
data-testid="sidebar-cluster-dropdown"
>
<Avatar
title={metadata.name}
colorHash={`${metadata.name}-${metadata.source}`}
width={40}
height={40}
src={spec.icon?.src}
className={styles.avatar}
/>
<div className={styles.clusterName}>
{metadata.name}
</div>
<Icon material="arrow_drop_down"/>
<Menu
usePortal
htmlFor={id}
isOpen={opened}
open={onMenuOpen}
closeOnClickItem
closeOnClickOutside
close={toggle}
className={styles.menu}
>
{
contextMenu.menuItems.map((menuItem) => (
<MenuItem key={menuItem.title} onClick={() => onMenuItemClick(menuItem)}>
{menuItem.title}
</MenuItem>
))
}
</Menu>
</div>
);
}

14
src/renderer/components/layout/sidebar.module.css
View File

@ -40,17 +40,3 @@
padding: 3px;
border-radius: 50%;
}
.cluster {
@apply flex items-center m-5;
}
.clusterName {
@apply font-bold overflow-hidden;
word-break: break-word;
color: var(--textColorAccent);
display: -webkit-box;
/* Simulate text-overflow:ellipsis styles but for multiple text lines */
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

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

@ -32,7 +32,7 @@ import { Storage } from "../+storage";
import { Network } from "../+network";
import { crdStore } from "../+custom-resources/crd.store";
import { CustomResources } from "../+custom-resources/custom-resources";
import { isActiveRoute, navigate } from "../../navigation";
import { isActiveRoute } from "../../navigation";
import { isAllowedResource } from "../../../common/utils/allowed-resource";
import { Spinner } from "../spinner";
import { ClusterPageMenuRegistration, ClusterPageMenuRegistry, ClusterPageRegistry, getExtensionPageUrl } from "../../../extensions/registries";
@ -41,12 +41,7 @@ import { Apps } from "../+apps";
import * as routes from "../../../common/routes";
import { Config } from "../+config";
import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
import { HotbarIcon } from "../hotbar/hotbar-icon";
import { makeObservable, observable } from "mobx";
import type { CatalogEntityContextMenuContext } from "../../../common/catalog";
import { HotbarStore } from "../../../common/hotbar-store";
import { broadcastMessage } from "../../../common/ipc";
import { IpcRendererNavigationEvents } from "../../navigation/events";
import { SidebarCluster } from "./sidebar-cluster";
interface Props {
className?: string;
@ -55,21 +50,6 @@ interface Props {
@observer
export class Sidebar extends React.Component<Props> {
static displayName = "Sidebar";
@observable private contextMenu: CatalogEntityContextMenuContext = {
menuItems: [],
navigate: (url: string, forceMainFrame = true) => {
if (forceMainFrame) {
broadcastMessage(IpcRendererNavigationEvents.NAVIGATE_IN_APP, url);
} else {
navigate(url);
}
},
};
constructor(props: Props) {
super(props);
makeObservable(this);
}
async componentDidMount() {
crdStore.reloadAll();
@ -198,44 +178,6 @@ export class Sidebar extends React.Component<Props> {
});
}
renderCluster() {
if (!this.clusterEntity) {
return null;
}
const { metadata, spec } = this.clusterEntity;
return (
<div className={styles.cluster}>
<HotbarIcon
uid={metadata.uid}
title={metadata.name}
source={metadata.source}
src={spec.icon?.src}
className="mr-5"
onClick={() => navigate("/")}
menuItems={this.contextMenu.menuItems}
onMenuOpen={() => {
const hotbarStore = HotbarStore.getInstance();
const isAddedToActive = HotbarStore.getInstance().isAddedToActive(this.clusterEntity);
const title = isAddedToActive
? "Remove from Hotbar"
: "Add to Hotbar";
const onClick = isAddedToActive
? () => hotbarStore.removeFromHotbar(metadata.uid)
: () => hotbarStore.addToHotbar(this.clusterEntity);
this.contextMenu.menuItems = [{ title, onClick }];
this.clusterEntity.onContextMenuOpen(this.contextMenu);
}}
/>
<div className={styles.clusterName}>
{metadata.name}
</div>
</div>
);
}
get clusterEntity() {
return catalogEntityRegistry.activeEntity;
}
@ -245,7 +187,7 @@ export class Sidebar extends React.Component<Props> {
return (
<div className={cssNames("flex flex-col", className)} data-testid="cluster-sidebar">
{this.renderCluster()}
<SidebarCluster clusterEntity={this.clusterEntity}/>
<div className={styles.sidebarNav}>
<SidebarItem
id="cluster"