From 083e5a2aefd76bb1fc25bcb5528b7288b059c1c2 Mon Sep 17 00:00:00 2001 From: Ted Humphrey Date: Wed, 8 Jul 2020 16:48:40 -0400 Subject: block re-use of existing loop name; support derivation of SvgGenerator added changes to LoopUI for global style and support of "delete" CL case Issue-ID: CLAMP-896 Change-Id: I97f603f38c277011835b8e206e5e05226a296606 Signed-off-by: Ted Humphrey --- .../src/components/dialogs/Loop/CreateLoopModal.js | 54 ++++++++++++++++++---- .../dialogs/Loop/CreateLoopModal.test.js | 31 ++++++++----- .../src/components/dialogs/Loop/OpenLoopModal.js | 11 ++++- .../__snapshots__/CreateLoopModal.test.js.snap | 25 ++++++++++ .../dialogs/Tosca/ViewLoopTemplatesModal.js | 9 +++- 5 files changed, 107 insertions(+), 23 deletions(-) (limited to 'ui-react/src/components/dialogs') 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 ( + + ); } render() { @@ -131,15 +164,20 @@ export default class CreateLoopModal extends React.Component { Model Preview: - + {this.renderSvg()} Model Name: - + + + + + {this.state.modelInputErrMsg} 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(); + return Promise.resolve([{"name":"template1"},{"name":"template2"}]); + }); + TemplateService.getLoopNames = jest.fn().mockImplementation(() => { + return Promise.resolve([]); + }); + + const component = shallow(); 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(); + 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( + + ); + } + render() { return ( @@ -107,7 +114,7 @@ export default class OpenLoopModal extends React.Component { Model Preview: - + {this.renderSvg()} {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`] = ` + + + + + + + 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( + + ) + } + render() { return ( @@ -139,7 +146,7 @@ export default class ViewLoopTemplatesModal extends React.Component { }) }} /> - + {this.renderSvg()} -- cgit 1.2.3-korg