From be1fcd50afb572f37974c372ec97ffe5d4242c47 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 24 Apr 2026 17:58:21 +0300
Subject: [PATCH] feat(iot-hub): render solution template install/update errors
 as markdown

Install and update dialogs now render error details via tb-markdown
when the failing item is a SOLUTION_TEMPLATE, falling back to the plain
text block for other item types. Supports the rich instruction-style
error messages returned by the solution install flow.
---
 .../iot-hub/iot-hub-install-dialog.component.html         | 8 +++++++-
 .../iot-hub/iot-hub-install-dialog.component.scss         | 6 ++++++
 .../iot-hub/iot-hub-install-dialog.component.ts           | 2 ++
 .../iot-hub/iot-hub-update-dialog.component.html          | 8 +++++++-
 .../components/iot-hub/iot-hub-update-dialog.component.ts | 2 ++
 5 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.html
index d76e36233f..0bae4f8d60 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.html
@@ -44,7 +44,13 @@
     @case ('error') {
       <h2 class="tb-iot-hub-install-title">{{ 'iot-hub.install-error-title' | translate }}</h2>
       <p class="tb-iot-hub-install-desc">{{ 'iot-hub.install-error-message' | translate:{ name: item.name } }}</p>
-      <div class="tb-iot-hub-error-details">{{ errorMessage }}</div>
+      @if (item?.type === ItemType.SOLUTION_TEMPLATE) {
+        <tb-markdown class="tb-iot-hub-error-details-markdown" [data]="errorMessage"></tb-markdown>
+      } @else {
+        <div class="tb-iot-hub-error-details">
+          {{ errorMessage }}
+        </div>
+      }
     }
   }
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.scss
index e3deca2ca6..bf04778bcd 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-install-dialog.component.scss
@@ -43,3 +43,9 @@
   white-space: pre-wrap;
   word-break: break-word;
 }
+
+.tb-iot-hub-error-details-markdown {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 8px;
+  padding-bottom: 24px;
+}
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 65d7eed406..44e4d1a601 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
@@ -44,6 +44,8 @@ export type InstallState = 'select-entity' | 'confirm' | 'installing' | 'success
 })
 export class TbIotHubInstallDialogComponent extends DialogComponent<TbIotHubInstallDialogComponent> {
 
+  ItemType = ItemType;
+
   item: MpItemVersionView;
   typeTranslations = itemTypeTranslations;
   state: InstallState = 'confirm';
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-update-dialog.component.html b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-update-dialog.component.html
index 65ec2f4635..e21abb8663 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-update-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/iot-hub-update-dialog.component.html
@@ -32,7 +32,13 @@
     @case ('error') {
       <h2 class="tb-iot-hub-install-title">{{ 'iot-hub.update-error-title' | translate }}</h2>
       <p class="tb-iot-hub-install-desc">{{ 'iot-hub.update-error-message' | translate:{ name: data.itemName } }}</p>
-      <div class="tb-iot-hub-error-details">{{ errorMessage }}</div>
+      @if (data?.itemType === ItemType.SOLUTION_TEMPLATE) {
+        <tb-markdown class="tb-iot-hub-error-details-markdown" [data]="errorMessage"></tb-markdown>
+      } @else {
+        <div class="tb-iot-hub-error-details">
+          {{ errorMessage }}
+        </div>
+      }
     }
   }
 </div>
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 d430242400..71f7b93716 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
@@ -46,6 +46,8 @@ export type UpdateState = 'confirm' | 'updating' | 'success' | 'error';
 })
 export class TbIotHubUpdateDialogComponent extends DialogComponent<TbIotHubUpdateDialogComponent> {
 
+  ItemType = ItemType;
+
   typeTranslations = itemTypeTranslations;
   state: UpdateState = 'confirm';
   errorMessage = '';