[PM-21791] Nudge UI Bug Fixes (#15010)

* remove margin bottom from empty vault nudge

* update page title to vault options

* show badge on import of vault settings

* add margin between no items title and icon

* add mock to test

* add comment for destroying vault settings page

* fix logic for manage/create collection

* account for deleted ciphers when showing the import nudge

* refactor name of vault import nudge

apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.html

@@ -46,7 +46,7 @@
           [title]="'hasItemsVaultNudgeTitle' | i18n"
           (onDismiss)="dismissVaultNudgeSpotlight(NudgeType.HasVaultItems)"
         >
-          <ul class="tw-pl-4 tw-text-main" bitTypography="body2">
+          <ul class="tw-pl-4 tw-text-main tw-mb-0" bitTypography="body2">
             <li>{{ "hasItemsVaultNudgeBodyOne" | i18n }}</li>
             <li>{{ "hasItemsVaultNudgeBodyTwo" | i18n }}</li>
             <li>{{ "hasItemsVaultNudgeBodyThree" | i18n }}</li>

apps/browser/src/vault/popup/settings/vault-settings-v2.component.html

@@ -1,5 +1,5 @@
 <popup-page>
-  <popup-header slot="header" [pageTitle]="'vault' | i18n" showBackButton>
+  <popup-header slot="header" [pageTitle]="'settingsVaultOptions' | i18n" showBackButton>
     <ng-container slot="end">
       <app-pop-out></app-pop-out>
     </ng-container>
@@ -14,7 +14,17 @@
     </bit-item>
     <bit-item>
       <button type="button" bit-item-content (click)="import()">
-        {{ "importItems" | i18n }}
+        <div class="tw-flex tw-items-center tw-justify-center tw-gap-2">
+          <p>{{ "importItems" | i18n }}</p>
+          <span
+            *ngIf="emptyVaultImportBadge$ | async"
+            bitBadge
+            variant="notification"
+            [attr.aria-label]="'nudgeBadgeAria' | i18n"
+          >
+            1
+          </span>
+        </div>
         <i slot="end" class="bwi bwi-popout" aria-hidden="true"></i>
       </button>
     </bit-item>

apps/browser/src/vault/popup/settings/vault-settings-v2.component.ts

@@ -1,11 +1,15 @@
 import { CommonModule } from "@angular/common";
-import { Component, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
 import { Router, RouterModule } from "@angular/router";
+import { firstValueFrom, switchMap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { NudgesService, NudgeType } from "@bitwarden/angular/vault";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction";
-import { ItemModule, ToastOptions, ToastService } from "@bitwarden/components";
+import { BadgeComponent, ItemModule, ToastOptions, ToastService } from "@bitwarden/components";
 
 import { BrowserApi } from "../../../platform/browser/browser-api";
 import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";
@@ -23,22 +27,38 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
     PopupHeaderComponent,
     PopOutComponent,
     ItemModule,
+    BadgeComponent,
   ],
 })
-export class VaultSettingsV2Component implements OnInit {
+export class VaultSettingsV2Component implements OnInit, OnDestroy {
   lastSync = "--";
 
+  protected emptyVaultImportBadge$ = this.accountService.activeAccount$.pipe(
+    getUserId,
+    switchMap((userId) =>
+      this.nudgeService.showNudgeBadge$(NudgeType.VaultSettingsImportNudge, userId),
+    ),
+  );
+
   constructor(
     private router: Router,
     private syncService: SyncService,
     private toastService: ToastService,
     private i18nService: I18nService,
+    private nudgeService: NudgesService,
+    private accountService: AccountService,
   ) {}
 
   async ngOnInit() {
     await this.setLastSync();
   }
 
+  async ngOnDestroy(): Promise<void> {
+    // When a user navigates away from the page, dismiss the empty vault import nudge
+    const userId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
+    await this.nudgeService.dismissNudge(NudgeType.VaultSettingsImportNudge, userId);
+  }
+
   async import() {
     await this.router.navigate(["/import"]);
     if (await BrowserApi.isPopupOpen()) {