Add Tests on UI

Add some test to UI and fix errors reported by JEST during Ui tests

Issue-ID: POLICY-3200
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
Change-Id: I69e93ad1f1714fa60a0c7ea9b1f3fb691f089f8a
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

23 files changed, 1356 insertions, 64 deletions

diff --git a/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js b/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
index 1caa22dc7..8ef53b412 100644
--- a/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
+++ b/ui-react/src/components/dialogs/Loop/CreateLoopModal.test.js
@@ -26,6 +26,10 @@ import CreateLoopModal from './CreateLoopModal';
 import LoopService from '../../../api/LoopService';
 import TemplateService from '../../../api/TemplateService';
 
+let errorMessage = '';
+window.alert = jest.fn().mockImplementation((mesg) => { errorMessage = mesg ; return });
+
+
 describe('Verify CreateLoopModal', () => {
 
   it('Test the render method', async () => {
diff --git a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
index 921ba1806..803cfa9cb 100644
--- a/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/DeployLoopModal.js
@@ -138,7 +138,7 @@ export default class DeployLoopModal extends React.Component {
 		const deployJsonList = this.state.temporaryPropertiesJson["dcaeDeployParameters"];
 		var indents = [];
 		Object.keys(deployJsonList).forEach(item =>
-			indents.push(<Tab eventKey={item} title={item}>
+			indents.push(<Tab key={item} eventKey={item} title={item}>
 				{this.renderDeployParam(deployJsonList[item])}
 				</Tab>)
 		);
@@ -147,7 +147,7 @@ export default class DeployLoopModal extends React.Component {
 	renderDeployParam(deployJson) {
 		var indents = [];
 		Object.keys(deployJson).forEach(item =>
-		indents.push(<FormStyled>
+		indents.push(<FormStyled key={item}>
 				<Form.Label>{item}</Form.Label>
 				<Form.Control type="text" name={item} onChange={this.handleChange} defaultValue={deployJson[item]}></Form.Control>
 			</FormStyled>));
diff --git a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
index 5154a880b..f6c0d2ede 100644
--- a/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
+++ b/ui-react/src/components/dialogs/Loop/ModifyLoopModal.js
@@ -122,13 +122,6 @@ export default class ModifyLoopModal extends React.Component {
 		this.initializeToscaPolicyModelsInfo();
 	}
 
-	componentWillReceiveProps(newProps) {
-		this.setState({
-			loopCache: newProps.loopCache,
-			temporaryPropertiesJson: JSON.parse(JSON.stringify(newProps.loopCache.getGlobalProperties()))
-		});
-	}
-
 	initializeToscaPolicyModelsInfo() {
 		var operationalPolicies = this.state.loopCache.getOperationalPolicies();
 		var selectedPolicyModels = [];
diff --git a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
index 4779ced0d..33f8faa77 100644
--- a/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
+++ b/ui-react/src/components/dialogs/Loop/__snapshots__/DeployLoopModal.test.js.snap
@@ -26,9 +26,12 @@ exports[`Verify DeployLoopModal Test the render method 1`] = `
   >
     <Tab
       eventKey="testMs"
+      key="testMs"
       title="testMs"
     >
-      <Styled(FormGroup)>
+      <Styled(FormGroup)
+        key="location_id"
+      >
         <FormLabel
           column={false}
           srOnly={false}
@@ -42,7 +45,9 @@ exports[`Verify DeployLoopModal Test the render method 1`] = `
           type="text"
         />
       </Styled(FormGroup)>
-      <Styled(FormGroup)>
+      <Styled(FormGroup)
+        key="policy_id"
+      >
         <FormLabel
           column={false}
           srOnly={false}
diff --git a/ui-react/src/components/dialogs/Policy/PolicyEditor.js b/ui-react/src/components/dialogs/Policy/PolicyEditor.js
index 8ee48535f..be77f14e9 100644
--- a/ui-react/src/components/dialogs/Policy/PolicyEditor.js
+++ b/ui-react/src/components/dialogs/Policy/PolicyEditor.js
@@ -31,7 +31,6 @@ import TextField from '@material-ui/core/TextField';
 import Alert from 'react-bootstrap/Alert';
 import PolicyService from '../../../api/PolicyService';
 import OnapUtils from '../../../utils/OnapUtils';
-import uuid from 'react-uuid';
 
 const DivWhiteSpaceStyled = styled.div`
     white-space: pre;
@@ -61,7 +60,7 @@ export default class PolicyEditor extends React.Component {
         showSuccessAlert: false,
         showFailAlert: false,
         jsonEditor: null,
-        jsonEditorDivId: uuid(),
+        jsonEditorDivId: this.props.policyModelType + "_" + this.props.policyModelTypeVersion + "_" + this.props.policyName + "_" + this.props.policyVersion,
    }
 
    constructor(props, context) {
diff --git a/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js b/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js
new file mode 100644
index 000000000..0b734430a
--- /dev/null
+++ b/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js
@@ -0,0 +1,71 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP POLICY-CLAMP
+ * ================================================================================
+ * Copyright (C) 2021 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 PolicyEditor from './PolicyEditor';
+import { shallow, mount } from 'enzyme';
+import PolicyToscaService from '../../../api/PolicyToscaService';
+
+describe('Verify PolicyEditor', () => {
+    const fs = require('fs');
+
+    let toscaJson = fs.readFileSync('src/components/dialogs/Policy/toscaData.test.json', {encoding:'utf8', flag:'r'})
+
+    const policyProperties = {
+      "tca.policy": {
+        "domain": "measurementsForVfScaling",
+        "metricsPerEventName": [
+          {
+            "policyScope": "DCAE",
+            "thresholds": [
+              {
+                "version": "1.0.2",
+                "severity": "MAJOR",
+                "thresholdValue": 200,
+                "closedLoopEventStatus": "ONSET",
+                "closedLoopControlName": "LOOP_test",
+                "direction": "LESS_OR_EQUAL",
+                "fieldPath": "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsDelta"
+              }
+            ],
+            "eventName": "vLoadBalancer",
+            "policyVersion": "v0.0.1",
+            "controlLoopSchemaType": "VM",
+            "policyName": "DCAE.Config_tca-hi-lo"
+          }
+        ]
+      }
+    };
+
+
+    it('Test the render method',async () => {
+         PolicyToscaService.getToscaPolicyModel = jest.fn().mockImplementation(() => {
+            return Promise.resolve(toscaJson);
+         });
+
+        const component = mount(<PolicyEditor policyModelType="onap.policies.monitoring.tcagen2" policyModelTypeVersion="1.0.0"
+            policyName="org.onap.new" policyVersion="1.0.0" policyProperties={policyProperties}
+            policiesTableUpdateFunction={() => {}} />);
+        await PolicyToscaService.getToscaPolicyModel();
+        expect(component).toMatchSnapshot();
+    });
+});
\ No newline at end of file
diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.js b/ui-react/src/components/dialogs/Policy/PolicyModal.js
index 2fa0b5432..4a883fffa 100644
--- a/ui-react/src/components/dialogs/Policy/PolicyModal.js
+++ b/ui-react/src/components/dialogs/Policy/PolicyModal.js
@@ -138,21 +138,6 @@ export default class PolicyModal extends React.Component {
     }
 
     createJsonEditor(toscaModel, editorData) {
-        /*JSONEditor.defaults.themes.myBootstrap4 = JSONEditor.defaults.themes.bootstrap4.extend({
-                getTab: function(text,tabId) {
-                    var liel = document.createElement('li');
-                    liel.classList.add('nav-item');
-                    var ael = document.createElement("a");
-                    ael.classList.add("nav-link");
-                    ael.setAttribute("style",'padding:10px;max-width:160px;');
-                    ael.setAttribute("href", "#" + tabId);
-                    ael.setAttribute('data-toggle', 'tab');
-                    text.setAttribute("style",'word-wrap:break-word;');
-                    ael.appendChild(text);
-                    liel.appendChild(ael);
-                    return liel;
-                }
-            });*/
         return new JSONEditor(document.getElementById("editor"),
         {   schema: toscaModel,
               startval: editorData,
@@ -312,17 +297,17 @@ export default class PolicyModal extends React.Component {
     }
 
     renderButton() {
-        var allElement = [(<Button variant="secondary" onClick={this.handleClose}>
+        var allElement = [(<Button key="close" variant="secondary" onClick={this.handleClose}>
                                                    Close
                          </Button>)];
         if(this.state.policyInstanceType !== OnapConstant.operationalPolicyType || !this.state.loopCache.isOpenLoopTemplate()) {
              allElement.push((
-                <Button variant="primary" disabled={this.readOnly} onClick={this.handleSave}>
+                <Button key="save" variant="primary" disabled={this.readOnly} onClick={this.handleSave}>
                                 Save Changes
                 </Button>
              ));
              allElement.push((
-                <Button variant="primary" disabled={this.readOnly} onClick={this.handleRefresh}>
+                <Button key="refresh" variant="primary" disabled={this.readOnly} onClick={this.handleRefresh}>
                                 Refresh
                 </Button>
              ));
diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.test.js b/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
index cb0a32020..1e6fac0a0 100644
--- a/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
+++ b/ui-react/src/components/dialogs/Policy/PolicyModal.test.js
@@ -1,8 +1,8 @@
 /*-
  * ============LICENSE_START=======================================================
- * ONAP CLAMP
+ * ONAP POLICY-CLAMP
  * ================================================================================
- * Copyright (C) 2020 AT&T Intellectual Property. All rights
+ * Copyright (C) 2020-2021 AT&T Intellectual Property. All rights
  *                             reserved.
  * ================================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -26,6 +26,7 @@ import PolicyModal from './PolicyModal';
 import LoopCache from '../../../api/LoopCache';
 import LoopService from '../../../api/LoopService';
 import OnapConstant from '../../../utils/OnapConstants';
+import { shallow } from 'enzyme';
 
 describe('Verify PolicyModal', () => {
     beforeEach(() => {
@@ -52,11 +53,12 @@ describe('Verify PolicyModal', () => {
                 "jsonRepresentation" : {"schema": {}}
              }]
     };
+
     const loopCache = new LoopCache(loopCacheStr);
     const historyMock = { push: jest.fn() };
     const flushPromises = () => new Promise(setImmediate);
     const match = {params: {policyName:"OPERATIONAL_h2NMX_v1_0_ResourceInstanceName1_tca", policyInstanceType: OnapConstant.operationalPolicyType}}
-        
+
     it('Test handleClose', () => {
       const handleClose = jest.spyOn(PolicyModal.prototype,'handleClose');
       const component = mount(<PolicyModal history={historyMock} match={match} loopCache={loopCache}/>)
@@ -125,4 +127,9 @@ describe('Verify PolicyModal', () => {
         instance.handlePdpSubgroupChange(event);
         expect(component.state('chosenPdpSubgroup')).toEqual("option1");
     });
+
+    it('Test the render method', () => {
+        const component = shallow(<PolicyModal loopCache={loopCache} match={match}/>)
+        expect(component).toMatchSnapshot();
+    });
 });
\ No newline at end of file
diff --git a/ui-react/src/components/dialogs/Policy/ToscaViewer.js b/ui-react/src/components/dialogs/Policy/ToscaViewer.js
index d150e39db..fa83aa245 100644
--- a/ui-react/src/components/dialogs/Policy/ToscaViewer.js
+++ b/ui-react/src/components/dialogs/Policy/ToscaViewer.js
@@ -49,18 +49,18 @@ export default class ToscaViewer extends React.Component {
    getToscaModelYamlFor(toscaData) {
         PolicyToscaService.getToscaPolicyModelYaml(toscaData["policyModelType"], toscaData["version"]).then(respYamlPolicyTosca => {
             this.setState({
-                            yamlPolicyTosca: respYamlPolicyTosca,
-                        })
+                yamlPolicyTosca: respYamlPolicyTosca,
+            })
         });
    }
 
    render() {
        return (
-                    <ToscaDiv>
-                        <pre>{this.state.yamlPolicyTosca}</pre>
-                        <Button variant="secondary" title="Create a new policy version from the defined parameters"
-                            onClick={this.handleCreateNewVersion}>Create New Version</Button>
-                    </ToscaDiv>
+           <ToscaDiv>
+               <pre>{this.state.yamlPolicyTosca}</pre>
+               <Button variant="secondary" title="Create a new policy version from the defined parameters"
+                   onClick={this.handleCreateNewVersion}>Create New Version</Button>
+           </ToscaDiv>
        );
    }
-}
\ No newline at end of file
+}
diff --git a/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js b/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js
new file mode 100644
index 000000000..cc8c59a03
--- /dev/null
+++ b/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js
@@ -0,0 +1,54 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * ONAP POLICY-CLAMP
+ * ================================================================================
+ * Copyright (C) 2021 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 ToscaViewer from './ToscaViewer';
+import { shallow, mount } from 'enzyme';
+import PolicyToscaService from '../../../api/PolicyToscaService';
+
+describe('Verify ToscaViewer', () => {
+    const fs = require('fs');
+
+    let toscaYaml = fs.readFileSync('src/components/dialogs/Policy/toscaData.test.yaml', {encoding:'utf8', flag:'r'})
+
+    const toscaData = {
+      "policyModelType": "onap.policies.controlloop.Guard",
+      "version": "1.0.0",
+      "policyAcronym": "Guard",
+      "createdDate": "2021-04-09T02:29:31.407356Z",
+      "updatedDate": "2021-04-09T02:29:31.407356Z",
+      "updatedBy": "Not found",
+      "createdBy": "Not found",
+      "tableData": {
+        "id": 0
+      }
+    };
+
+	it('Test the render method',async () => {
+	     PolicyToscaService.getToscaPolicyModelYaml = jest.fn().mockImplementation(() => {
+	        return Promise.resolve(toscaYaml);
+         });
+		const component = shallow(<ToscaViewer toscaData={toscaData}/>);
+		await PolicyToscaService.getToscaPolicyModelYaml();
+    	expect(component).toMatchSnapshot();
+	});
+});
diff --git a/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyEditor.test.js.snap b/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyEditor.test.js.snap
new file mode 100644
index 000000000..959b52a36
--- /dev/null
+++ b/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyEditor.test.js.snap
@@ -0,0 +1,788 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify PolicyEditor Test the render method 1`] = `
+<PolicyEditor
+  policiesTableUpdateFunction={[Function]}
+  policyModelType="onap.policies.monitoring.tcagen2"
+  policyModelTypeVersion="1.0.0"
+  policyName="org.onap.new"
+  policyProperties={
+    Object {
+      "tca.policy": Object {
+        "domain": "measurementsForVfScaling",
+        "metricsPerEventName": Array [
+          Object {
+            "controlLoopSchemaType": "VM",
+            "eventName": "vLoadBalancer",
+            "policyName": "DCAE.Config_tca-hi-lo",
+            "policyScope": "DCAE",
+            "policyVersion": "v0.0.1",
+            "thresholds": Array [
+              Object {
+                "closedLoopControlName": "LOOP_test",
+                "closedLoopEventStatus": "ONSET",
+                "direction": "LESS_OR_EQUAL",
+                "fieldPath": "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsDelta",
+                "severity": "MAJOR",
+                "thresholdValue": 200,
+                "version": "1.0.2",
+              },
+            ],
+          },
+        ],
+      },
+    }
+  }
+  policyVersion="1.0.0"
+>
+  <styled.div>
+    <div
+      className="sc-dlfnbm iSTbVM"
+    >
+      <Alert
+        closeLabel="Close alert"
+        dismissible={true}
+        onClose={[Function]}
+        show={false}
+        transition={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "defaultProps": Object {
+              "appear": false,
+              "in": false,
+              "mountOnEnter": false,
+              "timeout": 300,
+              "unmountOnExit": false,
+            },
+            "render": [Function],
+          }
+        }
+        variant="success"
+      >
+        <Fade
+          appear={false}
+          in={false}
+          mountOnEnter={false}
+          timeout={300}
+          unmountOnExit={true}
+        >
+          <Transition
+            addEndListener={[Function]}
+            appear={false}
+            enter={true}
+            exit={true}
+            in={false}
+            mountOnEnter={false}
+            onEnter={[Function]}
+            onEntered={[Function]}
+            onEntering={[Function]}
+            onExit={[Function]}
+            onExited={[Function]}
+            onExiting={[Function]}
+            timeout={300}
+            unmountOnExit={true}
+          />
+        </Fade>
+      </Alert>
+      <Alert
+        closeLabel="Close alert"
+        dismissible={true}
+        onClose={[Function]}
+        show={false}
+        transition={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "defaultProps": Object {
+              "appear": false,
+              "in": false,
+              "mountOnEnter": false,
+              "timeout": 300,
+              "unmountOnExit": false,
+            },
+            "render": [Function],
+          }
+        }
+        variant="danger"
+      >
+        <Fade
+          appear={false}
+          in={false}
+          mountOnEnter={false}
+          timeout={300}
+          unmountOnExit={true}
+        >
+          <Transition
+            addEndListener={[Function]}
+            appear={false}
+            enter={true}
+            exit={true}
+            in={false}
+            mountOnEnter={false}
+            onEnter={[Function]}
+            onEntered={[Function]}
+            onEntering={[Function]}
+            onExit={[Function]}
+            onExited={[Function]}
+            onExiting={[Function]}
+            timeout={300}
+            unmountOnExit={true}
+          />
+        </Fade>
+      </Alert>
+      <WithStyles(ForwardRef(TextField))
+        defaultValue="org.onap.new"
+        id="policyName"
+        label="Required"
+        onChange={[Function]}
+        required={true}
+        size="small"
+        variant="outlined"
+      >
+        <ForwardRef(TextField)
+          classes={
+            Object {
+              "root": "MuiTextField-root",
+            }
+          }
+          defaultValue="org.onap.new"
+          id="policyName"
+          label="Required"
+          onChange={[Function]}
+          required={true}
+          size="small"
+          variant="outlined"
+        >
+          <WithStyles(ForwardRef(FormControl))
+            className="MuiTextField-root"
+            color="primary"
+            disabled={false}
+            error={false}
+            fullWidth={false}
+            required={true}
+            size="small"
+            variant="outlined"
+          >
+            <ForwardRef(FormControl)
+              className="MuiTextField-root"
+              classes={
+                Object {
+                  "fullWidth": "MuiFormControl-fullWidth",
+                  "marginDense": "MuiFormControl-marginDense",
+                  "marginNormal": "MuiFormControl-marginNormal",
+                  "root": "MuiFormControl-root",
+                }
+              }
+              color="primary"
+              disabled={false}
+              error={false}
+              fullWidth={false}
+              required={true}
+              size="small"
+              variant="outlined"
+            >
+              <div
+                className="MuiFormControl-root MuiTextField-root"
+              >
+                <WithStyles(ForwardRef(InputLabel))
+                  htmlFor="policyName"
+                  id="policyName-label"
+                >
+                  <ForwardRef(InputLabel)
+                    classes={
+                      Object {
+                        "animated": "MuiInputLabel-animated",
+                        "asterisk": "MuiInputLabel-asterisk",
+                        "disabled": "Mui-disabled",
+                        "error": "Mui-error",
+                        "filled": "MuiInputLabel-filled",
+                        "focused": "Mui-focused",
+                        "formControl": "MuiInputLabel-formControl",
+                        "marginDense": "MuiInputLabel-marginDense",
+                        "outlined": "MuiInputLabel-outlined",
+                        "required": "Mui-required",
+                        "root": "MuiInputLabel-root",
+                        "shrink": "MuiInputLabel-shrink",
+                      }
+                    }
+                    htmlFor="policyName"
+                    id="policyName-label"
+                  >
+                    <WithStyles(ForwardRef(FormLabel))
+                      className="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined"
+                      classes={
+                        Object {
+                          "asterisk": "MuiInputLabel-asterisk",
+                          "disabled": "Mui-disabled",
+                          "error": "Mui-error",
+                          "focused": "Mui-focused",
+                          "required": "Mui-required",
+                        }
+                      }
+                      data-shrink={true}
+                      htmlFor="policyName"
+                      id="policyName-label"
+                    >
+                      <ForwardRef(FormLabel)
+                        className="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined"
+                        classes={
+                          Object {
+                            "asterisk": "MuiFormLabel-asterisk MuiInputLabel-asterisk",
+                            "colorSecondary": "MuiFormLabel-colorSecondary",
+                            "disabled": "Mui-disabled Mui-disabled",
+                            "error": "Mui-error Mui-error",
+                            "filled": "MuiFormLabel-filled",
+                            "focused": "Mui-focused Mui-focused",
+                            "required": "Mui-required Mui-required",
+                            "root": "MuiFormLabel-root",
+                          }
+                        }
+                        data-shrink={true}
+                        htmlFor="policyName"
+                        id="policyName-label"
+                      >
+                        <label
+                          className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
+                          data-shrink={true}
+                          htmlFor="policyName"
+                          id="policyName-label"
+                        >
+                          Required
+                          <span
+                            aria-hidden={true}
+                            className="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                          >
+                             
+                            *
+                          </span>
+                        </label>
+                      </ForwardRef(FormLabel)>
+                    </WithStyles(ForwardRef(FormLabel))>
+                  </ForwardRef(InputLabel)>
+                </WithStyles(ForwardRef(InputLabel))>
+                <WithStyles(ForwardRef(OutlinedInput))
+                  autoFocus={false}
+                  defaultValue="org.onap.new"
+                  fullWidth={false}
+                  id="policyName"
+                  label={
+                    <React.Fragment>
+                      Required
+                       *
+                    </React.Fragment>
+                  }
+                  multiline={false}
+                  onChange={[Function]}
+                >
+                  <ForwardRef(OutlinedInput)
+                    autoFocus={false}
+                    classes={
+                      Object {
+                        "adornedEnd": "MuiOutlinedInput-adornedEnd",
+                        "adornedStart": "MuiOutlinedInput-adornedStart",
+                        "colorSecondary": "MuiOutlinedInput-colorSecondary",
+                        "disabled": "Mui-disabled",
+                        "error": "Mui-error",
+                        "focused": "Mui-focused",
+                        "input": "MuiOutlinedInput-input",
+                        "inputAdornedEnd": "MuiOutlinedInput-inputAdornedEnd",
+                        "inputAdornedStart": "MuiOutlinedInput-inputAdornedStart",
+                        "inputMarginDense": "MuiOutlinedInput-inputMarginDense",
+                        "inputMultiline": "MuiOutlinedInput-inputMultiline",
+                        "marginDense": "MuiOutlinedInput-marginDense",
+                        "multiline": "MuiOutlinedInput-multiline",
+                        "notchedOutline": "MuiOutlinedInput-notchedOutline",
+                        "root": "MuiOutlinedInput-root",
+                      }
+                    }
+                    defaultValue="org.onap.new"
+                    fullWidth={false}
+                    id="policyName"
+                    label={
+                      <React.Fragment>
+                        Required
+                         *
+                      </React.Fragment>
+                    }
+                    multiline={false}
+                    onChange={[Function]}
+                  >
+                    <WithStyles(ForwardRef(InputBase))
+                      autoFocus={false}
+                      classes={
+                        Object {
+                          "adornedEnd": "MuiOutlinedInput-adornedEnd",
+                          "adornedStart": "MuiOutlinedInput-adornedStart",
+                          "colorSecondary": "MuiOutlinedInput-colorSecondary",
+                          "disabled": "Mui-disabled",
+                          "error": "Mui-error",
+                          "focused": "Mui-focused",
+                          "input": "MuiOutlinedInput-input",
+                          "inputAdornedEnd": "MuiOutlinedInput-inputAdornedEnd",
+                          "inputAdornedStart": "MuiOutlinedInput-inputAdornedStart",
+                          "inputMarginDense": "MuiOutlinedInput-inputMarginDense",
+                          "inputMultiline": "MuiOutlinedInput-inputMultiline",
+                          "marginDense": "MuiOutlinedInput-marginDense",
+                          "multiline": "MuiOutlinedInput-multiline",
+                          "notchedOutline": null,
+                          "root": "MuiOutlinedInput-root",
+                        }
+                      }
+                      defaultValue="org.onap.new"
+                      fullWidth={false}
+                      id="policyName"
+                      inputComponent="input"
+                      multiline={false}
+                      onChange={[Function]}
+                      renderSuffix={[Function]}
+                      type="text"
+                    >
+                      <ForwardRef(InputBase)
+                        autoFocus={false}
+                        classes={
+                          Object {
+                            "adornedEnd": "MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd",
+                            "adornedStart": "MuiInputBase-adornedStart MuiOutlinedInput-adornedStart",
+                            "colorSecondary": "MuiInputBase-colorSecondary MuiOutlinedInput-colorSecondary",
+                            "disabled": "Mui-disabled Mui-disabled",
+                            "error": "Mui-error Mui-error",
+                            "focused": "Mui-focused Mui-focused",
+                            "formControl": "MuiInputBase-formControl",
+                            "fullWidth": "MuiInputBase-fullWidth",
+                            "input": "MuiInputBase-input MuiOutlinedInput-input",
+                            "inputAdornedEnd": "MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd",
+                            "inputAdornedStart": "MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart",
+                            "inputHiddenLabel": "MuiInputBase-inputHiddenLabel",
+                            "inputMarginDense": "MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense",
+                            "inputMultiline": "MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline",
+                            "inputTypeSearch": "MuiInputBase-inputTypeSearch",
+                            "marginDense": "MuiInputBase-marginDense MuiOutlinedInput-marginDense",
+                            "multiline": "MuiInputBase-multiline MuiOutlinedInput-multiline",
+                            "root": "MuiInputBase-root MuiOutlinedInput-root",
+                          }
+                        }
+                        defaultValue="org.onap.new"
+                        fullWidth={false}
+                        id="policyName"
+                        inputComponent="input"
+                        multiline={false}
+                        onChange={[Function]}
+                        renderSuffix={[Function]}
+                        type="text"
+                      >
+                        <div
+                          className="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
+                          onClick={[Function]}
+                        >
+                          <input
+                            aria-invalid={false}
+                            autoFocus={false}
+                            className="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
+                            defaultValue="org.onap.new"
+                            disabled={false}
+                            id="policyName"
+                            onAnimationStart={[Function]}
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            required={true}
+                            type="text"
+                          />
+                          <WithStyles(ForwardRef(NotchedOutline))
+                            className="MuiOutlinedInput-notchedOutline"
+                            label={
+                              <React.Fragment>
+                                Required
+                                 *
+                              </React.Fragment>
+                            }
+                            labelWidth={0}
+                            notched={true}
+                          >
+                            <ForwardRef(NotchedOutline)
+                              className="MuiOutlinedInput-notchedOutline"
+                              classes={
+                                Object {
+                                  "legend": "PrivateNotchedOutline-legend-2",
+                                  "legendLabelled": "PrivateNotchedOutline-legendLabelled-3",
+                                  "legendNotched": "PrivateNotchedOutline-legendNotched-4",
+                                  "root": "PrivateNotchedOutline-root-1",
+                                }
+                              }
+                              label={
+                                <React.Fragment>
+                                  Required
+                                   *
+                                </React.Fragment>
+                              }
+                              labelWidth={0}
+                              notched={true}
+                            >
+                              <fieldset
+                                aria-hidden={true}
+                                className="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
+                              >
+                                <legend
+                                  className="PrivateNotchedOutline-legendLabelled-3 PrivateNotchedOutline-legendNotched-4"
+                                >
+                                  <span>
+                                    Required
+                                     *
+                                  </span>
+                                </legend>
+                              </fieldset>
+                            </ForwardRef(NotchedOutline)>
+                          </WithStyles(ForwardRef(NotchedOutline))>
+                        </div>
+                      </ForwardRef(InputBase)>
+                    </WithStyles(ForwardRef(InputBase))>
+                  </ForwardRef(OutlinedInput)>
+                </WithStyles(ForwardRef(OutlinedInput))>
+              </div>
+            </ForwardRef(FormControl)>
+          </WithStyles(ForwardRef(FormControl))>
+        </ForwardRef(TextField)>
+      </WithStyles(ForwardRef(TextField))>
+      <WithStyles(ForwardRef(TextField))
+        defaultValue="1.0.0"
+        id="policyVersion"
+        label="Required"
+        onChange={[Function]}
+        required={true}
+        size="small"
+        variant="outlined"
+      >
+        <ForwardRef(TextField)
+          classes={
+            Object {
+              "root": "MuiTextField-root",
+            }
+          }
+          defaultValue="1.0.0"
+          id="policyVersion"
+          label="Required"
+          onChange={[Function]}
+          required={true}
+          size="small"
+          variant="outlined"
+        >
+          <WithStyles(ForwardRef(FormControl))
+            className="MuiTextField-root"
+            color="primary"
+            disabled={false}
+            error={false}
+            fullWidth={false}
+            required={true}
+            size="small"
+            variant="outlined"
+          >
+            <ForwardRef(FormControl)
+              className="MuiTextField-root"
+              classes={
+                Object {
+                  "fullWidth": "MuiFormControl-fullWidth",
+                  "marginDense": "MuiFormControl-marginDense",
+                  "marginNormal": "MuiFormControl-marginNormal",
+                  "root": "MuiFormControl-root",
+                }
+              }
+              color="primary"
+              disabled={false}
+              error={false}
+              fullWidth={false}
+              required={true}
+              size="small"
+              variant="outlined"
+            >
+              <div
+                className="MuiFormControl-root MuiTextField-root"
+              >
+                <WithStyles(ForwardRef(InputLabel))
+                  htmlFor="policyVersion"
+                  id="policyVersion-label"
+                >
+                  <ForwardRef(InputLabel)
+                    classes={
+                      Object {
+                        "animated": "MuiInputLabel-animated",
+                        "asterisk": "MuiInputLabel-asterisk",
+                        "disabled": "Mui-disabled",
+                        "error": "Mui-error",
+                        "filled": "MuiInputLabel-filled",
+                        "focused": "Mui-focused",
+                        "formControl": "MuiInputLabel-formControl",
+                        "marginDense": "MuiInputLabel-marginDense",
+                        "outlined": "MuiInputLabel-outlined",
+                        "required": "Mui-required",
+                        "root": "MuiInputLabel-root",
+                        "shrink": "MuiInputLabel-shrink",
+                      }
+                    }
+                    htmlFor="policyVersion"
+                    id="policyVersion-label"
+                  >
+                    <WithStyles(ForwardRef(FormLabel))
+                      className="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined"
+                      classes={
+                        Object {
+                          "asterisk": "MuiInputLabel-asterisk",
+                          "disabled": "Mui-disabled",
+                          "error": "Mui-error",
+                          "focused": "Mui-focused",
+                          "required": "Mui-required",
+                        }
+                      }
+                      data-shrink={true}
+                      htmlFor="policyVersion"
+                      id="policyVersion-label"
+                    >
+                      <ForwardRef(FormLabel)
+                        className="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined"
+                        classes={
+                          Object {
+                            "asterisk": "MuiFormLabel-asterisk MuiInputLabel-asterisk",
+                            "colorSecondary": "MuiFormLabel-colorSecondary",
+                            "disabled": "Mui-disabled Mui-disabled",
+                            "error": "Mui-error Mui-error",
+                            "filled": "MuiFormLabel-filled",
+                            "focused": "Mui-focused Mui-focused",
+                            "required": "Mui-required Mui-required",
+                            "root": "MuiFormLabel-root",
+                          }
+                        }
+                        data-shrink={true}
+                        htmlFor="policyVersion"
+                        id="policyVersion-label"
+                      >
+                        <label
+                          className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled Mui-required Mui-required"
+                          data-shrink={true}
+                          htmlFor="policyVersion"
+                          id="policyVersion-label"
+                        >
+                          Required
+                          <span
+                            aria-hidden={true}
+                            className="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                          >
+                             
+                            *
+                          </span>
+                        </label>
+                      </ForwardRef(FormLabel)>
+                    </WithStyles(ForwardRef(FormLabel))>
+                  </ForwardRef(InputLabel)>
+                </WithStyles(ForwardRef(InputLabel))>
+                <WithStyles(ForwardRef(OutlinedInput))
+                  autoFocus={false}
+                  defaultValue="1.0.0"
+                  fullWidth={false}
+                  id="policyVersion"
+                  label={
+                    <React.Fragment>
+                      Required
+                       *
+                    </React.Fragment>
+                  }
+                  multiline={false}
+                  onChange={[Function]}
+                >
+                  <ForwardRef(OutlinedInput)
+                    autoFocus={false}
+                    classes={
+                      Object {
+                        "adornedEnd": "MuiOutlinedInput-adornedEnd",
+                        "adornedStart": "MuiOutlinedInput-adornedStart",
+                        "colorSecondary": "MuiOutlinedInput-colorSecondary",
+                        "disabled": "Mui-disabled",
+                        "error": "Mui-error",
+                        "focused": "Mui-focused",
+                        "input": "MuiOutlinedInput-input",
+                        "inputAdornedEnd": "MuiOutlinedInput-inputAdornedEnd",
+                        "inputAdornedStart": "MuiOutlinedInput-inputAdornedStart",
+                        "inputMarginDense": "MuiOutlinedInput-inputMarginDense",
+                        "inputMultiline": "MuiOutlinedInput-inputMultiline",
+                        "marginDense": "MuiOutlinedInput-marginDense",
+                        "multiline": "MuiOutlinedInput-multiline",
+                        "notchedOutline": "MuiOutlinedInput-notchedOutline",
+                        "root": "MuiOutlinedInput-root",
+                      }
+                    }
+                    defaultValue="1.0.0"
+                    fullWidth={false}
+                    id="policyVersion"
+                    label={
+                      <React.Fragment>
+                        Required
+                         *
+                      </React.Fragment>
+                    }
+                    multiline={false}
+                    onChange={[Function]}
+                  >
+                    <WithStyles(ForwardRef(InputBase))
+                      autoFocus={false}
+                      classes={
+                        Object {
+                          "adornedEnd": "MuiOutlinedInput-adornedEnd",
+                          "adornedStart": "MuiOutlinedInput-adornedStart",
+                          "colorSecondary": "MuiOutlinedInput-colorSecondary",
+                          "disabled": "Mui-disabled",
+                          "error": "Mui-error",
+                          "focused": "Mui-focused",
+                          "input": "MuiOutlinedInput-input",
+                          "inputAdornedEnd": "MuiOutlinedInput-inputAdornedEnd",
+                          "inputAdornedStart": "MuiOutlinedInput-inputAdornedStart",
+                          "inputMarginDense": "MuiOutlinedInput-inputMarginDense",
+                          "inputMultiline": "MuiOutlinedInput-inputMultiline",
+                          "marginDense": "MuiOutlinedInput-marginDense",
+                          "multiline": "MuiOutlinedInput-multiline",
+                          "notchedOutline": null,
+                          "root": "MuiOutlinedInput-root",
+                        }
+                      }
+                      defaultValue="1.0.0"
+                      fullWidth={false}
+                      id="policyVersion"
+                      inputComponent="input"
+                      multiline={false}
+                      onChange={[Function]}
+                      renderSuffix={[Function]}
+                      type="text"
+                    >
+                      <ForwardRef(InputBase)
+                        autoFocus={false}
+                        classes={
+                          Object {
+                            "adornedEnd": "MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd",
+                            "adornedStart": "MuiInputBase-adornedStart MuiOutlinedInput-adornedStart",
+                            "colorSecondary": "MuiInputBase-colorSecondary MuiOutlinedInput-colorSecondary",
+                            "disabled": "Mui-disabled Mui-disabled",
+                            "error": "Mui-error Mui-error",
+                            "focused": "Mui-focused Mui-focused",
+                            "formControl": "MuiInputBase-formControl",
+                            "fullWidth": "MuiInputBase-fullWidth",
+                            "input": "MuiInputBase-input MuiOutlinedInput-input",
+                            "inputAdornedEnd": "MuiInputBase-inputAdornedEnd MuiOutlinedInput-inputAdornedEnd",
+                            "inputAdornedStart": "MuiInputBase-inputAdornedStart MuiOutlinedInput-inputAdornedStart",
+                            "inputHiddenLabel": "MuiInputBase-inputHiddenLabel",
+                            "inputMarginDense": "MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense",
+                            "inputMultiline": "MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline",
+                            "inputTypeSearch": "MuiInputBase-inputTypeSearch",
+                            "marginDense": "MuiInputBase-marginDense MuiOutlinedInput-marginDense",
+                            "multiline": "MuiInputBase-multiline MuiOutlinedInput-multiline",
+                            "root": "MuiInputBase-root MuiOutlinedInput-root",
+                          }
+                        }
+                        defaultValue="1.0.0"
+                        fullWidth={false}
+                        id="policyVersion"
+                        inputComponent="input"
+                        multiline={false}
+                        onChange={[Function]}
+                        renderSuffix={[Function]}
+                        type="text"
+                      >
+                        <div
+                          className="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
+                          onClick={[Function]}
+                        >
+                          <input
+                            aria-invalid={false}
+                            autoFocus={false}
+                            className="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
+                            defaultValue="1.0.0"
+                            disabled={false}
+                            id="policyVersion"
+                            onAnimationStart={[Function]}
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            required={true}
+                            type="text"
+                          />
+                          <WithStyles(ForwardRef(NotchedOutline))
+                            className="MuiOutlinedInput-notchedOutline"
+                            label={
+                              <React.Fragment>
+                                Required
+                                 *
+                              </React.Fragment>
+                            }
+                            labelWidth={0}
+                            notched={true}
+                          >
+                            <ForwardRef(NotchedOutline)
+                              className="MuiOutlinedInput-notchedOutline"
+                              classes={
+                                Object {
+                                  "legend": "PrivateNotchedOutline-legend-2",
+                                  "legendLabelled": "PrivateNotchedOutline-legendLabelled-3",
+                                  "legendNotched": "PrivateNotchedOutline-legendNotched-4",
+                                  "root": "PrivateNotchedOutline-root-1",
+                                }
+                              }
+                              label={
+                                <React.Fragment>
+                                  Required
+                                   *
+                                </React.Fragment>
+                              }
+                              labelWidth={0}
+                              notched={true}
+                            >
+                              <fieldset
+                                aria-hidden={true}
+                                className="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
+                              >
+                                <legend
+                                  className="PrivateNotchedOutline-legendLabelled-3 PrivateNotchedOutline-legendNotched-4"
+                                >
+                                  <span>
+                                    Required
+                                     *
+                                  </span>
+                                </legend>
+                              </fieldset>
+                            </ForwardRef(NotchedOutline)>
+                          </WithStyles(ForwardRef(NotchedOutline))>
+                        </div>
+                      </ForwardRef(InputBase)>
+                    </WithStyles(ForwardRef(InputBase))>
+                  </ForwardRef(OutlinedInput)>
+                </WithStyles(ForwardRef(OutlinedInput))>
+              </div>
+            </ForwardRef(FormControl)>
+          </WithStyles(ForwardRef(FormControl))>
+        </ForwardRef(TextField)>
+      </WithStyles(ForwardRef(TextField))>
+      <Button
+        active={false}
+        disabled={false}
+        onClick={[Function]}
+        title="Create a new policy version from the defined parameters"
+        variant="secondary"
+      >
+        <button
+          className="btn btn-secondary"
+          disabled={false}
+          onClick={[Function]}
+          title="Create a new policy version from the defined parameters"
+          type="button"
+        >
+          Create New Version
+        </button>
+      </Button>
+      <styled.div
+        id="onap.policies.monitoring.tcagen2_1.0.0_org.onap.new_1.0.0"
+        title="Policy Properties"
+      >
+        <div
+          className="sc-gsTCUz dAYWPx"
+          id="onap.policies.monitoring.tcagen2_1.0.0_org.onap.new_1.0.0"
+          title="Policy Properties"
+        />
+      </styled.div>
+    </div>
+  </styled.div>
+</PolicyEditor>
+`;
diff --git a/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyModal.test.js.snap b/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyModal.test.js.snap
new file mode 100644
index 000000000..8b1261b1c
--- /dev/null
+++ b/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyModal.test.js.snap
@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify PolicyModal Test the render method 1`] = `
+<Styled(Modal)
+  backdrop="static"
+  keyboard={false}
+  onHide={[Function]}
+  show={true}
+  size="xl"
+>
+  <ModalHeader
+    closeButton={true}
+    closeLabel="Close"
+  >
+    <ModalTitle>
+      Edit the policy
+    </ModalTitle>
+  </ModalHeader>
+  <Alert
+    closeLabel="Close alert"
+    dismissible={true}
+    onClose={[Function]}
+    show={false}
+    transition={
+      Object {
+        "$$typeof": Symbol(react.forward_ref),
+        "defaultProps": Object {
+          "appear": false,
+          "in": false,
+          "mountOnEnter": false,
+          "timeout": 300,
+          "unmountOnExit": false,
+        },
+        "render": [Function],
+      }
+    }
+    variant="success"
+  >
+    <styled.div />
+  </Alert>
+  <Alert
+    closeLabel="Close alert"
+    dismissible={true}
+    onClose={[Function]}
+    show={false}
+    transition={
+      Object {
+        "$$typeof": Symbol(react.forward_ref),
+        "defaultProps": Object {
+          "appear": false,
+          "in": false,
+          "mountOnEnter": false,
+          "timeout": 300,
+          "unmountOnExit": false,
+        },
+        "render": [Function],
+      }
+    }
+    variant="danger"
+  >
+    <styled.div />
+  </Alert>
+  <ModalBody>
+    <div
+      id="editor"
+    />
+    <FormGroup
+      as={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "noGutters": false,
+          },
+          "render": [Function],
+        }
+      }
+      controlId="formPlaintextEmail"
+    >
+      <FormLabel
+        column={true}
+        sm="2"
+        srOnly={false}
+      >
+        Pdp Group Info
+      </FormLabel>
+      <Col
+        sm="3"
+      >
+        <StateManager
+          defaultInputValue=""
+          defaultMenuIsOpen={false}
+          defaultValue={null}
+          onChange={[Function]}
+          options={
+            Array [
+              Object {
+                "label": "monitoring",
+                "value": "monitoring",
+              },
+            ]
+          }
+          value={
+            Object {
+              "label": undefined,
+              "value": undefined,
+            }
+          }
+        />
+      </Col>
+      <Col
+        sm="3"
+      >
+        <StateManager
+          defaultInputValue=""
+          defaultMenuIsOpen={false}
+          defaultValue={null}
+          onChange={[Function]}
+          options={Array []}
+          value={
+            Object {
+              "label": undefined,
+              "value": undefined,
+            }
+          }
+        />
+      </Col>
+    </FormGroup>
+  </ModalBody>
+  <ModalFooter>
+    <Button
+      active={false}
+      disabled={false}
+      key="close"
+      onClick={[Function]}
+      variant="secondary"
+    >
+      Close
+    </Button>
+    <Button
+      active={false}
+      disabled={false}
+      key="save"
+      onClick={[Function]}
+      variant="primary"
+    >
+      Save Changes
+    </Button>
+    <Button
+      active={false}
+      disabled={false}
+      key="refresh"
+      onClick={[Function]}
+      variant="primary"
+    >
+      Refresh
+    </Button>
+  </ModalFooter>
+</Styled(Modal)>
+`;
diff --git a/ui-react/src/components/dialogs/Policy/__snapshots__/ToscaViewer.test.js.snap b/ui-react/src/components/dialogs/Policy/__snapshots__/ToscaViewer.test.js.snap
new file mode 100644
index 000000000..61fb4850d
--- /dev/null
+++ b/ui-react/src/components/dialogs/Policy/__snapshots__/ToscaViewer.test.js.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Verify ToscaViewer Test the render method 1`] = `
+<styled.div>
+  <pre>
+    tosca_definitions_version: tosca_simple_yaml_1_1_0
+policy_types:
+  onap.policies.controlloop.Guard:
+    properties: {
+    }
+    name: onap.policies.controlloop.Guard
+    version: 1.0.0
+    derived_from: tosca.policies.Root
+    metadata: {
+    }
+    description: Guard Policies for Control Loop Operational Policies
+name: ToscaServiceTemplateSimple
+version: 1.0.0
+
+  </pre>
+  <Button
+    active={false}
+    disabled={false}
+    title="Create a new policy version from the defined parameters"
+    variant="secondary"
+  >
+    Create New Version
+  </Button>
+</styled.div>
+`;
diff --git a/ui-react/src/components/dialogs/Policy/toscaData.test.json b/ui-react/src/components/dialogs/Policy/toscaData.test.json
new file mode 100644
index 000000000..3b001b384
--- /dev/null
+++ b/ui-react/src/components/dialogs/Policy/toscaData.test.json
@@ -0,0 +1,179 @@
+{
+  "title": "onap.policies.monitoring.tcagen2",
+  "type": "object",
+  "required": [
+    "tca.policy"
+  ],
+  "properties": {
+    "tca.policy": {
+      "title": "onap.datatypes.monitoring.tca_policy",
+      "type": "object",
+      "required": [
+        "domain",
+        "metricsPerEventName"
+      ],
+      "properties": {
+        "domain": {
+          "type": "string",
+          "description": "Domain name to which TCA needs to be applied",
+          "default": "measurementsForVfScaling",
+          "const": "measurementsForVfScaling"
+        },
+        "metricsPerEventName": {
+          "type": "array",
+          "description": "Contains eventName and threshold details that need to be applied to given eventName",
+          "items": {
+            "title": "onap.datatypes.monitoring.metricsPerEventName",
+            "type": "object",
+            "required": [
+              "controlLoopSchemaType",
+              "eventName",
+              "policyName",
+              "policyScope",
+              "policyVersion",
+              "thresholds"
+            ],
+            "properties": {
+              "controlLoopSchemaType": {
+                "type": "string",
+                "description": "Specifies Control Loop Schema Type for the event Name e.g. VNF, VM",
+                "enum": [
+                  "VM",
+                  "VNF"
+                ]
+              },
+              "eventName": {
+                "type": "string",
+                "description": "Event name to which thresholds need to be applied"
+              },
+              "policyName": {
+                "type": "string",
+                "description": "TCA Policy Scope Name"
+              },
+              "policyScope": {
+                "type": "string",
+                "description": "TCA Policy Scope"
+              },
+              "policyVersion": {
+                "type": "string",
+                "description": "TCA Policy Scope Version"
+              },
+              "thresholds": {
+                "type": "array",
+                "description": "Thresholds associated with eventName",
+                "items": {
+                  "title": "onap.datatypes.monitoring.thresholds",
+                  "type": "object",
+                  "required": [
+                    "closedLoopControlName",
+                    "closedLoopEventStatus",
+                    "direction",
+                    "fieldPath",
+                    "severity",
+                    "thresholdValue",
+                    "version"
+                  ],
+                  "properties": {
+                    "closedLoopControlName": {
+                      "type": "string",
+                      "description": "Closed Loop Control Name associated with the threshold"
+                    },
+                    "closedLoopEventStatus": {
+                      "type": "string",
+                      "description": "Closed Loop Event Status of the threshold",
+                      "enum": [
+                        "ONSET",
+                        "ABATED"
+                      ]
+                    },
+                    "direction": {
+                      "type": "string",
+                      "description": "Direction of the threshold",
+                      "enum": [
+                        "LESS",
+                        "LESS_OR_EQUAL",
+                        "GREATER",
+                        "GREATER_OR_EQUAL",
+                        "EQUAL"
+                      ]
+                    },
+                    "fieldPath": {
+                      "type": "string",
+                      "description": "Json field Path as per CEF message which needs to be analyzed for TCA",
+                      "enum": [
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsDelta",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedOctetsDelta",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedUnicastPacketsDelta",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedMulticastPacketsDelta",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedBroadcastPacketsDelta",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedDiscardedPacketsDelta",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedErrorPacketsDelta",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedTotalPacketsAccumulated",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedOctetsAccumulated",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedUnicastPacketsAccumulated",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedMulticastPacketsAccumulated",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedBroadcastPacketsAccumulated",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedDiscardedPacketsAccumulated",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].receivedErrorPacketsAccumulated",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedTotalPacketsDelta",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedOctetsDelta",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedUnicastPacketsDelta",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedMulticastPacketsDelta",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedBroadcastPacketsDelta",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedDiscardedPacketsDelta",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedErrorPacketsDelta",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedTotalPacketsAccumulated",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedOctetsAccumulated",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedUnicastPacketsAccumulated",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedMulticastPacketsAccumulated",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedBroadcastPacketsAccumulated",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedDiscardedPacketsAccumulated",
+                        "$.event.measurementsForVfScalingFields.vNicPerformanceArray[*].transmittedErrorPacketsAccumulated",
+                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuIdle",
+                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageInterrupt",
+                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageNice",
+                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageSoftIrq",
+                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageSteal",
+                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuUsageSystem",
+                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].cpuWait",
+                        "$.event.measurementsForVfScalingFields.cpuUsageArray[*].percentUsage",
+                        "$.event.measurementsForVfScalingFields.meanRequestLatency",
+                        "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryBuffered",
+                        "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryCached",
+                        "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryConfigured",
+                        "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryFree",
+                        "$.event.measurementsForVfScalingFields.memoryUsageArray[*].memoryUsed",
+                        "$.event.measurementsForVfScalingFields.additionalMeasurements[*].arrayOfFields[0].value"
+                      ]
+                    },
+                    "severity": {
+                      "type": "string",
+                      "description": "Threshold Event Severity",
+                      "enum": [
+                        "CRITICAL",
+                        "MAJOR",
+                        "MINOR",
+                        "WARNING",
+                        "NORMAL"
+                      ]
+                    },
+                    "thresholdValue": {
+                      "type": "integer",
+                      "description": "Threshold value for the field Path inside CEF message"
+                    },
+                    "version": {
+                      "type": "string",
+                      "description": "Version number associated with the threshold"
+                    }
+                  }
+                },
+                "format": "tabs-top"
+              }
+            }
+          },
+          "format": "tabs-top"
+        }
+      }
+    }
+  }
+}
diff --git a/ui-react/src/components/dialogs/Policy/toscaData.test.yaml b/ui-react/src/components/dialogs/Policy/toscaData.test.yaml
new file mode 100644
index 000000000..15a3cec35
--- /dev/null
+++ b/ui-react/src/components/dialogs/Policy/toscaData.test.yaml
@@ -0,0 +1,13 @@
+tosca_definitions_version: tosca_simple_yaml_1_1_0
+policy_types:
+  onap.policies.controlloop.Guard:
+    properties: {
+    }
+    name: onap.policies.controlloop.Guard
+    version: 1.0.0
+    derived_from: tosca.policies.Root
+    metadata: {
+    }
+    description: Guard Policies for Control Loop Operational Policies
+name: ToscaServiceTemplateSimple
+version: 1.0.0
diff --git a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
index eb6e70f3d..4796b8d73 100644
--- a/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
+++ b/ui-react/src/components/dialogs/Tosca/ViewLoopTemplatesModal.js
@@ -1,8 +1,8 @@
 /*-
  * ============LICENSE_START=======================================================
- * ONAP CLAMP
+ * ONAP POLICY-CLAMP
  * ================================================================================
- * Copyright (C) 2019 AT&T Intellectual Property. All rights
+ * Copyright (C) 2019, 2021 AT&T Intellectual Property. All rights
  *                             reserved.
  * ================================================================================
  * Licensed under the Apache License, Version 2.0 (the "License");
diff --git a/ui-react/src/components/dialogs/UserInfoModal.js b/ui-react/src/components/dialogs/UserInfoModal.js
index 4b779dece..96eabb4c2 100644
--- a/ui-react/src/components/dialogs/UserInfoModal.js
+++ b/ui-react/src/components/dialogs/UserInfoModal.js
@@ -58,7 +58,7 @@ export default class UserInfoModal extends React.Component {
 	renderPermissions() {
           if (this.state.userInfo["allPermissions"]) {
 	        var listOfPermissions = this.state.userInfo["allPermissions"].map(function(perm) {
-	            return <Form.Control plaintext readOnly defaultValue={perm} />;
+	            return <Form.Control key={perm} plaintext readOnly defaultValue={perm} />;
 	        })
 		    return listOfPermissions;
 		  } else {
diff --git a/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap b/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap
index 7c725bc42..548a2d938 100644
--- a/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap
+++ b/ui-react/src/components/dialogs/__snapshots__/UserInfoModal.test.js.snap
@@ -91,11 +91,13 @@ exports[`Verify UserInfoModal Test the render method full permission 1`] = `
       <Col>
         <FormControl
           defaultValue="permission1"
+          key="permission1"
           plaintext={true}
           readOnly={true}
         />
         <FormControl
           defaultValue="permission2"
+          key="permission2"
           plaintext={true}
           readOnly={true}
         />
diff --git a/ui-react/src/components/loop_viewer/logs/LoopLogs.js b/ui-react/src/components/loop_viewer/logs/LoopLogs.js
index b3f052626..e3d9f601f 100644
--- a/ui-react/src/components/loop_viewer/logs/LoopLogs.js
+++ b/ui-react/src/components/loop_viewer/logs/LoopLogs.js
@@ -66,10 +66,9 @@ export default class LoopLogs extends React.Component {
 	}
 
 	renderLogs() {
-		if (this.state.loopCache.getLoopLogsArray() != null) {
-			return (
-				this.state.loopCache.getLoopLogsArray().map(row => <TableRow logRow={row} />)
-			)
+	    let logsArray = this.state.loopCache.getLoopLogsArray();
+		if (logsArray != null) {
+			return (logsArray.map(row => <TableRow key={row.id} logRow={row} />));
 		}
 	}
 
diff --git a/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap b/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap
index 75b817bab..996c67457 100644
--- a/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap
+++ b/ui-react/src/components/loop_viewer/logs/__snapshots__/LoopLogs.test.js.snap
@@ -45,6 +45,7 @@ exports[`Verify LoopLogs Test the render method 1`] = `
     </thead>
     <tbody>
       <TableRow
+        key="1"
         logRow={
           Object {
             "id": 1,
diff --git a/ui-react/src/components/loop_viewer/status/LoopStatus.js b/ui-react/src/components/loop_viewer/status/LoopStatus.js
index d960c31e6..4b35b48e1 100644
--- a/ui-react/src/components/loop_viewer/status/LoopStatus.js
+++ b/ui-react/src/components/loop_viewer/status/LoopStatus.js
@@ -57,12 +57,13 @@ export default class LoopStatus extends React.Component {
 
 
 	renderStatus() {
-		if (this.state.loopCache.getComponentStates() != null) {
-			return Object.keys(this.state.loopCache.getComponentStates()).map((key) => {
+	    let componentStates = this.state.loopCache.getComponentStates();
+		if (componentStates != null) {
+			return Object.keys(componentStates).map((key) => {
 				console.debug("Adding status for: ",key);
 				var res={}
 				res[key]=this.state.loopCache.getComponentStates()[key];
-				return (<TableRow statusRow={{'componentName':key,'stateName':this.state.loopCache.getComponentStates()[key].componentState.stateName,'description':this.state.loopCache.getComponentStates()[key].componentState.description}} />)
+				return (<TableRow key={key} statusRow={{'componentName':key,'stateName':this.state.loopCache.getComponentStates()[key].componentState.stateName,'description':this.state.loopCache.getComponentStates()[key].componentState.description}} />)
 			})
 
 		}
diff --git a/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap b/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap
index 73da5fff1..24d879de9 100644
--- a/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap
+++ b/ui-react/src/components/loop_viewer/status/__snapshots__/LoopStatus.test.js.snap
@@ -40,6 +40,7 @@ exports[`Verify LoopStatus Test the render method 1`] = `
       </thead>
       <tbody>
         <TableRow
+          key="POLICY"
           statusRow={
             Object {
               "componentName": "POLICY",
@@ -49,6 +50,7 @@ exports[`Verify LoopStatus Test the render method 1`] = `
           }
         />
         <TableRow
+          key="DCAE"
           statusRow={
             Object {
               "componentName": "DCAE",
diff --git a/ui-react/src/components/loop_viewer/svg/SvgGenerator.js b/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
index f5f5047ba..6d3cd7a21 100644
--- a/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
+++ b/ui-react/src/components/loop_viewer/svg/SvgGenerator.js
@@ -59,16 +59,16 @@ class SvgGenerator extends React.Component {
 	}
 
 	shouldComponentUpdate(nextProps, nextState) {
-		return this.state.loopCache !== nextState.loopCache;
+		return this.state.loopCache !== nextProps.loopCache;
 	}
 
-	componentWillReceiveProps(newProps) {
-		if (this.state.loopCache !== newProps.loopCache) {
-			this.setState({
-				loopCache: newProps.loopCache,
-			});
-		}
-	}
+    componentDidUpdate(prevProps) {
+        if (prevProps.loopCache !== this.props.loopCache) {
+            this.setState({
+                loopCache: this.props.loopCache,
+            });
+        }
+    }
 
 	handleSvgClick(event) {
 		console.debug("svg click event received");
@@ -233,10 +233,10 @@ class SvgGenerator extends React.Component {
         return (
 
             <DivStyled onClick={this.handleSvgClick} >
-                <svg height={svgHeight} width={svgWidth}  viewBox="0,0,{svgWidth},{svgHeight}" preserveAspectRatio="none">
-									<svg x="-50" y="25">
-                    {allTheElements}
-									</svg>
+                <svg key="main" height={svgHeight} width={svgWidth}  viewBox="0,0,{svgWidth},{svgHeight}" preserveAspectRatio="none">
+                    <svg key="content" x="-50" y="25">
+                        {allTheElements}
+					</svg>
                 </svg>
             </DivStyled>
         );