From af1b888cf01a6b563fb9c100d230cb834be19270 Mon Sep 17 00:00:00 2001
From: dshvaika <dshvaika@thingsboard.io>
Date: Mon, 25 May 2026 15:03:08 +0300
Subject: [PATCH] fix(iot-hub): polish rule chain install dialog layout and
 copy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Group the slide-toggle and the conditionally rendered profile
  pickers in a single bordered card via tb-form-panel.stroked,
  matching the 4.3 entity-aggregation 'Apply await timeout' pattern.
- Set the toggle's class to 'mat-slide flex' to match the canonical
  TB idiom; switch the tooltip label to plain interpolation.
- Restore the trailing '?' in install-confirm-title — the confirm
  step is still a real confirmation question for item types that
  don't go through the select-entity flow.
---
 .../iot-hub-install-dialog.component.html     | 50 +++++++++----------
 .../assets/locale/locale.constant-en_US.json  |  2 +-
 2 files changed, 26 insertions(+), 26 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 b144c3f35d..102a55ad5e 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
@@ -25,34 +25,34 @@
       <h2 class="tb-iot-hub-install-title">{{ 'iot-hub.install-confirm-title' | translate:{ name: item.name } }}</h2>
       @if (item.type === ItemType.RULE_CHAIN) {
         <p class="tb-iot-hub-install-desc">{{ 'iot-hub.rule-chain-install-subtitle' | translate }}</p>
-        <form [formGroup]="ruleChainInstallForm" class="flex flex-col gap-3">
-          <div class="tb-form-row">
-            <mat-slide-toggle class="mat-slide" formControlName="setAsDefault">
-              <div tb-hint-tooltip-icon="{{ 'iot-hub.rule-chain-set-as-profile-default-tooltip' | translate }}" translate>
-                iot-hub.rule-chain-set-as-profile-default-toggle
+        <form [formGroup]="ruleChainInstallForm">
+          <div class="tb-form-panel stroked">
+            <mat-slide-toggle class="mat-slide flex" formControlName="setAsDefault">
+              <div tb-hint-tooltip-icon="{{ 'iot-hub.rule-chain-set-as-profile-default-tooltip' | translate }}">
+                {{ 'iot-hub.rule-chain-set-as-profile-default-toggle' | translate }}
               </div>
             </mat-slide-toggle>
+            @if (ruleChainInstallForm.controls.setAsDefault.value) {
+              <div class="flex flex-row gap-4 xs:flex-col xs:gap-0">
+                <tb-entity-type-select
+                  class="flex-1"
+                  appearance="outline"
+                  [showLabel]="true"
+                  [required]="true"
+                  [allowedEntityTypes]="[EntityType.DEVICE_PROFILE, EntityType.ASSET_PROFILE]"
+                  [filterAllowedEntityTypes]="false"
+                  formControlName="entityType">
+                </tb-entity-type-select>
+                <tb-entity-autocomplete
+                  class="flex-1"
+                  appearance="outline"
+                  [required]="true"
+                  [entityType]="ruleChainInstallForm.controls.entityType.value"
+                  formControlName="entityId">
+                </tb-entity-autocomplete>
+              </div>
+            }
           </div>
-          @if (ruleChainInstallForm.controls.setAsDefault.value) {
-            <div class="flex flex-row gap-4 xs:flex-col xs:gap-0">
-              <tb-entity-type-select
-                class="flex-1"
-                appearance="outline"
-                [showLabel]="true"
-                [required]="true"
-                [allowedEntityTypes]="[EntityType.DEVICE_PROFILE, EntityType.ASSET_PROFILE]"
-                [filterAllowedEntityTypes]="false"
-                formControlName="entityType">
-              </tb-entity-type-select>
-              <tb-entity-autocomplete
-                class="flex-1"
-                appearance="outline"
-                [required]="true"
-                [entityType]="ruleChainInstallForm.controls.entityType.value"
-                formControlName="entityId">
-              </tb-entity-autocomplete>
-            </div>
-          }
         </form>
       } @else {
         @if (activeSelectEntityConfig?.promptKey) {
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 7444a27506..73a7dce751 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3802,7 +3802,7 @@
         "changelog": "Changelog",
         "created-by": "Created by {{name}}",
         "install-confirm": "Install {{name}} v{{version}}?",
-        "install-confirm-title": "Install '{{name}}'",
+        "install-confirm-title": "Install '{{name}}'?",
         "install-desc": "Installing this will automatically create and configure the necessary resources within your tenant",
         "install-success-desc": "'{{name}}' has been installed successfully",
         "remove": "Remove",