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:
parent
f8dd7b12f2
commit
e49576ee8c
@ -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>
|
||||
</>
|
||||
|
||||
@ -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 && (
|
||||
<>
|
||||
|
||||
@ -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 && (
|
||||
<>
|
||||
|
||||
@ -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 && (
|
||||
<>
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
}
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
|
||||
@ -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)}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user