From 9d8e9c4364c60a72dda97ee021a583961e40f1c6 Mon Sep 17 00:00:00 2001
From: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
Date: Mon, 31 Aug 2020 09:36:32 +0200
Subject: [PATCH] Fixes a bug in editing component configurations (closes #252,
 closes #257)

---
 src/componentconfig/edit-config.js | 259 ++++++++++++++++-------------
 src/scenario/scenario.js           |   6 +-
 2 files changed, 141 insertions(+), 124 deletions(-)

diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js
index 2e277b1..51c4761 100644
--- a/src/componentconfig/edit-config.js
+++ b/src/componentconfig/edit-config.js
@@ -22,142 +22,163 @@ import Dialog from '../common/dialogs/dialog';
 import ParametersEditor from '../common/parameters-editor';
 
 class EditConfigDialog extends React.Component {
-    valid = false;
+  valid = false;
 
-    constructor(props) {
-        super(props);
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: '',
+      icID: '',
+      startParameters: {},
+      selectedFiles: [] // list of selected files {name, id}, this is not the fileIDs list of the config!
+    };
+  }
 
-        this.state = {
-            name: '',
-            icID: '',
-            configuration: null,
-            startParameters: this.props.config.startParameters,
-            fileIDs: this.props.config.fileIDs
-
-        };
-    }
-
-
-    onClose(canceled) {
-        if (canceled === false) {
-            if (this.valid) {
-                let data = this.props.config;
-                if (this.state.name !== '' && this.props.config.name !== this.state.name) {
-                    data.name = this.state.name;
-                }
-                if (this.state.icID !== '' && this.props.config.icID !== parseInt(this.state.icID)) {
-                    data.icID = parseInt(this.state.icID, 10);
-                }
-                if(this.state.startParameters !==  {} && JSON.stringify(this.props.config.startParameters) !== JSON.stringify(this.state.startParameters)){
-                    data.startParameters = this.state.startParameters;
-                }
-
-                let IDs = []
-                for(let e of this.state.fileIDs){
-                  IDs.push(e.id)
-                }
-                if (JSON.stringify(IDs) !== JSON.stringify(this.props.config.fileIDs)){
-                  data.fileIDs = IDs;
-                }
-
-                //forward modified config to callback function
-                this.props.onClose(data)
-            }
-        } else {
-            this.props.onClose();
+  onClose(canceled) {
+    if (canceled === false) {
+      if (this.valid) {
+        let data = this.props.config;
+        if (this.state.name !== '' && this.props.config.name !== this.state.name) {
+          data.name = this.state.name;
+        }
+        if (this.state.icID !== '' && this.props.config.icID !== parseInt(this.state.icID)) {
+          data.icID = parseInt(this.state.icID, 10);
+        }
+        if(this.state.startParameters !==  {} &&
+          JSON.stringify(this.props.config.startParameters) !== JSON.stringify(this.state.startParameters)){
+          data.startParameters = this.state.startParameters;
         }
-    }
 
-    handleChange(e) {
-        this.setState({ [e.target.id]: e.target.value });
-        this.valid = this.isValid()
-    }
+        let IDs = []
+        for(let e of this.state.selectedFiles){
+          IDs.push(e.id)
+        }
+        if (JSON.stringify(IDs) !== JSON.stringify(this.props.config.fileIDs)){
+          data.fileIDs = IDs;
+        }
 
-    handleParameterChange(data) {
-      if (data) {
-        this.setState({startParameters: data});
+        //forward modified config to callback function
+        this.props.onClose(data)
       }
-
-
-      this.valid = this.isValid()
+    } else {
+      this.props.onClose();
     }
+  }
 
-    onFileSelect(selectedList, selectedItem) {
+  handleChange(e) {
+    this.setState({ [e.target.id]: e.target.value });
+    this.valid = this.isValid()
+  }
 
-      this.setState({
-        fileIDs: selectedList
-      })
-      this.valid = this.isValid()
+  handleParameterChange(data) {
+    if (data) {
+      this.setState({startParameters: data});
     }
+    this.valid = this.isValid()
+  }
 
-    onFileRemove(selectedList, removedItem) {
+  onFileChange(selectedList, changedItem) {
+    this.setState({
+      selectedFiles: selectedList
+    })
+    this.valid = this.isValid()
+  }
 
-      this.setState({
-        fileIDs: selectedList
-      })
-      this.valid = this.isValid()
-    }
 
-    isValid() {
-      // input is valid if at least one element has changed from its initial value
-      return this.state.name !== ''
-        || this.state.icID !== ''
-        || this.state.startParameters !== {}
-        || this.state.configuration != null
-    }
+  isValid() {
+    // input is valid if at least one element has changed from its initial value
+    return this.state.name !== ''
+      || this.state.icID !== ''
+      || this.state.startParameters !== {}
+  }
 
-    resetState() {
-        //this.setState({});
-    }
+  resetState() {
 
-    render() {
-        const ICOptions = this.props.ics.map(s =>
-            <option key={s.id} value={s.id}>{s.name}</option>
-        );
-
-      let configFileOptions = [];
-      for(let file of this.props.files) {
-        configFileOptions.push(
-          {name: file.name, id: file.id}
-        );
+    // determine list of selected files incl id and filename
+    let selectedFiles = []
+    for(let selectedFileID of this.props.config.fileIDs){
+      for (let file of this.props.files){
+        if (file.id === selectedFileID){
+          selectedFiles.push({name: file.name, id: file.id})
+        }
       }
-
-
-
-        return (
-            <Dialog show={this.props.show} title="Edit Component Configuration" buttonTitle="Save" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
-                <form>
-                    <FormGroup controlId="name">
-                        <FormLabel column={false}>Name</FormLabel>
-                        <FormControl type="text" placeholder={this.props.config.name} value={this.state.name} onChange={(e) => this.handleChange(e)} />
-                        <FormControl.Feedback />
-                    </FormGroup>
-
-                    <FormGroup controlId="icID">
-                      <FormLabel column={false}> Infrastructure Component </FormLabel>
-                      <FormControl as="select" placeholder='Select infrastructure component' value={this.state.icID} onChange={(e) => this.handleChange(e)}>
-                        {ICOptions}
-                      </FormControl>
-                    </FormGroup>
-
-                    <Multiselect
-                      options={configFileOptions}
-                      showCheckbox={true}
-                      selectedValues={this.state.fileIDs}
-                      onSelect={(selectedList, selectedItem) => this.onFileSelect(selectedList, selectedItem)}
-                      onRemove={(selectedList, removedItem) => this.onFileRemove(selectedList, removedItem)}
-                      displayValue={'name'}
-                      placeholder={'Select file(s)...'}
-                    />
-
-                    <FormGroup controlId='startParameters'>
-                        <FormLabel> Start Parameters </FormLabel>
-                        <ParametersEditor content={this.state.startParameters} onChange={(data) => this.handleParameterChange(data)} />
-                    </FormGroup>
-                </form>
-            </Dialog>
-        );
     }
+
+    this.setState({
+      name: this.props.config.name,
+      icID: this.props.config.icID,
+      startParameters: this.props.config.startParameters,
+      selectedFiles: selectedFiles,
+    });
+  }
+
+
+  render() {
+    const ICOptions = this.props.ics.map(s =>
+      <option key={s.id} value={s.id}>{s.name}</option>
+    );
+
+    let configFileOptions = [];
+    for(let file of this.props.files) {
+      configFileOptions.push(
+        {name: file.name, id: file.id}
+      );
+    }
+
+    return (
+      <Dialog
+        show={this.props.show}
+        title="Edit Component Configuration"
+        buttonTitle="Save"
+        onClose={(c) => this.onClose(c)}
+        onReset={() => this.resetState()}
+        valid={this.valid}
+      >
+        <form>
+          <FormGroup controlId="name">
+            <FormLabel column={false}>Name</FormLabel>
+            <FormControl
+              type="text"
+              placeholder={this.props.config.name}
+              value={this.state.name}
+              onChange={(e) => this.handleChange(e)}
+            />
+            <FormControl.Feedback />
+          </FormGroup>
+
+          <FormGroup controlId="icID">
+            <FormLabel column={false}> Infrastructure Component </FormLabel>
+            <FormControl
+              as="select"
+              placeholder='Select infrastructure component'
+              value={this.state.icID}
+              onChange={(e) => this.handleChange(e)}
+            >
+              {ICOptions}
+            </FormControl>
+          </FormGroup>
+
+          <Multiselect
+            options={configFileOptions}
+            showCheckbox={true}
+            selectedValues={this.state.selectedFiles}
+            onSelect={(selectedList, selectedItem) => this.onFileChange(selectedList, selectedItem)}
+            onRemove={(selectedList, removedItem) => this.onFileChange(selectedList, removedItem)}
+            displayValue={'name'}
+            placeholder={'Select file(s)...'}
+          />
+
+          <FormGroup controlId='startParameters'>
+            <FormLabel> Start Parameters </FormLabel>
+            <ParametersEditor
+              content={this.state.startParameters}
+              onChange={(data) => this.handleParameterChange(data)}
+            />
+          </FormGroup>
+        </form>
+      </Dialog>
+    );
+  }
 }
 
 export default EditConfigDialog;
diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js
index fcd1300..564f63c 100644
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@@ -90,7 +90,7 @@ class Scenario extends React.Component {
 
       deleteConfigModal: false,
       importConfigModal: false,
-      editConfigModal: false,
+      editConfigModal: prevState.editConfigModal || false,
       modalConfigData: (prevState.modalConfigData !== {} && prevState.modalConfigData !== undefined )? prevState.modalConfigData : {},
       selectedConfigs: [],
       modalConfigIndex: 0,
@@ -453,10 +453,6 @@ class Scenario extends React.Component {
         }
       }
     }
-
-
-
-
     return fileList;
   }