From a674f698a270a1fbb7fa8b32db17a32266e8965b Mon Sep 17 00:00:00 2001
From: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>
Date: Wed, 18 Sep 2024 18:53:04 +0200
Subject: [PATCH] [PM-12067] Add sorting to exposed passwords report (#11029)

* Add sorting to exposed passwords report

- Create new type to represent a row within the report
- Add types and remove usage of any
- Include the exposed number of times within the data passed to the datasource/table instead of looking it up via the `exposedPasswordMap`
- Enable sorting via bitSortable
- Set default sort to order by exposed number of times in descending order

* Show headers and sort also within AC version of exposed-passwords report but hide the Owner column

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
---
 .../pages/exposed-passwords-report.component.html | 14 ++++++++------
 .../pages/exposed-passwords-report.component.ts   | 15 +++++++++------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html b/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html
index 09c717e913..43701dcd71 100644
--- a/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html
+++ b/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.html
@@ -27,12 +27,14 @@
         </ng-container>
       </bit-toggle-group>
       <bit-table [dataSource]="dataSource">
-        <ng-container header *ngIf="!isAdminConsoleActive">
+        <ng-container header>
           <tr bitRow>
             <th bitCell></th>
-            <th bitCell>{{ "name" | i18n }}</th>
-            <th bitCell>{{ "owner" | i18n }}</th>
-            <th bitCell></th>
+            <th bitCell bitSortable="name">{{ "name" | i18n }}</th>
+            <th bitCell bitSortable="organizationId" *ngIf="!isAdminConsoleActive">
+              {{ "owner" | i18n }}
+            </th>
+            <th bitCell class="tw-text-right" bitSortable="exposedXTimes"></th>
           </tr>
         </ng-container>
         <ng-template body let-rows$>
@@ -74,7 +76,7 @@
               <br />
               <small>{{ r.subTitle }}</small>
             </td>
-            <td bitCell>
+            <td bitCell *ngIf="!isAdminConsoleActive">
               <app-org-badge
                 *ngIf="!organization"
                 [disabled]="disabled"
@@ -86,7 +88,7 @@
             </td>
             <td bitCell class="tw-text-right">
               <span bitBadge variant="warning">
-                {{ "exposedXTimes" | i18n: (exposedPasswordMap.get(r.id) | number) }}
+                {{ "exposedXTimes" | i18n: (r.exposedXTimes | number) }}
               </span>
             </td>
           </tr>
diff --git a/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.ts b/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.ts
index 8503174a93..13d2804c5e 100644
--- a/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.ts
+++ b/apps/web/src/app/tools/reports/pages/exposed-passwords-report.component.ts
@@ -11,12 +11,14 @@ import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { PasswordRepromptService } from "@bitwarden/vault";
 
 import { CipherReportComponent } from "./cipher-report.component";
+
+type ReportResult = CipherView & { exposedXTimes: number };
+
 @Component({
   selector: "app-exposed-passwords-report",
   templateUrl: "exposed-passwords-report.component.html",
 })
 export class ExposedPasswordsReportComponent extends CipherReportComponent implements OnInit {
-  exposedPasswordMap = new Map<string, number>();
   disabled = true;
 
   constructor(
@@ -44,12 +46,12 @@ export class ExposedPasswordsReportComponent extends CipherReportComponent imple
 
   async setCiphers() {
     const allCiphers = await this.getAllCiphers();
-    const exposedPasswordCiphers: CipherView[] = [];
+    const exposedPasswordCiphers: ReportResult[] = [];
     const promises: Promise<void>[] = [];
     this.filterStatus = [0];
 
-    allCiphers.forEach((ciph: any) => {
-      const { type, login, isDeleted, edit, viewPassword, id } = ciph;
+    allCiphers.forEach((ciph) => {
+      const { type, login, isDeleted, edit, viewPassword } = ciph;
       if (
         type !== CipherType.Login ||
         login.password == null ||
@@ -63,8 +65,8 @@ export class ExposedPasswordsReportComponent extends CipherReportComponent imple
 
       const promise = this.auditService.passwordLeaked(login.password).then((exposedCount) => {
         if (exposedCount > 0) {
-          exposedPasswordCiphers.push(ciph);
-          this.exposedPasswordMap.set(id, exposedCount);
+          const row = { ...ciph, exposedXTimes: exposedCount } as ReportResult;
+          exposedPasswordCiphers.push(row);
         }
       });
       promises.push(promise);
@@ -72,6 +74,7 @@ export class ExposedPasswordsReportComponent extends CipherReportComponent imple
     await Promise.all(promises);
 
     this.filterCiphersByOrg(exposedPasswordCiphers);
+    this.dataSource.sort = { column: "exposedXTimes", direction: "desc" };
   }
 
   protected canManageCipher(c: CipherView): boolean {