Ace based editors disabled state handling

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) {

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"

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);

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"

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(