[PM-20997] Part 1 of PM-20117 - Styling Changes (#14527)

apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html

@@ -6,6 +6,7 @@
       icon="bwi-filter"
       *ngIf="organization.useRiskInsights"
       [text]="'accessIntelligence' | i18n"
+      route="access-intelligence"
     >
       <bit-nav-item
         [text]="'riskInsights' | i18n"

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

@@ -98,8 +98,8 @@
   "markAppAsCritical": {
     "message": "Mark app as critical"
   },
-  "appsMarkedAsCritical": {
+  "applicationsMarkedAsCriticalSuccess": {
-    "message": "Apps marked as critical"
+    "message": "Applications marked as critical"
   },
   "application": {
     "message": "Application"

bitwarden_license/bit-common/src/dirt/reports/risk-insights/models/password-health.ts

@@ -31,6 +31,7 @@ export type ApplicationHealthReportDetail = {
   atRiskMemberCount: number;
   memberDetails: MemberDetailsFlat[];
   atRiskMemberDetails: MemberDetailsFlat[];
+  cipher: CipherView;
 };
 
 export type ApplicationHealthReportDetailWithCriticalFlag = ApplicationHealthReportDetail & {
@@ -48,6 +49,7 @@ export type CipherHealthReportUriDetail = {
   exposedPasswordDetail: ExposedPasswordDetail;
   cipherMembers: MemberDetailsFlat[];
   trimmedUri: string;
+  cipher: CipherView;
 };
 
 /**

bitwarden_license/bit-common/src/dirt/reports/risk-insights/services/risk-insights-report.service.ts

@@ -355,6 +355,7 @@ export class RiskInsightsReportService {
       atRiskMemberDetails: existingUriDetail ? existingUriDetail.atRiskMemberDetails : [],
       atRiskPasswordCount: existingUriDetail ? existingUriDetail.atRiskPasswordCount : 0,
       atRiskMemberCount: existingUriDetail ? existingUriDetail.atRiskMemberDetails.length : 0,
+      cipher: newUriDetail.cipher,
     } as ApplicationHealthReportDetail;
 
     if (isAtRisk) {
@@ -399,6 +400,7 @@ export class RiskInsightsReportService {
       exposedPasswordDetail: detail.exposedPasswordDetail,
       cipherMembers: detail.cipherMembers,
       trimmedUri: uri,
+      cipher: detail as CipherView,
     };
   }
 

bitwarden_license/bit-web/src/app/dirt/access-intelligence/access-intelligence-routing.module.ts

@@ -6,6 +6,7 @@ import { organizationPermissionsGuard } from "@bitwarden/web-vault/app/admin-con
 import { RiskInsightsComponent } from "./risk-insights.component";
 
 const routes: Routes = [
+  { path: "", pathMatch: "full", redirectTo: "risk-insights" },
   {
     path: "risk-insights",
     canActivate: [organizationPermissionsGuard((org) => org.useRiskInsights)],

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

@@ -56,16 +56,15 @@
       [formControl]="searchControl"
     ></bit-search>
     <button
-      class="tw-rounded-lg"
       type="button"
-      buttonType="secondary"
+      [buttonType]="'primary'"
       bitButton
       *ngIf="isCriticalAppsFeatureEnabled"
       [disabled]="!selectedUrls.size"
       [loading]="markingAsCritical"
       (click)="markAppsAsCritical()"
     >
-      <i class="bwi bwi-star-f tw-mr-2"></i>
+      <i class="bwi tw-mr-2" [ngClass]="selectedUrls.size ? 'bwi-star-f' : 'bwi-star'"></i>
       {{ "markAppAsCritical" | i18n }}
     </button>
   </div>

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

@@ -26,6 +26,7 @@ import { ConfigService } from "@bitwarden/common/platform/abstractions/config/co
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import {
+  IconButtonModule,
   Icons,
   NoItemsModule,
   SearchModule,
@@ -53,6 +54,7 @@ import { ApplicationsLoadingComponent } from "./risk-insights-loading.component"
     NoItemsModule,
     SharedModule,
     AppTableRowScrollableComponent,
+    IconButtonModule,
   ],
 })
 export class AllApplicationsComponent implements OnInit {
@@ -160,7 +162,7 @@ export class AllApplicationsComponent implements OnInit {
       this.toastService.showToast({
         variant: "success",
         title: "",
-        message: this.i18nService.t("appsMarkedAsCritical"),
+        message: this.i18nService.t("applicationsMarkedAsCriticalSuccess"),
       });
     } finally {
       this.selectedUrls.clear();

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

@@ -2,6 +2,7 @@
   <bit-table-scroll [dataSource]="dataSource" [rowSize]="53">
     <ng-container header>
       <th *ngIf="isCriticalAppsFeatureEnabled"></th>
+      <th bitCell></th>
       <th bitSortable="applicationName" bitCell>{{ "application" | i18n }}</th>
       <th bitSortable="atRiskPasswordCount" bitCell>{{ "atRiskPasswords" | i18n }}</th>
       <th bitSortable="passwordCount" bitCell>{{ "totalPasswords" | i18n }}</th>
@@ -30,6 +31,9 @@
       >
         <i class="bwi bwi-star-f" *ngIf="row.isMarkedAsCritical"></i>
       </td>
+      <td bitCell>
+        <app-vault-icon [cipher]="row.cipher"></app-vault-icon>
+      </td>
       <td
         class="tw-cursor-pointer"
         [ngClass]="{ 'tw-bg-primary-100': isDrawerIsOpenForThisRecord(row.applicationName) }"

bitwarden_license/bit-web/src/app/dirt/access-intelligence/risk-insights.component.html

@@ -1,10 +1,7 @@
 <ng-container>
   <bit-layout>
-    <div class="tw-mb-1 tw-text-primary-600" bitTypography="body1">
-      {{ "accessIntelligence" | i18n }}
-    </div>
     <h1 bitTypography="h1">{{ "riskInsights" | i18n }}</h1>
-    <div class="tw-text-muted tw-max-w-4xl tw-mb-2">
+    <div class="tw-text-main tw-max-w-4xl tw-mb-2">
       {{ "reviewAtRiskPasswords" | i18n }}
     </div>
     <div
@@ -74,8 +71,10 @@
             "atRiskMembersDescription" | i18n
           }}</span>
           <div class="tw-flex tw-justify-between tw-mt-2 tw-text-muted">
-            <div bitTypography="body2" class="tw-font-bold">{{ "email" | i18n }}</div>
+            <div bitTypography="body2" class="tw-text-sm tw-font-bold">{{ "email" | i18n }}</div>
-            <div bitTypography="body2" class="tw-font-bold">{{ "atRiskPasswords" | i18n }}</div>
+            <div bitTypography="body2" class="tw-text-sm tw-font-bold">
+              {{ "atRiskPasswords" | i18n }}
+            </div>
           </div>
           <ng-container *ngFor="let member of dataService.atRiskMemberDetails">
             <div class="tw-flex tw-justify-between tw-mt-2">
@@ -117,8 +116,12 @@
             "atRiskApplicationsDescription" | i18n
           }}</span>
           <div class="tw-flex tw-justify-between tw-mt-2 tw-text-muted">
-            <div bitTypography="body2" class="tw-font-bold">{{ "application" | i18n }}</div>
+            <div bitTypography="body2" class="tw-text-sm tw-font-bold">
-            <div bitTypography="body2" class="tw-font-bold">{{ "atRiskPasswords" | i18n }}</div>
+              {{ "application" | i18n }}
+            </div>
+            <div bitTypography="body2" class="tw-text-sm tw-font-bold">
+              {{ "atRiskPasswords" | i18n }}
+            </div>
           </div>
           <ng-container *ngFor="let app of dataService.atRiskAppDetails">
             <div class="tw-flex tw-justify-between tw-mt-2">