[PM-2411] Update billing-sync-api-key to use Dialog (#6537)

* Update billing-sync-api-key dialog

* Oscar's feedback

apps/web/src/app/billing/organizations/billing-sync-api-key.component.html

@@ -1,117 +1,75 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="billingSyncApiKeyTitle">
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
-    <form
-      class="modal-content"
-      #form
-      (ngSubmit)="submit()"
-      [appApiAction]="formPromise"
-      ngNativeValidate
-    >
-      <div class="modal-header">
-        <h1 class="modal-title" id="billingSyncApiKeyTitle">
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-dialog>
+    <h1 bitDialogTitle>
       {{ (hasBillingToken ? "viewBillingSyncToken" : "generateBillingSyncToken") | 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">
-        <app-user-verification
-          [(ngModel)]="masterPassword"
-          ngDefaultControl
-          name="secret"
-          *ngIf="!clientSecret"
-        >
+    <div bitDialogContent>
+      <app-user-verification formControlName="verification" *ngIf="!clientSecret">
       </app-user-verification>
+
       <ng-container *ngIf="clientSecret && showRotateScreen">
         <p>{{ "rotateBillingSyncTokenTitle" | i18n }}</p>
-          <app-callout type="warning">
+        <bit-callout type="warning">
           {{ "rotateBillingSyncTokenWarning" | i18n }}
-          </app-callout>
+        </bit-callout>
       </ng-container>
 
       <div *ngIf="clientSecret && !showRotateScreen">
         <p>{{ "copyPasteBillingSync" | i18n }}</p>
-          <label for="clientSecret">{{ "billingSyncKey" | i18n }}</label>
-          <div class="input-group">
+        <bit-form-field>
+          <bit-label>{{ "billingSyncKey" | i18n }}</bit-label>
           <input
+            bitInput
             id="clientSecret"
-              class="form-control text-monospace"
             type="text"
-              [(ngModel)]="clientSecret"
-              name="clientSecret"
+            [value]="clientSecret"
+            class="tw-font-mono"
             disabled
           />
-            <div class="input-group-append">
           <button
+            bitIconButton="bwi-clone"
+            bitSuffix
             type="button"
-                class="btn btn-outline-secondary"
-                (click)="copy()"
-                [appA11yTitle]="'copy' | i18n"
-              >
-                <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-              </button>
-            </div>
-          </div>
-          <div class="small text-muted mt-2" *ngIf="showLastSyncText">
-            <b class="font-weight-semibold">{{ "lastSync" | i18n }}:</b>
+            [appCopyClick]="clientSecret"
+            [appA11yTitle]="'copyValue' | i18n"
+          ></button>
+        </bit-form-field>
+        <div class="tw-mt-2 tw-text-sm tw-text-muted" *ngIf="showLastSyncText">
+          <b class="tw-font-semibold">{{ "lastSync" | i18n }}:</b>
           {{ lastSyncDate | date : "medium" }}
         </div>
-          <div class="small text-danger mt-2" *ngIf="showAwaitingSyncText">
+        <div class="tw-mt-2 tw-text-sm tw-text-danger" *ngIf="showAwaitingSyncText">
           <i class="bwi bwi-error"></i>
           {{
-              (daysBetween === 1 ? "awaitingSyncSingular" : "awaitingSyncPlural")
-                | i18n : daysBetween
+            (daysBetween === 1 ? "awaitingSyncSingular" : "awaitingSyncPlural") | i18n : daysBetween
           }}
         </div>
       </div>
     </div>
-      <div class="modal-footer">
+    <ng-container bitDialogFooter>
       <button
         type="submit"
-          class="btn btn-primary btn-submit"
-          [disabled]="form.loading"
+        bitButton
+        bitFormButton
+        buttonType="primary"
         *ngIf="!clientSecret || showRotateScreen"
       >
-          <i
-            class="bwi bwi-spinner bwi-spin"
-            title="{{ 'loading' | i18n }}"
-            *ngIf="form.loading"
-          ></i>
-          <span>
         {{ submitButtonText }}
-          </span>
       </button>
-        <button
-          type="button"
-          class="btn btn-outline-secondary"
-          data-dismiss="modal"
-          *ngIf="!showRotateScreen"
-        >
+      <button bitButton bitDialogClose type="button" *ngIf="!showRotateScreen">
         {{ "close" | i18n }}
       </button>
-        <button
-          type="button"
-          class="btn btn-outline-secondary"
-          *ngIf="showRotateScreen"
-          (click)="cancelRotate()"
-        >
+      <button bitButton type="button" *ngIf="showRotateScreen" (click)="cancelRotate()">
         {{ "cancel" | i18n }}
       </button>
       <button
+        bitButton
         type="button"
-          class="btn btn-outline-secondary"
         *ngIf="clientSecret && !showRotateScreen"
         (click)="rotateToken()"
       >
         {{ "rotateToken" | i18n }}
       </button>
-      </div>
-    </form>
-  </div>
-</div>
+    </ng-container>
+  </bit-dialog>
+</form>

apps/web/src/app/billing/organizations/billing-sync-api-key.component.ts

@@ -1,6 +1,7 @@
-import { Component } from "@angular/core";
+import { DIALOG_DATA } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
 
-import { ModalConfig } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
 import { OrganizationApiKeyType } from "@bitwarden/common/admin-console/enums";
@@ -8,8 +9,10 @@ import { OrganizationApiKeyRequest } from "@bitwarden/common/admin-console/model
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { ApiKeyResponse } from "@bitwarden/common/auth/models/response/api-key.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 { Verification } from "@bitwarden/common/types/verification";
+import { DialogService } from "@bitwarden/components";
 
 export interface BillingSyncApiModalData {
   organizationId: string;
@@ -20,41 +23,48 @@ export interface BillingSyncApiModalData {
   templateUrl: "billing-sync-api-key.component.html",
 })
 export class BillingSyncApiKeyComponent {
-  organizationId: string;
-  hasBillingToken: boolean;
+  protected organizationId: string;
+  protected hasBillingToken: boolean;
+
+  protected formGroup = new FormGroup({
+    verification: new FormControl<Verification>(null, Validators.required),
+  });
 
   showRotateScreen: boolean;
-  masterPassword: Verification;
-  formPromise: Promise<ApiKeyResponse>;
   clientSecret?: string;
   keyRevisionDate?: Date;
-  lastSyncDate?: Date = null;
+  lastSyncDate?: Date;
 
   constructor(
+    @Inject(DIALOG_DATA) protected data: BillingSyncApiModalData,
     private userVerificationService: UserVerificationService,
     private apiService: ApiService,
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private organizationApiService: OrganizationApiServiceAbstraction,
-    modalConfig: ModalConfig<BillingSyncApiModalData>
+    private logService: LogService
   ) {
-    this.organizationId = modalConfig.data.organizationId;
-    this.hasBillingToken = modalConfig.data.hasBillingToken;
+    this.organizationId = data.organizationId;
+    this.hasBillingToken = data.hasBillingToken;
   }
 
   copy() {
     this.platformUtilsService.copyToClipboard(this.clientSecret);
   }
 
-  async submit() {
-    if (this.showRotateScreen) {
-      this.formPromise = this.userVerificationService
-        .buildRequest(this.masterPassword, OrganizationApiKeyRequest)
+  submit = async () => {
+    try {
+      const request = this.userVerificationService
+        .buildRequest(this.formGroup.value.verification, OrganizationApiKeyRequest)
         .then((request) => {
           request.type = OrganizationApiKeyType.BillingSync;
+          return request;
+        });
+
+      if (this.showRotateScreen) {
+        const response = await request.then((request) => {
           return this.organizationApiService.rotateApiKey(this.organizationId, request);
         });
-      const response = await this.formPromise;
         await this.load(response);
         this.showRotateScreen = false;
         this.platformUtilsService.showToast(
@@ -63,16 +73,16 @@ export class BillingSyncApiKeyComponent {
           this.i18nService.t("billingSyncApiKeyRotated")
         );
       } else {
-      this.formPromise = this.userVerificationService
-        .buildRequest(this.masterPassword, OrganizationApiKeyRequest)
-        .then((request) => {
-          request.type = OrganizationApiKeyType.BillingSync;
+        const response = await request.then((request) => {
           return this.organizationApiService.getOrCreateApiKey(this.organizationId, request);
         });
-      const response = await this.formPromise;
         await this.load(response);
       }
+    } catch (e) {
+      this.logService.error(e);
+      throw e;
     }
+  };
 
   async load(response: ApiKeyResponse) {
     this.clientSecret = response.apiKey;
@@ -116,4 +126,8 @@ export class BillingSyncApiKeyComponent {
   get daysBetween(): number {
     return this.dayDiff(this.keyRevisionDate, new Date());
   }
+
+  static open(dialogService: DialogService, data: BillingSyncApiModalData) {
+    return dialogService.open(BillingSyncApiKeyComponent, { data });
+  }
 }

apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts

@@ -1,9 +1,8 @@
 import { DatePipe } from "@angular/common";
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-import { concatMap, Subject, takeUntil } from "rxjs";
+import { concatMap, firstValueFrom, Subject, takeUntil } from "rxjs";
 
-import { ModalConfig, ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
@@ -18,10 +17,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { DialogService } from "@bitwarden/components";
 
-import {
-  BillingSyncApiKeyComponent,
-  BillingSyncApiModalData,
-} from "./billing-sync-api-key.component";
+import { BillingSyncApiKeyComponent } from "./billing-sync-api-key.component";
 import { SecretsManagerSubscriptionOptions } from "./sm-adjust-subscription.component";
 
 @Component({
@@ -54,7 +50,6 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
     private logService: LogService,
-    private modalService: ModalService,
     private organizationService: OrganizationService,
     private organizationApiService: OrganizationApiServiceAbstraction,
     private route: ActivatedRoute,
@@ -330,22 +325,13 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
   }
 
   async manageBillingSync() {
-    const modalConfig: ModalConfig<BillingSyncApiModalData> = {
-      data: {
+    const dialogRef = BillingSyncApiKeyComponent.open(this.dialogService, {
       organizationId: this.organizationId,
       hasBillingToken: this.hasBillingSyncToken,
-      },
-    };
-    const modalRef = this.modalService.open(BillingSyncApiKeyComponent, modalConfig);
+    });
 
-    modalRef.onClosed
-      .pipe(
-        concatMap(async () => {
+    await firstValueFrom(dialogRef.closed);
     this.load();
-        }),
-        takeUntil(this.destroy$)
-      )
-      .subscribe();
   }
 
   closeDownloadLicense() {