From 638916b7cdc0d7b2bfadb4943bb97e2b9615141d Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Wed, 23 Aug 2023 14:26:55 +0300
Subject: [PATCH 1/2] Fix rule node disable

---
 .../pages/rulechain/rule-node-config.component.ts   |  4 ++++
 .../rulechain/rule-node-details.component.html      |  2 +-
 .../pages/rulechain/rule-node-details.component.ts  | 13 ++++++++++++-
 ui-ngx/src/app/shared/models/rule-node.models.ts    |  9 +++++++++
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.ts
index 3f3071221e..90f29f555f 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.ts
@@ -165,6 +165,9 @@ export class RuleNodeConfigComponent implements ControlValueAccessor, OnInit, On
     } else {
       this.ruleNodeConfigFormGroup.enable({emitEvent: false});
     }
+    if (this.definedConfigComponent) {
+      this.definedConfigComponent.disabled = this.disabled;
+    }
   }
 
   writeValue(value: RuleNodeConfiguration): void {
@@ -222,6 +225,7 @@ export class RuleNodeConfigComponent implements ControlValueAccessor, OnInit, On
       this.definedConfigComponent.ruleChainId = this.ruleChainId;
       this.definedConfigComponent.ruleChainType = this.ruleChainType;
       this.definedConfigComponent.configuration = this.configuration;
+      this.definedConfigComponent.disabled = this.disabled;
       this.changeSubscription = this.definedConfigComponent.configurationChanged.subscribe((configuration) => {
         this.updateModel(configuration);
       });
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
index 34aa8167e3..e92e2a61ef 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
@@ -22,7 +22,7 @@
   </button>
 </div>
 <form [formGroup]="ruleNodeFormGroup" class="mat-padding">
-  <fieldset [disabled]="(isLoading$ | async) || !isEdit || isReadOnly">
+  <fieldset [disabled]="(isLoading$ | async)">
     <section>
       <section class="title-row">
         <mat-form-field fxFlex class="mat-block">
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts
index f1d6001c88..b0ec810083 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChange, SimpleChanges, ViewChild } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -119,6 +119,17 @@ export class RuleNodeDetailsComponent extends PageComponent implements OnInit, O
         }
       }
     }
+    this.disableControl(changes.isEdit, changes.isReadOnly);
+  }
+
+  private disableControl(isEdit: SimpleChange, isReadOnly: SimpleChange) {
+    if (isEdit.currentValue !== isEdit.previousValue || isReadOnly.currentValue !== isReadOnly.previousValue) {
+      if (!isEdit.currentValue || isReadOnly.currentValue) {
+        this.ruleNodeFormGroup.disable({emitEvent: false});
+      } else {
+        this.ruleNodeFormGroup.enable({emitEvent: false});
+      }
+    }
   }
 
   validate() {
diff --git a/ui-ngx/src/app/shared/models/rule-node.models.ts b/ui-ngx/src/app/shared/models/rule-node.models.ts
index 2a7dedabec..d38d027607 100644
--- a/ui-ngx/src/app/shared/models/rule-node.models.ts
+++ b/ui-ngx/src/app/shared/models/rule-node.models.ts
@@ -74,6 +74,7 @@ export interface IRuleNodeConfigurationComponent {
   ruleNodeId: string;
   ruleChainId: string;
   hasScript: boolean;
+  disabled: boolean;
   testScriptLabel?: string;
   changeScript?: EventEmitter<void>;
   ruleChainType: RuleChainType;
@@ -101,6 +102,14 @@ export abstract class RuleNodeConfigurationComponent extends PageComponent imple
 
   private configurationSet = false;
 
+  set disabled(value: boolean) {
+    if (value) {
+      this.configForm().disable({emitEvent: false});
+    } else {
+      this.configForm().enable({emitEvent: false});
+    }
+  };
+
   set configuration(value: RuleNodeConfiguration) {
     this.configurationValue = value;
     if (!this.configurationSet) {

From b493f1a1b7feec5c2efd97f6d4088d34fa9e7df5 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 25 Aug 2023 16:29:51 +0300
Subject: [PATCH 2/2] UI: Improved disabled rulenode config

---
 .../add-rule-node-dialog.component.html       | 16 ++---
 .../rulechain/rule-node-config.component.scss |  2 +-
 .../rule-node-details.component.html          | 72 +++++++++----------
 .../rulechain/rule-node-details.component.ts  | 29 +++-----
 .../rulechain/rulechain-page.component.html   |  2 -
 5 files changed, 52 insertions(+), 69 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
index bc72cd90c0..0da62e48bc 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-rule-node-dialog.component.html
@@ -29,16 +29,12 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async">
-      <tb-rule-node #tbRuleNode
-        [ruleNode]="ruleNode"
-        [ruleChainId]="ruleChainId"
-        [ruleChainType]="ruleChainType"
-        [isEdit]="true"
-        [isAdd]="true"
-        [isReadOnly]="false">
-      </tb-rule-node>
-    </fieldset>
+    <tb-rule-node #tbRuleNode
+                  [ruleNode]="ruleNode"
+                  [ruleChainId]="ruleChainId"
+                  [ruleChainType]="ruleChainType"
+                  isAdd>
+    </tb-rule-node>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
     <button mat-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.scss b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.scss
index 8f68623578..464d28116a 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.scss
@@ -15,7 +15,7 @@
  */
 :host {
   display: block;
-  margin-bottom: 16px;
+
   tb-json-object-edit.tb-rule-node-configuration-json {
     display: block;
     height: 300px;
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
index e92e2a61ef..cf798bf33b 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
@@ -22,44 +22,40 @@
   </button>
 </div>
 <form [formGroup]="ruleNodeFormGroup" class="mat-padding">
-  <fieldset [disabled]="(isLoading$ | async)">
-    <section>
-      <section class="title-row">
-        <mat-form-field fxFlex class="mat-block">
-          <mat-label translate>rulenode.name</mat-label>
-          <input matInput formControlName="name" required>
-          <mat-error *ngIf="ruleNodeFormGroup.get('name').hasError('required')
+  <section class="title-row">
+    <mat-form-field fxFlex class="mat-block">
+      <mat-label translate>rulenode.name</mat-label>
+      <input matInput formControlName="name" required>
+      <mat-error *ngIf="ruleNodeFormGroup.get('name').hasError('required')
                          || ruleNodeFormGroup.get('name').hasError('pattern')">
-            {{ 'rulenode.name-required' | translate }}
-          </mat-error>
-          <mat-error *ngIf="ruleNodeFormGroup.get('name').hasError('maxlength')">
-            {{ 'rulenode.name-max-length' | translate }}
-          </mat-error>
-        </mat-form-field>
-        <section class="node-setting">
-          <mat-slide-toggle formControlName="debugMode">
-            {{ 'rulenode.debug-mode' | translate }}
-          </mat-slide-toggle>
-          <mat-slide-toggle *ngIf="isSingletonEditAllowed()" formControlName="singletonMode">
-            {{ 'rulenode.singleton-mode' | translate }}
-          </mat-slide-toggle >
-        </section>
-      </section>
-      <tb-rule-node-config #ruleNodeConfigComponent
-        formControlName="configuration"
-        [ruleNodeId]="ruleNode.ruleNodeId?.id"
-        [ruleChainId]="ruleChainId"
-        [ruleChainType]="ruleChainType"
-        [nodeDefinition]="ruleNode.component.configurationDescriptor.nodeDefinition"
-        (initRuleNode)="initRuleNode.emit($event)"
-        (changeScript)="changeScript.emit($event)">
-      </tb-rule-node-config>
-      <div formGroupName="additionalInfo" fxLayout="column" class="description-block">
-        <mat-form-field class="mat-block">
-          <mat-label translate>rulenode.rule-node-description</mat-label>
-          <textarea matInput formControlName="description" rows="1"></textarea>
-        </mat-form-field>
-      </div>
+        {{ 'rulenode.name-required' | translate }}
+      </mat-error>
+      <mat-error *ngIf="ruleNodeFormGroup.get('name').hasError('maxlength')">
+        {{ 'rulenode.name-max-length' | translate }}
+      </mat-error>
+    </mat-form-field>
+    <section class="node-setting">
+      <mat-slide-toggle formControlName="debugMode">
+        {{ 'rulenode.debug-mode' | translate }}
+      </mat-slide-toggle>
+      <mat-slide-toggle *ngIf="isSingletonEditAllowed()" formControlName="singletonMode">
+        {{ 'rulenode.singleton-mode' | translate }}
+      </mat-slide-toggle>
     </section>
-  </fieldset>
+  </section>
+  <tb-rule-node-config #ruleNodeConfigComponent
+                       formControlName="configuration"
+                       [ruleNodeId]="ruleNode.ruleNodeId?.id"
+                       [ruleChainId]="ruleChainId"
+                       [ruleChainType]="ruleChainType"
+                       [nodeDefinition]="ruleNode.component.configurationDescriptor.nodeDefinition"
+                       (initRuleNode)="initRuleNode.emit($event)"
+                       (changeScript)="changeScript.emit($event)">
+  </tb-rule-node-config>
+  <div formGroupName="additionalInfo" fxLayout="column" class="description-block">
+    <mat-form-field class="mat-block">
+      <mat-label translate>rulenode.rule-node-description</mat-label>
+      <textarea matInput formControlName="description" rows="1"></textarea>
+    </mat-form-field>
+  </div>
 </form>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts
index b0ec810083..5fce7f8e0b 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChange, SimpleChanges, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -22,11 +22,11 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
 import { FcRuleNode, RuleNodeType } from '@shared/models/rule-node.models';
 import { EntityType } from '@shared/models/entity-type.models';
 import { Subscription } from 'rxjs';
-import { RuleChainService } from '@core/http/rule-chain.service';
 import { RuleNodeConfigComponent } from './rule-node-config.component';
 import { Router } from '@angular/router';
 import { RuleChainType } from '@app/shared/models/rule-chain.models';
 import { ComponentClusteringMode } from '@shared/models/component-descriptor.models';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-rule-node',
@@ -47,12 +47,11 @@ export class RuleNodeDetailsComponent extends PageComponent implements OnInit, O
   ruleChainType: RuleChainType;
 
   @Input()
-  isEdit: boolean;
-
-  @Input()
-  isReadOnly: boolean;
+  @coerceBoolean()
+  disabled = false;
 
   @Input()
+  @coerceBoolean()
   isAdd = false;
 
   @Output()
@@ -70,7 +69,6 @@ export class RuleNodeDetailsComponent extends PageComponent implements OnInit, O
 
   constructor(protected store: Store<AppState>,
               private fb: UntypedFormBuilder,
-              private ruleChainService: RuleChainService,
               private router: Router) {
     super(store);
     this.ruleNodeFormGroup = this.fb.group({});
@@ -99,6 +97,9 @@ export class RuleNodeDetailsComponent extends PageComponent implements OnInit, O
     } else {
       this.ruleNodeFormGroup = this.fb.group({});
     }
+    if (this.disabled) {
+      this.ruleNodeFormGroup.disable({emitEvent: false});
+    }
   }
 
   private updateRuleNode() {
@@ -108,6 +109,9 @@ export class RuleNodeDetailsComponent extends PageComponent implements OnInit, O
   }
 
   ngOnInit(): void {
+    if (this.disabled) {
+      this.ruleNodeFormGroup.disable({emitEvent: false});
+    }
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -119,17 +123,6 @@ export class RuleNodeDetailsComponent extends PageComponent implements OnInit, O
         }
       }
     }
-    this.disableControl(changes.isEdit, changes.isReadOnly);
-  }
-
-  private disableControl(isEdit: SimpleChange, isReadOnly: SimpleChange) {
-    if (isEdit.currentValue !== isEdit.previousValue || isReadOnly.currentValue !== isReadOnly.previousValue) {
-      if (!isEdit.currentValue || isReadOnly.currentValue) {
-        this.ruleNodeFormGroup.disable({emitEvent: false});
-      } else {
-        this.ruleNodeFormGroup.enable({emitEvent: false});
-      }
-    }
   }
 
   validate() {
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
index c37db14a18..6911558ad4 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
@@ -110,8 +110,6 @@
                               [ruleNode]="editingRuleNode"
                               [ruleChainId]="ruleChain.id?.id"
                               [ruleChainType]="ruleChainType"
-                              [isEdit]="true"
-                              [isReadOnly]="false"
                               (initRuleNode)="onRuleNodeInit()"
                               (changeScript)="switchToFirstTab()">
                 </tb-rule-node>