[PM-17120] account deprovisioning banner (#13097)

* remove provider client privay banner, implement account deprovisioning banner

* add copy, make state depend on org plan type and org id

* cleanup

* refactor, add test

* cleanup

* cleanup

* add state migration

* Fix lintter error

apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html

@@ -121,6 +121,22 @@
   </app-side-nav>
 
   <ng-container *ngIf="organization$ | async as organization">
+    <bit-banner
+      *ngIf="showAccountDeprovisioningBanner$ | async"
+      (onClose)="bannerService.hideBanner(organization)"
+      class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
+    >
+      {{ "accountDeprovisioningNotification" | i18n }}
+      <a
+        href="https://bitwarden.com/help/claimed-accounts"
+        bitLink
+        linkType="contrast"
+        target="_blank"
+        rel="noreferrer"
+      >
+        {{ "learnMore" | i18n }}
+      </a>
+    </bit-banner>
     <bit-banner
       *ngIf="organization.isProviderUser"
       [showClose]="false"

apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts

@@ -3,7 +3,7 @@
 import { CommonModule } from "@angular/common";
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute, RouterModule } from "@angular/router";
-import { combineLatest, filter, firstValueFrom, map, Observable, switchMap } from "rxjs";
+import { combineLatest, filter, map, Observable, switchMap, withLatestFrom } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import {
@@ -22,6 +22,7 @@ import { PolicyType, ProviderStatusType } from "@bitwarden/common/admin-console/
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
+import { ProductTierType } from "@bitwarden/common/billing/enums";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -32,6 +33,8 @@ import { OrgSwitcherComponent } from "../../../layouts/org-switcher/org-switcher
 import { WebLayoutModule } from "../../../layouts/web-layout.module";
 import { AdminConsoleLogo } from "../../icons/admin-console-logo";
 
+import { AccountDeprovisioningBannerService } from "./services/account-deprovisioning-banner.service";
+
 @Component({
   selector: "app-organization-layout",
   templateUrl: "organization-layout.component.html",
@@ -61,6 +64,8 @@ export class OrganizationLayoutComponent implements OnInit {
   organizationIsUnmanaged$: Observable<boolean>;
   enterpriseOrganization$: Observable<boolean>;
 
+  showAccountDeprovisioningBanner$: Observable<boolean>;
+
   constructor(
     private route: ActivatedRoute,
     private organizationService: OrganizationService,
@@ -68,19 +73,36 @@ export class OrganizationLayoutComponent implements OnInit {
     private configService: ConfigService,
     private policyService: PolicyService,
     private providerService: ProviderService,
+    protected bannerService: AccountDeprovisioningBannerService,
     private accountService: AccountService,
   ) {}
 
   async ngOnInit() {
     document.body.classList.remove("layout_frontend");
 
-    const userId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
     this.organization$ = this.route.params.pipe(
       map((p) => p.organizationId),
-      switchMap((id) => this.organizationService.organizations$(userId).pipe(getById(id))),
+      withLatestFrom(this.accountService.activeAccount$.pipe(getUserId)),
+      switchMap(([orgId, userId]) =>
+        this.organizationService.organizations$(userId).pipe(getById(orgId)),
+      ),
       filter((org) => org != null),
     );
 
+    this.showAccountDeprovisioningBanner$ = combineLatest([
+      this.bannerService.showBanner$,
+      this.configService.getFeatureFlag$(FeatureFlag.AccountDeprovisioningBanner),
+      this.organization$,
+    ]).pipe(
+      map(
+        ([dismissedOrgs, featureFlagEnabled, organization]) =>
+          organization.productTierType === ProductTierType.Enterprise &&
+          organization.isAdmin &&
+          !dismissedOrgs?.includes(organization.id) &&
+          featureFlagEnabled,
+      ),
+    );
+
     this.canAccessExport$ = this.organization$.pipe(map((org) => org.canAccessExport));
 
     this.showPaymentAndHistory$ = this.organization$.pipe(

apps/web/src/app/admin-console/organizations/layouts/services/account-deprovisioning-banner.service.spec.ts

@@ -0,0 +1,75 @@
+import { firstValueFrom } from "rxjs";
+
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import {
+  FakeAccountService,
+  FakeStateProvider,
+  mockAccountServiceWith,
+} from "@bitwarden/common/spec";
+import { UserId } from "@bitwarden/common/types/guid";
+
+import { AccountDeprovisioningBannerService } from "./account-deprovisioning-banner.service";
+
+describe("Account Deprovisioning Banner Service", () => {
+  const userId = Utils.newGuid() as UserId;
+  let accountService: FakeAccountService;
+  let stateProvider: FakeStateProvider;
+  let bannerService: AccountDeprovisioningBannerService;
+
+  beforeEach(async () => {
+    accountService = mockAccountServiceWith(userId);
+    stateProvider = new FakeStateProvider(accountService);
+    bannerService = new AccountDeprovisioningBannerService(stateProvider);
+  });
+
+  it("updates state with single org", async () => {
+    const fakeOrg = new Organization();
+    fakeOrg.id = "123";
+
+    await bannerService.hideBanner(fakeOrg);
+    const state = await firstValueFrom(bannerService.showBanner$);
+
+    expect(state).toEqual([fakeOrg.id]);
+  });
+
+  it("updates state with multiple orgs", async () => {
+    const fakeOrg1 = new Organization();
+    fakeOrg1.id = "123";
+    const fakeOrg2 = new Organization();
+    fakeOrg2.id = "234";
+    const fakeOrg3 = new Organization();
+    fakeOrg3.id = "987";
+
+    await bannerService.hideBanner(fakeOrg1);
+    await bannerService.hideBanner(fakeOrg2);
+    await bannerService.hideBanner(fakeOrg3);
+
+    const state = await firstValueFrom(bannerService.showBanner$);
+
+    expect(state).toContain(fakeOrg1.id);
+    expect(state).toContain(fakeOrg2.id);
+    expect(state).toContain(fakeOrg3.id);
+  });
+
+  it("does not add the same org id multiple times", async () => {
+    const fakeOrg = new Organization();
+    fakeOrg.id = "123";
+
+    await bannerService.hideBanner(fakeOrg);
+    await bannerService.hideBanner(fakeOrg);
+
+    const state = await firstValueFrom(bannerService.showBanner$);
+
+    expect(state).toEqual([fakeOrg.id]);
+  });
+
+  it("does not add null to the state", async () => {
+    await bannerService.hideBanner(null as unknown as Organization);
+    await bannerService.hideBanner(undefined as unknown as Organization);
+
+    const state = await firstValueFrom(bannerService.showBanner$);
+
+    expect(state).toBeNull();
+  });
+});

apps/web/src/app/admin-console/organizations/layouts/services/account-deprovisioning-banner.service.ts

@@ -0,0 +1,40 @@
+import { Injectable } from "@angular/core";
+
+import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import {
+  ACCOUNT_DEPROVISIONING_BANNER_DISK,
+  StateProvider,
+  UserKeyDefinition,
+} from "@bitwarden/common/platform/state";
+
+export const SHOW_BANNER_KEY = new UserKeyDefinition<string[]>(
+  ACCOUNT_DEPROVISIONING_BANNER_DISK,
+  "accountDeprovisioningBanner",
+  {
+    deserializer: (b) => b,
+    clearOn: [],
+  },
+);
+
+@Injectable({ providedIn: "root" })
+export class AccountDeprovisioningBannerService {
+  private _showBanner = this.stateProvider.getActive(SHOW_BANNER_KEY);
+
+  showBanner$ = this._showBanner.state$;
+
+  constructor(private stateProvider: StateProvider) {}
+
+  async hideBanner(organization: Organization) {
+    await this._showBanner.update((state) => {
+      if (!organization) {
+        return state;
+      }
+      if (!state) {
+        return [organization.id];
+      } else if (!state.includes(organization.id)) {
+        return [...state, organization.id];
+      }
+      return state;
+    });
+  }
+}

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

@@ -10346,6 +10346,9 @@
       }
     }
   },
+  "accountDeprovisioningNotification" : {
+    "message": "Administrators now have the ability to delete member accounts that belong to a claimed domain."
+  },
   "deleteManagedUserWarningDesc": {
     "message": "This action will delete the member account including all items in their vault. This replaces the previous Remove action."
   },