Fix the legacy Guard UI

Fix the legacy policies UI because guard content can't be set in PolicyModal component.
It was due to Jsoneditor bugged parameter

Issue-ID: CLAMP-780
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
Change-Id: I8070d8c57e48c9a386e19475f1d377f91104aef1
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

2 files changed, 18 insertions, 5 deletions

diff --git a/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js b/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
index 189523765..d8065ede6 100644
--- a/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
+++ b/ui-react/src/components/dialogs/ManageDictionaries/ManageDictionaries.js
@@ -236,7 +236,6 @@ export default class ManageDictionaries extends React.Component {
         TemplateMenuService.getDictionary().then(dictionaryNames => {
             this.setState({ dictionaryNames: dictionaryNames })
         });
-        var dictNamesingetDict = this.state.dictionaryNames;
     }
 
     getDictionaryElements(dictionaryName) {
diff --git a/ui-react/src/components/dialogs/Policy/PolicyModal.js b/ui-react/src/components/dialogs/Policy/PolicyModal.js
index 7151725c3..0f41beb09 100644
--- a/ui-react/src/components/dialogs/Policy/PolicyModal.js
+++ b/ui-react/src/components/dialogs/Policy/PolicyModal.js
@@ -102,10 +102,25 @@ 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,
-              theme: 'bootstrap4',
+              theme: 'myBootstrap4',
               object_layout: 'grid',
               disable_properties: true,
               disable_edit_json: false,
@@ -117,10 +132,9 @@ export default class PolicyModal extends React.Component {
               collapsed:true,
               show_errors: 'always',
               display_required_only: false,
-              show_opt_in: true,
+              show_opt_in: false,
               prompt_before_delete: true,
-              required_by_default: false,
-              array_controls_top: true
+              required_by_default: false
         })
     }