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

2026-01-27 23:03:45 +00:00 · 2026-01-26 09:24:20 -06:00
parent 8bd8a12f65
commit 2aea6406a5
13 changed files with 170 additions and 78 deletions
--- a/apps/web/src/app/dirt/reports/pages/cipher-report.component.ts
+++ b/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;
  }
 }
--- a/apps/web/src/app/dirt/reports/pages/exposed-passwords-report.component.html
+++ b/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>
--- a/apps/web/src/app/dirt/reports/pages/inactive-two-factor-report.component.html
+++ b/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>
--- a/apps/web/src/app/dirt/reports/pages/organizations/exposed-passwords-report.component.ts
+++ b/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
--- a/apps/web/src/app/dirt/reports/pages/organizations/inactive-two-factor-report.component.ts
+++ b/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
--- a/apps/web/src/app/dirt/reports/pages/organizations/reused-passwords-report.component.ts
+++ b/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
--- a/apps/web/src/app/dirt/reports/pages/organizations/unsecured-websites-report.component.ts
+++ b/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
--- a/apps/web/src/app/dirt/reports/pages/organizations/weak-passwords-report.component.ts
+++ b/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
--- a/apps/web/src/app/dirt/reports/pages/reports-home.component.ts
+++ b/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,
--- a/apps/web/src/app/dirt/reports/pages/reused-passwords-report.component.html
+++ b/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">
--- a/apps/web/src/app/dirt/reports/pages/unsecured-websites-report.component.html
+++ b/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>
--- a/apps/web/src/app/dirt/reports/pages/weak-passwords-report.component.html
+++ b/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>
--- a/apps/web/src/app/dirt/reports/reports.module.ts
+++ b/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,