From 2397232bf40ee61eb10614140f1c47dd37f0414e Mon Sep 17 00:00:00 2001
From: Andrii Shvaika <ashvayka@thingsboard.io>
Date: Wed, 1 Apr 2026 16:40:08 +0300
Subject: [PATCH] fix(iot-hub): fix device install dialog template and
 translations

- Use correct tb-markdown inputs ([data] and [usePlainMarkdown])
- Fix translation key format (hyphens, not dots)
- Remove unused ConnectivityType import and resolveImageUrl method
- Auto-advance to first step when single connectivity type
- Use inline data URIs for helpImage directly
---
 .../device-install-dialog.component.html       | 18 +++++++++---------
 .../device-install-dialog.component.ts         |  8 +++-----
 .../assets/locale/locale.constant-en_US.json   | 17 ++++++++++++++++-
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/device-install-dialog/device-install-dialog.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/device-install-dialog/device-install-dialog.component.html
index 17bc7a3f91..9971b4e456 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/device-install-dialog/device-install-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/device-install-dialog/device-install-dialog.component.html
@@ -34,7 +34,7 @@
     @switch (currentView) {
       @case ('connectivity') {
         <div class="tb-device-install-connectivity">
-          <p>{{ 'iot-hub.device-install.select-connectivity' | translate }}</p>
+          <p>{{ 'iot-hub.device-install-select-connectivity' | translate }}</p>
           <div class="tb-connectivity-options">
             @for (ct of availableConnectivityTypes; track ct) {
               <button mat-stroked-button
@@ -49,8 +49,8 @@
       }
       @case ('instruction') {
         <div class="tb-device-install-instruction">
-          <tb-markdown [markdownText]="currentMarkdown"
-                       [style]="'doc'">
+          <tb-markdown [data]="currentMarkdown"
+                       [usePlainMarkdown]="true">
           </tb-markdown>
         </div>
       }
@@ -74,7 +74,7 @@
                         }
                       </mat-select>
                       @if (currentFormGroup.controls[field.key]?.hasError('required')) {
-                        <mat-error>{{ 'iot-hub.device-install.field-required' | translate }}</mat-error>
+                        <mat-error>{{ field.label + ' is required' }}</mat-error>
                       }
                     </mat-form-field>
                   }
@@ -88,7 +88,7 @@
                         <mat-icon>{{ passwordVisible[field.key] ? 'visibility_off' : 'visibility' }}</mat-icon>
                       </button>
                       @if (currentFormGroup.controls[field.key]?.hasError('required')) {
-                        <mat-error>{{ 'iot-hub.device-install.field-required' | translate }}</mat-error>
+                        <mat-error>{{ field.label + ' is required' }}</mat-error>
                       }
                       @if (currentFormGroup.controls[field.key]?.hasError('pattern')) {
                         <mat-error>{{ getPatternErrorMessage(field) }}</mat-error>
@@ -100,7 +100,7 @@
                       <mat-label>{{ field.label }}</mat-label>
                       <input matInput type="number" [formControlName]="field.key">
                       @if (currentFormGroup.controls[field.key]?.hasError('required')) {
-                        <mat-error>{{ 'iot-hub.device-install.field-required' | translate }}</mat-error>
+                        <mat-error>{{ field.label + ' is required' }}</mat-error>
                       }
                       @if (currentFormGroup.controls[field.key]?.hasError('pattern')) {
                         <mat-error>{{ getPatternErrorMessage(field) }}</mat-error>
@@ -112,7 +112,7 @@
                       <mat-label>{{ field.label }}</mat-label>
                       <input matInput [formControlName]="field.key">
                       @if (currentFormGroup.controls[field.key]?.hasError('required')) {
-                        <mat-error>{{ 'iot-hub.device-install.field-required' | translate }}</mat-error>
+                        <mat-error>{{ field.label + ' is required' }}</mat-error>
                       }
                       @if (currentFormGroup.controls[field.key]?.hasError('pattern')) {
                         <mat-error>{{ getPatternErrorMessage(field) }}</mat-error>
@@ -124,7 +124,7 @@
                   <div class="tb-form-field-help">{{ field.helpText }}</div>
                 }
                 @if (field.helpImage) {
-                  <img class="tb-form-field-help-image" [src]="resolveImageUrl(field.helpImage)" [alt]="field.label">
+                  <img class="tb-form-field-help-image" [src]="field.helpImage" [alt]="field.label">
                 }
               }
             </form>
@@ -171,7 +171,7 @@
                          [style]="'doc'">
             </tb-markdown>
           } @else {
-            <p class="tb-done-message">{{ 'iot-hub.device-install.success' | translate:{ name: packageInfo?.name } }}</p>
+            <p class="tb-done-message">{{ 'iot-hub.install-success-desc' | translate:{ name: packageInfo?.name } }}</p>
           }
         </div>
       }
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/device-install-dialog/device-install-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/device-install-dialog/device-install-dialog.component.ts
index 4db526fbe4..5df5ba1577 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/device-install-dialog/device-install-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/device-install-dialog/device-install-dialog.component.ts
@@ -25,7 +25,6 @@ import { DeviceService } from '@core/http/device.service';
 import { DashboardService } from '@core/http/dashboard.service';
 import { RuleChainService } from '@core/http/rule-chain.service';
 import {
-  ConnectivityType,
   connectivityTypeTranslations,
   DeviceInstallStep,
   DevicePackageInfo,
@@ -102,6 +101,9 @@ export class TbDeviceInstallDialogComponent implements OnInit {
       );
       if (this.availableConnectivityTypes.length === 1) {
         this.selectedConnectivity = this.availableConnectivityTypes[0];
+        this.steps = this.packageInfo.installSteps[this.selectedConnectivity] || [];
+        this.currentStepIndex = 0;
+        this.advanceToCurrentStep();
       }
     } catch (e) {
       console.error('Failed to parse device package ZIP', e);
@@ -203,10 +205,6 @@ export class TbDeviceInstallDialogComponent implements OnInit {
     this.runEntitySteps();
   }
 
-  resolveImageUrl(path: string): string {
-    return this.data.iotHubApiService.resolveResourceUrl(path);
-  }
-
   getPatternErrorMessage(field: FormFieldDefinition): string {
     if (field.validators?.length > 0) {
       return field.validators[0].message || 'Invalid format';
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 1435f4c0ee..7f037f2a1e 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3852,7 +3852,22 @@
         "open-installed-entity": "Open installed entity",
         "view-item-details": "View item details",
         "open-item-type-details": "Open {{type}} details",
-        "back-to-marketplace": "Back to Marketplace"
+        "back-to-marketplace": "Back to Marketplace",
+        "device-install-connection": "Connection: {{type}}",
+        "device-install-entity-error": "Failed to create {{name}}: {{error}}",
+        "device-install-expand-image": "Click to expand",
+        "device-install-select-connectivity": "Select your connection type:",
+        "device-install-step-error": "Failed",
+        "device-install-step-pending": "Pending",
+        "device-install-step-running": "Creating...",
+        "device-install-step-success": "Created",
+        "device-install-step-type-DASHBOARD": "Dashboard",
+        "device-install-step-type-DEVICE": "Device",
+        "device-install-step-type-DEVICE_PROFILE": "Device Profile",
+        "device-install-step-type-RULE_CHAIN": "Rule Chain",
+        "device-install-title": "Install \"{{name}}\"",
+        "device-install-complete-title": "Install \"{{name}}\" — Complete",
+        "device-installing-title": "Installing \"{{name}}\""
     },
     "item-data": {
         "widget-type-timeseries": "Timeseries",