migrate policy edit component (#8914)

apps/web/src/app/admin-console/organizations/policies/policies.component.ts

@@ -1,18 +1,19 @@
 import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
+import { ActivatedRoute } from "@angular/router";
+import { lastValueFrom } from "rxjs";
 import { first } from "rxjs/operators";
 
-import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/policy/policy-api.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { PolicyResponse } from "@bitwarden/common/admin-console/models/response/policy.response";
+import { DialogService } from "@bitwarden/components";
 
 import { PolicyListService } from "../../core/policy-list.service";
 import { BasePolicy } from "../policies";
 
-import { PolicyEditComponent } from "./policy-edit.component";
+import { PolicyEditComponent, PolicyEditDialogResult } from "./policy-edit.component";
 
 @Component({
   selector: "app-org-policies",
@@ -33,11 +34,10 @@ export class PoliciesComponent implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
-    private modalService: ModalService,
     private organizationService: OrganizationService,
     private policyApiService: PolicyApiServiceAbstraction,
     private policyListService: PolicyListService,
-    private router: Router,
+    private dialogService: DialogService,
   ) {}
 
   async ngOnInit() {
@@ -83,21 +83,17 @@ export class PoliciesComponent implements OnInit {
   }
 
   async edit(policy: BasePolicy) {
-    const [modal] = await this.modalService.openViewRef(
+    const dialogRef = PolicyEditComponent.open(this.dialogService, {
-      PolicyEditComponent,
+      data: {
-      this.editModalRef,
+        policy: policy,
-      (comp) => {
+        organizationId: this.organizationId,
-        comp.policy = policy;
+        policiesEnabledMap: this.policiesEnabledMap,
-        comp.organizationId = this.organizationId;
-        comp.policiesEnabledMap = this.policiesEnabledMap;
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-        comp.onSavedPolicy.subscribe(() => {
-          modal.close();
-          // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          this.load();
-        });
       },
-    );
+    });
+
+    const result = await lastValueFrom(dialogRef.closed);
+    if (result === PolicyEditDialogResult.Saved) {
+      await this.load();
+    }
   }
 }

apps/web/src/app/admin-console/organizations/policies/policy-edit.component.html

@@ -1,49 +1,28 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="policiesEditTitle">
+<form [formGroup]="formGroup" [bitSubmit]="submit" [appApiAction]="formPromise">
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
+  <bit-dialog [loading]="loading">
-    <form
+    <span bitDialogTitle>{{ "editPolicy" | i18n }} - {{ policy.name | i18n }}</span>
-      class="modal-content"
-      #form
-      (ngSubmit)="submit()"
-      [appApiAction]="formPromise"
-      ngNativeValidate
-    >
-      <div class="modal-header">
-        <h1 class="modal-title" id="policiesEditTitle">
-          {{ "editPolicy" | i18n }} - {{ policy.name | i18n }}
-        </h1>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
 
-      <div class="modal-body">
+    <ng-container bitDialogContent>
-        <div class="modal-body" *ngIf="loading">
+      <div *ngIf="loading">
-          <i
+        <i
-            class="bwi bwi-spinner bwi-spin text-muted"
+          class="bwi bwi-spinner bwi-spin tw-text-muted"
-            title="{{ 'loading' | i18n }}"
+          title="{{ 'loading' | i18n }}"
-            aria-hidden="true"
+          aria-hidden="true"
-          ></i>
+        ></i>
-          <span class="sr-only">{{ "loading" | i18n }}</span>
+        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
-        </div>
-        <div [hidden]="loading">
-          <p>{{ policy.description | i18n }}</p>
-          <ng-template #policyForm></ng-template>
-        </div>
       </div>
-      <div class="modal-footer">
+      <div [hidden]="loading">
-        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+        <p bitTypography="body1">{{ policy.description | i18n }}</p>
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+        <ng-template #policyForm></ng-template>
-          <span>{{ "save" | i18n }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "cancel" | i18n }}
-        </button>
       </div>
-    </form>
+    </ng-container>
-  </div>
+    <ng-container bitDialogFooter>
-</div>
+      <button bitButton buttonType="primary" bitFormButton type="submit">
+        {{ "save" | i18n }}
+      </button>
+      <button bitButton buttonType="secondary" bitDialogClose type="button">
+        {{ "cancel" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>

apps/web/src/app/admin-console/organizations/policies/policy-edit.component.ts

@@ -1,33 +1,34 @@
-import {
+import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
-  ChangeDetectorRef,
+import { ChangeDetectorRef, Component, Inject, ViewChild, ViewContainerRef } from "@angular/core";
-  Component,
+import { FormBuilder } from "@angular/forms";
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-  ViewContainerRef,
-} from "@angular/core";
 
 import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/policy/policy-api.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { PolicyRequest } from "@bitwarden/common/admin-console/models/request/policy.request";
 import { PolicyResponse } from "@bitwarden/common/admin-console/models/response/policy.response";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { DialogService } from "@bitwarden/components";
 
 import { BasePolicy, BasePolicyComponent } from "../policies";
 
+export type PolicyEditDialogData = {
+  /** Returns policy abstracts. */
+  policy: BasePolicy;
+  /** Returns a unique organization id  */
+  organizationId: string;
+  /** A map indicating whether each policy type is enabled or disabled. */
+  policiesEnabledMap: Map<PolicyType, boolean>;
+};
+
+export enum PolicyEditDialogResult {
+  Saved = "saved",
+}
 @Component({
   selector: "app-policy-edit",
   templateUrl: "policy-edit.component.html",
 })
 export class PolicyEditComponent {
-  @Input() policy: BasePolicy;
-  @Input() organizationId: string;
-  @Input() policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
-  @Output() onSavedPolicy = new EventEmitter();
-
   @ViewChild("policyForm", { read: ViewContainerRef, static: true })
   policyFormRef: ViewContainerRef;
 
@@ -39,22 +40,29 @@ export class PolicyEditComponent {
   policyComponent: BasePolicyComponent;
 
   private policyResponse: PolicyResponse;
-
+  formGroup = this.formBuilder.group({
+    enabled: [this.enabled],
+  });
   constructor(
+    @Inject(DIALOG_DATA) protected data: PolicyEditDialogData,
     private policyApiService: PolicyApiServiceAbstraction,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
     private cdr: ChangeDetectorRef,
-    private logService: LogService,
+    private formBuilder: FormBuilder,
+    private dialogRef: DialogRef<PolicyEditDialogResult>,
   ) {}
+  get policy(): BasePolicy {
+    return this.data.policy;
+  }
 
   async ngAfterViewInit() {
     await this.load();
     this.loading = false;
 
-    this.policyComponent = this.policyFormRef.createComponent(this.policy.component)
+    this.policyComponent = this.policyFormRef.createComponent(this.data.policy.component)
       .instance as BasePolicyComponent;
-    this.policyComponent.policy = this.policy;
+    this.policyComponent.policy = this.data.policy;
     this.policyComponent.policyResponse = this.policyResponse;
 
     this.cdr.detectChanges();
@@ -63,8 +71,8 @@ export class PolicyEditComponent {
   async load() {
     try {
       this.policyResponse = await this.policyApiService.getPolicy(
-        this.organizationId,
+        this.data.organizationId,
-        this.policy.type,
+        this.data.policy.type,
       );
     } catch (e) {
       if (e.statusCode === 404) {
@@ -75,30 +83,29 @@ export class PolicyEditComponent {
     }
   }
 
-  async submit() {
+  submit = async () => {
     let request: PolicyRequest;
     try {
-      request = await this.policyComponent.buildRequest(this.policiesEnabledMap);
+      request = await this.policyComponent.buildRequest(this.data.policiesEnabledMap);
     } catch (e) {
       this.platformUtilsService.showToast("error", null, e.message);
       return;
     }
+    this.formPromise = this.policyApiService.putPolicy(
+      this.data.organizationId,
+      this.data.policy.type,
+      request,
+    );
+    await this.formPromise;
+    this.platformUtilsService.showToast(
+      "success",
+      null,
+      this.i18nService.t("editedPolicyId", this.i18nService.t(this.data.policy.name)),
+    );
+    this.dialogRef.close(PolicyEditDialogResult.Saved);
+  };
 
-    try {
+  static open = (dialogService: DialogService, config: DialogConfig<PolicyEditDialogData>) => {
-      this.formPromise = this.policyApiService.putPolicy(
+    return dialogService.open<PolicyEditDialogResult>(PolicyEditComponent, config);
-        this.organizationId,
+  };
-        this.policy.type,
-        request,
-      );
-      await this.formPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("editedPolicyId", this.i18nService.t(this.policy.name)),
-      );
-      this.onSavedPolicy.emit();
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
 }