Refactor organization integrations components to use signals and observables; enhance async handling in templates and add debug logging

bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.component.html

@@ -1,3 +1,6 @@
+@let organization = organization$ | async;
+@let integrations = integrations$ | async;
+
 <app-header>
   @if (organization) {
     <bit-tab-nav-bar slot="tabs">

bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.component.ts

@@ -5,7 +5,6 @@ import { SharedModule } from "@bitwarden/web-vault/app/shared";
 
 import { OrganizationIntegrationsState } from "./organization-integrations.state";
 
-// attempted, but because bit-tab-group is not OnPush, caused more issues than it solved
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
@@ -14,8 +13,8 @@ import { OrganizationIntegrationsState } from "./organization-integrations.state
   imports: [SharedModule, HeaderModule],
 })
 export class AdminConsoleIntegrationsComponent {
-  integrations = this.state.integrations;
-  organization = this.state.organization;
+  integrations$ = this.state.integrations$;
+  organization$ = this.state.organization$;
 
   constructor(private state: OrganizationIntegrationsState) {}
 }

bitwarden_license/bit-web/src/app/dirt/organization-integrations/integrations.pipe.ts

@@ -7,7 +7,10 @@ import { IntegrationType } from "@bitwarden/common/enums";
   name: "filterIntegrations",
 })
 export class FilterIntegrationsPipe implements PipeTransform {
-  transform(integrations: Integration[], type: IntegrationType): Integration[] {
+  transform(integrations: Integration[] | null | undefined, type: IntegrationType): Integration[] {
+    if (!integrations) {
+      return [];
+    }
     return integrations.filter((integration) => integration.type === type);
   }
 }

bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations.resolver.ts

@@ -264,6 +264,9 @@ export class OrganizationIntegrationsResolver implements Resolve<boolean> {
 
     this.state.setIntegrations(merged);
 
+    // eslint-disable-next-line no-console
+    console.log("[DEBUG] Loaded integrations:", merged);
+
     return true;
   }
 }

bitwarden_license/bit-web/src/app/dirt/organization-integrations/organization-integrations.state.ts

@@ -1,29 +1,27 @@
-import { Injectable } from "@angular/core";
-import { BehaviorSubject } from "rxjs";
+import { Injectable, signal } from "@angular/core";
+import { toObservable } from "@angular/core/rxjs-interop";
 
 import { Integration } from "@bitwarden/bit-common/dirt/organization-integrations/models/integration";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 
 @Injectable({ providedIn: "root" })
 export class OrganizationIntegrationsState {
-  private integrationsSource = new BehaviorSubject<Integration[]>([]);
-  private organizationSource = new BehaviorSubject<Organization>(null);
-  integrations$ = this.integrationsSource.asObservable();
-  organization$ = this.organizationSource.asObservable();
+  private readonly _integrations = signal<Integration[]>([]);
+  private readonly _organization = signal<Organization | null>(null);
 
-  setOrganization(val: Organization) {
-    this.organizationSource.next(val);
+  // Signals
+  integrations = this._integrations.asReadonly();
+  organization = this._organization.asReadonly();
+
+  // Observables for backward compatibility
+  integrations$ = toObservable(this._integrations);
+  organization$ = toObservable(this._organization);
+
+  setOrganization(val: Organization | null) {
+    this._organization.set(val);
   }
 
   setIntegrations(val: Integration[]) {
-    this.integrationsSource.next(val);
-  }
-
-  get organization() {
-    return this.organizationSource.value;
-  }
-
-  get integrations() {
-    return this.integrationsSource.value;
+    this._integrations.set(val);
   }
 }

bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.html

@@ -1,3 +1,4 @@
+@let integrationsList = integrationsList$ | async;
 <section class="tw-mb-9">
   <h2 bitTypography="h2">{{ "singleSignOn" | i18n }}</h2>
   <p bitTypography="body1">

bitwarden_license/bit-web/src/app/dirt/organization-integrations/single-sign-on/single-sign-on.component.ts

@@ -6,6 +6,8 @@ import { SharedModule } from "@bitwarden/web-vault/app/shared";
 import { IntegrationGridComponent } from "../integration-grid/integration-grid.component";
 import { FilterIntegrationsPipe } from "../integrations.pipe";
 import { OrganizationIntegrationsState } from "../organization-integrations.state";
+import { tap } from "rxjs/operators";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@@ -15,13 +17,20 @@ import { OrganizationIntegrationsState } from "../organization-integrations.stat
   imports: [SharedModule, IntegrationGridComponent, FilterIntegrationsPipe],
 })
 export class SingleSignOnComponent implements OnInit {
-  integrationsList = this.state.integrations;
+  integrationsList$ = this.state.integrations$;
+  IntegrationType = IntegrationType;
 
   constructor(private state: OrganizationIntegrationsState) {}
 
-  ngOnInit() {}
-
-  get IntegrationType(): typeof IntegrationType {
-    return IntegrationType;
+  ngOnInit() {
+    // eslint-disable-next-line no-console
+    this.state.integrations$
+      .pipe(
+        tap((integrations) =>
+          console.log("[DEBUG] integrations in single-sign-on.component.ts =>", integrations),
+        ),
+      )
+      .pipe(takeUntilDestroyed())
+      .subscribe();
   }
 }