[PM-13931] - UI - All applications report table (#11678)

* add remaining components to access intelligence page

* Revert "add remaining components to access intelligence page"

This reverts commit cb8e826656.

* add remaining access intelligence table components

apps/web/src/app/tools/access-intelligence/no-priority-apps.component.html

@@ -0,0 +1,15 @@
+<bit-no-items [icon]="noItemsIcon" class="tw-text-main">
+  <ng-container slot="title">
+    <h2 class="tw-font-semibold mt-4">
+      {{ "noPriorityApplicationsTitle" | i18n }}
+    </h2>
+  </ng-container>
+  <ng-container slot="description">
+    <p class="tw-text-muted">
+      {{ "noPriorityApplicationsDescription" | i18n }}
+    </p>
+  </ng-container>
+  <ng-container slot="button">
+    <button bitButton buttonType="primary" type="button">{{ "markPriorityApps" | i18n }}</button>
+  </ng-container>
+</bit-no-items>

apps/web/src/app/tools/access-intelligence/no-priority-apps.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ButtonModule, NoItemsModule, Icons } from "@bitwarden/components";
+
+@Component({
+  standalone: true,
+  selector: "tools-no-priority-apps",
+  templateUrl: "no-priority-apps.component.html",
+  imports: [ButtonModule, CommonModule, JslibModule, NoItemsModule],
+})
+export class NoPriorityAppsComponent {
+  noItemsIcon = Icons.NoResults;
+}

apps/web/src/app/tools/access-intelligence/password-health-members.component.html

@@ -8,7 +8,33 @@
     ></i>
     <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </div>
-  <div class="tw-mt-4" *ngIf="!loading">
+  <div *ngIf="!dataSource.data.length">
+    <tools-no-priority-apps></tools-no-priority-apps>
+  </div>
+  <div class="tw-mt-4 tw-flex tw-flex-col" *ngIf="!loading && dataSource.data.length">
+    <div class="tw-flex tw-gap-6">
+      <tools-card
+        class="tw-flex-1"
+        [title]="'atRiskMembers' | i18n"
+        [value]="totalMembersMap.size - 3"
+        [maxValue]="totalMembersMap.size"
+      >
+      </tools-card>
+      <tools-card
+        class="tw-flex-1"
+        [title]="'atRiskApplications' | i18n"
+        [value]="totalMembersMap.size - 1"
+        [maxValue]="totalMembersMap.size"
+      >
+      </tools-card>
+    </div>
+    <div class="tw-flex tw-mt-8 tw-mb-4 tw-gap-4">
+      <bit-search class="tw-grow" [formControl]="searchControl"></bit-search>
+      <button class="tw-rounded-lg" type="button" buttonType="secondary" bitButton>
+        <i class="bwi bwi-star-f tw-mr-2"></i>
+        {{ "markAppAsCritical" | i18n }}
+      </button>
+    </div>
     <bit-table [dataSource]="dataSource">
       <ng-container header>
         <tr bitRow>

apps/web/src/app/tools/access-intelligence/password-health-members.component.ts

@@ -1,10 +1,9 @@
-import { CommonModule } from "@angular/common";
 import { Component, DestroyRef, inject, OnInit } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormControl, FormsModule } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
-import { map } from "rxjs";
+import { debounceTime, map } from "rxjs";
 
-import { JslibModule } from "@bitwarden/angular/jslib.module";
 // eslint-disable-next-line no-restricted-imports
 import { PasswordHealthService } from "@bitwarden/bit-common/tools/reports/access-intelligence";
 import { AuditService } from "@bitwarden/common/abstractions/audit.service";
@@ -12,33 +11,31 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { PasswordStrengthServiceAbstraction } from "@bitwarden/common/tools/password-strength";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
-import {
+import { BadgeVariant, SearchModule, TableDataSource, TableModule } from "@bitwarden/components";
-  BadgeModule,
+import { CardComponent } from "@bitwarden/tools-card";
-  BadgeVariant,
-  ContainerComponent,
-  TableDataSource,
-  TableModule,
-} from "@bitwarden/components";
 
-// eslint-disable-next-line no-restricted-imports
 import { HeaderModule } from "../../layouts/header/header.module";
 // eslint-disable-next-line no-restricted-imports
+import { SharedModule } from "../../shared";
 import { OrganizationBadgeModule } from "../../vault/individual-vault/organization-badge/organization-badge.module";
 // eslint-disable-next-line no-restricted-imports
 import { PipesModule } from "../../vault/individual-vault/pipes/pipes.module";
 
+import { NoPriorityAppsComponent } from "./no-priority-apps.component";
+
 @Component({
   standalone: true,
   selector: "tools-password-health-members",
   templateUrl: "password-health-members.component.html",
   imports: [
-    BadgeModule,
+    CardComponent,
     OrganizationBadgeModule,
-    CommonModule,
-    ContainerComponent,
     PipesModule,
-    JslibModule,
     HeaderModule,
+    SearchModule,
+    FormsModule,
+    NoPriorityAppsComponent,
+    SharedModule,
     TableModule,
   ],
   providers: [PasswordHealthService],
@@ -56,6 +53,8 @@ export class PasswordHealthMembersComponent implements OnInit {
 
   loading = true;
 
+  protected searchControl = new FormControl("", { nonNullable: true });
+
   private destroyRef = inject(DestroyRef);
 
   constructor(
@@ -64,7 +63,11 @@ export class PasswordHealthMembersComponent implements OnInit {
     protected auditService: AuditService,
     protected i18nService: I18nService,
     protected activatedRoute: ActivatedRoute,
-  ) {}
+  ) {
+    this.searchControl.valueChanges
+      .pipe(debounceTime(200), takeUntilDestroyed())
+      .subscribe((v) => (this.dataSource.filter = v));
+  }
 
   ngOnInit() {
     this.activatedRoute.paramMap
@@ -89,6 +92,7 @@ export class PasswordHealthMembersComponent implements OnInit {
     await passwordHealthService.generateReport();
 
     this.dataSource.data = passwordHealthService.reportCiphers;
+
     this.exposedPasswordMap = passwordHealthService.exposedPasswordMap;
     this.passwordStrengthMap = passwordHealthService.passwordStrengthMap;
     this.passwordUseMap = passwordHealthService.passwordUseMap;

apps/web/src/app/tools/access-intelligence/password-health.component.html

@@ -8,7 +8,7 @@
     ></i>
     <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </div>
-  <div class="tw-mt-4" *ngIf="!loading">
+  <div class="tw-mt-4" *ngIf="!loading && dataSource.data.length">
     <bit-table [dataSource]="dataSource">
       <ng-container header>
         <tr bitRow>

apps/web/src/locales/en/messages.json

@@ -53,6 +53,18 @@
       }
     }
   },
+  "noPriorityApplicationsTitle": {
+    "message": "You haven’t marked any applications as a priority"
+  },
+  "noPriorityApplicationsDescription": {
+    "message": "Select your most critical applications to discover at-risk passwords, and notify users to change those passwords."
+  },
+  "markPriorityApps": {
+    "message": "Mark priority apps"
+  },
+  "markAppAsCritical": {
+    "message": "Mark app as critical"
+  },
   "application": {
     "message": "Application"
   },

libs/tools/card/src/card.component.ts

@@ -11,7 +11,7 @@ import { TypographyModule } from "@bitwarden/components";
   imports: [CommonModule, TypographyModule, JslibModule],
   host: {
     class:
-      "tw-box-border tw-bg-background tw-block tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-border [&:not(bit-layout_*)]:tw-rounded-lg tw-p-6",
+      "tw-box-border tw-bg-background tw-block tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-border [&:not(bit-layout_*)]:tw-rounded-lg tw-rounded-lg tw-p-6",
   },
 })
 export class CardComponent {