From 852a29ff84ca48d7741f708a644a4d0d7246464f Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Tue, 16 May 2023 15:00:03 +0300
Subject: [PATCH] Updated relation filter

---
 .../relation/relation-filters.component.html  | 33 ++++++++-----------
 .../relation/relation-filters.component.scss  |  9 ++---
 .../rule-node-details.component.html          |  2 +-
 .../assets/locale/locale.constant-en_US.json  | 10 +++---
 4 files changed, 22 insertions(+), 32 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 2b7e4651f0..bfc639e6b4 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,23 @@
 -->
 <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"
+      <div style="margin-bottom: 10px;" 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 fxFlex fxLayout="row" fxLayoutAlign="start center">
+          <div class="input-block" fxFlex fxLayout="row" fxLayoutAlign="start center">
+            <tb-relation-type-autocomplete
+              style="width: 200px; min-width: 200px;"
+              subscriptSizing="dynamic"
+              [formControl]="relationFilterControl.get('relationType')">
+            </tb-relation-type-autocomplete>
+            <tb-entity-type-list style="margin-left: 30px" fxFlex
+              subscriptSizing="dynamic"
+              [allowedEntityTypes]="allowedEntityTypes"
+              [formControl]="relationFilterControl.get('entityTypes')">
+            </tb-entity-type-list>
+          </div>
           <button mat-icon-button color="primary"
                   type="button"
                   (click)="removeFilter($index)"
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 eed28329fd..c6bf558aca 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
@@ -36,17 +36,12 @@
 
         .input-block {
           border: 1px solid #E0E0E0;
+          width: 100%;
           border-radius: 6px;
-          padding: 24px 24px 2px 24px;
+          padding: 24px;
           align-items: center;
-          margin: 0px 8px 15px 0px;
         }
       }
-
-      .cell {
-        padding-right: 5px;
-        padding-left: 5px;
-      }
     }
 
     .any-filter{
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 35a564182c..592bb46cb2 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
@@ -54,7 +54,7 @@
       </tb-rule-node-config>
       <div formGroupName="additionalInfo" fxLayout="column">
         <mat-form-field class="mat-block">
-          <mat-label translate>rulenode.description</mat-label>
+          <mat-label translate>rulenode.rule-node-description</mat-label>
           <textarea matInput formControlName="description" rows="2"></textarea>
         </mat-form-field>
       </div>
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 1f7ac2af35..ff3ef73b6e 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1271,13 +1271,13 @@
         "password": "Password",
         "secret": "Secret",
         "secret-required": "Secret is required.",
-        "device-type": "Device type",
+        "device-type": "Device profile",
         "device-type-required": "Device type is required.",
         "select-device-type": "Select device type",
-        "enter-device-type": "Enter device type",
+        "enter-device-type": "Enter device profile",
         "any-device": "Any device",
-        "no-device-types-matching": "No device types matching '{{entitySubtype}}' were found.",
-        "device-type-list-empty": "No device types selected.",
+        "no-device-types-matching": "No device profiles matching '{{entitySubtype}}' were found.",
+        "device-type-list-empty": "No device profiles selected!",
         "device-types": "Device types",
         "name": "Name",
         "name-required": "Name is required.",
@@ -3322,7 +3322,7 @@
         "name-required": "Name is required.",
         "name-max-length": "Name should be less than 256",
         "type": "Type",
-        "description": "Description",
+        "rule-node-description": "Rule node description",
         "delete": "Delete rule node",
         "select-all-objects": "Select all nodes and connections",
         "deselect-all-objects": "Deselect all nodes and connections",