From c836b67ceb5e6d542c0e2a56281f6f2eb47bd424 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 7 Apr 2026 17:01:13 +0300
Subject: [PATCH] Make all IoT Hub dialogs extend DialogComponent

- TbIotHubItemDetailDialogComponent extends DialogComponent
- TbIotHubInstallDialogComponent extends DialogComponent
- TbIotHubUpdateDialogComponent extends DialogComponent
- TbIotHubDeleteDialogComponent extends DialogComponent<T, boolean>
- TbIotHubAddItemDialogComponent extends DialogComponent<T, IotHubAddItemDialogResult>
- TbDeviceInstallDialogComponent extends DialogComponent
- All inject Store<AppState> and Router, call super() in constructor
- Dialogs now auto-close on navigation (inherited from DialogComponent)
- Item card/detail dialog: show installed chip / hide Add in add mode
---
 .../device-install-dialog.component.ts           | 14 +++++++++++---
 .../iot-hub/iot-hub-add-item-dialog.component.ts | 11 +++++++++--
 .../iot-hub/iot-hub-delete-dialog.component.ts   | 16 ++++++++++++----
 .../iot-hub/iot-hub-install-dialog.component.ts  | 11 ++++++++---
 .../iot-hub/iot-hub-item-card.component.html     | 12 ++++++++++--
 .../iot-hub-item-detail-dialog.component.html    | 16 ++++++++++------
 .../iot-hub-item-detail-dialog.component.ts      | 11 ++++++++---
 .../iot-hub/iot-hub-update-dialog.component.ts   | 14 ++++++++++----
 8 files changed, 78 insertions(+), 27 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts
index 969729405b..24aaba4d6d 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts
@@ -16,6 +16,10 @@
 
 import { ChangeDetectorRef, Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
 import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatStepper } from '@angular/material/stepper';
 import { firstValueFrom } from 'rxjs';
@@ -70,7 +74,7 @@ const ENTITY_STEP_MIN_DELAY = 2000;
   templateUrl: './device-install-dialog.component.html',
   styleUrls: ['./device-install-dialog.component.scss']
 })
-export class TbDeviceInstallDialogComponent implements OnInit {
+export class TbDeviceInstallDialogComponent extends DialogComponent<TbDeviceInstallDialogComponent> implements OnInit {
 
   @ViewChild('installStepper', {static: false}) stepper: MatStepper;
 
@@ -95,15 +99,19 @@ export class TbDeviceInstallDialogComponent implements OnInit {
   positionalOutputs = new Map<number, EntityStepOutput>();
 
   constructor(
+    protected store: Store<AppState>,
+    protected router: Router,
+    protected dialogRef: MatDialogRef<TbDeviceInstallDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: DeviceInstallDialogData,
-    private dialogRef: MatDialogRef<TbDeviceInstallDialogComponent>,
     private cdr: ChangeDetectorRef,
     private deviceProfileService: DeviceProfileService,
     private deviceService: DeviceService,
     private dashboardService: DashboardService,
     private ruleChainService: RuleChainService,
     private iotHubApiService: IotHubApiService
-  ) {}
+  ) {
+    super(store, router, dialogRef);
+  }
 
   async ngOnInit(): Promise<void> {
     try {
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.ts
index e931710e1d..e83580e271 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.ts
@@ -16,6 +16,10 @@
 
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
 import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
 import { ItemType, itemTypeTranslations } from '@shared/models/iot-hub/iot-hub-item.models';
 import { IotHubApiService } from '@core/http/iot-hub-api.service';
@@ -41,20 +45,23 @@ export interface IotHubAddItemDialogResult {
   templateUrl: './iot-hub-add-item-dialog.component.html',
   styleUrls: ['./iot-hub-add-item-dialog.component.scss']
 })
-export class TbIotHubAddItemDialogComponent {
+export class TbIotHubAddItemDialogComponent extends DialogComponent<TbIotHubAddItemDialogComponent, IotHubAddItemDialogResult> {
 
   itemType: ItemType;
   itemSubType: string;
   isInstalling = false;
 
   constructor(
+    protected store: Store<AppState>,
+    protected router: Router,
+    protected dialogRef: MatDialogRef<TbIotHubAddItemDialogComponent, IotHubAddItemDialogResult>,
     @Inject(MAT_DIALOG_DATA) public data: IotHubAddItemDialogData,
-    private dialogRef: MatDialogRef<TbIotHubAddItemDialogComponent>,
     private translate: TranslateService,
     private iotHubApiService: IotHubApiService,
     private dialogService: DialogService,
     private iotHubActions: IotHubActionsService
   ) {
+    super(store, router, dialogRef);
     this.itemType = data.itemType;
     this.itemSubType = data.itemSubType;
   }
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-delete-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-delete-dialog.component.ts
index e327cd234a..4353f1a9f6 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-delete-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-delete-dialog.component.ts
@@ -16,6 +16,10 @@
 
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
 
 export interface IotHubDeleteDialogData {
   itemName: string;
@@ -28,12 +32,16 @@ export interface IotHubDeleteDialogData {
   templateUrl: './iot-hub-delete-dialog.component.html',
   styleUrls: ['./iot-hub-delete-dialog.component.scss']
 })
-export class TbIotHubDeleteDialogComponent {
+export class TbIotHubDeleteDialogComponent extends DialogComponent<TbIotHubDeleteDialogComponent, boolean> {
 
   constructor(
-    @Inject(MAT_DIALOG_DATA) public data: IotHubDeleteDialogData,
-    private dialogRef: MatDialogRef<TbIotHubDeleteDialogComponent>
-  ) {}
+    protected store: Store<AppState>,
+    protected router: Router,
+    protected dialogRef: MatDialogRef<TbIotHubDeleteDialogComponent, boolean>,
+    @Inject(MAT_DIALOG_DATA) public data: IotHubDeleteDialogData
+  ) {
+    super(store, router, dialogRef);
+  }
 
   confirm(): void {
     this.dialogRef.close(true);
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.ts
index 3d27e598f5..1e8955a0b7 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.ts
@@ -17,6 +17,9 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
 import { MpItemVersionView } from '@shared/models/iot-hub/iot-hub-version.models';
 import { ItemType, itemTypeTranslations } from '@shared/models/iot-hub/iot-hub-item.models';
 import {
@@ -42,7 +45,7 @@ export type InstallState = 'select-entity' | 'confirm' | 'installing' | 'success
   templateUrl: './iot-hub-install-dialog.component.html',
   styleUrls: ['./iot-hub-install-dialog.component.scss']
 })
-export class TbIotHubInstallDialogComponent {
+export class TbIotHubInstallDialogComponent extends DialogComponent<TbIotHubInstallDialogComponent> {
 
   private static readonly ITEM_TYPE_TO_ENTITY_TYPE: Record<string, EntityType> = {
     'WIDGET': EntityType.WIDGET_TYPE,
@@ -63,13 +66,15 @@ export class TbIotHubInstallDialogComponent {
   defaultCfEntityType = EntityType.DEVICE_PROFILE;
 
   constructor(
+    protected store: Store<AppState>,
+    protected router: Router,
+    protected dialogRef: MatDialogRef<TbIotHubInstallDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: IotHubInstallDialogData,
-    private dialogRef: MatDialogRef<TbIotHubInstallDialogComponent>,
     private dialog: MatDialog,
-    private router: Router,
     private translate: TranslateService,
     private iotHubApiService: IotHubApiService
   ) {
+    super(store, router, dialogRef);
     this.item = data.item;
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html
index 410a88bb3f..cca6402cde 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html
@@ -35,7 +35,11 @@
       </div>
     </div>
     @if (mode === 'add') {
-      <button class="tb-iot-hub-card-install-btn" (click)="onAddClick($event)">{{ 'action.add' | translate }}</button>
+      @if (isInstalled()) {
+        <span class="tb-iot-hub-card-installed-chip"><tb-icon>check</tb-icon>{{ 'iot-hub.installed' | translate }}</span>
+      } @else {
+        <button class="tb-iot-hub-card-install-btn" (click)="onAddClick($event)">{{ 'action.add' | translate }}</button>
+      }
     } @else if (isInstalled()) {
       @if (isSameVersion()) {
         <span class="tb-iot-hub-card-installed-chip"><tb-icon>check</tb-icon>{{ 'iot-hub.installed' | translate }}</span>
@@ -79,7 +83,11 @@
         </span>
         <span class="tb-iot-hub-card-stats">
           @if (mode === 'add') {
-            <button class="tb-iot-hub-card-install-btn" (click)="onAddClick($event)">{{ 'action.add' | translate }}</button>
+            @if (isInstalled()) {
+              <span class="tb-iot-hub-card-installed-chip"><tb-icon>check</tb-icon>{{ 'iot-hub.installed' | translate }}</span>
+            } @else {
+              <button class="tb-iot-hub-card-install-btn" (click)="onAddClick($event)">{{ 'action.add' | translate }}</button>
+            }
           } @else if (isInstalled()) {
             @if (isSameVersion()) {
               <span class="tb-iot-hub-card-installed-chip"><tb-icon>check</tb-icon>{{ 'iot-hub.installed' | translate }}</span>
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html
index fe6e070b5b..18a1da0554 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.html
@@ -80,9 +80,11 @@
           </div>
           <div class="dlg-info-actions">
             @if (mode === 'add') {
-              <button mat-flat-button color="primary" (click)="addItem()">
-                {{ 'action.add' | translate }}
-              </button>
+              @if (!isInstalled()) {
+                <button mat-flat-button color="primary" (click)="addItem()">
+                  {{ 'action.add' | translate }}
+                </button>
+              }
             } @else {
               @if (!isInstalled()) {
                 <button mat-flat-button color="primary" (click)="install()">
@@ -199,9 +201,11 @@
             <!-- Action buttons -->
             <div class="dlg-info-actions">
               @if (mode === 'add') {
-                <button mat-flat-button color="primary" (click)="addItem()">
-                  {{ 'action.add' | translate }}
-                </button>
+                @if (!isInstalled()) {
+                  <button mat-flat-button color="primary" (click)="addItem()">
+                    {{ 'action.add' | translate }}
+                  </button>
+                }
               } @else {
                 @if (!isInstalled()) {
                   <button mat-flat-button color="primary" (click)="install()">
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.ts
index 8fd5fdcae7..f26bfdb21f 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-detail-dialog.component.ts
@@ -17,6 +17,9 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
 import { MpItemVersionView, cfTypeTranslations, cfTypeIcons, ruleChainTypeTranslations, widgetTypeTranslations, nodeComponentTypeTranslations, NodeInfo } from '@shared/models/iot-hub/iot-hub-version.models';
 import { ItemType, itemTypeTranslations, getCategoriesForType, useCaseTranslations } from '@shared/models/iot-hub/iot-hub-item.models';
 import { IotHubInstalledItem } from '@shared/models/iot-hub/iot-hub-installed-item.models';
@@ -45,7 +48,7 @@ export interface IotHubItemDetailDialogData {
   templateUrl: './iot-hub-item-detail-dialog.component.html',
   styleUrls: ['./iot-hub-item-detail-dialog.component.scss']
 })
-export class TbIotHubItemDetailDialogComponent {
+export class TbIotHubItemDetailDialogComponent extends DialogComponent<TbIotHubItemDetailDialogComponent> {
 
   readonly ItemType = ItemType;
   item: MpItemVersionView;
@@ -60,13 +63,15 @@ export class TbIotHubItemDetailDialogComponent {
   private useCaseMap = useCaseTranslations;
 
   constructor(
+    protected store: Store<AppState>,
+    protected router: Router,
+    protected dialogRef: MatDialogRef<TbIotHubItemDetailDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: IotHubItemDetailDialogData,
-    private dialogRef: MatDialogRef<TbIotHubItemDetailDialogComponent>,
     private dialog: MatDialog,
-    private router: Router,
     private translate: TranslateService,
     private iotHubApiService: IotHubApiService
   ) {
+    super(store, router, dialogRef);
     this.item = data.item;
     this.mode = data.mode || 'default';
     this.installedItem = data.installedItem;
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-update-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-update-dialog.component.ts
index bb18a0cc72..a88ae89502 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-update-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-update-dialog.component.ts
@@ -17,6 +17,9 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { DialogComponent } from '@shared/components/dialog.component';
 import { ItemType, itemTypeTranslations } from '@shared/models/iot-hub/iot-hub-item.models';
 import {
   IotHubInstalledItemDescriptor,
@@ -45,7 +48,7 @@ export type UpdateState = 'confirm' | 'updating' | 'success' | 'error';
   templateUrl: './iot-hub-update-dialog.component.html',
   styleUrls: ['./iot-hub-update-dialog.component.scss']
 })
-export class TbIotHubUpdateDialogComponent {
+export class TbIotHubUpdateDialogComponent extends DialogComponent<TbIotHubUpdateDialogComponent> {
 
   private static readonly ITEM_TYPE_TO_ENTITY_TYPE: Record<string, EntityType> = {
     'WIDGET': EntityType.WIDGET_TYPE,
@@ -61,14 +64,17 @@ export class TbIotHubUpdateDialogComponent {
   entityDetailsUrl: string | null = null;
 
   constructor(
+    protected store: Store<AppState>,
+    protected router: Router,
+    protected dialogRef: MatDialogRef<TbIotHubUpdateDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: IotHubUpdateDialogData,
-    private dialogRef: MatDialogRef<TbIotHubUpdateDialogComponent>,
     private dialog: MatDialog,
     private dialogService: DialogService,
-    private router: Router,
     private translate: TranslateService,
     private iotHubApiService: IotHubApiService
-  ) {}
+  ) {
+    super(store, router, dialogRef);
+  }
 
   getTypeLabel(): string {
     const key = this.typeTranslations.get(this.data.itemType);