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>

8 files changed, 104 insertions, 37 deletions

diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js
index 321304a6a..e98b59566 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 853df1c89..2155977f6 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 97b782246..c0a2084f5 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 8886dbfdf..8c6740564 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 15a718885..c04883443 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 c9acb9e12..8d0faa5f7 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 0fde7a564..233c560ab 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 1c98195b3..196854446 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>