From e90e12fc5c0990be3f2bb20b7670ccd8015002a4 Mon Sep 17 00:00:00 2001
From: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
Date: Thu, 28 May 2020 09:59:22 +0200
Subject: [PATCH] Fix for edit config, select-file; enable upload progress
 callback; fix startParams update

---
 src/common/api/rest-api.js         |   2 +-
 src/componentconfig/edit-config.js |  24 ++++--
 src/file/files-data-manager.js     |   6 +-
 src/file/select-file.js            | 126 +++++++++++++----------------
 src/scenario/scenario.js           |  10 ++-
 5 files changed, 85 insertions(+), 83 deletions(-)

diff --git a/src/common/api/rest-api.js b/src/common/api/rest-api.js
index 9fa04f1..3bb18d1 100644
--- a/src/common/api/rest-api.js
+++ b/src/common/api/rest-api.js
@@ -125,7 +125,7 @@ class RestAPI {
 
   upload(url, data, token, progressCallback, scenarioID) {
     return new Promise(function (resolve, reject) {
-      const req = request.post(url + "?scenarioID=" + scenarioID).send(data); //.on('progress', progressCallback);
+      const req = request.post(url + "?scenarioID=" + scenarioID).send(data).on('progress', progressCallback);
 
       if (token != null) {
         req.set('Authorization', "Bearer " + token);
diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js
index db81b14..a69159d 100644
--- a/src/componentconfig/edit-config.js
+++ b/src/componentconfig/edit-config.js
@@ -32,8 +32,8 @@ class EditConfigDialog extends React.Component {
             name: '',
             icID: '',
             configuration: null,
-            startParameters: {},
-            selectedFileID:0
+            startParameters: this.props.config.startParameters,
+            selectedFileID: this.props.config.selectedFileID
 
         };
     }
@@ -49,7 +49,7 @@ class EditConfigDialog extends React.Component {
                 if (this.state.icID !== '' && this.props.config.icID !== parseInt(this.state.icID)) {
                     data.icID = parseInt(this.state.icID, 10);
                 }
-                if(this.state.startParameters !==  {} && this.props.config.startParameters !== this.state.startParameters){
+                if(this.state.startParameters !==  {} && JSON.stringify(this.props.config.startParameters) !== JSON.stringify(this.state.startParameters)){
                     data.startParameters = this.state.startParameters;
                 }
                 if (parseInt(this.state.selectedFileID, 10) !== 0 &&
@@ -79,9 +79,9 @@ class EditConfigDialog extends React.Component {
       this.valid = this.isValid()
     }
 
-    handleSelectedFileChange(newFileID){
-      console.log("Config file change to: ", newFileID);
-      this.setState({selectedFileID: newFileID})
+    handleSelectedFileChange(event){
+      //console.log("Config file change to: ", event.target.value);
+      this.setState({selectedFileID: event.target.value})
 
       this.valid = this.isValid()
     }
@@ -121,11 +121,19 @@ class EditConfigDialog extends React.Component {
                       </FormControl>
                     </FormGroup>
 
-                    <SelectFile type='config' name='Configuration File' onChange={(e) => this.handleSelectedFileChange(e)} value={this.state.selectedFileID} scenarioID={this.props.config.scenarioID}/>
+                    <SelectFile
+                      type='config'
+                      name='Configuration File'
+                      onChange={(e) => this.handleSelectedFileChange(e)}
+                      files={this.props.files}
+                      value={this.state.selectedFileID}
+                      scenarioID={this.props.config.scenarioID}
+                      sessionToken={this.props.sessionToken}
+                    />
 
                     <FormGroup controlId='startParameters'>
                         <FormLabel> Start Parameters </FormLabel>
-                        <ParametersEditor content={this.props.config.startParameters} onChange={(data) => this.handleParameterChange(data)} />
+                        <ParametersEditor content={this.state.startParameters} onChange={(data) => this.handleParameterChange(data)} />
                     </FormGroup>
                 </form>
             </Dialog>
diff --git a/src/file/files-data-manager.js b/src/file/files-data-manager.js
index 6336c66..cc5cf4b 100644
--- a/src/file/files-data-manager.js
+++ b/src/file/files-data-manager.js
@@ -38,9 +38,9 @@ class FilesDataManager extends RestDataManager {
         token: token
       });
 
-      /*if (finishedCallback) {
-        finishedCallback();
-      }*/
+      if (finishedCallback) {
+        finishedCallback(response.file.id);
+      }
     }).catch(error => {
       AppDispatcher.dispatch({
         type: 'files/upload-error',
diff --git a/src/file/select-file.js b/src/file/select-file.js
index bceee4a..132caf9 100644
--- a/src/file/select-file.js
+++ b/src/file/select-file.js
@@ -16,56 +16,20 @@
  ******************************************************************************/
 
 import React from 'react';
-import { Container } from 'flux/utils';
-import { FormGroup, FormControl, FormLabel, Button, Col } from 'react-bootstrap';
-
-import FileStore from './file-store';
-import LoginStore from '../user/login-store';
-
+import { FormGroup, FormControl, FormLabel, Button, Col, ProgressBar } from 'react-bootstrap';
 import AppDispatcher from '../common/app-dispatcher';
-import Icon from "../common/icon";
 
 class SelectFile extends React.Component {
-  static getStores() {
-      return [ FileStore, LoginStore ];
+
+  constructor() {
+    super();
+
+    this.state = {
+      uploadFile: null,
+      uploadProgress: 0
+    }
   }
 
-
-  static calculateState(prevState, props) {
-
-    let files = FileStore.getState().filter((file) => {
-      return (file.scenarioID === props.scenarioID)
-    });
-
-      return {
-          files: files,
-          sessionToken: LoginStore.getState().token,
-          selectedFile: '',
-          uploadFile: null,
-          uploadProgress: 0
-      };
-  }
-
-  /*componentDidMount() {
-      AppDispatcher.dispatch({
-          type: 'files/start-load',
-          token: this.state.sessionToken
-      });
-  }*/
-
-  static getDerivedStateFromProps(props, state){
-
-
-  }
-
-  handleChange(event) {
-
-      // send file ID to callback
-      if (this.props.onChange != null) {
-          this.props.onChange(event.target.value);
-      }
-  };
-
   selectUploadFile(event) {
       this.setState({ uploadFile: event.target.files[0] });
   };
@@ -78,39 +42,46 @@ class SelectFile extends React.Component {
       AppDispatcher.dispatch({
           type: 'files/start-upload',
           data: formData,
-          token: this.state.sessionToken,
-          //progressCallback: this.updateUploadProgress,
-          //finishedCallback: this.clearProgress,
+          token: this.props.sessionToken,
+          progressCallback: this.updateUploadProgress,
+          finishedCallback: this.clearProgress,
           scenarioID: this.props.scenarioID,
       });
+
+      // TODO make sure that edit config dialog remains open after clicking "Upload" button
   };
 
-  updateUploadProgress = (event) => {// TODO: this callback does not work properly (access to setState)
+  updateUploadProgress = (event) => {
       this.setState({ uploadProgress: parseInt(event.percent.toFixed(), 10) });
   };
 
-  clearProgress = () => { // TODO this callback does not work properly (access to setState)
-      if (this.props.onChange != null) {
-        this.props.onChange(this.state.files[this.state.files.length - 1].id);
+  clearProgress = (newFileID) => {
+      /*if (this.props.onChange != null) {
+        let event = {}
+        event["target"] = {}
+        event.target["value"] = newFileID
+        this.props.onChange(event);
       }
       this.setState({ uploadProgress: 0 });
+      */
+
   };
 
   render() {
 
       let fileOptions;
-      if (this.state.files.length > 0){
-        fileOptions = this.state.files.map(f =>
+      if (this.props.files.length > 0){
+        fileOptions = this.props.files.map(f =>
           <option key={f.id} value={f.id}>{f.name}</option>
         );
       } else {
-        fileOptions = <option >No files for this component config</option>
+        fileOptions = <option >No files available</option>
       }
 
-      /*const progressBarStyle = {
+      const progressBarStyle = {
           marginLeft: '100px',
-          marginTop: '-25px'
-      };*/
+          marginTop: '-40px'
+      };
 
       return <div>
           <FormGroup>
@@ -119,29 +90,44 @@ class SelectFile extends React.Component {
               </FormLabel>
 
               <FormGroup as={Col} sm={9} md={10}>
-                  <FormControl as="select" disabled={this.props.disabled} placeholder='Select file' onChange={(event) => this.handleChange(event)}>
+                  <FormControl
+                    as="select"
+                    value={this.props.value}
+                    disabled={this.props.disabled}
+                    placeholder='Select file'
+                    onChange={(event) => this.props.onChange(event)}>
                       {fileOptions}
                   </FormControl>
               </FormGroup>
           </FormGroup>
 
-          <FormGroup as={Col} sm={{span: 9, offset: 3}} md={{span: 10, offset: 2}} >
-                  <FormControl disabled={this.props.disabled} type='file' onChange={(event) => this.selectUploadFile(event)} />
+          <FormGroup as={Col} >
+                  <FormControl
+                    disabled={this.props.disabled}
+                    type='file'
+                    onChange={(event) => this.selectUploadFile(event)} />
           </FormGroup>
 
-          <FormGroup as={Col} sm={{span: 9, offset: 3}} md={{span: 10, offset : 2}}>
-                  <Button disabled={this.props.disabled} onClick={() => this.startFileUpload()}>
-                    <Icon icon="plus" /> File
+          <FormGroup as={Col} >
+                  <Button
+                    disabled={this.state.uploadFile === null}
+                    onClick={() => this.startFileUpload()}>
+                    Upload
                   </Button>
           </FormGroup>
-        {/*<FormGroup as={Col} sm={{span: 9, offset: 3}} md={{span: 10, offset: 2}}>
-          <ProgressBar striped animated now={this.state.uploadProgress} label={this.state.uploadProgress + '%'}
-                       style={progressBarStyle}/>
+
+        <FormGroup as={Col} >
+          <ProgressBar
+            striped={true}
+            animated={true}
+            now={this.state.uploadProgress}
+            label={this.state.uploadProgress + '%'}
+            style={progressBarStyle}
+          />
         </FormGroup>
-        */}
+
       </div>;
   }
 }
 
-let fluxContainerConverter = require('../common/FluxContainerConverter');
-export default Container.create(fluxContainerConverter.convert(SelectFile), { withProps: true });
+export default SelectFile;
diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js
index dde3116..27642e8 100644
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@@ -467,7 +467,15 @@ class Scenario extends React.Component {
 
       <div style={{ clear: 'both' }} />
 
-      <EditConfigDialog show={this.state.editConfigModal} onClose={data => this.closeEditConfigModal(data)} config={this.state.modalConfigData} ics={this.state.ics} />
+      <EditConfigDialog
+        show={this.state.editConfigModal}
+        onClose={data => this.closeEditConfigModal(data)}
+        config={this.state.modalConfigData}
+        ics={this.state.ics}
+        files={this.state.files}
+        sessionToken={this.state.sessionToken}
+      />
+
       <ImportConfigDialog show={this.state.importConfigModal} onClose={data => this.importConfig(data)} ics={this.state.ics} />
       <DeleteDialog title="component configuration" name={this.state.modalConfigData.name} show={this.state.deleteConfigModal} onClose={(c) => this.closeDeleteConfigModal(c)} />