1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Fix <Icon>'s not using tooltip and fix toolbar not being boolean (#3038)

Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2021-06-23 09:14:59 -04:00 committed by GitHub
parent f8dd7b12f2
commit e49576ee8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 64 additions and 52 deletions

View File

@ -86,23 +86,26 @@ export function NodeMenu(props: NodeMenuProps) {
return (
<>
<MenuItem onClick={shell}>
<Icon svg="ssh" interactive={toolbar} title="Node shell"/>
<Icon svg="ssh" interactive={toolbar} tooltip={toolbar && "Node shell"}/>
<span className="title">Shell</span>
</MenuItem>
{!node.isUnschedulable() && (
<MenuItem onClick={cordon}>
<Icon material="pause_circle_filled" title="Cordon" interactive={toolbar}/>
<span className="title">Cordon</span>
</MenuItem>
)}
{node.isUnschedulable() && (
<MenuItem onClick={unCordon}>
<Icon material="play_circle_filled" title="Uncordon" interactive={toolbar}/>
<span className="title">Uncordon</span>
</MenuItem>
)}
{
node.isUnschedulable()
? (
<MenuItem onClick={unCordon}>
<Icon material="play_circle_filled" tooltip={toolbar && "Uncordon"} interactive={toolbar} />
<span className="title">Uncordon</span>
</MenuItem>
)
: (
<MenuItem onClick={cordon}>
<Icon material="pause_circle_filled" tooltip={toolbar && "Cordon"} interactive={toolbar} />
<span className="title">Cordon</span>
</MenuItem>
)
}
<MenuItem onClick={drain}>
<Icon material="delete_sweep" title="Drain" interactive={toolbar}/>
<Icon material="delete_sweep" tooltip={toolbar && "Drain"} interactive={toolbar}/>
<span className="title">Drain</span>
</MenuItem>
</>

View File

@ -74,7 +74,7 @@ export class PodAttachMenu extends React.Component<PodAttachMenuProps> {
return (
<MenuItem onClick={Util.prevDefault(() => this.attachToPod(containers[0].name))}>
<Icon material="pageview" interactive={toolbar} title="Attach to Pod"/>
<Icon material="pageview" interactive={toolbar} tooltip={toolbar && "Attach to Pod"}/>
<span className="title">Attach Pod</span>
{containers.length > 1 && (
<>

View File

@ -62,7 +62,7 @@ export class PodLogsMenu extends React.Component<PodLogsMenuProps> {
return (
<MenuItem onClick={Util.prevDefault(() => this.showLogs(containers[0]))}>
<Icon material="subject" title="Logs" interactive={toolbar}/>
<Icon material="subject" interactive={toolbar} tooltip={toolbar && "Pod Logs"}/>
<span className="title">Logs</span>
{containers.length > 1 && (
<>

View File

@ -79,7 +79,7 @@ export class PodShellMenu extends React.Component<PodShellMenuProps> {
return (
<MenuItem onClick={Util.prevDefault(() => this.execShell(containers[0].name))}>
<Icon svg="ssh" interactive={toolbar} title="Pod shell"/>
<Icon svg="ssh" interactive={toolbar} tooltip={toolbar && "Pod Shell"} />
<span className="title">Shell</span>
{containers.length > 1 && (
<>

View File

@ -41,9 +41,13 @@ describe("Lens cluster pages", () => {
const BACKSPACE = "\uE003";
let app: Application;
const ready = minikubeReady(TEST_NAMESPACE);
let clusterAdded = false;
afterEach(() => {
clusterAdded = false;
});
utils.describeIf(ready)("test common pages", () => {
let clusterAdded = false;
const addCluster = async () => {
await waitForMinikubeDashboard(app);
await app.client.click('a[href="/nodes"]');
@ -68,10 +72,9 @@ describe("Lens cluster pages", () => {
});
const appStartAddCluster = async () => {
if (clusterAdded) {
app = await utils.appStart();
await addCluster();
}
app = await utils.appStart();
await addCluster();
clusterAdded = true;
};
function getSidebarSelectors(itemId: string) {
@ -408,8 +411,12 @@ describe("Lens cluster pages", () => {
// Open logs tab in dock
await app.client.click(".list .TableRow:first-child");
await app.client.waitForVisible(".Drawer");
await app.client.waitForVisible(`ul.KubeObjectMenu li.MenuItem i[title="Logs"]`);
await app.client.click("ul.KubeObjectMenu li.MenuItem i[title='Logs']");
const logsButton = "ul.KubeObjectMenu li.MenuItem i.Icon span[data-icon-name='subject']";
await app.client.waitForVisible(logsButton);
await app.client.click(logsButton);
// Check if controls are available
await app.client.waitForVisible(".LogList .VirtualList");
await app.client.waitForVisible(".LogResourceSelector");

View File

@ -63,7 +63,7 @@ export class HelmReleaseMenu extends React.Component<Props> {
<>
{hasRollback && (
<MenuItem onClick={this.rollback}>
<Icon material="history" interactive={toolbar} title="Rollback"/>
<Icon material="history" interactive={toolbar} tooltip="Rollback"/>
<span className="title">Rollback</span>
</MenuItem>
)}

View File

@ -91,7 +91,7 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
items.push(
<MenuItem key={menuItem.title} onClick={() => this.onMenuItemClick(menuItem)}>
<Icon
title={menuItem.title}
tooltip={menuItem.title}
{...{ [key]: menuItem.icon }}
/>
</MenuItem>
@ -100,7 +100,7 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
items.push(
<MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(entity) }>
<Icon material="playlist_add" small title="Add to Hotbar" />
<Icon material="playlist_add" small tooltip="Add to Hotbar" />
</MenuItem>
);

View File

@ -93,7 +93,7 @@ export function ServiceAccountMenu(props: KubeObjectMenuProps<ServiceAccount>) {
return (
<MenuItem onClick={() => openServiceAccountKubeConfig(object)}>
<Icon material="insert_drive_file" title="Kubeconfig File" interactive={toolbar} />
<Icon material="insert_drive_file" tooltip="Kubeconfig File" interactive={toolbar} />
<span className="title">Kubeconfig</span>
</MenuItem>
);

View File

@ -107,7 +107,7 @@ export function CronJobMenu(props: KubeObjectMenuProps<CronJob>) {
return (
<>
<MenuItem onClick={() => CronJobTriggerDialog.open(object)}>
<Icon material="play_circle_filled" title="Trigger" interactive={toolbar}/>
<Icon material="play_circle_filled" tooltip="Trigger" interactive={toolbar}/>
<span className="title">Trigger</span>
</MenuItem>
@ -126,7 +126,7 @@ export function CronJobMenu(props: KubeObjectMenuProps<CronJob>) {
Resume CronJob <b>{object.getName()}</b>?
</p>),
})}>
<Icon material="play_circle_outline" title="Resume" interactive={toolbar}/>
<Icon material="play_circle_outline" tooltip="Resume" interactive={toolbar}/>
<span className="title">Resume</span>
</MenuItem>
@ -144,7 +144,7 @@ export function CronJobMenu(props: KubeObjectMenuProps<CronJob>) {
Suspend CronJob <b>{object.getName()}</b>?
</p>),
})}>
<Icon material="pause_circle_filled" title="Suspend" interactive={toolbar}/>
<Icon material="pause_circle_filled" tooltip="Suspend" interactive={toolbar}/>
<span className="title">Suspend</span>
</MenuItem>
}

View File

@ -124,7 +124,7 @@ export function DeploymentMenu(props: KubeObjectMenuProps<Deployment>) {
return (
<>
<MenuItem onClick={() => DeploymentScaleDialog.open(object)}>
<Icon material="open_with" title="Scale" interactive={toolbar}/>
<Icon material="open_with" tooltip="Scale" interactive={toolbar}/>
<span className="title">Scale</span>
</MenuItem>
<MenuItem onClick={() => ConfirmDialog.open({
@ -146,7 +146,7 @@ export function DeploymentMenu(props: KubeObjectMenuProps<Deployment>) {
</p>
),
})}>
<Icon material="autorenew" title="Restart" interactive={toolbar}/>
<Icon material="autorenew" tooltip="Restart" interactive={toolbar}/>
<span className="title">Restart</span>
</MenuItem>
</>

View File

@ -98,7 +98,7 @@ export function ReplicaSetMenu(props: KubeObjectMenuProps<ReplicaSet>) {
return (
<>
<MenuItem onClick={() => ReplicaSetScaleDialog.open(object)}>
<Icon material="open_with" title="Scale" interactive={toolbar}/>
<Icon material="open_with" tooltip="Scale" interactive={toolbar}/>
<span className="title">Scale</span>
</MenuItem>
</>

View File

@ -103,7 +103,7 @@ export function StatefulSetMenu(props: KubeObjectMenuProps<StatefulSet>) {
return (
<>
<MenuItem onClick={() => StatefulSetScaleDialog.open(object)}>
<Icon material="open_with" title="Scale" interactive={toolbar}/>
<Icon material="open_with" tooltip="Scale" interactive={toolbar}/>
<span className="title">Scale</span>
</MenuItem>
</>

View File

@ -94,7 +94,7 @@ export class DockTab extends React.Component<DockTabProps> {
{!pinned && (
<Icon
small material="close"
title="Close (Ctrl+Shift+W)"
tooltip="Close (Ctrl+Shift+W)"
onClick={prevDefault(this.close)}
/>
)}

View File

@ -230,7 +230,7 @@ export class FilePicker extends React.Component<Props> {
case FileInputStatus.PROCESSING:
return <Spinner />;
case FileInputStatus.ERROR:
return <Icon material="error" title={this.errorText}></Icon>;
return <Icon material="error" tooltip={this.errorText} />;
default:
return null;
}

View File

@ -122,7 +122,7 @@ export class Icon extends React.PureComponent<IconProps> {
// render as material-icon
if (material) {
iconContent = <span className="icon">{material}</span>;
iconContent = <span className="icon" data-icon-name={material}>{material}</span>;
}
// wrap icon's content passed from decorator

View File

@ -83,7 +83,9 @@ export class KubeObjectMenu<T extends KubeObject> extends React.Component<KubeOb
);
}
getMenuItems(object: T): React.ReactChild[] {
getMenuItems(): React.ReactChild[] {
const { object, toolbar } = this.props;
if (!object) {
return [];
}
@ -102,7 +104,7 @@ export class KubeObjectMenu<T extends KubeObject> extends React.Component<KubeOb
render() {
const { remove, update, renderRemoveMessage, isEditable, isRemovable } = this;
const { className, object, editable, removable, ...menuProps } = this.props;
const { className, editable, removable, ...menuProps } = this.props;
return (
<MenuActions
@ -112,7 +114,7 @@ export class KubeObjectMenu<T extends KubeObject> extends React.Component<KubeOb
removeConfirmationMessage={renderRemoveMessage}
{...menuProps}
>
{this.getMenuItems(object)}
{this.getMenuItems()}
</MenuActions>
);
}

View File

@ -137,13 +137,13 @@ export class MenuActions extends React.Component<MenuActionsProps> {
{children}
{updateAction && (
<MenuItem onClick={updateAction}>
<Icon material="edit" interactive={toolbar} title="Edit"/>
<Icon material="edit" interactive={toolbar} tooltip="Edit"/>
<span className="title">Edit</span>
</MenuItem>
)}
{removeAction && (
<MenuItem onClick={this.remove}>
<Icon material="delete" interactive={toolbar} title="Delete"/>
<Icon material="delete" interactive={toolbar} tooltip="Delete"/>
<span className="title">Remove</span>
</MenuItem>
)}