diff options
Diffstat (limited to 'ui-react/src/components/dialogs')
5 files changed, 107 insertions, 23 deletions
diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js index a8e8dee1f..5663360a0 100644 --- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.js +++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.js @@ -37,6 +37,10 @@ const ModalStyled = styled(Modal)` background-color: transparent; ` +const ErrMsgStyled = styled.div` + color: red; +` + export default class CreateLoopModal extends React.Component { constructor(props, context) { super(props, context); @@ -46,17 +50,20 @@ export default class CreateLoopModal extends React.Component { this.handleModelName = this.handleModelName.bind(this); this.handleClose = this.handleClose.bind(this); this.handleDropDownListChange = this.handleDropDownListChange.bind(this); + this.renderSvg = this.renderSvg.bind(this); this.state = { show: true, chosenTemplateName: '', + modelInputErrMsg: '', modelName: '', templateNames: [], fakeLoopCacheWithTemplate: new LoopCache({}) }; } - componentWillMount() { - this.getAllLoopTemplates(); + async componentDidMount() { + await this.getAllLoopTemplates(); + await this.getModelNames(); } handleClose() { @@ -87,6 +94,17 @@ export default class CreateLoopModal extends React.Component { }); } + getModelNames() { + TemplateService.getLoopNames().then(loopNames => { + if (!loopNames) { + loopNames = []; + } + // Remove LOOP_ prefix + let trimmedLoopNames = loopNames.map(str => str.replace('LOOP_', '')); + this.setState({ modelNames: trimmedLoopNames }); + }); + } + handleCreate() { if (!this.state.modelName) { alert("A model name is required"); @@ -109,10 +127,25 @@ export default class CreateLoopModal extends React.Component { }); } - handleModelName = event => { - this.setState({ - modelName: event.target.value - }) + handleModelName(event) { + if (this.state.modelNames.includes(event.target.value)) { + this.setState({ + modelInputErrMsg: 'A model named "' + event.target.value + '" already exists. Please pick another name.', + modelName: event.target.value + }); + return; + } else { + this.setState({ + modelInputErrMsg: '', + modelName: event.target.value + }); + } + } + + renderSvg() { + return ( + <SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/> + ); } render() { @@ -131,15 +164,20 @@ export default class CreateLoopModal extends React.Component { <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview"> <Form.Label column sm="2">Model Preview:</Form.Label> <Col sm="10"> - <SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/> + {this.renderSvg()} </Col> </Form.Group> <Form.Group as={Row} controlId="formPlaintextEmail"> <Form.Label column sm="2">Model Name:</Form.Label> - <input type="text" style={{width: '50%', marginLeft: '1em' }} + <input sm="5" type="text" style={{width: '50%', marginLeft: '1em' }} value={this.state.modelName} onChange={this.handleModelName} /> + <span sm="5"/> + </Form.Group> + <Form.Group as={Row} controlId="formPlaintextEmail"> + <Form.Label column sm="2"> </Form.Label> + <ErrMsgStyled>{this.state.modelInputErrMsg}</ErrMsgStyled> </Form.Group> </Modal.Body> <Modal.Footer> diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js index 5b6ea9e62..1caa22dc7 100644 --- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js +++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js @@ -29,16 +29,18 @@ import TemplateService from '../../../api/TemplateService'; describe('Verify CreateLoopModal', () => { it('Test the render method', async () => { - const flushPromises = () => new Promise(setImmediate); + const flushPromises = () => new Promise(setImmediate); TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => { - return Promise.resolve([{"name":"template1"},{"name":"template2"}]); - }); - - const component = shallow(<CreateLoopModal/>); + return Promise.resolve([{"name":"template1"},{"name":"template2"}]); + }); + TemplateService.getLoopNames = jest.fn().mockImplementation(() => { + return Promise.resolve([]); + }); + + const component = shallow(<CreateLoopModal/>); expect(component).toMatchSnapshot(); - await flushPromises(); - component.update(); - + await flushPromises(); + component.update(); expect(component.state('templateNames')).toStrictEqual([{"label": "template1", "value": "template1", "templateObject": {"name": "template1"}}, {"label": "template2", "value": "template2","templateObject": {"name": "template2"}}]); }); @@ -61,17 +63,22 @@ describe('Verify CreateLoopModal', () => { expect(component.state('fakeLoopCacheWithTemplate').getLoopName()).toEqual("fakeLoop"); }); - - - it('handleModelName event', () => { + it('handleModelName event', async () => { + const flushPromises = () => new Promise(setImmediate); + TemplateService.getAllLoopTemplates = jest.fn().mockImplementation(() => { + return Promise.resolve([{"name":"template1"},{"name":"template2"}]); + }); + TemplateService.getLoopNames = jest.fn().mockImplementation(() => { + return Promise.resolve([]); + }); const event = {target: {value : "model1"} }; const component = shallow(<CreateLoopModal/>); + await flushPromises(); component.find('input').simulate('change', event); component.update(); expect(component.state('modelName')).toEqual("model1"); }); - it('Test handleClose', () => { const historyMock = { push: jest.fn() }; const handleClose = jest.spyOn(CreateLoopModal.prototype,'handleClose'); diff --git a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js index 7ca90b493..b45df6502 100644 --- a/ui-react/src/components/dialogs/Loop/OpenLoopModal.js +++ b/ui-react/src/components/dialogs/Loop/OpenLoopModal.js @@ -48,7 +48,8 @@ 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.renderSvg = this.renderSvg.bind(this); + this.showReadOnly = props.showReadOnly !== undefined ? props.showReadOnly : true; this.state = { show: true, chosenLoopName: '', @@ -90,6 +91,12 @@ export default class OpenLoopModal extends React.Component { this.props.loadLoopFunction(this.state.chosenLoopName); } + renderSvg() { + return( + <SvgGenerator loopCache={this.state.loopCacheOpened} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE}/> + ); + } + render() { return ( <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} > @@ -107,7 +114,7 @@ export default class OpenLoopModal extends React.Component { <Form.Group as={Row} style={{alignItems: 'center'}} controlId="formSvgPreview"> <Form.Label column sm="2">Model Preview:</Form.Label> <Col sm="10"> - <SvgGenerator loopCache={this.state.loopCacheOpened} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_INSTANCE}/> + {this.renderSvg()} </Col> </Form.Group> {this.showReadOnly === true ? diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap index e69b809c7..b05781641 100644 --- a/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap +++ b/ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap @@ -107,6 +107,7 @@ exports[`Verify CreateLoopModal Test the render method 1`] = ` </FormLabel> <input onChange={[Function]} + sm="5" style={ Object { "marginLeft": "1em", @@ -116,6 +117,30 @@ exports[`Verify CreateLoopModal Test the render method 1`] = ` type="text" value="" /> + <span + sm="5" + /> + </FormGroup> + <FormGroup + as={ + Object { + "$$typeof": Symbol(react.forward_ref), + "defaultProps": Object { + "noGutters": false, + }, + "render": [Function], + } + } + controlId="formPlaintextEmail" + > + <FormLabel + column={true} + sm="2" + srOnly={false} + > + + </FormLabel> + <styled.div /> </FormGroup> </ModalBody> <ModalFooter> diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js index 962ab4bda..10473944f 100644 --- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js +++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js @@ -92,6 +92,7 @@ export default class ViewLoopTemplatesModal extends React.Component { constructor(props, context) { super(props, context); this.handleClose = this.handleClose.bind(this); + this.renderSvg = this.renderSvg.bind(this); this.getLoopTemplate = this.getLoopTemplate.bind(this); this.getAllLoopTemplates(); } @@ -120,6 +121,12 @@ export default class ViewLoopTemplatesModal extends React.Component { this.props.history.push('/') } + renderSvg() { + return( + <SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/> + ) + } + render() { return ( <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}> @@ -139,7 +146,7 @@ export default class ViewLoopTemplatesModal extends React.Component { }) }} /> - <SvgGenerator loopCache={this.state.fakeLoopCacheWithTemplate} clickable={false} generatedFrom={SvgGenerator.GENERATED_FROM_TEMPLATE}/> + {this.renderSvg()} </Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={this.handleClose}>Close</Button> |