[PM-27619] assign tasks component

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

@@ -272,7 +272,7 @@
     "message": "Members with access to at-risk items for critical applications"
   },
   "membersWithAtRiskPasswords": {
-    "message": "members with at-risk passwords"
+    "message": "Members with at-risk passwords"
   },
   "membersWillReceiveNotification": {
     "message": "Members will receive a notification to resolve at-risk logins through the browser extension."

bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/application-review-dialog/assign-tasks-view.component.html

@@ -4,30 +4,22 @@
     <!-- Left Panel -->
     <div class="tw-flex tw-flex-col tw-gap-4 tw-flex-1">
       <!-- Task Summary Info Card -->
-      <div
-        class="tw-flex tw-flex-col tw-p-6 tw-box-border tw-bg-secondary-100 tw-text-main tw-border-solid tw-border tw-border-secondary-300 tw-rounded-lg"
-      >
-        <div class="tw-flex tw-items-center tw-mb-3">
-          <i class="bwi bwi-info-circle tw-text-primary-600 tw-mr-2" aria-hidden="true"></i>
-          <span bitTypography="h6" class="tw-font-semibold">{{ "taskSummary" | i18n }}</span>
-        </div>
-
-        <div bitTypography="body1" class="tw-text-main">
-          <strong>{{ atRiskCriticalMembersCount() }}</strong>
-          {{ "membersWithAtRiskPasswords" | i18n }}
-          for
-          <strong>{{ criticalApplicationsCount() }}</strong>
-          {{ "criticalApplications" | i18n }}
-        </div>
-      </div>
+      <bit-callout type="info" [title]="'taskSummary' | i18n" class="tw-mb-6">
+        <strong>{{ atRiskCriticalMembersCount() }}</strong>
+        {{ "membersWithAtRiskPasswords" | i18n }}
+        for
+        <strong>{{ criticalApplicationsCount() }}</strong>
+        {{ "criticalApplications" | i18n }}
+      </bit-callout>
 
       <!-- Stat Box: Members with At-Risk Passwords -->
       <div class="tw-flex tw-items-start tw-gap-3">
         <bit-icon-tile
           icon="bwi-users"
           variant="primary"
           size="large"
-          aria-label=""
+          shape="circle"
+          aria-hidden="true"
         ></bit-icon-tile>
         <div class="tw-flex tw-flex-col">
           <span bitTypography="h2" class="tw-font-bold tw-mb-1">
@@ -45,7 +37,8 @@
           icon="bwi-desktop"
           variant="warning"
           size="large"
-          aria-label=""
+          shape="circle"
+          aria-hidden="true"
         ></bit-icon-tile>
         <div class="tw-flex tw-flex-col">
           <div class="tw-flex tw-items-baseline tw-gap-2 tw-mb-1">
@@ -63,104 +56,21 @@
       </div>
     </div>
 
-    <!-- Right Panel: Browser Extension Mockup -->
+    <!-- Right Panel: Browser Extension Video -->
     <div class="tw-flex tw-flex-col tw-gap-4 tw-flex-1">
-      <!-- Browser Extension Mockup -->
-      <div
-        class="tw-relative tw-bg-secondary-100 tw-rounded-lg tw-p-4 tw-border tw-border-secondary-300"
-      >
-        <!-- Browser Window Mockup -->
-        <div class="tw-bg-background tw-rounded tw-shadow-md tw-overflow-hidden">
-          <!-- Browser Top Bar -->
-          <div
-            class="tw-flex tw-items-center tw-gap-2 tw-bg-secondary-100 tw-px-3 tw-py-2 tw-border-b tw-border-secondary-300"
-          >
-            <div class="tw-flex tw-gap-1">
-              <div class="tw-size-3 tw-rounded-full tw-bg-secondary-300"></div>
-              <div class="tw-size-3 tw-rounded-full tw-bg-secondary-300"></div>
-              <div class="tw-size-3 tw-rounded-full tw-bg-secondary-300"></div>
-            </div>
-            <div
-              class="tw-flex-1 tw-bg-background tw-rounded tw-px-2 tw-py-1 tw-text-xs tw-text-muted tw-border tw-border-secondary-300"
-            >
-              example.com
-            </div>
-            <div class="tw-size-4 tw-bg-secondary-300 tw-rounded"></div>
-          </div>
-
-          <!-- Browser Content Area -->
-          <div class="tw-p-4 tw-bg-primary-100 tw-min-h-[200px] tw-relative">
-            <!-- Extension Popup Mockup -->
-            <div
-              class="tw-absolute tw-top-4 tw-right-4 tw-w-64 tw-bg-background tw-rounded-lg tw-shadow-lg tw-border tw-border-secondary-300 tw-p-4"
-            >
-              <!-- Extension Items -->
-              <div class="tw-space-y-3 tw-mb-4">
-                <div class="tw-flex tw-items-center tw-gap-2">
-                  <div class="tw-size-6 tw-bg-secondary-300 tw-rounded"></div>
-                  <div class="tw-flex-1 tw-h-2 tw-bg-secondary-300 tw-rounded"></div>
-                  <button
-                    type="button"
-                    class="tw-text-xs tw-px-2 tw-py-1 tw-bg-secondary-100 tw-rounded tw-text-main"
-                  >
-                    {{ "change" | i18n }}
-                  </button>
-                </div>
-                <div class="tw-flex tw-items-center tw-gap-2">
-                  <div class="tw-size-6 tw-bg-secondary-300 tw-rounded"></div>
-                  <div class="tw-flex-1 tw-h-2 tw-bg-secondary-300 tw-rounded"></div>
-                  <button
-                    type="button"
-                    class="tw-text-xs tw-px-2 tw-py-1 tw-bg-secondary-100 tw-rounded tw-text-main"
-                  >
-                    {{ "change" | i18n }}
-                  </button>
-                </div>
-                <div class="tw-flex tw-items-center tw-gap-2">
-                  <div class="tw-size-6 tw-bg-secondary-300 tw-rounded"></div>
-                  <div class="tw-flex-1 tw-h-2 tw-bg-secondary-300 tw-rounded"></div>
-                  <button
-                    type="button"
-                    class="tw-text-xs tw-px-2 tw-py-1 tw-bg-secondary-100 tw-rounded tw-text-main"
-                  >
-                    {{ "change" | i18n }}
-                  </button>
-                </div>
-              </div>
-
-              <!-- Review Section -->
-              <div class="tw-mb-4">
-                <div class="tw-h-3 tw-bg-secondary-300 tw-rounded tw-mb-2 tw-w-3/4"></div>
-                <div class="tw-h-2 tw-bg-secondary-300 tw-rounded tw-w-full tw-mb-1"></div>
-                <div class="tw-h-2 tw-bg-secondary-300 tw-rounded tw-w-5/6"></div>
-              </div>
-
-              <!-- Pagination Dots -->
-              <div class="tw-flex tw-justify-center tw-gap-1 tw-mb-3">
-                <div class="tw-size-1.5 tw-rounded-full tw-bg-primary-600"></div>
-                <div class="tw-size-1.5 tw-rounded-full tw-bg-secondary-300"></div>
-                <div class="tw-size-1.5 tw-rounded-full tw-bg-secondary-300"></div>
-              </div>
-
-              <!-- Review Button -->
-              <button
-                type="button"
-                class="tw-w-full tw-py-2 tw-bg-primary-600 tw-text-contrast tw-rounded tw-text-sm tw-font-semibold"
-              >
-                {{ "reviewAtRiskPasswords" | i18n }}
-              </button>
-            </div>
-
-            <!-- Mouse Cursor Mockup -->
-            <div
-              class="tw-absolute tw-top-8 tw-right-16 tw-size-4 tw-border-2 tw-border-text-main tw-bg-background"
-            ></div>
-          </div>
-        </div>
-      </div>
+      <video
+        class="tw-w-full tw-rounded-lg"
+        autoplay
+        loop
+        muted
+        playsinline
+        src="/videos/access-intelligence-assign-tasks.mp4"
+        appDarkImgSrc="/videos/access-intelligence-assign-tasks-dark.mp4"
+        aria-hidden="true"
+      ></video>
 
       <!-- Description Text -->
-      <div bitTypography="body2" class="tw-text-muted">
+      <div bitTypography="helper" class="tw-text-muted">
         {{ "membersWillReceiveNotification" | i18n }}
       </div>
     </div>

bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/application-review-dialog/assign-tasks-view.component.ts

@@ -1,8 +1,14 @@
 import { CommonModule } from "@angular/common";
-import { Component, input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
 
-import { ButtonModule, IconTileComponent, TypographyModule } from "@bitwarden/components";
+import {
+  ButtonModule,
+  CalloutComponent,
+  IconTileComponent,
+  TypographyModule,
+} from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
+import { DarkImageSourceDirective } from "@bitwarden/vault";
 
 import { DefaultAdminTaskService } from "../../../../vault/services/default-admin-task.service";
 import { AccessIntelligenceSecurityTasksService } from "../../shared/security-tasks.service";
@@ -17,12 +23,19 @@ import { AccessIntelligenceSecurityTasksService } from "../../shared/security-ta
  * Without these providers, Angular would throw NullInjectorError when trying to inject
  * DefaultAdminTaskService, which is required by AccessIntelligenceSecurityTasksService.
  */
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "dirt-assign-tasks-view",
   templateUrl: "./assign-tasks-view.component.html",
-  imports: [CommonModule, ButtonModule, TypographyModule, I18nPipe, IconTileComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    ButtonModule,
+    TypographyModule,
+    I18nPipe,
+    IconTileComponent,
+    DarkImageSourceDirective,
+    CalloutComponent,
+  ],
   providers: [AccessIntelligenceSecurityTasksService, DefaultAdminTaskService],
 })
 export class AssignTasksViewComponent {

bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/application-review-dialog/new-applications-dialog.component.html

@@ -1,4 +1,4 @@
-<bit-dialog [dialogSize]="'default'">
+<bit-dialog [dialogSize]="'large'">
   <span bitDialogTitle>
     {{
       currentView() === DialogView.SelectApplications

bitwarden_license/bit-web/src/app/dirt/access-intelligence/activity/application-review-dialog/new-applications-dialog.component.ts

@@ -1,5 +1,12 @@
 import { CommonModule } from "@angular/common";
-import { Component, DestroyRef, Inject, inject, signal } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  Inject,
+  inject,
+  signal,
+} from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { from, switchMap } from "rxjs";
 
@@ -11,6 +18,7 @@ import {
 } from "@bitwarden/bit-common/dirt/reports/risk-insights";
 import { getUniqueMembers } from "@bitwarden/bit-common/dirt/reports/risk-insights/helpers";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { OrganizationId } from "@bitwarden/common/types/guid";
 import {
   ButtonModule,
@@ -58,11 +66,10 @@ export const NewApplicationsDialogResultType = Object.freeze({
 export type NewApplicationsDialogResultType =
   (typeof NewApplicationsDialogResultType)[keyof typeof NewApplicationsDialogResultType];
 
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "dirt-new-applications-dialog",
   templateUrl: "./new-applications-dialog.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     CommonModule,
     ButtonModule,
@@ -101,6 +108,7 @@ export class NewApplicationsDialogComponent {
     private toastService: ToastService,
     private i18nService: I18nService,
     private accessIntelligenceSecurityTasksService: AccessIntelligenceSecurityTasksService,
+    private logService: LogService,
   ) {}
 
   /**
@@ -140,6 +148,11 @@ export class NewApplicationsDialogComponent {
   }
 
   handleMarkAsCritical() {
+    if (this.markingAsCritical() || this.saving()) {
+      return; // Prevent action if already processing
+    }
+    this.markingAsCritical.set(true);
+
     const onlyNewCriticalApplications = this.dialogParams.newApplications.filter((newApp) =>
       this.selectedApplications().has(newApp.applicationName),
     );
@@ -150,6 +163,7 @@ export class NewApplicationsDialogComponent {
     this.atRiskCriticalMembersCount.set(atRiskCriticalMembersCount);
 
     this.currentView.set(DialogView.AssignTasks);
+    this.markingAsCritical.set(false);
   }
 
   /**
@@ -209,7 +223,11 @@ export class NewApplicationsDialogComponent {
           this.saving.set(false);
           this.handleAssigningCompleted();
         },
-        error: () => {
+        error: (error: unknown) => {
+          this.logService.error(
+            "[NewApplicationsDialog] Failed to save application review or assign tasks",
+            error,
+          );
           this.saving.set(false);
           this.toastService.showToast({
             variant: "error",