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

Signed-off-by: Sebastian Malton <sebastian@malton.name>

extensions/node-menu/src/node-menu.tsx

@@ -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}>
+        node.isUnschedulable()
-          <Icon material="pause_circle_filled" title="Cordon" interactive={toolbar}/>
+          ? (
-          <span className="title">Cordon</span>
+            <MenuItem onClick={unCordon}>
-        </MenuItem>
+              <Icon material="play_circle_filled" tooltip={toolbar && "Uncordon"} interactive={toolbar} />
-      )}
+              <span className="title">Uncordon</span>
-      {node.isUnschedulable() && (
+            </MenuItem>
-        <MenuItem onClick={unCordon}>
+          )
-          <Icon material="play_circle_filled" title="Uncordon" interactive={toolbar}/>
+          : (
-          <span className="title">Uncordon</span>
+            <MenuItem onClick={cordon}>
-        </MenuItem>
+              <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>
     </>

extensions/pod-menu/src/attach-menu.tsx

@@ -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 && (
           <>

extensions/pod-menu/src/logs-menu.tsx

@@ -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 && (
           <>

extensions/pod-menu/src/shell-menu.tsx

@@ -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 && (
           <>

integration/__tests__/cluster-pages.tests.ts

@@ -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();
-        app = await utils.appStart();
+      await addCluster();
-        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");

src/renderer/components/+apps-releases/release-menu.tsx

@@ -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>
         )}

src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx

@@ -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>
     );
 

src/renderer/components/+user-management/+service-accounts/view.tsx

@@ -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>
   );

src/renderer/components/+workloads-cronjobs/cronjobs.tsx

@@ -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>
       }

src/renderer/components/+workloads-deployments/deployments.tsx

@@ -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>
     </>

src/renderer/components/+workloads-replicasets/replicasets.tsx

@@ -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>
     </>

src/renderer/components/+workloads-statefulsets/statefulsets.tsx

@@ -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>
     </>

src/renderer/components/dock/dock-tab.tsx

@@ -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)}
           />
         )}

src/renderer/components/file-picker/file-picker.tsx

@@ -71,15 +71,15 @@ export interface BaseProps {
     // the larger number is upper limit, the lower is lower limit
     // the lower limit is capped at 0 and the upper limit is capped at Infinity
     limit?: [number, number];
-    
+
     // default is "Reject"
     onOverLimit?: OverLimitStyle;
-    
+
     // individual files are checked before the total size.
     maxSize?: number;
     // default is "Reject"
     onOverSizeLimit?: OverSizeLimitStyle;
-    
+
     maxTotalSize?: number;
     // default is "Reject"
     onOverTotalSizeLimit?: OverTotalSizeLimitStyle;
@@ -158,7 +158,7 @@ export class FilePicker extends React.Component<Props> {
         files = _.orderBy(files, ["size"]);
       case OverTotalSizeLimitStyle.FILTER_LAST:
         let newTotalSize = totalSize;
-      
+
         for (;files.length > 0;) {
           newTotalSize -= files.pop().size;
 
@@ -180,12 +180,12 @@ export class FilePicker extends React.Component<Props> {
       const numberLimitedFiles = this.handleFileCount(files);
       const sizeLimitedFiles = this.handleIndiviualFileSizes(numberLimitedFiles);
       const totalSizeLimitedFiles = this.handleTotalFileSizes(sizeLimitedFiles);
-      
+
       if ("uploadDir" in this.props) {
         const { uploadDir } = this.props;
 
         this.status = FileInputStatus.PROCESSING;
-        
+
         const paths: string[] = [];
         const promises = totalSizeLimitedFiles.map(async file => {
           const destinationPath = path.join(uploadDir, file.name);
@@ -214,9 +214,9 @@ export class FilePicker extends React.Component<Props> {
 
     return <div className="FilePicker">
       <label className="flex gaps align-center" htmlFor="file-upload">{label} {this.getIconRight()}</label>
-      <input 
+      <input
-        id="file-upload" 
+        id="file-upload"
-        name="FilePicker" 
+        name="FilePicker"
         type="file"
         accept={accept}
         multiple={multiple}
@@ -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;
     }

src/renderer/components/icon/icon.tsx

@@ -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

src/renderer/components/kube-object/kube-object-menu.tsx

@@ -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>
     );
   }

src/renderer/components/menu/menu-actions.tsx

@@ -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>
           )}