Align ui-react file in policy-clamp and policy-gui

When the ui-react code was transferred to policy-gui, the white space
was cleaned up and reformatted. This makes it difficult to track the
real functional changes if any between ui-react in policy-clamp and
policy-gui.

This review brings the white space changes into ui-react in policy-clamp
to make file comparisons easier.

Issue-ID: POLICY-3358
Change-Id: Ic303e71b341e5c0f7ca0de0ed4c4962ebf2f988a
Signed-off-by: liamfallon <liam.fallon@est.tech>

6 files changed, 616 insertions, 608 deletions

diff --git a/runtime/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js b/runtime/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js
index 9c2f102b4..5bca4e6e1 100644
--- a/runtime/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js
+++ b/runtime/ui-react/src/components/dialogs/Policy/PoliciesTreeViewer.js
@@ -31,79 +31,79 @@ import DescriptionIcon from '@material-ui/icons/Description';
 
 export default class PoliciesTreeViewer extends React.Component {
 
-    separator = ".";
+  separator = ".";
 
-    nodesList = new Map();
+  nodesList = new Map();
 
-    constructor(props, context) {
-        super(props, context);
-        this.createPoliciesTree = this.createPoliciesTree.bind(this);
-        this.handleTreeItemClick = this.handleTreeItemClick.bind(this);
-        this.buildNameWithParent = this.buildNameWithParent.bind(this);
+  constructor(props, context) {
+    super(props, context);
+    this.createPoliciesTree = this.createPoliciesTree.bind(this);
+    this.handleTreeItemClick = this.handleTreeItemClick.bind(this);
+    this.buildNameWithParent = this.buildNameWithParent.bind(this);
 
-    }
+  }
 
-    state = {
-            policiesTreeData: this.createPoliciesTree(this.props.policiesData),
-    }
+  state = {
+    policiesTreeData: this.createPoliciesTree(this.props.policiesData),
+  }
 
-    componentDidUpdate(prevProps) {
-      if (prevProps.policiesData !== this.props.policiesData) {
-        this.setState({policiesTreeData: this.createPoliciesTree(this.props.policiesData)})
-      }
+  componentDidUpdate(prevProps) {
+    if (prevProps.policiesData !== this.props.policiesData) {
+      this.setState({ policiesTreeData: this.createPoliciesTree(this.props.policiesData) })
     }
+  }
 
-    createPoliciesTree(policiesArray) {
-        // put my policies array in a Json
-        let nodeId = 1;
-        let root = {id:nodeId, policyCount:0, name:"ROOT", children:[], parent: undefined};
-        this.nodesList.set(nodeId++, root);
-
-        policiesArray.forEach(policy => {
-            let currentTreeNode = root;
-            policy[this.props.valueForTreeCreation].split(this.separator).forEach((policyNamePart, index, policyNamePartsArray) => {
-                let node = currentTreeNode["children"].find(element => element.name === policyNamePart);
-                if (typeof(node) === "undefined") {
-                    node = {id:nodeId, policyCount:0, children:[], name:policyNamePart, parent:currentTreeNode};
-                    this.nodesList.set(nodeId++, node);
-                    currentTreeNode["children"].push(node);
-                }
-                if ((index+1) === policyNamePartsArray.length) {
-                    ++currentTreeNode["policyCount"];
-                }
-                currentTreeNode = node;
-            })
-        })
-        return root;
-    }
+  createPoliciesTree(policiesArray) {
+    // put my policies array in a Json
+    let nodeId = 1;
+    let root = { id: nodeId, policyCount: 0, name: "ROOT", children: [], parent: undefined };
+    this.nodesList.set(nodeId++, root);
 
-    buildNameWithParent(node) {
-        let nameToBuild = node.name;
-        if (node.parent  !== undefined) {
-            nameToBuild = this.buildNameWithParent(node.parent) + this.separator + node.name;
+    policiesArray.forEach(policy => {
+      let currentTreeNode = root;
+      policy[this.props.valueForTreeCreation].split(this.separator).forEach((policyNamePart, index, policyNamePartsArray) => {
+        let node = currentTreeNode["children"].find(element => element.name === policyNamePart);
+        if (typeof (node) === "undefined") {
+          node = { id: nodeId, policyCount: 0, children: [], name: policyNamePart, parent: currentTreeNode };
+          this.nodesList.set(nodeId++, node);
+          currentTreeNode["children"].push(node);
         }
-        return nameToBuild;
-    }
+        if ((index + 1) === policyNamePartsArray.length) {
+          ++currentTreeNode["policyCount"];
+        }
+        currentTreeNode = node;
+      })
+    })
+    return root;
+  }
 
-    handleTreeItemClick(event, value) {
-        let fullName = this.buildNameWithParent(this.nodesList.get(value[0])).substring(5);
-        this.props.policiesFilterFunction(fullName);
+  buildNameWithParent(node) {
+    let nameToBuild = node.name;
+    if (node.parent !== undefined) {
+      nameToBuild = this.buildNameWithParent(node.parent) + this.separator + node.name;
     }
+    return nameToBuild;
+  }
 
-    renderTreeItems(nodes) {
-        return (<TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name + "("+ nodes.policyCount + ")"} onNodeSelect={this.handleTreeItemClick}>
-          {
-            Array.isArray(nodes.children) ? nodes.children.map((node) => this.renderTreeItems(node)) : null
-          }
-        </TreeItem>);
-    };
+  handleTreeItemClick(event, value) {
+    let fullName = this.buildNameWithParent(this.nodesList.get(value[0])).substring(5);
+    this.props.policiesFilterFunction(fullName);
+  }
 
-    render() {
-         return (
-                <TreeView defaultExpanded={['root']} defaultCollapseIcon={<FolderOpenIcon />}
-                defaultExpandIcon={<FolderIcon />} defaultEndIcon={<DescriptionIcon />} onNodeSelect={this.handleTreeItemClick} multiSelect>
-                  {this.renderTreeItems(this.state.policiesTreeData)}
-                </TreeView>
-          );
-    }
-}
\ No newline at end of file
+  renderTreeItems(nodes) {
+    return (<TreeItem key={ nodes.id } nodeId={ nodes.id } label={ nodes.name + "(" + nodes.policyCount + ")" } onNodeSelect={ this.handleTreeItemClick }>
+      {
+        Array.isArray(nodes.children) ? nodes.children.map((node) => this.renderTreeItems(node)) : null
+      }
+    </TreeItem>);
+  };
+
+  render() {
+    return (
+      <TreeView defaultExpanded={ ['root'] } defaultCollapseIcon={ <FolderOpenIcon/> }
+                defaultExpandIcon={ <FolderIcon/> } defaultEndIcon={ <DescriptionIcon/> } onNodeSelect={ this.handleTreeItemClick } multiSelect>
+        { this.renderTreeItems(this.state.policiesTreeData) }
+      </TreeView>
+    );
+  }
+}
diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js
index 0b734430a..111f2c6bf 100644
--- a/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js
+++ b/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.test.js
@@ -26,46 +26,47 @@ import { shallow, mount } from 'enzyme';
 import PolicyToscaService from '../../../api/PolicyToscaService';
 
 describe('Verify PolicyEditor', () => {
-    const fs = require('fs');
+  const fs = require('fs');
 
-    let toscaJson = fs.readFileSync('src/components/dialogs/Policy/toscaData.test.json', {encoding:'utf8', flag:'r'})
+  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"
-          }
-        ]
-      }
-    };
+  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();
+  it('Test the render method', async () => {
+    PolicyToscaService.getToscaPolicyModel = jest.fn().mockImplementation(() => {
+      return Promise.resolve(toscaJson);
     });
-});
\ No newline at end of file
+
+    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();
+  });
+});
diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js
index 9cd3d4172..8093b7e4e 100644
--- a/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js
+++ b/runtime/ui-react/src/components/dialogs/Policy/PolicyToscaFileSelector.js
@@ -27,102 +27,107 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import styled from 'styled-components';
 import Alert from 'react-bootstrap/Alert';
-import { Input, InputLabel, Button , SvgIcon} from "@material-ui/core";
+import { Input, InputLabel, Button, SvgIcon } from "@material-ui/core";
 import PublishIcon from '@material-ui/icons/Publish';
 import PolicyService from '../../../api/PolicyService';
 
 const ModalStyled = styled(Modal)`
-    background-color: transparent;
+  background-color: transparent;
 `
 
 const StyledMessagesDiv = styled.div`
-    overflow: auto;
-    max-height: 300px;
+  overflow: auto;
+  max-height: 300px;
 `
 
 
 export default class PolicyToscaFileSelector extends React.Component {
 
-    state = {
-        show: this.props.show,
-        alertMessages: [],
-    }
-    constructor(props, context) {
-        super(props, context);
-        this.handleClose = this.handleClose.bind(this);
-        this.onFileChange = this.onFileChange.bind(this);
-    }
+  state = {
+    show: this.props.show,
+    alertMessages: [],
+  }
 
-    componentDidUpdate(prevProps) {
-        if (this.props.show !== this.state.show) {
-            this.setState({show: this.props.show});
-        }
-    }
+  constructor(props, context) {
+    super(props, context);
+    this.handleClose = this.handleClose.bind(this);
+    this.onFileChange = this.onFileChange.bind(this);
+  }
 
-    handleClose() {
-        this.props.disableFunction();
-        this.setState({alertMessages:[]});
+  componentDidUpdate(prevProps) {
+    if (this.props.show !== this.state.show) {
+      this.setState({ show: this.props.show });
     }
+  }
 
-    onFileChange(target) {
-        this.setState({alertMessages:[]});
-        target.currentTarget.files.forEach(file => {
-            const fileReader = new FileReader();
-            fileReader.readAsDataURL(file);
-            fileReader.onload = (content) => {
-                PolicyService.sendNewPolicyModel(atob(content.target.result.split(",")[1])).then(respModelCreate => {
-                      if (typeof(respModelCreate) === "undefined") {
-                        //it indicates a failure
-                        this.setState(state => {
-                            return {
-                                alertMessages: [...state.alertMessages,(<Alert variant="danger"><Alert.Heading>{file.name}</Alert.Heading><p>Policy Tosca Model Creation Failure</p><hr/><p>Type: {file.type}</p><p>Size: {file.size}</p></Alert>)]
-                            };
-                        });
-                      } else {
-                        this.props.toscaTableUpdateFunction();
-                        this.setState(state => {
-                            return {
-                                alertMessages: [...state.alertMessages,(<Alert variant="success"><Alert.Heading>{file.name}</Alert.Heading><p>Policy Tosca Model Created Successfully</p><hr/><p>Type: {file.type}</p><p>Size: {file.size}</p></Alert>)]
-                            };
-                        });
-                      }
-                });
-            };
+  handleClose() {
+    this.props.disableFunction();
+    this.setState({ alertMessages: [] });
+  }
+
+  onFileChange(target) {
+    this.setState({ alertMessages: [] });
+    target.currentTarget.files.forEach(file => {
+      const fileReader = new FileReader();
+      fileReader.readAsDataURL(file);
+      fileReader.onload = (content) => {
+        PolicyService.sendNewPolicyModel(atob(content.target.result.split(",")[1])).then(respModelCreate => {
+          if (typeof (respModelCreate) === "undefined") {
+            //it indicates a failure
+            this.setState(state => {
+              return {
+                alertMessages: [...state.alertMessages, (<Alert variant="danger"><Alert.Heading>{ file.name }</Alert.Heading><p>Policy Tosca Model Creation Failure</p>
+                  <hr/>
+                  <p>Type: { file.type }</p><p>Size: { file.size }</p></Alert>)]
+              };
+            });
+          } else {
+            this.props.toscaTableUpdateFunction();
+            this.setState(state => {
+              return {
+                alertMessages: [...state.alertMessages, (<Alert variant="success"><Alert.Heading>{ file.name }</Alert.Heading><p>Policy Tosca Model Created Successfully</p>
+                  <hr/>
+                  <p>Type: { file.type }</p><p>Size: { file.size }</p></Alert>)]
+              };
+            });
+          }
         });
+      };
+    });
 
-    }
+  }
 
-    render() {
-        return (
-            <ModalStyled size="lg" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false} >
-                <Modal.Header closeButton>
-                    <Modal.Title>Create New Policy Tosca Model</Modal.Title>
-                </Modal.Header>
-                <Modal.Body>
-                    <Form.Group as={Row} controlId="formPlaintextEmail">
-                        <Col sm="10">
-                           <input type="file" multiple accept=".yaml,.yml" id="fileUploadButton" style={{ display: 'none' }} onChange={this.onFileChange} />
-                           <label htmlFor={'fileUploadButton'}>
-                             <Button color="primary"  variant="contained" component="span"
-                               startIcon={
-                                 <SvgIcon fontSize="small">
-                                   <PublishIcon />
-                                 </SvgIcon>
-                               }>
-                               Upload Files
-                             </Button>
-                             <p>(Only YAML files are supported)</p>
-                           </label>
-                           <StyledMessagesDiv>
-                                {this.state.alertMessages}
-                           </StyledMessagesDiv>
-                        </Col>
-                    </Form.Group>
-                </Modal.Body>
-                <Modal.Footer>
-                    <Button variant="secondary" onClick={this.handleClose}>Close</Button>
-                </Modal.Footer>
-            </ModalStyled>
-        );
-    }
-}
\ No newline at end of file
+  render() {
+    return (
+      <ModalStyled size="lg" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
+        <Modal.Header closeButton>
+          <Modal.Title>Create New Policy Tosca Model</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <Form.Group as={ Row } controlId="formPlaintextEmail">
+            <Col sm="10">
+              <input type="file" multiple accept=".yaml,.yml" id="fileUploadButton" style={ { display: 'none' } } onChange={ this.onFileChange }/>
+              <label htmlFor={ 'fileUploadButton' }>
+                <Button color="primary" variant="contained" component="span"
+                        startIcon={
+                          <SvgIcon fontSize="small">
+                            <PublishIcon/>
+                          </SvgIcon>
+                        }>
+                  Upload Files
+                </Button>
+                <p>(Only YAML files are supported)</p>
+              </label>
+              <StyledMessagesDiv>
+                { this.state.alertMessages }
+              </StyledMessagesDiv>
+            </Col>
+          </Form.Group>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={ this.handleClose }>Close</Button>
+        </Modal.Footer>
+      </ModalStyled>
+    );
+  }
+}
diff --git a/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.js b/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.js
index fa83aa245..fc69a637a 100644
--- a/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.js
+++ b/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.js
@@ -27,40 +27,40 @@ import styled from 'styled-components';
 import Button from 'react-bootstrap/Button';
 
 const ToscaDiv = styled.div`
-    background-color: ${props => props.theme.toscaTextareaBackgroundColor};
-    text-align: justify;
-    font-size: ${props => props.theme.toscaTextareaFontSize};
-    width: 100%;
-    height: 30%;
+  background-color: ${ props => props.theme.toscaTextareaBackgroundColor };
+  text-align: justify;
+  font-size: ${ props => props.theme.toscaTextareaFontSize };
+  width: 100%;
+  height: 30%;
 `
 
 export default class ToscaViewer extends React.Component {
 
-   state = {
-        toscaData: this.props.toscaData,
-        yamlPolicyTosca: this.getToscaModelYamlFor(this.props.toscaData),
-   }
+  state = {
+    toscaData: this.props.toscaData,
+    yamlPolicyTosca: this.getToscaModelYamlFor(this.props.toscaData),
+  }
 
-   constructor(props, context) {
-        super(props, context);
-        this.getToscaModelYamlFor = this.getToscaModelYamlFor.bind(this);
-   }
+  constructor(props, context) {
+    super(props, context);
+    this.getToscaModelYamlFor = this.getToscaModelYamlFor.bind(this);
+  }
 
-   getToscaModelYamlFor(toscaData) {
-        PolicyToscaService.getToscaPolicyModelYaml(toscaData["policyModelType"], toscaData["version"]).then(respYamlPolicyTosca => {
-            this.setState({
-                yamlPolicyTosca: respYamlPolicyTosca,
-            })
-        });
-   }
+  getToscaModelYamlFor(toscaData) {
+    PolicyToscaService.getToscaPolicyModelYaml(toscaData["policyModelType"], toscaData["version"]).then(respYamlPolicyTosca => {
+      this.setState({
+        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>
-       );
-   }
+  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>
+    );
+  }
 }
diff --git a/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js b/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js
index cc8c59a03..5b5976046 100644
--- a/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js
+++ b/runtime/ui-react/src/components/dialogs/Policy/ToscaViewer.test.js
@@ -26,29 +26,29 @@ import { shallow, mount } from 'enzyme';
 import PolicyToscaService from '../../../api/PolicyToscaService';
 
 describe('Verify ToscaViewer', () => {
-    const fs = require('fs');
+  const fs = require('fs');
 
-    let toscaYaml = fs.readFileSync('src/components/dialogs/Policy/toscaData.test.yaml', {encoding:'utf8', flag:'r'})
+  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
-      }
-    };
+  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();
-	});
+  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/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js b/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
index 04965352b..f571bc16d 100644
--- a/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
+++ b/runtime/ui-react/src/components/dialogs/Policy/ViewAllPolicies.js
@@ -59,415 +59,417 @@ import PoliciesTreeViewer from './PoliciesTreeViewer';
 import PolicyToscaFileSelector from './PolicyToscaFileSelector';
 
 const DivWhiteSpaceStyled = styled.div`
-    white-space: pre;
+  white-space: pre;
 `
 
 const ModalStyled = styled(Modal)`
-    @media (min-width: 800px) {
-        .modal-xl {
-            max-width: 96%;
-        }
+  @media (min-width: 800px) {
+    .modal-xl {
+      max-width: 96%;
     }
-    background-color: transparent;
+  }
+  background-color: transparent;
 `
 const DetailedRow = styled.div`
-    margin: 0 auto;
-    background-color: ${props => props.theme.policyEditorBackgroundColor};
-    font-size: ${props => props.theme.policyEditorFontSize};
-    width: 97%;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 20px;
+  margin: 0 auto;
+  background-color: ${ props => props.theme.policyEditorBackgroundColor };
+  font-size: ${ props => props.theme.policyEditorFontSize };
+  width: 97%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 20px;
 `
 
 const PoliciesTreeViewerDiv = styled.div`
-    width: 20%;
-    float: left;
-    left: 0;
-    overflow: auto;
+  width: 20%;
+  float: left;
+  left: 0;
+  overflow: auto;
 `
 
 const MaterialTableDiv = styled.div`
-    float: right;
-    width: 80%;
-    left: 20%;
+  float: right;
+  width: 80%;
+  left: 20%;
 `
 
 const standardCellStyle = { backgroundColor: '#039be5', color: '#FFF', 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 rowHeaderStyle = { backgroundColor: '#ddd', fontSize: '15pt', text: 'bold', border: '1px solid black' };
 
 export default class ViewAllPolicies extends React.Component {
   state = {
-        show: true,
-        policiesListData: [],
-        policiesListDataFiltered: [],
-        toscaModelsListData: [],
-        toscaModelsListDataFiltered: [],
-        jsonEditorForPolicy: new Map(),
-        showSuccessAlert: false,
-        showFailAlert: false,
-        showFileSelector: false,
-        policyColumnsDefinition: [
-            {
-                title: "Policy Name", field: "name",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            },
-            {
-                title: "Policy Version", field: "version",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle,
-            },
-            {
-                title: "Policy Type", field: "type",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            },
-            {
-                title: "Policy Type Version", field: "type_version",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            },
-            {
-                title: "Deployable in PDP Group", field: "supportedPdpGroupsString",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            },
-            {
-                title: "Deployed in PDP Group", field: "pdpGroupInfoString",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            }
-        ],
-        toscaColumnsDefinition: [
-            {
-                title: "Policy Model Type", field: "policyModelType",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            },
-            {
-                title: "Policy Acronym", field: "policyAcronym",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            },
-            {
-                title: "Version", field: "version",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            },
-            {
-                title: "Uploaded By", field: "updatedBy",
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            },
-            {
-                title: "Uploaded Date", field: "updatedDate", editable: 'never',
-                cellStyle: standardCellStyle,
-                headerStyle: headerStyle
-            }
-        ],
-        tableIcons: {
-            Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
-            Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
-            Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
-            Delete: forwardRef((props, ref) => <DeleteRoundedIcon {...props} ref={ref} />),
-            DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
-            Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
-            Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
-            Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
-            FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
-            LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
-            NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
-            PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
-            ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
-            Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
-            SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
-            ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
-            ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
-        }
-    };
-
-    constructor(props, context) {
-        super(props, context);
-        this.handleClose = this.handleClose.bind(this);
-        this.handleDeletePolicy = this.handleDeletePolicy.bind(this);
-        this.disableAlert = this.disableAlert.bind(this);
-        this.getAllPolicies = this.getAllPolicies.bind(this);
-        this.getAllToscaModels = this.getAllToscaModels.bind(this);
-        this.generateAdditionalPolicyColumns = this.generateAdditionalPolicyColumns.bind(this);
-        this.filterPolicies = this.filterPolicies.bind(this);
-        this.filterTosca = this.filterTosca.bind(this);
-        this.showFileSelector = this.showFileSelector.bind(this);
-        this.disableFileSelector = this.disableFileSelector.bind(this);
-        this.getAllPolicies();
-        this.getAllToscaModels();
+    show: true,
+    policiesListData: [],
+    policiesListDataFiltered: [],
+    toscaModelsListData: [],
+    toscaModelsListDataFiltered: [],
+    jsonEditorForPolicy: new Map(),
+    showSuccessAlert: false,
+    showFailAlert: false,
+    showFileSelector: false,
+    policyColumnsDefinition: [
+      {
+        title: "Policy Name", field: "name",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Policy Version", field: "version",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle,
+      },
+      {
+        title: "Policy Type", field: "type",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Policy Type Version", field: "type_version",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Deployable in PDP Group", field: "supportedPdpGroupsString",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Deployed in PDP Group", field: "pdpGroupInfoString",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      }
+    ],
+    toscaColumnsDefinition: [
+      {
+        title: "Policy Model Type", field: "policyModelType",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Policy Acronym", field: "policyAcronym",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Version", field: "version",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Uploaded By", field: "updatedBy",
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      },
+      {
+        title: "Uploaded Date", field: "updatedDate", editable: 'never',
+        cellStyle: standardCellStyle,
+        headerStyle: headerStyle
+      }
+    ],
+    tableIcons: {
+      Add: forwardRef((props, ref) => <AddBox { ...props } ref={ ref }/>),
+      Check: forwardRef((props, ref) => <Check { ...props } ref={ ref }/>),
+      Clear: forwardRef((props, ref) => <Clear { ...props } ref={ ref }/>),
+      Delete: forwardRef((props, ref) => <DeleteRoundedIcon { ...props } ref={ ref }/>),
+      DetailPanel: forwardRef((props, ref) => <ChevronRight { ...props } ref={ ref }/>),
+      Edit: forwardRef((props, ref) => <Edit { ...props } ref={ ref }/>),
+      Export: forwardRef((props, ref) => <SaveAlt { ...props } ref={ ref }/>),
+      Filter: forwardRef((props, ref) => <FilterList { ...props } ref={ ref }/>),
+      FirstPage: forwardRef((props, ref) => <FirstPage { ...props } ref={ ref }/>),
+      LastPage: forwardRef((props, ref) => <LastPage { ...props } ref={ ref }/>),
+      NextPage: forwardRef((props, ref) => <ChevronRight { ...props } ref={ ref }/>),
+      PreviousPage: forwardRef((props, ref) => <ChevronLeft { ...props } ref={ ref }/>),
+      ResetSearch: forwardRef((props, ref) => <Clear { ...props } ref={ ref }/>),
+      Search: forwardRef((props, ref) => <Search { ...props } ref={ ref }/>),
+      SortArrow: forwardRef((props, ref) => <ArrowDownward { ...props } ref={ ref }/>),
+      ThirdStateCheck: forwardRef((props, ref) => <Remove { ...props } ref={ ref }/>),
+      ViewColumn: forwardRef((props, ref) => <ViewColumn { ...props } ref={ ref }/>)
     }
+  };
 
-    generateAdditionalPolicyColumns(policiesData) {
-        policiesData.forEach(policy => {
-            let supportedPdpGroupsString = "";
-            if (typeof policy.supportedPdpGroups !== "undefined") {
-                for (const pdpGroup of policy["supportedPdpGroups"]) {
-                    for (const pdpSubGroup of Object.values(pdpGroup)[0]) {
-                        supportedPdpGroupsString += (Object.keys(pdpGroup)[0] + "/" + pdpSubGroup + "\r\n");
-                    }
-                }
-                policy["supportedPdpGroupsString"] = supportedPdpGroupsString;
-            }
+  constructor(props, context) {
+    super(props, context);
+    this.handleClose = this.handleClose.bind(this);
+    this.handleDeletePolicy = this.handleDeletePolicy.bind(this);
+    this.disableAlert = this.disableAlert.bind(this);
+    this.getAllPolicies = this.getAllPolicies.bind(this);
+    this.getAllToscaModels = this.getAllToscaModels.bind(this);
+    this.generateAdditionalPolicyColumns = this.generateAdditionalPolicyColumns.bind(this);
+    this.filterPolicies = this.filterPolicies.bind(this);
+    this.filterTosca = this.filterTosca.bind(this);
+    this.showFileSelector = this.showFileSelector.bind(this);
+    this.disableFileSelector = this.disableFileSelector.bind(this);
+    this.getAllPolicies();
+    this.getAllToscaModels();
+  }
 
-            let infoPdpGroup = "";
-            if (typeof policy.pdpGroupInfo !== "undefined") {
-                policy["pdpGroupInfo"].forEach(pdpGroupElem => {
-                    let groupName = Object.keys(pdpGroupElem)[0];
-                    pdpGroupElem[groupName]["pdpSubgroups"].forEach(pdpSubGroupElem => {
-                        infoPdpGroup +=  (groupName + "/" + pdpSubGroupElem["pdpType"] + " ("
-                            + pdpGroupElem[groupName]["pdpGroupState"] + ")" + "\r\n");
-                    });
-                    policy["pdpGroupInfoString"] = infoPdpGroup;
-                });
-            }
-        });
-    }
+  generateAdditionalPolicyColumns(policiesData) {
+    policiesData.forEach(policy => {
+      let supportedPdpGroupsString = "";
+      if (typeof policy.supportedPdpGroups !== "undefined") {
+        for (const pdpGroup of policy["supportedPdpGroups"]) {
+          for (const pdpSubGroup of Object.values(pdpGroup)[0]) {
+            supportedPdpGroupsString += (Object.keys(pdpGroup)[0] + "/" + pdpSubGroup + "\r\n");
+          }
+        }
+        policy["supportedPdpGroupsString"] = supportedPdpGroupsString;
+      }
 
-    getAllToscaModels() {
-        PolicyToscaService.getToscaPolicyModels().then(toscaModelsList => {
-            this.setState({ toscaModelsListData: toscaModelsList,
-                            toscaModelsListDataFiltered: toscaModelsList
-             });
+      let infoPdpGroup = "";
+      if (typeof policy.pdpGroupInfo !== "undefined") {
+        policy["pdpGroupInfo"].forEach(pdpGroupElem => {
+          let groupName = Object.keys(pdpGroupElem)[0];
+          pdpGroupElem[groupName]["pdpSubgroups"].forEach(pdpSubGroupElem => {
+            infoPdpGroup += (groupName + "/" + pdpSubGroupElem["pdpType"] + " ("
+              + pdpGroupElem[groupName]["pdpGroupState"] + ")" + "\r\n");
+          });
+          policy["pdpGroupInfoString"] = infoPdpGroup;
         });
-    }
+      }
+    });
+  }
 
-    getAllPolicies() {
-        PolicyService.getPoliciesList().then(allPolicies => {
-            this.generateAdditionalPolicyColumns(allPolicies["policies"])
-            this.setState({ policiesListData: allPolicies["policies"],
-                            policiesListDataFiltered: allPolicies["policies"],
-            })
-        });
+  getAllToscaModels() {
+    PolicyToscaService.getToscaPolicyModels().then(toscaModelsList => {
+      this.setState({
+        toscaModelsListData: toscaModelsList,
+        toscaModelsListDataFiltered: toscaModelsList
+      });
+    });
+  }
 
-    }
+  getAllPolicies() {
+    PolicyService.getPoliciesList().then(allPolicies => {
+      this.generateAdditionalPolicyColumns(allPolicies["policies"])
+      this.setState({
+        policiesListData: allPolicies["policies"],
+        policiesListDataFiltered: allPolicies["policies"],
+      })
+    });
 
-    handleClose() {
-        this.setState({ show: false });
-        this.props.history.push('/')
-    }
+  }
 
-    handleDeletePolicy(event, rowData) {
-        PolicyService.deletePolicy(rowData["type"], rowData["type_version"], rowData["name"],rowData["version"]).then(
-            respPolicyDeletion => {
-                if (typeof(respPolicyDeletion) === "undefined") {
-                    //it indicates a failure
-                    this.setState({
-                        showFailAlert: true,
-                        showMessage: 'Policy Deletion Failure'
-                    });
-                } else {
-                    this.setState({
-                        showSuccessAlert: true,
-                        showMessage: 'Policy successfully Deleted'
-                    });
-                    this.getAllPolicies();
-                }
-            }
-        )
-    }
+  handleClose() {
+    this.setState({ show: false });
+    this.props.history.push('/')
+  }
 
-    disableAlert() {
-        this.setState ({ showSuccessAlert: false, showFailAlert: false });
-    }
+  handleDeletePolicy(event, rowData) {
+    PolicyService.deletePolicy(rowData["type"], rowData["type_version"], rowData["name"], rowData["version"]).then(
+      respPolicyDeletion => {
+        if (typeof (respPolicyDeletion) === "undefined") {
+          //it indicates a failure
+          this.setState({
+            showFailAlert: true,
+            showMessage: 'Policy Deletion Failure'
+          });
+        } else {
+          this.setState({
+            showSuccessAlert: true,
+            showMessage: 'Policy successfully Deleted'
+          });
+          this.getAllPolicies();
+        }
+      }
+    )
+  }
 
-    filterPolicies(prefixForFiltering) {
-        this.setState({policiesListDataFiltered: this.state.policiesListData.filter(element => element.name.startsWith(prefixForFiltering))});
-    }
+  disableAlert() {
+    this.setState({ showSuccessAlert: false, showFailAlert: false });
+  }
 
-    filterTosca(prefixForFiltering) {
-        this.setState({toscaModelsListDataFiltered: this.state.toscaModelsListData.filter(element => element.policyModelType.startsWith(prefixForFiltering))});
-    }
+  filterPolicies(prefixForFiltering) {
+    this.setState({ policiesListDataFiltered: this.state.policiesListData.filter(element => element.name.startsWith(prefixForFiltering)) });
+  }
 
-    showFileSelector() {
-        this.setState({showFileSelector:true});
-    }
+  filterTosca(prefixForFiltering) {
+    this.setState({ toscaModelsListDataFiltered: this.state.toscaModelsListData.filter(element => element.policyModelType.startsWith(prefixForFiltering)) });
+  }
 
-    disableFileSelector() {
-        this.setState({showFileSelector:false});
-    }
+  showFileSelector() {
+    this.setState({ showFileSelector: true });
+  }
 
-    renderPoliciesTab() {
-        return (
-                <Tab eventKey="policies" title="Policies in Policy Framework">
-                        <Modal.Body>
-                        <div>
-                          <PoliciesTreeViewerDiv>
-                              <PoliciesTreeViewer policiesData={this.state.policiesListData} valueForTreeCreation="name" policiesFilterFunction={this.filterPolicies} />
-                          </PoliciesTreeViewerDiv>
-                          <MaterialTableDiv>
-                              <MaterialTable
-                                  title={"Policies"}
-                                  data={this.state.policiesListDataFiltered}
-                                  columns={this.state.policyColumnsDefinition}
-                                  icons={this.state.tableIcons}
-                                  onRowClick={(event, rowData, togglePanel) => togglePanel()}
-                                  options={{
-                                      grouping: true,
-                                      exportButton: true,
-                                      headerStyle:rowHeaderStyle,
-                                      actionsColumnIndex: -1
-                                  }}
-                                  detailPanel={[
-                                    {
-                                      icon: ArrowForwardIosIcon,
-                                      tooltip: 'Show Configuration',
-                                      render: rowData => {
-                                        return (
-                                            <DetailedRow>
-                                                <PolicyEditor policyModelType={rowData["type"]} policyModelTypeVersion={rowData["type_version"]}
-                                                    policyName={rowData["name"]} policyVersion={rowData["version"]} policyProperties={rowData["properties"]}
-                                                    policiesTableUpdateFunction={this.getAllPolicies} />
-                                            </DetailedRow>
-                                        )
-                                      },
-                                    },
-                                    {
-                                      icon: DehazeIcon,
-                                      openIcon: DehazeIcon,
-                                      tooltip: 'Show Raw Data',
-                                      render: rowData => {
-                                        return (
-                                            <DetailedRow>
-                                                <pre>{JSON.stringify(rowData, null, 2)}</pre>
-                                            </DetailedRow>
-                                        )
-                                      },
-                                    },
-                                    {
-                                      icon: PublishIcon,
-                                      openIcon: PublishIcon,
-                                      tooltip: 'PDP Group Deployment',
-                                      render: rowData => {
-                                        return (
-                                            <DetailedRow>
-                                                <PolicyDeploymentEditor policyData={rowData} policiesTableUpdateFunction={this.getAllPolicies} />
-                                            </DetailedRow>
-                                        )
-                                      },
-                                    }
-                                  ]}
-                                  actions={[
-                                      {
-                                        icon: DeleteRoundedIcon,
-                                        tooltip: 'Delete Policy',
-                                        onClick: (event, rowData) => this.handleDeletePolicy(event, rowData)
-                                      }
-                                  ]}
-                              />
-                          </MaterialTableDiv>
-                          </div>
-                        </Modal.Body>
-                    </Tab>
-        );
-    }
+  disableFileSelector() {
+    this.setState({ showFileSelector: false });
+  }
 
-    renderToscaTab() {
-        return (
-                    <Tab eventKey="tosca models" title="Tosca Models in Policy Framework">
-                        <Modal.Body>
-                          <div>
-                              <PoliciesTreeViewerDiv>
-                                  <PoliciesTreeViewer policiesData={this.state.toscaModelsListData} valueForTreeCreation="policyModelType" policiesFilterFunction={this.filterTosca} />
-                              </PoliciesTreeViewerDiv>
-                              <MaterialTableDiv>
-                               <MaterialTable
-                                  title={"Tosca Models"}
-                                  data={this.state.toscaModelsListDataFiltered}
-                                  columns={this.state.toscaColumnsDefinition}
-                                  icons={this.state.tableIcons}
-                                  onRowClick={(event, rowData, togglePanel) => togglePanel()}
-                                  options={{
-                                      grouping: true,
-                                      exportButton: true,
-                                      headerStyle:rowHeaderStyle,
-                                      actionsColumnIndex: -1
-                                  }}
-                                  actions={[
-                                      {
-                                          icon: AddIcon,
-                                          tooltip: 'Add New Tosca Model',
-                                          isFreeAction: true,
-                                          onClick: () => this.showFileSelector()
-                                      }
-                                  ]}
-                                  detailPanel={[
-                                    {
-                                      icon: ArrowForwardIosIcon,
-                                      tooltip: 'Show Tosca',
-                                      render: rowData => {
-                                        return (
-                                            <DetailedRow>
-                                                <ToscaViewer toscaData={rowData} />
-                                            </DetailedRow>
-                                        )
-                                      },
-                                    },
-                                    {
-                                      icon: DehazeIcon,
-                                      openIcon: DehazeIcon,
-                                      tooltip: 'Show Raw Data',
-                                      render: rowData => {
-                                        return (
-                                            <DetailedRow>
-                                                <pre>{JSON.stringify(rowData, null, 2)}</pre>
-                                            </DetailedRow>
-                                        )
-                                      },
-                                    },
-                                    {
-                                      icon: AddIcon,
-                                      openIcon: AddIcon,
-                                      tooltip: 'Create a policy from this model',
-                                      render: rowData => {
-                                        return (
-                                            <DetailedRow>
-                                                <PolicyEditor policyModelType={rowData["policyModelType"]} policyModelTypeVersion={rowData["version"]} policyProperties={{}} policiesTableUpdateFunction={this.getAllPolicies} />
-                                            </DetailedRow>
-                                        )
-                                      },
-                                    },
-                                  ]}
-                               />
-                              </MaterialTableDiv>
-                         </div>
-                        </Modal.Body>
-                    </Tab>
-        );
-    }
+  renderPoliciesTab() {
+    return (
+      <Tab eventKey="policies" title="Policies in Policy Framework">
+        <Modal.Body>
+          <div>
+            <PoliciesTreeViewerDiv>
+              <PoliciesTreeViewer policiesData={ this.state.policiesListData } valueForTreeCreation="name" policiesFilterFunction={ this.filterPolicies }/>
+            </PoliciesTreeViewerDiv>
+            <MaterialTableDiv>
+              <MaterialTable
+                title={ "Policies" }
+                data={ this.state.policiesListDataFiltered }
+                columns={ this.state.policyColumnsDefinition }
+                icons={ this.state.tableIcons }
+                onRowClick={ (event, rowData, togglePanel) => togglePanel() }
+                options={ {
+                  grouping: true,
+                  exportButton: true,
+                  headerStyle: rowHeaderStyle,
+                  actionsColumnIndex: -1
+                } }
+                detailPanel={ [
+                  {
+                    icon: ArrowForwardIosIcon,
+                    tooltip: 'Show Configuration',
+                    render: rowData => {
+                      return (
+                        <DetailedRow>
+                          <PolicyEditor policyModelType={ rowData["type"] } policyModelTypeVersion={ rowData["type_version"] }
+                                        policyName={ rowData["name"] } policyVersion={ rowData["version"] } policyProperties={ rowData["properties"] }
+                                        policiesTableUpdateFunction={ this.getAllPolicies }/>
+                        </DetailedRow>
+                      )
+                    },
+                  },
+                  {
+                    icon: DehazeIcon,
+                    openIcon: DehazeIcon,
+                    tooltip: 'Show Raw Data',
+                    render: rowData => {
+                      return (
+                        <DetailedRow>
+                          <pre>{ JSON.stringify(rowData, null, 2) }</pre>
+                        </DetailedRow>
+                      )
+                    },
+                  },
+                  {
+                    icon: PublishIcon,
+                    openIcon: PublishIcon,
+                    tooltip: 'PDP Group Deployment',
+                    render: rowData => {
+                      return (
+                        <DetailedRow>
+                          <PolicyDeploymentEditor policyData={ rowData } policiesTableUpdateFunction={ this.getAllPolicies }/>
+                        </DetailedRow>
+                      )
+                    },
+                  }
+                ] }
+                actions={ [
+                  {
+                    icon: DeleteRoundedIcon,
+                    tooltip: 'Delete Policy',
+                    onClick: (event, rowData) => this.handleDeletePolicy(event, rowData)
+                  }
+                ] }
+              />
+            </MaterialTableDiv>
+          </div>
+        </Modal.Body>
+      </Tab>
+    );
+  }
 
-    render() {
-        return (
-        <React.Fragment>
-            <ModalStyled size="xl" show={this.state.show} onHide={this.handleClose} backdrop="static" keyboard={false}>
-                <Modal.Header closeButton>
-                </Modal.Header>
-                <Tabs id="controlled-tab-example" activeKey={this.state.key} onSelect={key => this.setState({ key, selectedRowData: {} })}>
-                    {this.renderPoliciesTab()}
-                    {this.renderToscaTab()}
-                </Tabs>
-                <Alert variant="success" show={this.state.showSuccessAlert} onClose={this.disableAlert} dismissible>
-                    <DivWhiteSpaceStyled>
-                        {this.state.showMessage}
-                    </DivWhiteSpaceStyled>
-                </Alert>
-                <Alert variant="danger" show={this.state.showFailAlert} onClose={this.disableAlert} dismissible>
-                    <DivWhiteSpaceStyled>
-                        {this.state.showMessage}
-                    </DivWhiteSpaceStyled>
-                </Alert>
-                <Modal.Footer>
-                    <Button variant="secondary" onClick={this.handleClose}>Close</Button>
-               </Modal.Footer>
-            </ModalStyled>
-            <PolicyToscaFileSelector show={this.state.showFileSelector} disableFunction={this.disableFileSelector} toscaTableUpdateFunction={this.getAllToscaModels}/>
-            </React.Fragment>
-      );
-    }
-  }
\ No newline at end of file
+  renderToscaTab() {
+    return (
+      <Tab eventKey="tosca models" title="Tosca Models in Policy Framework">
+        <Modal.Body>
+          <div>
+            <PoliciesTreeViewerDiv>
+              <PoliciesTreeViewer policiesData={ this.state.toscaModelsListData } valueForTreeCreation="policyModelType" policiesFilterFunction={ this.filterTosca }/>
+            </PoliciesTreeViewerDiv>
+            <MaterialTableDiv>
+              <MaterialTable
+                title={ "Tosca Models" }
+                data={ this.state.toscaModelsListDataFiltered }
+                columns={ this.state.toscaColumnsDefinition }
+                icons={ this.state.tableIcons }
+                onRowClick={ (event, rowData, togglePanel) => togglePanel() }
+                options={ {
+                  grouping: true,
+                  exportButton: true,
+                  headerStyle: rowHeaderStyle,
+                  actionsColumnIndex: -1
+                } }
+                actions={ [
+                  {
+                    icon: AddIcon,
+                    tooltip: 'Add New Tosca Model',
+                    isFreeAction: true,
+                    onClick: () => this.showFileSelector()
+                  }
+                ] }
+                detailPanel={ [
+                  {
+                    icon: ArrowForwardIosIcon,
+                    tooltip: 'Show Tosca',
+                    render: rowData => {
+                      return (
+                        <DetailedRow>
+                          <ToscaViewer toscaData={ rowData }/>
+                        </DetailedRow>
+                      )
+                    },
+                  },
+                  {
+                    icon: DehazeIcon,
+                    openIcon: DehazeIcon,
+                    tooltip: 'Show Raw Data',
+                    render: rowData => {
+                      return (
+                        <DetailedRow>
+                          <pre>{ JSON.stringify(rowData, null, 2) }</pre>
+                        </DetailedRow>
+                      )
+                    },
+                  },
+                  {
+                    icon: AddIcon,
+                    openIcon: AddIcon,
+                    tooltip: 'Create a policy from this model',
+                    render: rowData => {
+                      return (
+                        <DetailedRow>
+                          <PolicyEditor policyModelType={ rowData["policyModelType"] } policyModelTypeVersion={ rowData["version"] } policyProperties={ {} } policiesTableUpdateFunction={ this.getAllPolicies }/>
+                        </DetailedRow>
+                      )
+                    },
+                  },
+                ] }
+              />
+            </MaterialTableDiv>
+          </div>
+        </Modal.Body>
+      </Tab>
+    );
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <ModalStyled size="xl" show={ this.state.show } onHide={ this.handleClose } backdrop="static" keyboard={ false }>
+          <Modal.Header closeButton>
+          </Modal.Header>
+          <Tabs id="controlled-tab-example" activeKey={ this.state.key } onSelect={ key => this.setState({ key, selectedRowData: {} }) }>
+            { this.renderPoliciesTab() }
+            { this.renderToscaTab() }
+          </Tabs>
+          <Alert variant="success" show={ this.state.showSuccessAlert } onClose={ this.disableAlert } dismissible>
+            <DivWhiteSpaceStyled>
+              { this.state.showMessage }
+            </DivWhiteSpaceStyled>
+          </Alert>
+          <Alert variant="danger" show={ this.state.showFailAlert } onClose={ this.disableAlert } dismissible>
+            <DivWhiteSpaceStyled>
+              { this.state.showMessage }
+            </DivWhiteSpaceStyled>
+          </Alert>
+          <Modal.Footer>
+            <Button variant="secondary" onClick={ this.handleClose }>Close</Button>
+          </Modal.Footer>
+        </ModalStyled>
+        <PolicyToscaFileSelector show={ this.state.showFileSelector } disableFunction={ this.disableFileSelector } toscaTableUpdateFunction={ this.getAllToscaModels }/>
+      </React.Fragment>
+    );
+  }
+}