From 75965e6408dab47482525820a67ed4d47979a46f Mon Sep 17 00:00:00 2001
From: Colton Hurst <colton@coltonhurst.com>
Date: Mon, 6 Mar 2023 15:40:47 -0500
Subject: [PATCH] SM-585: Add ability to do table sort for service account list
 (#4943)

---
 .../service-accounts-list.component.html               | 10 +++++-----
 .../service-accounts-list.component.ts                 |  5 +++++
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html
index 0a8237e8dd..f5ca68a934 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html
@@ -17,7 +17,7 @@
   </button>
 </sm-no-items>
 
-<bit-table *ngIf="serviceAccounts?.length >= 1">
+<bit-table *ngIf="serviceAccounts?.length >= 1" [dataSource]="dataSource">
   <ng-container header>
     <tr>
       <th bitCell class="tw-w-0">
@@ -31,9 +31,9 @@
           {{ "all" | i18n }}
         </label>
       </th>
-      <th bitCell colspan="2">{{ "name" | i18n }}</th>
+      <th bitCell colspan="2" bitSortable="name" default>{{ "name" | i18n }}</th>
       <th bitCell>{{ "secrets" | i18n }}</th>
-      <th bitCell>{{ "lastEdited" | i18n }}</th>
+      <th bitCell bitSortable="revisionDate">{{ "lastEdited" | i18n }}</th>
       <th bitCell class="tw-w-0">
         <button
           type="button"
@@ -46,8 +46,8 @@
       </th>
     </tr>
   </ng-container>
-  <ng-template body>
-    <tr bitRow *ngFor="let serviceAccount of serviceAccounts">
+  <ng-template body let-rows$>
+    <tr bitRow *ngFor="let serviceAccount of rows$ | async">
       <td bitCell>
         <input
           type="checkbox"
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.ts
index 51d57c8b2c..82c561da13 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.ts
@@ -2,6 +2,8 @@ import { SelectionModel } from "@angular/cdk/collections";
 import { Component, EventEmitter, Input, OnDestroy, Output } from "@angular/core";
 import { Subject, takeUntil } from "rxjs";
 
+import { TableDataSource } from "@bitwarden/components";
+
 import { ServiceAccountView } from "../models/view/service-account.view";
 
 @Component({
@@ -9,6 +11,8 @@ import { ServiceAccountView } from "../models/view/service-account.view";
   templateUrl: "./service-accounts-list.component.html",
 })
 export class ServiceAccountsListComponent implements OnDestroy {
+  protected dataSource = new TableDataSource<ServiceAccountView>();
+
   @Input()
   get serviceAccounts(): ServiceAccountView[] {
     return this._serviceAccounts;
@@ -16,6 +20,7 @@ export class ServiceAccountsListComponent implements OnDestroy {
   set serviceAccounts(serviceAccounts: ServiceAccountView[]) {
     this.selection.clear();
     this._serviceAccounts = serviceAccounts;
+    this.dataSource.data = serviceAccounts;
   }
   private _serviceAccounts: ServiceAccountView[];