PM-30538 replicated app-table-scrollable shared component for milestone 11 (#18655)

bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.html

@@ -35,7 +35,7 @@
       </button>
     </div>
 
-    <app-table-row-scrollable
+    <app-table-row-scrollable-m11
       [dataSource]="dataSource"
       [showRowCheckBox]="true"
       [showRowMenuForCriticalApps]="false"
@@ -43,6 +43,6 @@
       [openApplication]="drawerDetails.invokerId || ''"
       [checkboxChange]="onCheckboxChange"
       [showAppAtRiskMembers]="showAppAtRiskMembers"
-    ></app-table-row-scrollable>
+    ></app-table-row-scrollable-m11>
   </div>
 }

bitwarden_license/bit-web/src/app/dirt/access-intelligence/all-applications/applications.component.ts

@@ -35,10 +35,8 @@ import { HeaderModule } from "@bitwarden/web-vault/app/layouts/header/header.mod
 import { SharedModule } from "@bitwarden/web-vault/app/shared";
 import { PipesModule } from "@bitwarden/web-vault/app/vault/individual-vault/pipes/pipes.module";
 
-import {
-  ApplicationTableDataSource,
-  AppTableRowScrollableComponent,
-} from "../shared/app-table-row-scrollable.component";
+import { AppTableRowScrollableM11Component } from "../shared/app-table-row-scrollable-m11.component";
+import { ApplicationTableDataSource } from "../shared/app-table-row-scrollable.component";
 import { ReportLoadingComponent } from "../shared/report-loading.component";
 
 export const ApplicationFilterOption = {
@@ -62,7 +60,7 @@ export type ApplicationFilterOption =
     PipesModule,
     NoItemsModule,
     SharedModule,
-    AppTableRowScrollableComponent,
+    AppTableRowScrollableM11Component,
     IconButtonModule,
     TypographyModule,
     ButtonModule,

bitwarden_license/bit-web/src/app/dirt/access-intelligence/shared/app-table-row-scrollable-m11.component.html

@@ -0,0 +1,150 @@
+<ng-container>
+  <bit-table-scroll [dataSource]="dataSource" [rowSize]="53">
+    <ng-container header>
+      <th></th>
+      <th bitCell></th>
+      <th bitSortable="applicationName" bitCell tabindex="0">{{ "application" | i18n }}</th>
+      <th bitSortable="atRiskPasswordCount" bitCell default="desc" tabindex="0">
+        {{ "atRiskPasswords" | i18n }}
+      </th>
+      <th bitSortable="passwordCount" bitCell tabindex="0">{{ "totalPasswords" | i18n }}</th>
+      <th bitSortable="atRiskMemberCount" bitCell tabindex="0">{{ "atRiskMembers" | i18n }}</th>
+      <th bitSortable="memberCount" bitCell tabindex="0">{{ "totalMembers" | i18n }}</th>
+    </ng-container>
+    <ng-template bitRowDef let-row>
+      @if (showRowCheckBox) {
+        <td
+          bitCell
+          [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
+          appStopProp
+        >
+          @if (!row.isMarkedAsCritical) {
+            <input
+              bitCheckbox
+              type="checkbox"
+              [checked]="selectedUrls.has(row.applicationName)"
+              (change)="checkboxChange(row.applicationName, $event)"
+            />
+          }
+          @if (row.isMarkedAsCritical) {
+            <i class="bwi bwi-star-f"></i>
+          }
+        </td>
+      }
+      @if (!showRowCheckBox) {
+        <td bitCell [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }">
+          @if (row.isMarkedAsCritical) {
+            <i class="bwi bwi-star-f"></i>
+          }
+        </td>
+      }
+      <td
+        bitCell
+        class="tw-cursor-pointer"
+        [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
+        (click)="showAppAtRiskMembers(row.applicationName)"
+        (keydown.enter)="showAppAtRiskMembers(row.applicationName)"
+        (keydown.space)="showAppAtRiskMembers(row.applicationName)"
+        role="button"
+        tabindex="0"
+        [attr.aria-label]="'viewItem' | i18n"
+      >
+        @if (row.iconCipher) {
+          <app-vault-icon [cipher]="row.iconCipher" [size]="24"></app-vault-icon>
+        }
+      </td>
+      <td
+        class="tw-cursor-pointer"
+        [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
+        (click)="showAppAtRiskMembers(row.applicationName)"
+        (keydown.enter)="showAppAtRiskMembers(row.applicationName)"
+        (keydown.space)="showAppAtRiskMembers(row.applicationName)"
+        role="button"
+        tabindex="0"
+        [attr.aria-label]="'viewItem' | i18n"
+      >
+        <span>{{ row.applicationName }}</span>
+      </td>
+      <td
+        bitCell
+        class="tw-cursor-pointer"
+        [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
+        (click)="showAppAtRiskMembers(row.applicationName)"
+        (keydown.enter)="showAppAtRiskMembers(row.applicationName)"
+        (keydown.space)="showAppAtRiskMembers(row.applicationName)"
+        role="button"
+        tabindex="0"
+        [attr.aria-label]="'viewItem' | i18n"
+      >
+        <span>
+          {{ row.atRiskPasswordCount }}
+        </span>
+      </td>
+      <td
+        bitCell
+        class="tw-cursor-pointer"
+        [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
+        (click)="showAppAtRiskMembers(row.applicationName)"
+        (keydown.enter)="showAppAtRiskMembers(row.applicationName)"
+        (keydown.space)="showAppAtRiskMembers(row.applicationName)"
+        role="button"
+        tabindex="0"
+        [attr.aria-label]="'viewItem' | i18n"
+      >
+        <span>
+          {{ row.passwordCount }}
+        </span>
+      </td>
+      <td
+        bitCell
+        class="tw-cursor-pointer"
+        [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
+        (click)="showAppAtRiskMembers(row.applicationName)"
+        (keydown.enter)="showAppAtRiskMembers(row.applicationName)"
+        (keydown.space)="showAppAtRiskMembers(row.applicationName)"
+        role="button"
+        tabindex="0"
+        [attr.aria-label]="'viewItem' | i18n"
+      >
+        <span>
+          {{ row.atRiskMemberCount }}
+        </span>
+      </td>
+      <td
+        bitCell
+        data-testid="total-membership"
+        class="tw-cursor-pointer"
+        [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
+        (click)="showAppAtRiskMembers(row.applicationName)"
+        (keydown.enter)="showAppAtRiskMembers(row.applicationName)"
+        (keydown.space)="showAppAtRiskMembers(row.applicationName)"
+        role="button"
+        tabindex="0"
+        [attr.aria-label]="'viewItem' | i18n"
+      >
+        {{ row.memberCount }}
+      </td>
+      @if (showRowMenuForCriticalApps) {
+        <td
+          bitCell
+          [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
+          appStopProp
+        >
+          <button
+            [bitMenuTriggerFor]="rowMenu"
+            type="button"
+            bitIconButton="bwi-ellipsis-v"
+            size="small"
+            label="{{ 'options' | i18n }}"
+            tabindex="0"
+          ></button>
+          <bit-menu #rowMenu>
+            <button type="button" bitMenuItem (click)="unmarkAsCritical(row.applicationName)">
+              {{ "unmarkAsCritical" | i18n }}
+            </button>
+          </bit-menu>
+        </td>
+      }
+    </ng-template>
+  </bit-table-scroll>
+</ng-container>

bitwarden_license/bit-web/src/app/dirt/access-intelligence/shared/app-table-row-scrollable-m11.component.ts

@@ -0,0 +1,47 @@
+import { CommonModule } from "@angular/common";
+import { Component, Input } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { MenuModule, TableDataSource, TableModule } from "@bitwarden/components";
+import { SharedModule } from "@bitwarden/web-vault/app/shared";
+import { PipesModule } from "@bitwarden/web-vault/app/vault/individual-vault/pipes/pipes.module";
+
+import { ApplicationTableDataSource } from "./app-table-row-scrollable.component";
+
+//TODO: Rename this component to AppTableRowScrollableComponent once milestone 11 is fully rolled out
+//TODO: Move definition of ApplicationTableDataSource to this file from app-table-row-scrollable.component.ts
+
+// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
+// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+@Component({
+  selector: "app-table-row-scrollable-m11",
+  imports: [CommonModule, JslibModule, TableModule, SharedModule, PipesModule, MenuModule],
+  templateUrl: "./app-table-row-scrollable-m11.component.html",
+})
+export class AppTableRowScrollableM11Component {
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input()
+  dataSource!: TableDataSource<ApplicationTableDataSource>;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input() showRowMenuForCriticalApps: boolean = false;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input() showRowCheckBox: boolean = false;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input() selectedUrls: Set<string> = new Set<string>();
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input() openApplication: string = "";
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input() showAppAtRiskMembers!: (applicationName: string) => void;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input() unmarkAsCritical!: (applicationName: string) => void;
+  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
+  // eslint-disable-next-line @angular-eslint/prefer-signals
+  @Input() checkboxChange!: (applicationName: string, $event: Event) => void;
+}