User invite dialog: signal-native rewrite

Component had eight Observable<boolean> fields (connecting$, valid$,
isBusy$, etc.) declared but never assigned — the | async pipes in
the template were always undefined, so the loading bar / error
banner / submit-disable were effectively static.

Rewritten to actually drive UI state: signal()s for showSecret,
isBusy, hasErrored; toSignal(form.statusChanges) for formStatus;
computed() for formValid + canSubmit. submit() now toggles
busy/error state during the configure call and surfaces failures
via sticky red snackBar.error().

Template drops | async pipes for signal calls; show-secret toggle
moves to a method; Cancel button gets type="button" so it doesn't
accidentally submit; submit button binds [disabled]="!canSubmit()".

UserInviteService public surface unchanged — left alone since it
was already clean (HttpClient, no Store/ngrx coupling) and has
multiple downstream consumers.

Author: nabramovitz

src/frontend/packages/cloud-foundry/src/features/cf/user-invites/configuration-dialog/user-invite-configuration-dialog.component.html

@@ -1,7 +1,7 @@
 <div class="connection-dialog__loading-wrapper">
   <app-progress-bar class="connection-dialog__loading"
-    [color]="(connectingError$ | async) && (isBusy$ | async) === false ? 'warn' : 'primary'"
-    [mode]="(isBusy$ | async) ? 'indeterminate' : 'solid'">
+    [color]="hasErrored() && !isBusy() ? 'warn' : 'primary'"
+    [mode]="isBusy() ? 'indeterminate' : 'solid'">
   </app-progress-bar>
 </div>
 <div class="connection-dialog">
@@ -18,18 +18,18 @@ <h2 class="dialog-title">
       </div>
       <div class="form-field">
         <input class="form-input" placeholder="Client Secret" formControlName="clientSecret"
-          [type]="!showSecret ? 'password' : 'text'">
-        <button class="btn-icon" (click)="showSecret = !showSecret" [attr.aria-label]="'Hide Secret'"
-          [attr.aria-pressed]="!showSecret" type='button'>
-          <i class="material-icons">{{!showSecret ? 'visibility_off' : 'visibility'}}</i>
+          [type]="!showSecret() ? 'password' : 'text'">
+        <button class="btn-icon" (click)="toggleShowSecret()" [attr.aria-label]="'Hide Secret'"
+          [attr.aria-pressed]="!showSecret()" type='button'>
+          <i class="material-icons">{{!showSecret() ? 'visibility_off' : 'visibility'}}</i>
         </button>
       </div>
     </div>
-    <app-dialog-error message="Could not connect, please try again." [show]="connectingError$ | async">
+    <app-dialog-error message="Could not connect, please try again." [show]="hasErrored()">
     </app-dialog-error>
     <div class="dialog-actions connection-dialog__actions">
-      <button (click)="dialogRef.close()" class="btn btn-warn">Cancel</button>
-      <button type="submit" [disabled]="!endpointForm.valid" class="btn btn-primary">Configure</button>
+      <button (click)="dialogRef.close()" type="button" class="btn btn-warn">Cancel</button>
+      <button type="submit" [disabled]="!canSubmit()" class="btn btn-primary">Configure</button>
     </div>
   </form>
-</div>
+</div>

src/frontend/packages/cloud-foundry/src/features/cf/user-invites/configuration-dialog/user-invite-configuration-dialog.component.ts

@@ -1,22 +1,33 @@
-import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  signal,
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormBuilder, FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import { toSignal } from '@angular/core/rxjs-interop';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { take } from 'rxjs/operators';
 
-interface UserInviteConfigForm {
-  clientID: FormControl<string>;
-  clientSecret: FormControl<string>;
-}
 import { AppProgressBarComponent } from '@stratosui/core';
 import { TailwindSnackBarService } from '@stratosui/core';
 import { TailwindDialogRef } from '@stratosui/core';
 import { DialogErrorComponent } from '@stratosui/core';
 import { MAT_DIALOG_DATA } from '@stratosui/core';
-import { Observable, Subscription } from 'rxjs';
-import { take,  } from 'rxjs/operators';
 
-import { ActionState } from '../../../../../../store/src/reducers/api-request-reducer/types';
 import { UserInviteConfigureService } from '../user-invite.service';
 
+interface UserInviteConfigForm {
+  clientID: FormControl<string>;
+  clientSecret: FormControl<string>;
+}
 
 @Component({
   selector: 'app-user-invite-configuration-dialog',
@@ -28,59 +39,65 @@ import { UserInviteConfigureService } from '../user-invite.service';
     CommonModule,
     ReactiveFormsModule,
     AppProgressBarComponent,
-    DialogErrorComponent
-  ]
+    DialogErrorComponent,
+  ],
 })
 export class UserInviteConfigurationDialogComponent {
-  fb = inject(FormBuilder);
-  dialogRef = inject<TailwindDialogRef<UserInviteConfigurationDialogComponent>>('TailwindDialogRef' as any);
-  snackBar = inject(TailwindSnackBarService);
-  userInviteConfigureService = inject(UserInviteConfigureService);
-  data = inject<{
-    guid: string;
-}>(MAT_DIALOG_DATA);
+  private fb = inject(FormBuilder);
+  dialogRef = inject<TailwindDialogRef<UserInviteConfigurationDialogComponent>>(
+    'TailwindDialogRef' as any
+  );
+  private snackBar = inject(TailwindSnackBarService);
+  private userInviteConfigureService = inject(UserInviteConfigureService);
+  private data = inject<{ guid: string }>(MAT_DIALOG_DATA);
 
-  connecting$!: Observable<boolean>;
-  connectingError$!: Observable<boolean>;
-  fetchingInfo$!: Observable<boolean>;
-  endpointConnected$!: Observable<boolean>;
-  valid$!: Observable<boolean>;
-  canSubmit$!: Observable<boolean>;
+  // Local UI state — signal-native
+  readonly showSecret = signal(false);
+  readonly isBusy = signal(false);
+  readonly hasErrored = signal(false);
 
-
-  private update$: Observable<ActionState>;
-
-  isBusy$!: Observable<boolean>;
-
-  connectingSub!: Subscription;
-  fetchSub!: Subscription;
   public endpointForm: FormGroup<UserInviteConfigForm>;
-
-  // We need a delay to ensure the BE has finished registering the endpoint.
-  // If we don't do this and if we're quick enough, we can navigate to the application page
-  // and end up with an empty list where we should have results.
-  public connectDelay = 1000;
-
-  guid!: string;
-  public showSecret = false;
+  // Status of the reactive form lifted to a signal so the template can react
+  // declaratively (mirrors the toSignal-at-the-boundary pattern used by other
+  // signal-native dialogs).
+  readonly formStatus;
+  readonly formValid;
+  readonly canSubmit;
 
   constructor() {
     this.endpointForm = this.fb.group<UserInviteConfigForm>({
       clientID: this.fb.nonNullable.control('', Validators.required),
       clientSecret: this.fb.nonNullable.control('', Validators.required),
     });
+    this.formStatus = toSignal(this.endpointForm.statusChanges, {
+      initialValue: this.endpointForm.status,
+    });
+    this.formValid = computed(() => this.formStatus() === 'VALID');
+    this.canSubmit = computed(() => this.formValid() && !this.isBusy());
+  }
+
+  toggleShowSecret(): void {
+    this.showSecret.update(v => !v);
   }
 
-  submit() {
-    this.userInviteConfigureService.configure(
-      this.data.guid,
-      this.endpointForm.value.clientID ?? '',
-      this.endpointForm.value.clientSecret ?? '')
-      .pipe(
-        take(1)
-      ).subscribe((v: any) => {
+  submit(): void {
+    if (!this.canSubmit()) {
+      return;
+    }
+    this.isBusy.set(true);
+    this.hasErrored.set(false);
+    this.userInviteConfigureService
+      .configure(
+        this.data.guid,
+        this.endpointForm.value.clientID ?? '',
+        this.endpointForm.value.clientSecret ?? ''
+      )
+      .pipe(take(1))
+      .subscribe(v => {
+        this.isBusy.set(false);
         if (v.error) {
-          this.snackBar.error(v.errorMessage, 'Close');
+          this.hasErrored.set(true);
+          this.snackBar.error(v.errorMessage ?? 'Failed to configure User Invitation');
         } else {
           this.dialogRef.close();
         }