diff options
Diffstat (limited to 'ui-react')
11 files changed, 67 insertions, 73 deletions
diff --git a/ui-react/package.json b/ui-react/package.json index d876b6c71..2d70e270e 100644 --- a/ui-react/package.json +++ b/ui-react/package.json @@ -30,14 +30,14 @@ "react": "16.9.0", "react-dom": "16.9.0", "react-scripts": "3.1.1", - "react-bootstrap": "1.0.0-beta.12", + "react-bootstrap": "1.0.0-beta.14", "bootstrap-css-only": "4.3.1", "styled-components": "4.3.2", "react-router-dom": "5.0.1", - "@material-ui/core": "4.3.2", - "@material-ui/icons": "4.2.1", - "material-table": "1.48.0", - "react-select": "3.0.4" + "@material-ui/core": "4.6.0", + "@material-ui/icons": "4.5.1", + "material-table": "1.53.0", + "react-select": "3.0.8" }, "devDependencies": { "jest": "24.8.0", diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js index 11808da38..05f466bc6 100644 --- a/ui-react/src/LoopUI.js +++ b/ui-react/src/LoopUI.js @@ -42,7 +42,7 @@ import ConfigurationPolicyModal from './components/dialogs/ConfigurationPolicy/C import LoopProperties from './components/dialogs/LoopProperties'; import UserInfo from './components/dialogs/UserInfo'; import LoopService from './api/LoopService'; -import ViewToscaModals from './components/dialogs/ViewToscaModals/ViewToscaModals'; +import ViewToscaModal from './components/dialogs/ViewToscaModal/ViewToscaModal'; import PerformAction from './components/dialogs/PerformActions'; import RefreshStatus from './components/dialogs/RefreshStatus'; import DeployLoop from './components/dialogs/DeployLoop'; @@ -248,7 +248,7 @@ export default class LoopUI extends React.Component { render() { return ( <StyledMainDiv id="main_div"> - <Route path="/viewToscaModals" render={(routeProps) => (<ViewToscaModals {...routeProps} />)} /> + <Route path="/viewToscaModal" render={(routeProps) => (<ViewToscaModal {...routeProps} />)} /> <Route path="/operationalPolicyModal" render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop} showAlert={this.showAlert}/>)} /> <Route path="/configurationPolicyModal/:componentName" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.getLoopCache()} loadLoopFunction={this.loadLoop}/>)} /> diff --git a/ui-react/src/__snapshots__/LoopUI.test.js.snap b/ui-react/src/__snapshots__/LoopUI.test.js.snap index 3c84e9564..ab4ea4999 100644 --- a/ui-react/src/__snapshots__/LoopUI.test.js.snap +++ b/ui-react/src/__snapshots__/LoopUI.test.js.snap @@ -5,7 +5,7 @@ exports[`Verify LoopUI Test the render method 1`] = ` id="main_div" > <Route - path="/viewToscaModals" + path="/viewToscaModal" render={[Function]} /> <Route diff --git a/ui-react/src/__snapshots__/OnapClamp.test.js.snap b/ui-react/src/__snapshots__/OnapClamp.test.js.snap index abe6be4b4..7a4d94570 100644 --- a/ui-react/src/__snapshots__/OnapClamp.test.js.snap +++ b/ui-react/src/__snapshots__/OnapClamp.test.js.snap @@ -28,7 +28,7 @@ exports[`Verify OnapClamp Test the render method 1`] = ` id="main_div" > <Route - path="/viewToscaModals" + path="/viewToscaModal" render={[Function]} /> <Route diff --git a/ui-react/src/api/TemplateMenu.js b/ui-react/src/api/TemplateMenuService.js index 6bc60da5c..5d3f29a80 100644 --- a/ui-react/src/api/TemplateMenu.js +++ b/ui-react/src/api/TemplateMenuService.js @@ -20,9 +20,9 @@ * */ -export default class TemplateMenu { - static getToscaModals() { - return fetch('restservices/clds/v2/loop/tosca/models', { method: 'GET', credentials: 'same-origin', }) +export default class TemplateMenuService { + static getToscaModels() { + return fetch('restservices/clds/v2/loop/tosca/models', { method: 'GET', credentials: 'same-origin' }) .then(function (response) { console.debug("getToscaModels response received: ", response.status); if (response.ok) { diff --git a/ui-react/src/components/dialogs/OpenLoop/__snapshots__/OpenLoopModal.test.js.snap b/ui-react/src/components/dialogs/OpenLoop/__snapshots__/OpenLoopModal.test.js.snap index 5fd9e8aa5..9e7222415 100644 --- a/ui-react/src/components/dialogs/OpenLoop/__snapshots__/OpenLoopModal.test.js.snap +++ b/ui-react/src/components/dialogs/OpenLoop/__snapshots__/OpenLoopModal.test.js.snap @@ -57,9 +57,7 @@ exports[`Verify OpenLoopModal Test the render method 1`] = ` title="" type="checkbox" > - <FormCheckLabel - type="checkbox" - > + <FormCheckLabel> Read Only </FormCheckLabel> <Styled(FormCheckInput) diff --git a/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.js b/ui-react/src/components/dialogs/ViewToscaModal/ViewToscaModal.js index 8073dc357..fbfb4a78c 100644 --- a/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.js +++ b/ui-react/src/components/dialogs/ViewToscaModal/ViewToscaModal.js @@ -26,7 +26,7 @@ import MaterialTable from "material-table"; import Button from 'react-bootstrap/Button'; import Modal from 'react-bootstrap/Modal'; import styled from 'styled-components'; -import TemplateMenu from '../../../api/TemplateMenu'; +import TemplateMenuService from '../../../api/TemplateMenuService'; import ArrowUpward from '@material-ui/icons/ArrowUpward'; import ChevronLeft from '@material-ui/icons/ChevronLeft'; import ChevronRight from '@material-ui/icons/ChevronRight'; @@ -39,15 +39,12 @@ import Search from '@material-ui/icons/Search'; const ModalStyled = styled(Modal)` background-color: transparent; ` -const StyledToscaView = styled.textarea` -` -const StyledToscaDiv = styled.div` -` + const vtmCellStyle = { border: '1px solid black' }; const vtmHeaderStyle = { backgroundColor: '#ddd', border: '2px solid black' }; const vtmRowHeaderStyle = {backgroundColor:'#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black'}; -export default class ViewToscalModals extends React.Component { +export default class ViewToscalModal extends React.Component { state = { show: true, @@ -81,35 +78,34 @@ export default class ViewToscalModals extends React.Component { } ], tableIcons: { - FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />), - LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />), - NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />), - PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />), - ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />), - Search: forwardRef((props, ref) => <Search {...props} ref={ref} />), - SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />), + FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />), + LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />), + NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />), + PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />), + ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />), + Search: forwardRef((props, ref) => <Search {...props} ref={ref} />), + SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />) } }; constructor(props, context) { super(props, context); this.handleClose = this.handleClose.bind(this); - this.getToscaModals = this.getToscaModals.bind(this); + this.getToscaModels = this.getToscaModels.bind(this); this.handleYamlContent = this.handleYamlContent.bind(this); } componentWillMount() { - this.getToscaModals(); + this.getToscaModels(); } - getToscaModals() { - TemplateMenu.getToscaModals().then(toscaNames => { + getToscaModels() { + TemplateMenuService.getToscaModels().then(toscaNames => { this.setState({ toscaNames: toscaNames }); }); } handleYamlContent(event) { - console.log('inside handleYamlContent'); this.setState({ content: event.target.value }); } @@ -138,9 +134,9 @@ export default class ViewToscalModals extends React.Component { }) }} /> - <StyledToscaDiv> - <StyledToscaView value={this.state.content} onChange={this.handleYamlContent}/> - </StyledToscaDiv> + <div> + <textarea value={this.state.content} onChange={this.handleYamlContent}/> + </div> </Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={this.handleClose}>Close</Button> diff --git a/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.test.js b/ui-react/src/components/dialogs/ViewToscaModal/ViewToscaModal.test.js index 4284dd3ed..4dbe37615 100644 --- a/ui-react/src/components/dialogs/ViewToscaModals/ViewToscaModals.test.js +++ b/ui-react/src/components/dialogs/ViewToscaModal/ViewToscaModal.test.js @@ -22,11 +22,11 @@ */ import React from 'react'; import { shallow } from 'enzyme'; -import ViewToscaModals from './ViewToscaModals'; +import ViewToscaModal from './ViewToscaModal'; import { mount } from 'enzyme'; -describe('Verify ViewToscaModals', () => { +describe('Verify ViewToscaModal', () => { beforeEach(() => { fetch.resetMocks(); fetch.mockImplementation(() => { @@ -49,7 +49,7 @@ describe('Verify ViewToscaModals', () => { }); it('Test the tosca model view render method', () => { - const component = shallow(<ViewToscaModals/>); + const component = shallow(<ViewToscaModal/>); component.setState({ toscaNames: { "index": "1", "toscaModelYaml": "MTCA", @@ -64,22 +64,22 @@ describe('Verify ViewToscaModals', () => { }); it('Test Table icons', () => { - const component = mount(<ViewToscaModals/>); + const component = mount(<ViewToscaModal/>); expect(component.find('[className="MuiSelect-icon MuiTablePagination-selectIcon"]')).toBeTruthy(); }); it('Test handleYamlContent', () => { const yamlContent = 'MTCA Tosca model details'; - const component = shallow(<ViewToscaModals/>); + const component = shallow(<ViewToscaModal/>); component.find('[value="Please select Tosca model to view the details"]').prop('onChange')({ target: { value: yamlContent }}); expect(component.state('content')).toEqual(yamlContent); }); it('Test handleClose', () => { const historyMock = { push: jest.fn() }; - const handleClose = jest.spyOn(ViewToscaModals.prototype,'handleClose'); - const component = shallow(<ViewToscaModals history={historyMock} />) + const handleClose = jest.spyOn(ViewToscaModal.prototype,'handleClose'); + const component = shallow(<ViewToscaModal history={historyMock} />) component.find('[variant="secondary"]').prop('onClick')(); expect(handleClose).toHaveBeenCalledTimes(1); expect(component.state('show')).toEqual(false); diff --git a/ui-react/src/components/dialogs/ViewToscaModals/__snapshots__/ViewToscaModals.test.js.snap b/ui-react/src/components/dialogs/ViewToscaModal/__snapshots__/ViewToscaModal.test.js.snap index 55137b928..3523adad3 100644 --- a/ui-react/src/components/dialogs/ViewToscaModals/__snapshots__/ViewToscaModals.test.js.snap +++ b/ui-react/src/components/dialogs/ViewToscaModal/__snapshots__/ViewToscaModal.test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Verify ViewToscaModals Test the tosca model view render method 1`] = ` +exports[`Verify ViewToscaModal Test the tosca model view render method 1`] = ` <Styled(Bootstrap(Modal)) onHide={[Function]} show={true} @@ -147,12 +147,12 @@ exports[`Verify ViewToscaModals Test the tosca model view render method 1`] = ` } title="View ToscaModel" /> - <styled.div> - <styled.textarea + <div> + <textarea onChange={[Function]} value="Please select Tosca model to view the details" /> - </styled.div> + </div> </ModalBody> <ModalFooter> <Button diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js index 2ce92b39d..bbfa82a13 100644 --- a/ui-react/src/components/menu/MenuBar.js +++ b/ui-react/src/components/menu/MenuBar.js @@ -88,7 +88,7 @@ export default class MenuBar extends React.Component { <Navbar.Collapse> <StyledNavDropdown title="Template"> - <NavDropdown.Item as={StyledLink} to="/viewToscaModals">View Tosca Model</NavDropdown.Item> + <NavDropdown.Item as={StyledLink} to="/viewToscaModal">View Tosca Model</NavDropdown.Item> </StyledNavDropdown> <StyledNavDropdown title="Closed Loop"> <NavDropdown.Item as={StyledLink} to="/openLoop">Open CL</NavDropdown.Item> diff --git a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap index 1e13b3bdc..9082eccd8 100644 --- a/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap +++ b/ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap @@ -11,7 +11,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "$$typeof": Symbol(react.forward_ref), "attrs": Array [], "componentStyle": ComponentStyle { - "componentId": "sc-jKJlTe", + "componentId": "sc-dxgOiQ", "isStatic": false, "rules": Array [ " @@ -44,7 +44,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-jKJlTe", + "styledComponentId": "sc-dxgOiQ", "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], @@ -52,7 +52,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` } } disabled={false} - to="/viewToscaModals" + to="/viewToscaModal" > View Tosca Model </DropdownItem> @@ -66,7 +66,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "$$typeof": Symbol(react.forward_ref), "attrs": Array [], "componentStyle": ComponentStyle { - "componentId": "sc-jKJlTe", + "componentId": "sc-dxgOiQ", "isStatic": false, "rules": Array [ " @@ -99,7 +99,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-jKJlTe", + "styledComponentId": "sc-dxgOiQ", "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], @@ -117,7 +117,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "$$typeof": Symbol(react.forward_ref), "attrs": Array [], "componentStyle": ComponentStyle { - "componentId": "sc-jKJlTe", + "componentId": "sc-dxgOiQ", "isStatic": false, "rules": Array [ " @@ -150,7 +150,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-jKJlTe", + "styledComponentId": "sc-dxgOiQ", "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], @@ -168,7 +168,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "$$typeof": Symbol(react.forward_ref), "attrs": Array [], "componentStyle": ComponentStyle { - "componentId": "sc-jKJlTe", + "componentId": "sc-dxgOiQ", "isStatic": false, "rules": Array [ " @@ -201,7 +201,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-jKJlTe", + "styledComponentId": "sc-dxgOiQ", "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], @@ -223,7 +223,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "$$typeof": Symbol(react.forward_ref), "attrs": Array [], "componentStyle": ComponentStyle { - "componentId": "sc-jKJlTe", + "componentId": "sc-dxgOiQ", "isStatic": false, "rules": Array [ " @@ -256,7 +256,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-jKJlTe", + "styledComponentId": "sc-dxgOiQ", "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], @@ -274,7 +274,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "$$typeof": Symbol(react.forward_ref), "attrs": Array [], "componentStyle": ComponentStyle { - "componentId": "sc-jKJlTe", + "componentId": "sc-dxgOiQ", "isStatic": false, "rules": Array [ " @@ -307,7 +307,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-jKJlTe", + "styledComponentId": "sc-dxgOiQ", "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], @@ -325,7 +325,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "$$typeof": Symbol(react.forward_ref), "attrs": Array [], "componentStyle": ComponentStyle { - "componentId": "sc-jKJlTe", + "componentId": "sc-dxgOiQ", "isStatic": false, "rules": Array [ " @@ -358,7 +358,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-jKJlTe", + "styledComponentId": "sc-dxgOiQ", "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], @@ -376,7 +376,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "$$typeof": Symbol(react.forward_ref), "attrs": Array [], "componentStyle": ComponentStyle { - "componentId": "sc-jKJlTe", + "componentId": "sc-dxgOiQ", "isStatic": false, "rules": Array [ " @@ -409,7 +409,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-jKJlTe", + "styledComponentId": "sc-dxgOiQ", "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], @@ -427,7 +427,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "$$typeof": Symbol(react.forward_ref), "attrs": Array [], "componentStyle": ComponentStyle { - "componentId": "sc-jKJlTe", + "componentId": "sc-dxgOiQ", "isStatic": false, "rules": Array [ " @@ -460,7 +460,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-jKJlTe", + "styledComponentId": "sc-dxgOiQ", "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], @@ -478,7 +478,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "$$typeof": Symbol(react.forward_ref), "attrs": Array [], "componentStyle": ComponentStyle { - "componentId": "sc-jKJlTe", + "componentId": "sc-dxgOiQ", "isStatic": false, "rules": Array [ " @@ -511,7 +511,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-jKJlTe", + "styledComponentId": "sc-dxgOiQ", "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], @@ -533,7 +533,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "$$typeof": Symbol(react.forward_ref), "attrs": Array [], "componentStyle": ComponentStyle { - "componentId": "sc-jKJlTe", + "componentId": "sc-dxgOiQ", "isStatic": false, "rules": Array [ " @@ -566,7 +566,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-jKJlTe", + "styledComponentId": "sc-dxgOiQ", "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], @@ -599,7 +599,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "$$typeof": Symbol(react.forward_ref), "attrs": Array [], "componentStyle": ComponentStyle { - "componentId": "sc-jKJlTe", + "componentId": "sc-dxgOiQ", "isStatic": false, "rules": Array [ " @@ -632,7 +632,7 @@ exports[`Verify MenuBar Test the render method 1`] = ` "displayName": "Styled(Link)", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "sc-jKJlTe", + "styledComponentId": "sc-dxgOiQ", "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], |