[PM-29448] Consume the new send table in web (#17923)

2nd part of PM-29448. Consumes the new send table in the web vault. Also updates the send table to contain the responsive behaviour.

apps/desktop/tailwind.config.js

@@ -10,6 +10,7 @@ config.content = [
   "../../libs/angular/src/**/*.{html,ts}",
   "../../libs/vault/src/**/*.{html,ts,mdx}",
   "../../libs/pricing/src/**/*.{html,ts}",
+  "../../libs/tools/send/send-ui/src/**/*.{html,ts}",
 ];
 
 module.exports = config;

apps/web/src/app/tools/send/send.component.html

@@ -80,117 +80,17 @@
       </div>
     </div>
   </div>
-  <div class="tw-col-span-9 tw-@container/send-table">
+  <div class="tw-col-span-9">
-    <!--Listing Table-->
+    <tools-send-table
-    <bit-table [dataSource]="dataSource" *ngIf="filteredSends && filteredSends.length">
+      *ngIf="filteredSends && filteredSends.length"
-      <ng-container header>
+      [dataSource]="dataSource"
-        <tr>
+      [disableSend]="disableSend"
-          <th bitCell bitSortable="name" default>{{ "name" | i18n }}</th>
+      (editSend)="editSend($event)"
-          <th bitCell bitSortable="deletionDate" class="@lg/send-table:tw-table-cell tw-hidden">
+      (copySend)="copy($event)"
-            {{ "deletionDate" | i18n }}
+      (removePassword)="removePassword($event)"
-          </th>
+      (deleteSend)="delete($event)"
-          <th bitCell>{{ "options" | i18n }}</th>
+    />
-        </tr>
+
-      </ng-container>
-      <ng-template body let-rows$>
-        <tr bitRow *ngFor="let s of rows$ | async">
-          <td bitCell (click)="editSend(s)" class="tw-cursor-pointer">
-            <div class="tw-flex tw-gap-2 tw-items-center">
-              <span aria-hidden="true">
-                <i class="bwi bwi-fw bwi-lg bwi-file" *ngIf="s.type == sendType.File"></i>
-                <i class="bwi bwi-fw bwi-lg bwi-file-text" *ngIf="s.type == sendType.Text"></i>
-              </span>
-              <button type="button" bitLink>
-                {{ s.name }}
-              </button>
-              <ng-container *ngIf="s.disabled">
-                <i
-                  class="bwi bwi-exclamation-triangle"
-                  appStopProp
-                  title="{{ 'disabled' | i18n }}"
-                  aria-hidden="true"
-                ></i>
-                <span class="tw-sr-only">{{ "disabled" | i18n }}</span>
-              </ng-container>
-              <ng-container *ngIf="s.password">
-                <i
-                  class="bwi bwi-key"
-                  appStopProp
-                  title="{{ 'password' | i18n }}"
-                  aria-hidden="true"
-                ></i>
-                <span class="tw-sr-only">{{ "password" | i18n }}</span>
-              </ng-container>
-              <ng-container *ngIf="s.maxAccessCountReached">
-                <i
-                  class="bwi bwi-exclamation-triangle"
-                  appStopProp
-                  title="{{ 'maxAccessCountReached' | i18n }}"
-                  aria-hidden="true"
-                ></i>
-                <span class="tw-sr-only">{{ "maxAccessCountReached" | i18n }}</span>
-              </ng-container>
-              <ng-container *ngIf="s.expired">
-                <i
-                  class="bwi bwi-clock"
-                  appStopProp
-                  title="{{ 'expired' | i18n }}"
-                  aria-hidden="true"
-                ></i>
-                <span class="tw-sr-only">{{ "expired" | i18n }}</span>
-              </ng-container>
-              <ng-container *ngIf="s.pendingDelete">
-                <i
-                  class="bwi bwi-trash"
-                  appStopProp
-                  title="{{ 'pendingDeletion' | i18n }}"
-                  aria-hidden="true"
-                ></i>
-                <span class="tw-sr-only">{{ "pendingDeletion" | i18n }}</span>
-              </ng-container>
-            </div>
-          </td>
-          <td
-            bitCell
-            (click)="editSend(s)"
-            class="tw-text-muted tw-cursor-pointer @lg/send-table:tw-table-cell tw-hidden"
-          >
-            <small bitTypography="body2" appStopProp>
-              {{ s.deletionDate | date: "medium" }}
-            </small>
-          </td>
-          <td bitCell class="tw-w-0 tw-text-right">
-            <button
-              type="button"
-              [bitMenuTriggerFor]="sendOptions"
-              bitIconButton="bwi-ellipsis-v"
-              label="{{ 'options' | i18n }}"
-            ></button>
-            <bit-menu #sendOptions>
-              <button type="button" bitMenuItem (click)="copy(s)">
-                <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
-                {{ "copySendLink" | i18n }}
-              </button>
-              <button
-                type="button"
-                bitMenuItem
-                (click)="removePassword(s)"
-                *ngIf="s.password && !disableSend"
-              >
-                <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
-                {{ "removePassword" | i18n }}
-              </button>
-              <button type="button" bitMenuItem (click)="delete(s)">
-                <span class="tw-text-danger">
-                  <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
-                  {{ "delete" | i18n }}
-                </span>
-              </button>
-            </bit-menu>
-          </td>
-        </tr>
-      </ng-template>
-    </bit-table>
     <div *ngIf="filteredSends && !filteredSends.length">
       <ng-container *ngIf="!loaded">
         <i

apps/web/src/app/tools/send/send.component.ts

@@ -32,6 +32,7 @@ import {
   SendFormConfig,
   SendAddEditDialogComponent,
   SendItemDialogResult,
+  SendTableComponent,
 } from "@bitwarden/send-ui";
 
 import { HeaderModule } from "../../layouts/header/header.module";
@@ -45,7 +46,14 @@ const BroadcasterSubscriptionId = "SendComponent";
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "app-send",
-  imports: [SharedModule, SearchModule, NoItemsModule, HeaderModule, NewSendDropdownComponent],
+  imports: [
+    SharedModule,
+    SearchModule,
+    NoItemsModule,
+    HeaderModule,
+    NewSendDropdownComponent,
+    SendTableComponent,
+  ],
   templateUrl: "send.component.html",
   providers: [DefaultSendFormConfigService],
 })

apps/web/tailwind.config.js

@@ -11,6 +11,7 @@ config.content = [
   path.resolve(__dirname, "../../libs/vault/src/**/*.{html,ts}"),
   path.resolve(__dirname, "../../libs/angular/src/**/*.{html,ts}"),
   path.resolve(__dirname, "../../libs/tools/generator/components/src/**/*.{html,ts}"),
+  path.resolve(__dirname, "../../libs/tools/send/send-ui/src/**/*.{html,ts}"),
   path.resolve(__dirname, "../../bitwarden_license/bit-web/src/**/*.{html,ts}"),
 ];
 config.corePlugins.preflight = true;

libs/tools/send/send-ui/src/send-table/send-table.component.html

@@ -1,102 +1,112 @@
-<bit-table [dataSource]="dataSource()">
+<div class="tw-@container/send-table">
-  <ng-container header>
+  <bit-table [dataSource]="dataSource()">
-    <tr>
+    <ng-container header>
-      <th bitCell bitSortable="name" default>{{ "name" | i18n }}</th>
+      <tr>
-      <th bitCell bitSortable="deletionDate">{{ "deletionDate" | i18n }}</th>
+        <th bitCell bitSortable="name" default>{{ "name" | i18n }}</th>
-      <th bitCell>{{ "options" | i18n }}</th>
+        <th bitCell bitSortable="deletionDate" class="@lg/send-table:tw-table-cell tw-hidden">
-    </tr>
+          {{ "deletionDate" | i18n }}
-  </ng-container>
+        </th>
-  <ng-template body let-rows$>
+        <th bitCell>{{ "options" | i18n }}</th>
-    <tr bitRow *ngFor="let s of rows$ | async">
+      </tr>
-      <td bitCell (click)="onEditSend(s)" class="tw-cursor-pointer">
+    </ng-container>
-        <div class="tw-flex tw-gap-2 tw-items-center">
+    <ng-template body let-rows$>
-          <span aria-hidden="true">
+      <tr bitRow *ngFor="let s of rows$ | async">
-            @if (s.type == sendType.File) {
+        <td bitCell (click)="onEditSend(s)" class="tw-cursor-pointer">
-              <i class="bwi bwi-fw bwi-lg bwi-file"></i>
+          <div class="tw-flex tw-gap-2 tw-items-center">
-            }
+            <span aria-hidden="true">
-            @if (s.type == sendType.Text) {
+              @if (s.type == sendType.File) {
-              <i class="bwi bwi-fw bwi-lg bwi-file-text"></i>
+                <i class="bwi bwi-fw bwi-lg bwi-file"></i>
-            }
+              }
-          </span>
+              @if (s.type == sendType.Text) {
-          <button type="button" bitLink>
+                <i class="bwi bwi-fw bwi-lg bwi-file-text"></i>
-            {{ s.name }}
+              }
-          </button>
-          @if (s.disabled) {
-            <i
-              class="bwi bwi-exclamation-triangle"
-              appStopProp
-              title="{{ 'disabled' | i18n }}"
-              aria-hidden="true"
-            ></i>
-            <span class="tw-sr-only">{{ "disabled" | i18n }}</span>
-          }
-          @if (s.password) {
-            <i
-              class="bwi bwi-key"
-              appStopProp
-              title="{{ 'password' | i18n }}"
-              aria-hidden="true"
-            ></i>
-            <span class="tw-sr-only">{{ "password" | i18n }}</span>
-          }
-          @if (s.maxAccessCountReached) {
-            <i
-              class="bwi bwi-exclamation-triangle"
-              appStopProp
-              title="{{ 'maxAccessCountReached' | i18n }}"
-              aria-hidden="true"
-            ></i>
-            <span class="tw-sr-only">{{ "maxAccessCountReached" | i18n }}</span>
-          }
-          @if (s.expired) {
-            <i
-              class="bwi bwi-clock"
-              appStopProp
-              title="{{ 'expired' | i18n }}"
-              aria-hidden="true"
-            ></i>
-            <span class="tw-sr-only">{{ "expired" | i18n }}</span>
-          }
-          @if (s.pendingDelete) {
-            <i
-              class="bwi bwi-trash"
-              appStopProp
-              title="{{ 'pendingDeletion' | i18n }}"
-              aria-hidden="true"
-            ></i>
-            <span class="tw-sr-only">{{ "pendingDeletion" | i18n }}</span>
-          }
-        </div>
-      </td>
-      <td bitCell (click)="onEditSend(s)" class="tw-text-muted tw-cursor-pointer">
-        <small bitTypography="body2" appStopProp>{{ s.deletionDate | date: "medium" }}</small>
-      </td>
-      <td bitCell class="tw-w-0 tw-text-right">
-        <button
-          type="button"
-          [bitMenuTriggerFor]="sendOptions"
-          bitIconButton="bwi-ellipsis-v"
-          label="{{ 'options' | i18n }}"
-        ></button>
-        <bit-menu #sendOptions>
-          <button type="button" bitMenuItem (click)="onCopy(s)">
-            <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
-            {{ "copySendLink" | i18n }}
-          </button>
-          @if (s.password && !disableSend()) {
-            <button type="button" bitMenuItem (click)="onRemovePassword(s)">
-              <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
-              {{ "removePassword" | i18n }}
-            </button>
-          }
-          <button type="button" bitMenuItem (click)="onDelete(s)">
-            <span class="tw-text-danger">
-              <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
-              {{ "delete" | i18n }}
             </span>
-          </button>
+            <button type="button" bitLink>
-        </bit-menu>
+              {{ s.name }}
-      </td>
+            </button>
-    </tr>
+            @if (s.disabled) {
-  </ng-template>
+              <i
-</bit-table>
+                class="bwi bwi-exclamation-triangle"
+                appStopProp
+                title="{{ 'disabled' | i18n }}"
+                aria-hidden="true"
+              ></i>
+              <span class="tw-sr-only">{{ "disabled" | i18n }}</span>
+            }
+            @if (s.password) {
+              <i
+                class="bwi bwi-key"
+                appStopProp
+                title="{{ 'password' | i18n }}"
+                aria-hidden="true"
+              ></i>
+              <span class="tw-sr-only">{{ "password" | i18n }}</span>
+            }
+            @if (s.maxAccessCountReached) {
+              <i
+                class="bwi bwi-exclamation-triangle"
+                appStopProp
+                title="{{ 'maxAccessCountReached' | i18n }}"
+                aria-hidden="true"
+              ></i>
+              <span class="tw-sr-only">{{ "maxAccessCountReached" | i18n }}</span>
+            }
+            @if (s.expired) {
+              <i
+                class="bwi bwi-clock"
+                appStopProp
+                title="{{ 'expired' | i18n }}"
+                aria-hidden="true"
+              ></i>
+              <span class="tw-sr-only">{{ "expired" | i18n }}</span>
+            }
+            @if (s.pendingDelete) {
+              <i
+                class="bwi bwi-trash"
+                appStopProp
+                title="{{ 'pendingDeletion' | i18n }}"
+                aria-hidden="true"
+              ></i>
+              <span class="tw-sr-only">{{ "pendingDeletion" | i18n }}</span>
+            }
+          </div>
+        </td>
+        <td
+          bitCell
+          (click)="onEditSend(s)"
+          class="tw-text-muted tw-cursor-pointer @lg/send-table:tw-table-cell tw-hidden"
+        >
+          <small bitTypography="body2" appStopProp>
+            {{ s.deletionDate | date: "medium" }}
+          </small>
+        </td>
+        <td bitCell class="tw-w-0 tw-text-right">
+          <button
+            type="button"
+            [bitMenuTriggerFor]="sendOptions"
+            bitIconButton="bwi-ellipsis-v"
+            label="{{ 'options' | i18n }}"
+          ></button>
+          <bit-menu #sendOptions>
+            <button type="button" bitMenuItem (click)="onCopy(s)">
+              <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
+              {{ "copySendLink" | i18n }}
+            </button>
+            @if (s.password && !disableSend()) {
+              <button type="button" bitMenuItem (click)="onRemovePassword(s)">
+                <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
+                {{ "removePassword" | i18n }}
+              </button>
+            }
+            <button type="button" bitMenuItem (click)="onDelete(s)">
+              <span class="tw-text-danger">
+                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
+                {{ "delete" | i18n }}
+              </span>
+            </button>
+          </bit-menu>
+        </td>
+      </tr>
+    </ng-template>
+  </bit-table>
+</div>