aboutsummaryrefslogtreecommitdiffstats
path: root/ui-react/src/components
diff options
context:
space:
mode:
authorTed Humphrey <Thomas.Humphrey@att.com>2020-07-08 16:48:40 -0400
committerChristophe Closset <christophe.closset@intl.att.com>2020-07-15 17:49:00 +0000
commit083e5a2aefd76bb1fc25bcb5528b7288b059c1c2 (patch)
treebc99c546f6397c7bd53feb3c49de3dbb7e21a8b5 /ui-react/src/components
parentb165eb5507409cd0e63b4d255202f46c059f7e6d (diff)
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 <Thomas.Humphrey@att.com>
Diffstat (limited to 'ui-react/src/components')
-rw-r--r--ui-react/src/components/dialogs/Loop/CreateLoopModal.js54
-rw-r--r--ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js31
-rw-r--r--ui-react/src/components/dialogs/Loop/OpenLoopModal.js11
-rw-r--r--ui-react/src/components/dialogs/Loop/__snapshots__/CreateLoopModal.test.js.snap25
-rw-r--r--ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js9
-rw-r--r--ui-react/src/components/loop_viewer/svg/SvgGenerator.js10
6 files changed, 114 insertions, 26 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>
diff --git a/ui-react/src/components/loop_viewer/svg/SvgGenerator.js b/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
index 7070455e7..f5f5047ba 100644
--- a/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
+++ b/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
@@ -28,11 +28,12 @@ import OnapConstant from '../../../utils/OnapConstants';
const DivStyled = styled.div`
overflow-x: scroll;
+ display: flex;
width: 100%;
height: 100%;
`
-const emptySvg = (<svg> <text x="20" y="40">No LOOP (SVG)</text> </svg>);
+const emptySvg = (<svg> <text x="60" y="40">No LOOP (SVG)</text> </svg>);
class SvgGenerator extends React.Component {
boxWidth = 200;
@@ -228,11 +229,14 @@ class SvgGenerator extends React.Component {
render() {
var allTheElements = this.renderSvg();
var svgWidth = this.boxWidth*allTheElements.length;
- var svgHeight = this.boxHeight+100;
+ var svgHeight = this.boxHeight+50;
return (
+
<DivStyled onClick={this.handleSvgClick} >
- <svg height={svgHeight} width={svgWidth} preserveAspectRatio="none">
+ <svg height={svgHeight} width={svgWidth} viewBox="0,0,{svgWidth},{svgHeight}" preserveAspectRatio="none">
+ <svg x="-50" y="25">
{allTheElements}
+ </svg>
</svg>
</DivStyled>
);