From 3ac62181f53b131e20f00377bd6834f10cdb52c1 Mon Sep 17 00:00:00 2001
From: cd-bitwarden <106776772+cd-bitwarden@users.noreply.github.com>
Date: Thu, 28 Aug 2025 13:26:26 -0400
Subject: [PATCH] Updating the secrets list to use virtual scroll

---
 .../shared/secrets-list.component.html        | 241 ++++++++----------
 1 file changed, 106 insertions(+), 135 deletions(-)

diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
index 859c7417eb8..c96d6a811ba 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html
@@ -23,149 +23,120 @@
   </bit-no-items>
 </ng-container>
 
-<bit-table *ngIf="secrets?.length >= 1" [dataSource]="dataSource">
+<bit-table-scroll *ngIf="secrets?.length >= 1" [dataSource]="dataSource" [rowSize]="53">
   <ng-container header>
-    <tr>
-      <th bitCell class="tw-w-0">
-        <label class="!tw-mb-0 tw-flex tw-w-fit tw-gap-2 !tw-font-bold !tw-text-muted">
-          <input
-            type="checkbox"
-            (change)="$event ? toggleAll() : null"
-            [checked]="selection.hasValue() && isAllSelected()"
-            [indeterminate]="selection.hasValue() && !isAllSelected()"
-          />
-          {{ "all" | i18n }}
-        </label>
-      </th>
-      <th bitCell bitSortable="name" default>{{ "name" | i18n }}</th>
-      <th bitCell bitSortable="projects" [fn]="sortProjects">{{ "project" | i18n }}</th>
-      <th bitCell bitSortable="revisionDate">{{ "lastEdited" | i18n }}</th>
-      <th bitCell class="tw-w-0">
-        <button
-          type="button"
-          bitIconButton="bwi-ellipsis-v"
-          buttonType="main"
-          [title]="'options' | i18n"
-          [attr.aria-label]="'options' | i18n"
-          [bitMenuTriggerFor]="tableMenu"
-        ></button>
-      </th>
-    </tr>
-  </ng-container>
-  <ng-template body let-rows$>
-    <tr bitRow *ngFor="let secret of rows$ | async">
-      <td bitCell>
+    <th bitCell class="tw-w-0">
+      <label class="!tw-mb-0 tw-flex tw-w-fit tw-gap-2 !tw-font-bold !tw-text-muted">
         <input
           type="checkbox"
-          (change)="$event ? selection.toggle(secret.id) : null"
-          [checked]="selection.isSelected(secret.id)"
+          (change)="$event ? toggleAll() : null"
+          [checked]="selection.hasValue() && isAllSelected()"
+          [indeterminate]="selection.hasValue() && !isAllSelected()"
         />
-      </td>
-      <td bitCell>
-        <div class="tw-flex tw-items-center tw-gap-4 tw-break-all">
-          <i class="bwi bwi-key tw-text-muted" aria-hidden="true"></i>
-          <div>
-            <div *ngIf="!trash">
-              <button type="button" bitLink (click)="editSecret(secret)">
-                {{ secret.name }}
-              </button>
-            </div>
-            <div *ngIf="trash">{{ secret.name }}</div>
-            <div class="tw-text-sm tw-text-muted">
-              {{ secret.id }}
-              <button
-                type="button"
-                bitIconButton="bwi-clone"
-                buttonType="main"
-                size="small"
-                [title]="'copyUuid' | i18n"
-                [attr.aria-label]="'copyUuid' | i18n"
-                (click)="copySecretUuidEvent.emit(secret.id)"
-              ></button>
-            </div>
+        {{ "all" | i18n }}
+      </label>
+    </th>
+    <th bitCell bitSortable="name" default>{{ "name" | i18n }}</th>
+    <th bitCell bitSortable="projects" [fn]="sortProjects">{{ "project" | i18n }}</th>
+    <th bitCell bitSortable="revisionDate">{{ "lastEdited" | i18n }}</th>
+    <th bitCell class="tw-w-0">
+      <button
+        type="button"
+        bitIconButton="bwi-ellipsis-v"
+        buttonType="main"
+        [title]="'options' | i18n"
+        [attr.aria-label]="'options' | i18n"
+        [bitMenuTriggerFor]="tableMenu"
+      ></button>
+    </th>
+  </ng-container>
+  <ng-template bitRowDef let-row>
+    <td bitCell>
+      <input
+        type="checkbox"
+        (change)="$event ? selection.toggle(row.id) : null"
+        [checked]="selection.isSelected(row.id)"
+      />
+    </td>
+    <td bitCell>
+      <div class="tw-flex tw-items-center tw-gap-4 tw-break-all">
+        <i class="bwi bwi-key tw-text-muted" aria-hidden="true"></i>
+        <div>
+          <div *ngIf="!trash">
+            <button type="button" bitLink (click)="editSecret(row)">
+              {{ row.name }}
+            </button>
+          </div>
+          <div *ngIf="trash">{{ row.name }}</div>
+          <div class="tw-text-sm tw-text-muted">
+            {{ row.id }}
+            <button
+              type="button"
+              bitIconButton="bwi-clone"
+              buttonType="main"
+              size="small"
+              [title]="'copyUuid' | i18n"
+              [attr.aria-label]="'copyUuid' | i18n"
+              (click)="copySecretUuidEvent.emit(row.id)"
+            ></button>
           </div>
         </div>
-      </td>
-      <td bitCell>
-        <span
-          *ngFor="let project of secret.projects"
-          bitBadge
-          variant="secondary"
-          class="tw-ml-1"
-          [title]="project.name"
-          maxWidthClass="tw-max-w-60"
-        >
-          {{ project.name }}
-        </span>
-        <span *ngIf="secret.projects.length === 0" bitBadge variant="warning" class="tw-ml-1"
-          ><i class="bwi bwi-fw bwi-exclamation-triangle tw-mr-1" aria-hidden="true"></i
-          >{{ "unassigned" | i18n }}</span
-        >
-      </td>
-      <td bitCell class="tw-whitespace-nowrap">{{ secret.revisionDate | date: "medium" }}</td>
-      <td bitCell>
-        <button
-          type="button"
-          bitIconButton="bwi-ellipsis-v"
-          buttonType="main"
-          [title]="'options' | i18n"
-          [attr.aria-label]="'options' | i18n"
-          [bitMenuTriggerFor]="secretMenu"
-        ></button>
-      </td>
+      </div>
+    </td>
+    <td bitCell>
+      <span
+        *ngFor="let project of row.projects"
+        bitBadge
+        variant="secondary"
+        class="tw-ml-1"
+        [title]="project.name"
+        maxWidthClass="tw-max-w-60"
+      >
+        {{ project.name }}
+      </span>
+      <span *ngIf="row.projects.length === 0" bitBadge variant="warning" class="tw-ml-1"
+        ><i class="bwi bwi-fw bwi-exclamation-triangle tw-mr-1" aria-hidden="true"></i
+        >{{ "unassigned" | i18n }}</span
+      >
+    </td>
+    <td bitCell class="tw-whitespace-nowrap">{{ row.revisionDate | date: "medium" }}</td>
+    <td bitCell>
+      <button
+        type="button"
+        bitIconButton="bwi-ellipsis-v"
+        buttonType="main"
+        [title]="'options' | i18n"
+        [attr.aria-label]="'options' | i18n"
+        [bitMenuTriggerFor]="secretMenu"
+      ></button>
+    </td>
 
-      <bit-menu #secretMenu>
-        <button
-          type="button"
-          bitMenuItem
-          (click)="editSecret(secret)"
-          *ngIf="secret.write && !trash"
-        >
-          <i class="bwi bwi-fw bwi-pencil" aria-hidden="true"></i>
-          {{ "editSecret" | i18n }}
-        </button>
-        <button
-          type="button"
-          bitMenuItem
-          (click)="copySecretNameEvent.emit(secret.name)"
-          *ngIf="!trash"
-        >
-          <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
-          {{ "copySecretName" | i18n }}
-        </button>
-        <button
-          type="button"
-          bitMenuItem
-          (click)="copySecretValueEvent.emit(secret.id)"
-          *ngIf="!trash"
-        >
-          <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
-          {{ "copySecretValue" | i18n }}
-        </button>
-        <button
-          type="button"
-          bitMenuItem
-          (click)="restoreSecretsEvent.emit([secret.id])"
-          *ngIf="trash"
-        >
-          <i class="bwi bwi-fw bwi-refresh" aria-hidden="true"></i>
-          {{ "restoreSecret" | i18n }}
-        </button>
-        <button
-          type="button"
-          bitMenuItem
-          (click)="deleteSecretsEvent.emit([secret])"
-          *ngIf="secret.write"
-        >
-          <i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
-          <span class="tw-text-danger">{{
-            (trash ? "permanentlyDelete" : "deleteSecret") | i18n
-          }}</span>
-        </button>
-      </bit-menu>
-    </tr>
+    <bit-menu #secretMenu>
+      <button type="button" bitMenuItem (click)="editSecret(row)" *ngIf="row.write && !trash">
+        <i class="bwi bwi-fw bwi-pencil" aria-hidden="true"></i>
+        {{ "editSecret" | i18n }}
+      </button>
+      <button type="button" bitMenuItem (click)="copySecretNameEvent.emit(row.name)" *ngIf="!trash">
+        <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
+        {{ "copySecretName" | i18n }}
+      </button>
+      <button type="button" bitMenuItem (click)="copySecretValueEvent.emit(row.id)" *ngIf="!trash">
+        <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
+        {{ "copySecretValue" | i18n }}
+      </button>
+      <button type="button" bitMenuItem (click)="restoreSecretsEvent.emit([row.id])" *ngIf="trash">
+        <i class="bwi bwi-fw bwi-refresh" aria-hidden="true"></i>
+        {{ "restoreSecret" | i18n }}
+      </button>
+      <button type="button" bitMenuItem (click)="deleteSecretsEvent.emit([row])" *ngIf="row.write">
+        <i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
+        <span class="tw-text-danger">{{
+          (trash ? "permanentlyDelete" : "deleteSecret") | i18n
+        }}</span>
+      </button>
+    </bit-menu>
   </ng-template>
-</bit-table>
+</bit-table-scroll>
 
 <bit-menu #tableMenu>
   <button type="button" bitMenuItem (click)="bulkRestoreSecrets()" *ngIf="trash">