Fix loop prop window

Fix the loop Properties windows

Issue-ID: CLAMP-447
Change-Id: I0d4002267feab57457067df345f6b56542926e35
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

3 files changed, 56 insertions, 57 deletions

diff --git a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
index 8178bf47..b3b7383e 100644
--- a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
+++ b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
@@ -38,7 +38,7 @@ export default class ConfigurationPolicyModal extends React.Component {
 		show: true,
 		loopCache: this.props.loopCache,
 		jsonEditor: null,
-		componentName: "",
+		componentName: this.props.match.params.componentName,
 	};
 
 	constructor(props, context) {
@@ -46,7 +46,7 @@ export default class ConfigurationPolicyModal extends React.Component {
 		this.handleClose = this.handleClose.bind(this);
 		this.handleSave = this.handleSave.bind(this);
 		this.renderJsonEditor = this.renderJsonEditor.bind(this);
-		this.state.componentName = props.match.params.componentName;
+		//this.state.componentName = props.match.params.componentName;
 	}
 
 	handleSave() {
diff --git a/ui-react/src/components/dialogs/LoopProperties.js b/ui-react/src/components/dialogs/LoopProperties.js
index 2cde8d46..1c0d015a 100644
--- a/ui-react/src/components/dialogs/LoopProperties.js
+++ b/ui-react/src/components/dialogs/LoopProperties.js
@@ -33,78 +33,77 @@ const ModalStyled = styled(Modal)`
 
 export default class LoopProperties extends React.Component {
 
-	formProps = {dcaeDeployParameters: {
-			"location_id": "",
-			"service_id": "",
-			"policy_id": "TCA_h2NMX_v1_0_ResourceInstanceName1_tca"
-	}};
+	state = {
+		show: true,
+		loopCache: this.props.loopCache,
+	};
 
 	constructor(props, context) {
 		super(props, context);
 
 		this.handleClose = this.handleClose.bind(this);
-		this.handleChange = this.handleChange.bind(this);
-		this.saveProperties =  this.saveProperties.bind(this);
-		this.initialValues = this.initialValues.bind(this);
-		this.state = {
-			show: true,
-			loopName: 'LOOP_h2NMX_v1_0_ResourceInstanceName1_tca',
-			form: this.formProps
-		};
-
+		this.handleSave = this.handleSave.bind(this);
+		this.renderDcaeParameters = this.renderDcaeParameters.bind(this);
+		this.renderAllParameters = this.renderAllParameters.bind(this);
+		this.getDcaeParameters = this.getDcaeParameters.bind(this);
 	}
-	initialValues() {
-			const updatedForm = this.state.form;
-			Object.keys(updatedForm).forEach((key) => {
-			if (key === 'dcaeDeployParameters') {
-				updatedForm[key] = JSON.stringify(this.state.form[key]);
-			} else {
-				updatedForm[key] = this.state.form[key];
-			}
-			this.setState({ form: updatedForm });
+
+	componentWillReceiveProps(newProps) {
+		this.setState({
+			loopCache: newProps.loopCache,
 		});
 	}
+
 	handleClose() {
-			this.props.history.push('/');
+		this.props.history.push('/');
 	}
-	handleChange(e) {
-			const formUpdated =  this.state.form;
-			formUpdated[e.target.name] = e.target.value;
-			this.setState({ form: formUpdated });
-   };
-	saveProperties(event) {
+
+	handleSave(event) {
 		// translate the deploymentParameter into jsonFormat at submit time
-		const updatedForm = this.state.form;
-		Object.keys(updatedForm).forEach((key) => {
-			if (key === 'dcaeDeployParameters') {
-				try {
-				  let value = JSON.parse(updatedForm[key]);
-					updatedForm[key] = value;
-					// save Properties
-					this.setState( {form: updatedForm} );
-					LoopService.updateGlobalProperties(this.state.loopName, this.state.form);
-					this.props.history.push('/');
-				} catch (error) {
-				  alert("Deployment Parameters is not in good Json format. Please correct it.");
-				}
-			}
-		});
+
 	}
+
+	saveAllProperties() {
+
+	}
+
+	renderAllParameters() {
+		return (<Modal.Body>
+			<Form>
+				{this.renderDcaeParameters()}
+			</Form>
+		</Modal.Body>
+		);
+	}
+
+	getDcaeParameters() {
+		if (typeof (this.state.loopCache.getGlobalProperties()) !== "undefined") {
+			return JSON.stringify(this.state.loopCache.getGlobalProperties()["dcaeDeployParameters"]);
+		} else {
+			return "";
+		}
+		
+	}
+
+	renderDcaeParameters() {
+		return (
+			<Form.Group >
+				<Form.Label>Deploy Parameters</Form.Label>
+				<Form.Control as="textarea" rows="3" name="dcaeDeployParameters">{this.getDcaeParameters()}</Form.Control>
+			</Form.Group>
+		);
+	}
+
 	render() {
 		return (
-			<ModalStyled size="lg"  show={this.state.show} onHide={this.handleClose} onEntered={this.initialValues}>
+			<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} >
 				<Modal.Header closeButton>
 					<Modal.Title>Model Properties</Modal.Title>
 				</Modal.Header>
-				<Modal.Body>
-					<Form.Group controlId="exampleForm.ControlTextarea1">
-					<Form.Label>Deploy Parameters</Form.Label>
-					<Form.Control as="textarea" rows="3" name="dcaeDeployParameters" onChange={this.handleChange} defaultValue={this.state.form["dcaeDeployParameters"]}/>
-					</Form.Group>
-				</Modal.Body>
+					{this.renderAllParameters()}
 				<Modal.Footer>
-					<Button variant="secondary" type="null" onClick={this.handleClose}>Cacel</Button>
-					<Button variant="primary" type="submit" onClick={this.saveProperties}>Save</Button>
+					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
+					<Button variant="primary" type="submit" onClick={this.handleSave}>Save Changes</Button>
 				</Modal.Footer>
 			</ModalStyled>
 		);
diff --git a/ui-react/src/components/dialogs/UserInfo.js b/ui-react/src/components/dialogs/UserInfo.js
index a8ef717b..b8d68b84 100644
--- a/ui-react/src/components/dialogs/UserInfo.js
+++ b/ui-react/src/components/dialogs/UserInfo.js
@@ -153,7 +153,7 @@ export default class UserInfo extends React.Component {
 					</Form.Group>
 				</Modal.Body>
 				<Modal.Footer>
-					<Button variant="secondary" type="null" onClick={this.handleClose}>Cacel</Button>
+					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
 				</Modal.Footer>
 			</ModalStyled>
 		);