[PM-3919] Remove deprecated Angular functionality from ModalService (#6285)

Remove deprecated Angular functionality from ModalService so we can upgrade Angular.

libs/angular/src/auth/components/user-verification-prompt.component.ts

@@ -7,16 +7,21 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
 import { ModalRef } from "../../components/modal/modal.ref";
-import { ModalConfig } from "../../services/modal.service";
+
+export interface UserVerificationPromptParams {
+  confirmDescription: string;
+  confirmButtonText: string;
+  modalTitle: string;
+}
 
 /**
  * Used to verify the user's identity (using their master password or email-based OTP for Key Connector users). You can customize all of the text in the modal.
  */
 @Directive()
 export class UserVerificationPromptComponent {
-  confirmDescription = this.config.data.confirmDescription;
-  confirmButtonText = this.config.data.confirmButtonText;
-  modalTitle = this.config.data.modalTitle;
+  confirmDescription = this.config.confirmDescription;
+  confirmButtonText = this.config.confirmButtonText;
+  modalTitle = this.config.modalTitle;
 
   formGroup = this.formBuilder.group({
     secret: this.formBuilder.control<Verification | null>(null),
@@ -26,7 +31,7 @@ export class UserVerificationPromptComponent {
 
   constructor(
     private modalRef: ModalRef,
-    protected config: ModalConfig,
+    protected config: UserVerificationPromptParams,
     protected userVerificationService: UserVerificationService,
     private formBuilder: FormBuilder,
     private platformUtilsService: PlatformUtilsService,

libs/angular/src/components/modal/dynamic-modal.component.ts

@@ -11,8 +11,6 @@ import {
   ViewContainerRef,
 } from "@angular/core";
 
-import { ModalService } from "../../services/modal.service";
-
 import { ModalRef } from "./modal.ref";
 
 @Component({
@@ -31,7 +29,6 @@ export class DynamicModalComponent implements AfterViewInit, OnDestroy {
   private focusTrap: ConfigurableFocusTrap;
 
   constructor(
-    private modalService: ModalService,
     private cd: ChangeDetectorRef,
     private el: ElementRef<HTMLElement>,
     private focusTrapFactory: ConfigurableFocusTrapFactory,
@@ -55,10 +52,8 @@ export class DynamicModalComponent implements AfterViewInit, OnDestroy {
   }
 
   loadChildComponent(componentType: Type<any>) {
-    const componentFactory = this.modalService.resolveComponentFactory(componentType);
-
     this.modalContentRef.clear();
-    this.componentRef = this.modalContentRef.createComponent(componentFactory);
+    this.componentRef = this.modalContentRef.createComponent(componentType);
   }
 
   ngOnDestroy() {

libs/angular/src/services/modal.service.ts

@@ -1,26 +1,10 @@
-import {
-  ApplicationRef,
-  ComponentFactory,
-  ComponentFactoryResolver,
-  ComponentRef,
-  EmbeddedViewRef,
-  Injectable,
-  Injector,
-  Type,
-  ViewContainerRef,
-} from "@angular/core";
+import { ComponentRef, Injectable, Injector, Type, ViewContainerRef } from "@angular/core";
 import { first } from "rxjs/operators";
 
 import { DynamicModalComponent } from "../components/modal/dynamic-modal.component";
 import { ModalInjector } from "../components/modal/modal-injector";
 import { ModalRef } from "../components/modal/modal.ref";
 
-export class ModalConfig<D = any> {
-  data?: D;
-  allowMultipleModals?: boolean;
-  replaceTopModal?: boolean;
-}
-
 /**
  * @deprecated Use the Component Library's `DialogService` instead.
  */
@@ -28,15 +12,7 @@ export class ModalConfig<D = any> {
 export class ModalService {
   protected modalList: ComponentRef<DynamicModalComponent>[] = [];
 
-  // Lazy loaded modules are not available in componentFactoryResolver,
-  // therefore modules needs to manually initialize their resolvers.
-  private factoryResolvers: Map<Type<any>, ComponentFactoryResolver> = new Map();
-
-  constructor(
-    private componentFactoryResolver: ComponentFactoryResolver,
-    private applicationRef: ApplicationRef,
-    private injector: Injector,
-  ) {
+  constructor(private injector: Injector) {
     document.addEventListener("keyup", (event) => {
       if (event.key === "Escape" && this.modalCount > 0) {
         this.topModal.instance.close();
@@ -62,7 +38,7 @@ export class ModalService {
     viewContainerRef: ViewContainerRef,
     setComponentParameters: (component: T) => void = null,
   ): Promise<[ModalRef, T]> {
-    const [modalRef, modalComponentRef] = this.openInternal(componentType, null, false);
+    const [modalRef, modalComponentRef] = this.openInternal(viewContainerRef, componentType);
     modalComponentRef.instance.setComponentParameters = setComponentParameters;
 
     viewContainerRef.insert(modalComponentRef.hostView);
@@ -72,52 +48,18 @@ export class ModalService {
     return [modalRef, modalComponentRef.instance.componentRef.instance];
   }
 
-  open(componentType: Type<any>, config: ModalConfig = {}) {
-    const { replaceTopModal = false, allowMultipleModals = false } = config;
-
-    if (this.modalCount > 0 && replaceTopModal) {
-      this.topModal.instance.close();
-    }
-
-    if (this.modalCount > 0 && !allowMultipleModals) {
-      return;
-    }
-
-    const [modalRef] = this.openInternal(componentType, config, true);
-
-    return modalRef;
-  }
-
-  resolveComponentFactory<T>(componentType: Type<T>): ComponentFactory<T> {
-    if (this.factoryResolvers.has(componentType)) {
-      return this.factoryResolvers.get(componentType).resolveComponentFactory(componentType);
-    }
-
-    return this.componentFactoryResolver.resolveComponentFactory(componentType);
-  }
-
   closeAll(): void {
     this.modalList.forEach((modal) => modal.instance.close());
   }
 
   protected openInternal(
+    viewContainerRef: ViewContainerRef,
     componentType: Type<any>,
-    config?: ModalConfig,
-    attachToDom?: boolean,
-  ): [ModalRef, ComponentRef<DynamicModalComponent>] {
-    const [modalRef, componentRef] = this.createModalComponent(config);
+  ): [ModalRef, ComponentRef<any>] {
+    const [modalRef, componentRef] = this.createModalComponent(viewContainerRef);
     componentRef.instance.childComponentType = componentType;
 
-    if (attachToDom) {
-      this.applicationRef.attachView(componentRef.hostView);
-      const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
-      document.body.appendChild(domElem);
-    }
-
     modalRef.onClosed.pipe(first()).subscribe(() => {
-      if (attachToDom) {
-        this.applicationRef.detachView(componentRef.hostView);
-      }
       componentRef.destroy();
 
       this.modalList.pop();
@@ -174,17 +116,15 @@ export class ModalService {
   }
 
   protected createModalComponent(
-    config: ModalConfig,
-  ): [ModalRef, ComponentRef<DynamicModalComponent>] {
+    viewContainerRef: ViewContainerRef,
+  ): [ModalRef, ComponentRef<any>] {
     const modalRef = new ModalRef();
 
     const map = new WeakMap();
-    map.set(ModalConfig, config);
     map.set(ModalRef, modalRef);
 
-    const componentFactory =
-      this.componentFactoryResolver.resolveComponentFactory(DynamicModalComponent);
-    const componentRef = componentFactory.create(new ModalInjector(this.injector, map));
+    const injector = new ModalInjector(this.injector, map);
+    const componentRef = viewContainerRef.createComponent(DynamicModalComponent, { injector });
 
     return [modalRef, componentRef];
   }