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

2 files changed, 147 insertions, 147 deletions

diff --git a/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.js b/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.js
index be77f14e9..1e2754151 100644
--- a/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.js
+++ b/runtime/ui-react/src/components/dialogs/Policy/PolicyEditor.js
@@ -23,7 +23,7 @@
 
 import React from 'react'
 import PolicyToscaService from '../../../api/PolicyToscaService';
-import { JSONEditor }  from '@json-editor/json-editor/dist/nonmin/jsoneditor.js';
+import { JSONEditor } from '@json-editor/json-editor/dist/nonmin/jsoneditor.js';
 import "@fortawesome/fontawesome-free/css/all.css"
 import styled from 'styled-components';
 import Button from 'react-bootstrap/Button';
@@ -33,160 +33,160 @@ import PolicyService from '../../../api/PolicyService';
 import OnapUtils from '../../../utils/OnapUtils';
 
 const DivWhiteSpaceStyled = styled.div`
-    white-space: pre;
+  white-space: pre;
 `
 
 const JsonEditorDiv = styled.div`
-    margin-top: 20px;
-    background-color: ${props => props.theme.loopViewerBackgroundColor};
-    text-align: justify;
-    font-size: ${props => props.theme.policyEditorFontSize};
-    border: 1px solid #C0C0C0;
+  margin-top: 20px;
+  background-color: ${ props => props.theme.loopViewerBackgroundColor };
+  text-align: justify;
+  font-size: ${ props => props.theme.policyEditorFontSize };
+  border: 1px solid #C0C0C0;
 `
 const PanelDiv = styled.div`
-    text-align: justify;
-    font-size: ${props => props.theme.policyEditorFontSize};
-    background-color: ${props => props.theme.loopViewerBackgroundColor};
+  text-align: justify;
+  font-size: ${ props => props.theme.policyEditorFontSize };
+  background-color: ${ props => props.theme.loopViewerBackgroundColor };
 `
 
 export default class PolicyEditor extends React.Component {
 
-   state = {
-        policyModelType: this.props.policyModelType,
-        policyModelTypeVersion: this.props.policyModelTypeVersion,
-        policyName: (typeof this.props.policyName !== "undefined") ? this.props.policyName : "org.onap.policy.new",
-        policyVersion: (typeof this.props.policyVersion !== "undefined") ? this.props.policyVersion : "0.0.1",
-        policyProperties: this.props.policyProperties,
-        showSuccessAlert: false,
-        showFailAlert: false,
-        jsonEditor: null,
-        jsonEditorDivId: this.props.policyModelType + "_" + this.props.policyModelTypeVersion + "_" + this.props.policyName + "_" + this.props.policyVersion,
-   }
-
-   constructor(props, context) {
-        super(props, context);
-        this.createJsonEditor = this.createJsonEditor.bind(this);
-        this.getToscaModelForPolicy = this.getToscaModelForPolicy.bind(this);
-        this.disableAlert = this.disableAlert.bind(this);
-        this.handleCreateNewVersion = this.handleCreateNewVersion.bind(this);
-        this.handleChangePolicyName = this.handleChangePolicyName.bind(this);
-        this.handleChangePolicyVersion = this.handleChangePolicyVersion.bind(this);
-   }
-
-    disableAlert() {
-        this.setState ({ showSuccessAlert: false, showFailAlert: false });
-    }
-
-    customValidation(editorData) {
-        // method for sub-classes to override with customized validation
-        return [];
-    }
-
-    handleCreateNewVersion() {
-        var editorData = this.state.jsonEditor.getValue();
-        var errors = this.state.jsonEditor.validate();
-        errors = errors.concat(this.customValidation(editorData));
-
-        if (errors.length !== 0) {
-            console.error("Errors detected during policy data validation ", errors);
-            this.setState({
-                showFailAlert: true,
-                showMessage: 'Errors detected during policy data validation:\n' + OnapUtils.jsonEditorErrorFormatter(errors)
-            });
-            return;
+  state = {
+    policyModelType: this.props.policyModelType,
+    policyModelTypeVersion: this.props.policyModelTypeVersion,
+    policyName: (typeof this.props.policyName !== "undefined") ? this.props.policyName : "org.onap.policy.new",
+    policyVersion: (typeof this.props.policyVersion !== "undefined") ? this.props.policyVersion : "0.0.1",
+    policyProperties: this.props.policyProperties,
+    showSuccessAlert: false,
+    showFailAlert: false,
+    jsonEditor: null,
+    jsonEditorDivId: this.props.policyModelType + "_" + this.props.policyModelTypeVersion + "_" + this.props.policyName + "_" + this.props.policyVersion,
+  }
+
+  constructor(props, context) {
+    super(props, context);
+    this.createJsonEditor = this.createJsonEditor.bind(this);
+    this.getToscaModelForPolicy = this.getToscaModelForPolicy.bind(this);
+    this.disableAlert = this.disableAlert.bind(this);
+    this.handleCreateNewVersion = this.handleCreateNewVersion.bind(this);
+    this.handleChangePolicyName = this.handleChangePolicyName.bind(this);
+    this.handleChangePolicyVersion = this.handleChangePolicyVersion.bind(this);
+  }
+
+  disableAlert() {
+    this.setState({ showSuccessAlert: false, showFailAlert: false });
+  }
+
+  customValidation(editorData) {
+    // method for sub-classes to override with customized validation
+    return [];
+  }
+
+  handleCreateNewVersion() {
+    var editorData = this.state.jsonEditor.getValue();
+    var errors = this.state.jsonEditor.validate();
+    errors = errors.concat(this.customValidation(editorData));
+
+    if (errors.length !== 0) {
+      console.error("Errors detected during policy data validation ", errors);
+      this.setState({
+        showFailAlert: true,
+        showMessage: 'Errors detected during policy data validation:\n' + OnapUtils.jsonEditorErrorFormatter(errors)
+      });
+      return;
+    } else {
+      console.info("NO validation errors found in policy data");
+      PolicyService.createNewPolicy(this.state.policyModelType, this.state.policyModelTypeVersion,
+        this.state.policyName, this.state.policyVersion, editorData).then(respPolicyCreation => {
+        if (typeof (respPolicyCreation) === "undefined") {
+          //it indicates a failure
+          this.setState({
+            showFailAlert: true,
+            showMessage: 'Policy Creation Failure'
+          });
         } else {
-            console.info("NO validation errors found in policy data");
-            PolicyService.createNewPolicy(this.state.policyModelType, this.state.policyModelTypeVersion,
-                this.state.policyName, this.state.policyVersion, editorData).then(respPolicyCreation => {
-                if (typeof(respPolicyCreation) === "undefined") {
-                    //it indicates a failure
-                    this.setState({
-                        showFailAlert: true,
-                        showMessage: 'Policy Creation Failure'
-                    });
-                } else {
-                    this.setState({
-                        showSuccessAlert: true,
-                        showMessage: 'Policy '+ this.state.policyName + '/' + this.state.policyVersion + ' created successfully'
-                    });
-                    this.props.policiesTableUpdateFunction();
-                }
-            })
+          this.setState({
+            showSuccessAlert: true,
+            showMessage: 'Policy ' + this.state.policyName + '/' + this.state.policyVersion + ' created successfully'
+          });
+          this.props.policiesTableUpdateFunction();
         }
+      })
     }
-
-   getToscaModelForPolicy() {
-        PolicyToscaService.getToscaPolicyModel(this.state.policyModelType, this.state.policyModelTypeVersion).then(respJsonPolicyTosca => {
-            if (respJsonPolicyTosca !== {}) {
-                this.setState({
-                                jsonSchemaPolicyTosca: respJsonPolicyTosca,
-                                jsonEditor: this.createJsonEditor(respJsonPolicyTosca, this.state.policyProperties),
-                            })
-            }
-        });
-   }
-
-   componentDidMount() {
-        this.getToscaModelForPolicy();
-   }
-
-   createJsonEditor(toscaModel, editorData) {
-        return new JSONEditor(document.getElementById(this.state.jsonEditorDivId),
-        {
-              schema: toscaModel,
-              startval: editorData,
-              theme: 'bootstrap4',
-              iconlib: 'fontawesome5',
-              object_layout: 'grid',
-              disable_properties: false,
-              disable_edit_json: false,
-              disable_array_reorder: true,
-              disable_array_delete_last_row: true,
-              disable_array_delete_all_rows: false,
-              array_controls_top: true,
-              keep_oneof_values: false,
-              collapsed: true,
-              show_errors: 'always',
-              display_required_only: false,
-              show_opt_in: false,
-              prompt_before_delete: true,
-              required_by_default: false
+  }
+
+  getToscaModelForPolicy() {
+    PolicyToscaService.getToscaPolicyModel(this.state.policyModelType, this.state.policyModelTypeVersion).then(respJsonPolicyTosca => {
+      if (respJsonPolicyTosca !== {}) {
+        this.setState({
+          jsonSchemaPolicyTosca: respJsonPolicyTosca,
+          jsonEditor: this.createJsonEditor(respJsonPolicyTosca, this.state.policyProperties),
         })
-   }
-
-    handleChangePolicyName(event) {
-         this.setState({
-                  policyName: event.target.value,
-                });
-    }
-
-    handleChangePolicyVersion(event) {
-         this.setState({
-                  policyVersion: event.target.value,
-                });
-    }
-
-   render() {
-       return (
-                    <PanelDiv>
-                      <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>
-                      <TextField required id="policyName" label="Required" defaultValue={this.state.policyName}
-                        onChange={this.handleChangePolicyName} variant="outlined" size="small"/>
-                      <TextField required id="policyVersion" label="Required" defaultValue={this.state.policyVersion}
-                        onChange={this.handleChangePolicyVersion} size="small" variant="outlined"/>
-                      <Button variant="secondary" title="Create a new policy version from the defined parameters"
-                        onClick={this.handleCreateNewVersion}>Create New Version</Button>
-                      <JsonEditorDiv id={this.state.jsonEditorDivId} title="Policy Properties"/>
-                    </PanelDiv>
-       );
-   }
-}
\ No newline at end of file
+      }
+    });
+  }
+
+  componentDidMount() {
+    this.getToscaModelForPolicy();
+  }
+
+  createJsonEditor(toscaModel, editorData) {
+    return new JSONEditor(document.getElementById(this.state.jsonEditorDivId),
+      {
+        schema: toscaModel,
+        startval: editorData,
+        theme: 'bootstrap4',
+        iconlib: 'fontawesome5',
+        object_layout: 'grid',
+        disable_properties: false,
+        disable_edit_json: false,
+        disable_array_reorder: true,
+        disable_array_delete_last_row: true,
+        disable_array_delete_all_rows: false,
+        array_controls_top: true,
+        keep_oneof_values: false,
+        collapsed: true,
+        show_errors: 'always',
+        display_required_only: false,
+        show_opt_in: false,
+        prompt_before_delete: true,
+        required_by_default: false
+      })
+  }
+
+  handleChangePolicyName(event) {
+    this.setState({
+      policyName: event.target.value,
+    });
+  }
+
+  handleChangePolicyVersion(event) {
+    this.setState({
+      policyVersion: event.target.value,
+    });
+  }
+
+  render() {
+    return (
+      <PanelDiv>
+        <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>
+        <TextField required id="policyName" label="Required" defaultValue={ this.state.policyName }
+                   onChange={ this.handleChangePolicyName } variant="outlined" size="small"/>
+        <TextField required id="policyVersion" label="Required" defaultValue={ this.state.policyVersion }
+                   onChange={ this.handleChangePolicyVersion } size="small" variant="outlined"/>
+        <Button variant="secondary" title="Create a new policy version from the defined parameters"
+                onClick={ this.handleCreateNewVersion }>Create New Version</Button>
+        <JsonEditorDiv id={ this.state.jsonEditorDivId } title="Policy Properties"/>
+      </PanelDiv>
+    );
+  }
+}
diff --git a/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyEditor.test.js.snap b/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyEditor.test.js.snap
index 959b52a36..bf84e91d1 100644
--- a/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyEditor.test.js.snap
+++ b/runtime/ui-react/src/components/dialogs/Policy/__snapshots__/PolicyEditor.test.js.snap
@@ -37,7 +37,7 @@ exports[`Verify PolicyEditor Test the render method 1`] = `
 >
   <styled.div>
     <div
-      className="sc-dlfnbm iSTbVM"
+      className="sc-dlfnbm eVKaeY"
     >
       <Alert
         closeLabel="Close alert"
@@ -777,7 +777,7 @@ exports[`Verify PolicyEditor Test the render method 1`] = `
         title="Policy Properties"
       >
         <div
-          className="sc-gsTCUz dAYWPx"
+          className="sc-gsTCUz hXXDCR"
           id="onap.policies.monitoring.tcagen2_1.0.0_org.onap.new_1.0.0"
           title="Policy Properties"
         />