From 8abe2f19e1494ccf45276a7869daaf77ac01c438 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 19 Oct 2022 19:10:33 +0300
Subject: [PATCH] UI: Release ace editor resources on destroy. Improve node
 script test dialog.

---
 .../audit-log-details-dialog.component.ts     | 11 ++++++--
 .../event/event-content-dialog.component.ts   | 20 +++++++++----
 .../import-dialog-csv.component.ts            | 21 ++++++++++----
 ...-action-pretty-resources-tabs.component.ts |  1 +
 .../pages/widget/widget-editor.component.ts   |  2 ++
 .../app/shared/components/css.component.ts    |  3 ++
 .../node-script-test-dialog.component.html    |  2 +-
 .../node-script-test-dialog.component.ts      |  7 +++--
 .../app/shared/components/html.component.ts   |  3 ++
 .../shared/components/js-func.component.ts    |  3 ++
 .../components/json-content.component.ts      |  3 ++
 .../components/json-object-edit.component.ts  |  3 ++
 .../components/json-object-view.component.ts  | 10 +++++--
 .../components/markdown-editor.component.ts   | 10 +++++--
 .../components/protobuf-content.component.ts  |  3 ++
 .../assets/locale/locale.constant-en_US.json  |  2 ++
 ui-ngx/src/styles.scss                        | 28 +++++++++++++++++++
 17 files changed, 111 insertions(+), 21 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.ts b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.ts
index 0a7b8211e7..38bedf4782 100644
--- a/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, ElementRef, Inject, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, Inject, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -33,7 +33,7 @@ export interface AuditLogDetailsDialogData {
   templateUrl: './audit-log-details-dialog.component.html',
   styleUrls: ['./audit-log-details-dialog.component.scss']
 })
-export class AuditLogDetailsDialogComponent extends DialogComponent<AuditLogDetailsDialogComponent> implements OnInit {
+export class AuditLogDetailsDialogComponent extends DialogComponent<AuditLogDetailsDialogComponent> implements OnInit, OnDestroy {
 
   @ViewChild('actionDataEditor', {static: true})
   actionDataEditorElmRef: ElementRef;
@@ -45,6 +45,7 @@ export class AuditLogDetailsDialogComponent extends DialogComponent<AuditLogDeta
   displayFailureDetails: boolean;
   actionData: string;
   actionFailureDetails: string;
+  aceEditors: Ace.Editor[] = [];
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
@@ -66,6 +67,11 @@ export class AuditLogDetailsDialogComponent extends DialogComponent<AuditLogDeta
     }
   }
 
+  ngOnDestroy(): void {
+    this.aceEditors.forEach(editor => editor.destroy());
+    super.ngOnDestroy();
+  }
+
   createEditor(editorElementRef: ElementRef, content: string): void {
     const editorElement = editorElementRef.nativeElement;
     let editorOptions: Partial<Ace.EditorOptions> = {
@@ -86,6 +92,7 @@ export class AuditLogDetailsDialogComponent extends DialogComponent<AuditLogDeta
     getAce().subscribe(
       (ace) => {
         const editor = ace.edit(editorElement, editorOptions);
+        this.aceEditors.push(editor);
         editor.session.setUseWrapMode(false);
         editor.setValue(content, -1);
         this.updateEditorSize(editorElement, content, editor);
diff --git a/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.ts b/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.ts
index 8b5d0bc6a6..42d9067743 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, ElementRef, Inject, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, Inject, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -40,7 +40,7 @@ export interface EventContentDialogData {
   templateUrl: './event-content-dialog.component.html',
   styleUrls: ['./event-content-dialog.component.scss']
 })
-export class EventContentDialogComponent extends DialogComponent<EventContentDialogData> implements OnInit {
+export class EventContentDialogComponent extends DialogComponent<EventContentDialogData> implements OnInit, OnDestroy {
 
   @ViewChild('eventContentEditor', {static: true})
   eventContentEditorElmRef: ElementRef;
@@ -48,6 +48,7 @@ export class EventContentDialogComponent extends DialogComponent<EventContentDia
   content: string;
   title: string;
   contentType: ContentType;
+  aceEditor: Ace.Editor;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
@@ -65,6 +66,13 @@ export class EventContentDialogComponent extends DialogComponent<EventContentDia
     this.createEditor(this.eventContentEditorElmRef, this.content);
   }
 
+  ngOnDestroy(): void {
+    if (this.aceEditor) {
+      this.aceEditor.destroy();
+    }
+    super.ngOnDestroy();
+  }
+
   isJson(str) {
     try {
       return isLiteralObject(JSON.parse(str));
@@ -116,10 +124,10 @@ export class EventContentDialogComponent extends DialogComponent<EventContentDia
         editorOptions = {...editorOptions, ...advancedOptions};
         getAce().subscribe(
           (ace) => {
-            const editor = ace.edit(editorElement, editorOptions);
-            editor.session.setUseWrapMode(false);
-            editor.setValue(processedContent, -1);
-            this.updateEditorSize(editorElement, processedContent, editor);
+            this.aceEditor = ace.edit(editorElement, editorOptions);
+            this.aceEditor.session.setUseWrapMode(false);
+            this.aceEditor.setValue(processedContent, -1);
+            this.updateEditorSize(editorElement, processedContent, this.aceEditor);
           }
         );
       }
diff --git a/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.ts b/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.ts
index 2db07e913f..0d23d9a018 100644
--- a/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.ts
+++ b/ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit, Component, ElementRef, Inject, Renderer2, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Inject, OnDestroy, Renderer2, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -54,7 +54,7 @@ export interface ImportDialogCsvData {
   styleUrls: ['./import-dialog-csv.component.scss']
 })
 export class ImportDialogCsvComponent extends DialogComponent<ImportDialogCsvComponent, boolean>
-  implements AfterViewInit {
+  implements AfterViewInit, OnDestroy {
 
   @ViewChild('importStepper', {static: true}) importStepper: MatVerticalStepper;
 
@@ -91,6 +91,8 @@ export class ImportDialogCsvComponent extends DialogComponent<ImportDialogCsvCom
   isImportData = false;
   statistical: BulkImportResult;
 
+  aceEditor: Ace.Editor;
+
   private allowAssignColumn: ImportEntityColumnType[];
   private initEditorComponent = false;
   private parseData: CsvToJsonResult;
@@ -131,6 +133,13 @@ export class ImportDialogCsvComponent extends DialogComponent<ImportDialogCsvCom
     this.allowAssignColumn = columns.map(column => column.value);
   }
 
+  ngOnDestroy(): void {
+    if (this.aceEditor) {
+      this.aceEditor.destroy();
+    }
+    super.ngOnDestroy();
+  }
+
   cancel(): void {
     this.dialogRef.close(false);
   }
@@ -271,10 +280,10 @@ export class ImportDialogCsvComponent extends DialogComponent<ImportDialogCsvCom
     const content = contents.map(error => error.replace('\n', '')).join('\n');
     getAce().subscribe(
       (ace) => {
-        const editor = ace.edit(editorElement, editorOptions);
-        editor.session.setUseWrapMode(false);
-        editor.setValue(content, -1);
-        this.updateEditorSize(editorElement, content, editor);
+        this.aceEditor = ace.edit(editorElement, editorOptions);
+        this.aceEditor.session.setUseWrapMode(false);
+        this.aceEditor.setValue(content, -1);
+        this.updateEditorSize(editorElement, content, this.aceEditor);
       }
     );
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts
index 65964567a4..c35ae0a05e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/custom-action-pretty-resources-tabs.component.ts
@@ -93,6 +93,7 @@ export class CustomActionPrettyResourcesTabsComponent extends PageComponent impl
   }
 
   ngOnDestroy(): void {
+    this.aceEditors.forEach(editor => editor.destroy());
     this.aceResize$.disconnect();
   }
 
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts
index 0ec6dbddf4..37ecc8032c 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/widget/widget-editor.component.ts
@@ -210,6 +210,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
 
   ngOnDestroy(): void {
     this.window.removeEventListener('message', this.onWindowMessageListener);
+    this.aceEditors.forEach(editor => editor.destroy());
     this.aceResize$.disconnect();
     this.rxSubscriptions.forEach((subscription) => {
       subscription.unsubscribe();
@@ -599,6 +600,7 @@ export class WidgetEditorComponent extends PageComponent implements OnInit, OnDe
     config.title = this.widget.widgetName;
     this.widget.defaultConfig = JSON.stringify(config);
     this.iframe.attr('data-widget', JSON.stringify(this.widget));
+    // @ts-ignore
     this.iframe[0].contentWindow.location.reload(true);
   }
 
diff --git a/ui-ngx/src/app/shared/components/css.component.ts b/ui-ngx/src/app/shared/components/css.component.ts
index 0156831712..2a8442e6d5 100644
--- a/ui-ngx/src/app/shared/components/css.component.ts
+++ b/ui-ngx/src/app/shared/components/css.component.ts
@@ -145,6 +145,9 @@ export class CssComponent implements OnInit, OnDestroy, ControlValueAccessor, Va
     if (this.editorResize$) {
       this.editorResize$.disconnect();
     }
+    if (this.cssEditor) {
+      this.cssEditor.destroy();
+    }
   }
 
   private onAceEditorResize() {
diff --git a/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
index 596ddda91b..8d7179d2cf 100644
--- a/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.html
@@ -18,7 +18,7 @@
 <form class="tb-node-script-test-dialog"
       [formGroup]="nodeScriptTestFormGroup" (ngSubmit)="save()">
   <mat-toolbar fxLayout="row" color="primary">
-    <h2>{{ 'rulenode.test-script-function' | translate }}</h2>
+    <h2>{{ 'rulenode.test-script-function' | translate }} ({{ (scriptLang === scriptLanguage.JS ? 'rulenode.script-lang-java-script' : 'rulenode.script-lang-mvel') | translate }})</h2>
     <span fxFlex></span>
     <button mat-button mat-icon-button
             (click)="cancel()"
diff --git a/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.ts b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.ts
index 542e108aaa..5db745eae6 100644
--- a/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.ts
+++ b/ui-ngx/src/app/shared/components/dialog/node-script-test-dialog.component.ts
@@ -98,6 +98,10 @@ export class NodeScriptTestDialogComponent extends DialogComponent<NodeScriptTes
 
   contentTypes = ContentType;
 
+  scriptLanguage = ScriptLanguage;
+
+  scriptLang = this.data.scriptLang ? this.data.scriptLang : ScriptLanguage.JS;
+
   constructor(protected store: Store<AppState>,
               protected router: Router,
               @Inject(MAT_DIALOG_DATA) public data: NodeScriptTestDialogData,
@@ -192,8 +196,7 @@ export class NodeScriptTestDialogComponent extends DialogComponent<NodeScriptTes
         metadata: this.nodeScriptTestFormGroup.get('metadata').value,
         script: this.nodeScriptTestFormGroup.get('script').value
       };
-      const scriptLang = this.data.scriptLang ? this.data.scriptLang : ScriptLanguage.JS;
-      return this.ruleChainService.testScript(inputParams, scriptLang).pipe(
+      return this.ruleChainService.testScript(inputParams, this.scriptLang).pipe(
         mergeMap((result) => {
           if (result.error) {
             this.store.dispatch(new ActionNotificationShow(
diff --git a/ui-ngx/src/app/shared/components/html.component.ts b/ui-ngx/src/app/shared/components/html.component.ts
index 7378cca7ea..2f8e4f193a 100644
--- a/ui-ngx/src/app/shared/components/html.component.ts
+++ b/ui-ngx/src/app/shared/components/html.component.ts
@@ -147,6 +147,9 @@ export class HtmlComponent implements OnInit, OnDestroy, ControlValueAccessor, V
     if (this.editorResize$) {
       this.editorResize$.disconnect();
     }
+    if (this.htmlEditor) {
+      this.htmlEditor.destroy();
+    }
   }
 
   private onAceEditorResize() {
diff --git a/ui-ngx/src/app/shared/components/js-func.component.ts b/ui-ngx/src/app/shared/components/js-func.component.ts
index 740273ed87..9f715a63f9 100644
--- a/ui-ngx/src/app/shared/components/js-func.component.ts
+++ b/ui-ngx/src/app/shared/components/js-func.component.ts
@@ -228,6 +228,9 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
     if (this.editorResize$) {
       this.editorResize$.disconnect();
     }
+    if (this.jsEditor) {
+      this.jsEditor.destroy();
+    }
   }
 
   private onAceEditorResize() {
diff --git a/ui-ngx/src/app/shared/components/json-content.component.ts b/ui-ngx/src/app/shared/components/json-content.component.ts
index aacf952044..48c8be0a61 100644
--- a/ui-ngx/src/app/shared/components/json-content.component.ts
+++ b/ui-ngx/src/app/shared/components/json-content.component.ts
@@ -181,6 +181,9 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
     if (this.editorResize$) {
       this.editorResize$.disconnect();
     }
+    if (this.jsonEditor) {
+      this.jsonEditor.destroy();
+    }
   }
 
   private onAceEditorResize() {
diff --git a/ui-ngx/src/app/shared/components/json-object-edit.component.ts b/ui-ngx/src/app/shared/components/json-object-edit.component.ts
index 919dbace34..5ac9ac1923 100644
--- a/ui-ngx/src/app/shared/components/json-object-edit.component.ts
+++ b/ui-ngx/src/app/shared/components/json-object-edit.component.ts
@@ -147,6 +147,9 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
     if (this.editorResize$) {
       this.editorResize$.disconnect();
     }
+    if (this.jsonEditor) {
+      this.jsonEditor.destroy();
+    }
   }
 
   private onAceEditorResize() {
diff --git a/ui-ngx/src/app/shared/components/json-object-view.component.ts b/ui-ngx/src/app/shared/components/json-object-view.component.ts
index d5cea2ccce..166d6c24e9 100644
--- a/ui-ngx/src/app/shared/components/json-object-view.component.ts
+++ b/ui-ngx/src/app/shared/components/json-object-view.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, ElementRef, forwardRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Ace } from 'ace-builds';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -36,7 +36,7 @@ import { getAce } from '@shared/models/ace/ace.models';
     }
   ]
 })
-export class JsonObjectViewComponent implements OnInit {
+export class JsonObjectViewComponent implements OnInit, OnDestroy {
 
   @ViewChild('jsonViewer', {static: true})
   jsonViewerElmRef: ElementRef;
@@ -112,6 +112,12 @@ export class JsonObjectViewComponent implements OnInit {
     );
   }
 
+  ngOnDestroy(): void {
+    if (this.jsonViewer) {
+      this.jsonViewer.destroy();
+    }
+  }
+
   updateEditorSize(editorElement: any, content: string, editor: Ace.Editor) {
     let newHeight = 200;
     let newWidth = 600;
diff --git a/ui-ngx/src/app/shared/components/markdown-editor.component.ts b/ui-ngx/src/app/shared/components/markdown-editor.component.ts
index 7c1c9c7c02..919c621620 100644
--- a/ui-ngx/src/app/shared/components/markdown-editor.component.ts
+++ b/ui-ngx/src/app/shared/components/markdown-editor.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Ace } from 'ace-builds';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -32,7 +32,7 @@ import { getAce } from '@shared/models/ace/ace.models';
     }
   ]
 })
-export class MarkdownEditorComponent implements OnInit, ControlValueAccessor {
+export class MarkdownEditorComponent implements OnInit, ControlValueAccessor, OnDestroy {
 
   @Input() label: string;
 
@@ -104,6 +104,12 @@ export class MarkdownEditorComponent implements OnInit, ControlValueAccessor {
     }
   }
 
+  ngOnDestroy(): void {
+    if (this.markdownEditor) {
+      this.markdownEditor.destroy();
+    }
+  }
+
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
   }
diff --git a/ui-ngx/src/app/shared/components/protobuf-content.component.ts b/ui-ngx/src/app/shared/components/protobuf-content.component.ts
index 8d83706ca1..eacd7971ae 100644
--- a/ui-ngx/src/app/shared/components/protobuf-content.component.ts
+++ b/ui-ngx/src/app/shared/components/protobuf-content.component.ts
@@ -129,6 +129,9 @@ export class ProtobufContentComponent implements OnInit, ControlValueAccessor, O
     if (this.editorResize$) {
       this.editorResize$.disconnect();
     }
+    if (this.protobufEditor) {
+      this.protobufEditor.destroy();
+    }
   }
 
   registerOnChange(fn: any): void {
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 434535a785..1d7c89d86f 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -2974,6 +2974,8 @@
         "ui-resources-load-error": "Failed to load configuration ui resources.",
         "invalid-target-rulechain": "Unable to resolve target rule chain!",
         "test-script-function": "Test script function",
+        "script-lang-java-script": "Java Script",
+        "script-lang-mvel": "MVEL",
         "message": "Message",
         "message-type": "Message type",
         "select-message-type": "Select message type",
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index 8c6fffabf1..d378dcaf16 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -1465,4 +1465,32 @@ mat-label {
       pointer-events: none;
     }
   }
+
+  .mat-button-toggle-group.tb-button-toggle-group {
+    &.mat-button-toggle-group-appearance-standard {
+      border: none;
+      .mat-button-toggle+.mat-button-toggle {
+        border-left: none;
+      }
+    }
+    .mat-button-toggle {
+      background: rgba(0, 0, 0, 0.06);
+      height: 32px;
+      align-items: center;
+      display: flex;
+    }
+    .mat-button-toggle-checked .mat-button-toggle-button {
+      background-color: #fff;
+      border-radius: 4px;
+      margin-left: 2px;
+      margin-right: 2px;
+    }
+    .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+      line-height: 28px;
+      font-size: 14px;
+    }
+    .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
+      opacity: .01;
+    }
+  }
 }