From e30e2ca62767c3791070f1c6355c9bfa249f6678 Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Tue, 9 Jan 2024 17:28:53 +0200
Subject: [PATCH] UI: rule chain search improvements

---
 .../rule-chain-select-panel.component.html    |  7 +++---
 .../rule-chain-select-panel.component.scss    | 22 +++++++++++++++++++
 .../rule-chain-select.component.html          |  7 +++---
 .../rule-chain-select.component.scss          |  2 ++
 4 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.html b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.html
index f6c9a3938e..7a9f56255f 100644
--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.html
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.html
@@ -22,13 +22,14 @@
          (focusin)="onFocus()"
          [matAutocomplete]="ruleChainAutocomplete">
   <mat-icon matSuffix>search</mat-icon>
-  <mat-autocomplete class="tb-autocomplete"
+  <mat-autocomplete class="tb-autocomplete tb-rule-chain-search"
                     #ruleChainAutocomplete="matAutocomplete"
                     (optionSelected)="selected($event)">
     <mat-option *ngFor="let ruleChain of filteredRuleChains | async"
-                [fxHide]="ruleChainId === ruleChain.id.id"
+                [class.tb-selected-option]="ruleChainId === ruleChain.id.id"
                 [value]="ruleChain">
-      <span [innerHTML]="ruleChain.name | highlight:searchText"></span>
+      <mat-icon *ngIf="ruleChainId === ruleChain.id.id">check</mat-icon>
+      <span [innerHTML]="ruleChain.name | highlight:searchText:true"></span>
     </mat-option>
     <mat-option *ngIf="!(filteredRuleChains | async)?.length" [value]="null" class="tb-not-found">
       <div class="tb-not-found-content" (click)="$event.stopPropagation()">
diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.scss b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.scss
index 758b1f9bcd..798839627d 100644
--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.scss
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select-panel.component.scss
@@ -13,6 +13,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import "../../../../scss/constants";
+
 :host {
   width: 100%;
 }
+
+::ng-deep {
+  .tb-autocomplete.tb-rule-chain-search {
+    .mat-mdc-option.tb-selected-option {
+      display: flex;
+      flex-direction: row-reverse;
+      background-color: rgba(0, 0, 0, .04);
+
+      mat-icon {
+        margin-right: 0;
+        margin-left: 16px;
+        color: $tb-primary-color;
+      }
+
+      .mdc-list-item__primary-text {
+        color: $tb-primary-color;
+      }
+    }
+  }
+}
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 899a43a781..1e646d2dcb 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
@@ -16,12 +16,11 @@
 
 -->
 <mat-form-field class="tb-rule-select" subscriptSizing="dynamic" appearance="fill"
-                [ngClass]="{'cursor-pointer': !disabled}"
+                [class.cursor-pointer]="!disabled"
                 (click)="openRuleChainSelectPanel($event)">
   <mat-icon matPrefix>settings_ethernet</mat-icon>
-  <input matInput readonly
+  <input matInput readonly disabled
          [required]="required"
-         [disabled]="disabled"
          [value]="ruleChain?.name">
-  <mat-icon [ngClass]="{'disabled': disabled || panelOpened}" matSuffix>arrow_drop_down</mat-icon>
+  <mat-icon [class.disabled]="disabled || panelOpened" matSuffix>arrow_drop_down</mat-icon>
 </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 6f781986bf..d981a2954b 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
@@ -23,6 +23,8 @@
     input {
       color: #fff;
       cursor: pointer;
+      text-overflow: ellipsis;
+      pointer-events: none;
 
       &:disabled {
         cursor: unset;