From fab82e9514a7182dfb1cf7dc80f39ea4283f6d2f Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 15 May 2023 17:21:57 +0300
Subject: [PATCH] UI: Improve dashboard toolbar

---
 .../components/alias/aliases-entity-select.component.html  | 6 +++---
 .../components/alias/aliases-entity-select.component.scss  | 6 ++++--
 .../components/alias/aliases-entity-select.component.ts    | 7 ++++++-
 .../home/components/filter/filters-edit.component.scss     | 3 +++
 .../home/components/filter/filters-edit.component.ts       | 7 ++++++-
 5 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
index f01043ebc4..d64bfdccdc 100644
--- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.html
@@ -15,17 +15,17 @@
     limitations under the License.
 
 -->
-<section class="tb-aliases-entity-select" fxLayout="row" fxLayoutAlign="start center">
+<section class="tb-aliases-entity-select" fxLayout="row" fxLayoutAlign="start center" *ngIf="hasSelectableAliasEntities">
   <button mat-icon-button
           cdkOverlayOrigin #aliasEntitySelectPanelOrigin="cdkOverlayOrigin"
           (click)="openEditMode()"
-          matTooltip="{{ hasSelectableAliasEntities ? ('entity.select-entities' | translate) : '' }}"
+          matTooltip="{{ 'entity.select-entities' | translate }}"
           [matTooltipPosition]="tooltipPosition">
     <mat-icon class="material-icons">devices_other</mat-icon>
   </button>
   <span fxHide.lt-lg
         (click)="openEditMode()"
-        matTooltip="{{ hasSelectableAliasEntities ? ('entity.select-entities' | translate) : '' }}"
+        matTooltip="{{ 'entity.select-entities' | translate }}"
         [matTooltipPosition]="tooltipPosition">
     {{displayValue}}
   </span>
diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.scss b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.scss
index 0e2a0d6775..52271bc631 100644
--- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.scss
+++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.scss
@@ -16,9 +16,11 @@
 @import "../../../../../scss/constants";
 
 :host {
-  min-width: 52px;
-
+  &.tb-hide {
+    display: none;
+  }
   section.tb-aliases-entity-select {
+    min-width: 52px;
     min-height: 32px;
     padding: 0 6px;
 
diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts
index 983b5f31f3..b34b5619ba 100644
--- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts
+++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts
@@ -16,7 +16,7 @@
 
 import {
   ChangeDetectorRef,
-  Component,
+  Component, HostBinding,
   Injector,
   Input,
   OnDestroy,
@@ -47,6 +47,9 @@ import { AliasFilterType } from '@shared/models/alias.models';
 })
 export class AliasesEntitySelectComponent implements OnInit, OnDestroy {
 
+  @HostBinding('class')
+  aliasesEntitySelectClass = 'tb-hide';
+
   aliasControllerValue: IAliasController;
 
   @Input()
@@ -188,12 +191,14 @@ export class AliasesEntitySelectComponent implements OnInit, OnDestroy {
     const allEntityAliases = this.aliasController.getEntityAliases();
     this.entityAliasesInfo = {};
     this.hasSelectableAliasEntities = false;
+    this.aliasesEntitySelectClass = 'tb-hide';
     for (const aliasId of Object.keys(allEntityAliases)) {
       const aliasInfo = this.aliasController.getInstantAliasInfo(aliasId);
       if (aliasInfo && !aliasInfo.resolveMultiple && aliasInfo.currentEntity
         && aliasInfo.entityFilter && aliasInfo.entityFilter.type !== AliasFilterType.singleEntity) {
         this.entityAliasesInfo[aliasId] = deepClone(aliasInfo);
         this.hasSelectableAliasEntities = true;
+        this.aliasesEntitySelectClass = '';
       }
     }
   }
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.scss b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.scss
index 72f9efe407..62d28d29ea 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.scss
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.scss
@@ -16,6 +16,9 @@
 @import "../../../../../scss/constants";
 
 :host {
+  &.tb-hide {
+    display: none;
+  }
   section.tb-filters-edit {
     min-height: 32px;
     padding: 0 6px;
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.ts b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.ts
index 69099eb8f8..bae93af0e3 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.ts
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import {
-  Component,
+  Component, HostBinding,
   Injector,
   Input,
   OnDestroy,
@@ -48,6 +48,9 @@ import { MatDialog } from '@angular/material/dialog';
 })
 export class FiltersEditComponent implements OnInit, OnDestroy {
 
+  @HostBinding('class')
+  filtersEditClass = 'tb-hide';
+
   aliasControllerValue: IAliasController;
 
   @Input()
@@ -174,11 +177,13 @@ export class FiltersEditComponent implements OnInit, OnDestroy {
     const allFilters = this.aliasController.getFilters();
     this.filtersInfo = {};
     this.hasEditableFilters = false;
+    this.filtersEditClass = 'tb-hide';
     for (const filterId of Object.keys(allFilters)) {
       const filterInfo = this.aliasController.getFilterInfo(filterId);
       if (filterInfo && isFilterEditable(filterInfo)) {
         this.filtersInfo[filterId] = deepClone(filterInfo);
         this.hasEditableFilters = true;
+        this.filtersEditClass = '';
       }
     }
   }