PM-29501 use bit-chip-select

2026-02-11 05:53:42 +00:00 · 2026-01-14 14:26:23 -06:00
parent 7fef972f1d
commit d0ca7a588c
7 changed files with 104 additions and 33 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
@@ -48,6 +48,8 @@ export abstract class CipherReportComponent implements OnDestroy {

  filterStatus: any = [0];
  showFilterToggle: boolean = false;
+  selectedFilterChip: string = "0";
+  chipSelectOptions: { label: string; value: string; icon: string }[];
  vaultMsg: string = "vault";
  currentFilterStatus: number | string = 0;
  protected filterOrgStatus$ = new BehaviorSubject<number | string>(0);
@@ -288,6 +290,15 @@ export abstract class CipherReportComponent implements OnDestroy {
    return await this.cipherService.getAllDecrypted(activeUserId);
  }

+  protected canDisplayToggleGroup(): boolean {
+    return this.filterStatus.length <= 4;
+  }
+
+  async filterOrgToggleChipSelect(filterId: string | null) {
+    const selectedFilterId = filterId ?? 0;
+    await this.filterOrgToggle(selectedFilterId);
+  }
+
  protected filterCiphersByOrg(ciphersList: CipherView[]) {
    this.allCiphers = [...ciphersList];

@@ -309,5 +320,27 @@ 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) => {
+      let icon: string = "bwi-business";
+      icon = index === 0 ? "bwi-folder" : icon;
+      icon = index === 1 ? "bwi-user" : icon;
+
+      const name = this.getName(filterId);
+      const count = this.getCount(filterId);
+      const labelSuffix = count != null ? ` (${count})` : "";
+
+      return {
+        label: name + labelSuffix,
+        value: filterId,
+        icon,
+      };
+    });
+
+    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,36 @@
      <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 (!isAdminConsoleActive && canDisplayToggleGroup()) {
+        <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>
+      }
+
+      <!-- bit-chip-select start -->
+      @if (!isAdminConsoleActive && !canDisplayToggleGroup()) {
+        <bit-chip-select
+          [placeholderText]="chipSelectOptions[0].label"
+          [placeholderIcon]="chipSelectOptions[0].icon"
+          [options]="chipSelectOptions"
+          [ngModel]="selectedFilterChip"
+          (ngModelChange)="filterOrgToggleChipSelect($event)"
+          fullWidth="true"
+        ></bit-chip-select>
+      }
+      <!-- bit-chip-select end-->
+
      <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
        <ng-container header>
          <th bitCell></th>
--- a/apps/web/src/app/dirt/reports/pages/exposed-passwords-report.component.ts
+++ b/apps/web/src/app/dirt/reports/pages/exposed-passwords-report.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, Component, OnInit } from "@angular/core";

 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
@@ -18,9 +18,8 @@ import { CipherReportComponent } from "./cipher-report.component";

 type ReportResult = CipherView & { exposedXTimes: number };

-// 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-exposed-passwords-report",
  templateUrl: "exposed-passwords-report.component.html",
  standalone: false,
@@ -113,4 +112,9 @@ export class ExposedPasswordsReportComponent extends CipherReportComponent imple
  ): Promise<CipherView | null> {
    return await this.isPasswordExposed(updatedCipherView);
  }
+
+  async filterOrgToggleChipSelect(filterId: string | null) {
+    const selectedFilterId = filterId ?? 0;
+    await this.filterOrgToggle(selectedFilterId);
+  }
 }
--- 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 } from "@bitwarden/vault";

 import { HeaderModule } from "../../../../layouts/header/header.module";
@@ -42,7 +42,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/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 } from "@bitwarden/vault";

 import { HeaderModule } from "../../../../layouts/header/header.module";
@@ -41,7 +41,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/reused-passwords-report.component.html
+++ b/apps/web/src/app/dirt/reports/pages/reused-passwords-report.component.html
@@ -19,19 +19,34 @@
        {{ "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 (!isAdminConsoleActive && canDisplayToggleGroup()) {
+        <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>
+      }
+
+      <!-- bit-chip-select start -->
+      @if (!isAdminConsoleActive && !canDisplayToggleGroup()) {
+        <bit-chip-select
+          [placeholderText]="chipSelectOptions[0].label"
+          [placeholderIcon]="chipSelectOptions[0].icon"
+          [options]="chipSelectOptions"
+          [ngModel]="selectedFilterChip"
+          (ngModelChange)="filterOrgToggleChipSelect($event)"
+          fullWidth="true"
+        ></bit-chip-select>
+      }
+      <!-- bit-chip-select end-->

      <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
        <ng-container header *ngIf="!isAdminConsoleActive">
--- 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 } from "@bitwarden/vault";

 import { HeaderModule } from "../../layouts/header/header.module";
@@ -31,6 +32,7 @@ import { ReportsSharedModule } from "./shared";
    OrganizationBadgeModule,
    PipesModule,
    HeaderModule,
+    ChipSelectComponent,
  ],
  declarations: [
    BreachReportComponent,