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.

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.install-desc' | translate }}</p>
-        <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>
-      }
     }
     @case ('select-entity') {
       <h2 class="tb-iot-hub-install-title">{{ 'iot-hub.install-confirm-title' | translate:{ name: item.name } }}</h2>
-      @if (activeSelectEntityConfig?.promptKey) {
+      @if (item.type === ItemType.RULE_CHAIN) {
-        <p class="tb-iot-hub-install-desc"
+        <p class="tb-iot-hub-install-desc">{{ 'iot-hub.rule-chain-install-subtitle' | translate }}</p>
-           [innerHTML]="activeSelectEntityConfig.promptKey | translate:{ name: item.name }"></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-flat-button color="primary" (click)="install()">{{ 'iot-hub.install' | translate }}</button>
-        <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>
-      }
     }
     @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"
+                [disabled]="ruleChainInstallForm.invalid"
-                (click)="onSelectEntityInstall()">
+                (click)="onRuleChainInstall()">
           {{ 'iot-hub.install' | translate }}
         </button>
       } @else {
         <button mat-flat-button color="primary"
-                [disabled]="activeSelectEntityConfig?.required && !selectedEntityId"
+                [disabled]="activeSelectEntityConfig.required && !selectedEntityId"
-                (click)="onSelectEntityInstall()">
+                (click)="onEntitySelectInstall()">
           {{ 'iot-hub.install' | translate }}
         </button>
       }

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 {
+  onEntitySelectInstall(): void {
-    if (this.item.type === ItemType.CALCULATED_FIELD) {
+    if (!this.selectedEntityId) {
-      this.state = 'select-entity';
       return;
     }
-    this.doInstall();
+    this.install();
-  }
-
-  installAsEntityProfileDefault(): void {
-    this.state = 'select-entity';
-  }
-
-  selectEntityBack(): void {
-    this.selectedEntityId = null;
-    this.state = 'confirm';
   }
 
-  onSelectEntityInstall(): void {
+  onRuleChainInstall(): void {
-    if (!this.selectedEntityId) {
+    const { setAsDefault, entityType, entityId } = this.ruleChainInstallForm.getRawValue();
+    if (!setAsDefault) {
+      this.selectedEntityId = null;
+      this.install();
       return;
     }
-    if (this.item.type !== ItemType.RULE_CHAIN) {
+    if (!entityId) {
-      this.doInstall();
       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;

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-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-install-as-default": "Set for profile",
+        "rule-chain-set-as-profile-default-toggle": "Set as profile default rule chain",
-        "select-profile-for-rule-chain": "Select profile for rule chain '{{name}}'",
+        "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",