Refactor CustomIconButtons

app/src/actions/Connection.ts

@@ -1,13 +1,13 @@
 import * as q from '../../../backend/src/Model'
 import * as url from 'url'
 import { Action, ActionTypes } from '../reducers/Connection'
-import { Action as SettingsAction, ActionTypes as SettingsActionTypes } from '../reducers/Settings'
+import { ActionTypes as SettingsActionTypes } from '../reducers/Settings'
 import { AppState } from '../reducers'
 import { DataSourceState, MqttOptions } from '../../../backend/src/DataSource'
 import { Dispatch } from 'redux'
 import { globalActions } from '.'
+import { resetStore as resetTreeStore, showTree } from './Tree'
 import { showError } from './Global'
-import { showTree, resetStore as resetTreeStore } from './Tree'
 import { TopicViewModel } from '../model/TopicViewModel'
 import {
   addMqttConnectionEvent,

app/src/components/Layout/PauseButton.tsx

@@ -71,12 +71,8 @@ class PauseButton extends React.Component<Props, {changes: number}> {
     return (
       <div style={{ display: 'inline-flex' }}>
         <span>
-          <CustomIconButton onClick={this.props.actions.tree.togglePause} >
+          <CustomIconButton onClick={this.props.actions.tree.togglePause} tooltip={message}>
-            <Tooltip title={message}>
-              <div /* Required so tooltip does not loose the anchor when the icon changes */>
             {this.props.paused ? <Resume className={this.props.classes.icon} /> : <Pause className={this.props.classes.icon} />}
-              </div>
-            </Tooltip>
           </CustomIconButton>
         </span>
         {this.props.paused ? this.renderBufferStats() : null}

app/src/components/Sidebar/Sidebar.tsx

@@ -70,12 +70,8 @@ class Sidebar extends React.Component<Props, State> {
     }
 
     return (
-      <CustomIconButton onClick={() => this.deleteTopic(this.props.node)}>
+      <CustomIconButton onClick={() => this.deleteTopic(this.props.node)} tooltip="Clear this topic">
-        <Tooltip title="Clear this topic">
-          <span>
         <Delete />
-          </span>
-        </Tooltip>
       </CustomIconButton>
     )
   }
@@ -88,17 +84,15 @@ class Sidebar extends React.Component<Props, State> {
     }
 
     return (
-      <CustomIconButton onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)}>
-        <Tooltip title={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
       <Badge
         classes={{ badge: this.props.classes.badge }}
         badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
         color="secondary"
       >
+        <CustomIconButton onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)} tooltip={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
           <Delete color="action" />
-          </Badge>
-        </Tooltip>
         </CustomIconButton>
+      </Badge>
     )
   }
 

app/src/components/helper/Copy.tsx

@@ -48,13 +48,11 @@ class Copy extends React.Component<Props, State> {
 
     return (
       <span>
-        <Tooltip placement="top" title="Copy to clipboard">
         <span style={{ fontSize: '16px' }}>
-            <CustomIconButton onClick={this.handleClick} >
+          <CustomIconButton onClick={this.handleClick} tooltip="Copy to clipboard">
             {icon}
           </CustomIconButton>
         </span>
-        </Tooltip>
         <Snackbar
           anchorOrigin={{
             vertical: 'bottom',

app/src/components/helper/CustomIconButton.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react'
-import { IconButton } from '@material-ui/core'
+import { IconButton, Tooltip } from '@material-ui/core'
 import { Theme, withStyles } from '@material-ui/core/styles'
 
 interface Props {
-  onClick: any,
+  onClick: any
-  classes: any,
+  tooltip: string
+  classes: any
 }
 
 const styles = (theme: Theme) => ({
@@ -26,7 +27,11 @@ class CustomIconButton extends React.Component<Props, {}> {
 
   public render() {
     return (
-      <IconButton className={this.props.classes.button} onClick={this.onClick}>{this.props.children}</IconButton>
+      <IconButton className={this.props.classes.button} onClick={this.onClick}>
+        <Tooltip title={this.props.tooltip}>
+          <span>{this.props.children}</span>
+        </Tooltip>
+      </IconButton>
     )
   }
 }