Migrate UIF to use takeuntilDestroyed (#15777)

libs/components/src/async-actions/bit-action.directive.ts

@@ -1,7 +1,8 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { Directive, HostListener, model, OnDestroy, Optional } from "@angular/core";
-import { BehaviorSubject, finalize, Subject, takeUntil, tap } from "rxjs";
+import { Directive, HostListener, model, Optional, inject, DestroyRef } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { BehaviorSubject, finalize, tap } from "rxjs";
 
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
@@ -16,8 +17,7 @@ import { FunctionReturningAwaitable, functionToObservable } from "../utils/funct
 @Directive({
   selector: "[bitAction]",
 })
-export class BitActionDirective implements OnDestroy {
-  private destroy$ = new Subject<void>();
+export class BitActionDirective {
   private _loading$ = new BehaviorSubject<boolean>(false);
 
   /**
@@ -40,6 +40,8 @@ export class BitActionDirective implements OnDestroy {
 
   readonly handler = model<FunctionReturningAwaitable>(undefined, { alias: "bitAction" });
 
+  private readonly destroyRef = inject(DestroyRef);
+
   constructor(
     private buttonComponent: ButtonLikeAbstraction,
     @Optional() private validationService?: ValidationService,
@@ -62,13 +64,8 @@ export class BitActionDirective implements OnDestroy {
           },
         }),
         finalize(() => (this.loading = false)),
-        takeUntil(this.destroy$),
+        takeUntilDestroyed(this.destroyRef),
       )
       .subscribe();
   }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }

libs/components/src/async-actions/bit-submit.directive.ts

@@ -1,8 +1,9 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { Directive, OnDestroy, OnInit, Optional, input } from "@angular/core";
+import { Directive, OnInit, Optional, input, inject, DestroyRef } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormGroupDirective } from "@angular/forms";
-import { BehaviorSubject, catchError, filter, of, Subject, switchMap, takeUntil } from "rxjs";
+import { BehaviorSubject, catchError, filter, of, switchMap } from "rxjs";
 
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
@@ -15,8 +16,9 @@ import { FunctionReturningAwaitable, functionToObservable } from "../utils/funct
 @Directive({
   selector: "[formGroup][bitSubmit]",
 })
-export class BitSubmitDirective implements OnInit, OnDestroy {
-  private destroy$ = new Subject<void>();
+export class BitSubmitDirective implements OnInit {
+  private readonly destroyRef = inject(DestroyRef);
+
   private _loading$ = new BehaviorSubject<boolean>(false);
   private _disabled$ = new BehaviorSubject<boolean>(false);
 
@@ -51,7 +53,7 @@ export class BitSubmitDirective implements OnInit, OnDestroy {
             }),
           );
         }),
-        takeUntil(this.destroy$),
+        takeUntilDestroyed(),
       )
       .subscribe({
         next: () => (this.loading = false),
@@ -60,13 +62,15 @@ export class BitSubmitDirective implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.formGroupDirective.statusChanges.pipe(takeUntil(this.destroy$)).subscribe((c) => {
-      if (this.allowDisabledFormSubmit()) {
-        this._disabled$.next(false);
-      } else {
-        this._disabled$.next(c === "DISABLED");
-      }
-    });
+    this.formGroupDirective.statusChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((c) => {
+        if (this.allowDisabledFormSubmit()) {
+          this._disabled$.next(false);
+        } else {
+          this._disabled$.next(c === "DISABLED");
+        }
+      });
   }
 
   get disabled() {
@@ -85,9 +89,4 @@ export class BitSubmitDirective implements OnInit, OnDestroy {
     this.disabled = value;
     this._loading$.next(value);
   }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }

libs/components/src/async-actions/form-button.directive.ts

@@ -1,7 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { Directive, OnDestroy, Optional, input } from "@angular/core";
-import { Subject, takeUntil } from "rxjs";
+import { Directive, Optional, input } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 
 import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
 
@@ -26,9 +26,7 @@ import { BitSubmitDirective } from "./bit-submit.directive";
 @Directive({
   selector: "button[bitFormButton]",
 })
-export class BitFormButtonDirective implements OnDestroy {
-  private destroy$ = new Subject<void>();
-
+export class BitFormButtonDirective {
   readonly type = input<string>();
   readonly disabled = input<boolean>();
 
@@ -38,7 +36,7 @@ export class BitFormButtonDirective implements OnDestroy {
     @Optional() actionDirective?: BitActionDirective,
   ) {
     if (submitDirective && buttonComponent) {
-      submitDirective.loading$.pipe(takeUntil(this.destroy$)).subscribe((loading) => {
+      submitDirective.loading$.pipe(takeUntilDestroyed()).subscribe((loading) => {
         if (this.type() === "submit") {
           buttonComponent.loading.set(loading);
         } else {
@@ -46,7 +44,7 @@ export class BitFormButtonDirective implements OnDestroy {
         }
       });
 
-      submitDirective.disabled$.pipe(takeUntil(this.destroy$)).subscribe((disabled) => {
+      submitDirective.disabled$.pipe(takeUntilDestroyed()).subscribe((disabled) => {
         const disabledValue = this.disabled();
         if (disabledValue !== false) {
           buttonComponent.disabled.set(disabledValue || disabled);
@@ -55,18 +53,13 @@ export class BitFormButtonDirective implements OnDestroy {
     }
 
     if (submitDirective && actionDirective) {
-      actionDirective.loading$.pipe(takeUntil(this.destroy$)).subscribe((disabled) => {
+      actionDirective.loading$.pipe(takeUntilDestroyed()).subscribe((disabled) => {
         submitDirective.disabled = disabled;
       });
 
-      submitDirective.disabled$.pipe(takeUntil(this.destroy$)).subscribe((disabled) => {
+      submitDirective.disabled$.pipe(takeUntilDestroyed()).subscribe((disabled) => {
         actionDirective.disabled = disabled;
       });
     }
   }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }