[SM-74] TableDataSource for sorting (#4079)

* Initial draft of a table data source

* Improve table data source

* Migrate projects table for demo

* Update existing tables

* Fix access selector

* remove sortDirection from custom fn

* a11y improvements

* update icons; make button full width

* update storybook docs

* apply code review changes

* fix: add table body to projects list

* Fix error on create secret. Fix project list setting projects on getter. Copy table data on set. Fix documentation

* Change signature to protected, rename method to not start with underscore

* add hover and focus effects

Co-authored-by: William Martin <contact@willmartian.com>

bitwarden_license/bit-web/src/app/secrets-manager/layout/dialogs/bulk-status-dialog.component.html

@@ -16,12 +16,12 @@
           <th bitCell>{{ "error" | i18n }}</th>
         </tr>
       </ng-container>
-      <ng-container body>
+      <ng-template body>
         <tr bitRow *ngFor="let detail of data.details">
           <td bitCell>{{ detail.name }}</td>
           <td bitCell>{{ detail.errorMessage }}</td>
         </tr>
-      </ng-container>
+      </ng-template>
     </bit-table>
   </div>
 

bitwarden_license/bit-web/src/app/secrets-manager/projects/projects-list/projects-list.component.html

@@ -11,7 +11,7 @@
   </button>
 </sm-no-items>
 
-<bit-table *ngIf="projects?.length >= 1">
+<bit-table *ngIf="projects?.length >= 1" [dataSource]="dataSource">
   <ng-container header>
     <tr>
       <th bitCell class="tw-w-0">
@@ -25,8 +25,8 @@
           {{ "all" | i18n }}
         </label>
       </th>
-      <th bitCell colspan="2">{{ "name" | i18n }}</th>
-      <th bitCell>{{ "lastEdited" | i18n }}</th>
+      <th bitCell colspan="2" bitSortable="name" default>{{ "name" | i18n }}</th>
+      <th bitCell bitSortable="revisionDate">{{ "lastEdited" | i18n }}</th>
       <th bitCell class="tw-w-0">
         <button
           bitIconButton="bwi-ellipsis-v"
@@ -38,8 +38,8 @@
       </th>
     </tr>
   </ng-container>
-  <ng-container body>
-    <tr bitRow *ngFor="let project of projects; index as i">
+  <ng-template body let-rows$>
+    <tr bitRow *ngFor="let project of rows$ | async">
       <td bitCell>
         <input
           type="checkbox"
@@ -78,7 +78,7 @@
         </button>
       </bit-menu>
     </tr>
-  </ng-container>
+  </ng-template>
 </bit-table>
 
 <bit-menu #tableMenu>

bitwarden_license/bit-web/src/app/secrets-manager/projects/projects-list/projects-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 { ProjectListView } from "../../models/view/project-list.view";
 
 @Component({
@@ -9,6 +11,8 @@ import { ProjectListView } from "../../models/view/project-list.view";
   templateUrl: "./projects-list.component.html",
 })
 export class ProjectsListComponent implements OnDestroy {
+  protected dataSource = new TableDataSource<ProjectListView>();
+
   @Input()
   get projects(): ProjectListView[] {
     return this._projects;
@@ -16,6 +20,7 @@ export class ProjectsListComponent implements OnDestroy {
   set projects(projects: ProjectListView[]) {
     this.selection.clear();
     this._projects = projects;
+    this.dataSource.data = projects;
   }
   private _projects: ProjectListView[];
 

bitwarden_license/bit-web/src/app/secrets-manager/secrets/dialog/secret-dialog.component.html

@@ -44,7 +44,7 @@
                 <th bitCell></th>
               </tr>
             </ng-container>
-            <ng-container body *ngIf="selectedProjects != null">
+            <ng-template body *ngIf="selectedProjects != null">
               <tr bitRow *ngFor="let e of selectedProjects">
                 <td bitCell>{{ e.name }}</td>
                 <td bitCell class="tw-w-0">
@@ -57,7 +57,7 @@
                   ></button>
                 </td>
               </tr>
-            </ng-container>
+            </ng-template>
           </bit-table>
         </bit-tab>
       </bit-tab-group>

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html

@@ -39,7 +39,7 @@
       </th>
     </tr>
   </ng-container>
-  <ng-container body>
+  <ng-template body>
     <tr bitRow *ngFor="let token of tokens">
       <td bitCell>
         <input
@@ -73,5 +73,5 @@
         </button>
       </bit-menu>
     </tr>
-  </ng-container>
+  </ng-template>
 </bit-table>

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/dialog/service-account-dialog.component.html

@@ -29,13 +29,13 @@
             <th bitCell>{{ "permissions" | i18n }}</th>
           </tr>
         </ng-container>
-        <ng-container body>
+        <ng-template body>
           <tr>
             <!-- TODO once access is implement display selected access -->
             <td bitCell>example</td>
             <td bitCell>example</td>
           </tr>
-        </ng-container>
+        </ng-template>
       </bit-table>
     </div>
     <div bitDialogFooter class="tw-flex tw-gap-2">

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html

@@ -39,7 +39,7 @@
       </th>
     </tr>
   </ng-container>
-  <ng-container body>
+  <ng-template body>
     <tr bitRow *ngFor="let serviceAccount of serviceAccounts">
       <td bitCell>
         <input
@@ -83,7 +83,7 @@
         </button>
       </bit-menu>
     </tr>
-  </ng-container>
+  </ng-template>
 </bit-table>
 
 <bit-menu #tableMenu>

bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html

@@ -39,7 +39,7 @@
       </th>
     </tr>
   </ng-container>
-  <ng-container body>
+  <ng-template body>
     <tr bitRow *ngFor="let secret of secrets">
       <td bitCell>
         <input
@@ -96,7 +96,7 @@
         </button>
       </bit-menu>
     </tr>
-  </ng-container>
+  </ng-template>
 </bit-table>
 
 <bit-menu #tableMenu>