Merge pull request #12291 from vvlladd28/bug/notification-center/mobile-hidden-add

Fixed the missing add buttons in the notification center on mobile

ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

@@ -46,22 +46,41 @@
             </div>
             <span class="flex-1"></span>
             <div [class.!hidden]="!addEnabled()">
-              <button mat-icon-button [disabled]="isLoading$ | async"
+              <ng-container *ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions">
-                      *ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions"
+                <button *ngIf="!entitiesTableConfig.addAsTextButton"
-                      (click)="addEntity($event)"
+                        mat-icon-button
-                      matTooltip="{{ translations.add | translate }}"
+                        [disabled]="isLoading$ | async"
-                      matTooltipPosition="above">
+                        (click)="addEntity($event)"
-                <mat-icon>add</mat-icon>
+                        matTooltip="{{ translations.add | translate }}"
-              </button>
-              <ng-template #addActions>
-                <button mat-icon-button [disabled]="isLoading$ | async"
-                        *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu"
-                        [class.!hidden]="!entitiesTableConfig.addActionDescriptors[0].isEnabled()"
-                        (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
-                        matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
                         matTooltipPosition="above">
-                  <tb-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</tb-icon>
+                  <mat-icon>add</mat-icon>
+                </button>
+                <button *ngIf="entitiesTableConfig.addAsTextButton"
+                        mat-stroked-button color="primary"
+                        [disabled]="isLoading$ | async"
+                        (click)="addEntity($event)">
+                  <mat-icon>add</mat-icon>
+                  {{ translations.add | translate }}
                 </button>
+              </ng-container>
+              <ng-template #addActions>
+                <ng-container *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu">
+                  <button *ngIf="!entitiesTableConfig.addAsTextButton && entitiesTableConfig.addActionDescriptors[0].isEnabled()"
+                          mat-icon-button
+                          [disabled]="isLoading$ | async"
+                          (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
+                          matTooltip="{{ entitiesTableConfig.addActionDescriptors[0].name }}"
+                          matTooltipPosition="above">
+                    <tb-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</tb-icon>
+                  </button>
+                  <button *ngIf="entitiesTableConfig.addAsTextButton && entitiesTableConfig.addActionDescriptors[0].isEnabled()"
+                          mat-stroked-button color="primary"
+                          [disabled]="isLoading$ | async"
+                          (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)">
+                    <tb-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</tb-icon>
+                    {{ entitiesTableConfig.addActionDescriptors[0].name }}
+                  </button>
+                </ng-container>
                 <ng-template #addActionsMenu>
                   <button mat-icon-button [disabled]="isLoading$ | async"
                           matTooltip="{{ translations.add | translate }}"

ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts

@@ -170,6 +170,7 @@ export class EntityTableConfig<T extends BaseData<HasId>, P extends PageLink = P
   selectionEnabled = true;
   searchEnabled = true;
   addEnabled = true;
+  addAsTextButton = false;
   entitiesDeleteEnabled = true;
   detailsPanelEnabled = true;
   hideDetailsTabsOnEdit = true;

ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-config.resolver.ts

@@ -57,7 +57,7 @@ export class MobileAppTableConfigResolver  {
               ) {
     this.config.selectionEnabled = false;
     this.config.entityType = EntityType.MOBILE_APP;
-    this.config.addEnabled = false;
+    this.config.addAsTextButton = true;
     this.config.entitiesDeleteEnabled = false;
     this.config.rowPointer = true;
     this.config.entityTranslations = entityTypeTranslations.get(EntityType.MOBILE_APP);

ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-header.component.html

@@ -15,12 +15,7 @@
     limitations under the License.
 
 -->
-<div class="flex flex-full items-center justify-between">
+<section class="flex items-center">
-  <section class="flex items-center xs:!hidden">
+  <div tbTruncateWithTooltip translate>mobile.applications</div>
-    <div tbTruncateWithTooltip translate>mobile.applications</div>
+  <div tb-help="mobileApplication"></div>
-    <div tb-help="mobileApplication"></div>
+</section>
-  </section>
-  <button mat-stroked-button color="primary" (click)="createMobile($event)">
-    <mat-icon>add</mat-icon>{{ 'mobile.add-application' | translate }}
-  </button>
-</div>

ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-header.component.scss

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 :host{
-  width: 100000px;
+  width: 100%;
 }

ui-ngx/src/app/modules/home/pages/mobile/applications/mobile-app-table-header.component.ts

@@ -30,8 +30,4 @@ export class MobileAppTableHeaderComponent extends EntityTableHeaderComponent<Mo
   constructor(protected store: Store<AppState>) {
     super(store);
   }
-
-  createMobile($event: Event) {
-    this.entitiesTableConfig.getTable().addEntity($event);
-  }
 }

ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-config.resolve.ts

@@ -32,7 +32,6 @@ import { DatePipe } from '@angular/common';
 import { MobileAppService } from '@core/http/mobile-app.service';
 import { finalize, map, skip, take, takeUntil } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
-import { EntityAction } from '@home/models/entity/entity-component.models';
 import { MatDialog } from '@angular/material/dialog';
 import {
   MobileBundleDialogComponent,
@@ -45,7 +44,7 @@ import {
 import { select, Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { selectUserSettingsProperty } from '@core/auth/auth.selectors';
-import { forkJoin, of } from 'rxjs';
+import { forkJoin, Observable, of, switchMap } from 'rxjs';
 
 @Injectable()
 export class MobileBundleTableConfigResolver {
@@ -64,16 +63,17 @@ export class MobileBundleTableConfigResolver {
   ) {
     this.config.selectionEnabled = false;
     this.config.entityType = EntityType.MOBILE_APP_BUNDLE;
-    this.config.addEnabled = false;
+    this.config.addAsTextButton = true;
     this.config.rowPointer = true;
     this.config.detailsPanelEnabled = false;
     this.config.entityTranslations = entityTypeTranslations.get(EntityType.MOBILE_APP_BUNDLE);
     this.config.entityResources = entityTypeResources.get(EntityType.MOBILE_APP_BUNDLE);
     this.config.headerComponent = MobileBundleTableHeaderComponent;
-    this.config.onEntityAction = action => this.onBundleAction(action);
     this.config.addDialogStyle = {width: '850px', maxHeight: '100vh'};
     this.config.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
 
+    this.config.addEntity = () => this.editBundle(null, true);
+
     this.config.columns.push(
       new DateEntityTableColumn<MobileAppBundleInfo>('createdTime', 'common.created-time', this.datePipe, '170px'),
       new EntityTableColumn<MobileAppBundleInfo>('title', 'mobile.title', '25%'),
@@ -114,15 +114,28 @@ export class MobileBundleTableConfigResolver {
       if (!this.openingEditDialog) {
         this.openingEditDialog = true;
         this.mobileAppService.getMobileAppBundleInfoById(bundle.id.id).pipe(
+          switchMap(appBundleInfo => this.editBundle(appBundleInfo)),
           takeUntil(this.router.events.pipe(skip(1))),
           finalize(() => {this.openingEditDialog = false;})
-        ).subscribe(
+        ).subscribe((res) => {
-          appBundleInfo => this.editBundle($event, appBundleInfo)
+          if (res) {
-        );
+            this.config.updateData();
+          }
+        });
       }
       return true;
     };
 
+    this.config.entityAdded = (bundle) => {
+      this.store.pipe(select(selectUserSettingsProperty('notDisplayConfigurationAfterAddMobileBundle'))).pipe(
+        take(1)
+      ).subscribe((settings: boolean) => {
+        if(!settings) {
+          this.configurationApp(null, bundle, true);
+        }
+      });
+    }
+
     this.config.cellActionDescriptors = this.configureCellActions();
   }
 
@@ -141,11 +154,8 @@ export class MobileBundleTableConfigResolver {
     ];
   }
 
-  private editBundle($event: Event, bundle: MobileAppBundleInfo, isAdd = false) {
+  private editBundle(bundle: MobileAppBundleInfo, isAdd = false): Observable<MobileAppBundleInfo> {
-    if ($event) {
+    return this.dialog.open<MobileBundleDialogComponent, MobileBundleDialogData,
-      $event.stopPropagation();
-    }
-    this.dialog.open<MobileBundleDialogComponent, MobileBundleDialogData,
       MobileAppBundleInfo>(MobileBundleDialogComponent, {
       disableClose: true,
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
@@ -153,33 +163,7 @@ export class MobileBundleTableConfigResolver {
         isAdd,
         bundle
       }
-    }).afterClosed()
+    }).afterClosed();
-      .subscribe((res) => {
-        if (res) {
-          if (!isAdd) {
-            this.config.updateData();
-          } else {
-            this.store.pipe(select(selectUserSettingsProperty('notDisplayConfigurationAfterAddMobileBundle'))).pipe(
-              take(1)
-            ).subscribe((settings: boolean) => {
-              if (!settings) {
-                this.configurationApp(null, res, true);
-              } else {
-                this.config.updateData();
-              }
-            });
-          }
-        }
-      });
-  }
-
-  private onBundleAction(action: EntityAction<MobileAppBundleInfo>): boolean {
-    switch (action.action) {
-      case 'add':
-        this.editBundle(action.event, action.entity, true);
-        return true;
-    }
-    return false;
   }
 
   private configurationApp($event: Event, entity: MobileAppBundleInfo, afterAdd = false) {

ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-header.component.html

@@ -15,12 +15,7 @@
     limitations under the License.
 
 -->
-<div class="flex flex-full items-center justify-between">
+<section class="flex items-center">
-  <section class="flex items-center xs:!hidden">
+  <div tbTruncateWithTooltip translate>mobile.bundles</div>
-    <div tbTruncateWithTooltip translate>mobile.bundles</div>
+  <div tb-help="mobileBundle"></div>
-    <div tb-help="mobileBundle"></div>
+</section>
-  </section>
-  <button mat-stroked-button color="primary" (click)="createBundle($event)">
-    <mat-icon>add</mat-icon>{{ 'mobile.add-bundle' | translate }}
-  </button>
-</div>

ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-header.component.scss

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 :host{
-  width: 100000px;
+  width: 100%;
 }

ui-ngx/src/app/modules/home/pages/mobile/bundes/mobile-bundle-table-header.component.ts

@@ -30,8 +30,4 @@ export class MobileBundleTableHeaderComponent extends EntityTableHeaderComponent
   constructor(protected store: Store<AppState>) {
     super(store);
   }
-
-  createBundle($event: Event) {
-    this.entitiesTableConfig.onEntityAction({event: $event, action: 'add', entity: null});
-  }
 }

ui-ngx/src/app/modules/home/pages/notification/notification.module.ts

@@ -26,15 +26,12 @@ import { SentNotificationDialogComponent } from '@home/pages/notification/sent/s
 import {
   RecipientNotificationDialogComponent
 } from '@home/pages/notification/recipient/recipient-notification-dialog.component';
-import { RecipientTableHeaderComponent } from '@home/pages/notification/recipient/recipient-table-header.component';
 import {
   TemplateNotificationDialogComponent
 } from '@home/pages/notification/template/template-notification-dialog.component';
-import { TemplateTableHeaderComponent } from '@home/pages/notification/template/template-table-header.component';
 import { EscalationFormComponent } from '@home/pages/notification/rule/escalation-form.component';
 import { EscalationsComponent } from '@home/pages/notification/rule/escalations.component';
 import { RuleNotificationDialogComponent } from '@home/pages/notification/rule/rule-notification-dialog.component';
-import { RuleTableHeaderComponent } from '@home/pages/notification/rule/rule-table-header.component';
 import { NotificationSettingsComponent } from '@home/pages/notification/settings/notification-settings.component';
 import {
   NotificationSettingFormComponent
@@ -53,13 +50,10 @@ import {
     SentErrorDialogComponent,
     SentNotificationDialogComponent,
     RecipientNotificationDialogComponent,
-    RecipientTableHeaderComponent,
     TemplateNotificationDialogComponent,
-    TemplateTableHeaderComponent,
     EscalationFormComponent,
     EscalationsComponent,
     RuleNotificationDialogComponent,
-    RuleTableHeaderComponent,
     NotificationSettingsComponent,
     NotificationSettingFormComponent,
     NotificationTemplateConfigurationComponent,

ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-config.resolver.ts

@@ -30,12 +30,11 @@ import {
   RecipientNotificationDialogData
 } from '@home/pages/notification/recipient/recipient-notification-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
-import { EntityAction } from '@home/models/entity/entity-component.models';
-import { RecipientTableHeaderComponent } from '@home/pages/notification/recipient/recipient-table-header.component';
 import { ActivatedRouteSnapshot } from '@angular/router';
 import { Injectable } from '@angular/core';
 import { DatePipe } from '@angular/common';
 import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe';
+import { Observable } from 'rxjs';
 
 @Injectable()
 export class RecipientTableConfigResolver  {
@@ -50,12 +49,14 @@ export class RecipientTableConfigResolver  {
 
     this.config.entityType = EntityType.NOTIFICATION_TARGET;
     this.config.detailsPanelEnabled = false;
-    this.config.addEnabled = false;
+    this.config.addAsTextButton = true;
     this.config.rowPointer = true;
 
     this.config.entityTranslations = entityTypeTranslations.get(EntityType.NOTIFICATION_TARGET);
     this.config.entityResources = {} as EntityTypeResource<NotificationTarget>;
 
+    this.config.addEntity = () => this.editTarget(null, true);
+
     this.config.entitiesFetchFunction = pageLink => this.notificationService.getNotificationTargets(pageLink);
 
     this.config.deleteEntityTitle = target => this.translate.instant('notification.delete-recipient-title', {recipientName: target.name});
@@ -67,13 +68,15 @@ export class RecipientTableConfigResolver  {
 
     this.config.cellActionDescriptors = this.configureCellActions();
 
-    this.config.headerComponent = RecipientTableHeaderComponent;
-    this.config.onEntityAction = action => this.onTargetAction(action);
-
     this.config.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
 
     this.config.handleRowClick = ($event, target) => {
-      this.editTarget($event, target);
+      $event?.stopPropagation();
+      this.editTarget(target).subscribe((res) => {
+        if (res) {
+          this.config.updateData();
+        }
+      });
       return true;
     };
 
@@ -89,7 +92,7 @@ export class RecipientTableConfigResolver  {
     );
   }
 
-  resolve(route: ActivatedRouteSnapshot): EntityTableConfig<NotificationTarget> {
+  resolve(_route: ActivatedRouteSnapshot): EntityTableConfig<NotificationTarget> {
     return this.config;
   }
 
@@ -97,11 +100,8 @@ export class RecipientTableConfigResolver  {
     return [];
   }
 
-  private editTarget($event: Event, target: NotificationTarget, isAdd = false) {
+  private editTarget(target: NotificationTarget, isAdd = false): Observable<NotificationTarget> {
-    if ($event) {
+    return this.dialog.open<RecipientNotificationDialogComponent, RecipientNotificationDialogData,
-      $event.stopPropagation();
-    }
-    this.dialog.open<RecipientNotificationDialogComponent, RecipientNotificationDialogData,
       NotificationTarget>(RecipientNotificationDialogComponent, {
       disableClose: true,
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
@@ -109,20 +109,6 @@ export class RecipientTableConfigResolver  {
         isAdd,
         target
       }
-    }).afterClosed()
+    }).afterClosed();
-      .subscribe((res) => {
-        if (res) {
-          this.config.updateData();
-        }
-      });
-  }
-
-  private onTargetAction(action: EntityAction<NotificationTarget>): boolean {
-    switch (action.action) {
-      case 'add':
-        this.editTarget(action.event, action.entity, true);
-        return true;
-    }
-    return false;
   }
 }

ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.html

@@ -1,24 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="flex flex-full flex-row items-center justify-end">
-  <button mat-stroked-button color="primary" (click)="createTarget($event)">
-    <div class="flex flex-row items-center justify-start">
-      <mat-icon>add</mat-icon>{{ 'notification.add-recipients' | translate }}
-    </div>
-  </button>
-</div>

ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.scss

@@ -1,18 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host{
-  width: 10000px;
-}

ui-ngx/src/app/modules/home/pages/notification/recipient/recipient-table-header.component.ts

@@ -1,38 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component } from '@angular/core';
-import { EntityTableHeaderComponent } from '@home/components/entity/entity-table-header.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { NotificationTarget } from '@shared/models/notification.models';
-
-@Component({
-  selector: 'tb-recipient-table-header',
-  templateUrl: './recipient-table-header.component.html',
-  styleUrls: ['recipient-table-header.component.scss']
-})
-export class RecipientTableHeaderComponent extends EntityTableHeaderComponent<NotificationTarget> {
-
-  constructor(protected store: Store<AppState>) {
-    super(store);
-  }
-
-  createTarget($event: Event) {
-    this.entitiesTableConfig.onEntityAction({event: $event, action: 'add', entity: null});
-  }
-
-}

ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-config.resolver.ts

@@ -26,8 +26,6 @@ import { NotificationRule, TriggerTypeTranslationMap } from '@shared/models/noti
 import { NotificationService } from '@core/http/notification.service';
 import { TranslateService } from '@ngx-translate/core';
 import { MatDialog } from '@angular/material/dialog';
-import { EntityAction } from '@home/models/entity/entity-component.models';
-import { RuleTableHeaderComponent } from '@home/pages/notification/rule/rule-table-header.component';
 import {
   RuleNotificationDialogComponent,
   RuleNotificationDialogData
@@ -36,6 +34,7 @@ import { ActivatedRouteSnapshot } from '@angular/router';
 import { Injectable } from '@angular/core';
 import { DatePipe } from '@angular/common';
 import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe';
+import { Observable } from 'rxjs';
 
 @Injectable()
 export class RuleTableConfigResolver  {
@@ -50,12 +49,14 @@ export class RuleTableConfigResolver  {
 
     this.config.entityType = EntityType.NOTIFICATION_RULE;
     this.config.detailsPanelEnabled = false;
-    this.config.addEnabled = false;
+    this.config.addAsTextButton = true;
     this.config.rowPointer = true;
 
     this.config.entityTranslations = entityTypeTranslations.get(EntityType.NOTIFICATION_RULE);
     this.config.entityResources = {} as EntityTypeResource<NotificationRule>;
 
+    this.config.addEntity = () => this.editRule(null, null, true);
+
     this.config.entitiesFetchFunction = pageLink => this.notificationService.getNotificationRules(pageLink);
 
     this.config.deleteEntityTitle = rule => this.translate.instant('notification.delete-rule-title', {ruleName: rule.name});
@@ -65,13 +66,15 @@ export class RuleTableConfigResolver  {
     this.config.deleteEntity = id => this.notificationService.deleteNotificationRule(id.id);
 
     this.config.cellActionDescriptors = this.configureCellActions();
-    this.config.headerComponent = RuleTableHeaderComponent;
-    this.config.onEntityAction = action => this.onTargetAction(action);
 
     this.config.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
 
     this.config.handleRowClick = ($event, rule) => {
-      this.editRule($event, rule);
+      this.editRule($event, rule).subscribe((res) => {
+        if (res) {
+          this.config.updateData();
+        }
+      });
       return true;
     };
 
@@ -88,7 +91,7 @@ export class RuleTableConfigResolver  {
     );
   }
 
-  resolve(route: ActivatedRouteSnapshot): EntityTableConfig<NotificationRule> {
+  resolve(_route: ActivatedRouteSnapshot): EntityTableConfig<NotificationRule> {
     return this.config;
   }
 
@@ -110,11 +113,9 @@ export class RuleTableConfigResolver  {
     }];
   }
 
-  private editRule($event: Event, rule: NotificationRule, isAdd = false, isCopy = false) {
+  private editRule($event: Event, rule: NotificationRule, isAdd = false, isCopy = false): Observable<NotificationRule> {
-    if ($event) {
+    $event?.stopPropagation();
-      $event.stopPropagation();
+    return this.dialog.open<RuleNotificationDialogComponent, RuleNotificationDialogData,
-    }
-    this.dialog.open<RuleNotificationDialogComponent, RuleNotificationDialogData,
       NotificationRule>(RuleNotificationDialogComponent, {
       disableClose: true,
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
@@ -123,21 +124,7 @@ export class RuleTableConfigResolver  {
         isCopy,
         rule
       }
-    }).afterClosed()
+    }).afterClosed();
-      .subscribe((res) => {
-        if (res) {
-          this.config.updateData();
-        }
-      });
-  }
-
-  private onTargetAction(action: EntityAction<NotificationRule>): boolean {
-    switch (action.action) {
-      case 'add':
-        this.editRule(action.event, action.entity, true);
-        return true;
-    }
-    return false;
   }
 
   private toggleEnableMode($event: Event, rule: NotificationRule): void {

ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.html

@@ -1,24 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="flex flex-full flex-row items-center justify-end">
-  <button mat-stroked-button color="primary" (click)="createTarget($event)">
-    <div class="flex flex-row items-center justify-start">
-      <mat-icon>add</mat-icon>{{ 'notification.add-rule' | translate }}
-    </div>
-  </button>
-</div>

ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.scss

@@ -1,18 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host{
-  width: 10000px;
-}

ui-ngx/src/app/modules/home/pages/notification/rule/rule-table-header.component.ts

@@ -1,38 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component } from '@angular/core';
-import { EntityTableHeaderComponent } from '@home/components/entity/entity-table-header.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { NotificationRule } from '@shared/models/notification.models';
-
-@Component({
-  selector: 'tb-rule-table-header',
-  templateUrl: './rule-table-header.component.html',
-  styleUrls: ['rule-table-header.component.scss']
-})
-export class RuleTableHeaderComponent extends EntityTableHeaderComponent<NotificationRule> {
-
-  constructor(protected store: Store<AppState>) {
-    super(store);
-  }
-
-  createTarget($event: Event) {
-    this.entitiesTableConfig.onEntityAction({event: $event, action: 'add', entity: null});
-  }
-
-}

ui-ngx/src/app/modules/home/pages/notification/template/template-table-config.resolver.ts

@@ -24,17 +24,16 @@ import { EntityType, EntityTypeResource, entityTypeTranslations } from '@shared/
 import { Direction } from '@shared/models/page/sort-order';
 import { NotificationTemplate, NotificationTemplateTypeTranslateMap } from '@shared/models/notification.models';
 import { NotificationService } from '@core/http/notification.service';
-import { EntityAction } from '@home/models/entity/entity-component.models';
 import { MatDialog } from '@angular/material/dialog';
 import {
   TemplateNotificationDialogComponent,
   TemplateNotificationDialogData
 } from '@home/pages/notification/template/template-notification-dialog.component';
 import { TranslateService } from '@ngx-translate/core';
-import { TemplateTableHeaderComponent } from '@home/pages/notification/template/template-table-header.component';
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
 import { DatePipe } from '@angular/common';
+import { Observable } from 'rxjs';
 
 @Injectable()
 export class TemplateTableConfigResolver  {
@@ -48,12 +47,14 @@ export class TemplateTableConfigResolver  {
 
     this.config.entityType = EntityType.NOTIFICATION_TEMPLATE;
     this.config.detailsPanelEnabled = false;
-    this.config.addEnabled = false;
+    this.config.addAsTextButton = true;
     this.config.rowPointer = true;
 
     this.config.entityTranslations = entityTypeTranslations.get(EntityType.NOTIFICATION_TEMPLATE);
     this.config.entityResources = {} as EntityTypeResource<NotificationTemplate>;
 
+    this.config.addEntity = () => this.editTemplate(null, null, true);
+
     this.config.entitiesFetchFunction = pageLink => this.notificationService.getNotificationTemplates(pageLink);
 
     this.config.deleteEntityTitle = template => this.translate.instant('notification.delete-template-title', {templateName: template.name});
@@ -64,13 +65,14 @@ export class TemplateTableConfigResolver  {
 
     this.config.cellActionDescriptors = this.configureCellActions();
 
-    this.config.headerComponent = TemplateTableHeaderComponent;
-    this.config.onEntityAction = action => this.onTemplateAction(action);
-
     this.config.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
 
     this.config.handleRowClick = ($event, template) => {
-      this.editTemplate($event, template);
+      this.editTemplate($event, template).subscribe((res) => {
+        if (res) {
+          this.config.updateData();
+        }
+      });
       return true;
     };
 
@@ -82,7 +84,7 @@ export class TemplateTableConfigResolver  {
     );
   }
 
-  resolve(route: ActivatedRouteSnapshot): EntityTableConfig<NotificationTemplate> {
+  resolve(_route: ActivatedRouteSnapshot): EntityTableConfig<NotificationTemplate> {
     return this.config;
   }
 
@@ -97,11 +99,9 @@ export class TemplateTableConfigResolver  {
     ];
   }
 
-  private editTemplate($event: Event, template: NotificationTemplate, isAdd = false, isCopy = false) {
+  private editTemplate($event: Event, template: NotificationTemplate, isAdd = false, isCopy = false): Observable<NotificationTemplate> {
-    if ($event) {
+    $event?.stopPropagation();
-      $event.stopPropagation();
+    return this.dialog.open<TemplateNotificationDialogComponent, TemplateNotificationDialogData,
-    }
-    this.dialog.open<TemplateNotificationDialogComponent, TemplateNotificationDialogData,
       NotificationTemplate>(TemplateNotificationDialogComponent, {
       disableClose: true,
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
@@ -110,21 +110,6 @@ export class TemplateTableConfigResolver  {
         isCopy,
         template
       }
-    }).afterClosed()
+    }).afterClosed();
-      .subscribe((res) => {
-        if (res) {
-          this.config.updateData();
-        }
-      });
   }
-
-  private onTemplateAction(action: EntityAction<NotificationTemplate>): boolean {
-    switch (action.action) {
-      case 'add':
-        this.editTemplate(action.event, action.entity, true);
-        return true;
-    }
-    return false;
-  }
-
 }

ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.html

@@ -1,24 +0,0 @@
-<!--
-
-    Copyright © 2016-2024 The Thingsboard Authors
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-        http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-
--->
-<div class="flex flex-full flex-row items-center justify-end">
-  <button mat-stroked-button color="primary" (click)="createTemplate($event)">
-    <div class="flex flex-row items-center justify-start">
-      <mat-icon>add</mat-icon>{{ 'notification.add-template' | translate }}
-    </div>
-  </button>
-</div>

ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.scss

@@ -1,18 +0,0 @@
-/**
- * Copyright © 2016-2024 The Thingsboard Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-:host{
-  width: 10000px;
-}

ui-ngx/src/app/modules/home/pages/notification/template/template-table-header.component.ts

@@ -1,38 +0,0 @@
-///
-/// Copyright © 2016-2024 The Thingsboard Authors
-///
-/// Licensed under the Apache License, Version 2.0 (the "License");
-/// you may not use this file except in compliance with the License.
-/// You may obtain a copy of the License at
-///
-///     http://www.apache.org/licenses/LICENSE-2.0
-///
-/// Unless required by applicable law or agreed to in writing, software
-/// distributed under the License is distributed on an "AS IS" BASIS,
-/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-/// See the License for the specific language governing permissions and
-/// limitations under the License.
-///
-
-import { Component } from '@angular/core';
-import { EntityTableHeaderComponent } from '@home/components/entity/entity-table-header.component';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { NotificationTemplate } from '@shared/models/notification.models';
-
-@Component({
-  selector: 'tb-template-table-header',
-  templateUrl: './template-table-header.component.html',
-  styleUrls: ['template-table-header.component.scss']
-})
-export class TemplateTableHeaderComponent extends EntityTableHeaderComponent<NotificationTemplate> {
-
-  constructor(protected store: Store<AppState>) {
-    super(store);
-  }
-
-  createTemplate($event: Event) {
-    this.entitiesTableConfig.onEntityAction({event: $event, action: 'add', entity: null});
-  }
-
-}

ui-ngx/src/app/shared/models/entity-type.models.ts

@@ -403,7 +403,8 @@ export const entityTypeTranslations = new Map<EntityType | AliasEntityType, Enti
         list: 'entity.list-of-notification-rules',
         noEntities: 'notification.no-rules-notification',
         search: 'notification.search-rules',
-        selectedEntities: 'notification.selected-rules'
+        selectedEntities: 'notification.selected-rules',
+        add: 'notification.add-rule'
       }
     ],
     [
@@ -414,7 +415,8 @@ export const entityTypeTranslations = new Map<EntityType | AliasEntityType, Enti
         list: 'entity.list-of-notification-targets',
         noEntities: 'notification.no-recipients-notification',
         search: 'notification.search-recipients',
-        selectedEntities: 'notification.selected-recipients'
+        selectedEntities: 'notification.selected-recipients',
+        add: 'notification.add-recipients'
       }
     ],
     [
@@ -425,7 +427,8 @@ export const entityTypeTranslations = new Map<EntityType | AliasEntityType, Enti
         list: 'entity.list-of-notification-templates',
         noEntities: 'notification.no-notification-templates',
         search: 'notification.search-templates',
-        selectedEntities: 'notification.selected-template'
+        selectedEntities: 'notification.selected-template',
+        add: 'notification.add-template'
       }
     ],
     [