aboutsummaryrefslogtreecommitdiffstats
path: root/ui-react
diff options
context:
space:
mode:
authordrveerendra <vrajasekharaiah@att.com>2019-11-11 19:37:39 -0500
committerdrveerendra <vrajasekharaiah@att.com>2019-11-18 20:08:46 -0500
commit684057e69bea57d0bd954a84a10581a81d546006 (patch)
tree255f5d878c70862c009b320809d93a84b0436506 /ui-react
parent715f0ac873dd0301ed85e873a09d4323fef4d40e (diff)
Adding View BP template Menu
Adding View Blue Print templates option under Template menu. Adding few more test cases for ViewTosca Modals to cover the api calls. Issue-ID: CLAMP-544 Change-Id: Ibf881f46fd03e9149a88ccc211a996d99fd74748 Signed-off-by: drveerendra <vrajasekharaiah@att.com>
Diffstat (limited to 'ui-react')
-rw-r--r--ui-react/src/LoopUI.js6
-rw-r--r--ui-react/src/__snapshots__/LoopUI.test.js.snap6
-rw-r--r--ui-react/src/__snapshots__/OnapClamp.test.js.snap8
-rw-r--r--ui-react/src/api/TemplateMenuService.js25
-rw-r--r--ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.js154
-rw-r--r--ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.test.js193
-rw-r--r--ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js (renamed from ui-react/src/components/dialogs/ViewToscaModal/ViewToscaModal.js)59
-rw-r--r--ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.test.js195
-rw-r--r--ui-react/src/components/dialogs/Tosca/__snapshots__/ViewBlueprintMicroServiceTemplatesModal.test.js.snap163
-rw-r--r--ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap (renamed from ui-react/src/components/dialogs/ViewToscaModal/__snapshots__/ViewToscaModal.test.js.snap)16
-rw-r--r--ui-react/src/components/dialogs/ViewToscaModal/ViewToscaModal.test.js89
-rw-r--r--ui-react/src/components/menu/MenuBar.js3
-rw-r--r--ui-react/src/components/menu/__snapshots__/MenuBar.test.js.snap103
-rw-r--r--ui-react/src/theme/globalStyle.js7
14 files changed, 864 insertions, 163 deletions
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 05f466bc..f767da9a 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -42,7 +42,8 @@ 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 ViewToscaModal from './components/dialogs/ViewToscaModal/ViewToscaModal';
+import ViewToscaPolicyModal from './components/dialogs/Tosca/ViewToscaPolicyModal';
+import ViewBlueprintMicroServiceTemplatesModal from './components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal';
import PerformAction from './components/dialogs/PerformActions';
import RefreshStatus from './components/dialogs/RefreshStatus';
import DeployLoop from './components/dialogs/DeployLoop';
@@ -248,7 +249,8 @@ export default class LoopUI extends React.Component {
render() {
return (
<StyledMainDiv id="main_div">
- <Route path="/viewToscaModal" render={(routeProps) => (<ViewToscaModal {...routeProps} />)} />
+ <Route path="/viewToscaPolicyModal" render={(routeProps) => (<ViewToscaPolicyModal {...routeProps} />)} />
+ <Route path="/viewBlueprintMicroServiceTemplatesModal" render={(routeProps) => (<ViewBlueprintMicroServiceTemplatesModal {...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 ab4ea499..22f54975 100644
--- a/ui-react/src/__snapshots__/LoopUI.test.js.snap
+++ b/ui-react/src/__snapshots__/LoopUI.test.js.snap
@@ -5,7 +5,11 @@ exports[`Verify LoopUI Test the render method 1`] = `
id="main_div"
>
<Route
- path="/viewToscaModal"
+ path="/viewToscaPolicyModal"
+ render={[Function]}
+ />
+ <Route
+ path="/viewBlueprintMicroServiceTemplatesModal"
render={[Function]}
/>
<Route
diff --git a/ui-react/src/__snapshots__/OnapClamp.test.js.snap b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
index 7a4d9457..7bb8f81c 100644
--- a/ui-react/src/__snapshots__/OnapClamp.test.js.snap
+++ b/ui-react/src/__snapshots__/OnapClamp.test.js.snap
@@ -21,6 +21,8 @@ exports[`Verify OnapClamp Test the render method 1`] = `
"menuFontColor": "black",
"menuHighlightedBackgroundColor": "#337ab7",
"menuHighlightedFontColor": "white",
+ "toscaTextareaBackgroundColor": "#E8E8E8",
+ "toscaTextareaFontSize": "13px",
}
}
>
@@ -28,7 +30,11 @@ exports[`Verify OnapClamp Test the render method 1`] = `
id="main_div"
>
<Route
- path="/viewToscaModal"
+ path="/viewToscaPolicyModal"
+ render={[Function]}
+ />
+ <Route
+ path="/viewBlueprintMicroServiceTemplatesModal"
render={[Function]}
/>
<Route
diff --git a/ui-react/src/api/TemplateMenuService.js b/ui-react/src/api/TemplateMenuService.js
index 5d3f29a8..dfa9c578 100644
--- a/ui-react/src/api/TemplateMenuService.js
+++ b/ui-react/src/api/TemplateMenuService.js
@@ -21,19 +21,36 @@
*/
export default class TemplateMenuService {
- static getToscaModels() {
+ static getToscaPolicyModels() {
return fetch('restservices/clds/v2/loop/tosca/models', { method: 'GET', credentials: 'same-origin' })
.then(function (response) {
- console.debug("getToscaModels response received: ", response.status);
+ console.debug("getToscaPolicyModels response received: ", response.status);
if (response.ok) {
return response.json();
} else {
- console.error("getToscaModels query failed");
+ console.error("getToscaPolicyModels query failed");
return {};
}
})
.catch(function (error) {
- console.error("getToscaModels error received", error);
+ console.error("getToscaPolicyModels error received", error);
+ return {};
+ });
+ }
+
+ static getBlueprintMicroServiceTemplates() {
+ return fetch('restservices/clds/v2/loop/templates', { method: 'GET', credentials: 'same-origin', })
+ .then(function (response) {
+ console.debug("getBlueprintMicroServiceTemplates response received: ", response.status);
+ if (response.ok) {
+ return response.json();
+ } else {
+ console.error("getBlueprintMicroServiceTemplates query failed");
+ return {};
+ }
+ })
+ .catch(function (error) {
+ console.error("getBlueprintMicroServiceTemplates error received", error);
return {};
});
}
diff --git a/ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.js
new file mode 100644
index 00000000..adacbc8c
--- /dev/null
+++ b/ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.js
@@ -0,0 +1,154 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ * reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+
+import React, { forwardRef } from 'react'
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import styled from 'styled-components';
+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';
+import Clear from '@material-ui/icons/Clear';
+import FirstPage from '@material-ui/icons/FirstPage';
+import LastPage from '@material-ui/icons/LastPage';
+import Search from '@material-ui/icons/Search';
+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 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 ViewBlueprintMicroServiceTemplatesModal extends React.Component {
+ state = {
+ show: true,
+ content: 'Please select Blue print template to view the details',
+ selectedRow: -1,
+ bpTemplNames: [],
+ bpTemplColumns: [
+ { title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
+ },
+ { title: "Template Name", field: "templateName",
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
+ },
+ { title: "Policy Model", field: "templatePolicy[0].policyModelId",
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
+ },
+ { title: "Template ID", field: "templateId",
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
+ },
+ { title: "Uploaded By", field: "updatedBy",
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
+ },
+ { title: "Uploaded Date", field: "timestamp", editable: 'never',
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
+ }
+ ],
+ 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} />)
+ }
+ };
+
+ constructor(props, context) {
+ super(props, context);
+ this.handleClose = this.handleClose.bind(this);
+ this.getBlueprintMicroServiceTemplates = this.getBlueprintMicroServiceTemplates.bind(this);
+ this.handleYamlContent = this.handleYamlContent.bind(this);
+ }
+
+ componentWillMount() {
+ this.getBlueprintMicroServiceTemplates();
+ }
+
+ getBlueprintMicroServiceTemplates() {
+ TemplateMenuService.getBlueprintMicroServiceTemplates().then(bpTemplNames => {
+ this.setState({ bpTemplNames: bpTemplNames })
+ });
+ }
+
+ handleYamlContent = event => {
+ this.setState({
+ content: event.target.value
+ });
+ }
+
+ handleClose() {
+ this.setState({ show: false });
+ this.props.history.push('/')
+ }
+
+ render() {
+ return (
+ <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
+ <Modal.Header closeButton>
+ </Modal.Header>
+ <Modal.Body>
+ <MaterialTable
+ title={"View Blueprint MicroService Templates"}
+ data={this.state.bpTemplNames}
+ columns={this.state.bpTemplColumns}
+ icons={this.state.tableIcons}
+ onRowClick={(event, rowData) => {this.setState({content: rowData.templateYaml, selectedRow: rowData.tableData.id})}}
+ options={{
+ headerStyle:rowHeaderStyle,
+ rowStyle: rowData => ({
+ backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
+ })
+ }}
+ />
+ <div>
+ <TextModal value={this.state.content} onChange={this.handleYamlContent} />
+ </div>
+ </Modal.Body>
+ <Modal.Footer>
+ <Button variant="secondary" onClick={this.handleClose}>Close</Button>
+ </Modal.Footer>
+ </ModalStyled>
+ );
+ }
+ }
diff --git a/ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.test.js
new file mode 100644
index 00000000..4a8d9c3f
--- /dev/null
+++ b/ui-react/src/components/dialogs/Tosca/ViewBlueprintMicroServiceTemplatesModal.test.js
@@ -0,0 +1,193 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ * reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+import React from 'react';
+import { shallow } from 'enzyme';
+import ViewBlueprintMicroServiceTemplatesModal from './ViewBlueprintMicroServiceTemplatesModal';
+import { mount } from 'enzyme';
+
+describe('Verify ViewBlueprintMicroServiceTemplatesModal', () => {
+ beforeEach(() => {
+ fetch.resetMocks();
+ }
+ );
+
+ it('Test API Successful', () => {
+ fetch.mockImplementationOnce(() => {
+ return Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "content": "MTCA version 1",
+ "templateName": "MTCA",
+ "templatePolicy.policyModelId" : "onap.policies.monitoring.docker.mtca.app",
+ "updatedBy":"tester",
+ "templateId":"aaaa_bbbb_cccc",
+ "timestamp":"2019-09-06 19:09:42"
+ });
+ }
+ });
+ });
+ const component = shallow(<ViewBlueprintMicroServiceTemplatesModal/>);
+ });
+
+ it('Test API Exception', () => {
+ fetch.mockImplementationOnce(() => {
+ return Promise.resolve({
+ ok: false,
+ status: 500,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "content": "MTCA version 1",
+ "templateName": "MTCA",
+ "templatePolicy.policyModelId" : "onap.policies.monitoring.docker.mtca.app",
+ "updatedBy":"tester",
+ "templateId":"aaaa_bbbb_cccc",
+ "timestamp":"2019-09-06 19:09:42"
+ });
+ }
+ });
+ });
+ const component = shallow(<ViewBlueprintMicroServiceTemplatesModal/>);
+ });
+
+ it('Test API Rejection', () => {
+ const myMockFunc = fetch.mockImplementationOnce(() => Promise.reject('error'));
+ setTimeout( () => myMockFunc().catch(e => {
+ console.log(e);
+ }),
+ 100
+ );
+ new Promise(resolve => setTimeout(resolve, 200));
+ const component = shallow(<ViewBlueprintMicroServiceTemplatesModal/>);
+ expect(myMockFunc.mock.calls.length).toBe(1);
+ });
+
+ it('Test the tosca model view render method', () => {
+ fetch.mockImplementationOnce(() => {
+ return Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "content": "MTCA version 1",
+ "templateName": "MTCA",
+ "templatePolicy.policyModelId" : "onap.policies.monitoring.docker.mtca.app",
+ "updatedBy":"tester",
+ "templateId":"aaaa_bbbb_cccc",
+ "timestamp":"2019-09-06 19:09:42"
+ });
+ }
+ });
+ });
+ const component = shallow(<ViewBlueprintMicroServiceTemplatesModal/>);
+ component.setState({ bpTemplNames: {
+ "index": "1",
+ "content": "MTCA version 1",
+ "templateName": "MTCA",
+ "templatePolicy.policyModelId" : "onap.policies.monitoring.docker.mtca.app",
+ "updatedBy":"tester",
+ "templateId":"aaaa_bbbb_cccc",
+ "timestamp":"2019-09-06 19:09:42"
+ }
+ });
+ expect(component).toMatchSnapshot();
+ });
+
+ it('Test Table icons', () => {
+ fetch.mockImplementationOnce(() => {
+ return Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "content": "MTCA version 1",
+ "templateName": "MTCA",
+ "templatePolicy.policyModelId" : "onap.policies.monitoring.docker.mtca.app",
+ "updatedBy":"tester",
+ "templateId":"aaaa_bbbb_cccc",
+ "timestamp":"2019-09-06 19:09:42"
+ });
+ }
+ });
+ });
+ const component = mount(<ViewBlueprintMicroServiceTemplatesModal/>);
+ 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",
+ "content": "MTCA version 1",
+ "templateName": "MTCA",
+ "templatePolicy.policyModelId" : "onap.policies.monitoring.docker.mtca.app",
+ "updatedBy":"tester",
+ "templateId":"aaaa_bbbb_cccc",
+ "timestamp":"2019-09-06 19:09:42"
+ });
+ }
+ });
+ });
+ const yamlContent = 'MTCA Tosca model details';
+ const component = shallow(<ViewBlueprintMicroServiceTemplatesModal/>);
+ component.find('[value="Please select Blue print template to view the details"]').prop('onChange')({ target: { value: yamlContent }});
+ expect(component.state('content')).toEqual(yamlContent);
+ });
+
+ it('Test handleClose', () => {
+ fetch.mockImplementationOnce(() => {
+ return Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "content": "MTCA version 1",
+ "templateName": "MTCA",
+ "templatePolicy.policyModelId" : "onap.policies.monitoring.docker.mtca.app",
+ "updatedBy":"tester",
+ "templateId":"aaaa_bbbb_cccc",
+ "timestamp":"2019-09-06 19:09:42"
+ });
+ }
+ });
+ });
+ const historyMock = { push: jest.fn() };
+ const handleClose = jest.spyOn(ViewBlueprintMicroServiceTemplatesModal.prototype,'handleClose');
+ const component = shallow(<ViewBlueprintMicroServiceTemplatesModal history={historyMock} />)
+ component.find('[variant="secondary"]').prop('onClick')();
+ expect(handleClose).toHaveBeenCalledTimes(1);
+ expect(component.state('show')).toEqual(false);
+ expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+ handleClose.mockClear();
+ });
+ }); \ No newline at end of file
diff --git a/ui-react/src/components/dialogs/ViewToscaModal/ViewToscaModal.js b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js
index fbfb4a78..6a93d4d9 100644
--- a/ui-react/src/components/dialogs/ViewToscaModal/ViewToscaModal.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.js
@@ -39,12 +39,20 @@ import Search from '@material-ui/icons/Search';
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 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'};
-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 ViewToscalModal extends React.Component {
+export default class ViewToscalPolicyModal extends React.Component {
state = {
show: true,
@@ -53,28 +61,28 @@ export default class ViewToscalModal extends React.Component {
toscaNames: [],
toscaColumns: [
{ title: "#", field: "index", render: rowData => rowData.tableData.id + 1,
- cellStyle: vtmCellStyle,
- headerStyle: vtmHeaderStyle
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
},
{ title: "Micro Service Name", field: "toscaModelName",
- cellStyle: vtmCellStyle,
- headerStyle: vtmHeaderStyle
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
},
{ title: "PolicyType", field: "policyType",
- cellStyle: vtmCellStyle,
- headerStyle: vtmHeaderStyle
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
},
- { title: "Version", field: "version",
- cellStyle: vtmCellStyle,
- headerStyle: vtmHeaderStyle
+ { title: "Version", field: "toscaModelRevisions[0].version",
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
},
{ title: "Uploaded By", field: "userId",
- cellStyle: vtmCellStyle,
- headerStyle: vtmHeaderStyle
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
},
{ title: "Uploaded Date", field: "lastUpdatedDate", editable: 'never',
- cellStyle: vtmCellStyle,
- headerStyle: vtmHeaderStyle
+ cellStyle: cellStyle,
+ headerStyle: headerStyle
}
],
tableIcons: {
@@ -91,16 +99,16 @@ export default class ViewToscalModal extends React.Component {
constructor(props, context) {
super(props, context);
this.handleClose = this.handleClose.bind(this);
- this.getToscaModels = this.getToscaModels.bind(this);
+ this.getPolicyToscaModels = this.getToscaPolicyModels.bind(this);
this.handleYamlContent = this.handleYamlContent.bind(this);
}
componentWillMount() {
- this.getToscaModels();
+ this.getToscaPolicyModels();
}
- getToscaModels() {
- TemplateMenuService.getToscaModels().then(toscaNames => {
+ getToscaPolicyModels() {
+ TemplateMenuService.getToscaPolicyModels().then(toscaNames => {
this.setState({ toscaNames: toscaNames });
});
}
@@ -118,24 +126,23 @@ export default class ViewToscalModal extends React.Component {
return (
<ModalStyled size="xl" show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
- <Modal.Title className="title">View Tosca Model</Modal.Title>
</Modal.Header>
<Modal.Body>
<MaterialTable
- title={"View ToscaModel"}
+ title={"View Tosca Policy Models"}
data={this.state.toscaNames}
columns={this.state.toscaColumns}
icons={this.state.tableIcons}
onRowClick={(event, rowData) => {this.setState({content: rowData.toscaModelRevisions[0].toscaModelYaml, selectedRow: rowData.tableData.id})}}
options={{
- headerStyle: vtmRowHeaderStyle,
+ headerStyle: rowHeaderStyle,
rowStyle: rowData => ({
backgroundColor: (this.state.selectedRow !== -1 && this.state.selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
})
}}
/>
<div>
- <textarea value={this.state.content} onChange={this.handleYamlContent}/>
+ <TextModal value={this.state.content} onChange={this.handleYamlContent}/>
</div>
</Modal.Body>
<Modal.Footer>
diff --git a/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.test.js b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.test.js
new file mode 100644
index 00000000..1445e886
--- /dev/null
+++ b/ui-react/src/components/dialogs/Tosca/ViewToscaPolicyModal.test.js
@@ -0,0 +1,195 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP CLAMP
+ * ================================================================================
+ * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ * reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END============================================
+ * ===================================================================
+ *
+ */
+import React from 'react';
+import { shallow } from 'enzyme';
+import ViewToscaPolicyModal from './ViewToscaPolicyModal';
+import { mount } from 'enzyme';
+
+
+describe('Verify ViewToscaPolicyModal', () => {
+ beforeEach(() => {
+ fetch.resetMocks();
+ });
+
+ it('Test API Successful', () => {
+ fetch.mockImplementationOnce(() => {
+ return Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "toscaModelYaml":"MTCA",
+ "toscaModelName":"DCAE_MTCAConfig",
+ "version":"16",
+ "userId":"aj928f",
+ "policyType":"mtca",
+ "lastUpdatedDate":"05-07-2019 19:09:42"
+ });
+ }
+ });
+ });
+ const component = shallow(<ViewToscaPolicyModal/>);
+ });
+
+ it('Test API Exception', () => {
+ fetch.mockImplementationOnce(() => {
+ return Promise.resolve({
+ ok: false,
+ status: 500,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "toscaModelName":"DCAE_MTCAConfig",
+ "version":"16",
+ "userId":"aj928f",
+ "policyType":"mtca",
+ "lastUpdatedDate":"05-07-2019 19:09:42"
+ });
+ }
+ });
+ });
+ const component = shallow(<ViewToscaPolicyModal/>);
+ });
+
+ it('Test API Rejection', () => {
+ const myMockFunc = fetch.mockImplementationOnce(() => Promise.reject('error'));
+ setTimeout(
+ () =>
+ myMockFunc().catch(e => {
+ console.log(e);
+ }),
+ 100
+ );
+ new Promise(resolve => setTimeout(resolve, 200));
+ const component = shallow(<ViewToscaPolicyModal/>);
+ expect(myMockFunc.mock.calls.length).toBe(1);
+ });
+
+
+ it('Test the tosca model view render method', () => {
+ fetch.mockImplementationOnce(() => {
+ return Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "toscaModelYaml":"MTCA",
+ "toscaModelName":"DCAE_MTCAConfig",
+ "version":"16",
+ "userId":"aj928f",
+ "policyType":"mtca",
+ "lastUpdatedDate":"05-07-2019 19:09:42"
+ });
+ }
+ });
+ });
+ const component = shallow(<ViewToscaPolicyModal/>);
+ component.setState({ toscaNames: {
+ "index": "1",
+ "toscaModelYaml": "MTCA",
+ "toscaModelName": "DCAE_MTCAConfig",
+ "version" : "16",
+ "userId" : "aj928f",
+ "policyType" : "mtca",
+ "lastUpdatedDate" : "05-07-2019 19:09:42"
+ }
+ });
+ expect(component).toMatchSnapshot();
+ });
+
+ it('Test Table icons', () => {
+ fetch.mockImplementationOnce(() => {
+ return Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "toscaModelYaml":"MTCA",
+ "toscaModelName":"DCAE_MTCAConfig",
+ "version":"16",
+ "userId":"aj928f",
+ "policyType":"mtca",
+ "lastUpdatedDate":"05-07-2019 19:09:42"
+ });
+ }
+ });
+ });
+ const component = mount(<ViewToscaPolicyModal/>);
+ 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",
+ "toscaModelYaml":"MTCA",
+ "toscaModelName":"DCAE_MTCAConfig",
+ "version":"16",
+ "userId":"aj928f",
+ "policyType":"mtca",
+ "lastUpdatedDate":"05-07-2019 19:09:42"
+ });
+ }
+ });
+ });
+ const yamlContent = 'MTCA Tosca model details';
+ const component = shallow(<ViewToscaPolicyModal/>);
+ 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', () => {
+ fetch.mockImplementationOnce(() => {
+ return Promise.resolve({
+ ok: true,
+ status: 200,
+ json: () => {
+ return Promise.resolve({
+ "index": "1",
+ "toscaModelYaml":"MTCA",
+ "toscaModelName":"DCAE_MTCAConfig",
+ "version":"16",
+ "userId":"aj928f",
+ "policyType":"mtca",
+ "lastUpdatedDate":"05-07-2019 19:09:42"
+ });
+ }
+ });
+ });
+ const historyMock = { push: jest.fn() };
+ const handleClose = jest.spyOn(ViewToscaPolicyModal.prototype,'handleClose');
+ const component = shallow(<ViewToscaPolicyModal history={historyMock} />)
+ component.find('[variant="secondary"]').prop('onClick')();
+ expect(handleClose).toHaveBeenCalledTimes(1);
+ expect(component.state('show')).toEqual(false);
+ expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
+ handleClose.mockClear();
+ });
+}); \ No newline at end of file
diff --git a/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewBlueprintMicroServiceTemplatesModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewBlueprintMicroServiceTemplatesModal.test.js.snap
new file mode 100644
index 00000000..7dd4ee0d
--- /dev/null
+++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewBlueprintMicroServiceTemplatesModal.test.js.snap
@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify ViewBlueprintMicroServiceTemplatesModal Test the tosca model view render method 1`] = `
+<Styled(Bootstrap(Modal))
+ onHide={[Function]}
+ show={true}
+ size="xl"
+>
+ <ModalHeader
+ closeButton={true}
+ closeLabel="Close"
+ />
+ <ModalBody>
+ <WithStyles(Component)
+ columns={
+ Array [
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "field": "index",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "render": [Function],
+ "title": "#",
+ },
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "field": "templateName",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "title": "Template Name",
+ },
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "field": "templatePolicy[0].policyModelId",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "title": "Policy Model",
+ },
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "field": "templateId",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "title": "Template ID",
+ },
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "field": "updatedBy",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "title": "Uploaded By",
+ },
+ Object {
+ "cellStyle": Object {
+ "border": "1px solid black",
+ },
+ "editable": "never",
+ "field": "timestamp",
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "2px solid black",
+ },
+ "title": "Uploaded Date",
+ },
+ ]
+ }
+ data={
+ Object {
+ "content": "MTCA version 1",
+ "index": "1",
+ "templateId": "aaaa_bbbb_cccc",
+ "templateName": "MTCA",
+ "templatePolicy.policyModelId": "onap.policies.monitoring.docker.mtca.app",
+ "timestamp": "2019-09-06 19:09:42",
+ "updatedBy": "tester",
+ }
+ }
+ icons={
+ Object {
+ "FirstPage": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "LastPage": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "NextPage": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "PreviousPage": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "ResetSearch": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "Search": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ "SortArrow": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "render": [Function],
+ },
+ }
+ }
+ onRowClick={[Function]}
+ options={
+ Object {
+ "headerStyle": Object {
+ "backgroundColor": "#ddd",
+ "border": "1px solid black",
+ "fontSize": "15pt",
+ "text": "bold",
+ },
+ "rowStyle": [Function],
+ }
+ }
+ title="View Blueprint MicroService Templates"
+ />
+ <div>
+ <styled.textarea
+ onChange={[Function]}
+ value="Please select Blue print template to view the details"
+ />
+ </div>
+ </ModalBody>
+ <ModalFooter>
+ <Button
+ active={false}
+ disabled={false}
+ onClick={[Function]}
+ type="button"
+ variant="secondary"
+ >
+ Close
+ </Button>
+ </ModalFooter>
+</Styled(Bootstrap(Modal))>
+`;
diff --git a/ui-react/src/components/dialogs/ViewToscaModal/__snapshots__/ViewToscaModal.test.js.snap b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap
index 3523adad..e7294c08 100644
--- a/ui-react/src/components/dialogs/ViewToscaModal/__snapshots__/ViewToscaModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Tosca/__snapshots__/ViewToscaPolicyModal.test.js.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Verify ViewToscaModal Test the tosca model view render method 1`] = `
+exports[`Verify ViewToscaPolicyModal Test the tosca model view render method 1`] = `
<Styled(Bootstrap(Modal))
onHide={[Function]}
show={true}
@@ -9,13 +9,7 @@ exports[`Verify ViewToscaModal Test the tosca model view render method 1`] = `
<ModalHeader
closeButton={true}
closeLabel="Close"
- >
- <ModalTitle
- className="title"
- >
- View Tosca Model
- </ModalTitle>
- </ModalHeader>
+ />
<ModalBody>
<WithStyles(Component)
columns={
@@ -58,7 +52,7 @@ exports[`Verify ViewToscaModal Test the tosca model view render method 1`] = `
"cellStyle": Object {
"border": "1px solid black",
},
- "field": "version",
+ "field": "toscaModelRevisions[0].version",
"headerStyle": Object {
"backgroundColor": "#ddd",
"border": "2px solid black",
@@ -145,10 +139,10 @@ exports[`Verify ViewToscaModal Test the tosca model view render method 1`] = `
"rowStyle": [Function],
}
}
- title="View ToscaModel"
+ title="View Tosca Policy Models"
/>
<div>
- <textarea
+ <styled.textarea
onChange={[Function]}
value="Please select Tosca model to view the details"
/>
diff --git a/ui-react/src/components/dialogs/ViewToscaModal/ViewToscaModal.test.js b/ui-react/src/components/dialogs/ViewToscaModal/ViewToscaModal.test.js
deleted file mode 100644
index 4dbe3761..00000000
--- a/ui-react/src/components/dialogs/ViewToscaModal/ViewToscaModal.test.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * ONAP CLAMP
- * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
- * reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END============================================
- * ===================================================================
- *
- */
-import React from 'react';
-import { shallow } from 'enzyme';
-import ViewToscaModal from './ViewToscaModal';
-import { mount } from 'enzyme';
-
-
-describe('Verify ViewToscaModal', () => {
- beforeEach(() => {
- fetch.resetMocks();
- fetch.mockImplementation(() => {
- return Promise.resolve({
- ok: true,
- status: 200,
- json: () => {
- return Promise.resolve({
- "index": "1",
- "toscaModelYaml":"MTCA",
- "toscaModelName":"DCAE_MTCAConfig",
- "version":"16",
- "userId":"aj928f",
- "policyType":"mtca",
- "lastUpdatedDate":"05-07-2019 19:09:42"
- });
- }
- });
- });
- });
-
- it('Test the tosca model view render method', () => {
- const component = shallow(<ViewToscaModal/>);
- component.setState({ toscaNames: {
- "index": "1",
- "toscaModelYaml": "MTCA",
- "toscaModelName": "DCAE_MTCAConfig",
- "version" : "16",
- "userId" : "aj928f",
- "policyType" : "mtca",
- "lastUpdatedDate" : "05-07-2019 19:09:42"
- }
- });
- expect(component).toMatchSnapshot();
- });
-
- it('Test Table icons', () => {
- 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(<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(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);
- expect(historyMock.push.mock.calls[0]).toEqual([ '/']);
- handleClose.mockClear();
- });
-});
diff --git a/ui-react/src/components/menu/MenuBar.js b/ui-react/src/components/menu/MenuBar.js
index bbfa82a1..e211b0ea 100644
--- a/ui-react/src/components/menu/MenuBar.js
+++ b/ui-react/src/components/menu/MenuBar.js
@@ -88,7 +88,8 @@ export default class MenuBar extends React.Component {
<Navbar.Collapse>
<StyledNavDropdown title="Template">
- <NavDropdown.Item as={StyledLink} to="/viewToscaModal">View Tosca Model</NavDropdown.Item>
+ <NavDropdown.Item as={StyledLink} to="/viewToscaPolicyModal">View Tosca Policy Models</NavDropdown.Item>
+ <NavDropdown.Item as={StyledLink} to="/viewBlueprintMicroServiceTemplatesModal">View Blueprint MicroService Templates</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 9082eccd..1670124c 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-dxgOiQ",
+ "componentId": "sc-eNQAEJ",
"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-dxgOiQ",
+ "styledComponentId": "sc-eNQAEJ",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -52,9 +52,60 @@ exports[`Verify MenuBar Test the render method 1`] = `
}
}
disabled={false}
- to="/viewToscaModal"
+ to="/viewToscaPolicyModal"
>
- View Tosca Model
+ View Tosca Policy Models
+ </DropdownItem>
+ <DropdownItem
+ as={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "attrs": Array [],
+ "componentStyle": ComponentStyle {
+ "componentId": "sc-eNQAEJ",
+ "isStatic": false,
+ "rules": Array [
+ "
+ color: ",
+ [Function],
+ ";
+ background-color: ",
+ [Function],
+ ";
+ font-weight: normal;
+ display: block;
+ width: 100%;
+ padding: .25rem 1.5rem;
+ clear: both;
+ text-align: inherit;
+ white-space: nowrap;
+ border: 0;
+ :hover {
+ text-decoration: none;
+ background-color: ",
+ [Function],
+ ";
+ color: ",
+ [Function],
+ ";
+ }
+",
+ ],
+ },
+ "displayName": "Styled(Link)",
+ "foldedComponentIds": Array [],
+ "render": [Function],
+ "styledComponentId": "sc-eNQAEJ",
+ "target": [Function],
+ "toString": [Function],
+ "warnTooManyClasses": [Function],
+ "withComponent": [Function],
+ }
+ }
+ disabled={false}
+ to="/viewBlueprintMicroServiceTemplatesModal"
+ >
+ View Blueprint MicroService Templates
</DropdownItem>
</Styled(NavDropdown)>
<Styled(NavDropdown)
@@ -66,7 +117,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-dxgOiQ",
+ "componentId": "sc-eNQAEJ",
"isStatic": false,
"rules": Array [
"
@@ -99,7 +150,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-dxgOiQ",
+ "styledComponentId": "sc-eNQAEJ",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -117,7 +168,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-dxgOiQ",
+ "componentId": "sc-eNQAEJ",
"isStatic": false,
"rules": Array [
"
@@ -150,7 +201,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-dxgOiQ",
+ "styledComponentId": "sc-eNQAEJ",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -168,7 +219,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-dxgOiQ",
+ "componentId": "sc-eNQAEJ",
"isStatic": false,
"rules": Array [
"
@@ -201,7 +252,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-dxgOiQ",
+ "styledComponentId": "sc-eNQAEJ",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -223,7 +274,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-dxgOiQ",
+ "componentId": "sc-eNQAEJ",
"isStatic": false,
"rules": Array [
"
@@ -256,7 +307,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-dxgOiQ",
+ "styledComponentId": "sc-eNQAEJ",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -274,7 +325,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-dxgOiQ",
+ "componentId": "sc-eNQAEJ",
"isStatic": false,
"rules": Array [
"
@@ -307,7 +358,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-dxgOiQ",
+ "styledComponentId": "sc-eNQAEJ",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -325,7 +376,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-dxgOiQ",
+ "componentId": "sc-eNQAEJ",
"isStatic": false,
"rules": Array [
"
@@ -358,7 +409,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-dxgOiQ",
+ "styledComponentId": "sc-eNQAEJ",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -376,7 +427,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-dxgOiQ",
+ "componentId": "sc-eNQAEJ",
"isStatic": false,
"rules": Array [
"
@@ -409,7 +460,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-dxgOiQ",
+ "styledComponentId": "sc-eNQAEJ",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -427,7 +478,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-dxgOiQ",
+ "componentId": "sc-eNQAEJ",
"isStatic": false,
"rules": Array [
"
@@ -460,7 +511,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-dxgOiQ",
+ "styledComponentId": "sc-eNQAEJ",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -478,7 +529,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-dxgOiQ",
+ "componentId": "sc-eNQAEJ",
"isStatic": false,
"rules": Array [
"
@@ -511,7 +562,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-dxgOiQ",
+ "styledComponentId": "sc-eNQAEJ",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -533,7 +584,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-dxgOiQ",
+ "componentId": "sc-eNQAEJ",
"isStatic": false,
"rules": Array [
"
@@ -566,7 +617,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-dxgOiQ",
+ "styledComponentId": "sc-eNQAEJ",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
@@ -599,7 +650,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
- "componentId": "sc-dxgOiQ",
+ "componentId": "sc-eNQAEJ",
"isStatic": false,
"rules": Array [
"
@@ -632,7 +683,7 @@ exports[`Verify MenuBar Test the render method 1`] = `
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
- "styledComponentId": "sc-dxgOiQ",
+ "styledComponentId": "sc-eNQAEJ",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js
index bb41bc19..3656f9e9 100644
--- a/ui-react/src/theme/globalStyle.js
+++ b/ui-react/src/theme/globalStyle.js
@@ -86,9 +86,12 @@ export const DefaultClampTheme = {
loopViewerFontColor: 'yellow',
loopViewerHeaderBackgroundColor: '#337ab7',
loopViewerHeaderFontColor: 'white',
-
+
menuBackgroundColor: 'white',
menuFontColor: 'black',
menuHighlightedBackgroundColor: '#337ab7',
- menuHighlightedFontColor: 'white'
+ menuHighlightedFontColor: 'white',
+
+ toscaTextareaBackgroundColor: '#E8E8E8',
+ toscaTextareaFontSize: '13px'
};