From 797be258bc3a9834996414013390ad40c34fb8d5 Mon Sep 17 00:00:00 2001
From: Andrii Shvaika <ashvayka@thingsboard.io>
Date: Fri, 10 Apr 2026 19:27:34 +0300
Subject: [PATCH] fix(iot-hub): show guide button for all installed devices
 with fallback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Show the guide icon on device cards for ALL installed items, not just
those with installState. If installState is available, opens the
read-only review dialog. If not (items installed before the feature),
falls back to the item detail dialog — same pattern as the installed
items page info button.
---
 .../iot-hub/iot-hub-browse.component.ts       | 46 +++++++++++--------
 .../iot-hub/iot-hub-item-card.component.ts    |  6 +--
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts
index aba7658769..bebc3eb4db 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-browse.component.ts
@@ -30,6 +30,7 @@ import { cfTypeTranslations, widgetTypeTranslations, ruleChainTypeTranslations }
 import { IotHubInstalledItem, DeviceInstalledItemDescriptor } from '@shared/models/iot-hub/iot-hub-installed-item.models';
 import { IotHubApiService } from '@core/http/iot-hub-api.service';
 import { TbDeviceInstallDialogComponent, DeviceInstallDialogData } from './device-install-dialog/device-install-dialog.component';
+import { TbIotHubItemDetailDialogComponent, IotHubItemDetailDialogData } from './iot-hub-item-detail-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -586,24 +587,33 @@ export class TbIotHubBrowseComponent implements OnInit, OnDestroy {
     const installedItem = this.getInstalledItem(item);
     if (!installedItem) { return; }
     const descriptor = installedItem.descriptor as DeviceInstalledItemDescriptor;
-    if (!descriptor?.installState || !descriptor?.selectedInstallMethod) { return; }
-    this.iotHubApiService.getVersionFileData(installedItem.itemVersionId, { ignoreLoading: true, ignoreErrors: true }).subscribe({
-      next: async (blob: Blob) => {
-        const zipData = await blob.arrayBuffer();
-        this.dialog.open(TbDeviceInstallDialogComponent, {
-          panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
-          disableClose: false,
-          autoFocus: false,
-          data: {
-            item,
-            zipData,
-            reviewMode: true,
-            selectedInstallMethod: descriptor.selectedInstallMethod,
-            installState: descriptor.installState
-          } as DeviceInstallDialogData
-        });
-      }
-    });
+    if (descriptor?.installState && descriptor?.selectedInstallMethod) {
+      // Has install state — open review dialog
+      this.iotHubApiService.getVersionFileData(installedItem.itemVersionId, { ignoreLoading: true, ignoreErrors: true }).subscribe({
+        next: async (blob: Blob) => {
+          const zipData = await blob.arrayBuffer();
+          this.dialog.open(TbDeviceInstallDialogComponent, {
+            panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+            disableClose: false,
+            autoFocus: false,
+            data: {
+              item,
+              zipData,
+              reviewMode: true,
+              selectedInstallMethod: descriptor.selectedInstallMethod,
+              installState: descriptor.installState
+            } as DeviceInstallDialogData
+          });
+        }
+      });
+    } else {
+      // No install state — fall back to detail dialog
+      this.dialog.open(TbIotHubItemDetailDialogComponent, {
+        panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+        autoFocus: false,
+        data: { item, installedItem } as IotHubItemDetailDialogData
+      });
+    }
   }
 
   navigateToCreator(creatorId: string): void {
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.ts
index 83c6b54328..6c1d5e4e83 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.ts
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-item-card.component.ts
@@ -225,11 +225,7 @@ export class TbIotHubItemCardComponent {
   }
 
   hasInstallGuide(): boolean {
-    if (!this.installedItem || this.installedItem.itemType !== 'DEVICE') {
-      return false;
-    }
-    const descriptor = this.installedItem.descriptor as any;
-    return !!descriptor?.installState && !!descriptor?.selectedInstallMethod;
+    return !!this.installedItem && this.installedItem.itemType === 'DEVICE';
   }
 
   onGuideClick(event: MouseEvent): void {