From 81f156f019452e336da7c2b29c22e92636590132 Mon Sep 17 00:00:00 2001
From: Steffen Vogel <post@steffenvogel.de>
Date: Mon, 8 Mar 2021 14:25:22 +0100
Subject: [PATCH] ic-action: improve styling

---
 src/ic/ic-action.js      | 78 ++++++++++++++++++++--------------------
 src/ic/ics.js            |  4 ---
 src/scenario/scenario.js |  2 --
 3 files changed, 38 insertions(+), 46 deletions(-)

diff --git a/src/ic/ic-action.js b/src/ic/ic-action.js
index 9c39da4..c5358c5 100644
--- a/src/ic/ic-action.js
+++ b/src/ic/ic-action.js
@@ -16,23 +16,24 @@
  ******************************************************************************/
 
 import React from 'react';
-import { Button, DropdownButton, Dropdown, InputGroup, FormControl } from 'react-bootstrap';
+import { Form, SplitButton, Dropdown, FormControl } from 'react-bootstrap';
 import AppDispatcher from "../common/app-dispatcher";
 import NotificationsFactory from "../common/data-managers/notifications-factory";
 import NotificationsDataManager from "../common/data-managers/notifications-data-manager";
 
+
+Number.prototype.pad = function(size) {
+  var s = String(this);
+  while (s.length < (size || 2)) {
+    s = "0" + s;
+  }
+  return s;
+}
+
 class ICAction extends React.Component {
   constructor(props) {
     super(props);
 
-    let t = new Date()
-
-    Number.prototype.pad = function(size) {
-        var s = String(this);
-        while (s.length < (size || 2)) {s = "0" + s;}
-        return s;
-    }
-
     let time = new Date();
     time.setMinutes(5 * Math.round(time.getMinutes() / 5 + 1))
 
@@ -60,7 +61,7 @@ class ICAction extends React.Component {
       return;
     }
 
-    if (!this.props.hasConfigs) {
+    if (!this.props.configs) {
       let newAction = {};
       newAction["action"] = action.data.action
       newAction["when"] = when
@@ -203,13 +204,15 @@ class ICAction extends React.Component {
 
   render() {
 
-    let sendCommandDisabled = false;
-    if (!this.props.hasConfigs && this.props.selectedICs.length === 0 || this.state.selectedAction == null || this.state.selectedAction.id === "-1") {
-      sendCommandDisabled = true;
-    }
-    if (this.props.hasConfigs && this.props.selectedConfigs.length === 0|| this.state.selectedAction == null || this.state.selectedAction.id === "-1") {
-      sendCommandDisabled = true;
-    }
+    let disabled = this.state.selectedAction == null ||
+                  (this.props.configs
+                    ? this.props.selectedConfigs.length === 0
+                    : this.props.selectedICs.length === 0
+                  );
+
+    let splitButtonStyle = {
+      marginLeft: '10px'
+    };
 
     let time = this.state.time.getFullYear().pad(4) + '-' +
                this.state.time.getMonth().pad(2) + '-' +
@@ -223,29 +226,24 @@ class ICAction extends React.Component {
       </Dropdown.Item>
     ));
 
-    return <div className='solid-button'>
-      <InputGroup>
-        <InputGroup.Prepend>
-          <DropdownButton
-            variant="secondary"
-            title={this.state.selectedAction != null ? this.state.selectedAction.title : ''}
-            id="action-dropdown"
-            onSelect={this.setAction}>
-            {actionList}
-          </DropdownButton>
-          <FormControl
-            type="datetime-local"
-            variant="outline-secondary"
-            value={time}
-            onChange={this.setTimeForAction} />
-        </InputGroup.Prepend>
-        <Button
-          variant="secondary"
-          disabled={sendCommandDisabled}
-          onClick={() => this.runAction(this.state.selectedAction, this.state.time)}>Run</Button>
-      </InputGroup>
-      <small className="text-muted">Select time for synced command execution</small>
-    </div>;
+    return <div>
+            <Form inline>
+              <FormControl
+                type="datetime-local"
+                value={time}
+                onChange={this.setTimeForAction} />
+              <SplitButton
+                  style={splitButtonStyle}
+                  title={this.state.selectedAction != null ? this.state.selectedAction.title : ''}
+                  id="action-dropdown"
+                  onSelect={this.setAction}
+                  disabled={disabled}
+                  onClick={() => this.runAction(this.state.selectedAction, this.state.time)}>
+                  {actionList}
+              </SplitButton>
+            </Form>
+            <small className="text-muted">Select time for synced command execution</small>
+          </div>;
   }
 }
 
diff --git a/src/ic/ics.js b/src/ic/ics.js
index 6bf620b..4ef4ad6 100644
--- a/src/ic/ics.js
+++ b/src/ic/ics.js
@@ -506,12 +506,10 @@ class InfrastructureComponents extends Component {
         {this.state.currentUser.role === "Admin" && this.state.numberOfExternalICs > 0 ?
           <div style={{float: 'left'}}>
             <ICAction
-              hasConfigs = {false}
               ics={this.state.ics}
               selectedICs={this.state.selectedICs}
               token={this.state.sessionToken}
               actions={[
-                {id: '-1', title: 'Action', data: {action: 'none'}},
                 {id: '0', title: 'Reset', data: {action: 'reset'}},
                 {id: '1', title: 'Shutdown', data: {action: 'shutdown'}},
                 {id: '2', title: 'Delete', data: {action: 'delete'}},
@@ -533,9 +531,7 @@ class InfrastructureComponents extends Component {
           onClose={data => this.closeICModal(data)}
           ic={this.state.modalIC}
           token={this.state.sessionToken}
-          userRole={this.state.currentUser.role}
           sendControlCommand={(command, ic) => this.sendControlCommand(command, ic)}/>
-
       </div>
     );
   }
diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js
index 2bd909f..f1d2583 100644
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@@ -873,14 +873,12 @@ class Scenario extends React.Component {
       {this.state.ExternalICInUse ? (
         <div style={{ float: 'left' }}>
           <ICAction
-            hasConfigs={true}
             ics={this.state.ics}
             configs={this.state.configs}
             selectedConfigs = {this.state.selectedConfigs}
             snapshotConfig = {(index) => this.copyConfig(index)}
             token = {this.state.sessionToken}
             actions={[
-              { id: '-1', title: 'Action', data: { action: 'none' } },
               { id: '0', title: 'Start', data: { action: 'start' } },
               { id: '1', title: 'Stop', data: { action: 'stop' } },
               { id: '2', title: 'Pause', data: { action: 'pause' } },