[PM-13979] - add remaining components to access intelligence page (#11677)

* add remaining components to access intelligence page

* small css adjustments

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

@@ -1,4 +1,20 @@
-<app-header></app-header>
+<div class="tw-mb-1 text-primary" bitTypography="body1">{{ "accessIntelligence" | i18n }}</div>
+<h1 bitTypography="h1">{{ "passwordRisk" | i18n }}</h1>
+<div class="tw-text-muted">{{ "discoverAtRiskPasswords" | i18n }}</div>
+<div class="tw-bg-primary-100 tw-rounded-lg tw-w-full tw-px-8 tw-py-2 tw-my-4">
+  <i class="bwi bwi-exclamation-triangle bwi-lg tw-text-[1.2rem] text-muted" aria-hidden="true"></i>
+  <span class="tw-mx-4">{{
+    "dataLastUpdated" | i18n: (dataLastUpdated | date: "MMMM d, y 'at' h:mm a")
+  }}</span>
+  <a
+    bitButton
+    buttonType="unstyled"
+    class="tw-border-none !tw-font-normal tw-cursor-pointer"
+    [bitAction]="refreshData.bind(this)"
+  >
+    {{ "refresh" | i18n }}
+  </a>
+</div>
 <bit-tab-group [(selectedIndex)]="tabIndex">
   <bit-tab label="Raw Data">
     <tools-password-health></tools-password-health>

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

@@ -5,7 +5,7 @@ import { ActivatedRoute } from "@angular/router";
 import { first } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { TabsModule } from "@bitwarden/components";
+import { AsyncActionsModule, ButtonModule, TabsModule } from "@bitwarden/components";
 
 import { HeaderModule } from "../../layouts/header/header.module";
 
@@ -25,6 +25,8 @@ export enum AccessIntelligenceTabType {
   templateUrl: "./access-intelligence.component.html",
   imports: [
     ApplicationTableComponent,
+    AsyncActionsModule,
+    ButtonModule,
     CommonModule,
     JslibModule,
     HeaderModule,
@@ -36,11 +38,22 @@ export enum AccessIntelligenceTabType {
 })
 export class AccessIntelligenceComponent {
   tabIndex: AccessIntelligenceTabType;
+  dataLastUpdated = new Date();
 
   apps: any[] = [];
   priorityApps: any[] = [];
   notifiedMembers: any[] = [];
 
+  async refreshData() {
+    // TODO: Implement
+    return new Promise((resolve) =>
+      setTimeout(() => {
+        this.dataLastUpdated = new Date();
+        resolve(true);
+      }, 1000),
+    );
+  }
+
   constructor(route: ActivatedRoute) {
     route.queryParams.pipe(takeUntilDestroyed(), first()).subscribe(({ tabIndex }) => {
       this.tabIndex = !isNaN(tabIndex) ? tabIndex : AccessIntelligenceTabType.AllApps;

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

@@ -8,6 +8,21 @@
   "accessIntelligence": {
     "message": "Access Intelligence"
   },
+  "passwordRisk": {
+    "message": "Password Risk"
+  },
+  "discoverAtRiskPasswords": {
+    "message": "Discover at-risk passwords and notify users to change those passwords."
+  },
+  "dataLastUpdated": {
+    "message": "Data last updated: $DATE$",
+    "placeholders": {
+      "date": {
+        "content": "$1",
+        "example": "2021-01-01"
+      }
+    }
+  },
   "notifiedMembers": {
     "message": "Notified members"
   },