[PM-30544] Added Critical app badge to Access Intelligence (#18658)

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

@@ -32,6 +32,9 @@
       }
     }
   },
+  "criticalBadge":{
+    "message": "Critical"
+  },
   "accessIntelligence": {
     "message": "Access Intelligence"
   },

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

@@ -19,6 +19,7 @@
         [ngModel]="selectedFilter()"
         (ngModelChange)="setFilterApplicationsByStatus($event)"
         fullWidth="false"
+        class="tw-min-w-48"
       ></bit-chip-select>
 
       <button
@@ -37,7 +38,6 @@
 
     <app-table-row-scrollable-m11
       [dataSource]="dataSource"
-      [showRowCheckBox]="true"
       [showRowMenuForCriticalApps]="false"
       [selectedUrls]="selectedUrls()"
       [openApplication]="drawerDetails.invokerId || ''"

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

@@ -12,32 +12,18 @@
       <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
+        [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
+        appStopProp
+      >
+        <input
+          bitCheckbox
+          type="checkbox"
+          [checked]="selectedUrls.has(row.applicationName)"
+          (change)="checkboxChange(row.applicationName, $event)"
+        />
+      </td>
       <td
         bitCell
         class="tw-cursor-pointer"
@@ -54,7 +40,7 @@
         }
       </td>
       <td
-        class="tw-cursor-pointer"
+        class="tw-cursor-pointer tw-align-middle"
         [ngClass]="{ 'tw-bg-primary-100': row.applicationName === openApplication }"
         (click)="showAppAtRiskMembers(row.applicationName)"
         (keydown.enter)="showAppAtRiskMembers(row.applicationName)"
@@ -63,7 +49,14 @@
         tabindex="0"
         [attr.aria-label]="'viewItem' | i18n"
       >
-        <span>{{ row.applicationName }}</span>
+        <div class="tw-flex tw-items-center tw-gap-2">
+          <div class="tw-max-w-md tw-truncate" [title]="row.applicationName">
+            {{ row.applicationName }}
+          </div>
+          @if (row.isMarkedAsCritical) {
+            <span bitBadge>{{ "criticalBadge" | i18n }}</span>
+          }
+        </div>
       </td>
       <td
         bitCell

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

@@ -28,9 +28,6 @@ export class AppTableRowScrollableM11Component {
   @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