From 423a25771346a0942ce14c9a860a14850568526b Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Fri, 16 Apr 2021 13:51:52 +0200
Subject: [PATCH 01/16] [WIP] add start parameters from template

---
 package.json                       |   5 +-
 src/componentconfig/edit-config.js | 143 +++++++++++++++++++++++------
 2 files changed, 120 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index 6954861..f7ba094 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.34",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@fortawesome/react-fontawesome": "^0.1.14",
+    "@rjsf/core": "^2.5.1",
     "babel-runtime": "^6.26.0",
     "bootstrap": "^4.6.0",
     "classnames": "^2.2.6",
@@ -23,8 +24,8 @@
     "gaugeJS": "^1.3.7",
     "handlebars": "^4.7.7",
     "jquery": "^3.6.0",
-    "jszip": "^3.6.0",
     "jsonwebtoken": "^8.5.1",
+    "jszip": "^3.6.0",
     "libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
@@ -61,7 +62,7 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "proxy": "https://villas.k8s.eonerc.rwth-aachen.de",
+  "proxy": "http://localhost:4000",
   "browserslist": {
     "production": [
       ">0.2%",
diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js
index 2ee19ec..f1e3860 100644
--- a/src/componentconfig/edit-config.js
+++ b/src/componentconfig/edit-config.js
@@ -16,11 +16,71 @@
  ******************************************************************************/
 
 import React from 'react';
-import { Form } from 'react-bootstrap';
+import Form from "@rjsf/core";
+
+import { Form as BForm } from 'react-bootstrap';
 import { Multiselect } from 'multiselect-react-dropdown'
 import Dialog from '../common/dialogs/dialog';
 import ParametersEditor from '../common/parameters-editor';
 
+const template0 = {
+  id: 0,
+  name: "No Template"
+}
+
+const templateA = {
+  id: 1,
+  name: "Template A",
+  type: "object",
+  required: ["name"],
+  properties: {
+    name: { type: "string", title: "Name", default: "Template A" },
+    paramB: {
+      title: "MyParam",
+      enum: [
+        "option1",
+        "option2"
+      ],
+      enumNames: [
+        "Option 1",
+        "Option 2"
+      ]
+    }
+  }
+};
+
+const templateB = {
+  id: 2,
+  name: "Template B",
+  type: "object",
+  definitions: {
+    uint: {
+      type: "integer",
+      minimum: 0
+    },
+  },
+  properties: {
+    name: { type: "string", title: "Name", default: "Template B" },
+    description: { type: "string", title: "Description", default: "Description for Template B" },
+    paramB: {
+      title: "MyParam B",
+      enum: [
+        "option1",
+        "option2",
+        "option3"
+      ],
+      enumNames: [
+        "Option 1",
+        "Option 2",
+        "Option 3"
+      ]
+    },
+    minLength: { type: "integer", title: "Minimum Length", minimum: 0, default: 0 }
+  }
+};
+
+const templates = [template0, templateA, templateB];
+
 class EditConfigDialog extends React.Component {
   valid = false;
 
@@ -30,6 +90,7 @@ class EditConfigDialog extends React.Component {
       name: '',
       icID: '',
       startParameters: {},
+      startparamTemplate: null,
       selectedFiles: [] // list of selected files {name, id}, this is not the fileIDs list of the config!
     };
   }
@@ -44,21 +105,21 @@ 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 !==  {} &&
-          JSON.stringify(this.props.config.startParameters) !== JSON.stringify(this.state.startParameters)){
+        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.selectedFiles){
+        for (let e of this.state.selectedFiles) {
           IDs.push(e.id)
         }
-        if(this.props.config.fileIDs !== null && this.props.config.fileIDs !== undefined) {
+        if (this.props.config.fileIDs !== null && this.props.config.fileIDs !== undefined) {
           if (JSON.stringify(IDs) !== JSON.stringify(this.props.config.fileIDs)) {
             data.fileIDs = IDs;
           }
         }
-        else{
+        else {
           data.fileIDs = IDs
         }
 
@@ -75,9 +136,19 @@ class EditConfigDialog extends React.Component {
     this.valid = this.isValid()
   }
 
+  changeTemplate(e) {
+    let templateId = e.target.value;
+
+    if (templateId === 0) {
+      this.setState({ startparamTemplate: null });
+    } else {
+      this.setState({ startparamTemplate: templates[templateId] });
+    }
+  }
+
   handleParameterChange(data) {
     if (data) {
-      this.setState({startParameters: data});
+      this.setState({ startParameters: data });
     }
     this.valid = this.isValid()
   }
@@ -101,11 +172,11 @@ class EditConfigDialog extends React.Component {
 
     // determine list of selected files incl id and filename
     let selectedFiles = []
-    if(this.props.config.fileIDs !== null && this.props.config.fileIDs !== undefined) {
+    if (this.props.config.fileIDs !== null && this.props.config.fileIDs !== undefined) {
       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})
+            selectedFiles.push({ name: file.name, id: file.id })
           }
         }
       }
@@ -125,10 +196,14 @@ class EditConfigDialog extends React.Component {
       <option key={s.id} value={s.id}>{s.name}</option>
     );
 
+    const TemplateOptions = templates.map(t =>
+      <option key={t.id} value={t.id}>{t.name}</option>
+    );
+
     let configFileOptions = [];
-    for(let file of this.props.files) {
+    for (let file of this.props.files) {
       configFileOptions.push(
-        {name: file.name, id: file.id}
+        { name: file.name, id: file.id }
       );
     }
 
@@ -141,29 +216,29 @@ class EditConfigDialog extends React.Component {
         onReset={() => this.resetState()}
         valid={this.valid}
       >
-        <Form>
-          <Form.Group controlId="name">
-            <Form.Label column={false}>Name</Form.Label>
-            <Form.Control
+        <BForm>
+          <BForm.Group controlId="name">
+            <BForm.Label column={false}>Name</BForm.Label>
+            <BForm.Control
               type="text"
               placeholder={this.props.config.name}
               value={this.state.name}
               onChange={(e) => this.handleChange(e)}
             />
-            <Form.Control.Feedback />
-          </Form.Group>
+            <BForm.Control.Feedback />
+          </BForm.Group>
 
-          <Form.Group controlId="icID">
-            <Form.Label column={false}> Infrastructure Component </Form.Label>
-            <Form.Control
+          <BForm.Group controlId="icID">
+            <BForm.Label column={false}> Infrastructure Component </BForm.Label>
+            <BForm.Control
               as="select"
               placeholder='Select infrastructure component'
               value={this.state.icID}
               onChange={(e) => this.handleChange(e)}
             >
               {ICOptions}
-            </Form.Control>
-          </Form.Group>
+            </BForm.Control>
+          </BForm.Group>
 
           <Multiselect
             options={configFileOptions}
@@ -175,14 +250,30 @@ class EditConfigDialog extends React.Component {
             placeholder={'Select file(s)...'}
           />
 
-          <Form.Group controlId='startParameters'>
-            <Form.Label> Start Parameters </Form.Label>
+          <hr></hr>
+          <BForm.Group controlId='startParameters'>
+            <BForm.Label> Start Parameters </BForm.Label>
+            <BForm.Control
+              as="select"
+              placeholder='Select template for start parameters'
+              onChange={(e) => this.changeTemplate(e)}
+            >
+              {TemplateOptions}
+            </BForm.Control>
+          </BForm.Group>
+
+          {this.state.startparamTemplate ?
+            <Form schema={this.state.startparamTemplate}
+              onChange={console.log("changed")}
+              onSubmit={console.log("submitted")}
+              onError={console.log("error")} />
+            :
             <ParametersEditor
               content={this.state.startParameters}
               onChange={(data) => this.handleParameterChange(data)}
             />
-          </Form.Group>
-        </Form>
+          }
+        </BForm>
       </Dialog>
     );
   }

From dbfd39e2e441c5403bc1059dd95ea5f26b5c1a3a Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Tue, 20 Apr 2021 18:05:11 +0200
Subject: [PATCH 02/16] move schemas to separate files

---
 src/componentconfig/edit-config.js            | 58 +------------------
 .../paramtemplates/template0.js               | 23 ++++++++
 .../paramtemplates/templateA.js               | 39 +++++++++++++
 .../paramtemplates/templateB.js               | 48 +++++++++++++++
 4 files changed, 113 insertions(+), 55 deletions(-)
 create mode 100644 src/componentconfig/paramtemplates/template0.js
 create mode 100644 src/componentconfig/paramtemplates/templateA.js
 create mode 100644 src/componentconfig/paramtemplates/templateB.js

diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js
index f1e3860..78e35d6 100644
--- a/src/componentconfig/edit-config.js
+++ b/src/componentconfig/edit-config.js
@@ -23,61 +23,9 @@ import { Multiselect } from 'multiselect-react-dropdown'
 import Dialog from '../common/dialogs/dialog';
 import ParametersEditor from '../common/parameters-editor';
 
-const template0 = {
-  id: 0,
-  name: "No Template"
-}
-
-const templateA = {
-  id: 1,
-  name: "Template A",
-  type: "object",
-  required: ["name"],
-  properties: {
-    name: { type: "string", title: "Name", default: "Template A" },
-    paramB: {
-      title: "MyParam",
-      enum: [
-        "option1",
-        "option2"
-      ],
-      enumNames: [
-        "Option 1",
-        "Option 2"
-      ]
-    }
-  }
-};
-
-const templateB = {
-  id: 2,
-  name: "Template B",
-  type: "object",
-  definitions: {
-    uint: {
-      type: "integer",
-      minimum: 0
-    },
-  },
-  properties: {
-    name: { type: "string", title: "Name", default: "Template B" },
-    description: { type: "string", title: "Description", default: "Description for Template B" },
-    paramB: {
-      title: "MyParam B",
-      enum: [
-        "option1",
-        "option2",
-        "option3"
-      ],
-      enumNames: [
-        "Option 1",
-        "Option 2",
-        "Option 3"
-      ]
-    },
-    minLength: { type: "integer", title: "Minimum Length", minimum: 0, default: 0 }
-  }
-};
+import template0 from './paramtemplates/template0'
+import templateA from './paramtemplates/templateA'
+import templateB from './paramtemplates/templateB'
 
 const templates = [template0, templateA, templateB];
 
diff --git a/src/componentconfig/paramtemplates/template0.js b/src/componentconfig/paramtemplates/template0.js
new file mode 100644
index 0000000..0b9fa19
--- /dev/null
+++ b/src/componentconfig/paramtemplates/template0.js
@@ -0,0 +1,23 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+const template0 = {
+  id: 0,
+  name: "No Template"
+}
+
+export default template0;
\ No newline at end of file
diff --git a/src/componentconfig/paramtemplates/templateA.js b/src/componentconfig/paramtemplates/templateA.js
new file mode 100644
index 0000000..304e8fb
--- /dev/null
+++ b/src/componentconfig/paramtemplates/templateA.js
@@ -0,0 +1,39 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+const templateA = {
+  id: 1,
+  name: "Template A",
+  type: "object",
+  required: ["name"],
+  properties: {
+    name: { type: "string", title: "Name", default: "Template A" },
+    paramB: {
+      title: "MyParam",
+      enum: [
+        "option1",
+        "option2"
+      ],
+      enumNames: [
+        "Option 1",
+        "Option 2"
+      ]
+    }
+  }
+};
+
+export default templateA;
\ No newline at end of file
diff --git a/src/componentconfig/paramtemplates/templateB.js b/src/componentconfig/paramtemplates/templateB.js
new file mode 100644
index 0000000..7aa4b21
--- /dev/null
+++ b/src/componentconfig/paramtemplates/templateB.js
@@ -0,0 +1,48 @@
+/**
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+const templateB = {
+    id: 2,
+    name: "Template B",
+    type: "object",
+    definitions: {
+      uint: {
+        type: "integer",
+        minimum: 0
+      },
+    },
+    properties: {
+      name: { type: "string", title: "Name", default: "Template B" },
+      description: { type: "string", title: "Description", default: "Description for Template B" },
+      paramB: {
+        title: "MyParam B",
+        enum: [
+          "option1",
+          "option2",
+          "option3"
+        ],
+        enumNames: [
+          "Option 1",
+          "Option 2",
+          "Option 3"
+        ]
+      },
+      minLength: { type: "integer", title: "Minimum Length", minimum: 0, default: 0 }
+    }
+  };
+
+  export default templateB;
\ No newline at end of file

From 42532325738f52458c6f44f7a546ec92d8cf9ef5 Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Wed, 21 Apr 2021 17:06:47 +0200
Subject: [PATCH 03/16] [WIP] process data from form

---
 src/componentconfig/edit-config.js | 33 +++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js
index 78e35d6..68f381d 100644
--- a/src/componentconfig/edit-config.js
+++ b/src/componentconfig/edit-config.js
@@ -28,6 +28,13 @@ import templateA from './paramtemplates/templateA'
 import templateB from './paramtemplates/templateB'
 
 const templates = [template0, templateA, templateB];
+let paramForm;
+
+
+const onSubmitSchema = ({formData}, e) => {
+  e.preventDefault();
+  console.log(formData);
+}
 
 class EditConfigDialog extends React.Component {
   valid = false;
@@ -39,6 +46,7 @@ class EditConfigDialog extends React.Component {
       icID: '',
       startParameters: {},
       startparamTemplate: null,
+      formData: "",
       selectedFiles: [] // list of selected files {name, id}, this is not the fileIDs list of the config!
     };
   }
@@ -137,7 +145,13 @@ class EditConfigDialog extends React.Component {
       selectedFiles: selectedFiles,
     });
   }
-
+ 
+  handleSubmit({formData}, e) {
+    e.preventDefault();
+    //var formData = document.getElementById('jsonFormData');
+    console.log(formData)
+    console.log("hallo");
+  }
 
   render() {
     const ICOptions = this.props.ics.map(s =>
@@ -211,10 +225,9 @@ class EditConfigDialog extends React.Component {
           </BForm.Group>
 
           {this.state.startparamTemplate ?
-            <Form schema={this.state.startparamTemplate}
-              onChange={console.log("changed")}
-              onSubmit={console.log("submitted")}
-              onError={console.log("error")} />
+            <Form schema={this.state.startparamTemplate} id='jsonFormData'  onSubmit={this.handleSubmit.bind(this)}>
+
+              </Form>
             :
             <ParametersEditor
               content={this.state.startParameters}
@@ -227,4 +240,14 @@ class EditConfigDialog extends React.Component {
   }
 }
 
+/**+++++ onSubmit={console.log(formData)
+ *               <div>
+                <button type="submit" onClick={this.onSubmit}>Submit</button>
+              </div>
+
+                            <div>
+                <button type="submit" onClick={this.onSubmit}>Submit</button>
+              </div>
+ */
+
 export default EditConfigDialog;

From 783f657988074ee1af08260d1d3bd1cda403ab35 Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Fri, 30 Apr 2021 17:03:13 +0200
Subject: [PATCH 04/16] add rjsf (react-jsonschema-form) dependency

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index c0a5d39..0b0bc2e 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
+    "@rjsf/core": "^2.5.1",
     "babel-runtime": "^6.26.0",
     "bootstrap": "^4.6.0",
     "classnames": "^2.3.1",

From 0f89d70a6acda19657b72c3eb841f06c9a90103b Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Thu, 6 May 2021 10:59:20 +0200
Subject: [PATCH 05/16] output formdata onSubmit

---
 src/componentconfig/edit-config.js | 44 ++++++++----------------------
 1 file changed, 12 insertions(+), 32 deletions(-)

diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js
index 68f381d..9656aee 100644
--- a/src/componentconfig/edit-config.js
+++ b/src/componentconfig/edit-config.js
@@ -28,13 +28,6 @@ import templateA from './paramtemplates/templateA'
 import templateB from './paramtemplates/templateB'
 
 const templates = [template0, templateA, templateB];
-let paramForm;
-
-
-const onSubmitSchema = ({formData}, e) => {
-  e.preventDefault();
-  console.log(formData);
-}
 
 class EditConfigDialog extends React.Component {
   valid = false;
@@ -64,6 +57,7 @@ class EditConfigDialog extends React.Component {
         if (this.state.startParameters !== {} &&
           JSON.stringify(this.props.config.startParameters) !== JSON.stringify(this.state.startParameters)) {
           data.startParameters = this.state.startParameters;
+          console.log(this.state.startParameters)
         }
 
         let IDs = []
@@ -145,12 +139,9 @@ class EditConfigDialog extends React.Component {
       selectedFiles: selectedFiles,
     });
   }
- 
-  handleSubmit({formData}, e) {
-    e.preventDefault();
-    //var formData = document.getElementById('jsonFormData');
-    console.log(formData)
-    console.log("hallo");
+
+  onSubmit(form) {
+    console.log(form.formData);
   }
 
   render() {
@@ -224,30 +215,19 @@ class EditConfigDialog extends React.Component {
             </BForm.Control>
           </BForm.Group>
 
-          {this.state.startparamTemplate ?
-            <Form schema={this.state.startparamTemplate} id='jsonFormData'  onSubmit={this.handleSubmit.bind(this)}>
-
-              </Form>
-            :
+          {!this.state.startparamTemplate ?
             <ParametersEditor
-              content={this.state.startParameters}
-              onChange={(data) => this.handleParameterChange(data)}
-            />
-          }
+            content={this.state.startParameters}
+            onChange={(data) => this.handleParameterChange(data)}
+          />
+          : <></>}
         </BForm>
+        {this.state.startparamTemplate ?
+            <Form schema={this.state.startparamTemplate} id='jsonFormData'  onSubmit={this.onSubmit}>
+            </Form> : <></> }
       </Dialog>
     );
   }
 }
 
-/**+++++ onSubmit={console.log(formData)
- *               <div>
-                <button type="submit" onClick={this.onSubmit}>Submit</button>
-              </div>
-
-                            <div>
-                <button type="submit" onClick={this.onSubmit}>Submit</button>
-              </div>
- */
-
 export default EditConfigDialog;

From ebafae0e8c349c3dbf66deba30c38b97a6628c47 Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Thu, 6 May 2021 18:28:47 +0200
Subject: [PATCH 06/16] removed submit button, use formData as startParameters

---
 src/componentconfig/edit-config.js | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js
index 9656aee..53028bc 100644
--- a/src/componentconfig/edit-config.js
+++ b/src/componentconfig/edit-config.js
@@ -38,6 +38,7 @@ class EditConfigDialog extends React.Component {
       name: '',
       icID: '',
       startParameters: {},
+      formData: {},
       startparamTemplate: null,
       formData: "",
       selectedFiles: [] // list of selected files {name, id}, this is not the fileIDs list of the config!
@@ -57,7 +58,6 @@ class EditConfigDialog extends React.Component {
         if (this.state.startParameters !== {} &&
           JSON.stringify(this.props.config.startParameters) !== JSON.stringify(this.state.startParameters)) {
           data.startParameters = this.state.startParameters;
-          console.log(this.state.startParameters)
         }
 
         let IDs = []
@@ -79,6 +79,9 @@ class EditConfigDialog extends React.Component {
     } else {
       this.props.onClose();
     }
+
+    this.setState({ startparamTemplate: null })
+    this.valid = false
   }
 
   handleChange(e) {
@@ -89,7 +92,7 @@ class EditConfigDialog extends React.Component {
   changeTemplate(e) {
     let templateId = e.target.value;
 
-    if (templateId === 0) {
+    if (parseInt(templateId, 10) === 0) {
       this.setState({ startparamTemplate: null });
     } else {
       this.setState({ startparamTemplate: templates[templateId] });
@@ -137,11 +140,13 @@ class EditConfigDialog extends React.Component {
       icID: this.props.config.icID,
       startParameters: this.props.config.startParameters,
       selectedFiles: selectedFiles,
+      startparamTemplate: null,
     });
   }
 
-  onSubmit(form) {
-    console.log(form.formData);
+  handleFormChange({formData}) {
+    this.setState({formData: formData, startParameters: formData})
+    this.valid = this.isValid()
   }
 
   render() {
@@ -223,8 +228,14 @@ class EditConfigDialog extends React.Component {
           : <></>}
         </BForm>
         {this.state.startparamTemplate ?
-            <Form schema={this.state.startparamTemplate} id='jsonFormData'  onSubmit={this.onSubmit}>
-            </Form> : <></> }
+            <Form
+              schema={this.state.startparamTemplate}
+              formData={this.state.formData}
+              id='jsonFormData'
+              onChange={({formData}) => this.handleFormChange({formData})}
+              children={true} // hides submit button
+              />
+            : <></> }
       </Dialog>
     );
   }

From 38f0aa7c18a8b273f1e1110e83af8615e8a448d8 Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Fri, 7 May 2021 16:23:59 +0200
Subject: [PATCH 07/16] bugfix: modalIC was set to undefined at unexpected
 times

---
 src/ic/ics.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/ic/ics.js b/src/ic/ics.js
index 7452fa8..a33e1ac 100644
--- a/src/ic/ics.js
+++ b/src/ic/ics.js
@@ -101,7 +101,7 @@ class InfrastructureComponents extends Component {
       services: services,
       equipment: equipment,
       numberOfExternalICs,
-      modalIC: {},
+      modalIC: prevState.modalIC || {},
       deleteModal: false,
       icModal: false,
       selectedICs: prevState.selectedICs || [],
@@ -187,13 +187,9 @@ class InfrastructureComponents extends Component {
   }
 
   closeEditModal(data) {
-    this.setState({ editModal : false });
+    this.setState({ editModal : false, modalIC: {} });
 
     if (data) {
-      //let ic = this.state.ics[this.state.modalIndex];
-      //ic = data;
-      //this.setState({ ic: ic });
-
       AppDispatcher.dispatch({
         type: 'ics/start-edit',
         data: data,
@@ -204,8 +200,6 @@ class InfrastructureComponents extends Component {
 
 
   closeDeleteModal(confirmDelete){
-    this.setState({ deleteModal: false });
-
     if (confirmDelete === false) {
       return;
     }
@@ -215,6 +209,8 @@ class InfrastructureComponents extends Component {
       data: this.state.modalIC,
       token: this.state.sessionToken,
     });
+
+    this.setState({ deleteModal: false, modalIC: {} });
   }
 
   exportIC(index) {

From 0c67bcd68a09ad6813accff659f042398be89803 Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Fri, 7 May 2021 16:30:18 +0200
Subject: [PATCH 08/16] [WIP] load start parameter schema file

---
 src/ic/edit-ic.js | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/ic/edit-ic.js b/src/ic/edit-ic.js
index be77e27..4f086fd 100644
--- a/src/ic/edit-ic.js
+++ b/src/ic/edit-ic.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import { Form } from 'react-bootstrap';
+import { Form, Col, Row, Button } from 'react-bootstrap';
 import _ from 'lodash';
 import Dialog from '../common/dialogs/dialog';
 import ParametersEditor from '../common/parameters-editor';
@@ -120,6 +120,23 @@ class EditICDialog extends React.Component {
     });
   }
 
+  selectStartParamsFile(event) {
+    const file = event.target.files[0];
+    if (file.type.match('application/json') === false) {
+      console.log("not a json file")
+      return;
+    }
+
+    let reader = new FileReader();
+    reader.readAsText(file);
+
+    // TODO: error handling
+    reader.onload = event => {
+      const params = JSON.parse(reader.result);
+      this.setState({ startParameterSchema: params})
+    }
+  };
+
   render() {
     let typeOptions = [];
     switch(this.state.category){
@@ -196,8 +213,16 @@ class EditICDialog extends React.Component {
             <Form.Control type="text" placeholder={this.props.ic.description} value={this.state.description || '' } onChange={(e) => this.handleChange(e)} />
             <Form.Control.Feedback />
           </Form.Group>
+          <hr/>
           <Form.Group controlId='startParameterSchema'>
-            <Form.Label column={false}>Start parameter schema of IC</Form.Label>
+            <Row>
+            <Col xs lg="5">
+              <Form.Label column={false}>Start parameter schema of IC</Form.Label>
+            </Col>
+            <Col xs lg="4">
+              <Form.Control type='file' onChange={(event) => this.selectStartParamsFile(event)} />
+            </Col>
+            </Row>
             <ParametersEditor
               content={this.state.startParameterSchema}
               disabled={false}

From bf58b411b4f4b85cded7b4fbab770f58088cf52e Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Wed, 12 May 2021 19:00:51 +0200
Subject: [PATCH 09/16] [WIP] use startparameterschema of IC

---
 src/componentconfig/edit-config.js | 43 +++++++++---------------------
 1 file changed, 13 insertions(+), 30 deletions(-)

diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js
index 53028bc..a7e0f28 100644
--- a/src/componentconfig/edit-config.js
+++ b/src/componentconfig/edit-config.js
@@ -23,11 +23,6 @@ import { Multiselect } from 'multiselect-react-dropdown'
 import Dialog from '../common/dialogs/dialog';
 import ParametersEditor from '../common/parameters-editor';
 
-import template0 from './paramtemplates/template0'
-import templateA from './paramtemplates/templateA'
-import templateB from './paramtemplates/templateB'
-
-const templates = [template0, templateA, templateB];
 
 class EditConfigDialog extends React.Component {
   valid = false;
@@ -89,16 +84,6 @@ class EditConfigDialog extends React.Component {
     this.valid = this.isValid()
   }
 
-  changeTemplate(e) {
-    let templateId = e.target.value;
-
-    if (parseInt(templateId, 10) === 0) {
-      this.setState({ startparamTemplate: null });
-    } else {
-      this.setState({ startparamTemplate: templates[templateId] });
-    }
-  }
-
   handleParameterChange(data) {
     if (data) {
       this.setState({ startParameters: data });
@@ -135,12 +120,23 @@ class EditConfigDialog extends React.Component {
       }
     }
 
+    // TODO: set schema to null when this.state.icID is changed
+    let schema = null;
+    if (this.props.ics && this.props.config.icID) {
+      let currentIC = this.props.ics.find(ic => ic.id === parseInt(this.props.config.icID, 10));
+      if (currentIC) {
+        if (currentIC.startparameterschema.hasOwnProperty('type')) {
+          schema = currentIC.startparameterschema;
+        }
+      }
+    }
+
     this.setState({
       name: this.props.config.name,
       icID: this.props.config.icID,
       startParameters: this.props.config.startParameters,
       selectedFiles: selectedFiles,
-      startparamTemplate: null,
+      startparamTemplate: schema,
     });
   }
 
@@ -154,10 +150,6 @@ class EditConfigDialog extends React.Component {
       <option key={s.id} value={s.id}>{s.name}</option>
     );
 
-    const TemplateOptions = templates.map(t =>
-      <option key={t.id} value={t.id}>{t.name}</option>
-    );
-
     let configFileOptions = [];
     for (let file of this.props.files) {
       configFileOptions.push(
@@ -209,16 +201,7 @@ class EditConfigDialog extends React.Component {
           />
 
           <hr></hr>
-          <BForm.Group controlId='startParameters'>
-            <BForm.Label> Start Parameters </BForm.Label>
-            <BForm.Control
-              as="select"
-              placeholder='Select template for start parameters'
-              onChange={(e) => this.changeTemplate(e)}
-            >
-              {TemplateOptions}
-            </BForm.Control>
-          </BForm.Group>
+          <BForm.Label><b>Start Parameters</b></BForm.Label>
 
           {!this.state.startparamTemplate ?
             <ParametersEditor

From b604b9517382c32bf2eeb0899445b34527921a73 Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Wed, 12 May 2021 19:01:54 +0200
Subject: [PATCH 10/16] removed templates

---
 .../paramtemplates/template0.js               | 23 ---------
 .../paramtemplates/templateA.js               | 39 ---------------
 .../paramtemplates/templateB.js               | 48 -------------------
 3 files changed, 110 deletions(-)
 delete mode 100644 src/componentconfig/paramtemplates/template0.js
 delete mode 100644 src/componentconfig/paramtemplates/templateA.js
 delete mode 100644 src/componentconfig/paramtemplates/templateB.js

diff --git a/src/componentconfig/paramtemplates/template0.js b/src/componentconfig/paramtemplates/template0.js
deleted file mode 100644
index 0b9fa19..0000000
--- a/src/componentconfig/paramtemplates/template0.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * This file is part of VILLASweb.
- *
- * VILLASweb is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * VILLASweb is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
- ******************************************************************************/
-
-const template0 = {
-  id: 0,
-  name: "No Template"
-}
-
-export default template0;
\ No newline at end of file
diff --git a/src/componentconfig/paramtemplates/templateA.js b/src/componentconfig/paramtemplates/templateA.js
deleted file mode 100644
index 304e8fb..0000000
--- a/src/componentconfig/paramtemplates/templateA.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * This file is part of VILLASweb.
- *
- * VILLASweb is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * VILLASweb is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
- ******************************************************************************/
-
-const templateA = {
-  id: 1,
-  name: "Template A",
-  type: "object",
-  required: ["name"],
-  properties: {
-    name: { type: "string", title: "Name", default: "Template A" },
-    paramB: {
-      title: "MyParam",
-      enum: [
-        "option1",
-        "option2"
-      ],
-      enumNames: [
-        "Option 1",
-        "Option 2"
-      ]
-    }
-  }
-};
-
-export default templateA;
\ No newline at end of file
diff --git a/src/componentconfig/paramtemplates/templateB.js b/src/componentconfig/paramtemplates/templateB.js
deleted file mode 100644
index 7aa4b21..0000000
--- a/src/componentconfig/paramtemplates/templateB.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * This file is part of VILLASweb.
- *
- * VILLASweb is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * VILLASweb is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
- ******************************************************************************/
-
-const templateB = {
-    id: 2,
-    name: "Template B",
-    type: "object",
-    definitions: {
-      uint: {
-        type: "integer",
-        minimum: 0
-      },
-    },
-    properties: {
-      name: { type: "string", title: "Name", default: "Template B" },
-      description: { type: "string", title: "Description", default: "Description for Template B" },
-      paramB: {
-        title: "MyParam B",
-        enum: [
-          "option1",
-          "option2",
-          "option3"
-        ],
-        enumNames: [
-          "Option 1",
-          "Option 2",
-          "Option 3"
-        ]
-      },
-      minLength: { type: "integer", title: "Minimum Length", minimum: 0, default: 0 }
-    }
-  };
-
-  export default templateB;
\ No newline at end of file

From 81b1199123596cfea139f31b6d1adf215e04a906 Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Thu, 20 May 2021 16:28:53 +0200
Subject: [PATCH 11/16] remove log

---
 src/common/dialogs/new-dialog.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/common/dialogs/new-dialog.js b/src/common/dialogs/new-dialog.js
index 8c7b44f..461f9ac 100644
--- a/src/common/dialogs/new-dialog.js
+++ b/src/common/dialogs/new-dialog.js
@@ -38,8 +38,6 @@ class NewDialog extends React.Component {
   }
 
   handleChange(e) {
-    console.log(e)
-
     this.setState({ [e.target.id]: e.target.value });
   }
 

From 293393996f233a9aa3a79bc099071ce50f5cc0cf Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Thu, 20 May 2021 16:30:32 +0200
Subject: [PATCH 12/16] change schema when ic is changed

---
 src/componentconfig/edit-config.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js
index a7e0f28..6dc5a14 100644
--- a/src/componentconfig/edit-config.js
+++ b/src/componentconfig/edit-config.js
@@ -84,6 +84,25 @@ class EditConfigDialog extends React.Component {
     this.valid = this.isValid()
   }
 
+  changeIC(id) {
+    let schema = null;
+    if (this.props.ics) {
+      let currentIC = this.props.ics.find(ic => ic.id === parseInt(id, 10));
+      if (currentIC) {
+        if (currentIC.startparameterschema.hasOwnProperty('type')) {
+          schema = currentIC.startparameterschema;
+        }
+      }
+    }
+
+    this.setState({
+      icID: id,
+      startparamTemplate: schema,
+    });
+
+    this.valid = this.isValid()
+  }
+
   handleParameterChange(data) {
     if (data) {
       this.setState({ startParameters: data });
@@ -120,7 +139,6 @@ class EditConfigDialog extends React.Component {
       }
     }
 
-    // TODO: set schema to null when this.state.icID is changed
     let schema = null;
     if (this.props.ics && this.props.config.icID) {
       let currentIC = this.props.ics.find(ic => ic.id === parseInt(this.props.config.icID, 10));
@@ -184,7 +202,7 @@ class EditConfigDialog extends React.Component {
               as="select"
               placeholder='Select infrastructure component'
               value={this.state.icID}
-              onChange={(e) => this.handleChange(e)}
+              onChange={(e) => this.changeIC(e.target.value)}
             >
               {ICOptions}
             </BForm.Control>

From 9471759ef1beda84c2fd8c1196af0542001cdd70 Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Thu, 20 May 2021 16:31:58 +0200
Subject: [PATCH 13/16] only process json files

---
 src/ic/edit-ic.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ic/edit-ic.js b/src/ic/edit-ic.js
index 4f086fd..d052731 100644
--- a/src/ic/edit-ic.js
+++ b/src/ic/edit-ic.js
@@ -122,15 +122,15 @@ class EditICDialog extends React.Component {
 
   selectStartParamsFile(event) {
     const file = event.target.files[0];
-    if (file.type.match('application/json') === false) {
-      console.log("not a json file")
+
+    if (!file.type.match('application/json')) {
+      console.error("Not a json file. Will not process file '" + file.name + "'.")
       return;
     }
 
     let reader = new FileReader();
     reader.readAsText(file);
 
-    // TODO: error handling
     reader.onload = event => {
       const params = JSON.parse(reader.result);
       this.setState({ startParameterSchema: params})

From c56c7799b4f16d89cc14e67110c867224173fc46 Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Thu, 20 May 2021 16:32:39 +0200
Subject: [PATCH 14/16] fix

---
 src/componentconfig/import-config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/componentconfig/import-config.js b/src/componentconfig/import-config.js
index 2b69d9a..c034198 100644
--- a/src/componentconfig/import-config.js
+++ b/src/componentconfig/import-config.js
@@ -55,7 +55,7 @@ class ImportConfigDialog extends React.Component {
   loadFile = event => {
     // get file
     const file = event.target.files[0];
-    if (file.type.match('application/json') === false) {
+    if (!file.type.match('application/json')) {
       return;
     }
 

From 07dd64eaccf365d9611b4ece2649657ce10625f5 Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Thu, 20 May 2021 18:40:46 +0200
Subject: [PATCH 15/16] small fix

---
 src/ic/edit-ic.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ic/edit-ic.js b/src/ic/edit-ic.js
index ea9e36f..68707bd 100644
--- a/src/ic/edit-ic.js
+++ b/src/ic/edit-ic.js
@@ -106,7 +106,7 @@ class EditICDialog extends React.Component {
       description: this.props.ic.description,
       category: this.props.ic.category,
       managedexternally: false,
-      startparameterschema: this.props.ic.startparameterschema,
+      startparameterschema: this.props.ic.startparameterschema || {},
     });
   }
 

From 8d7823cd05031f98f82eafc6d00e63b82a8c2a2e Mon Sep 17 00:00:00 2001
From: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
Date: Fri, 21 May 2021 13:45:58 +0200
Subject: [PATCH 16/16] small fixes for redundant lines

---
 src/componentconfig/edit-config.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js
index 6dc5a14..63d9ded 100644
--- a/src/componentconfig/edit-config.js
+++ b/src/componentconfig/edit-config.js
@@ -35,7 +35,6 @@ class EditConfigDialog extends React.Component {
       startParameters: {},
       formData: {},
       startparamTemplate: null,
-      formData: "",
       selectedFiles: [] // list of selected files {name, id}, this is not the fileIDs list of the config!
     };
   }
@@ -218,7 +217,7 @@ class EditConfigDialog extends React.Component {
             placeholder={'Select file(s)...'}
           />
 
-          <hr></hr>
+          <hr/>
           <BForm.Label><b>Start Parameters</b></BForm.Label>
 
           {!this.state.startparamTemplate ?