From b43c28800102c85851f671d976f3e20f352c90b4 Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Tue, 11 Apr 2023 17:04:39 +0300
Subject: [PATCH 1/4] Changes for the enrichment rule nodes

---
 .../relation/relation-filters.component.html  | 35 +++++++----------
 .../relation/relation-filters.component.scss  | 38 +++++++++++++------
 .../entity/entity-subtype-list.component.html | 11 +++++-
 .../entity/entity-subtype-list.component.ts   | 13 +++++--
 .../entity/entity-type-list.component.html    |  3 +-
 .../relation-type-autocomplete.component.html |  8 ++--
 .../relation-type-autocomplete.component.ts   |  3 ++
 .../rulenode/customer_attributes_node_fn.md   | 24 ++++++++++++
 .../assets/locale/locale.constant-en_US.json  |  2 +
 9 files changed, 95 insertions(+), 42 deletions(-)
 create mode 100644 ui-ngx/src/assets/help/en_US/rulenode/customer_attributes_node_fn.md

diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
index 16222675db..d5dfca3e71 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
@@ -17,28 +17,21 @@
 -->
 <div class="tb-relation-filters" [formGroup]="relationFiltersFormGroup">
   <div class="container">
-    <div class="header" [fxShow]="relationFiltersFormArray().length">
-      <div fxLayout="row" fxLayoutAlign="start center">
-        <span class="cell" style="width: 200px; min-width: 200px;" translate>relation.type</span>
-        <span class="cell" fxFlex translate>entity.entity-types</span>
-        <span class="cell" style="width: 40px; min-width: 40px;">&nbsp;</span>
-      </div>
-    </div>
     <div class="body" [fxShow]="relationFiltersFormArray().length">
       <div class="row" fxFlex fxLayout="row"
            fxLayoutAlign="start center" formArrayName="relationFilters"
            *ngFor="let relationFilterControl of relationFiltersFormArray().controls; let $index = index">
-        <div class="mat-elevation-z1" fxFlex fxLayout="row" fxLayoutAlign="start center" style="padding: 8px 0;">
-          <tb-relation-type-autocomplete
-            class="cell" style="width: 200px; min-width: 200px;"
-            subscriptSizing="dynamic"
-            [formControl]="relationFilterControl.get('relationType')">
-          </tb-relation-type-autocomplete>
-          <tb-entity-type-list class="cell" fxFlex
-            subscriptSizing="dynamic"
-            [allowedEntityTypes]="allowedEntityTypes"
-            [formControl]="relationFilterControl.get('entityTypes')">
-          </tb-entity-type-list>
+          <div class="input-block"  fxFlex fxLayout="row">
+            <tb-relation-type-autocomplete
+              label="relation.type"
+              class="cell" style="width: 200px; min-width: 200px;"
+              [formControl]="relationFilterControl.get('relationType')">
+            </tb-relation-type-autocomplete>
+            <tb-entity-type-list class="cell" fxFlex
+              [allowedEntityTypes]="allowedEntityTypes"
+              [formControl]="relationFilterControl.get('entityTypes')">
+            </tb-entity-type-list>
+          </div>
           <button mat-icon-button color="primary"
                   type="button"
                   (click)="removeFilter($index)"
@@ -47,7 +40,6 @@
                   matTooltipPosition="above">
             <mat-icon>close</mat-icon>
           </button>
-        </div>
       </div>
     </div>
   </div>
@@ -56,14 +48,13 @@
               class="tb-prompt" translate>relation.any-relation</span>
   </div>
   <div>
-    <button mat-raised-button color="primary"
+    <button mat-stroked-button color="primary"
             [disabled]="isLoading$ | async"
             (click)="addFilter()"
             type="button"
             matTooltip="{{ 'relation.add-relation-filter' | translate }}"
             matTooltipPosition="above">
-      <mat-icon>add</mat-icon>
-      {{ 'action.add' | translate }}
+      {{ 'relation.add-relation-filter' | translate }}
     </button>
   </div>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss
index b18f226f4f..d2bb8191c1 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss
@@ -22,26 +22,40 @@
       width: 100%;
     }
 
-    .header {
-      padding: 0 5px 5px;
-
-      .cell {
-        padding-right: 5px;
-        padding-left: 5px;
-        font-size: 12px;
-        font-weight: 700;
-        color: rgba(0, 0, 0, .54);
-        white-space: nowrap;
-      }
+    .map-label {
+      font-weight: 400;
+      font-size: 12px;
     }
 
+
+    //.header {
+    //  padding: 0 5px 5px;
+    //
+    //  .cell {
+    //    padding-right: 5px;
+    //    padding-left: 5px;
+    //    font-size: 12px;
+    //    font-weight: 700;
+    //    color: rgba(0, 0, 0, .54);
+    //    white-space: nowrap;
+    //  }
+    //}
+
     .body {
-      padding: 0 5px 20px;
+      //padding: 0 5px 20px;
       max-height: 300px;
       overflow: auto;
 
       .row {
         padding-top: 5px;
+
+        .input-block {
+          border: 1px solid #E0E0E0;
+          border-radius: 6px;
+          padding: 24px 24px 2px 24px;
+          align-items: center;
+          margin: 0px 8px 15px 0px;
+        }
       }
 
       .cell {
diff --git a/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html b/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html
index 7d45b5a071..909d780e45 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="entitySubtypeListFormGroup" class="mat-block tb-chip-list">
+<mat-form-field [formGroup]="entitySubtypeListFormGroup" class="mat-block">
+  <mat-label *ngIf="label">{{ label | translate }}</mat-label>
   <mat-chip-grid #chipList formControlName="entitySubtypeList">
     <mat-chip-row
       *ngFor="let entitySubtype of entitySubtypeList"
@@ -37,6 +38,14 @@
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            (matChipInputTokenEnd)="chipAdd($event)">
   </mat-chip-grid>
+  <button *ngIf="entitySubtypeListFormGroup.get('entitySubtypeList').value?.length > 1"
+          type="button"
+          style="margin-right: 3px"
+          matTooltip="{{'entity.clear-selected-profiles' | translate}}"
+          matSuffix mat-icon-button
+          (click)="clearChipGrid()">
+    <mat-icon color="primary" class="material-icons">close</mat-icon>
+  </button>
   <mat-autocomplete #entitySubtypeAutocomplete="matAutocomplete"
                     class="tb-autocomplete"
                     (optionSelected)="selected($event)"
diff --git a/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.ts b/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.ts
index b4ac3145ba..1442b44cfd 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.ts
@@ -54,6 +54,9 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
   get required(): boolean {
     return this.requiredValue;
   }
+
+  @Input() label: string;
+
   @Input()
   set required(value: boolean) {
     const newVal = coerceBooleanProperty(value);
@@ -223,6 +226,12 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
     this.clear('');
   }
 
+  clearChipGrid() {
+    this.entitySubtypeList = [];
+    this.modelValue = null;
+    this.entitySubtypeListFormGroup.get('entitySubtypeList').patchValue([], {emitEvent: true});
+  }
+
   remove(entitySubtype: string) {
     const index = this.entitySubtypeList.indexOf(entitySubtype);
     if (index >= 0) {
@@ -249,9 +258,7 @@ export class EntitySubTypeListComponent implements ControlValueAccessor, OnInit,
     this.searchText = searchText;
     return this.getEntitySubtypes().pipe(
       map(subTypes => {
-        let result = subTypes.filter( subType => {
-          return searchText ? subType.toUpperCase().startsWith(searchText.toUpperCase()) : true;
-        });
+        let result = subTypes.filter( subType => searchText ? subType.toUpperCase().startsWith(searchText.toUpperCase()) : true);
         if (!result.length) {
           result = [searchText];
         }
diff --git a/ui-ngx/src/app/shared/components/entity/entity-type-list.component.html b/ui-ngx/src/app/shared/components/entity/entity-type-list.component.html
index 7a20291a0a..6852f7f62d 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-type-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-type-list.component.html
@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="entityTypeListFormGroup" class="mat-block tb-chip-list" subscriptSizing="{{ subscriptSizing }}">
+<mat-form-field [formGroup]="entityTypeListFormGroup" class="mat-block" floatLabel="always" subscriptSizing="{{ subscriptSizing }}">
+  <mat-label>{{ 'entity.entity-types' | translate }}</mat-label>
   <mat-chip-grid #chipList formControlName="entityTypeList">
     <mat-chip-row
       *ngFor="let entityType of entityTypeList"
diff --git a/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html b/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html
index 5deea9e262..0d17daf105 100644
--- a/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="relationTypeFormGroup" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
-  <mat-label *ngIf="required">{{ 'relation.relation-type' | translate }}</mat-label>
+<mat-form-field [formGroup]="relationTypeFormGroup" floatLabel="always" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
+  <mat-label *ngIf="label" required="required">{{ label | translate }}</mat-label>
   <input matInput type="text"
          #relationTypeInput
          formControlName="relationType"
@@ -25,7 +25,9 @@
          [required]="required"
          [matAutocomplete]="relationTypeAutocomplete">
   <button *ngIf="relationTypeFormGroup.get('relationType').value && !disabled"
-          type="button"
+          type="button" color="primary"
+          style="margin-right: 3px;"
+          matTooltip="{{ 'relation.clear-relation-type' | translate}}"
           matSuffix mat-icon-button aria-label="Clear"
           (click)="clear()">
     <mat-icon class="material-icons">close</mat-icon>
diff --git a/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.ts b/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.ts
index 6f911b7ab6..5f5be4eee6 100644
--- a/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.ts
@@ -46,6 +46,9 @@ export class RelationTypeAutocompleteComponent implements ControlValueAccessor,
   get required(): boolean {
     return this.requiredValue;
   }
+
+  @Input() label: string;
+
   @Input()
   set required(value: boolean) {
     this.requiredValue = coerceBooleanProperty(value);
diff --git a/ui-ngx/src/assets/help/en_US/rulenode/customer_attributes_node_fn.md b/ui-ngx/src/assets/help/en_US/rulenode/customer_attributes_node_fn.md
new file mode 100644
index 0000000000..64647885e4
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/rulenode/customer_attributes_node_fn.md
@@ -0,0 +1,24 @@
+#### Name of popup
+
+<div class="divider"></div>
+<br/>
+
+*function Filter(msg, metadata, msgType): boolean
+
+<a href="https://github.com/thingsboard/thingsboard/blob/ea039008b148453dfa166cf92bc40b26e487e660/ui-ngx/src/app/shared/models/rule-node.models.ts#L338" target="_blank">TBEL</a>function defines a boolean expression based on the incoming Message and Metadata.
+
+**Parameters:**
+
+<ul>
+  <li><b>msg:</b> <code>{[key: string]: any}</code> - is a Message payload key/value object.
+  </li>
+  <li><b>metadata:</b> <code>{[key: string]: string}</code> - is a Message metadata key/value map, where both keys and values are strings.
+  </li>
+  <li><b>msgType:</b> <code>string</code> - is a string containing Message type. See MessageType enum for common used values.
+  </li>
+</ul>
+
+Enable 'debug mode' for your rule node to see the messages that arrive in near real-time. See Debugging for more information.
+
+**Parameters:**
+Must return a boolean value. If true - routes Message to subsequent rule nodes that are related via True link, otherwise sends Message to rule nodes related via False link. Uses 'Failure' link in case of any failures to evaluate the expression.
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 8d522acf3e..f863761295 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1922,6 +1922,7 @@
         "device-name-starts-with": "Devices whose names start with '{{prefix}}'",
         "type-device-profile": "Device profile",
         "type-device-profiles": "Device profiles",
+        "clear-selected-profiles": "Clear selected profiles",
         "list-of-device-profiles": "{ count, plural, =1 {One device profile} other {List of # device profiles} }",
         "device-profile-name-starts-with": "Device profiles whose names start with '{{prefix}}'",
         "type-asset-profile": "Asset profile",
@@ -3107,6 +3108,7 @@
     "relation": {
         "relations": "Relations",
         "direction": "Direction",
+        "clear-relation-type": "Clear relation type",
         "search-direction": {
             "FROM": "From",
             "TO": "To"

From 1bdf28ddfd3db6de7de5972a42d02ee01d0a35f7 Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Thu, 20 Apr 2023 13:46:15 +0300
Subject: [PATCH 2/4] Refactoring

---
 .../relation/relation-filters.component.html      |  2 +-
 .../relation/relation-filters.component.scss      | 15 ---------------
 2 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
index d5dfca3e71..d29c59f497 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
@@ -47,7 +47,7 @@
         <span fxLayoutAlign="center center"
               class="tb-prompt" translate>relation.any-relation</span>
   </div>
-  <div>
+  <div style="margin-top: 8px">
     <button mat-stroked-button color="primary"
             [disabled]="isLoading$ | async"
             (click)="addFilter()"
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss
index d2bb8191c1..eed28329fd 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss
@@ -27,22 +27,7 @@
       font-size: 12px;
     }
 
-
-    //.header {
-    //  padding: 0 5px 5px;
-    //
-    //  .cell {
-    //    padding-right: 5px;
-    //    padding-left: 5px;
-    //    font-size: 12px;
-    //    font-weight: 700;
-    //    color: rgba(0, 0, 0, .54);
-    //    white-space: nowrap;
-    //  }
-    //}
-
     .body {
-      //padding: 0 5px 20px;
       max-height: 300px;
       overflow: auto;
 

From 67b0a3e31e314d082e74e0457ad483f0a77182f8 Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Fri, 21 Apr 2023 11:59:40 +0300
Subject: [PATCH 3/4] Refactoring

---
 .../rulenode/customer_attributes_node_fn.md   | 24 -------------------
 1 file changed, 24 deletions(-)
 delete mode 100644 ui-ngx/src/assets/help/en_US/rulenode/customer_attributes_node_fn.md

diff --git a/ui-ngx/src/assets/help/en_US/rulenode/customer_attributes_node_fn.md b/ui-ngx/src/assets/help/en_US/rulenode/customer_attributes_node_fn.md
deleted file mode 100644
index 64647885e4..0000000000
--- a/ui-ngx/src/assets/help/en_US/rulenode/customer_attributes_node_fn.md
+++ /dev/null
@@ -1,24 +0,0 @@
-#### Name of popup
-
-<div class="divider"></div>
-<br/>
-
-*function Filter(msg, metadata, msgType): boolean
-
-<a href="https://github.com/thingsboard/thingsboard/blob/ea039008b148453dfa166cf92bc40b26e487e660/ui-ngx/src/app/shared/models/rule-node.models.ts#L338" target="_blank">TBEL</a>function defines a boolean expression based on the incoming Message and Metadata.
-
-**Parameters:**
-
-<ul>
-  <li><b>msg:</b> <code>{[key: string]: any}</code> - is a Message payload key/value object.
-  </li>
-  <li><b>metadata:</b> <code>{[key: string]: string}</code> - is a Message metadata key/value map, where both keys and values are strings.
-  </li>
-  <li><b>msgType:</b> <code>string</code> - is a string containing Message type. See MessageType enum for common used values.
-  </li>
-</ul>
-
-Enable 'debug mode' for your rule node to see the messages that arrive in near real-time. See Debugging for more information.
-
-**Parameters:**
-Must return a boolean value. If true - routes Message to subsequent rule nodes that are related via True link, otherwise sends Message to rule nodes related via False link. Uses 'Failure' link in case of any failures to evaluate the expression.

From 66dd0227383ab4a8145dde245a58fa910dabc1e6 Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Mon, 1 May 2023 15:16:17 +0300
Subject: [PATCH 4/4] Created popup helper file

---
 .../help/en_US/rulenode/msg_and_metadata_key_patterns_fn.md      | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 ui-ngx/src/assets/help/en_US/rulenode/msg_and_metadata_key_patterns_fn.md

diff --git a/ui-ngx/src/assets/help/en_US/rulenode/msg_and_metadata_key_patterns_fn.md b/ui-ngx/src/assets/help/en_US/rulenode/msg_and_metadata_key_patterns_fn.md
new file mode 100644
index 0000000000..e1fa4ab0db
--- /dev/null
+++ b/ui-ngx/src/assets/help/en_US/rulenode/msg_and_metadata_key_patterns_fn.md
@@ -0,0 +1 @@
+#### Coming soon!