From f110a9c5e7806c29e41b7ac411e26ba35764ad58 Mon Sep 17 00:00:00 2001
From: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
Date: Thu, 12 Nov 2020 12:05:27 +0100
Subject: [PATCH] Improve edit and add IC dialogs #266

---
 src/ic/edit-ic.js | 71 ++++++++++++++++++++++++++++-------------------
 src/ic/new-ic.js  | 22 +++++++--------
 2 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/src/ic/edit-ic.js b/src/ic/edit-ic.js
index e9adf0a..49ffd79 100644
--- a/src/ic/edit-ic.js
+++ b/src/ic/edit-ic.js
@@ -32,10 +32,12 @@ class EditICDialog extends React.Component {
       name: '',
       websocketurl: '',
       apiurl: '',
+      location: '',
+      description: '',
       type: '',
       category: '',
       managedexternally: false,
-      properties: {},
+      startParameterScheme: {},
     };
   }
 
@@ -56,6 +58,14 @@ class EditICDialog extends React.Component {
           data.apiurl = this.state.apiurl;
         }
 
+        if (this.state.location != null && this.state.location !== this.props.ic.location) {
+          data.location = this.state.location;
+        }
+
+        if (this.state.description != null && this.state.description !== this.props.ic.description) {
+          data.description = this.state.description;
+        }
+
         if (this.state.type != null && this.state.type !== "" && this.state.type !== this.props.ic.type) {
           data.type = this.state.type;
         }
@@ -63,8 +73,8 @@ class EditICDialog extends React.Component {
         if (this.state.category != null && this.state.category !== "" && this.state.category !== this.props.ic.category) {
           data.category = this.state.category;
         }
-        if (this.state.properties !== {}) {
-          data.properties = this.state.properties
+        if (this.state.startParameterScheme !== {}) {
+          data.startParameterScheme = this.state.startParameterScheme
         }
 
         data.managedexternally = this.state.managedexternally;
@@ -88,8 +98,8 @@ class EditICDialog extends React.Component {
     }
   }
 
-  handlePropertiesChange(data) {
-    this.setState({ properties: data });
+  handleStartParameterSchemeChange(data) {
+    this.setState({ startParameterScheme: data });
   }
 
   resetState() {
@@ -98,9 +108,11 @@ class EditICDialog extends React.Component {
       websocketurl: this.props.ic.websocketurl,
       apiurl: this.props.ic.apiurl,
       type: this.props.ic.type,
+      location: this.props.ic.location,
+      description: this.props.ic.description,
       category: this.props.ic.category,
       managedexternally: false,
-      properties: _.merge({}, _.get(this.props.ic, 'rawProperties'), _.get(this.props.ic, 'properties'))
+      startParameterScheme: this.props.ic.startParameterScheme,
     });
   }
 
@@ -114,7 +126,7 @@ class EditICDialog extends React.Component {
         typeOptions = ["Kubernetes","VILLAS-controller"];
         break;
       case "Gateway":
-        typeOptions = ["VILLAS-node","VILLAS-relay"];
+        typeOptions = ["VILLASnode","VILLASrelay"];
         break;
       case "Service":
         typeOptions = ["EMS","Custom"];
@@ -137,28 +149,11 @@ class EditICDialog extends React.Component {
       >
         <form>
           <FormLabel column={false}>UUID: {this.props.ic.uuid}</FormLabel>
-          <FormGroup controlId="managedexternally">
-            <FormCheck type={"checkbox"} label={"Managed externally"} defaultChecked={this.state.managedexternally} onChange={e => this.handleChange(e)}>
-            </FormCheck>
-          </FormGroup>
-          <Collapse isOpened={this.state.managedexternally} >
-            <FormLabel size="sm">Externally managed ICs cannot be edited by users</FormLabel>
-          </Collapse>
           <FormGroup controlId="name">
             <FormLabel column={false}>Name</FormLabel>
             <FormControl type="text" placeholder={this.props.ic.name} value={this.state.name} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
           </FormGroup>
-          <FormGroup controlId="websocketurl">
-            <FormLabel column={false}>Websocket URL</FormLabel>
-            <FormControl type="text" placeholder={this.props.ic.websocketurl} value={this.state.websocketurl || 'http://' } onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-          <FormGroup controlId="apiurl">
-            <FormLabel column={false}>API URL</FormLabel>
-            <FormControl type="text" placeholder={this.props.ic.apiurl} value={this.state.apiurl || 'http://' } onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
           <FormGroup controlId="category">
             <FormLabel column={false}>Category</FormLabel>
             <FormControl as="select" value={this.state.category} onChange={(e) => this.handleChange(e)}>
@@ -178,12 +173,32 @@ class EditICDialog extends React.Component {
               ))}
             </FormControl>
           </FormGroup>
-          <FormGroup controlId='properties'>
-            <FormLabel column={false}>Properties</FormLabel>
+          <FormGroup controlId="websocketurl">
+            <FormLabel column={false}>Websocket URL</FormLabel>
+            <FormControl type="text" placeholder={this.props.ic.websocketurl} value={this.state.websocketurl || 'http://' } onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="apiurl">
+            <FormLabel column={false}>API URL</FormLabel>
+            <FormControl type="text" placeholder={this.props.ic.apiurl} value={this.state.apiurl || 'http://' } onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="location">
+            <FormLabel column={false}>Location</FormLabel>
+            <FormControl type="text" placeholder={this.props.ic.location} value={this.state.location || '' } onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="description">
+            <FormLabel column={false}>Description</FormLabel>
+            <FormControl type="text" placeholder={this.props.ic.description} value={this.state.description || '' } onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId='startParameterScheme'>
+            <FormLabel column={false}>Start parameter scheme of IC</FormLabel>
             <ParametersEditor
-              content={this.state.properties}
+              content={this.state.startParameterScheme}
               disabled={false}
-              onChange={(data) => this.handlePropertiesChange(data)}
+              onChange={(data) => this.handleStartParameterSchemeChange(data)}
             />
           </FormGroup>
         </form>
diff --git a/src/ic/new-ic.js b/src/ic/new-ic.js
index 8e35a10..b5848bd 100644
--- a/src/ic/new-ic.js
+++ b/src/ic/new-ic.js
@@ -85,7 +85,7 @@ class NewICDialog extends React.Component {
       name = false;
     }
 
-    if (this.state.uuid === '') {
+    if (!this.state.managedexternally && this.state.uuid === '') {
       uuid = false;
     }
 
@@ -151,16 +151,6 @@ class NewICDialog extends React.Component {
             <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
           </FormGroup>
-          <FormGroup controlId="websocketurl">
-            <FormLabel>Websocket URL</FormLabel>
-            <FormControl type="text" placeholder="Enter Websocket URL" value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
-          <FormGroup controlId="apiurl">
-            <FormLabel>API URL</FormLabel>
-            <FormControl type="text" placeholder="Enter API URL" value={this.state.apiurl} onChange={(e) => this.handleChange(e)} />
-            <FormControl.Feedback />
-          </FormGroup>
           <FormGroup controlId="category">
             <FormLabel>Category of component</FormLabel>
             <FormControl as="select" value={this.state.category} onChange={(e) => this.handleChange(e)}>
@@ -181,6 +171,16 @@ class NewICDialog extends React.Component {
               ))}
             </FormControl>
           </FormGroup>
+          <FormGroup controlId="websocketurl">
+            <FormLabel>Websocket URL</FormLabel>
+            <FormControl type="text" placeholder="Enter Websocket URL" value={this.state.websocketurl} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
+          <FormGroup controlId="apiurl">
+            <FormLabel>API URL</FormLabel>
+            <FormControl type="text" placeholder="Enter API URL" value={this.state.apiurl} onChange={(e) => this.handleChange(e)} />
+            <FormControl.Feedback />
+          </FormGroup>
           <FormGroup controlId="uuid" valid={this.validateForm('uuid')}>
             <FormLabel>UUID</FormLabel>
             <FormControl type="text" placeholder="Enter uuid" value={this.state.uuid} onChange={(e) => this.handleChange(e)} />