1 files changed, 85 insertions, 80 deletions

diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js
index 9cd3d4172..8093b7e4e 100644
--- a/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js
+++ b/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js
@@ -27,102 +27,107 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import styled from 'styled-components';
 import Alert from 'react-bootstrap/Alert';
-import { Input, InputLabel, Button , SvgIcon} from "@material-ui/core";
+import { Input, InputLabel, Button, SvgIcon } from "@material-ui/core";
 import PublishIcon from '@material-ui/icons/Publish';
 import PolicyService from '../../../api/PolicyService';
 
 const ModalStyled = styled(Modal)`
-    background-color: transparent;
+  background-color: transparent;
 `
 
 const StyledMessagesDiv = styled.div`
-    overflow: auto;
-    max-height: 300px;
+  overflow: auto;
+  max-height: 300px;
 `
 
 
 export default class PolicyToscaFileSelector extends React.Component {
 
-    state = {
-        show: this.props.show,
-        alertMessages: [],
-    }
-    constructor(props, context) {
-        super(props, context);
-        this.handleClose = this.handleClose.bind(this);
-        this.onFileChange = this.onFileChange.bind(this);
-    }
+  state = {
+    show: this.props.show,
+    alertMessages: [],
+  }
 
-    componentDidUpdate(prevProps) {
-        if (this.props.show !== this.state.show) {
-            this.setState({show: this.props.show});
-        }
-    }
+  constructor(props, context) {
+    super(props, context);
+    this.handleClose = this.handleClose.bind(this);
+    this.onFileChange = this.onFileChange.bind(this);
+  }
 
-    handleClose() {
-        this.props.disableFunction();
-        this.setState({alertMessages:[]});
+  componentDidUpdate(prevProps) {
+    if (this.props.show !== this.state.show) {
+      this.setState({ show: this.props.show });
     }
+  }
 
-    onFileChange(target) {
-        this.setState({alertMessages:[]});
-        target.currentTarget.files.forEach(file => {
-            const fileReader = new FileReader();
-            fileReader.readAsDataURL(file);
-            fileReader.onload = (content) => {
-                PolicyService.sendNewPolicyModel(atob(content.target.result.split(",")[1])).then(respModelCreate => {
-                      if (typeof(respModelCreate) === "undefined") {
-                        //it indicates a failure
-                        this.setState(state => {
-                            return {
-                                alertMessages: [...state.alertMessages,(<Alert variant="danger"><Alert.Heading>{file.name}</Alert.Heading><p>Policy Tosca Model Creation Failure</p><hr/><p>Type: {file.type}</p><p>Size: {file.size}</p></Alert>)]
-                            };
-                        });
-                      } else {
-                        this.props.toscaTableUpdateFunction();
-                        this.setState(state => {
-                            return {
-                                alertMessages: [...state.alertMessages,(<Alert variant="success"><Alert.Heading>{file.name}</Alert.Heading><p>Policy Tosca Model Created Successfully</p><hr/><p>Type: {file.type}</p><p>Size: {file.size}</p></Alert>)]
-                            };
-                        });
-                      }
-                });
-            };
+  handleClose() {
+    this.props.disableFunction();
+    this.setState({ alertMessages: [] });
+  }
+
+  onFileChange(target) {
+    this.setState({ alertMessages: [] });
+    target.currentTarget.files.forEach(file => {
+      const fileReader = new FileReader();
+      fileReader.readAsDataURL(file);
+      fileReader.onload = (content) => {
+        PolicyService.sendNewPolicyModel(atob(content.target.result.split(",")[1])).then(respModelCreate => {
+          if (typeof (respModelCreate) === "undefined") {
+            //it indicates a failure
+            this.setState(state => {
+              return {
+                alertMessages: [...state.alertMessages, (<Alert variant="danger"><Alert.Heading>{ file.name }</Alert.Heading><p>Policy Tosca Model Creation Failure</p>
+                  <hr/>
+                  <p>Type: { file.type }</p><p>Size: { file.size }</p></Alert>)]
+              };
+            });
+          } else {
+            this.props.toscaTableUpdateFunction();
+            this.setState(state => {
+              return {
+                alertMessages: [...state.alertMessages, (<Alert variant="success"><Alert.Heading>{ file.name }</Alert.Heading><p>Policy Tosca Model Created Successfully</p>
+                  <hr/>
+                  <p>Type: { file.type }</p><p>Size: { file.size }</p></Alert>)]
+              };
+            });
+          }
         });
+      };
+    });
 
-    }
+  }
 
-    render() {
-        return (
-            <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
-                <Modal.Header closeButton>
-                    <Modal.Title>Create New Policy Tosca Model</Modal.Title>
-                </Modal.Header>
-                <Modal.Body>
-                    <Form.Group as={Row} controlId="formPlaintextEmail">
-                        <Col sm="10">
-                           <input type="file" multiple accept=".yaml,.yml" id="fileUploadButton" style={{ display: 'none' }} onChange={this.onFileChange} />
-                           <label htmlFor={'fileUploadButton'}>
-                             <Button color="primary"  variant="contained" component="span"
-                               startIcon={
-                                 <SvgIcon fontSize="small">
-                                   <PublishIcon />
-                                 </SvgIcon>
-                               }>
-                               Upload Files
-                             </Button>
-                             <p>(Only YAML files are supported)</p>
-                           </label>
-                           <StyledMessagesDiv>
-                                {this.state.alertMessages}
-                           </StyledMessagesDiv>
-                        </Col>
-                    </Form.Group>
-                </Modal.Body>
-                <Modal.Footer>
-                    <Button variant="secondary" onClick={this.handleClose}>Close</Button>
-                </Modal.Footer>
-            </ModalStyled>
-        );
-    }
-}
\ No newline at end of file
+  render() {
+    return (
+      <ModalStyled size="lg" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
+        <Modal.Header closeButton>
+          <Modal.Title>Create New Policy Tosca Model</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form.Group as={ Row } controlId="formPlaintextEmail">
+            <Col sm="10">
+              <input type="file" multiple accept=".yaml,.yml" id="fileUploadButton" style={ { display: 'none' } } onChange={ this.onFileChange }/>
+              <label htmlFor={ 'fileUploadButton' }>
+                <Button color="primary" variant="contained" component="span"
+                        startIcon={
+                          <SvgIcon fontSize="small">
+                            <PublishIcon/>
+                          </SvgIcon>
+                        }>
+                  Upload Files
+                </Button>
+                <p>(Only YAML files are supported)</p>
+              </label>
+              <StyledMessagesDiv>
+                { this.state.alertMessages }
+              </StyledMessagesDiv>
+            </Col>
+          </Form.Group>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={ this.handleClose }>Close</Button>
+        </Modal.Footer>
+      </ModalStyled>
+    );
+  }
+}