[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

libs/angular/src/vault/services/custom-nudges-services/index.ts

@@ -3,4 +3,5 @@ export * from "./account-security-nudge.service";
 export * from "./has-items-nudge.service";
 export * from "./download-bitwarden-nudge.service";
 export * from "./empty-vault-nudge.service";
+export * from "./vault-settings-import-nudge.service";
 export * from "./new-item-nudge.service";

libs/angular/src/vault/services/custom-nudges-services/vault-settings-import-nudge.service.ts

@@ -0,0 +1,74 @@
+import { inject, Injectable } from "@angular/core";
+import { combineLatest, Observable, of, switchMap } from "rxjs";
+
+// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
+// eslint-disable-next-line no-restricted-imports
+import { CollectionService } from "@bitwarden/admin-console/common";
+import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
+import { UserId } from "@bitwarden/common/types/guid";
+import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+
+import { DefaultSingleNudgeService } from "../default-single-nudge.service";
+import { NudgeStatus, NudgeType } from "../nudges.service";
+
+/**
+ * Custom Nudge Service for the vault settings import badge.
+ */
+@Injectable({
+  providedIn: "root",
+})
+export class VaultSettingsImportNudgeService extends DefaultSingleNudgeService {
+  cipherService = inject(CipherService);
+  organizationService = inject(OrganizationService);
+  collectionService = inject(CollectionService);
+
+  nudgeStatus$(nudgeType: NudgeType, userId: UserId): Observable<NudgeStatus> {
+    return combineLatest([
+      this.getNudgeStatus$(nudgeType, userId),
+      this.cipherService.cipherViews$(userId),
+      this.organizationService.organizations$(userId),
+      this.collectionService.decryptedCollections$,
+    ]).pipe(
+      switchMap(([nudgeStatus, ciphers, orgs, collections]) => {
+        const vaultHasMoreThanOneItem = (ciphers?.length ?? 0) > 1;
+        const { hasBadgeDismissed, hasSpotlightDismissed } = nudgeStatus;
+
+        // When the user has no organizations, return the nudge status directly
+        if ((orgs?.length ?? 0) === 0) {
+          return hasBadgeDismissed || hasSpotlightDismissed
+            ? of(nudgeStatus)
+            : of({
+                hasSpotlightDismissed: vaultHasMoreThanOneItem,
+                hasBadgeDismissed: vaultHasMoreThanOneItem,
+              });
+        }
+
+        const orgIds = new Set(orgs.map((org) => org.id));
+        const canCreateCollections = orgs.some((org) => org.canCreateNewCollections);
+        const hasManageCollections = collections.some(
+          (c) => c.manage && orgIds.has(c.organizationId),
+        );
+
+        // When the user has dismissed the nudge or spotlight, return the nudge status directly
+        if (hasBadgeDismissed || hasSpotlightDismissed) {
+          return of(nudgeStatus);
+        }
+
+        // When the user belongs to an organization and cannot create collections or manage collections,
+        // hide the nudge and spotlight
+        if (!hasManageCollections && !canCreateCollections) {
+          return of({
+            hasSpotlightDismissed: true,
+            hasBadgeDismissed: true,
+          });
+        }
+
+        // Otherwise, return the nudge status based on the vault contents
+        return of({
+          hasSpotlightDismissed: vaultHasMoreThanOneItem,
+          hasBadgeDismissed: vaultHasMoreThanOneItem,
+        });
+      }),
+    );
+  }
+}

libs/angular/src/vault/services/nudges.service.spec.ts

@@ -20,6 +20,7 @@ import {
   HasItemsNudgeService,
   EmptyVaultNudgeService,
   DownloadBitwardenNudgeService,
+  VaultSettingsImportNudgeService,
 } from "./custom-nudges-services";
 import { DefaultSingleNudgeService } from "./default-single-nudge.service";
 import { NudgesService, NudgeType } from "./nudges.service";
@@ -64,6 +65,10 @@ describe("Vault Nudges Service", () => {
           provide: EmptyVaultNudgeService,
           useValue: mock<EmptyVaultNudgeService>(),
         },
+        {
+          provide: VaultSettingsImportNudgeService,
+          useValue: mock<VaultSettingsImportNudgeService>(),
+        },
         {
           provide: ApiService,
           useValue: mock<ApiService>(),

libs/angular/src/vault/services/nudges.service.ts

@@ -13,6 +13,7 @@ import {
   DownloadBitwardenNudgeService,
   NewItemNudgeService,
   AccountSecurityNudgeService,
+  VaultSettingsImportNudgeService,
 } from "./custom-nudges-services";
 import { DefaultSingleNudgeService, SingleNudgeService } from "./default-single-nudge.service";
 
@@ -31,6 +32,7 @@ export enum NudgeType {
    * Add future nudges here
    */
   EmptyVaultNudge = "empty-vault-nudge",
+  VaultSettingsImportNudge = "vault-settings-import-nudge",
   HasVaultItems = "has-vault-items",
   AutofillNudge = "autofill-nudge",
   AccountSecurity = "account-security",
@@ -64,6 +66,7 @@ export class NudgesService {
   private customNudgeServices: Partial<Record<NudgeType, SingleNudgeService>> = {
     [NudgeType.HasVaultItems]: inject(HasItemsNudgeService),
     [NudgeType.EmptyVaultNudge]: inject(EmptyVaultNudgeService),
+    [NudgeType.VaultSettingsImportNudge]: inject(VaultSettingsImportNudgeService),
     [NudgeType.AccountSecurity]: inject(AccountSecurityNudgeService),
     [NudgeType.AutofillNudge]: inject(AutofillNudgeService),
     [NudgeType.DownloadBitwarden]: inject(DownloadBitwardenNudgeService),

libs/components/src/no-items/no-items.component.html

@@ -1,7 +1,7 @@
 <div class="tw-mx-auto tw-flex tw-flex-col tw-items-center tw-justify-center tw-pt-6">
   <div class="tw-max-w-sm tw-flex tw-flex-col tw-items-center">
     <bit-icon [icon]="icon" aria-hidden="true"></bit-icon>
-    <h3 class="tw-font-semibold tw-text-center">
+    <h3 class="tw-font-semibold tw-text-center tw-mt-4">
       <ng-content select="[slot=title]"></ng-content>
     </h3>
     <p class="tw-text-center">