diff options
author | liamfallon <liam.fallon@est.tech> | 2021-11-09 15:22:22 +0000 |
---|---|---|
committer | liamfallon <liam.fallon@est.tech> | 2021-11-10 08:57:23 +0000 |
commit | 2022e5ce5a03788a6edc5761c495cfadc5ded485 (patch) | |
tree | 2df93f088fb323440945ce93ce67be1f2208c9bf /runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js | |
parent | 579085240812aa593ebafe787d97868e16fc3318 (diff) |
Align ui-react file in policy-clamp and policy-gui
When the ui-react code was transferred to policy-gui, the white space
was cleaned up and reformatted. This makes it difficult to track the
real functional changes if any between ui-react in policy-clamp and
policy-gui.
This review brings the white space changes into ui-react in policy-clamp
to make file comparisons easier.
Issue-ID: POLICY-3358
Change-Id: Ic303e71b341e5c0f7ca0de0ed4c4962ebf2f988a
Signed-off-by: liamfallon <liam.fallon@est.tech>
Diffstat (limited to 'runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js')
-rw-r--r-- | runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js | 165 |
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> + ); + } +} |