From b206061e602f8cbb699bb4835588bf4604350112 Mon Sep 17 00:00:00 2001
From: Dmitriymush <powder322@gmail.com>
Date: Tue, 31 Oct 2023 13:35:56 +0200
Subject: [PATCH 1/2] UI: bug-fix to tables basic settings columns error
 appearence

---
 .../basic/alarm/alarms-table-basic-config.component.html    | 1 +
 ui-ngx/src/app/shared/components/tb-error.component.ts      | 6 +++++-
 ui-ngx/src/assets/locale/locale.constant-en_US.json         | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html
index 860072fbbd..c2e8de37c4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/alarm/alarms-table-basic-config.component.html
@@ -40,6 +40,7 @@
     keySettingsTitle="{{ 'widgets.table.column-settings' | translate }}"
     removeKeyTitle="{{ 'widgets.table.remove-column' | translate }}"
     noKeysText="{{ 'widgets.table.no-columns' | translate }}"
+    requiredKeysText="{{ 'widgets.table.alarm-column-error' | translate }}"
     hideDataKeyColor
     hideUnits
     hideDecimals
diff --git a/ui-ngx/src/app/shared/components/tb-error.component.ts b/ui-ngx/src/app/shared/components/tb-error.component.ts
index 5ddd2d7896..3cd842ee6a 100644
--- a/ui-ngx/src/app/shared/components/tb-error.component.ts
+++ b/ui-ngx/src/app/shared/components/tb-error.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, Input } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { coerceBoolean } from '@shared/decorators/coercion';
 
@@ -61,12 +61,16 @@ export class TbErrorComponent {
     if (value && !this.message) {
       this.message = value;
       this.state = 'hide';
+
       setTimeout(() => {
         this.state = 'show';
+        this.cd.markForCheck();
       });
     } else {
       this.errorValue = value;
       this.state = value ? 'show' : 'hide';
     }
   }
+
+  constructor(private cd: ChangeDetectorRef) {}
 }
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 f5c09ce75f..efb94c7782 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -6193,6 +6193,7 @@
             "pagination": "Pagination",
             "rows": "Rows",
             "timeseries-column-error": "At least one timeseries column should be specified",
+            "alarm-column-error": "At least one alarm column should be specified",
             "table-tabs": "Table tabs",
             "show-cell-actions-menu-mobile": "Show cell actions dropdown menu in mobile mode"
         },

From 598d67c4f2e37ed00e7cda0d138e633a208f9718 Mon Sep 17 00:00:00 2001
From: Dmitriymush <powder322@gmail.com>
Date: Fri, 3 Nov 2023 17:38:09 +0200
Subject: [PATCH 2/2] UI: tb-error move logic form PE, code style fix,
 enhacements

---
 .../shared/components/tb-error.component.ts   | 38 +++++++++----------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/tb-error.component.ts b/ui-ngx/src/app/shared/components/tb-error.component.ts
index 3cd842ee6a..c0055df1f1 100644
--- a/ui-ngx/src/app/shared/components/tb-error.component.ts
+++ b/ui-ngx/src/app/shared/components/tb-error.component.ts
@@ -21,10 +21,10 @@ import { coerceBoolean } from '@shared/decorators/coercion';
 @Component({
   selector: 'tb-error',
   template: `
-  <div [@animation]="state" [ngStyle]="{marginTop: noMargin ? '0' : '0.5rem', fontSize: '.75rem'}">
-      <mat-error >
-      {{message}}
-    </mat-error>
+    <div [@animation]="state" [ngStyle]="{marginTop: noMargin ? '0' : '0.5rem', fontSize: '.75rem'}">
+      <mat-error>
+        {{message}}
+      </mat-error>
     </div>
   `,
   styles: [`
@@ -36,21 +36,23 @@ import { coerceBoolean } from '@shared/decorators/coercion';
     trigger('animation', [
       state('show', style({
         opacity: 1,
+        transform: 'translateY(0)'
       })),
       state('hide',   style({
         opacity: 0,
         transform: 'translateY(-1rem)'
       })),
-      transition('show => hide', animate('200ms ease-out')),
-      transition('* => show', animate('200ms ease-in'))
-
+      transition('* <=> *', animate('200ms ease-out'))
     ]),
   ]
 })
 export class TbErrorComponent {
-  errorValue: any;
-  state: any;
-  message;
+  errorValue: string;
+  state = 'hide';
+  message: string;
+
+  constructor(private cd: ChangeDetectorRef) {
+  }
 
   @Input()
   @coerceBoolean()
@@ -58,19 +60,13 @@ export class TbErrorComponent {
 
   @Input()
   set error(value) {
-    if (value && !this.message) {
-      this.message = value;
-      this.state = 'hide';
-
-      setTimeout(() => {
-        this.state = 'show';
-        this.cd.markForCheck();
-      });
-    } else {
+    if (this.errorValue !== value) {
       this.errorValue = value;
+      if (value) {
+        this.message = value;
+      }
       this.state = value ? 'show' : 'hide';
+      this.cd.markForCheck();
     }
   }
-
-  constructor(private cd: ChangeDetectorRef) {}
 }