From dd76f2d8231cc754e9254bce68b63d13e17a2674 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 7 May 2025 11:44:54 +0300
Subject: [PATCH] UI: Fixed rule node config style

---
 .../gps-geo-action-config.component.html      |  2 +-
 .../math-function-config.component.html       |  2 +-
 ...save-to-custom-table-config.component.html |  2 +-
 .../arguments-map-config.component.html       |  2 +-
 ...vice-relations-query-config.component.html |  2 +-
 .../message-types-config.component.html       |  2 +-
 .../common/select-attributes.component.html   |  2 +-
 .../entity-details-config.component.html      |  2 +-
 .../external/lambda-config.component.html     |  4 +-
 .../check-message-config.component.html       |  4 +-
 .../originator-type-config.component.html     |  2 +-
 .../copy-keys-config.component.html           |  2 +-
 .../deduplication-config.component.html       |  6 +--
 .../delete-keys-config.component.html         |  2 +-
 .../rulechain/rule-node-config.component.html |  2 +-
 .../rulechain/rule-node-config.component.scss | 53 ++++++++++++++++++-
 .../rulechain/rule-node-config.component.ts   | 10 ++--
 17 files changed, 77 insertions(+), 24 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.html
index 37e93157d3..2d3f230643 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/gps-geo-action-config.component.html
@@ -116,7 +116,7 @@
         <mat-form-field class="mat-block" subscriptSizing="dynamic">
           <mat-label translate>rule-node-config.polygon-definition</mat-label>
           <input matInput formControlName="polygonsDefinition" required>
-          <mat-icon matSuffix class="margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
+          <mat-icon matSuffix class="m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
                     color="primary"
                     matTooltip="{{ 'rule-node-config.polygon-definition-hint' | translate }}">
             help
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/math-function-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/math-function-config.component.html
index 3147162f06..4d4940404e 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/math-function-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/math-function-config.component.html
@@ -77,7 +77,7 @@
         <mat-form-field floatLabel="always" class="mat-block flex-1">
           <mat-label translate>rule-node-config.key-field-input</mat-label>
           <input matInput formControlName="key" required/>
-          <mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
+          <mat-icon class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
                     color="primary"
                     matTooltip="{{ 'rule-node-config.math-templatization-tooltip' | translate }}">help</mat-icon>
           <mat-error *ngIf="mathFunctionConfigForm.get('result.key').hasError('required')" translate>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/action/save-to-custom-table-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/action/save-to-custom-table-config.component.html
index c1d6dd3215..c9685f2c3f 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/action/save-to-custom-table-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/action/save-to-custom-table-config.component.html
@@ -19,7 +19,7 @@
   <mat-form-field class="mat-block" subscriptSizing="dynamic">
     <mat-label translate>rule-node-config.custom-table-name</mat-label>
     <input required matInput formControlName="tableName">
-    <mat-icon class="help-icon margin-8 cursor-pointer"
+    <mat-icon class="help-icon m-2 cursor-pointer"
               aria-hidden="false"
               aria-label="help-icon"
               matSuffix
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.html
index b98854d0e5..457807d25d 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/arguments-map-config.component.html
@@ -64,7 +64,7 @@
                                 *ngIf="argumentControl.get('type').value && argumentControl.get('type').value !== ArgumentType.CONSTANT">
                   <mat-label translate>rule-node-config.argument-key-field-input</mat-label>
                   <input [formControl]="argumentControl.get('key')" matInput required/>
-                  <mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
+                  <mat-icon class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
                             color="primary"
                             matTooltip="{{ 'rule-node-config.math-templatization-tooltip' | translate }}">
                     help
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.html
index ce99d6f7e6..0da5cae858 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/device-relations-query-config.component.html
@@ -60,7 +60,7 @@
     [emptyInputPlaceholder]="'rule-node-config.add-device-profile' | translate"
     [filledInputPlaceholder]="'rule-node-config.add-device-profile' | translate"
     formControlName="deviceTypes">
-    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" color="primary"
+    <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon" color="primary"
               matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.device-profile' | translate } }}">help</mat-icon>
   </tb-entity-subtype-list>
 </section>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.html
index ab436088bd..dcc968dee3 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/message-types-config.component.html
@@ -62,7 +62,7 @@
       </div>
     </mat-option>
   </mat-autocomplete>
-  <mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
+  <mat-icon class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon" matSuffix
             color="primary"
             matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.message-type' | translate } }}">help</mat-icon>
   <mat-error *ngIf="chipList.errorState">
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.html
index 88c4cc1bdb..49669c147f 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/select-attributes.component.html
@@ -53,7 +53,7 @@
 </div>
 
 <ng-template #helpIcon>
-  <mat-icon class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
+  <mat-icon class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
             color="primary"
             matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.field-name' | translate } }}">help</mat-icon>
 </ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/enrichment/entity-details-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/enrichment/entity-details-config.component.html
index 11f0323346..5d80cfb276 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/enrichment/entity-details-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/enrichment/entity-details-config.component.html
@@ -22,7 +22,7 @@
                         [placeholder]="'rule-node-config.add-detail' | translate"
                         [requiredText]="'rule-node-config.entity-details-list-empty' | translate"
                         formControlName="detailsList">
-    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
+    <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
               color="primary"
               matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.detail' | translate } }}">
       help
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/lambda-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/lambda-config.component.html
index 67f0aaca7f..7de1a46a9d 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/lambda-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/lambda-config.component.html
@@ -85,7 +85,7 @@
             <mat-error *ngIf="lambdaConfigForm.get('connectionTimeout').hasError('min')">
               {{ 'rule-node-config.connection-timeout-min' | translate }}
             </mat-error>
-            <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
+            <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
                       color="primary"
                       matTooltip="{{ 'rule-node-config.connection-timeout-hint' | translate }}">help</mat-icon>
           </mat-form-field>
@@ -98,7 +98,7 @@
             <mat-error *ngIf="lambdaConfigForm.get('requestTimeout').hasError('min')">
               {{ 'rule-node-config.request-timeout-min' | translate }}
             </mat-error>
-            <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
+            <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
                       color="primary"
                       matTooltip="{{ 'rule-node-config.request-timeout-hint' | translate }}">help</mat-icon>
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/filter/check-message-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/filter/check-message-config.component.html
index 7dd89d4927..0bdba52c1e 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/filter/check-message-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/filter/check-message-config.component.html
@@ -26,14 +26,14 @@
                         [label]="'rule-node-config.data-keys' | translate"
                         [placeholder]="'rule-node-config.add-message-field' | translate"
                         formControlName="messageNames">
-    <mat-icon matSuffix color="primary" class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
+    <mat-icon matSuffix color="primary" class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
               matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.field-name' | translate } }}">help</mat-icon>
   </tb-string-items-list>
   <tb-string-items-list editable subscriptSizing="dynamic"
                         [label]="'rule-node-config.metadata-keys' | translate"
                         [placeholder]="'rule-node-config.add-metadata-field' | translate"
                         formControlName="metadataNames">
-    <mat-icon matSuffix color="primary" class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
+    <mat-icon matSuffix color="primary" class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
               matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.field-name' | translate } }}">help</mat-icon>
   </tb-string-items-list>
   <div tb-hint-tooltip-icon="{{ 'rule-node-config.check-all-keys-tooltip' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/filter/originator-type-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/filter/originator-type-config.component.html
index f526345378..7f1e8907d3 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/filter/originator-type-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/filter/originator-type-config.component.html
@@ -24,7 +24,7 @@
                        [filledInputPlaceholder]="'rule-node-config.add-entity-type' | translate"
                        [label]="'rule-node-config.select-entity-types' | translate"
                        required>
-    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
+    <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
               color="primary"
               matTooltip="{{ 'rule-node-config.chip-help' | translate: { inputName: 'rule-node-config.entity-type' | translate } }}">help</mat-icon>
   </tb-entity-type-list>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/transformation/copy-keys-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/transformation/copy-keys-config.component.html
index b1e810bcb2..3d524b8402 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/transformation/copy-keys-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/transformation/copy-keys-config.component.html
@@ -27,7 +27,7 @@
                         [placeholder]="'rule-node-config.add-key' | translate"
                         [requiredText]="'rule-node-config.key-val.at-least-one-key-error' | translate"
                         formControlName="keys">
-    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
+    <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
               color="primary"
               matTooltip="{{ 'rule-node-config.use-regular-expression-hint' | translate }}">
       help
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.html
index 3df9c1d7d3..aa6ff0bab7 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/transformation/deduplication-config.component.html
@@ -25,7 +25,7 @@
     <mat-error *ngIf="deduplicationConfigForm.get('interval').hasError('min')">
       {{'rule-node-config.interval-min-error' | translate}}
     </mat-error>
-    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
+    <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
               color="primary"
               matTooltip="{{ 'rule-node-config.interval-hint' | translate }}">help</mat-icon>
   </mat-form-field>
@@ -73,7 +73,7 @@
             <mat-error *ngIf="deduplicationConfigForm.get('maxPendingMsgs').hasError('min')">
               {{'rule-node-config.max-pending-msgs-min-error' | translate}}
             </mat-error>
-            <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
+            <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
                       color="primary"
                       matTooltip="{{ 'rule-node-config.max-pending-msgs-hint' | translate }}">help</mat-icon>
           </mat-form-field>
@@ -89,7 +89,7 @@
             <mat-error *ngIf="deduplicationConfigForm.get('maxRetries').hasError('min')">
               {{'rule-node-config.max-retries-min-error' | translate}}
             </mat-error>
-            <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
+            <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
                       color="primary"
                       matTooltip="{{ 'rule-node-config.max-retries-hint' | translate }}">help</mat-icon>
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/transformation/delete-keys-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/transformation/delete-keys-config.component.html
index 75f9c243e9..4385341686 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/transformation/delete-keys-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/transformation/delete-keys-config.component.html
@@ -26,7 +26,7 @@
                         [placeholder]="'rule-node-config.add-key' | translate"
                         [requiredText]="'rule-node-config.key-val.at-least-one-key-error' | translate"
                         formControlName="keys">
-    <mat-icon matSuffix class="help-icon margin-8 cursor-pointer" aria-hidden="false" aria-label="help-icon"
+    <mat-icon matSuffix class="help-icon m-2 cursor-pointer" aria-hidden="false" aria-label="help-icon"
               color="primary"
               matTooltip="{{ 'rule-node-config.use-regular-expression-delete-hint' | translate }}">
       help
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.html
index 3522c584f4..0228b8d973 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-config.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div [formGroup]="ruleNodeConfigFormGroup">
+<div [formGroup]="ruleNodeConfigFormGroup" class="rule-node-config">
   <ng-container #definedConfigContent></ng-container>
   <div class="tb-rulenode-directive-error" *ngIf="definedDirectiveError">{{definedDirectiveError}}</div>
   <tb-json-object-edit *ngIf="!useDefinedDirective()" #jsonObjectEditComponent
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 e79d3805af..f0cd93d832 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
@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host {
-  display: block;
+@import './../scss/constants';
 
+.rule-node-config {
   tb-json-object-edit.tb-rule-node-configuration-json {
     display: block;
     height: 300px;
@@ -26,4 +26,53 @@
     font-weight: 400;
     color: rgb(221, 44, 0);
   }
+
+  .tb-error {
+    letter-spacing: 0.25px;
+    color: var(--mdc-theme-error, #f44336);
+  }
+
+  .tb-required::after {
+    content: "*";
+    font-size: 16px;
+    color: #000000de;
+  }
+
+  .help-icon {
+    color: #000000;
+    opacity: .38;
+    padding: unset;
+
+    &:hover {
+      color: $tb-primary-color;
+      opacity: unset;
+    }
+  }
+
+  .same-width-component-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 16px;
+    @media #{$mat-xs} {
+      flex-direction: column;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    > * {
+      flex: 1;
+    }
+
+    .flex-2 {
+      flex: 2;
+    }
+
+    .third-width {
+      max-width: 32%;
+      @media #{$mat-xs} {
+        max-width: 100%;
+      }
+    }
+  }
 }
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 e3e5d939df..d27e4d8abb 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
@@ -19,11 +19,13 @@ import {
   ComponentRef,
   EventEmitter,
   forwardRef,
+  HostBinding,
   Input,
   OnDestroy,
   Output,
   ViewChild,
-  ViewContainerRef
+  ViewContainerRef,
+  ViewEncapsulation
 } from '@angular/core';
 import {
   ControlValueAccessor,
@@ -52,14 +54,16 @@ import { RuleChainType } from '@shared/models/rule-chain.models';
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => RuleNodeConfigComponent),
     multi: true
-  }]
+  }],
+  encapsulation: ViewEncapsulation.None
 })
 export class RuleNodeConfigComponent implements ControlValueAccessor, OnDestroy {
 
   @ViewChild('definedConfigContent', {read: ViewContainerRef, static: true}) definedConfigContainer: ViewContainerRef;
-
   @ViewChild('jsonObjectEditComponent') jsonObjectEditComponent: JsonObjectEditComponent;
 
+  @HostBinding('style.display') readonly styleDisplay = 'block';
+
   private requiredValue: boolean;
   get required(): boolean {
     return this.requiredValue;