From d07b5c68c8d0ca809dd458d1d66ae4a1a7f46d2d Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Fri, 16 Apr 2021 19:37:47 +0200
Subject: [PATCH] use IconButton in Table, remove tooltips for locked buttons

---
 src/common/icon-button.js               |  15 +--
 src/common/icon-toggle-button.js        |  17 +--
 src/common/table.js                     | 167 +++++++++++-------------
 src/componentconfig/config-table.js     |  13 ++
 src/dashboard/dashboard-button-group.js |   2 +-
 src/dashboard/dashboard-table.js        |  12 ++
 src/dashboard/dashboard.js              |  11 ++
 src/result/result-table.js              |  10 ++
 src/scenario/scenario.js                |  12 ++
 src/scenario/scenarios.js               |  13 ++
 10 files changed, 158 insertions(+), 114 deletions(-)

diff --git a/src/common/icon-button.js b/src/common/icon-button.js
index e4876c9..2a65b95 100644
--- a/src/common/icon-button.js
+++ b/src/common/icon-button.js
@@ -25,25 +25,16 @@ import Icon from '../common/icon';
 class IconButton extends React.Component {
 
   render() {
-    const altButtonStyle = {
-      marginLeft: '10px',
-    }
-
-    const iconStyle = {
-      height: '30px',
-      width: '30px'
-    }
-
     let btn = <Button
-      variant='light'
+      variant={this.props.variant ? this.props.variant : 'light'}
       disabled={this.props.disabled}
       onClick={this.props.onClick}
-      style={this.props.buttonStyle ? this.props.buttonStyle : altButtonStyle}
+      style={this.props.buttonStyle}
     >
       <Icon
         icon={this.props.icon}
         classname={'icon-color'}
-        style={this.props.iconStyle ? this.props.iconStyle : iconStyle}
+        style={this.props.iconStyle}
       />
     </Button>
 
diff --git a/src/common/icon-toggle-button.js b/src/common/icon-toggle-button.js
index cd421e0..e4f23d2 100644
--- a/src/common/icon-toggle-button.js
+++ b/src/common/icon-toggle-button.js
@@ -25,27 +25,18 @@ import Icon from './icon';
 class IconToggleButton extends React.Component {
 
   render() {
-    const altButtonStyle = {
-      marginLeft: '10px',
-    }
+    let tooltip = this.props.checked ? this.props.tooltipChecked : this.props.tooltipUnchecked;
 
     return <OverlayTrigger
       key={this.props.ikey}
       placement={'top'}
-      overlay={
-        <Tooltip id={`tooltip-${"add"}`}>
-          {this.props.checked ?
-            this.props.tooltipChecked
-            :
-            this.props.tooltipUnchecked
-          }
-        </Tooltip>} >
+      overlay={<Tooltip id={`tooltip-${this.props.ikey}`}>{tooltip}</Tooltip>} >
       <ButtonGroup toggle>
         <ToggleButton
           variant='light'
           type='checkbox'
           onChange={this.props.onChange}
-          style={altButtonStyle}
+          style={this.props.buttonStyle}
           disabled={this.props.disabled}
           checked={this.props.checked}
         >
@@ -53,11 +44,13 @@ class IconToggleButton extends React.Component {
             <Icon
               icon={this.props.checkedIcon}
               classname={'icon-color'}
+              style={this.props.iconStyle}
             />
             :
             <Icon
               icon={this.props.uncheckedIcon}
               classname={'icon-color'}
+              style={this.props.iconStyle}
             />
           }
         </ToggleButton>
diff --git a/src/common/table.js b/src/common/table.js
index 6d36367..ea6494d 100644
--- a/src/common/table.js
+++ b/src/common/table.js
@@ -21,6 +21,7 @@ import { Table, Button, Form, Tooltip, OverlayTrigger } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import Icon from './icon';
 import IconToggleButton from './icon-toggle-button';
+import IconButton from '../common/icon-button';
 
 
 class CustomTable extends Component {
@@ -47,6 +48,7 @@ class CustomTable extends Component {
   static addCell(data, index, child) {
     // add data to cell
     let content = null;
+    let childkey = 0;
 
     if ('dataKeys' in child.props) {
       for (let key of child.props.dataKeys) {
@@ -92,7 +94,7 @@ class CustomTable extends Component {
                 onClick={() => child.props.onDownload(contentkey)}
                 disabled={child.props.onDownload == null}>
                 {contentkey + ' '}
-                <Icon icon='file-download' />
+                <Icon icon='file-download' classname={'icon-color'}/>
               </Button>
             </OverlayTrigger>);
         });
@@ -136,19 +138,17 @@ class CustomTable extends Component {
 
     if (child.props.editButton && showEditButton) {
       cell.push(
-        <OverlayTrigger
-          key={0}
-          placement={'bottom'}
-          overlay={<Tooltip id={`tooltip-${"edit"}`}> Edit </Tooltip>}
-        >
-          <Button
-            variant='table-control-button'
-            onClick={() => child.props.onEdit(index)}
-            disabled={child.props.onEdit == null || isLocked} >
-            <Icon icon='edit' />
-          </Button>
-        </OverlayTrigger>
-      );
+        <IconButton
+          key={childkey++}
+          ikey={childkey++}
+          icon={'edit'}
+          disabled={child.props.onEdit == null || isLocked}
+          hidetooltip={isLocked}
+          tooltip={"Edit"}
+          tipPlacement={'bottom'}
+          onClick={() => child.props.onEdit(index)}
+          variant={'table-control-button'}
+        />)
     }
 
     if (child.props.checkbox) {
@@ -171,7 +171,7 @@ class CustomTable extends Component {
     if (child.props.lockButton) {
       cell.push(
         <IconToggleButton
-          ikey={0}
+          ikey={childkey++}
           onChange={() => child.props.onChangeLock(index)}
           checked={isLocked}
           checkedIcon='lock'
@@ -185,84 +185,74 @@ class CustomTable extends Component {
 
     if (child.props.exportButton) {
       cell.push(
-        <OverlayTrigger
-          key={1}
-          placement={'bottom'}
-          overlay={<Tooltip id={`tooltip-${"export"}`}> Export </Tooltip>}
-        >
-          <Button
-            variant='table-control-button'
-            onClick={() => child.props.onExport(index)}
-            disabled={child.props.onExport == null}>
-            <Icon icon='download' />
-          </Button>
-        </OverlayTrigger>
-      );
+        <IconButton
+          key={childkey++}
+          ikey={childkey++}
+          icon={'download'}
+          disabled={child.props.onExport == null}
+          tooltip={"Export"}
+          tipPlacement={'bottom'}
+          onClick={() => child.props.onExport(index)}
+          variant={'table-control-button'}
+        />);
     }
 
     if (child.props.signalButton) {
       cell.push(
-        <OverlayTrigger
-          key={1}
-          placement={'bottom'}
-          overlay={<Tooltip id={`tooltip-${"signal"}`}> Autoconfigure Signals </Tooltip>}
-        >
-          <Button
-            variant='table-control-button'
-            onClick={() => child.props.onAutoConf(index)}
-            disabled={child.props.onAutoConf == null}>
-            <Icon icon='wave-square' />
-          </Button>
-        </OverlayTrigger>
-      );
+        <IconButton
+          key={childkey++}
+          ikey={childkey++}
+          icon={'wave-square'}
+          disabled={child.props.onAutoConf == null}
+          tooltip={"Autoconfigure Signals"}
+          tipPlacement={'bottom'}
+          onClick={() => child.props.onAutoConf(index)}
+          variant={'table-control-button'}
+        />);
     }
 
     if (child.props.duplicateButton) {
       cell.push(
-        <OverlayTrigger
-          key={2}
-          placement={'bottom'}
-          overlay={<Tooltip id={`tooltip-${"duplicate"}`}> Duplicate </Tooltip>} >
-          <Button
-            variant='table-control-button'
-            onClick={() => child.props.onDuplicate(index)}
-            disabled={child.props.onDuplicate == null || isLocked}>
-            <Icon icon='copy' />
-          </Button>
-        </OverlayTrigger>
-      );
+        <IconButton
+          key={childkey++}
+          ikey={childkey++}
+          icon={'copy'}
+          disabled={child.props.onDuplicate == null || isLocked}
+          hidetooltip={isLocked}
+          tooltip={"Duplicate"}
+          tipPlacement={'bottom'}
+          onClick={() => child.props.onDuplicate(index)}
+          variant={'table-control-button'}
+        />);
     }
 
     if (child.props.addRemoveFilesButton) {
       cell.push(
-        <OverlayTrigger
-          key={3}
-          placement={'bottom'}
-          overlay={<Tooltip id={`tooltip-${"export"}`}>Add/remove File(s)</Tooltip>} >
-          <Button
-            variant='table-control-button'
-            onClick={() => child.props.onAddRemove(index)}
-            disabled={child.props.onAddRemove == null || isLocked}>
-            <Icon icon='file' />
-          </Button>
-        </OverlayTrigger>
-      );
+        <IconButton
+          key={childkey++}
+          ikey={childkey++}
+          icon={'file'}
+          disabled={child.props.onAddRemove == null || isLocked}
+          hidetooltip={isLocked}
+          tooltip={"Add/remove File(s)"}
+          tipPlacement={'bottom'}
+          onClick={() => child.props.onAddRemove(index)}
+          variant={'table-control-button'}
+        />);
     }
 
     if (child.props.downloadAllButton) {
       cell.push(
-        <OverlayTrigger
-          key={4}
-          placement={'bottom'}
-          overlay={<Tooltip id={`tooltip-${"export"}`}>Download All Files</Tooltip>} >
-          <Button
-            variant='table-control-button'
-            onClick={() => child.props.onDownloadAll(index)}
-            disabled={child.props.onDownloadAll == null}>
-            <Icon icon='file-download' />
-          </Button>
-        </OverlayTrigger>
-      );
+        <IconButton
+          key={childkey++}
+          ikey={childkey++}
+          icon={'file-download'}
+          disabled={child.props.onDownloadAll == null}
+          tooltip={"Download All Files"}
+          tipPlacement={'bottom'}
+          onClick={() => child.props.onDownloadAll(index)}
+          variant={'table-control-button'}
+        />);
     }
 
     let showDeleteButton = child.props.showDeleteButton !== null && child.props.showDeleteButton !== undefined
@@ -271,18 +261,17 @@ class CustomTable extends Component {
 
     if (child.props.deleteButton && showDeleteButton) {
       cell.push(
-        <OverlayTrigger
-          key={5}
-          placement={'bottom'}
-          overlay={<Tooltip id={`tooltip-${"delete"}`}> Delete </Tooltip>} >
-          <Button
-            variant='table-control-button'
-            onClick={() => child.props.onDelete(index)}
-            disabled={child.props.onDelete == null || isLocked}>
-            <Icon icon='trash' />
-          </Button>
-        </OverlayTrigger>
-      );
+        <IconButton
+          key={childkey++}
+          ikey={childkey++}
+          icon={'trash'}
+          disabled={child.props.onDelete == null || isLocked}
+          hidetooltip={isLocked}
+          tooltip={"Delete"}
+          tipPlacement={'bottom'}
+          onClick={() => child.props.onDelete(index)}
+          variant={'table-control-button'}
+        />);
     }
 
     return cell;
diff --git a/src/componentconfig/config-table.js b/src/componentconfig/config-table.js
index b711ab5..d5e1b8f 100644
--- a/src/componentconfig/config-table.js
+++ b/src/componentconfig/config-table.js
@@ -298,6 +298,15 @@ class ConfigTable extends Component {
   }
 
   render() {
+    const buttonStyle = {
+      marginLeft: '10px',
+    }
+
+    const iconStyle = {
+      height: '30px',
+      width: '30px'
+    }
+
     return (
       <div>
         {/*Component Configurations table*/}
@@ -310,6 +319,8 @@ class ConfigTable extends Component {
             icon='plus'
             disabled={this.props.locked}
             hidetooltip={this.props.locked}
+            buttonStyle={buttonStyle}
+            iconStyle={iconStyle}
           />
           <IconButton
             ikey={1}
@@ -318,6 +329,8 @@ class ConfigTable extends Component {
             icon='upload'
             disabled={this.props.locked}
             hidetooltip={this.props.locked}
+            buttonStyle={buttonStyle}
+            iconStyle={iconStyle}
           />
         </span>
         </h2>
diff --git a/src/dashboard/dashboard-button-group.js b/src/dashboard/dashboard-button-group.js
index 6f9843a..ddacfa0 100644
--- a/src/dashboard/dashboard-button-group.js
+++ b/src/dashboard/dashboard-button-group.js
@@ -64,7 +64,7 @@ class DashboardButtonGroup extends React.Component {
 
   render() {
     const buttons = [];
-    key = 0;
+    buttonkey = 0;
 
     if (this.props.editing) {
       buttons.push(this.getBtn("save", "Save changes", this.props.onSave));
diff --git a/src/dashboard/dashboard-table.js b/src/dashboard/dashboard-table.js
index 9c76270..589366b 100644
--- a/src/dashboard/dashboard-table.js
+++ b/src/dashboard/dashboard-table.js
@@ -137,6 +137,14 @@ class DashboardTable extends Component {
   }
 
   render() {
+    const buttonStyle = {
+      marginLeft: '10px',
+    }
+
+    const iconStyle = {
+      height: '30px',
+      width: '30px'
+    }
 
     return (
       <div>
@@ -150,6 +158,8 @@ class DashboardTable extends Component {
                 icon='plus'
                 disabled={this.props.locked}
                 hidetooltip={this.props.locked}
+                buttonStyle={buttonStyle}
+                iconStyle={iconStyle}
               />
               <IconButton
                 ikey={1}
@@ -158,6 +168,8 @@ class DashboardTable extends Component {
                 icon='upload'
                 disabled={this.props.locked}
                 hidetooltip={this.props.locked}
+                buttonStyle={buttonStyle}
+                iconStyle={iconStyle}
               />
             </span>
         </h2>
diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js
index 9462bad..2d1aa75 100644
--- a/src/dashboard/dashboard.js
+++ b/src/dashboard/dashboard.js
@@ -487,6 +487,15 @@ class Dashboard extends Component {
       return <div className="section-title">  <span>{"Loading Dashboard..."}</span>  </div>
     }
 
+    const buttonStyle = {
+      marginLeft: '10px',
+    }
+
+    const iconStyle = {
+      height: '25px',
+      width: '25px'
+    }
+
     const grid = this.state.dashboard.grid;
     const boxClasses = classNames('section', 'box', { 'fullscreen-padding': this.props.isFullscreen });
     let draggable = this.state.editing;
@@ -505,6 +514,8 @@ class Dashboard extends Component {
                 tooltipChecked='Dashboard is locked, cannot be edited'
                 tooltipUnchecked='Dashboard is unlocked, can be edited'
                 disabled={true}
+                buttonStyle={buttonStyle}
+                iconStyle={iconStyle}
               />
             </span>
           </h2>
diff --git a/src/result/result-table.js b/src/result/result-table.js
index 9001b59..a38d160 100644
--- a/src/result/result-table.js
+++ b/src/result/result-table.js
@@ -154,6 +154,14 @@ class ResultTable extends Component {
   }
 
   render() {
+    const buttonStyle = {
+      marginLeft: '10px',
+    }
+
+    const iconStyle = {
+      height: '30px',
+      width: '30px'
+    }
 
     return (
       <div>
@@ -167,6 +175,8 @@ class ResultTable extends Component {
             icon='plus'
             disabled={this.props.locked}
             hidetooltip={this.props.locked}
+            buttonStyle={buttonStyle}
+            iconStyle={iconStyle}
           />
           </span>
         </h2>
diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js
index d9d76d7..f19a01b 100644
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@@ -133,6 +133,14 @@ class Scenario extends React.Component {
   ############################################## */
 
   render() {
+    const buttonStyle = {
+      marginLeft: '10px',
+    }
+
+    const iconStyle = {
+      height: '30px',
+      width: '30px'
+    }
 
     const tableHeadingStyle = {
       paddingTop: '30px'
@@ -151,6 +159,8 @@ class Scenario extends React.Component {
           tooltip={tooltip}
           onClick={this.onEditFiles.bind(this)}
           icon="file"
+          buttonStyle={buttonStyle}
+          iconStyle={iconStyle}
         />
       </div>
       <h1>
@@ -165,6 +175,8 @@ class Scenario extends React.Component {
                 tooltipChecked='Scenario is locked, cannot be edited'
                 tooltipUnchecked='Scenario is unlocked, can be edited'
                 disabled={this.state.currentUser.role !== "Admin"}
+                buttonStyle={buttonStyle}
+                iconStyle={iconStyle}
               />
             </span>
         </h1>
diff --git a/src/scenario/scenarios.js b/src/scenario/scenarios.js
index 7f9c45b..89b52d9 100644
--- a/src/scenario/scenarios.js
+++ b/src/scenario/scenarios.js
@@ -244,6 +244,15 @@ class Scenarios extends Component {
   }
 
   render() {
+    const buttonStyle = {
+      marginLeft: '10px',
+    }
+
+    const iconStyle = {
+      height: '30px',
+      width: '30px'
+    }
+
     return <div className='section'>
       <h1>Scenarios
           <span className='icon-button'>
@@ -252,12 +261,16 @@ class Scenarios extends Component {
             tooltip='Add Scenario'
             onClick={() => this.setState({ newModal: true })}
             icon='plus'
+            buttonStyle={buttonStyle}
+            iconStyle={iconStyle}
           />
           <IconButton
             ikey={1}
             tooltip='Import Scenario'
             onClick={() => this.setState({ importModal: true })}
             icon='upload'
+            buttonStyle={buttonStyle}
+            iconStyle={iconStyle}
           />
         </span>
       </h1>