From c39ffe1991c0639027084cbe8a178de9d00c6dbe Mon Sep 17 00:00:00 2001 From: Alex Morask <144709477+amorask-bitwarden@users.noreply.github.com> Date: Mon, 16 Oct 2023 15:14:29 -0400 Subject: [PATCH] Update billing-sync-key to use Dialog (#6596) --- .../billing-sync-key.component.html | 109 +++++++----------- .../billing-sync-key.component.ts | 80 +++++++------ ...ization-subscription-selfhost.component.ts | 26 ++--- 3 files changed, 94 insertions(+), 121 deletions(-) diff --git a/apps/web/src/app/billing/organizations/billing-sync-key.component.html b/apps/web/src/app/billing/organizations/billing-sync-key.component.html index b2a0c0c60dc..808cd83ec67 100644 --- a/apps/web/src/app/billing/organizations/billing-sync-key.component.html +++ b/apps/web/src/app/billing/organizations/billing-sync-key.component.html @@ -1,69 +1,40 @@ - +
+ +

+ {{ "manageBillingSync" | i18n }} +

+
+

{{ "billingSyncKeyDesc" | i18n }}

+ + + {{ "billingSyncKey" | i18n }} + + + +
+ + + + + + +
diff --git a/apps/web/src/app/billing/organizations/billing-sync-key.component.ts b/apps/web/src/app/billing/organizations/billing-sync-key.component.ts index 58969551288..aa6c1445352 100644 --- a/apps/web/src/app/billing/organizations/billing-sync-key.component.ts +++ b/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; - existingConnectionId: string; - billingSyncKey: string; - setParentConnection: (connection: OrganizationConnectionResponse) => void; + protected entityId: string; + protected existingConnectionId: string; + protected billingSyncKey: string; + protected setParentConnection: ( + connection: OrganizationConnectionResponse + ) => void; - formPromise: Promise> | Promise; + protected formGroup: FormGroup; constructor( + private dialogRef: DialogRef, + @Inject(DIALOG_DATA) protected data: BillingSyncKeyModalData, private apiService: ApiService, - private logService: LogService, - protected modalRef: ModalRef, - config: ModalConfig + private logService: LogService ) { - this.entityId = config.data.entityId; - this.existingConnectionId = config.data.existingConnectionId; - this.billingSyncKey = config.data.billingSyncKey; - this.setParentConnection = config.data.setParentConnection; + this.entityId = data.entityId; + this.existingConnectionId = data.existingConnectionId; + this.billingSyncKey = data.billingSyncKey; + this.setParentConnection = data.setParentConnection; + + this.formGroup = new FormGroup({ + billingSyncKey: new FormControl(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( - request, - BillingSyncConfigApi - ); - } else { - this.formPromise = this.apiService.updateOrganizationConnection( - request, - BillingSyncConfigApi, - this.existingConnectionId - ); - } - const response = (await this - .formPromise) as OrganizationConnectionResponse; + + const response = + this.existingConnectionId == null + ? await this.apiService.createOrganizationConnection(request, BillingSyncConfigApi) + : await this.apiService.updateOrganizationConnection( + request, + BillingSyncConfigApi, + this.existingConnectionId + ); + 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() { - this.formPromise = this.apiService.deleteOrganizationConnection(this.existingConnectionId); - await this.formPromise; + deleteConnection = async () => { + await this.apiService.deleteOrganizationConnection(this.existingConnectionId); this.setParentConnection(null); - this.modalRef.close(); + this.dialogRef.close(); + }; + + static open(dialogService: DialogService, data: BillingSyncKeyModalData) { + return dialogService.open(BillingSyncKeyComponent, { data }); } } diff --git a/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.ts b/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.ts index 69f0571f6cf..c6c6adaa35d 100644 --- a/apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.ts +++ b/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 = { - data: { - entityId: this.organizationId, - existingConnectionId: this.existingBillingSyncConnection?.id, - billingSyncKey: this.existingBillingSyncConnection?.config?.billingSyncKey, - setParentConnection: (connection: OrganizationConnectionResponse) => { - this.existingBillingSyncConnection = connection; - }, + BillingSyncKeyComponent.open(this.dialogService, { + entityId: this.organizationId, + existingConnectionId: this.existingBillingSyncConnection?.id, + billingSyncKey: this.existingBillingSyncConnection?.config?.billingSyncKey, + setParentConnection: (connection: OrganizationConnectionResponse) => { + this.existingBillingSyncConnection = connection; }, - }; - - this.modalService.open(BillingSyncKeyComponent, modalConfig); + }); } syncLicense = async () => {