Add "Add from IoT Hub" to dashboards page and reusable add item dialog

- Add 'add' mode to item card: shows "Add" button, emits addClick
- Add 'add' mode and addItem output to browse component
- Browse passes mode to cards and detail dialog, propagates add results
- New TbIotHubAddItemDialogComponent: fullscreen dialog with embedded browse
  in add mode, installs item via API and returns descriptor
- Add "Add from IoT Hub" menu item to dashboards table config
- On add: installs dashboard, navigates to newly created dashboard
- Add HomeComponentsModule import to IotHubModule

ui-ngx/src/app/modules/home/components/home-components.module.ts

@@ -115,6 +115,7 @@ import { DashboardWidgetSelectComponent } from '@home/components/dashboard-page/
 import { TbIotHubItemDetailDialogComponent } from '@home/components/iot-hub/iot-hub-item-detail-dialog.component';
 import { TbIotHubBrowseComponent } from '@home/components/iot-hub/iot-hub-browse.component';
 import { TbIotHubItemCardComponent } from '@home/components/iot-hub/iot-hub-item-card.component';
+import { TbIotHubAddItemDialogComponent } from '@home/components/iot-hub/iot-hub-add-item-dialog.component';
 import { AddWidgetDialogComponent } from '@home/components/dashboard-page/add-widget-dialog.component';
 import { ManageDashboardLayoutsDialogComponent } from '@home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component';
 import {
@@ -327,6 +328,7 @@ import { SolutionInstallDialogComponent } from '@home/components/solution/soluti
       TbIotHubItemDetailDialogComponent,
       TbIotHubBrowseComponent,
       TbIotHubItemCardComponent,
+      TbIotHubAddItemDialogComponent,
       AddWidgetDialogComponent,
       MoveWidgetsDialogComponent,
       ManageDashboardLayoutsDialogComponent,
@@ -480,6 +482,7 @@ import { SolutionInstallDialogComponent } from '@home/components/solution/soluti
     TbIotHubItemDetailDialogComponent,
     TbIotHubBrowseComponent,
     TbIotHubItemCardComponent,
+    TbIotHubAddItemDialogComponent,
     AddWidgetDialogComponent,
     MoveWidgetsDialogComponent,
     ManageDashboardLayoutsDialogComponent,

ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.html

@@ -0,0 +1,39 @@
+<!--
+
+    Copyright © 2016-2026 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="tb-iot-hub-add-item-dialog">
+  <div class="tb-iot-hub-add-item-header">
+    <h2>{{ getTitle() }}</h2>
+    <button mat-icon-button (click)="close()">
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+  <div class="tb-iot-hub-add-item-content">
+    @if (isInstalling) {
+      <div class="tb-iot-hub-add-item-loading">
+        <mat-spinner diameter="40"></mat-spinner>
+      </div>
+    }
+    <tb-iot-hub-browse
+      [activeType]="itemType"
+      [hideTabs]="true"
+      [embedded]="true"
+      mode="add"
+      (addItem)="onAddItem($event)">
+    </tb-iot-hub-browse>
+  </div>
+</div>

ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.scss

@@ -0,0 +1,55 @@
+/**
+ * Copyright © 2016-2026 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.
+ */
+
+.tb-iot-hub-add-item-dialog {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.tb-iot-hub-add-item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  flex-shrink: 0;
+
+  h2 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 28px;
+    color: rgba(0, 0, 0, 0.87);
+  }
+}
+
+.tb-iot-hub-add-item-content {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.tb-iot-hub-add-item-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.7);
+  z-index: 10;
+}

ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-add-item-dialog.component.ts

@@ -0,0 +1,78 @@
+///
+/// Copyright © 2016-2026 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, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+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';
+import { TranslateService } from '@ngx-translate/core';
+
+export interface IotHubAddItemDialogData {
+  itemType: ItemType;
+  iotHubApiService: IotHubApiService;
+}
+
+export interface IotHubAddItemDialogResult {
+  item: MpItemVersionView;
+  descriptor: any;
+}
+
+@Component({
+  selector: 'tb-iot-hub-add-item-dialog',
+  standalone: false,
+  templateUrl: './iot-hub-add-item-dialog.component.html',
+  styleUrls: ['./iot-hub-add-item-dialog.component.scss']
+})
+export class TbIotHubAddItemDialogComponent {
+
+  itemType: ItemType;
+  isInstalling = false;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: IotHubAddItemDialogData,
+    private dialogRef: MatDialogRef<TbIotHubAddItemDialogComponent>,
+    private translate: TranslateService
+  ) {
+    this.itemType = data.itemType;
+  }
+
+  getTitle(): string {
+    const typeKey = itemTypeTranslations.get(this.itemType);
+    const typeLabel = typeKey ? this.translate.instant(typeKey) : '';
+    return this.translate.instant('iot-hub.add-item-from-iot-hub', { type: typeLabel });
+  }
+
+  onAddItem(item: MpItemVersionView): void {
+    this.isInstalling = true;
+    const versionId = item.id as string;
+    this.data.iotHubApiService.installItemVersion(versionId, { ignoreLoading: true }).subscribe({
+      next: (result) => {
+        this.isInstalling = false;
+        if (result.success) {
+          this.dialogRef.close({ item, descriptor: result.descriptor } as IotHubAddItemDialogResult);
+        }
+      },
+      error: () => {
+        this.isInstalling = false;
+      }
+    });
+  }
+
+  close(): void {
+    this.dialogRef.close();
+  }
+}

ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.html

@@ -210,11 +210,13 @@
               [showTypeChip]="false"
               [showSubtype]="true"
               [showCreator]="!creatorId"
+              [mode]="mode"
               (cardClick)="openItemDetail($event)"
               (creatorClick)="navigateToCreator($event)"
               (installClick)="installItem($event)"
               (updateClick)="updateItem($event)"
-              (deleteClick)="deleteInstalledItem($event)">
+              (deleteClick)="deleteInstalledItem($event)"
+              (addClick)="onItemAdd($event)">
             </tb-iot-hub-item-card>
           }
         </div>

ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
 import { Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { PageLink } from '@shared/models/page/page-link';
@@ -66,6 +66,8 @@ export class TbIotHubBrowseComponent implements OnInit, OnDestroy {
   @Input() creatorId: string;
   @Input() embedded = false;
   @Input() hideTabs = false;
+  @Input() mode: 'default' | 'add' = 'default';
+  @Output() addItem = new EventEmitter<MpItemVersionView>();
   @Input() set activeType(value: ItemType) {
     if (value && value !== this._activeType) {
       this._activeType = value;
@@ -423,16 +425,23 @@ export class TbIotHubBrowseComponent implements OnInit, OnDestroy {
       data: {
         item,
         iotHubApiService: this.iotHubApiService,
-        installedItem: this.getInstalledItem(item)
+        installedItem: this.getInstalledItem(item),
+        mode: this.mode
       } as IotHubItemDetailDialogData
     });
     dialogRef.afterClosed().subscribe(result => {
-      if (result === 'installed' || result === 'updated' || result === 'deleted') {
+      if (result?.action === 'add') {
+        this.addItem.emit(result.item);
+      } else if (result === 'installed' || result === 'updated' || result === 'deleted') {
         this.reloadInstalledItems();
       }
     });
   }
 
+  onItemAdd(item: MpItemVersionView): void {
+    this.addItem.emit(item);
+  }
+
   installItem(item: MpItemVersionView): void {
     if (item.type === ItemType.DEVICE) {
       this.installDevice(item);

ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.html

@@ -34,7 +34,9 @@
         <span class="tb-iot-hub-compact-count">{{ item.totalInstallCount | shortNumber }}</span>
       </div>
     </div>
-    @if (isInstalled()) {
+    @if (mode === 'add') {
+      <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>
         <button class="tb-iot-hub-card-remove-btn" (click)="onDeleteClick($event)">
@@ -76,7 +78,9 @@
           {{ item.totalInstallCount | shortNumber }}
         </span>
         <span class="tb-iot-hub-card-stats">
-          @if (isInstalled()) {
+          @if (mode === 'add') {
+            <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>
               <button class="tb-iot-hub-card-remove-btn" (click)="onDeleteClick($event)">

ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.ts

@@ -38,11 +38,13 @@ export class TbIotHubItemCardComponent {
   @Input() showCreator = true;
   @Input() showTypeChip = true;
   @Input() showSubtype = false;
+  @Input() mode: 'default' | 'add' = 'default';
   @Output() cardClick = new EventEmitter<MpItemVersionView>();
   @Output() creatorClick = new EventEmitter<string>();
   @Output() installClick = new EventEmitter<MpItemVersionView>();
   @Output() updateClick = new EventEmitter<MpItemVersionView>();
   @Output() deleteClick = new EventEmitter<MpItemVersionView>();
+  @Output() addClick = new EventEmitter<MpItemVersionView>();
 
   typeTranslations = itemTypeTranslations;
 
@@ -206,6 +208,11 @@ export class TbIotHubItemCardComponent {
     this.installClick.emit(this.item);
   }
 
+  onAddClick(event: MouseEvent): void {
+    event.stopPropagation();
+    this.addClick.emit(this.item);
+  }
+
   onUpdateClick(event: MouseEvent): void {
     event.stopPropagation();
     this.updateClick.emit(this.item);

ui-ngx/src/app/modules/home/pages/dashboard/dashboards-table-config.resolver.ts

@@ -77,6 +77,13 @@ import {
   EntityAliasesDialogComponent,
   EntityAliasesDialogData
 } from '@home/components/alias/entity-aliases-dialog.component';
+import { ItemType } from '@shared/models/iot-hub/iot-hub-item.models';
+import { IotHubApiService } from '@core/http/iot-hub-api.service';
+import {
+  TbIotHubAddItemDialogComponent,
+  IotHubAddItemDialogData,
+  IotHubAddItemDialogResult
+} from '@home/components/iot-hub/iot-hub-add-item-dialog.component';
 
 @Injectable()
 export class DashboardsTableConfigResolver  {
@@ -90,6 +97,7 @@ export class DashboardsTableConfigResolver  {
               private dialogService: DialogService,
               private homeDialogs: HomeDialogsService,
               private importExport: ImportExportService,
+              private iotHubApiService: IotHubApiService,
               private translate: TranslateService,
               private datePipe: DatePipe,
               private router: Router,
@@ -349,6 +357,12 @@ export class DashboardsTableConfigResolver  {
           icon: 'file_upload',
           isEnabled: () => true,
           onAction: ($event) => this.importDashboard($event)
+        },
+        {
+          name: this.translate.instant('iot-hub.add-from-iot-hub'),
+          icon: 'store',
+          isEnabled: () => true,
+          onAction: ($event) => this.addDashboardFromIotHub($event)
         }
       );
     }
@@ -388,6 +402,26 @@ export class DashboardsTableConfigResolver  {
     }
   }
 
+  addDashboardFromIotHub($event: Event) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    const dialogRef = this.dialog.open(TbIotHubAddItemDialogComponent, {
+      panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+      autoFocus: false,
+      data: {
+        itemType: ItemType.DASHBOARD,
+        iotHubApiService: this.iotHubApiService
+      } as IotHubAddItemDialogData
+    });
+    dialogRef.afterClosed().subscribe((result: IotHubAddItemDialogResult) => {
+      if (result?.descriptor?.type === 'DASHBOARD' && result.descriptor.dashboardId?.id) {
+        this.config.getTable().updateData();
+        this.router.navigateByUrl(`dashboards/${result.descriptor.dashboardId.id}`);
+      }
+    });
+  }
+
   importDashboard(_$event: Event) {
     this.importExport.importDashboard(this.editMissingAliases.bind(this)).subscribe(
       (dashboard) => {

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

@@ -17,6 +17,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
+import { HomeComponentsModule } from '@home/components/home-components.module';
 import { IotHubRoutingModule } from './iot-hub-routing.module';
 import { TbIotHubHomeComponent } from './iot-hub-home.component';
 import { TbIotHubItemsPageComponent } from './iot-hub-items-page.component';
@@ -43,6 +44,7 @@ import { TbIotHubSearchComponent } from './iot-hub-search.component';
   imports: [
     CommonModule,
     SharedModule,
+    HomeComponentsModule,
     IotHubRoutingModule
   ]
 })

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3711,6 +3711,8 @@
         "search-results-for": "Search results for ",
         "try-adjusting-search": "Try adjusting your search",
         "add-widget-from-iot-hub": "Add widget from IoT Hub",
+        "add-item-from-iot-hub": "Add {{ type }} from IoT Hub",
+        "add-from-iot-hub": "Add from IoT Hub",
         "filters": "Filters",
         "type": "Type",
         "items-per-page": "Items per page",