From 0cf3294816a8339b8ba687970e026317fb30221f Mon Sep 17 00:00:00 2001
From: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
Date: Thu, 18 Mar 2021 14:41:02 +0100
Subject: [PATCH] make upload button in edit files dialog fully clickable;
 close #289

---
 src/dashboard/dashboard.js |  4 ++--
 src/file/edit-files.js     | 27 ++++++++++++++-------------
 src/scenario/scenario.js   |  4 ++--
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js
index d627c77..fe3ca4f 100644
--- a/src/dashboard/dashboard.js
+++ b/src/dashboard/dashboard.js
@@ -21,7 +21,7 @@ import Fullscreenable from 'react-fullscreenable';
 import classNames from 'classnames';
 
 import EditWidget from '../widget/edit-widget/edit-widget';
-import EditFiles from '../file/edit-files';
+import EditFilesDialog from '../file/edit-files';
 import EditSignalMappingDialog from "../signal/edit-signal-mapping";
 import WidgetContextMenu from '../widget/widget-context-menu';
 import WidgetToolbox from '../widget/widget-toolbox';
@@ -560,7 +560,7 @@ class Dashboard extends Component {
           ics={this.state.ics}
         />
 
-        <EditFiles
+        <EditFilesDialog
           sessionToken={this.state.sessionToken}
           show={this.state.filesEditModal}
           onClose={this.closeEditFiles.bind(this)}
diff --git a/src/file/edit-files.js b/src/file/edit-files.js
index dca4f28..1ec0276 100644
--- a/src/file/edit-files.js
+++ b/src/file/edit-files.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { Form, Button, Col, ProgressBar } from 'react-bootstrap';
+import {Form, Button, Col, ProgressBar, Row} from 'react-bootstrap';
 import Dialog from '../common/dialogs/dialog';
 import AppDispatcher from "../common/app-dispatcher";
 import Table from "../common/table";
@@ -142,24 +142,26 @@ class EditFilesDialog extends React.Component {
           />
         </Table>
 
-        <Form.Group as={Col} >
-          <Form.Control
-            disabled={this.props.disabled}
-            type='file'
-            onChange={(event) => this.selectUploadFile(event)}
-          />
-        </Form.Group>
-
-        <Form.Group as={Col} >
+        <div style={{ float: 'center' }}>
+          <h5>Add file</h5>
+          <Row>
+            <Col xs lg="4">
+              <Form.Control type='file' onChange={(event) => this.selectUploadFile(event)} />
+            </Col>
+            <Col xs lg="2">
           <span className='solid-button'>
             <Button
               variant='secondary'
               disabled={this.state.uploadFile === null}
               onClick={() => this.startFileUpload()}>
               Upload
-            </Button>
+          </Button>
           </span>
-        </Form.Group>
+            </Col>
+          </Row>
+        </div>
+
+        <br />
 
         <Form.Group as={Col} >
           <ProgressBar
@@ -167,7 +169,6 @@ class EditFilesDialog extends React.Component {
             animated={true}
             now={this.state.uploadProgress}
             label={this.state.uploadProgress + '%'}
-            style={progressBarStyle}
           />
         </Form.Group>
 
diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js
index 73767c9..4557dea 100644
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@@ -36,7 +36,7 @@ import ImportConfigDialog from '../componentconfig/import-config';
 import ImportDashboardDialog from "../dashboard/import-dashboard";
 import NewDashboardDialog from "../dashboard/new-dashboard";
 import EditDashboardDialog from '../dashboard/edit-dashboard';
-import EditFiles from '../file/edit-files'
+import EditFilesDialog from '../file/edit-files'
 import NewResultDialog from '../result/new-result';
 import EditResultDialog from '../result/edit-result';
 import ResultConfigDialog from '../result/result-configs-dialog';
@@ -746,7 +746,7 @@ class Scenario extends React.Component {
       </div>
       <h1>{this.state.scenario.name}</h1>
 
-      <EditFiles
+      <EditFilesDialog
         sessionToken={this.state.sessionToken}
         show={this.state.filesEditModal}
         onClose={this.closeEditFiles.bind(this)}