Fixed Instance Properties Name

Added a input text box so the user can
customize the instance name properties

Issue-ID: POLICY-3978
Change-Id: I505eff37699dbe50a285ce2f153c70be246e1d8c
Signed-off-by: brunomilitzer <bruno.militzer@est.tech>

5 files changed, 73 insertions, 18 deletions

diff --git a/gui-clamp/ui-react/src/api/ACMService.js b/gui-clamp/ui-react/src/api/ACMService.js
index 405d222..393741f 100644
--- a/gui-clamp/ui-react/src/api/ACMService.js
+++ b/gui-clamp/ui-react/src/api/ACMService.js
@@ -27,7 +27,7 @@ export default class ACMService {
     return response
   }
 
-  static async createInstanceProperties(instanceName, instancePropertiesTemplate) {
+  static async createInstanceProperties(instancePropertiesTemplate) {
 
     const response = await fetch(window.location.pathname +
       'restservices/clds/v2/acm/postToscaInstanceProperties', {
diff --git a/gui-clamp/ui-react/src/components/dialogs/ACM/InstancePropertiesModal.js b/gui-clamp/ui-react/src/components/dialogs/ACM/InstancePropertiesModal.js
index 8d0023b..2dc2cb3 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ACM/InstancePropertiesModal.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ACM/InstancePropertiesModal.js
@@ -25,6 +25,8 @@ import ACMService from "../../../api/ACMService";
 import Alert from "react-bootstrap/Alert";
 import * as PropTypes from "prop-types";
 import InstantiationUtils from "./utils/InstantiationUtils";
+import Row from "react-bootstrap/Row";
+import Form from "react-bootstrap/Form";
 
 const ModalStyled = styled(Modal)`
   @media (min-width: 800px) {
@@ -66,6 +68,8 @@ const InstancePropertiesModal = (props) => {
   const [instanceName, setInstanceName] = useState('')
 
   useEffect(async () => {
+    setJsonEditor(null);
+
     const toscaTemplateResponse = await ACMService.getToscaTemplate(templateName, templateVersion)
         .catch(error => error.message);
 
@@ -100,27 +104,44 @@ const InstancePropertiesModal = (props) => {
     props.history.push('/');
   }
 
+  const handleInstanceName = (event) => {
+    console.log('handleInstanceName called');
+
+    setInstanceName(event.target.value);
+  }
+
   const handleSave = async () => {
     console.log("handleSave called");
+    if (instanceName !== '' || instanceName.length > 0) {
 
-    setInstanceName(instanceName);
+      console.log("instanceName to be saved is: " + instanceName);
 
-    console.log("instanceName to be saved is: " + instanceName);
+      if (jsonEditor != null) {
+        setToscaFullTemplate(InstantiationUtils.updateTemplate(instanceName, jsonEditor.getValue(), toscaFullTemplate));
+      }
 
-    if (jsonEditor != null) {
-      setToscaFullTemplate(InstantiationUtils.updateTemplate(jsonEditor.getValue(), toscaFullTemplate));
-    }
+      const response = await ACMService.createInstanceProperties(toscaFullTemplate)
+          .catch(error => error.message);
 
-    const response = await ACMService.createInstanceProperties(instanceName, toscaFullTemplate)
-      .catch(error => error.message);
-
-    if (response.ok) {
-      successAlert();
+      if (response.ok) {
+        successAlert();
+      } else {
+        await errorAlert(response);
+      }
     } else {
-      await errorAlert(response);
+      await warningAlert();
     }
   }
 
+  const warningAlert = async () => {
+    console.log("warningAlert called");
+    setAlertMessage(<Alert variant="warning">
+      <Alert.Heading>Instantiation Properties Warning</Alert.Heading>
+      <p>Instance name cannot be empty</p>
+      <hr/>
+    </Alert>);
+  }
+
   const successAlert = () => {
     console.log("successAlert called");
     setAlertMessage(<Alert variant="success">
@@ -152,6 +173,13 @@ const InstancePropertiesModal = (props) => {
       </Modal.Header>
       <div style={ { padding: '5px 5px 0 5px' } }>
         <Modal.Body>
+          <Form.Group as={ Row } controlId="formPlaintextEmail">
+            <Form.Label column sm="2">Instance Name:</Form.Label>
+            <input sm="5" type="text" style={ { width: '50%' } }
+                   value={ instanceName }
+                   onChange={ handleInstanceName }
+            />
+          </Form.Group>
           <div id="editor"/>
           <AlertStyled show={ !serviceTemplateResponseOk }
                        variant="danger">Can't get service template:<br/>{ JSON.stringify(toscaFullTemplate, null, 2) }</AlertStyled>
diff --git a/gui-clamp/ui-react/src/components/dialogs/ACM/InstantiationManagementModal.js b/gui-clamp/ui-react/src/components/dialogs/ACM/InstantiationManagementModal.js
index 78c2685..4b97748 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ACM/InstantiationManagementModal.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ACM/InstantiationManagementModal.js
@@ -56,8 +56,6 @@ const InstantiationManagementModal = (props) => {
 
     const instantiationListJson = await response.json();
 
-    console.log(instantiationListJson);
-
     const parsedInstantiationList = InstantiationUtils.parseInstantiationList(instantiationListJson['automationCompositionList']);
 
     setInstantiationList(parsedInstantiationList);
@@ -74,8 +72,6 @@ const InstantiationManagementModal = (props) => {
   const deleteInstantiationHandler = async (index, instantiation) => {
     console.log("deleteInstantiationHandler called");
 
-    console.log(instantiation);
-
     if (instantiation.disableDelete) {
       return;
     }
diff --git a/gui-clamp/ui-react/src/components/dialogs/ACM/__snapshots__/InstancePropertiesModal.test.js.snap b/gui-clamp/ui-react/src/components/dialogs/ACM/__snapshots__/InstancePropertiesModal.test.js.snap
index d655b08..a4fea2a 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ACM/__snapshots__/InstancePropertiesModal.test.js.snap
+++ b/gui-clamp/ui-react/src/components/dialogs/ACM/__snapshots__/InstancePropertiesModal.test.js.snap
@@ -24,6 +24,37 @@ exports[`Verify InstancePropertiesModal renders correctly 1`] = `
     }
   >
     <ModalBody>
+      <FormGroup
+        as={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "defaultProps": Object {
+              "noGutters": false,
+            },
+            "render": [Function],
+          }
+        }
+        controlId="formPlaintextEmail"
+      >
+        <FormLabel
+          column={true}
+          sm="2"
+          srOnly={false}
+        >
+          Instance Name:
+        </FormLabel>
+        <input
+          onChange={[Function]}
+          sm="5"
+          style={
+            Object {
+              "width": "50%",
+            }
+          }
+          type="text"
+          value=""
+        />
+      </FormGroup>
       <div
         id="editor"
       />
diff --git a/gui-clamp/ui-react/src/components/dialogs/ACM/utils/InstantiationUtils.js b/gui-clamp/ui-react/src/components/dialogs/ACM/utils/InstantiationUtils.js
index aaaa1bd..f430b32 100644
--- a/gui-clamp/ui-react/src/components/dialogs/ACM/utils/InstantiationUtils.js
+++ b/gui-clamp/ui-react/src/components/dialogs/ACM/utils/InstantiationUtils.js
@@ -24,7 +24,6 @@ import { JSONEditor } from "@json-editor/json-editor";
 const InstantiationUtils = {
 
   parseInstantiationList: (acmList) => {
-    console.log(acmList);
     const parsedAcmList = [];
 
     acmList.map((instance, index) => {
@@ -156,7 +155,7 @@ const InstantiationUtils = {
       });
   },
 
-  updateTemplate: (jsonEditorValues, fullTemplate) => {
+  updateTemplate: (instanceName, jsonEditorValues, fullTemplate) => {
     const nodeTemplates = fullTemplate.topology_template.node_templates;
     const instanceDataProperties = Object.entries(jsonEditorValues);
 
@@ -168,6 +167,7 @@ const InstantiationUtils = {
     });
 
     fullTemplate.topology_template.node_templates = nodeTemplates;
+    fullTemplate.name = instanceName;
 
     return fullTemplate;
   }