Update billing-sync-key to use Dialog (#6596)

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

@@ -1,69 +1,40 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="billingSyncTitle">
+<form [formGroup]="formGroup" [bitSubmit]="submit">
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
+  <bit-dialog>
-    <form
+    <h1 bitDialogTitle>
-      class="modal-content"
+      {{ "manageBillingSync" | i18n }}
-      #form
+    </h1>
-      (ngSubmit)="submit()"
+    <div bitDialogContent>
-      [appApiAction]="formPromise"
-      ngNativeValidate
-    >
-      <div class="modal-header">
-        <h1 class="modal-title" id="billingSyncTitle">{{ "manageBillingSync" | 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">
       <p>{{ "billingSyncKeyDesc" | i18n }}</p>
-        <div class="form-group">
+      <bit-form-field>
-          <label for="billingSyncKey"
+        <bit-label>
-            >{{ "billingSyncKey" | i18n }} <small>(</small><small>{{ "required" | i18n }}</small
+          {{ "billingSyncKey" | i18n }}
-            ><small>)</small></label
+        </bit-label>
-          >
         <input
+          bitInput
           id="billingSyncKey"
-            type="input"
+          type="text"
-            name="billingSyncKey"
+          formControlName="billingSyncKey"
-            class="form-control"
-            [(ngModel)]="billingSyncKey"
-            required
           appAutofocus
           appInputVerbatim
         />
+      </bit-form-field>
     </div>
-      </div>
+    <ng-container bitDialogFooter>
-      <div class="modal-footer">
+      <button type="submit" bitButton bitFormButton buttonType="primary">
-        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+        {{ "save" | i18n }}
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-          <span>{{ "save" | i18n }}</span>
       </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+      <button bitButton bitDialogClose type="button">
         {{ "cancel" | i18n }}
       </button>
-        <div class="ml-auto">
       <button
-            #deleteBtn
+        class="tw-ml-auto"
         type="button"
-            (click)="deleteConnection()"
+        buttonType="danger"
-            class="btn btn-outline-danger"
+        bitIconButton="bwi-trash"
+        bitFormButton
+        [bitAction]="deleteConnection"
         appA11yTitle="{{ 'delete' | i18n }}"
-            [disabled]="form.loading"
+      ></button>
-          >
+    </ng-container>
-            <i class="bwi bwi-trash bwi-lg bwi-fw" [hidden]="form.loading" aria-hidden="true"></i>
+  </bit-dialog>
-            <i
-              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
-              [hidden]="!form.loading"
-              title="{{ 'loading' | i18n }}"
-              aria-hidden="true"
-            ></i>
-          </button>
-        </div>
-      </div>
 </form>
-  </div>
-</div>

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

@@ -1,7 +1,7 @@
-import { Component } from "@angular/core";
+import { DIALOG_DATA, DialogRef } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+import { FormControl, FormGroup, Validators } from "@angular/forms";
 
-import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
-import { ModalConfig } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationConnectionType } from "@bitwarden/common/admin-console/enums";
 import { OrganizationConnectionRequest } from "@bitwarden/common/admin-console/models/request/organization-connection.request";
@@ -9,6 +9,7 @@ import { OrganizationConnectionResponse } from "@bitwarden/common/admin-console/
 import { BillingSyncConfigApi } from "@bitwarden/common/billing/models/api/billing-sync-config.api";
 import { BillingSyncConfigRequest } from "@bitwarden/common/billing/models/request/billing-sync-config.request";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { DialogService } from "@bitwarden/components";
 
 export interface BillingSyncKeyModalData {
   entityId: string;
@@ -21,60 +22,65 @@ export interface BillingSyncKeyModalData {
   templateUrl: "billing-sync-key.component.html",
 })
 export class BillingSyncKeyComponent {
-  entityId: string;
+  protected entityId: string;
-  existingConnectionId: string;
+  protected existingConnectionId: string;
-  billingSyncKey: string;
+  protected billingSyncKey: string;
-  setParentConnection: (connection: OrganizationConnectionResponse<BillingSyncConfigApi>) => void;
+  protected setParentConnection: (
+    connection: OrganizationConnectionResponse<BillingSyncConfigApi>
+  ) => void;
 
-  formPromise: Promise<OrganizationConnectionResponse<BillingSyncConfigApi>> | Promise<void>;
+  protected formGroup: FormGroup;
 
   constructor(
+    private dialogRef: DialogRef,
+    @Inject(DIALOG_DATA) protected data: BillingSyncKeyModalData,
     private apiService: ApiService,
-    private logService: LogService,
+    private logService: LogService
-    protected modalRef: ModalRef,
-    config: ModalConfig<BillingSyncKeyModalData>
   ) {
-    this.entityId = config.data.entityId;
+    this.entityId = data.entityId;
-    this.existingConnectionId = config.data.existingConnectionId;
+    this.existingConnectionId = data.existingConnectionId;
-    this.billingSyncKey = config.data.billingSyncKey;
+    this.billingSyncKey = data.billingSyncKey;
-    this.setParentConnection = config.data.setParentConnection;
+    this.setParentConnection = data.setParentConnection;
+
+    this.formGroup = new FormGroup({
+      billingSyncKey: new FormControl<string>(this.billingSyncKey, Validators.required),
+    });
   }
 
-  async submit() {
+  submit = async () => {
     try {
       const request = new OrganizationConnectionRequest(
         this.entityId,
         OrganizationConnectionType.CloudBillingSync,
         true,
-        new BillingSyncConfigRequest(this.billingSyncKey)
+        new BillingSyncConfigRequest(this.formGroup.value.billingSyncKey)
       );
-      if (this.existingConnectionId == null) {
+
-        this.formPromise = this.apiService.createOrganizationConnection(
+      const response =
-          request,
+        this.existingConnectionId == null
-          BillingSyncConfigApi
+          ? await this.apiService.createOrganizationConnection(request, BillingSyncConfigApi)
-        );
+          : await this.apiService.updateOrganizationConnection(
-      } else {
-        this.formPromise = this.apiService.updateOrganizationConnection(
               request,
               BillingSyncConfigApi,
               this.existingConnectionId
             );
-      }
+
-      const response = (await this
-        .formPromise) as OrganizationConnectionResponse<BillingSyncConfigApi>;
       this.existingConnectionId = response?.id;
       this.billingSyncKey = response?.config?.billingSyncKey;
       this.setParentConnection(response);
-      this.modalRef.close();
+      this.dialogRef.close();
     } catch (e) {
       this.logService.error(e);
     }
-  }
+  };
 
-  async deleteConnection() {
+  deleteConnection = async () => {
-    this.formPromise = this.apiService.deleteOrganizationConnection(this.existingConnectionId);
+    await this.apiService.deleteOrganizationConnection(this.existingConnectionId);
-    await this.formPromise;
     this.setParentConnection(null);
-    this.modalRef.close();
+    this.dialogRef.close();
+  };
+
+  static open(dialogService: DialogService, data: BillingSyncKeyModalData) {
+    return dialogService.open(BillingSyncKeyComponent, { data });
   }
 }

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

@@ -3,7 +3,6 @@ import { FormControl, FormGroup } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 import { concatMap, 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";
@@ -16,8 +15,9 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { DialogService } from "@bitwarden/components";
 
-import { BillingSyncKeyComponent, BillingSyncKeyModalData } from "./billing-sync-key.component";
+import { BillingSyncKeyComponent } from "./billing-sync-key.component";
 
 enum LicenseOptions {
   SYNC = 0,
@@ -73,7 +73,6 @@ export class OrganizationSubscriptionSelfhostComponent implements OnInit, OnDest
   }
 
   constructor(
-    private modalService: ModalService,
     private messagingService: MessagingService,
     private apiService: ApiService,
     private organizationService: OrganizationService,
@@ -81,7 +80,8 @@ export class OrganizationSubscriptionSelfhostComponent implements OnInit, OnDest
     private organizationApiService: OrganizationApiServiceAbstraction,
     private platformUtilsService: PlatformUtilsService,
     private i18nService: I18nService,
-    private environmentService: EnvironmentService
+    private environmentService: EnvironmentService,
+    private dialogService: DialogService
   ) {
     this.cloudWebVaultUrl = this.environmentService.getCloudWebVaultUrl();
   }
@@ -144,18 +144,14 @@ export class OrganizationSubscriptionSelfhostComponent implements OnInit, OnDest
   }
 
   manageBillingSyncSelfHosted() {
-    const modalConfig: ModalConfig<BillingSyncKeyModalData> = {
+    BillingSyncKeyComponent.open(this.dialogService, {
-      data: {
       entityId: this.organizationId,
       existingConnectionId: this.existingBillingSyncConnection?.id,
       billingSyncKey: this.existingBillingSyncConnection?.config?.billingSyncKey,
       setParentConnection: (connection: OrganizationConnectionResponse<BillingSyncConfigApi>) => {
         this.existingBillingSyncConnection = connection;
       },
-      },
+    });
-    };
-
-    this.modalService.open(BillingSyncKeyComponent, modalConfig);
   }
 
   syncLicense = async () => {