[PM-29501] Use bit-chip-select when there are too many orgs (#18368)

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

@@ -46,8 +46,11 @@ export abstract class CipherReportComponent implements OnDestroy {
   organizations: Organization[] = [];
   organizations$: Observable<Organization[]>;
 
+  readonly maxItemsToSwitchToChipSelect = 5;
   filterStatus: any = [0];
   showFilterToggle: boolean = false;
+  selectedFilterChip: string = "0";
+  chipSelectOptions: { label: string; value: string }[] = [];
   vaultMsg: string = "vault";
   currentFilterStatus: number | string = 0;
   protected filterOrgStatus$ = new BehaviorSubject<number | string>(0);
@@ -288,6 +291,15 @@ export abstract class CipherReportComponent implements OnDestroy {
     return await this.cipherService.getAllDecrypted(activeUserId);
   }
 
+  protected canDisplayToggleGroup(): boolean {
+    return this.filterStatus.length <= this.maxItemsToSwitchToChipSelect;
+  }
+
+  async filterOrgToggleChipSelect(filterId: string | null) {
+    const selectedFilterId = filterId ?? 0;
+    await this.filterOrgToggle(selectedFilterId);
+  }
+
   protected filterCiphersByOrg(ciphersList: CipherView[]) {
     this.allCiphers = [...ciphersList];
 
@@ -309,5 +321,22 @@ export abstract class CipherReportComponent implements OnDestroy {
       this.showFilterToggle = false;
       this.vaultMsg = "vault";
     }
+
+    this.chipSelectOptions = this.setupChipSelectOptions(this.filterStatus);
+  }
+
+  private setupChipSelectOptions(filters: string[]) {
+    const options = filters.map((filterId: string, index: number) => {
+      const name = this.getName(filterId);
+      const count = this.getCount(filterId);
+      const labelSuffix = count != null ? ` (${count})` : "";
+
+      return {
+        label: name + labelSuffix,
+        value: filterId,
+      };
+    });
+
+    return options;
   }
 }

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

@@ -13,19 +13,32 @@
       <bit-callout type="danger" title="{{ 'exposedPasswordsFound' | i18n }}" [useAlertRole]="true">
         {{ "exposedPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
       </bit-callout>
-      <bit-toggle-group
-        *ngIf="showFilterToggle && !isAdminConsoleActive"
-        [selected]="filterOrgStatus$ | async"
-        (selectedChange)="filterOrgToggle($event)"
-        [attr.aria-label]="'addAccessFilter' | i18n"
-      >
-        <ng-container *ngFor="let status of filterStatus">
-          <bit-toggle [value]="status">
-            {{ getName(status) }}
-            <span bitBadge variant="info"> {{ getCount(status) }} </span>
-          </bit-toggle>
-        </ng-container>
-      </bit-toggle-group>
+
+      @if (showFilterToggle && !isAdminConsoleActive) {
+        @if (canDisplayToggleGroup()) {
+          <bit-toggle-group
+            [selected]="filterOrgStatus$ | async"
+            (selectedChange)="filterOrgToggle($event)"
+            [attr.aria-label]="'addAccessFilter' | i18n"
+          >
+            <ng-container *ngFor="let status of filterStatus">
+              <bit-toggle [value]="status">
+                {{ getName(status) }}
+                <span bitBadge variant="info"> {{ getCount(status) }} </span>
+              </bit-toggle>
+            </ng-container>
+          </bit-toggle-group>
+        } @else {
+          <bit-chip-select
+            [placeholderText]="chipSelectOptions[0].label"
+            [options]="chipSelectOptions"
+            [ngModel]="selectedFilterChip"
+            (ngModelChange)="filterOrgToggleChipSelect($event)"
+            fullWidth="true"
+          ></bit-chip-select>
+        }
+      }
+
       <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
         <ng-container header>
           <th bitCell></th>

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

@@ -18,19 +18,32 @@
       <bit-callout type="danger" title="{{ 'inactive2faFound' | i18n }}">
         {{ "inactive2faFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
       </bit-callout>
-      <bit-toggle-group
-        *ngIf="showFilterToggle && !isAdminConsoleActive"
-        [selected]="filterOrgStatus$ | async"
-        (selectedChange)="filterOrgToggle($event)"
-        [attr.aria-label]="'addAccessFilter' | i18n"
-      >
-        <ng-container *ngFor="let status of filterStatus">
-          <bit-toggle [value]="status">
-            {{ getName(status) }}
-            <span bitBadge variant="info"> {{ getCount(status) }} </span>
-          </bit-toggle>
-        </ng-container>
-      </bit-toggle-group>
+
+      @if (showFilterToggle && !isAdminConsoleActive) {
+        @if (canDisplayToggleGroup()) {
+          <bit-toggle-group
+            [selected]="filterOrgStatus$ | async"
+            (selectedChange)="filterOrgToggle($event)"
+            [attr.aria-label]="'addAccessFilter' | i18n"
+          >
+            <ng-container *ngFor="let status of filterStatus">
+              <bit-toggle [value]="status">
+                {{ getName(status) }}
+                <span bitBadge variant="info"> {{ getCount(status) }} </span>
+              </bit-toggle>
+            </ng-container>
+          </bit-toggle-group>
+        } @else {
+          <bit-chip-select
+            [placeholderText]="chipSelectOptions[0].label"
+            [options]="chipSelectOptions"
+            [ngModel]="selectedFilterChip"
+            (ngModelChange)="filterOrgToggleChipSelect($event)"
+            fullWidth="true"
+          ></bit-chip-select>
+        }
+      }
+
       <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
         <ng-container header *ngIf="!isAdminConsoleActive">
           <th bitCell></th>

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

@@ -16,7 +16,7 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { DialogService } from "@bitwarden/components";
+import { ChipSelectComponent, DialogService } from "@bitwarden/components";
 import {
   PasswordRepromptService,
   CipherFormConfigService,
@@ -45,7 +45,7 @@ import { ExposedPasswordsReportComponent as BaseExposedPasswordsReportComponent
     RoutedVaultFilterService,
     RoutedVaultFilterBridgeService,
   ],
-  imports: [SharedModule, HeaderModule, OrganizationBadgeModule, PipesModule],
+  imports: [SharedModule, HeaderModule, OrganizationBadgeModule, PipesModule, ChipSelectComponent],
 })
 export class ExposedPasswordsReportComponent
   extends BaseExposedPasswordsReportComponent

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

@@ -11,7 +11,7 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { DialogService } from "@bitwarden/components";
+import { ChipSelectComponent, DialogService } from "@bitwarden/components";
 import {
   CipherFormConfigService,
   PasswordRepromptService,
@@ -39,7 +39,7 @@ import { InactiveTwoFactorReportComponent as BaseInactiveTwoFactorReportComponen
     RoutedVaultFilterService,
     RoutedVaultFilterBridgeService,
   ],
-  imports: [SharedModule, HeaderModule, OrganizationBadgeModule, PipesModule],
+  imports: [SharedModule, HeaderModule, OrganizationBadgeModule, PipesModule, ChipSelectComponent],
 })
 export class InactiveTwoFactorReportComponent
   extends BaseInactiveTwoFactorReportComponent

apps/web/src/app/dirt/reports/pages/organizations/reused-passwords-report.component.ts

@@ -15,7 +15,7 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { DialogService } from "@bitwarden/components";
+import { ChipSelectComponent, DialogService } from "@bitwarden/components";
 import {
   CipherFormConfigService,
   PasswordRepromptService,
@@ -44,7 +44,7 @@ import { ReusedPasswordsReportComponent as BaseReusedPasswordsReportComponent }
     RoutedVaultFilterService,
     RoutedVaultFilterBridgeService,
   ],
-  imports: [SharedModule, HeaderModule, OrganizationBadgeModule, PipesModule],
+  imports: [SharedModule, HeaderModule, OrganizationBadgeModule, PipesModule, ChipSelectComponent],
 })
 export class ReusedPasswordsReportComponent
   extends BaseReusedPasswordsReportComponent

apps/web/src/app/dirt/reports/pages/organizations/unsecured-websites-report.component.ts

@@ -15,7 +15,7 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { DialogService } from "@bitwarden/components";
+import { ChipSelectComponent, DialogService } from "@bitwarden/components";
 import {
   CipherFormConfigService,
   PasswordRepromptService,
@@ -44,7 +44,7 @@ import { UnsecuredWebsitesReportComponent as BaseUnsecuredWebsitesReportComponen
     RoutedVaultFilterService,
     RoutedVaultFilterBridgeService,
   ],
-  imports: [SharedModule, HeaderModule, OrganizationBadgeModule, PipesModule],
+  imports: [SharedModule, HeaderModule, OrganizationBadgeModule, PipesModule, ChipSelectComponent],
 })
 export class UnsecuredWebsitesReportComponent
   extends BaseUnsecuredWebsitesReportComponent

apps/web/src/app/dirt/reports/pages/organizations/weak-passwords-report.component.ts

@@ -16,7 +16,7 @@ import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.servi
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import { DialogService } from "@bitwarden/components";
+import { ChipSelectComponent, DialogService } from "@bitwarden/components";
 import {
   CipherFormConfigService,
   PasswordRepromptService,
@@ -45,7 +45,7 @@ import { WeakPasswordsReportComponent as BaseWeakPasswordsReportComponent } from
     RoutedVaultFilterService,
     RoutedVaultFilterBridgeService,
   ],
-  imports: [SharedModule, HeaderModule, OrganizationBadgeModule, PipesModule],
+  imports: [SharedModule, HeaderModule, OrganizationBadgeModule, PipesModule, ChipSelectComponent],
 })
 export class WeakPasswordsReportComponent
   extends BaseWeakPasswordsReportComponent

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

@@ -1,6 +1,6 @@
 // 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, Component, OnInit } from "@angular/core";
 import { firstValueFrom } from "rxjs";
 
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
@@ -9,9 +9,8 @@ import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abs
 import { reports, ReportType } from "../reports";
 import { ReportEntry, ReportVariant } from "../shared";
 
-// 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-reports-home",
   templateUrl: "reports-home.component.html",
   standalone: false,

apps/web/src/app/dirt/reports/pages/reused-passwords-report.component.html

@@ -19,19 +19,30 @@
         {{ "reusedPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
       </bit-callout>
 
-      <bit-toggle-group
-        *ngIf="showFilterToggle && !isAdminConsoleActive"
-        [selected]="filterOrgStatus$ | async"
-        (selectedChange)="filterOrgToggle($event)"
-        [attr.aria-label]="'addAccessFilter' | i18n"
-      >
-        <ng-container *ngFor="let status of filterStatus">
-          <bit-toggle [value]="status">
-            {{ getName(status) }}
-            <span bitBadge variant="info"> {{ getCount(status) }} </span>
-          </bit-toggle>
-        </ng-container>
-      </bit-toggle-group>
+      @if (showFilterToggle && !isAdminConsoleActive) {
+        @if (canDisplayToggleGroup()) {
+          <bit-toggle-group
+            [selected]="filterOrgStatus$ | async"
+            (selectedChange)="filterOrgToggle($event)"
+            [attr.aria-label]="'addAccessFilter' | i18n"
+          >
+            <ng-container *ngFor="let status of filterStatus">
+              <bit-toggle [value]="status">
+                {{ getName(status) }}
+                <span bitBadge variant="info"> {{ getCount(status) }} </span>
+              </bit-toggle>
+            </ng-container>
+          </bit-toggle-group>
+        } @else {
+          <bit-chip-select
+            [placeholderText]="chipSelectOptions[0].label"
+            [options]="chipSelectOptions"
+            [ngModel]="selectedFilterChip"
+            (ngModelChange)="filterOrgToggleChipSelect($event)"
+            fullWidth="true"
+          ></bit-chip-select>
+        }
+      }
 
       <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
         <ng-container header *ngIf="!isAdminConsoleActive">

apps/web/src/app/dirt/reports/pages/unsecured-websites-report.component.html

@@ -19,19 +19,31 @@
         {{ "unsecuredWebsitesFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
       </bit-callout>
 
-      <bit-toggle-group
-        *ngIf="showFilterToggle && !isAdminConsoleActive"
-        [selected]="filterOrgStatus$ | async"
-        (selectedChange)="filterOrgToggle($event)"
-        [attr.aria-label]="'addAccessFilter' | i18n"
-      >
-        <ng-container *ngFor="let status of filterStatus">
-          <bit-toggle [value]="status">
-            {{ getName(status) }}
-            <span bitBadge variant="info"> {{ getCount(status) }} </span>
-          </bit-toggle>
-        </ng-container>
-      </bit-toggle-group>
+      @if (showFilterToggle && !isAdminConsoleActive) {
+        @if (canDisplayToggleGroup()) {
+          <bit-toggle-group
+            [selected]="filterOrgStatus$ | async"
+            (selectedChange)="filterOrgToggle($event)"
+            [attr.aria-label]="'addAccessFilter' | i18n"
+          >
+            <ng-container *ngFor="let status of filterStatus">
+              <bit-toggle [value]="status">
+                {{ getName(status) }}
+                <span bitBadge variant="info"> {{ getCount(status) }} </span>
+              </bit-toggle>
+            </ng-container>
+          </bit-toggle-group>
+        } @else {
+          <bit-chip-select
+            [placeholderText]="chipSelectOptions[0].label"
+            [options]="chipSelectOptions"
+            [ngModel]="selectedFilterChip"
+            (ngModelChange)="filterOrgToggleChipSelect($event)"
+            fullWidth="true"
+          ></bit-chip-select>
+        }
+      }
+
       <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
         <ng-container header *ngIf="!isAdminConsoleActive">
           <th bitCell></th>

apps/web/src/app/dirt/reports/pages/weak-passwords-report.component.html

@@ -18,19 +18,32 @@
       <bit-callout type="danger" title="{{ 'weakPasswordsFound' | i18n }}">
         {{ "weakPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
       </bit-callout>
-      <bit-toggle-group
-        *ngIf="showFilterToggle && !isAdminConsoleActive"
-        [selected]="filterOrgStatus$ | async"
-        (selectedChange)="filterOrgToggle($event)"
-        [attr.aria-label]="'addAccessFilter' | i18n"
-      >
-        <ng-container *ngFor="let status of filterStatus">
-          <bit-toggle [value]="status">
-            {{ getName(status) }}
-            <span bitBadge variant="info"> {{ getCount(status) }} </span>
-          </bit-toggle>
-        </ng-container>
-      </bit-toggle-group>
+
+      @if (showFilterToggle && !isAdminConsoleActive) {
+        @if (canDisplayToggleGroup()) {
+          <bit-toggle-group
+            [selected]="filterOrgStatus$ | async"
+            (selectedChange)="filterOrgToggle($event)"
+            [attr.aria-label]="'addAccessFilter' | i18n"
+          >
+            <ng-container *ngFor="let status of filterStatus">
+              <bit-toggle [value]="status">
+                {{ getName(status) }}
+                <span bitBadge variant="info"> {{ getCount(status) }} </span>
+              </bit-toggle>
+            </ng-container>
+          </bit-toggle-group>
+        } @else {
+          <bit-chip-select
+            [placeholderText]="chipSelectOptions[0].label"
+            [options]="chipSelectOptions"
+            [ngModel]="selectedFilterChip"
+            (ngModelChange)="filterOrgToggleChipSelect($event)"
+            fullWidth="true"
+          ></bit-chip-select>
+        }
+      }
+
       <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
         <ng-container header>
           <th bitCell></th>

apps/web/src/app/dirt/reports/reports.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
+import { ChipSelectComponent } from "@bitwarden/components";
 import {
   CipherFormConfigService,
   DefaultCipherFormConfigService,
@@ -34,6 +35,7 @@ import { ReportsSharedModule } from "./shared";
     OrganizationBadgeModule,
     PipesModule,
     HeaderModule,
+    ChipSelectComponent,
   ],
   declarations: [
     BreachReportComponent,