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

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

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 
-        id="file-upload" 
-        name="FilePicker" 
+      <input
+        id="file-upload"
+        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>
           )}