Align ui-react file in policy-clamp and policy-gui

When the ui-react code was transferred to policy-gui, the white space
was cleaned up and reformatted. This makes it difficult to track the
real functional changes if any between ui-react in policy-clamp and
policy-gui.

This review brings the white space changes into ui-react in policy-clamp
to make file comparisons easier.

Issue-ID: POLICY-3358
Change-Id: Ic303e71b341e5c0f7ca0de0ed4c4962ebf2f988a
Signed-off-by: liamfallon <liam.fallon@est.tech>

1 files changed, 140 insertions, 137 deletions

diff --git a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
index 5663360a0..690dcbbdf 100644
--- a/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
+++ b/runtime/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
@@ -34,157 +34,160 @@ import LoopCache from '../../../api/LoopCache';
 import SvgGenerator from '../../loop_viewer/svg/SvgGenerator';
 
 const ModalStyled = styled(Modal)`
-	background-color: transparent;
+  background-color: transparent;
 `
 
 const ErrMsgStyled = styled.div`
-	color: red;
+  color: red;
 `
 
 export default class CreateLoopModal extends React.Component {
-	constructor(props, context) {
-		super(props, context);
+  constructor(props, context) {
+    super(props, context);
 
-		this.getAllLoopTemplates = this.getAllLoopTemplates.bind(this);
-		this.handleCreate = this.handleCreate.bind(this);
-		this.handleModelName = this.handleModelName.bind(this);
-		this.handleClose = this.handleClose.bind(this);
-		this.handleDropDownListChange = this.handleDropDownListChange.bind(this);
-		this.renderSvg = this.renderSvg.bind(this);
-		this.state = {
-			show: true,
-			chosenTemplateName: '',
-			modelInputErrMsg: '',
-			modelName: '',
-			templateNames: [],
-			fakeLoopCacheWithTemplate: new LoopCache({})
-		};
-	}
+    this.getAllLoopTemplates = this.getAllLoopTemplates.bind(this);
+    this.handleCreate = this.handleCreate.bind(this);
+    this.handleModelName = this.handleModelName.bind(this);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleDropDownListChange = this.handleDropDownListChange.bind(this);
+    this.renderSvg = this.renderSvg.bind(this);
+    this.state = {
+      show: true,
+      chosenTemplateName: '',
+      modelInputErrMsg: '',
+      modelName: '',
+      templateNames: [],
+      fakeLoopCacheWithTemplate: new LoopCache({})
+    };
+  }
 
-	async componentDidMount() {
-		await this.getAllLoopTemplates();
-		await this.getModelNames();
-	}
+  async componentDidMount() {
+    await this.getAllLoopTemplates();
+    await this.getModelNames();
+  }
 
-	handleClose() {
-		this.setState({ show: false });
-		this.props.history.push('/');
-	}
+  handleClose() {
+    this.setState({ show: false });
+    this.props.history.push('/');
+  }
 
-	handleDropDownListChange(e) {
-	    if (typeof e.value !== "undefined") {
-	        this.setState({
-	        fakeLoopCacheWithTemplate:
-                new LoopCache({
-                    "loopTemplate":e.templateObject,
-                    "name": "fakeLoop"
-                }),
-                chosenTemplateName: e.value
-	        })
-		} else {
-          	this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
-        }
-	}
+  handleDropDownListChange(e) {
+    if (typeof e.value !== "undefined") {
+      this.setState({
+        fakeLoopCacheWithTemplate:
+          new LoopCache({
+            "loopTemplate": e.templateObject,
+            "name": "fakeLoop"
+          }),
+        chosenTemplateName: e.value
+      })
+    } else {
+      this.setState({ fakeLoopCacheWithTemplate: new LoopCache({}) })
+    }
+  }
 
-	getAllLoopTemplates() {
-		TemplateService.getAllLoopTemplates().then(templatesData => {
-		    const templateOptions = templatesData.map((templateData) => { return { label: templateData.name, value: templateData.name, templateObject: templateData } });
-            this.setState({
-                templateNames: templateOptions })
-		});
-	}
+  getAllLoopTemplates() {
+    TemplateService.getAllLoopTemplates().then(templatesData => {
+      const templateOptions = templatesData.map((templateData) => {
+        return { label: templateData.name, value: templateData.name, templateObject: templateData }
+      });
+      this.setState({
+        templateNames: templateOptions
+      })
+    });
+  }
 
-	getModelNames() {
-		TemplateService.getLoopNames().then(loopNames => {
-			if (!loopNames) {
-				loopNames = [];
-			}
-			// Remove LOOP_ prefix
-			let trimmedLoopNames = loopNames.map(str => str.replace('LOOP_', ''));
-			this.setState({ modelNames: trimmedLoopNames });
-		});
-	}
+  getModelNames() {
+    TemplateService.getLoopNames().then(loopNames => {
+      if (!loopNames) {
+        loopNames = [];
+      }
+      // Remove LOOP_ prefix
+      let trimmedLoopNames = loopNames.map(str => str.replace('LOOP_', ''));
+      this.setState({ modelNames: trimmedLoopNames });
+    });
+  }
 
-	handleCreate() {
-		if (!this.state.modelName) {
-			alert("A model name is required");
-			return;
-		}
-		console.debug("Create Model " + this.state.modelName + ", Template " + this.state.chosenTemplateName + " is chosen");
-		this.setState({ show: false });
-		LoopService.createLoop("LOOP_" + this.state.modelName, this.state.chosenTemplateName).then(text => {
-			console.debug("CreateLoop response received: ", text);
-			try {
-				this.props.history.push('/');
-				this.props.loadLoopFunction("LOOP_" + this.state.modelName);
-			} catch(err) {
-				alert(text);
-				this.props.history.push('/');
-			}
-		})
-		.catch(error => {
-			console.debug("Create Loop failed");
-		});
-	}
+  handleCreate() {
+    if (!this.state.modelName) {
+      alert("A model name is required");
+      return;
+    }
+    console.debug("Create Model " + this.state.modelName + ", Template " + this.state.chosenTemplateName + " is chosen");
+    this.setState({ show: false });
+    LoopService.createLoop("LOOP_" + this.state.modelName, this.state.chosenTemplateName).then(text => {
+      console.debug("CreateLoop response received: ", text);
+      try {
+        this.props.history.push('/');
+        this.props.loadLoopFunction("LOOP_" + this.state.modelName);
+      } catch (err) {
+        alert(text);
+        this.props.history.push('/');
+      }
+    })
+      .catch(error => {
+        console.debug("Create Loop failed");
+      });
+  }
 
-	handleModelName(event) {
-		if (this.state.modelNames.includes(event.target.value)) {
-			this.setState({
-				modelInputErrMsg: 'A model named "' + event.target.value + '" already exists. Please pick another name.',
-				modelName: event.target.value
-			});
-			return;
-		} else {
-			this.setState({
-				modelInputErrMsg: '',
-				modelName: event.target.value
-			});
-		}
-	}
+  handleModelName(event) {
+    if (this.state.modelNames.includes(event.target.value)) {
+      this.setState({
+        modelInputErrMsg: 'A model named "' + event.target.value + '" already exists. Please pick another name.',
+        modelName: event.target.value
+      });
+      return;
+    } else {
+      this.setState({
+        modelInputErrMsg: '',
+        modelName: event.target.value
+      });
+    }
+  }
 
-	renderSvg() {
-		return (
-			<SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/>
-		);
-	}
+  renderSvg() {
+    return (
+      <SvgGenerator loopCache={ this.state.fakeLoopCacheWithTemplate } clickable={ false } generatedFrom={ SvgGenerator.GENERATED_FROM_TEMPLATE }/>
+    );
+  }
 
-	render() {
-		return (
-			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
-				<Modal.Header closeButton>
-					<Modal.Title>Create Model</Modal.Title>
-				</Modal.Header>
-				<Modal.Body>
-					<Form.Group as={Row} controlId="formPlaintextEmail">
-						<Form.Label column sm="2">Template Name:</Form.Label>
-						<Col sm="10">
-							<Select onChange={this.handleDropDownListChange} options={this.state.templateNames} />
-						</Col>
-					</Form.Group>
-                    <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
-                    <Form.Label column sm="2">Model Preview:</Form.Label>
-                        <Col sm="10">
-                            {this.renderSvg()}
-                        </Col>
-                    </Form.Group>
-					<Form.Group as={Row} controlId="formPlaintextEmail">
-						<Form.Label column sm="2">Model Name:</Form.Label>
-						<input sm="5" type="text" style={{width: '50%', marginLeft: '1em' }}
-							value={this.state.modelName}
-							onChange={this.handleModelName}
-						/>
-						<span sm="5"/>
-					</Form.Group>
-					<Form.Group as={Row} controlId="formPlaintextEmail">
-						<Form.Label column sm="2"> </Form.Label>
-						<ErrMsgStyled>{this.state.modelInputErrMsg}</ErrMsgStyled>
-					</Form.Group>
-				</Modal.Body>
-				<Modal.Footer>
-					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
-					<Button variant="primary" type="submit" onClick={this.handleCreate}>Create</Button>
-				</Modal.Footer>
-			</ModalStyled>
-		);
-	}
+  render() {
+    return (
+      <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
+        <Modal.Header closeButton>
+          <Modal.Title>Create Model</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form.Group as={ Row } controlId="formPlaintextEmail">
+            <Form.Label column sm="2">Template Name:</Form.Label>
+            <Col sm="10">
+              <Select onChange={ this.handleDropDownListChange } options={ this.state.templateNames }/>
+            </Col>
+          </Form.Group>
+          <Form.Group as={ Row } style={ { alignItems: 'center' } } controlId="formSvgPreview">
+            <Form.Label column sm="2">Model Preview:</Form.Label>
+            <Col sm="10">
+              { this.renderSvg() }
+            </Col>
+          </Form.Group>
+          <Form.Group as={ Row } controlId="formPlaintextEmail">
+            <Form.Label column sm="2">Model Name:</Form.Label>
+            <input sm="5" type="text" style={ { width: '50%', marginLeft: '1em' } }
+                   value={ this.state.modelName }
+                   onChange={ this.handleModelName }
+            />
+            <span sm="5"/>
+          </Form.Group>
+          <Form.Group as={ Row } controlId="formPlaintextEmail">
+            <Form.Label column sm="2"> </Form.Label>
+            <ErrMsgStyled>{ this.state.modelInputErrMsg }</ErrMsgStyled>
+          </Form.Group>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" type="null" onClick={ this.handleClose }>Cancel</Button>
+          <Button variant="primary" type="submit" onClick={ this.handleCreate }>Create</Button>
+        </Modal.Footer>
+      </ModalStyled>
+    );
+  }
 }