Merge branch 'main' into PM-22143-Tools-Refactor-TS-Enums-to-be-const-objects

Author: harr1424

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

@@ -344,6 +344,7 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
       data: {
         type: "Organization",
         id: this.organizationId,
+        plan: this.sub.plan.type,
       },
     });
 

apps/web/src/app/billing/shared/offboarding-survey.component.html

@@ -21,7 +21,8 @@
         </bit-label>
         <textarea rows="4" bitInput formControlName="feedback"></textarea>
         <bit-hint>{{
-          "charactersCurrentAndMaximum" | i18n: formGroup.value.feedback.length : MaxFeedbackLength
+          "charactersCurrentAndMaximum"
+            | i18n: formGroup.value.feedback?.length ?? 0 : MaxFeedbackLength
         }}</bit-hint>
       </bit-form-field>
     </div>

apps/web/src/app/billing/shared/offboarding-survey.component.ts

@@ -1,9 +1,10 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { Component, Inject } from "@angular/core";
+import { ChangeDetectionStrategy, Component, Inject } from "@angular/core";
 import { FormBuilder, Validators } from "@angular/forms";
 
 import { BillingApiServiceAbstraction as BillingApiService } from "@bitwarden/common/billing/abstractions/billing-api.service.abstraction";
+import { PlanType } from "@bitwarden/common/billing/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import {
@@ -21,6 +22,7 @@ type UserOffboardingParams = {
 type OrganizationOffboardingParams = {
   type: "Organization";
   id: string;
+  plan: PlanType;
 };
 
 export type OffboardingSurveyDialogParams = UserOffboardingParams | OrganizationOffboardingParams;
@@ -46,50 +48,20 @@ export const openOffboardingSurvey = (
     dialogConfig,
   );
 
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "app-cancel-subscription-form",
   templateUrl: "offboarding-survey.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })
 export class OffboardingSurveyComponent {
   protected ResultType = OffboardingSurveyDialogResultType;
   protected readonly MaxFeedbackLength = 400;
 
-  protected readonly reasons: Reason[] = [
-    {
-      value: null,
-      text: this.i18nService.t("selectPlaceholder"),
-    },
-    {
-      value: "missing_features",
-      text: this.i18nService.t("missingFeatures"),
-    },
-    {
-      value: "switched_service",
-      text: this.i18nService.t("movingToAnotherTool"),
-    },
-    {
-      value: "too_complex",
-      text: this.i18nService.t("tooDifficultToUse"),
-    },
-    {
-      value: "unused",
-      text: this.i18nService.t("notUsingEnough"),
-    },
-    {
-      value: "too_expensive",
-      text: this.i18nService.t("tooExpensive"),
-    },
-    {
-      value: "other",
-      text: this.i18nService.t("other"),
-    },
-  ];
+  protected readonly reasons: Reason[] = [];
 
   protected formGroup = this.formBuilder.group({
-    reason: [this.reasons[0].value, [Validators.required]],
+    reason: [null, [Validators.required]],
     feedback: ["", [Validators.maxLength(this.MaxFeedbackLength)]],
   });
 
@@ -101,7 +73,35 @@ export class OffboardingSurveyComponent {
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
     private toastService: ToastService,
-  ) {}
+  ) {
+    this.reasons = [
+      {
+        value: null,
+        text: this.i18nService.t("selectPlaceholder"),
+      },
+      {
+        value: "missing_features",
+        text: this.i18nService.t("missingFeatures"),
+      },
+      {
+        value: "switched_service",
+        text: this.i18nService.t("movingToAnotherTool"),
+      },
+      {
+        value: "too_complex",
+        text: this.i18nService.t("tooDifficultToUse"),
+      },
+      {
+        value: "unused",
+        text: this.i18nService.t("notUsingEnough"),
+      },
+      this.getSwitchingReason(),
+      {
+        value: "other",
+        text: this.i18nService.t("other"),
+      },
+    ];
+  }
 
   submit = async () => {
     this.formGroup.markAllAsTouched();
@@ -127,4 +127,24 @@ export class OffboardingSurveyComponent {
 
     this.dialogRef.close(this.ResultType.Submitted);
   };
+
+  private getSwitchingReason(): Reason {
+    if (this.dialogParams.type === "User") {
+      return {
+        value: "too_expensive",
+        text: this.i18nService.t("switchToFreePlan"),
+      };
+    }
+
+    const isFamilyPlan = [
+      PlanType.FamiliesAnnually,
+      PlanType.FamiliesAnnually2019,
+      PlanType.FamiliesAnnually2025,
+    ].includes(this.dialogParams.plan);
+
+    return {
+      value: "too_expensive",
+      text: this.i18nService.t(isFamilyPlan ? "switchToFreeOrg" : "tooExpensive"),
+    };
+  }
 }

apps/web/src/app/dirt/reports/pages/cipher-report.component.ts

@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { Directive, OnDestroy } from "@angular/core";
 import {
   BehaviorSubject,
@@ -36,24 +34,24 @@ import {
 import { AdminConsoleCipherFormConfigService } from "../../../vault/org-vault/services/admin-console-cipher-form-config.service";
 
 @Directive()
-export class CipherReportComponent implements OnDestroy {
+export abstract class CipherReportComponent implements OnDestroy {
   isAdminConsoleActive = false;
 
   loading = false;
   hasLoaded = false;
   ciphers: CipherView[] = [];
   allCiphers: CipherView[] = [];
   dataSource = new TableDataSource<CipherView>();
-  organization: Organization;
-  organizations: Organization[];
+  organization: Organization | undefined = undefined;
+  organizations: Organization[] = [];
   organizations$: Observable<Organization[]>;
 
   filterStatus: any = [0];
   showFilterToggle: boolean = false;
   vaultMsg: string = "vault";
-  currentFilterStatus: number | string;
+  currentFilterStatus: number | string = 0;
   protected filterOrgStatus$ = new BehaviorSubject<number | string>(0);
-  private destroyed$: Subject<void> = new Subject();
+  protected destroyed$: Subject<void> = new Subject();
   private vaultItemDialogRef?: DialogRef<VaultItemDialogResult> | undefined;
 
   constructor(
@@ -107,7 +105,7 @@ export class CipherReportComponent implements OnDestroy {
     if (filterId === 0) {
       cipherCount = this.allCiphers.length;
     } else if (filterId === 1) {
-      cipherCount = this.allCiphers.filter((c) => c.organizationId === null).length;
+      cipherCount = this.allCiphers.filter((c) => !c.organizationId).length;
     } else {
       this.organizations.filter((org: Organization) => {
         if (org.id === filterId) {
@@ -121,9 +119,9 @@ export class CipherReportComponent implements OnDestroy {
   }
 
   async filterOrgToggle(status: any) {
-    let filter = null;
+    let filter = (c: CipherView) => true;
     if (typeof status === "number" && status === 1) {
-      filter = (c: CipherView) => c.organizationId == null;
+      filter = (c: CipherView) => !c.organizationId;
     } else if (typeof status === "string") {
       const orgId = status as OrganizationId;
       filter = (c: CipherView) => c.organizationId === orgId;
@@ -185,7 +183,7 @@ export class CipherReportComponent implements OnDestroy {
     cipher: CipherView,
     activeCollectionId?: CollectionId,
   ) {
-    const disableForm = cipher ? !cipher.edit && !this.organization.canEditAllCiphers : false;
+    const disableForm = cipher ? !cipher.edit && !this.organization?.canEditAllCiphers : false;
 
     this.vaultItemDialogRef = VaultItemDialogComponent.open(this.dialogService, {
       mode,
@@ -230,10 +228,11 @@ export class CipherReportComponent implements OnDestroy {
       let updatedCipher = await this.cipherService.get(cipher.id, activeUserId);
 
       if (this.isAdminConsoleActive) {
-        updatedCipher = await this.adminConsoleCipherFormConfigService.getCipher(
-          cipher.id as CipherId,
-          this.organization,
-        );
+        updatedCipher =
+          (await this.adminConsoleCipherFormConfigService.getCipher(
+            cipher.id as CipherId,
+            this.organization!,
+          )) ?? updatedCipher;
       }
 
       // convert cipher to cipher view model

apps/web/src/app/dirt/reports/pages/exposed-passwords-report.component.spec.ts

@@ -90,6 +90,7 @@ describe("ExposedPasswordsReportComponent", () => {
   });
 
   beforeEach(() => {
+    jest.clearAllMocks();
     fixture = TestBed.createComponent(ExposedPasswordsReportComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

apps/web/src/app/dirt/reports/pages/inactive-two-factor-report.component.spec.ts

@@ -1,3 +1,4 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { MockProxy, mock } from "jest-mock-extended";
 import { of } from "rxjs";
@@ -29,14 +30,13 @@ describe("InactiveTwoFactorReportComponent", () => {
   const userId = Utils.newGuid() as UserId;
   const accountService: FakeAccountService = mockAccountServiceWith(userId);
 
-  beforeEach(() => {
+  beforeEach(async () => {
     let cipherFormConfigServiceMock: MockProxy<CipherFormConfigService>;
     organizationService = mock<OrganizationService>();
     organizationService.organizations$.mockReturnValue(of([]));
     syncServiceMock = mock<SyncService>();
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    TestBed.configureTestingModule({
+
+    await TestBed.configureTestingModule({
       declarations: [InactiveTwoFactorReportComponent, I18nPipe],
       providers: [
         {
@@ -80,9 +80,7 @@ describe("InactiveTwoFactorReportComponent", () => {
           useValue: adminConsoleCipherFormConfigServiceMock,
         },
       ],
-      schemas: [],
-      // FIXME(PM-18598): Replace unknownElements and unknownProperties with actual imports
-      errorOnUnknownElements: false,
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
   });
 

apps/web/src/app/dirt/reports/pages/inactive-two-factor-report.component.ts

@@ -1,6 +1,4 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { Component, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from "@angular/core";
 
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
@@ -19,9 +17,8 @@ import { AdminConsoleCipherFormConfigService } from "../../../vault/org-vault/se
 
 import { CipherReportComponent } from "./cipher-report.component";
 
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: "app-inactive-two-factor-report",
   templateUrl: "inactive-two-factor-report.component.html",
   standalone: false,
@@ -42,6 +39,7 @@ export class InactiveTwoFactorReportComponent extends CipherReportComponent impl
     syncService: SyncService,
     cipherFormConfigService: CipherFormConfigService,
     adminConsoleCipherFormConfigService: AdminConsoleCipherFormConfigService,
+    protected changeDetectorRef: ChangeDetectorRef,
   ) {
     super(
       cipherService,
@@ -86,6 +84,7 @@ export class InactiveTwoFactorReportComponent extends CipherReportComponent impl
 
       this.filterCiphersByOrg(inactive2faCiphers);
       this.cipherDocs = docs;
+      this.changeDetectorRef.markForCheck();
     }
   }
 
@@ -157,6 +156,7 @@ export class InactiveTwoFactorReportComponent extends CipherReportComponent impl
       }
       this.services.set(serviceData.domain, serviceData.documentation);
     }
+    this.changeDetectorRef.markForCheck();
   }
 
   /**