From 12905cb0d270b3d5f87a0d987d633e363b317d4d Mon Sep 17 00:00:00 2001
From: dshvaika <dshvaika@thingsboard.io>
Date: Mon, 25 May 2026 14:50:43 +0300
Subject: [PATCH 1/2] feat(iot-hub): single-step install dialog with rule chain
 profile toggle

CF and Rule Chain installs now open directly into the selection form,
skipping the prior "Install?" confirmation step. Rule Chain uses a
single "Set as profile default rule chain" toggle that reveals the
profile pickers when enabled, replacing the previous two-button
design. The overwrite-confirmation step is preserved.

Follow-up to #15645.
---
 .../iot-hub-install-dialog.component.html     | 81 ++++++++++------
 .../iot-hub-install-dialog.component.ts       | 93 +++++++++++++------
 .../assets/locale/locale.constant-en_US.json  |  8 +-
 3 files changed, 118 insertions(+), 64 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 19a43fcb30..b144c3f35d 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
@@ -19,26 +19,55 @@
   @switch (state) {
     @case ('confirm') {
       <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-desc' | translate }}</p>
-      } @else {
-        <p class="tb-iot-hub-install-desc">{{ 'iot-hub.install-desc' | translate }}</p>
-      }
+      <p class="tb-iot-hub-install-desc">{{ 'iot-hub.install-desc' | translate }}</p>
     }
     @case ('select-entity') {
       <h2 class="tb-iot-hub-install-title">{{ 'iot-hub.install-confirm-title' | translate:{ name: item.name } }}</h2>
-      @if (activeSelectEntityConfig?.promptKey) {
-        <p class="tb-iot-hub-install-desc"
-           [innerHTML]="activeSelectEntityConfig.promptKey | translate:{ name: item.name }"></p>
+      @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
+              </div>
+            </mat-slide-toggle>
+          </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) {
+          <p class="tb-iot-hub-install-desc"
+             [innerHTML]="activeSelectEntityConfig.promptKey | translate:{ name: item.name }"></p>
+        }
+        <tb-entity-select
+          [(ngModel)]="selectedEntityId"
+          [allowedEntityTypes]="activeSelectEntityConfig.allowed"
+          [defaultEntityType]="activeSelectEntityConfig.defaultType"
+          [filterAllowedEntityTypes]="false"
+          appearance="outline"
+          [required]="activeSelectEntityConfig.required">
+        </tb-entity-select>
       }
-      <tb-entity-select
-        [(ngModel)]="selectedEntityId"
-        [allowedEntityTypes]="activeSelectEntityConfig.allowed"
-        [defaultEntityType]="activeSelectEntityConfig.defaultType"
-        [filterAllowedEntityTypes]="false"
-        appearance="outline"
-        [required]="activeSelectEntityConfig.required">
-      </tb-entity-select>
     }
     @case ('confirm-overwrite') {
       <h2 class="tb-iot-hub-install-title">{{ 'iot-hub.rule-chain-overwrite-title' | translate }}</h2>
@@ -59,7 +88,7 @@
     @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>
-      @if (item?.type === ItemType.SOLUTION_TEMPLATE) {
+      @if (item.type === ItemType.SOLUTION_TEMPLATE) {
         <tb-iot-hub-markdown class="tb-iot-hub-error-details-markdown" [data]="errorMessage"></tb-iot-hub-markdown>
       } @else {
         <div class="tb-iot-hub-error-details">
@@ -73,28 +102,20 @@
   @switch (state) {
     @case ('confirm') {
       <button mat-button (click)="cancel()">{{ 'action.cancel' | translate }}</button>
-      @if (item.type === ItemType.RULE_CHAIN) {
-        <button mat-stroked-button (click)="install()">{{ 'iot-hub.install' | translate }}</button>
-        <button mat-flat-button color="primary" (click)="installAsEntityProfileDefault()">
-          {{ 'iot-hub.rule-chain-install-as-default' | translate }}
-        </button>
-      } @else {
-        <button mat-flat-button color="primary" (click)="install()">{{ 'iot-hub.install' | translate }}</button>
-      }
+      <button mat-flat-button color="primary" (click)="install()">{{ 'iot-hub.install' | translate }}</button>
     }
     @case ('select-entity') {
       <button mat-button (click)="cancel()">{{ 'action.cancel' | translate }}</button>
       @if (item.type === ItemType.RULE_CHAIN) {
-        <button mat-button (click)="selectEntityBack()">{{ 'action.back' | translate }}</button>
         <button mat-flat-button color="primary"
-                [disabled]="!selectedEntityId"
-                (click)="onSelectEntityInstall()">
+                [disabled]="ruleChainInstallForm.invalid"
+                (click)="onRuleChainInstall()">
           {{ 'iot-hub.install' | translate }}
         </button>
       } @else {
         <button mat-flat-button color="primary"
-                [disabled]="activeSelectEntityConfig?.required && !selectedEntityId"
-                (click)="onSelectEntityInstall()">
+                [disabled]="activeSelectEntityConfig.required && !selectedEntityId"
+                (click)="onEntitySelectInstall()">
           {{ 'iot-hub.install' | translate }}
         </button>
       }
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 be37e6e1bb..6484a32c4b 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
@@ -14,9 +14,11 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject } from '@angular/core';
+import { Component, DestroyRef, Inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { DialogComponent } from '@shared/components/dialog.component';
@@ -70,15 +72,21 @@ export type InstallState =
 export class TbIotHubInstallDialogComponent extends DialogComponent<TbIotHubInstallDialogComponent> {
 
   ItemType = ItemType;
+  EntityType = EntityType;
 
   item: MpItemVersionView;
   typeTranslations = itemTypeTranslations;
-  state: InstallState = 'confirm';
+  state!: InstallState;
   errorMessage = '';
   entityDetailsUrl: string | null = null;
 
   selectedEntityId: EntityId | null = null;
   pendingOverwrite: PendingOverwrite | null = null;
+  ruleChainInstallForm!: FormGroup<{
+    setAsDefault: FormControl<boolean>;
+    entityType: FormControl<EntityType>;
+    entityId: FormControl<string | null>;
+  }>;
 
   private readonly selectEntityConfig: Partial<Record<ItemType, SelectEntityConfig>> = {
     [ItemType.CALCULATED_FIELD]: {
@@ -87,12 +95,6 @@ export class TbIotHubInstallDialogComponent extends DialogComponent<TbIotHubInst
       required: true,
       promptKey: 'iot-hub.select-entity-for-cf',
     },
-    [ItemType.RULE_CHAIN]: {
-      allowed: [EntityType.DEVICE_PROFILE, EntityType.ASSET_PROFILE],
-      defaultType: EntityType.DEVICE_PROFILE,
-      required: true,
-      promptKey: 'iot-hub.select-profile-for-rule-chain',
-    },
   };
 
   get activeSelectEntityConfig(): SelectEntityConfig | null {
@@ -109,10 +111,47 @@ export class TbIotHubInstallDialogComponent extends DialogComponent<TbIotHubInst
     private iotHubApiService: IotHubApiService,
     private deviceProfileService: DeviceProfileService,
     private assetProfileService: AssetProfileService,
-    private ruleChainService: RuleChainService
+    private ruleChainService: RuleChainService,
+    private fb: FormBuilder,
+    private destroyRef: DestroyRef
   ) {
     super(store, router, dialogRef);
     this.item = data.item;
+    this.state = this.computeInitialState();
+    if (this.item.type === ItemType.RULE_CHAIN) {
+      this.initRuleChainForm();
+    }
+  }
+
+  private computeInitialState(): InstallState {
+    return this.activeSelectEntityConfig || this.item.type === ItemType.RULE_CHAIN
+      ? 'select-entity'
+      : 'confirm';
+  }
+
+  private initRuleChainForm(): void {
+    this.ruleChainInstallForm = this.fb.group({
+      setAsDefault: this.fb.nonNullable.control<boolean>(false),
+      entityType: this.fb.nonNullable.control<EntityType>(EntityType.DEVICE_PROFILE),
+      entityId: this.fb.control<string | null>(null)
+    });
+    this.ruleChainInstallForm.controls.setAsDefault.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(setAsDefault => {
+        const entityIdCtrl = this.ruleChainInstallForm.controls.entityId;
+        if (setAsDefault) {
+          entityIdCtrl.setValidators(Validators.required);
+        } else {
+          entityIdCtrl.clearValidators();
+          entityIdCtrl.setValue(null);
+        }
+        entityIdCtrl.updateValueAndValidity();
+      });
+    this.ruleChainInstallForm.controls.entityType.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.ruleChainInstallForm.controls.entityId.setValue(null);
+      });
   }
 
   getTypeLabel(): string {
@@ -120,39 +159,33 @@ export class TbIotHubInstallDialogComponent extends DialogComponent<TbIotHubInst
     return key ? this.translate.instant(key) : '';
   }
 
-  install(): void {
-    if (this.item.type === ItemType.CALCULATED_FIELD) {
-      this.state = 'select-entity';
+  onEntitySelectInstall(): void {
+    if (!this.selectedEntityId) {
       return;
     }
-    this.doInstall();
-  }
-
-  installAsEntityProfileDefault(): void {
-    this.state = 'select-entity';
-  }
-
-  selectEntityBack(): void {
-    this.selectedEntityId = null;
-    this.state = 'confirm';
+    this.install();
   }
 
-  onSelectEntityInstall(): void {
-    if (!this.selectedEntityId) {
+  onRuleChainInstall(): void {
+    const { setAsDefault, entityType, entityId } = this.ruleChainInstallForm.getRawValue();
+    if (!setAsDefault) {
+      this.selectedEntityId = null;
+      this.install();
       return;
     }
-    if (this.item.type !== ItemType.RULE_CHAIN) {
-      this.doInstall();
+    if (!entityId) {
       return;
     }
-    this.resolveOverwrite(this.selectedEntityId).subscribe({
+    const profileEntityId: EntityId = { entityType, id: entityId };
+    this.selectedEntityId = profileEntityId;
+    this.resolveOverwrite(profileEntityId).subscribe({
       next: (pending) => {
         if (pending) {
           this.pendingOverwrite = pending;
           this.state = 'confirm-overwrite';
         } else {
           this.pendingOverwrite = null;
-          this.doInstall();
+          this.install();
         }
       },
       error: (err) => {
@@ -164,7 +197,7 @@ export class TbIotHubInstallDialogComponent extends DialogComponent<TbIotHubInst
   }
 
   confirmOverwriteReplace(): void {
-    this.doInstall();
+    this.install();
   }
 
   confirmOverwriteCancel(): void {
@@ -198,7 +231,7 @@ export class TbIotHubInstallDialogComponent extends DialogComponent<TbIotHubInst
     );
   }
 
-  doInstall(): void {
+  install(): void {
     this.state = 'installing';
     const versionId = this.item.id as string;
     const data = this.selectedEntityId ? { entityId: this.selectedEntityId } : undefined;
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 e2cf1fd6e7..7444a27506 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",
@@ -3811,9 +3811,9 @@
         "remove-desc-solution-template": "Removing this solution template will also remove all created entities including dashboards, rule chains, devices, and other associated resources within your tenant",
         "remove-anyway": "Remove anyway",
         "select-entity-for-cf": "Select entity for calculated field '{{name}}'",
-        "rule-chain-install-desc": "Installing this will automatically create the rule chain within your tenant. Use 'Set for profile' to also set it as default for Device or Asset profile.",
-        "rule-chain-install-as-default": "Set for profile",
-        "select-profile-for-rule-chain": "Select profile for rule chain '{{name}}'",
+        "rule-chain-install-subtitle": "Installing automatically creates the rule chain within your tenant. Optionally set it as a profile's default so entities of that profile route through it.",
+        "rule-chain-set-as-profile-default-toggle": "Set as profile default rule chain",
+        "rule-chain-set-as-profile-default-tooltip": "If enabled, all entities of the selected profile will route messages through this rule chain.",
         "rule-chain-overwrite-title": "Replace existing default rule chain?",
         "rule-chain-overwrite-body": "Profile <b>{{profile}}</b> currently uses <b>{{existing}}</b> as its default rule chain. Installing will replace it with this rule chain.",
         "rule-chain-overwrite-replace": "Replace",

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 2/2] 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",