From b1a92ba04b96d6260e1445da7bad29948a41d6ca Mon Sep 17 00:00:00 2001
From: Alex Morask <144709477+amorask-bitwarden@users.noreply.github.com>
Date: Mon, 16 Oct 2023 12:10:04 -0400
Subject: [PATCH 1/3] [PM-2411] Update `billing-sync-api-key` to use Dialog
 (#6537)

* Update billing-sync-api-key dialog

* Oscar's feedback
---
 .../billing-sync-api-key.component.html       | 186 +++++++-----------
 .../billing-sync-api-key.component.ts         |  74 ++++---
 ...ganization-subscription-cloud.component.ts |  30 +--
 3 files changed, 124 insertions(+), 166 deletions(-)

diff --git a/apps/web/src/app/billing/organizations/billing-sync-api-key.component.html b/apps/web/src/app/billing/organizations/billing-sync-api-key.component.html
index a196845a395..f5225bc29a0 100644
--- a/apps/web/src/app/billing/organizations/billing-sync-api-key.component.html
+++ b/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">
-          {{ (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"
-        >
-        </app-user-verification>
-        <ng-container *ngIf="clientSecret && showRotateScreen">
-          <p>{{ "rotateBillingSyncTokenTitle" | i18n }}</p>
-          <app-callout type="warning">
-            {{ "rotateBillingSyncTokenWarning" | i18n }}
-          </app-callout>
-        </ng-container>
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-dialog>
+    <h1 bitDialogTitle>
+      {{ (hasBillingToken ? "viewBillingSyncToken" : "generateBillingSyncToken") | i18n }}
+    </h1>
+    <div bitDialogContent>
+      <app-user-verification formControlName="verification" *ngIf="!clientSecret">
+      </app-user-verification>
+
+      <ng-container *ngIf="clientSecret && showRotateScreen">
+        <p>{{ "rotateBillingSyncTokenTitle" | i18n }}</p>
+        <bit-callout type="warning">
+          {{ "rotateBillingSyncTokenWarning" | i18n }}
+        </bit-callout>
+      </ng-container>
 
-        <div *ngIf="clientSecret && !showRotateScreen">
-          <p>{{ "copyPasteBillingSync" | i18n }}</p>
-          <label for="clientSecret">{{ "billingSyncKey" | i18n }}</label>
-          <div class="input-group">
-            <input
-              id="clientSecret"
-              class="form-control text-monospace"
-              type="text"
-              [(ngModel)]="clientSecret"
-              name="clientSecret"
-              disabled
-            />
-            <div class="input-group-append">
-              <button
-                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>
-            {{ lastSyncDate | date : "medium" }}
-          </div>
-          <div class="small text-danger mt-2" *ngIf="showAwaitingSyncText">
-            <i class="bwi bwi-error"></i>
-            {{
-              (daysBetween === 1 ? "awaitingSyncSingular" : "awaitingSyncPlural")
-                | i18n : daysBetween
-            }}
-          </div>
+      <div *ngIf="clientSecret && !showRotateScreen">
+        <p>{{ "copyPasteBillingSync" | i18n }}</p>
+        <bit-form-field>
+          <bit-label>{{ "billingSyncKey" | i18n }}</bit-label>
+          <input
+            bitInput
+            id="clientSecret"
+            type="text"
+            [value]="clientSecret"
+            class="tw-font-mono"
+            disabled
+          />
+          <button
+            bitIconButton="bwi-clone"
+            bitSuffix
+            type="button"
+            [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="tw-mt-2 tw-text-sm tw-text-danger" *ngIf="showAwaitingSyncText">
+          <i class="bwi bwi-error"></i>
+          {{
+            (daysBetween === 1 ? "awaitingSyncSingular" : "awaitingSyncPlural") | i18n : daysBetween
+          }}
         </div>
       </div>
-      <div class="modal-footer">
-        <button
-          type="submit"
-          class="btn btn-primary btn-submit"
-          [disabled]="form.loading"
-          *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"
-        >
-          {{ "close" | i18n }}
-        </button>
-        <button
-          type="button"
-          class="btn btn-outline-secondary"
-          *ngIf="showRotateScreen"
-          (click)="cancelRotate()"
-        >
-          {{ "cancel" | i18n }}
-        </button>
-        <button
-          type="button"
-          class="btn btn-outline-secondary"
-          *ngIf="clientSecret && !showRotateScreen"
-          (click)="rotateToken()"
-        >
-          {{ "rotateToken" | i18n }}
-        </button>
-      </div>
-    </form>
-  </div>
-</div>
+    </div>
+    <ng-container bitDialogFooter>
+      <button
+        type="submit"
+        bitButton
+        bitFormButton
+        buttonType="primary"
+        *ngIf="!clientSecret || showRotateScreen"
+      >
+        {{ submitButtonText }}
+      </button>
+      <button bitButton bitDialogClose type="button" *ngIf="!showRotateScreen">
+        {{ "close" | i18n }}
+      </button>
+      <button bitButton type="button" *ngIf="showRotateScreen" (click)="cancelRotate()">
+        {{ "cancel" | i18n }}
+      </button>
+      <button
+        bitButton
+        type="button"
+        *ngIf="clientSecret && !showRotateScreen"
+        (click)="rotateToken()"
+      >
+        {{ "rotateToken" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>
diff --git a/apps/web/src/app/billing/organizations/billing-sync-api-key.component.ts b/apps/web/src/app/billing/organizations/billing-sync-api-key.component.ts
index f5fc3572a07..800f144b748 100644
--- a/apps/web/src/app/billing/organizations/billing-sync-api-key.component.ts
+++ b/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,59 +23,66 @@ 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(
-        "success",
-        null,
-        this.i18nService.t("billingSyncApiKeyRotated")
-      );
-    } else {
-      this.formPromise = this.userVerificationService
-        .buildRequest(this.masterPassword, OrganizationApiKeyRequest)
-        .then((request) => {
-          request.type = OrganizationApiKeyType.BillingSync;
+        await this.load(response);
+        this.showRotateScreen = false;
+        this.platformUtilsService.showToast(
+          "success",
+          null,
+          this.i18nService.t("billingSyncApiKeyRotated")
+        );
+      } else {
+        const response = await request.then((request) => {
           return this.organizationApiService.getOrCreateApiKey(this.organizationId, request);
         });
-      const response = await this.formPromise;
-      await this.load(response);
+        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 });
+  }
 }
diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts
index 8c9081ffc82..b2534e78c59 100644
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts
+++ b/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: {
-        organizationId: this.organizationId,
-        hasBillingToken: this.hasBillingSyncToken,
-      },
-    };
-    const modalRef = this.modalService.open(BillingSyncApiKeyComponent, modalConfig);
+    const dialogRef = BillingSyncApiKeyComponent.open(this.dialogService, {
+      organizationId: this.organizationId,
+      hasBillingToken: this.hasBillingSyncToken,
+    });
 
-    modalRef.onClosed
-      .pipe(
-        concatMap(async () => {
-          this.load();
-        }),
-        takeUntil(this.destroy$)
-      )
-      .subscribe();
+    await firstValueFrom(dialogRef.closed);
+    this.load();
   }
 
   closeDownloadLicense() {

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 2/3] 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 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="billingSyncTitle">
-  <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="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">
-          <label for="billingSyncKey"
-            >{{ "billingSyncKey" | i18n }} <small>(</small><small>{{ "required" | i18n }}</small
-            ><small>)</small></label
-          >
-          <input
-            id="billingSyncKey"
-            type="input"
-            name="billingSyncKey"
-            class="form-control"
-            [(ngModel)]="billingSyncKey"
-            required
-            appAutofocus
-            appInputVerbatim
-          />
-        </div>
-      </div>
-      <div class="modal-footer">
-        <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>{{ "save" | i18n }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "cancel" | i18n }}
-        </button>
-        <div class="ml-auto">
-          <button
-            #deleteBtn
-            type="button"
-            (click)="deleteConnection()"
-            class="btn btn-outline-danger"
-            appA11yTitle="{{ 'delete' | i18n }}"
-            [disabled]="form.loading"
-          >
-            <i class="bwi bwi-trash bwi-lg bwi-fw" [hidden]="form.loading" aria-hidden="true"></i>
-            <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>
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-dialog>
+    <h1 bitDialogTitle>
+      {{ "manageBillingSync" | i18n }}
+    </h1>
+    <div bitDialogContent>
+      <p>{{ "billingSyncKeyDesc" | i18n }}</p>
+      <bit-form-field>
+        <bit-label>
+          {{ "billingSyncKey" | i18n }}
+        </bit-label>
+        <input
+          bitInput
+          id="billingSyncKey"
+          type="text"
+          formControlName="billingSyncKey"
+          appAutofocus
+          appInputVerbatim
+        />
+      </bit-form-field>
+    </div>
+    <ng-container bitDialogFooter>
+      <button type="submit" bitButton bitFormButton buttonType="primary">
+        {{ "save" | i18n }}
+      </button>
+      <button bitButton bitDialogClose type="button">
+        {{ "cancel" | i18n }}
+      </button>
+      <button
+        class="tw-ml-auto"
+        type="button"
+        buttonType="danger"
+        bitIconButton="bwi-trash"
+        bitFormButton
+        [bitAction]="deleteConnection"
+        appA11yTitle="{{ 'delete' | i18n }}"
+      ></button>
+    </ng-container>
+  </bit-dialog>
+</form>
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<BillingSyncConfigApi>) => void;
+  protected entityId: string;
+  protected existingConnectionId: string;
+  protected billingSyncKey: string;
+  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,
-    protected modalRef: ModalRef,
-    config: ModalConfig<BillingSyncKeyModalData>
+    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<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(
-          request,
-          BillingSyncConfigApi
-        );
-      } else {
-        this.formPromise = this.apiService.updateOrganizationConnection(
-          request,
-          BillingSyncConfigApi,
-          this.existingConnectionId
-        );
-      }
-      const response = (await this
-        .formPromise) as OrganizationConnectionResponse<BillingSyncConfigApi>;
+
+      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<BillingSyncKeyModalData> = {
-      data: {
-        entityId: this.organizationId,
-        existingConnectionId: this.existingBillingSyncConnection?.id,
-        billingSyncKey: this.existingBillingSyncConnection?.config?.billingSyncKey,
-        setParentConnection: (connection: OrganizationConnectionResponse<BillingSyncConfigApi>) => {
-          this.existingBillingSyncConnection = connection;
-        },
+    BillingSyncKeyComponent.open(this.dialogService, {
+      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 () => {

From d79ef473c6a2e87a276e65034aa7f60e39908823 Mon Sep 17 00:00:00 2001
From: Thomas Avery <43214426+Thomas-Avery@users.noreply.github.com>
Date: Mon, 16 Oct 2023 15:46:59 -0500
Subject: [PATCH 3/3] [SM-891] Set SM flag to true for self-hosted (#6088)

* Set SM flag to true for selfhosted

* [SM-890] Add Secrets Manager self-hosted indicator (#6163)

* Add SM self-hosted indicator
---
 apps/web/config/selfhosted.json                           | 2 +-
 .../src/app/secrets-manager/shared/header.component.html  | 7 +++++++
 .../src/app/secrets-manager/shared/header.component.ts    | 6 ++++++
 .../src/app/secrets-manager/shared/header.stories.ts      | 8 ++++++++
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/apps/web/config/selfhosted.json b/apps/web/config/selfhosted.json
index 6b290baa6b5..e16df20ad50 100644
--- a/apps/web/config/selfhosted.json
+++ b/apps/web/config/selfhosted.json
@@ -7,7 +7,7 @@
     "port": 8081
   },
   "flags": {
-    "secretsManager": false,
+    "secretsManager": true,
     "showPasswordless": true,
     "enableCipherKeyEncryption": false
   }
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/header.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/shared/header.component.html
index 263281ed77a..b736a46d5a9 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/header.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/header.component.html
@@ -51,6 +51,13 @@
                 </div>
               </div>
 
+              <ng-container *ngIf="selfHosted">
+                <bit-menu-divider></bit-menu-divider>
+                <span class="tw-break-all tw-px-4 tw-py-1 tw-text-left tw-text-muted">
+                  {{ hostname }}
+                </span>
+              </ng-container>
+
               <bit-menu-divider></bit-menu-divider>
 
               <a bitMenuItem routerLink="/settings/account">
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/header.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/shared/header.component.ts
index 0b7625a3902..6b62b28ca6d 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/header.component.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/header.component.ts
@@ -5,6 +5,7 @@ import { combineLatest, map, Observable } from "rxjs";
 import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service";
 import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import { AccountProfile } from "@bitwarden/common/platform/models/domain/account";
 
@@ -26,10 +27,13 @@ export class HeaderComponent {
   protected routeData$: Observable<{ titleId: string }>;
   protected account$: Observable<AccountProfile>;
   protected canLock$: Observable<boolean>;
+  protected selfHosted: boolean;
+  protected hostname = location.hostname;
 
   constructor(
     private route: ActivatedRoute,
     private stateService: StateService,
+    private platformUtilsService: PlatformUtilsService,
     private vaultTimeoutSettingsService: VaultTimeoutSettingsService,
     private messagingService: MessagingService
   ) {
@@ -41,6 +45,8 @@ export class HeaderComponent {
       })
     );
 
+    this.selfHosted = this.platformUtilsService.isSelfHost();
+
     this.account$ = combineLatest([
       this.stateService.activeAccount$,
       this.stateService.accounts$,
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/header.stories.ts b/bitwarden_license/bit-web/src/app/secrets-manager/shared/header.stories.ts
index 8e480ae50a1..1231ba100a4 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/header.stories.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/header.stories.ts
@@ -13,6 +13,7 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { VaultTimeoutSettingsService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout-settings.service";
 import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 import {
   AvatarModule,
@@ -50,6 +51,12 @@ class MockVaultTimeoutService {
   }
 }
 
+class MockPlatformUtilsService {
+  isSelfHost() {
+    return false;
+  }
+}
+
 @Component({
   selector: "product-switcher",
   template: `<button bitIconButton="bwi-filter"></button>`,
@@ -97,6 +104,7 @@ export default {
       declarations: [HeaderComponent, MockProductSwitcher, MockDynamicAvatar],
       providers: [
         { provide: StateService, useClass: MockStateService },
+        { provide: PlatformUtilsService, useClass: MockPlatformUtilsService },
         { provide: VaultTimeoutSettingsService, useClass: MockVaultTimeoutService },
         {
           provide: MessagingService,