add locking button in scenarios table

src/common/icon-toggle-button.js

@@ -26,12 +26,7 @@ class IconToggleButton extends React.Component {
 
   render() {
     const altButtonStyle = {
-      marginLeft: '20px',
-    }
-
-    const iconStyle = {
-      height: '30px',
-      width: '30px'
+      marginLeft: '10px',
     }
 
     return <OverlayTrigger
@@ -58,13 +53,11 @@ class IconToggleButton extends React.Component {
             <Icon
               icon={this.props.checkedIcon}
               classname={'icon-color'}
-              style={iconStyle}
             />
             :
             <Icon
               icon={this.props.uncheckedIcon}
               classname={'icon-color'}
-              style={iconStyle}
             />
           }
         </ToggleButton>

src/common/table.js

@@ -20,6 +20,8 @@ import _ from 'lodash';
 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';
+
 
 class CustomTable extends Component {
   constructor(props) {
@@ -128,7 +130,7 @@ class CustomTable extends Component {
     let isLocked = child.props.locked || (child.props.isLocked != null && child.props.isLocked(index));
 
     // add buttons
-    let showEditButton = child.props.showEditButton !== null  && child.props.showEditButton !== undefined
+    let showEditButton = child.props.showEditButton !== null && child.props.showEditButton !== undefined
       ? child.props.showEditButton(index)
       : true;
 
@@ -166,6 +168,21 @@ class CustomTable extends Component {
       );
     }
 
+    if (child.props.lockButton) {
+      cell.push(
+        <IconToggleButton
+          ikey={0}
+          onChange={() => child.props.onChangeLock(index)}
+          checked={isLocked}
+          checkedIcon='lock'
+          uncheckedIcon='lock-open'
+          tooltipChecked='Scenario is locked, cannot be edited'
+          tooltipUnchecked='Scenario is unlocked, can be edited'
+          disabled={false}
+        />
+      );
+    }
+
     if (child.props.exportButton) {
       cell.push(
         <OverlayTrigger
@@ -248,7 +265,7 @@ class CustomTable extends Component {
       );
     }
 
-    let showDeleteButton = child.props.showDeleteButton !== null  && child.props.showDeleteButton !== undefined
+    let showDeleteButton = child.props.showDeleteButton !== null && child.props.showDeleteButton !== undefined
       ? child.props.showDeleteButton(index)
       : true;
 
@@ -370,14 +387,14 @@ class CustomTable extends Component {
                           value={cell}
                           onChange={(event) => children[cellIndex].props.onInlineChange(event, rowIndex, cellIndex)}
                           ref={ref => { this.activeInput = ref; }} />
-                      : <span>
+                        : <span>
                           {
                             cell.map((element, elementIndex) =>
                               <span key={elementIndex}>{element}</span>
                             )
                           }
                         </span>
-                        }
+                      }
                     </td>
                   })
                 }

src/scenario/scenario-users-table.js

@@ -16,11 +16,11 @@
  ******************************************************************************/
 
 import React, {Component} from "react";
-import {Button, Form, InputGroup} from "react-bootstrap";
+import { Form, InputGroup} from "react-bootstrap";
 import {Redirect} from "react-router-dom";
 import Table from "../common/table";
 import TableColumn from "../common/table-column";
-import Icon from "../common/icon";
+import IconButton from "../common/icon-button";
 import DeleteDialog from "../common/dialogs/delete-dialog";
 import AppDispatcher from "../common/app-dispatcher";
 
@@ -82,15 +82,6 @@ class ScenarioUsersTable extends Component {
       return (<Redirect to="/scenarios" />);
     }
 
-    const altButtonStyle = {
-      marginLeft: '10px',
-    }
-
-    const iconStyle = {
-      height: '30px',
-      width: '30px'
-    }
-
     return (
       <div>
         {/*Scenario Users table*/}
@@ -142,14 +133,14 @@ class ScenarioUsersTable extends Component {
           />
           <InputGroup.Append>
           <span className='icon-button'>
-            <Button
-              variant='light'
-              type="submit"
-              style={altButtonStyle}
-              disabled={this.props.locked}
-              onClick={() => this.addUser()}>
-              <Icon icon="plus" classname={'icon-color'} style={iconStyle} />
-            </Button>
+          <IconButton
+            ikey={1}
+            tooltip='Add User to Scenario'
+            onClick={() => this.addUser()}
+            icon='plus'
+            disabled={this.props.locked}
+            hidetooltip={this.props.locked}
+          />
           </span>
           </InputGroup.Append>
         </InputGroup>

src/scenario/scenarios.js

@@ -231,10 +231,10 @@ class Scenarios extends Component {
     return this.state.scenarios[index].isLocked;
   }
 
-  onLock(scenario) {
+  onLock(index) {
     let data = {};
-    data.id = scenario.id;
-    data.isLocked = !scenario.isLocked;
+    data.id = this.state.scenarios[index].id;
+    data.isLocked = !this.state.scenarios[index].isLocked;
 
     AppDispatcher.dispatch({
       type: 'scenarios/start-edit',
@@ -279,9 +279,10 @@ class Scenarios extends Component {
         {this.state.currentUser.role === "Admin" ?
           <TableColumn
             title='Locked'
-            checkbox
+            lockButton
             checkboxKey='isLocked'
-            onChecked={(index, event) => this.onLock(index)}
+            onChangeLock={(index, event) => this.onLock(index)}
+            isLocked={index => this.isLocked(index)}
           />
           : <></>
         }