From 3173d554371bae1eefafc69b2bc9da5543510dd5 Mon Sep 17 00:00:00 2001 From: jingjincs Date: Wed, 4 Mar 2020 09:11:10 +0100 Subject: Update template menu UI Modify View Templates Menu to adopt changes from get template CL API Issue-ID: CLAMP-589 Change-Id: I54d059620e91d0da70e85c62dbb932ee58dd99ab Signed-off-by: xuegao --- .../dialogs/Tosca/ViewLoopTemplatesModal.js | 87 +++++++++++++--------- .../dialogs/Tosca/ViewLoopTemplatesModal.test.js | 26 +------ .../ViewLoopTemplatesModal.test.js.snap | 12 ++- 3 files changed, 59 insertions(+), 66 deletions(-) (limited to 'ui-react/src/components/dialogs/Tosca') diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js index 89e5697c9..18c444046 100644 --- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js +++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js @@ -38,22 +38,26 @@ import MaterialTable from "material-table"; const ModalStyled = styled(Modal)` background-color: transparent; ` -const TextModal = styled.textarea` -margin-top: 20px; -white-space:pre; -background-color: ${props => props.theme.toscaTextareaBackgroundColor};; -text-align: justify; -font-size: ${props => props.theme.toscaTextareaFontSize};; -width: 100%; -height: 300px; +const LoopViewSvgDivStyled = styled.div` + overflow: hidden; + background-color: ${props => (props.theme.loopViewerBackgroundColor)}; + border-color: ${props => (props.theme.loopViewerHeaderColor)}; + margin-left: auto; + margin-right:auto; + text-align: center; + margin-top: 20px; ` +const SvgContainerDivStyled = styled.div` + border: 1px solid; +` + const cellStyle = { border: '1px solid black' }; const headerStyle = { backgroundColor: '#ddd', border: '2px solid black' }; const rowHeaderStyle = {backgroundColor:'#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black'}; export default class ViewLoopTemplatesModal extends React.Component { state = { - show: true, + show: true, content: 'Please select a loop template to display it', selectedRow: -1, loopTemplateData: [], @@ -97,8 +101,7 @@ export default class ViewLoopTemplatesModal extends React.Component { constructor(props, context) { super(props, context); this.handleClose = this.handleClose.bind(this); - this.getBlueprintMicroServiceTemplates = this.getBlueprintMicroServiceTemplates.bind(this); - this.handleYamlContent = this.handleYamlContent.bind(this); + this.getBlueprintMicroServiceTemplate = this.getBlueprintMicroServiceTemplate.bind(this); this.getBlueprintMicroServiceTemplates(); } @@ -108,11 +111,20 @@ export default class ViewLoopTemplatesModal extends React.Component { }); } - handleYamlContent = event => { - this.setState({ - content: event.target.value - }); - } + getBlueprintMicroServiceTemplate(templateName) { + if (typeof templateName !== "undefined") { + TemplateService.getBlueprintMicroServiceTemplate(templateName).then(svgXml => { + if (svgXml.length !== 0) { + this.setState({ content: svgXml }) + } else { + this.setState({ content: 'Please select a loop template to view the details' }) + + } + }); + } else { + this.setState({ content: 'Please select a loop template to view the details' }) + } + } handleClose() { this.setState({ show: false }); @@ -121,30 +133,31 @@ export default class ViewLoopTemplatesModal extends React.Component { render() { return ( - - - - - + + + + {this.setState({content: rowData.name, selectedRow: rowData.tableData.id})}} + onRowClick={(event, rowData) => {this.getBlueprintMicroServiceTemplate(rowData.name);this.setState({selectedRow: rowData.tableData.id})}} options={{ - headerStyle:rowHeaderStyle, - rowStyle: rowData => ({ - backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF' - }) - }} - /> -
- -
- - - - + headerStyle:rowHeaderStyle, + rowStyle: rowData => ({ + backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF' + }) + }} + /> + + + + + + + + ); } diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js index 94d4acdc8..ddfb2a70c 100644 --- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js +++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.test.js @@ -28,8 +28,7 @@ import { mount } from 'enzyme'; describe('Verify ViewLoopTemplatesModal', () => { beforeEach(() => { fetch.resetMocks(); - } - ); + }); it('Test API Successful', () => { fetch.mockImplementationOnce(() => { @@ -133,29 +132,6 @@ describe('Verify ViewLoopTemplatesModal', () => { const component = mount(); expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy(); }); - - it('Test handleYamlContent', () => { - fetch.mockImplementationOnce(() => { - return Promise.resolve({ - ok: true, - status: 200, - json: () => { - return Promise.resolve({ - "index": "1", - "name": "MTCA version 1", - "modelService.serviceDetails.name": "MTCA", - "allowedLoopType" : "CLOSED", - "maximumInstancesAllowed":1, - "updatedDate":"2019-09-06 19:09:42" - }); - } - }); - }); - const yamlContent = 'MTCA version 1'; - const component = shallow(); - component.find('[value="Please select a loop template to display it"]').prop('onChange')({ target: { value: yamlContent }}); - expect(component.state('content')).toEqual(yamlContent); - }); it('Test handleClose', () => { fetch.mockImplementationOnce(() => { 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 efec96e94..253820f86 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 @@ -140,12 +140,16 @@ exports[`Verify ViewLoopTemplatesModal Test the tosca model view render method 1 } title="View Blueprint MicroService Templates" /> -
- + -
+