From 7a76e5e71bb4d01ec65ebccd2f1456abd7032ee7 Mon Sep 17 00:00:00 2001
From: Laura Fuentes Grau <laurafuentesgrau@gmail.com>
Date: Wed, 28 Oct 2020 18:30:08 +0100
Subject: [PATCH] Adapt add, edit and delete dialogs #266

---
 src/common/dialogs/delete-dialog.js |  6 +++++-
 src/ic/edit-ic.js                   | 22 ++++++++++++++++++++--
 src/ic/ics.js                       |  2 +-
 src/ic/new-ic.js                    | 24 ++++++++++++++++++++----
 4 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/common/dialogs/delete-dialog.js b/src/common/dialogs/delete-dialog.js
index cbc0cd8..8d114f4 100644
--- a/src/common/dialogs/delete-dialog.js
+++ b/src/common/dialogs/delete-dialog.js
@@ -16,7 +16,8 @@
  ******************************************************************************/
 
 import React from 'react';
-import { Button, Modal } from 'react-bootstrap';
+import { Button, Modal, FormLabel } from 'react-bootstrap';
+import {Collapse} from 'react-collapse';
 
 class DeleteDialog extends React.Component {
     onModalKeyPress = (event) => {
@@ -35,6 +36,9 @@ class DeleteDialog extends React.Component {
 
             <Modal.Body>
                 Are you sure you want to delete the {this.props.title} <strong>'{this.props.name}'</strong>?
+                <Collapse isOpened={this.props.managedexternally} >
+                    <FormLabel size="sm">The IC will be deleted if the respective VILLAScontroller sends "gone" state and no component config is using the IC anymore</FormLabel>
+                </Collapse>
             </Modal.Body>
 
             <Modal.Footer>
diff --git a/src/ic/edit-ic.js b/src/ic/edit-ic.js
index e5784e0..9e8fe4a 100644
--- a/src/ic/edit-ic.js
+++ b/src/ic/edit-ic.js
@@ -16,9 +16,9 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
+import { FormGroup, FormControl, FormLabel, FormCheck } from 'react-bootstrap';
 import _ from 'lodash';
-
+import {Collapse} from 'react-collapse';
 import Dialog from '../common/dialogs/dialog';
 import ParametersEditor from '../common/parameters-editor';
 
@@ -33,6 +33,7 @@ class EditICDialog extends React.Component {
       host: '',
       type: '',
       category: '',
+      managedexternally: false,
       properties: {},
     };
   }
@@ -61,16 +62,25 @@ class EditICDialog extends React.Component {
           data.properties = this.state.properties
         }
 
+        data.managedexternally = this.state.managedexternally;
+
 
         this.props.onClose(data);
+        this.setState({managedexternally: false});
       }
     } else {
       this.props.onClose();
+      this.setState({managedexternally: false});
     }
   }
 
   handleChange(e) {
+    if(e.target.id === "managedexternally"){
+      this.setState({ managedexternally : !this.state.managedexternally});
+    }
+    else{
     this.setState({ [e.target.id]: e.target.value });
+    }
   }
 
   handlePropertiesChange(data) {
@@ -83,6 +93,7 @@ class EditICDialog extends React.Component {
       host: this.props.ic.host,
       type: this.props.ic.type,
       category: this.props.ic.category,
+      managedexternally: false,
       properties: _.merge({}, _.get(this.props.ic, 'rawProperties'), _.get(this.props.ic, 'properties'))
     });
   }
@@ -100,6 +111,13 @@ 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)} />
diff --git a/src/ic/ics.js b/src/ic/ics.js
index 635b7a8..44173e7 100644
--- a/src/ic/ics.js
+++ b/src/ic/ics.js
@@ -370,7 +370,7 @@ class InfrastructureComponents extends Component {
         <EditICDialog show={this.state.editModal} onClose={data => this.closeEditModal(data)} ic={this.state.modalIC} />
         <ImportICDialog show={this.state.importModal} onClose={data => this.closeImportModal(data)} />
 
-        <DeleteDialog title="infrastructure-component" name={_.get(this.state.modalIC, 'properties.name') || _.get(this.state.modalIC, 'rawProperties.name') || 'Unknown'} show={this.state.deleteModal} onClose={(e) => this.closeDeleteModal(e)} />
+        <DeleteDialog title="infrastructure-component" name={_.get(this.state.modalIC, 'properties.name') || _.get(this.state.modalIC, 'rawProperties.name') || 'Unknown'} managedexternally={this.state.modalIC.managedexternally} show={this.state.deleteModal} onClose={(e) => this.closeDeleteModal(e)} />
       </div>
     );
   }
diff --git a/src/ic/new-ic.js b/src/ic/new-ic.js
index 93f1e83..78c67a8 100644
--- a/src/ic/new-ic.js
+++ b/src/ic/new-ic.js
@@ -16,8 +16,8 @@
  ******************************************************************************/
 
 import React from 'react';
-import { FormGroup, FormControl, FormLabel } from 'react-bootstrap';
-
+import { FormGroup, FormControl, FormLabel, FormCheck } from 'react-bootstrap';
+import {Collapse} from 'react-collapse';
 import Dialog from '../common/dialogs/dialog';
 
 class NewICDialog extends React.Component {
@@ -32,6 +32,7 @@ class NewICDialog extends React.Component {
       uuid: '',
       type: '',
       category: '',
+      managedexternally: false,
     };
   }
 
@@ -42,7 +43,8 @@ class NewICDialog extends React.Component {
           name: this.state.name,
           type: this.state.type,
           category: this.state.category,
-          uuid: this.state.uuid
+          uuid: this.state.uuid,
+          managedexternally: this.state.managedexternally,
         };
 
         if (this.state.host != null && this.state.host !== "" && this.state.host !== 'http://') {
@@ -50,18 +52,25 @@ class NewICDialog extends React.Component {
         }
 
         this.props.onClose(data);
+        this.setState({managedexternally: false});
       }
     } else {
       this.props.onClose();
+      this.setState({managedexternally: false});
     }
   }
 
   handleChange(e) {
+    if(e.target.id === "managedexternally"){
+      this.setState({ managedexternally : !this.state.managedexternally});
+    }
+    else{
     this.setState({ [e.target.id]: e.target.value });
+    }
   }
 
   resetState() {
-    this.setState({ name: '', host: 'http://', uuid: this.uuidv4(), type: '', category: ''});
+    this.setState({ name: '', host: 'http://', uuid: this.uuidv4(), type: '', category: '', managedexternally: false});
   }
 
   validateForm(target) {
@@ -110,6 +119,13 @@ class NewICDialog extends React.Component {
     return (
       <Dialog show={this.props.show} title="New Infrastructure Component" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
         <form>
+          <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">the component will show up in the list only after a VILLAScontroller for the component type has created the component and cannot be edited by users</FormLabel>
+          </Collapse>
           <FormGroup controlId="name" valid={this.validateForm('name')}>
             <FormLabel>Name</FormLabel>
             <FormControl type="text" placeholder="Enter name" value={this.state.name} onChange={(e) => this.handleChange(e)} />