From 73da299aaf9834b1fb108ca988767e2de3880476 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 6 Apr 2020 10:20:20 +0300
Subject: [PATCH] Ace based editors disabled state handling

---
 ui-ngx/src/app/shared/components/js-func.component.ts      | 3 +++
 .../src/app/shared/components/json-content.component.html  | 4 ++--
 ui-ngx/src/app/shared/components/json-content.component.ts | 7 +++++--
 .../app/shared/components/json-object-edit.component.html  | 4 ++--
 .../app/shared/components/json-object-edit.component.ts    | 7 +++++--
 5 files changed, 17 insertions(+), 8 deletions(-)

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 544bf5823d..06e7f77104 100644
--- a/ui-ngx/src/app/shared/components/js-func.component.ts
+++ b/ui-ngx/src/app/shared/components/js-func.component.ts
@@ -185,6 +185,9 @@ export class JsFuncComponent implements OnInit, OnDestroy, ControlValueAccessor,
 
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
+    if (this.jsEditor) {
+      this.jsEditor.setReadOnly(this.disabled);
+    }
   }
 
   public validate(c: FormControl) {
diff --git a/ui-ngx/src/app/shared/components/json-content.component.html b/ui-ngx/src/app/shared/components/json-content.component.html
index 53435c7151..c416798953 100644
--- a/ui-ngx/src/app/shared/components/json-content.component.html
+++ b/ui-ngx/src/app/shared/components/json-content.component.html
@@ -22,11 +22,11 @@
     <label class="tb-title no-padding">{{ label }}</label>
     <span fxFlex></span>
     <button type="button"
-            mat-button *ngIf="!readonly" class="tidy" (click)="beautifyJSON()">
+            mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="beautifyJSON()">
       {{'js-func.tidy' | translate }}
     </button>
     <button type="button"
-            mat-button *ngIf="!readonly" class="tidy" (click)="minifyJSON()">
+            mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="minifyJSON()">
       {{'js-func.mini' | translate }}
     </button>
     <button type='button' mat-button mat-icon-button (click)="fullscreen = !fullscreen"
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 4dabd93b9b..6db51b848a 100644
--- a/ui-ngx/src/app/shared/components/json-content.component.ts
+++ b/ui-ngx/src/app/shared/components/json-content.component.ts
@@ -118,7 +118,7 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
       mode: `ace/mode/${mode}`,
       showGutter: true,
       showPrintMargin: false,
-      readOnly: this.readonly
+      readOnly: this.disabled || this.readonly
     };
 
     const advancedOptions = {
@@ -185,6 +185,9 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
 
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
+    if (this.jsonEditor) {
+      this.jsonEditor.setReadOnly(this.disabled || this.readonly);
+    }
   }
 
   public validate(c: FormControl) {
@@ -196,7 +199,7 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid
   }
 
   validateOnSubmit(): void {
-    if (!this.readonly) {
+    if (!this.disabled && !this.readonly) {
       this.cleanupJsonErrors();
       this.contentValid = true;
       this.propagateChange(this.contentBody);
diff --git a/ui-ngx/src/app/shared/components/json-object-edit.component.html b/ui-ngx/src/app/shared/components/json-object-edit.component.html
index e4f12d1ad1..aaacf1f857 100644
--- a/ui-ngx/src/app/shared/components/json-object-edit.component.html
+++ b/ui-ngx/src/app/shared/components/json-object-edit.component.html
@@ -25,11 +25,11 @@
                        'tb-error': !objectValid}">{{ label }}</label>
     <span fxFlex></span>
     <button type="button"
-            mat-button *ngIf="!readonly" class="tidy" (click)="beautifyJSON()">
+            mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="beautifyJSON()">
       {{'js-func.tidy' | translate }}
     </button>
     <button type="button"
-            mat-button *ngIf="!readonly" class="tidy" (click)="minifyJSON()">
+            mat-button *ngIf="!readonly && !disabled" class="tidy" (click)="minifyJSON()">
       {{'js-func.mini' | translate }}
     </button>
     <button mat-button mat-icon-button (click)="fullscreen = !fullscreen"
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 45c59b98df..dcd9722aa0 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
@@ -111,7 +111,7 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
       mode: 'ace/mode/json',
       showGutter: true,
       showPrintMargin: false,
-      readOnly: this.readonly
+      readOnly: this.disabled || this.readonly
     };
 
     const advancedOptions = {
@@ -161,6 +161,9 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
 
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
+    if (this.jsonEditor) {
+      this.jsonEditor.setReadOnly(this.disabled || this.readonly);
+    }
   }
 
   public validate(c: FormControl) {
@@ -172,7 +175,7 @@ export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Va
   }
 
   validateOnSubmit(): void {
-    if (!this.readonly) {
+    if (!this.disabled && !this.readonly) {
       this.cleanupJsonErrors();
       if (!this.objectValid) {
         this.store.dispatch(new ActionNotificationShow(