[PM-5014] Download license component migration (#8443)

* Download license component migration

* download license dialog component migration

* download license dialog component migration

apps/web/src/app/billing/organizations/download-license.component.html

@@ -1,39 +1,35 @@
-<form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
-  <div class="card-body">
-    <button type="button" class="close" appA11yTitle="{{ 'cancel' | i18n }}" (click)="cancel()">
-      <span aria-hidden="true">&times;</span>
-    </button>
-    <h3 class="card-body-header">{{ "downloadLicense" | i18n }}</h3>
-    <div class="row">
-      <div class="form-group col-6">
-        <div class="d-flex">
-          <label for="installationId">{{ "enterInstallationId" | i18n }}</label>
-          <a
-            class="ml-auto"
-            target="_blank"
-            rel="noreferrer"
-            appA11yTitle="{{ 'learnMore' | i18n }}"
-            href="https://bitwarden.com/help/licensing-on-premise/#organization-account-sharing"
-          >
-            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
-          </a>
+<form [formGroup]="licenseForm" [bitSubmit]="submit">
+  <bit-dialog>
+    <span bitDialogTitle>{{ "downloadLicense" | i18n }}</span>
+    <ng-container bitDialogContent>
+      <div class="tw-grid tw-grid-cols-12 tw-gap-4">
+        <div class="tw-col-span-8">
+          <bit-form-field>
+            <bit-label
+              >{{ "enterInstallationId" | i18n }}
+              <a
+                bitLink
+                class="tw-ml-auto"
+                target="_blank"
+                rel="noreferrer"
+                appA11yTitle="{{ 'learnMore' | i18n }}"
+                href="https://bitwarden.com/help/licensing-on-premise/#organization-account-sharing"
+              >
+                <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+              </a>
+            </bit-label>
+            <input type="text" bitInput formControlName="installationId" />
+          </bit-form-field>
         </div>
-        <input
-          id="installationId"
-          class="form-control"
-          type="text"
-          name="InstallationId"
-          [(ngModel)]="installationId"
-          required
-        />
       </div>
-    </div>
-    <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-      <span>{{ "submit" | i18n }}</span>
-    </button>
-    <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
-      {{ "cancel" | i18n }}
-    </button>
-  </div>
+    </ng-container>
+    <ng-container bitDialogFooter>
+      <button bitButton bitFormButton buttonType="primary" type="submit">
+        {{ "submit" | i18n }}
+      </button>
+      <button bitButton [bitAction]="cancel" bitFormButton buttonType="secondary" type="button">
+        {{ "cancel" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
 </form>

apps/web/src/app/billing/organizations/download-license.component.ts

@@ -1,50 +1,61 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { DialogConfig, DIALOG_DATA, DialogRef } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
 
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
 import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { DialogService } from "@bitwarden/components";
+
+export enum DownloadLicenseDialogResult {
+  Cancelled = "cancelled",
+  Downloaded = "downloaded",
+}
+type DownloadLicenseDialogData = {
+  /** current organization id */
+  organizationId: string;
+};
 
 @Component({
-  selector: "app-download-license",
   templateUrl: "download-license.component.html",
 })
-export class DownloadLicenseComponent {
-  @Input() organizationId: string;
-  @Output() onDownloaded = new EventEmitter();
-  @Output() onCanceled = new EventEmitter();
-
-  installationId: string;
-  formPromise: Promise<unknown>;
-
+export class DownloadLicenceDialogComponent {
+  licenseForm = this.formBuilder.group({
+    installationId: ["", [Validators.required]],
+  });
   constructor(
+    @Inject(DIALOG_DATA) protected data: DownloadLicenseDialogData,
+    private dialogRef: DialogRef,
     private fileDownloadService: FileDownloadService,
-    private logService: LogService,
     private organizationApiService: OrganizationApiServiceAbstraction,
+    protected formBuilder: FormBuilder,
   ) {}
 
-  async submit() {
-    if (this.installationId == null || this.installationId === "") {
+  submit = async () => {
+    this.licenseForm.markAllAsTouched();
+    const installationId = this.licenseForm.get("installationId").value;
+    if (installationId == null || installationId === "") {
       return;
     }
-
-    try {
-      this.formPromise = this.organizationApiService.getLicense(
-        this.organizationId,
-        this.installationId,
-      );
-      const license = await this.formPromise;
-      const licenseString = JSON.stringify(license, null, 2);
-      this.fileDownloadService.download({
-        fileName: "bitwarden_organization_license.json",
-        blobData: licenseString,
-      });
-      this.onDownloaded.emit();
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
-
-  cancel() {
-    this.onCanceled.emit();
+    const license = await this.organizationApiService.getLicense(
+      this.data.organizationId,
+      installationId,
+    );
+    const licenseString = JSON.stringify(license, null, 2);
+    this.fileDownloadService.download({
+      fileName: "bitwarden_organization_license.json",
+      blobData: licenseString,
+    });
+    this.dialogRef.close(DownloadLicenseDialogResult.Downloaded);
+  };
+  /**
+   * Strongly typed helper to open a DownloadLicenceDialogComponent
+   * @param dialogService Instance of the dialog service that will be used to open the dialog
+   * @param config Configuration for the dialog
+   */
+  static open(dialogService: DialogService, config: DialogConfig<DownloadLicenseDialogData>) {
+    return dialogService.open<DownloadLicenseDialogResult>(DownloadLicenceDialogComponent, config);
   }
+  cancel = () => {
+    this.dialogRef.close(DownloadLicenseDialogResult.Cancelled);
+  };
 }

apps/web/src/app/billing/organizations/organization-billing.module.ts

@@ -8,7 +8,7 @@ import { AdjustSubscription } from "./adjust-subscription.component";
 import { BillingSyncApiKeyComponent } from "./billing-sync-api-key.component";
 import { BillingSyncKeyComponent } from "./billing-sync-key.component";
 import { ChangePlanComponent } from "./change-plan.component";
-import { DownloadLicenseComponent } from "./download-license.component";
+import { DownloadLicenceDialogComponent } from "./download-license.component";
 import { OrgBillingHistoryViewComponent } from "./organization-billing-history-view.component";
 import { OrganizationBillingRoutingModule } from "./organization-billing-routing.module";
 import { OrganizationPlansComponent } from "./organization-plans.component";
@@ -32,7 +32,7 @@ import { SubscriptionStatusComponent } from "./subscription-status.component";
     BillingSyncApiKeyComponent,
     BillingSyncKeyComponent,
     ChangePlanComponent,
-    DownloadLicenseComponent,
+    DownloadLicenceDialogComponent,
     OrganizationSubscriptionCloudComponent,
     OrganizationSubscriptionSelfhostComponent,
     OrgBillingHistoryViewComponent,

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

@@ -246,13 +246,6 @@
         {{ (hasBillingSyncToken ? "manageBillingSync" : "setUpBillingSync") | i18n }}
       </button>
     </div>
-    <div class="tw-mt-3" *ngIf="showDownloadLicense">
-      <app-download-license
-        [organizationId]="organizationId"
-        (onDownloaded)="closeDownloadLicense()"
-        (onCanceled)="closeDownloadLicense()"
-      ></app-download-license>
-    </div>
     <ng-container *ngIf="userOrg.canEditSubscription">
       <h2 bitTypography="h2" class="tw-mt-7">{{ "additionalOptions" | i18n }}</h2>
       <p bitTypography="body1">

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

@@ -29,6 +29,7 @@ import {
 } from "../shared/offboarding-survey.component";
 
 import { BillingSyncApiKeyComponent } from "./billing-sync-api-key.component";
+import { DownloadLicenceDialogComponent } from "./download-license.component";
 import { ManageBilling } from "./icons/manage-billing.icon";
 import { SecretsManagerSubscriptionOptions } from "./sm-adjust-subscription.component";
 
@@ -354,8 +355,12 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
     this.showChangePlan = false;
   }
 
-  downloadLicense() {
-    this.showDownloadLicense = !this.showDownloadLicense;
+  async downloadLicense() {
+    DownloadLicenceDialogComponent.open(this.dialogService, {
+      data: {
+        organizationId: this.organizationId,
+      },
+    });
   }
 
   async manageBillingSync() {