Minor UI fixes for dialogues and Tosca upload feature

Issue-ID: CLAMP-587
Change-Id: I683b62fbd0b15ab5db18c7e1e941ff8cb58cb0f3
Signed-off-by: Ted Humphrey <Thomas.Humphrey@att.com>

5 files changed, 19 insertions, 9 deletions

diff --git a/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js b/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js
index ec080589f..fa95ca977 100644
--- a/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js
+++ b/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js
@@ -86,14 +86,14 @@ export default class UploadToscaPolicyModal extends React.Component {
 
 	render() {
 		return (
-			<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static">
+			<ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static"  keyboard={false} >
 				<Modal.Header closeButton>
 					<Modal.Title>Upload Tosca Model</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
 					<Form.Group as={Row} controlId="formPlaintextEmail">
 						<Col sm="10">
-						<input style={{display: 'none'}} type="file" name="file" accept=".yaml" onChange={this.fileSelectedHandler}
+						<input style={{display: 'none'}} type="file" name="file" accept=".yaml,.yml" onChange={this.fileSelectedHandler}
 							ref={fileInput => this.fileInput = fileInput}/>
 						<button onClick={() => this.fileInput.click()}>Pick Tosca File</button>
 							<Alert variant="secondary">
diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
index c5a91ea26..7cf02f711 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
@@ -38,16 +38,24 @@ import MaterialTable from "material-table";
 const ModalStyled = styled(Modal)`
 	background-color: transparent;
 `
-const LoopViewSvgDivStyled = styled.div`
-	overflow: hidden;
+const LoopViewSvgDivStyled = styled.svg`
+	overflow-x: scroll;
 	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
 	border-color: ${props => (props.theme.loopViewerHeaderColor)};
-	margin-left: auto;
+	margin-top: 3em;
+	margin-left: 2em;
 	margin-right:auto;
 	text-align: center;
-	margin-top: 20px;
+	height: 100%;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	
 `
 const SvgContainerDivStyled = styled.div`
+	display: flex;
+	align-items: center;
 	border: 1px solid;
 `
 
@@ -133,7 +141,7 @@ export default class ViewLoopTemplatesModal extends React.Component {
 
 	render() {
     return (
-    		<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static">
+    		<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static"  keyboard={false}>
     			<Modal.Header closeButton>
     			</Modal.Header>
     			<Modal.Body>
diff --git a/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js
index 71f371a6d..d49232f2d 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js
@@ -139,7 +139,7 @@ export default class ViewToscalPolicyModal extends React.Component {
 
 	render() {
 		return (
-			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static">
+			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}>
 				<Modal.Header closeButton>
 				</Modal.Header>
 				<Modal.Body>
diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
index 2926e066e..3f6dc9482 100644
--- a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewLoopTemplatesModal.test.js.snap
@@ -3,6 +3,7 @@
 exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1`] = `
 <Styled(Bootstrap(Modal))
   backdrop="static"
+  keyboard={false}
   onHide={[Function]}
   show={true}
   size="xl"
@@ -142,7 +143,7 @@ exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1
       title="View Blueprint MicroService Templates"
     />
     <styled.div>
-      <styled.div
+      <styled.svg
         dangerouslySetInnerHTML={
           Object {
             "__html": "Please select a loop template to display it",
diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap
index babe59749..5f19a9b7d 100644
--- a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap
@@ -3,6 +3,7 @@
 exports[`Verify ViewToscaPolicyModal Test the tosca model view render method 1`] = `
 <Styled(Bootstrap(Modal))
   backdrop="static"
+  keyboard={false}
   onHide={[Function]}
   show={true}
   size="xl"