From df68db271f23561671a59b1678c39b8ee54cd8e4 Mon Sep 17 00:00:00 2001 From: Ted Humphrey Date: Thu, 16 Apr 2020 17:36:17 +0000 Subject: Minor UI fixes for dialogues and Tosca upload feature Issue-ID: CLAMP-587 Change-Id: I683b62fbd0b15ab5db18c7e1e941ff8cb58cb0f3 Signed-off-by: Ted Humphrey --- .../ConfigurationPolicyModal.js | 2 +- .../src/components/dialogs/Loop/CreateLoopModal.js | 33 ++++++++---- .../src/components/dialogs/Loop/DeployLoopModal.js | 2 +- .../components/dialogs/Loop/LoopPropertiesModal.js | 2 +- .../src/components/dialogs/Loop/ModifyLoopModal.js | 2 +- .../src/components/dialogs/Loop/OpenLoopModal.js | 40 ++++++++++----- .../__snapshots__/DeployLoopModal.test.js.snap | 1 + .../__snapshots__/LoopPropertiesModal.test.js.snap | 1 + .../Loop/__snapshots__/OpenLoopModal.test.js.snap | 60 ++++++++++++++++++---- .../ManageDictionaries/ManageDictionaries.js | 2 +- .../__snapshots__/ManageDictionaries.test.js.snap | 1 + .../OperationalPolicy/OperationalPolicyModal.js | 2 +- .../dialogs/Tosca/UploadToscaPolicyModal.js | 4 +- .../dialogs/Tosca/ViewLoopTemplatesModal.js | 18 +++++-- .../dialogs/Tosca/ViewToscaPolicyModal.js | 2 +- .../ViewLoopTemplatesModal.test.js.snap | 3 +- .../ViewToscaPolicyModal.test.js.snap | 1 + 17 files changed, 127 insertions(+), 49 deletions(-) (limited to 'ui-react/src/components/dialogs') 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 ( - + Configuration policies 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 ( - + Create Model - Template Name + Template Name: @@ -148,4 +159,4 @@ export default class CreateLoopModal extends React.Component { ); } -} \ 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 ( - + Deployment parameters 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 ( - + Model Properties 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 ( - + Modify Loop Operational Policies 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 ( - + Open Model - Model Name + Model Name: this.fileInput = fileInput}/> 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 ( - + 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 ( - + 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`] = ` -