From 9f4efda2e88afed39f6ef655dc279da11aa6cab4 Mon Sep 17 00:00:00 2001
From: Andrii Shvaika <ashvayka@thingsboard.io>
Date: Wed, 6 May 2026 12:25:52 +0300
Subject: [PATCH] feat(iot-hub): render ${item-link} cards in device install
 instructions

---
 .../device-install-dialog.component.html              |  1 +
 .../device-install-dialog.component.ts                | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html
index 22705663c8..93a5f5ea19 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.html
@@ -24,6 +24,7 @@
       @case ('instruction') {
         <div class="tb-device-install-instruction" #instructionContainer>
           <tb-markdown [data]="ws.markdown"
+                       [additionalCompileModules]="itemLinkCompileModules"
                        (ready)="onMarkdownReady(instructionContainer)">
           </tb-markdown>
         </div>
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 c042db2ebe..8c9f7b3662 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
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, Inject, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, OnInit, Type, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
@@ -34,6 +34,8 @@ import { AttributeService } from '@core/http/attribute.service';
 import { AttributeScope } from '@shared/models/telemetry/telemetry.models';
 import { EntityId } from '@shared/models/id/entity-id';
 import { generateSecret } from '@core/utils';
+import { IotHubItemLinkModule } from '../iot-hub-item-link-card/iot-hub-item-link.module';
+import { ITEM_LINK_KEY_REGEX, itemLinkCardTag } from '../iot-hub-markdown.utils';
 import {
   installMethodLabels as INSTALL_METHOD_LABELS,
   peOnlyInstallMethods,
@@ -88,6 +90,8 @@ export class TbDeviceInstallDialogComponent extends DialogComponent<TbDeviceInst
 
   @ViewChild('installStepper', {static: false}) stepper: MatStepper;
 
+  readonly itemLinkCompileModules: Type<any>[] = [IotHubItemLinkModule];
+
   loading = true;
   packageInfo: DevicePackageInfo;
   zipFiles = new Map<string, string>();
@@ -444,6 +448,11 @@ export class TbDeviceInstallDialogComponent extends DialogComponent<TbDeviceInst
       if (key === 'gateway.downloadButton') {
         return '<a href="#" data-action="download-gateway-docker-compose" class="tb-download-btn">⬇ Download docker-compose.yml</a>';
       }
+      // IoT Hub item link card: ${item-link:<uuid>}
+      const itemLinkMatch = key.match(ITEM_LINK_KEY_REGEX);
+      if (itemLinkMatch) {
+        return itemLinkCardTag(itemLinkMatch[1]);
+      }
       // Callout boxes: ${note(...)}, ${warn(...)}, ${error(...)}
       const calloutMatch = key.match(/^(note|warn|error)\((.+)\)$/s);
       if (calloutMatch) {