PM-17783 highlight when drawers are open (#13293)

bitwarden_license/bit-common/src/tools/reports/risk-insights/services/risk-insights-data.service.ts

@@ -28,6 +28,7 @@ export class RiskInsightsDataService {
   dataLastUpdated$ = this.dataLastUpdatedSubject.asObservable();
 
   openDrawer = false;
+  drawerInvokerId: string = "";
   activeDrawerType: DrawerType = DrawerType.None;
   atRiskMemberDetails: AtRiskMemberDetail[] = [];
   appAtRiskMembers: AppAtRiskMembersDialogParams | null = null;
@@ -73,25 +74,35 @@ export class RiskInsightsDataService {
     return this.activeDrawerType === drawerType;
   };
 
-  setDrawerForOrgAtRiskMembers = (atRiskMemberDetails: AtRiskMemberDetail[]): void => {
+  setDrawerForOrgAtRiskMembers = (
+    atRiskMemberDetails: AtRiskMemberDetail[],
+    invokerId: string = "",
+  ): void => {
     this.resetDrawer(DrawerType.OrgAtRiskMembers);
     this.activeDrawerType = DrawerType.OrgAtRiskMembers;
+    this.drawerInvokerId = invokerId;
     this.atRiskMemberDetails = atRiskMemberDetails;
     this.openDrawer = !this.openDrawer;
   };
 
   setDrawerForAppAtRiskMembers = (
     atRiskMembersDialogParams: AppAtRiskMembersDialogParams,
+    invokerId: string = "",
   ): void => {
     this.resetDrawer(DrawerType.None);
     this.activeDrawerType = DrawerType.AppAtRiskMembers;
+    this.drawerInvokerId = invokerId;
     this.appAtRiskMembers = atRiskMembersDialogParams;
     this.openDrawer = !this.openDrawer;
   };
 
-  setDrawerForOrgAtRiskApps = (atRiskApps: AtRiskApplicationDetail[]): void => {
+  setDrawerForOrgAtRiskApps = (
+    atRiskApps: AtRiskApplicationDetail[],
+    invokerId: string = "",
+  ): void => {
     this.resetDrawer(DrawerType.OrgAtRiskApps);
     this.activeDrawerType = DrawerType.OrgAtRiskApps;
+    this.drawerInvokerId = invokerId;
     this.atRiskAppDetails = atRiskApps;
     this.openDrawer = !this.openDrawer;
   };
@@ -109,5 +120,6 @@ export class RiskInsightsDataService {
     this.atRiskMemberDetails = [];
     this.appAtRiskMembers = null;
     this.atRiskAppDetails = null;
+    this.drawerInvokerId = "";
   };
 }

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

@@ -27,19 +27,25 @@
   <h2 class="tw-mb-6" bitTypography="h2">{{ "allApplications" | i18n }}</h2>
   <div class="tw-flex tw-gap-6">
     <tools-card
+      #allAppsOrgAtRiskMembers
       class="tw-flex-1 tw-cursor-pointer"
+      [ngClass]="{ 'tw-bg-primary-100': dataService.drawerInvokerId === 'allAppsOrgAtRiskMembers' }"
       [title]="'atRiskMembers' | i18n"
       [value]="applicationSummary.totalAtRiskMemberCount"
       [maxValue]="applicationSummary.totalMemberCount"
-      (click)="showOrgAtRiskMembers()"
+      (click)="showOrgAtRiskMembers('allAppsOrgAtRiskMembers')"
     >
     </tools-card>
     <tools-card
+      #allAppsOrgAtRiskApplications
       class="tw-flex-1 tw-cursor-pointer"
+      [ngClass]="{
+        'tw-bg-primary-100': dataService.drawerInvokerId === 'allAppsOrgAtRiskApplications',
+      }"
       [title]="'atRiskApplications' | i18n"
       [value]="applicationSummary.totalAtRiskApplicationCount"
       [maxValue]="applicationSummary.totalApplicationCount"
-      (click)="showOrgAtRiskApps()"
+      (click)="showOrgAtRiskApps('allAppsOrgAtRiskApplications')"
     >
     </tools-card>
   </div>
@@ -75,7 +81,11 @@
       </tr>
     </ng-container>
     <ng-template body let-rows$>
-      <tr bitRow *ngFor="let r of rows$ | async; trackBy: trackByFunction">
+      <tr
+        bitRow
+        *ngFor="let r of rows$ | async; trackBy: trackByFunction"
+        [ngClass]="{ 'tw-bg-primary-100': dataService.drawerInvokerId === r.applicationName }"
+      >
         <td *ngIf="isCriticalAppsFeatureEnabled">
           <input
             bitCheckbox

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

@@ -177,17 +177,17 @@ export class AllApplicationsComponent implements OnInit {
           ?.atRiskMemberDetails ?? [],
       applicationName,
     };
-    this.dataService.setDrawerForAppAtRiskMembers(info);
+    this.dataService.setDrawerForAppAtRiskMembers(info, applicationName);
   };
 
-  showOrgAtRiskMembers = async () => {
+  showOrgAtRiskMembers = async (invokerId: string) => {
     const dialogData = this.reportService.generateAtRiskMemberList(this.dataSource.data);
-    this.dataService.setDrawerForOrgAtRiskMembers(dialogData);
+    this.dataService.setDrawerForOrgAtRiskMembers(dialogData, invokerId);
   };
 
-  showOrgAtRiskApps = async () => {
+  showOrgAtRiskApps = async (invokerId: string) => {
     const data = this.reportService.generateAtRiskApplicationList(this.dataSource.data);
-    this.dataService.setDrawerForOrgAtRiskApps(data);
+    this.dataService.setDrawerForOrgAtRiskApps(data, invokerId);
   };
 
   onCheckboxChange(applicationName: string, event: Event) {

bitwarden_license/bit-web/src/app/tools/access-intelligence/critical-applications.component.html

@@ -35,19 +35,27 @@
   </div>
   <div class="tw-flex tw-gap-6">
     <tools-card
+      #criticalAppsAtRiskMembers
       class="tw-flex-1 tw-cursor-pointer"
+      [ngClass]="{
+        'tw-bg-primary-100': dataService.drawerInvokerId === 'criticalAppsAtRiskMembers',
+      }"
       [title]="'atRiskMembers' | i18n"
       [value]="applicationSummary.totalAtRiskMemberCount"
       [maxValue]="applicationSummary.totalMemberCount"
-      (click)="showOrgAtRiskMembers()"
+      (click)="showOrgAtRiskMembers('criticalAppsAtRiskMembers')"
     >
     </tools-card>
     <tools-card
+      #criticalAppsAtRiskApplications
       class="tw-flex-1 tw-cursor-pointer"
+      [ngClass]="{
+        'tw-bg-primary-100': dataService.drawerInvokerId === 'criticalAppsAtRiskApplications',
+      }"
       [title]="'atRiskApplications' | i18n"
       [value]="applicationSummary.totalAtRiskApplicationCount"
       [maxValue]="applicationSummary.totalApplicationCount"
-      (click)="showOrgAtRiskApps()"
+      (click)="showOrgAtRiskApps('criticalAppsAtRiskApplications')"
     >
     </tools-card>
   </div>
@@ -70,7 +78,11 @@
       </tr>
     </ng-container>
     <ng-template body let-rows$>
-      <tr bitRow *ngFor="let r of rows$ | async; trackBy: trackByFunction">
+      <tr
+        bitRow
+        *ngFor="let r of rows$ | async; trackBy: trackByFunction"
+        [ngClass]="{ 'tw-bg-primary-100': dataService.drawerInvokerId === r.applicationName }"
+      >
         <td>
           <i class="bwi bwi-star-f" *ngIf="r.isMarkedAsCritical"></i>
         </td>

bitwarden_license/bit-web/src/app/tools/access-intelligence/critical-applications.component.ts

@@ -131,17 +131,17 @@ export class CriticalApplicationsComponent implements OnInit {
           ?.atRiskMemberDetails ?? [],
       applicationName,
     };
-    this.dataService.setDrawerForAppAtRiskMembers(data);
+    this.dataService.setDrawerForAppAtRiskMembers(data, applicationName);
   };
 
-  showOrgAtRiskMembers = async () => {
+  showOrgAtRiskMembers = async (invokerId: string) => {
     const data = this.reportService.generateAtRiskMemberList(this.dataSource.data);
-    this.dataService.setDrawerForOrgAtRiskMembers(data);
+    this.dataService.setDrawerForOrgAtRiskMembers(data, invokerId);
   };
 
-  showOrgAtRiskApps = async () => {
+  showOrgAtRiskApps = async (invokerId: string) => {
     const data = this.reportService.generateAtRiskApplicationList(this.dataSource.data);
-    this.dataService.setDrawerForOrgAtRiskApps(data);
+    this.dataService.setDrawerForOrgAtRiskApps(data, invokerId);
   };
 
   trackByFunction(_: number, item: ApplicationHealthReportDetailWithCriticalFlag) {

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

@@ -56,7 +56,11 @@
       </bit-tab>
     </bit-tab-group>
 
-    <bit-drawer style="width: 30%" [(open)]="dataService.openDrawer">
+    <bit-drawer
+      style="width: 30%"
+      [(open)]="dataService.openDrawer"
+      (openChange)="dataService.closeDrawer()"
+    >
       <ng-container *ngIf="dataService.isActiveDrawerType(drawerTypes.OrgAtRiskMembers)">
         <bit-drawer-header
           title="{{ 'atRiskMembersWithCount' | i18n: dataService.atRiskMemberDetails.length }}"