From 06849452f46d2a5cc7ff010f0ef5eb1ea5632cf6 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 23 Jun 2023 13:08:32 +0300
Subject: [PATCH 1/5] UI: Added icon for rule chain selector

---
 .../rulechain/rulechain-page.component.html     |  2 +-
 .../rule-chain/rule-chain-select.component.html |  9 +++++++--
 .../rule-chain/rule-chain-select.component.scss | 13 +++++++++++++
 .../rule-chain/rule-chain-select.component.ts   | 17 ++++++++++++++---
 4 files changed, 35 insertions(+), 6 deletions(-)

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 4cdaed942d..fbef717692 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
@@ -30,7 +30,7 @@
                     fxLayout="column">
           <mat-toolbar color="primary" class="tb-dark">
             <tb-rule-chain-select
-              fxFlex
+              fxFlex fxLayout="row" fxLayoutAlign="start center"
               *ngIf="!isImport"
               [ruleChainType]="ruleChainType"
               [disabled]="isDirtyValue"
diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html
index 2b9c227c30..bc8bde2b17 100644
--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html
@@ -19,9 +19,14 @@
             class="tb-rule-chain-select"
             [required]="required"
             [disabled]="disabled"
-            [(ngModel)]="ruleChainId"
+            [(ngModel)]="ruleChain"
+            [compareWith]="compareWith"
             (ngModelChange)="ruleChainIdChanged()">
-  <mat-option *ngFor="let ruleChain of ruleChains$ | async" [value]="ruleChain.id.id">
+  <mat-select-trigger fxFlex fxLayout="row">
+    <mat-icon class="tb-rule-chain-select-trigger-icon">settings_ethernet</mat-icon>
+    <span class="tb-rule-chain-select-trigger-text">{{ruleChain?.name}}</span>
+  </mat-select-trigger>
+  <mat-option *ngFor="let ruleChain of ruleChains$ | async" [value]="ruleChain">
     {{ruleChain.name}}
   </mat-option>
 </mat-select>
diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss
index c538da5725..6221000d64 100644
--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss
@@ -22,5 +22,18 @@
     height: 48px;
     min-height: 100%;
     pointer-events: all;
+
+    &-trigger {
+      &-text {
+        max-width: 190px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      &-icon {
+        display: flex;
+        width: 36px;
+        justify-content: center;
+      }
+    }
   }
 }
diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts
index 003d85b751..a4c2dbcc7b 100644
--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts
@@ -57,7 +57,9 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit {
 
   ruleChains$: Observable<Array<RuleChain>>;
 
-  ruleChainId: string | null;
+  ruleChain: RuleChain;
+
+  selected: any;
 
   private propagateChange = (v: any) => { };
 
@@ -76,6 +78,10 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit {
     );
   }
 
+  public compareWith(object1: any, object2: any) {
+    return object1 && object2 && object1.id.id === object2.id.id;
+  }
+
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
   }
@@ -90,16 +96,21 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit {
 
   writeValue(value: string | null): void {
     if (isDefinedAndNotNull(value)) {
-      this.ruleChainId = value;
+      this.ruleChainService.getRuleChain(value)
+        .subscribe(ruleChain => this.ruleChain = ruleChain);
     }
   }
 
+  getname() {
+    return this.ruleChain?.name;
+  }
+
   ruleChainIdChanged() {
     this.updateView();
   }
 
   private updateView() {
-    this.propagateChange(this.ruleChainId);
+    this.propagateChange(this.ruleChain.id.id);
   }
 
   private getRuleChains(pageLink: PageLink): Observable<PageData<RuleChain>> {

From 319e7fd09d8fc3b52f18da4ab12b297e367ec4db Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Fri, 23 Jun 2023 13:09:44 +0300
Subject: [PATCH 2/5] UI: refactoring

---
 .../shared/components/rule-chain/rule-chain-select.component.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts
index a4c2dbcc7b..0b2564f2ae 100644
--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts
@@ -59,8 +59,6 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit {
 
   ruleChain: RuleChain;
 
-  selected: any;
-
   private propagateChange = (v: any) => { };
 
   constructor(private ruleChainService: RuleChainService) {

From e442ce6e1b26c0ac4a1ec8f69b0fe08c5640b5ca Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Mon, 26 Jun 2023 12:46:25 +0300
Subject: [PATCH 3/5] UI: Refactoring

---
 .../rule-chain-select.component.html          | 29 +++++++++----------
 .../rule-chain-select.component.scss          | 19 ++++--------
 .../rule-chain/rule-chain-select.component.ts | 15 ++--------
 3 files changed, 23 insertions(+), 40 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html
index bc8bde2b17..026454ed18 100644
--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html
@@ -15,18 +15,17 @@
     limitations under the License.
 
 -->
-<mat-select fxFlex
-            class="tb-rule-chain-select"
-            [required]="required"
-            [disabled]="disabled"
-            [(ngModel)]="ruleChain"
-            [compareWith]="compareWith"
-            (ngModelChange)="ruleChainIdChanged()">
-  <mat-select-trigger fxFlex fxLayout="row">
-    <mat-icon class="tb-rule-chain-select-trigger-icon">settings_ethernet</mat-icon>
-    <span class="tb-rule-chain-select-trigger-text">{{ruleChain?.name}}</span>
-  </mat-select-trigger>
-  <mat-option *ngFor="let ruleChain of ruleChains$ | async" [value]="ruleChain">
-    {{ruleChain.name}}
-  </mat-option>
-</mat-select>
+<mat-form-field subscriptSizing="dynamic">
+  <mat-icon matPrefix>settings_ethernet</mat-icon>
+  <mat-select fxFlex
+              class="tb-rule-chain-select"
+              hideSingleSelectionIndicator="false"
+              [required]="required"
+              [disabled]="disabled"
+              [(ngModel)]="ruleChainId"
+              (ngModelChange)="ruleChainIdChanged()">
+    <mat-option *ngFor="let ruleChain of ruleChains$ | async" [value]="ruleChain.id.id">
+      {{ruleChain.name}}
+    </mat-option>
+  </mat-select>
+</mat-form-field>
diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss
index 6221000d64..d2b3580be2 100644
--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss
@@ -19,21 +19,14 @@
   padding: 0 6px;
   .tb-rule-chain-select {
     display: flex;
-    height: 48px;
     min-height: 100%;
     pointer-events: all;
+  }
+}
 
-    &-trigger {
-      &-text {
-        max-width: 190px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-      &-icon {
-        display: flex;
-        width: 36px;
-        justify-content: center;
-      }
-    }
+:host ::ng-deep {
+  .mat-mdc-form-field-infix {
+    min-height: 48px;
+    padding: 12px 0 !important;
   }
 }
diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts
index 0b2564f2ae..003d85b751 100644
--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.ts
@@ -57,7 +57,7 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit {
 
   ruleChains$: Observable<Array<RuleChain>>;
 
-  ruleChain: RuleChain;
+  ruleChainId: string | null;
 
   private propagateChange = (v: any) => { };
 
@@ -76,10 +76,6 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit {
     );
   }
 
-  public compareWith(object1: any, object2: any) {
-    return object1 && object2 && object1.id.id === object2.id.id;
-  }
-
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
   }
@@ -94,21 +90,16 @@ export class RuleChainSelectComponent implements ControlValueAccessor, OnInit {
 
   writeValue(value: string | null): void {
     if (isDefinedAndNotNull(value)) {
-      this.ruleChainService.getRuleChain(value)
-        .subscribe(ruleChain => this.ruleChain = ruleChain);
+      this.ruleChainId = value;
     }
   }
 
-  getname() {
-    return this.ruleChain?.name;
-  }
-
   ruleChainIdChanged() {
     this.updateView();
   }
 
   private updateView() {
-    this.propagateChange(this.ruleChain.id.id);
+    this.propagateChange(this.ruleChainId);
   }
 
   private getRuleChains(pageLink: PageLink): Observable<PageData<RuleChain>> {

From 961e34a44a54ced04a5cecb3c2af3d635560b16d Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Mon, 26 Jun 2023 12:48:40 +0300
Subject: [PATCH 4/5] UI: refactoring

---
 .../modules/home/pages/rulechain/rulechain-page.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 fbef717692..4cdaed942d 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
@@ -30,7 +30,7 @@
                     fxLayout="column">
           <mat-toolbar color="primary" class="tb-dark">
             <tb-rule-chain-select
-              fxFlex fxLayout="row" fxLayoutAlign="start center"
+              fxFlex
               *ngIf="!isImport"
               [ruleChainType]="ruleChainType"
               [disabled]="isDirtyValue"

From 3e2b52b5002d984dc28d801258a9508d40290ea1 Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Mon, 26 Jun 2023 13:09:37 +0300
Subject: [PATCH 5/5] UI: refactoring style

---
 .../rule-chain/rule-chain-select.component.html           | 2 +-
 .../rule-chain/rule-chain-select.component.scss           | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html
index 026454ed18..1d699b5857 100644
--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field subscriptSizing="dynamic">
+<mat-form-field class="tb-rule-select" subscriptSizing="dynamic">
   <mat-icon matPrefix>settings_ethernet</mat-icon>
   <mat-select fxFlex
               class="tb-rule-chain-select"
diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss
index d2b3580be2..c69661ad76 100644
--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.scss
@@ -25,8 +25,10 @@
 }
 
 :host ::ng-deep {
-  .mat-mdc-form-field-infix {
-    min-height: 48px;
-    padding: 12px 0 !important;
+  .mat-mdc-form-field.tb-rule-select .mdc-text-field {
+    .mat-mdc-form-field-infix {
+      min-height: 48px;
+      padding: 12px 0;
+    }
   }
 }