From: Ted Humphrey <Thomas.Humphrey@att.com>
Date: Thu, 16 Apr 2020 17:36:17 +0000 (+0000)
Subject: Minor UI fixes for dialogues and Tosca upload feature
X-Git-Tag: 5.0.4~3
X-Git-Url: https://gerrit.onap.org/r/gitweb?p=clamp.git;a=commitdiff_plain;h=df68db271f23561671a59b1678c39b8ee54cd8e4

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>
---

diff --git a/ui-react-lib/libIndex.js b/ui-react-lib/libIndex.js
index fae47e7f..da98df43 100755
--- a/ui-react-lib/libIndex.js
+++ b/ui-react-lib/libIndex.js
@@ -33,13 +33,19 @@ export { default as LoopService } from './src/api/LoopService';
 export { default as LoopStatus } from './src/components/loop_viewer/status/LoopStatus';
 export { default as LoopSvg } from './src/components/loop_viewer/svg/LoopSvg';
 export { default as LoopUI } from './src/LoopUI';
+export { default as ManageDictionaries } from './src/components/dialogs/ManageDictionaries/ManageDictionaries';
 export { default as MenuBar } from './src/components/menu/MenuBar';
+export { default as ModifyLoopModal } from './src/components/dialogs/Loop/ModifyLoopModal';
 export { default as NotFound } from './src/NotFound';
 export { default as OpenLoopModal } from './src/components/dialogs/Loop/OpenLoopModal';
 export { default as CreateLoopModal } from './src/components/dialogs/Loop/CreateLoopModal';
 export { default as OperationalPolicyModal } from './src/components/dialogs/OperationalPolicy/OperationalPolicyModal';
 export { default as PerformActions } from './src/components/dialogs/PerformActions';
+export { default as PolicyToscaService } from './src/api/PolicyToscaService';
 export { default as RefreshStatus } from './src/components/dialogs/RefreshStatus';
+export { default as TemplateService } from './src/api/TemplateService';
 export { default as UserInfoModal } from './src/components/dialogs/UserInfoModal';
 export { default as UserService } from './src/api/UserService';
+export { default as UploadToscaPolicyModal } from './src/components/dialogs/Tosca/UploadToscaPolicyModal';
+export { default as ViewLoopTemplatesModal } from './src/components/dialogs/Tosca/ViewLoopTemplatesModal';
 export { default as ViewToscaPolicyModal } from './src/components/dialogs/Tosca/ViewToscaPolicyModal';
diff --git a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
index da65ac9f..3ff1ebec 100644
--- a/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
+++ b/ui-react/src/components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal.js
@@ -104,7 +104,7 @@ export default class ConfigurationPolicyModal extends React.Component {
 
 	render() {
 		return (
-			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
 				<Modal.Header closeButton>
 					<Modal.Title>Configuration policies</Modal.Title>
 				</Modal.Header>
diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
index 321304a6..e98b5956 100644
--- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
@@ -34,13 +34,20 @@ import TemplateService from '../../../api/TemplateService';
 const ModalStyled = styled(Modal)`
 	background-color: transparent;
 `
-const LoopViewSvgDivStyled = styled.div`
-	overflow: hidden;
+const LoopViewSvgDivStyled = styled.svg`
+	display: flex;
+	flex-direction: row;
+	overflow-x: scroll;
 	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
 	border-color: ${props => (props.theme.loopViewerHeaderColor)};
+	margin-top: 3em;
 	margin-left: auto;
 	margin-right:auto;
+	margin-bottom: -1em;
 	text-align: center;
+	align-items: center;
+	height: 100%;
+	width: 100%;
 `
 
 export default class CreateLoopModal extends React.Component {
@@ -118,24 +125,28 @@ export default class CreateLoopModal 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.Title>Create Model</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
 					<Form.Group as={Row} controlId="formPlaintextEmail">
-						<Form.Label column sm="2">Template Name</Form.Label>
+						<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 controlId="formPlaintextEmail">
-						<LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }} value={this.state.content} >
-						</LoopViewSvgDivStyled>
-					</Form.Group>
-					<Form.Group controlId="formPlaintextEmail">
+                                        <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
+                                                <Form.Label column sm="2">Model Preview:</Form.Label>
+                                                <Col sm="10">
+                                                        <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }}
+                                                                value={this.state.content} >
+                                                        </LoopViewSvgDivStyled>
+                                                </Col>
+                                        </Form.Group>
+					<Form.Group as={Row} controlId="formPlaintextEmail">
 						<Form.Label column sm="2">Model Name:</Form.Label>
-						<input type="text" style={{width: '50%'}}
+						<input type="text" style={{width: '50%', marginLeft: '1em' }}
 							value={this.state.modelName}
 							onChange={this.handleModelName}
 						/>
@@ -148,4 +159,4 @@ export default class CreateLoopModal extends React.Component {
 			</ModalStyled>
 		);
 	}
-}
\ No newline at end of file
+}
diff --git a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
index 853df1c8..2155977f 100644
--- a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
@@ -161,7 +161,7 @@ export default class DeployLoopModal 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>Deployment parameters</Modal.Title>
 						</Modal.Header>
diff --git a/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js b/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
index 97b78224..c0a2084f 100644
--- a/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
+++ b/ui-react/src/components/dialogs/Loop/LoopPropertiesModal.js
@@ -102,7 +102,7 @@ export default class LoopPropertiesModal 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>Model Properties</Modal.Title>
 				</Modal.Header>
diff --git a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
index 8886dbfd..8c674056 100644
--- a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
@@ -180,7 +180,7 @@ export default class ModifyLoopModal 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.Title>Modify Loop Operational Policies</Modal.Title>
 				</Modal.Header>
diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
index 15a71888..c0488344 100644
--- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js
@@ -37,13 +37,20 @@ const ModalStyled = styled(Modal)`
 const CheckBoxStyled = styled(FormCheck.Input)`
 	margin-left:3rem;
 `
-const LoopViewSvgDivStyled = styled.div`
-	overflow: hidden;
+const LoopViewSvgDivStyled = styled.svg`
+	overflow-x: scroll;
+	display: flex;
+	flex-direction: row;
 	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
 	border-color: ${props => (props.theme.loopViewerHeaderColor)};
+	margin-top: 2em;
 	margin-left: auto;
 	margin-right:auto;
+	margin-bottom: -3em;
 	text-align: center;
+	align-items: center;
+	height: 100%;
+	width: 100%;
 `
 
 export default class OpenLoopModal extends React.Component {
@@ -54,6 +61,7 @@ export default class OpenLoopModal extends React.Component {
 		this.handleOpen = this.handleOpen.bind(this);
 		this.handleClose = this.handleClose.bind(this);
 		this.handleDropdownListChange = this.handleDropdownListChange.bind(this);
+		this.showReadOnly = props.showReadOnly ? props.showReadOnly : true;
 		this.state = {
 			show: true,
 			chosenLoopName: '',
@@ -101,28 +109,34 @@ export default class OpenLoopModal 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.Title>Open Model</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
 					<Form.Group as={Row} controlId="formPlaintextEmail">
-						<Form.Label column sm="2">Model Name</Form.Label>
+						<Form.Label column sm="2">Model Name:</Form.Label>
 						<Col sm="10">
 							<Select onChange={this.handleDropdownListChange}
 							options={this.state.loopNames} />
 						</Col>
 					</Form.Group>
-					<Form.Group controlId="formPlaintextEmail">
-                         <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }}   value={this.state.content} >
-                         </LoopViewSvgDivStyled>
-                    </Form.Group>
-					<Form.Group controlId="formBasicChecbox">
-						<Form.Check>
-							<FormCheck.Label>Read Only</FormCheck.Label>
-							<CheckBoxStyled type="checkbox" />
-						</Form.Check>
+					<Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview">
+						<Form.Label column sm="2">Model Preview:</Form.Label>
+						<Col sm="10">
+                         				<LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.content }}
+								value={this.state.content} >
+							</LoopViewSvgDivStyled>
+						</Col>
 					</Form.Group>
+					{this.showReadOnly === true ?
+						<Form.Group as={Row} controlId="formBasicChecbox">
+							<Form.Check>
+								<FormCheck.Label>Read Only Mode:</FormCheck.Label>
+								<CheckBoxStyled style={{marginLeft: '3.5em'}} type="checkbox" />
+							</Form.Check>
+						</Form.Group>
+					: null}
 				</Modal.Body>
 				<Modal.Footer>
 					<Button variant="secondary" type="null" onClick={this.handleClose}>Cancel</Button>
diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
index c9acb9e1..8d0faa5f 100644
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
@@ -3,6 +3,7 @@
 exports[`Verify DeployLoopModal Test the render method 1`] = `
 <Styled(Bootstrap(Modal))
   backdrop="static"
+  keyboard={false}
   onHide={[Function]}
   show={true}
   size="lg"
diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap
index 0fde7a56..233c560a 100644
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/LoopPropertiesModal.test.js.snap
@@ -3,6 +3,7 @@
 exports[`Verify LoopPropertiesModal Test the render method 1`] = `
 <Styled(Bootstrap(Modal))
   backdrop="static"
+  keyboard={false}
   onHide={[Function]}
   show={true}
   size="lg"
diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
index 1c98195b..19685444 100644
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/OpenLoopModal.test.js.snap
@@ -3,6 +3,7 @@
 exports[`Verify OpenLoopModal Test the render method 1`] = `
 <Styled(Bootstrap(Modal))
   backdrop="static"
+  keyboard={false}
   onHide={[Function]}
   show={true}
   size="xl"
@@ -33,7 +34,7 @@ exports[`Verify OpenLoopModal Test the render method 1`] = `
         sm="2"
         srOnly={false}
       >
-        Model Name
+        Model Name:
       </FormLabel>
       <Col
         sm="10"
@@ -48,18 +49,52 @@ exports[`Verify OpenLoopModal Test the render method 1`] = `
       </Col>
     </FormGroup>
     <FormGroup
-      controlId="formPlaintextEmail"
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "noGutters": false,
+          },
+          "render": [Function],
+        }
+      }
+      controlId="formSvgPreview"
+      style={
+        Object {
+          "alignItems": "center",
+        }
+      }
     >
-      <styled.div
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "",
+      <FormLabel
+        column={true}
+        sm="2"
+        srOnly={false}
+      >
+        Model Preview:
+      </FormLabel>
+      <Col
+        sm="10"
+      >
+        <styled.svg
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "",
+            }
           }
-        }
-        value=""
-      />
+          value=""
+        />
+      </Col>
     </FormGroup>
     <FormGroup
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "noGutters": false,
+          },
+          "render": [Function],
+        }
+      }
       controlId="formBasicChecbox"
     >
       <FormCheck
@@ -71,9 +106,14 @@ exports[`Verify OpenLoopModal Test the render method 1`] = `
         type="checkbox"
       >
         <FormCheckLabel>
-          Read Only
+          Read Only Mode:
         </FormCheckLabel>
         <Styled(FormCheckInput)
+          style={
+            Object {
+              "marginLeft": "3.5em",
+            }
+          }
           type="checkbox"
         />
       </FormCheck>
diff --git a/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js b/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
index d4350364..2af1b7ce 100644
--- a/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
+++ b/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
@@ -376,7 +376,7 @@ export default class ManageDictionaries 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.Title>Manage Dictionaries</Modal.Title>
                 </Modal.Header>
diff --git a/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap b/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap
index a73513e4..71cc393b 100644
--- a/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap
+++ b/ui-react/src/components/dialogs/ManageDictionaries/__snapshots__/ManageDictionaries.test.js.snap
@@ -3,6 +3,7 @@
 exports[`Verify ManageDictionaries Test API Successful 1`] = `
 <Styled(Bootstrap(Modal))
   backdrop="static"
+  keyboard={false}
   onHide={[Function]}
   show={true}
   size="xl"
diff --git a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
index 149639cb..77dce165 100644
--- a/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
+++ b/ui-react/src/components/dialogs/OperationalPolicy/OperationalPolicyModal.js
@@ -147,7 +147,7 @@ export default class OperationalPolicyModal extends React.Component {
 
 	render() {
 		return (
-			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+			<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
 				<Modal.Header closeButton>
 					<Modal.Title>Operational policies</Modal.Title>
 				</Modal.Header>
diff --git a/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js b/ui-react/src/components/dialogs/Tosca/UploadToscaPolicyModal.js
index ec080589..fa95ca97 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 c5a91ea2..7cf02f71 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 71f371a6..d49232f2 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 2926e066..3f6dc948 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 babe5974..5f19a9b7 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"
diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
index 4bbf608d..048f6304 100644
--- a/ui-react/src/components/loop_viewer/svg/LoopSvg.js
+++ b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
@@ -27,14 +27,20 @@ import { withRouter } from "react-router-dom";
 import LoopService from '../../../api/LoopService';
 import LoopComponentConverter from './LoopComponentConverter';
 
-const LoopViewSvgDivStyled = styled.div`
-	overflow: hidden;
+const LoopViewSvgDivStyled = styled.svg`
+	display: flex;
+	flex-direction: row;
+	overflow-x: scroll;
 	background-color: ${props => (props.theme.loopViewerBackgroundColor)};
 	border: 1px solid;
 	border-color: ${props => (props.theme.loopViewerHeaderColor)};
+	margin-top: 1em;
 	margin-left: auto;
 	margin-right:auto;
-	text-align: center;
+	margin-bottom: -3em;
+	align-items: center;
+	height: 100%;
+	width: 100%;
 
 `
 
@@ -101,4 +107,4 @@ class LoopViewSvg extends React.Component {
 	}
 }
 
-export default withRouter(LoopViewSvg);
\ No newline at end of file
+export default withRouter(LoopViewSvg);
diff --git a/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap b/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap
index cecfb425..e05f1c79 100644
--- a/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap
+++ b/ui-react/src/components/loop_viewer/svg/__snapshots__/LoopSvg.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Verify LoopSvg Test the render method 1`] = `
-<styled.div
+<styled.svg
   dangerouslySetInnerHTML={
     Object {
       "__html": "<svg><text x=\\"20\\" y=\\"40\\">No LOOP (SVG)</text></svg>",
@@ -12,7 +12,7 @@ exports[`Verify LoopSvg Test the render method 1`] = `
 `;
 
 exports[`Verify LoopSvg Test the render method no loopName 1`] = `
-<styled.div
+<styled.svg
   dangerouslySetInnerHTML={
     Object {
       "__html": "<svg><text x=\\"20\\" y=\\"40\\">No LOOP (SVG)</text></svg>",
@@ -23,7 +23,7 @@ exports[`Verify LoopSvg Test the render method no loopName 1`] = `
 `;
 
 exports[`Verify LoopSvg Test the render method svg not empty 1`] = `
-<styled.div
+<styled.svg
   dangerouslySetInnerHTML={
     Object {
       "__html": "<svg><text test</text></svg>",