[PM 22968] Enforce UI Restrictions When MSP/BUP Is Disabled (#15752)

* Suspended client change and tooltips * Add the warning Icon properly * Add feature flag to the changes * Reverted it, should only show for admins * Add changes to disable AddOrganizationButton * change the default value * Refactor the code to reactive * Apply the requested changes * Remove the providerId
2025-12-16 16:23:44 +00:00 · 2025-07-29 09:59:35 +01:00
parent e3d5385661
commit 95f037390e
7 changed files with 167 additions and 74 deletions
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.html
@@ -1,10 +1,11 @@
+@let isAdminOrServiceUser = isAdminOrServiceUser$ | async;
 <app-header>
  <bit-search
    class="tw-grow"
    [formControl]="searchControl"
    [placeholder]="'search' | i18n"
  ></bit-search>
-  <a bitButton routerLink="create" *ngIf="manageOrganizations" buttonType="primary">
+  <a bitButton routerLink="create" *ngIf="isAdminOrServiceUser" buttonType="primary">
    <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
    {{ "newClient" | i18n }}
  </a>
@@ -12,7 +13,7 @@
    type="button"
    bitButton
    (click)="addExistingOrganization()"
-    *ngIf="manageOrganizations && showAddExisting"
+    *ngIf="isAdminOrServiceUser && showAddExisting"
  >
    <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
    {{ "addExistingOrganization" | i18n }}
@@ -52,7 +53,7 @@
          <span>{{ row.plan }}</span>
          <div appListDropdown>
            <button
-              *ngIf="manageOrganizations"
+              *ngIf="isAdminOrServiceUser"
              [bitMenuTriggerFor]="removeMenu"
              bitMenuItem
              buttonType="secondary"
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.ts
@@ -3,8 +3,8 @@ import { Component } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormControl } from "@angular/forms";
 import { ActivatedRoute, Router, RouterModule } from "@angular/router";
-import { firstValueFrom, from, map } from "rxjs";
-import { debounceTime, first, switchMap } from "rxjs/operators";
+import { firstValueFrom, from, map, Observable, switchMap } from "rxjs";
+import { debounceTime, first } from "rxjs/operators";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -54,15 +54,29 @@ const DisallowedPlanTypes = [
  ],
 })
 export class ClientsComponent {
-  providerId: string = "";
  addableOrganizations: Organization[] = [];
  loading = true;
-  manageOrganizations = false;
  showAddExisting = false;
  dataSource: TableDataSource<ProviderOrganizationOrganizationDetailsResponse> =
    new TableDataSource();
  protected searchControl = new FormControl("", { nonNullable: true });

+  protected providerId$: Observable<string> =
+    this.activatedRoute.parent?.params.pipe(map((params) => params.providerId as string)) ??
+    new Observable();
+
+  protected provider$ = this.providerId$.pipe(
+    switchMap((providerId) => this.providerService.get$(providerId)),
+  );
+
+  protected isAdminOrServiceUser$ = this.provider$.pipe(
+    map(
+      (provider) =>
+        provider?.type === ProviderUserType.ProviderAdmin ||
+        provider?.type === ProviderUserType.ServiceUser,
+    ),
+  );
+
  constructor(
    private router: Router,
    private providerService: ProviderService,
@@ -81,24 +95,17 @@ export class ClientsComponent {
      this.searchControl.setValue(queryParams.search);
    });

-    this.activatedRoute.parent?.params
-      ?.pipe(
-        switchMap((params) => {
-          this.providerId = params.providerId;
-          return this.providerService.get$(this.providerId).pipe(
-            map((provider) => provider?.providerStatus === ProviderStatusType.Billable),
-            map((isBillable) => {
-              if (isBillable) {
-                return from(
-                  this.router.navigate(["../manage-client-organizations"], {
-                    relativeTo: this.activatedRoute,
-                  }),
-                );
-              } else {
-                return from(this.load());
-              }
-            }),
-          );
+    this.provider$
+      .pipe(
+        map((provider) => {
+          if (provider?.providerStatus === ProviderStatusType.Billable) {
+            return from(
+              this.router.navigate(["../manage-client-organizations"], {
+                relativeTo: this.activatedRoute,
+              }),
+            );
+          }
+          return from(this.load());
        }),
        takeUntilDestroyed(),
      )
@@ -124,7 +131,8 @@ export class ClientsComponent {
    }

    try {
-      await this.webProviderService.detachOrganization(this.providerId, organization.id);
+      const providerId = await firstValueFrom(this.providerId$);
+      await this.webProviderService.detachOrganization(providerId, organization.id);
      this.toastService.showToast({
        variant: "success",
        title: "",
@@ -137,12 +145,11 @@ export class ClientsComponent {
  }

  async load() {
-    const response = await this.apiService.getProviderClients(this.providerId);
+    const providerId = await firstValueFrom(this.providerId$);
+    const response = await this.apiService.getProviderClients(providerId);
    const userId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
    const clients = response.data != null && response.data.length > 0 ? response.data : [];
    this.dataSource.data = clients;
-    this.manageOrganizations =
-      (await this.providerService.get(this.providerId)).type === ProviderUserType.ProviderAdmin;
    const candidateOrgs = (
      await firstValueFrom(this.organizationService.organizations$(userId))
    ).filter((o) => o.isOwner && o.providerId == null);
@@ -158,8 +165,9 @@ export class ClientsComponent {
  }

  async addExistingOrganization() {
+    const providerId = await firstValueFrom(this.providerId$);
    const dialogRef = AddOrganizationComponent.open(this.dialogService, {
-      providerId: this.providerId,
+      providerId: providerId,
      organizations: this.addableOrganizations,
    });

--- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html
@@ -10,7 +10,15 @@
      icon="bwi-provider"
      [text]="clientsTranslationKey$ | async | i18n"
      [route]="(isBillable | async) ? 'manage-client-organizations' : 'clients'"
-    ></bit-nav-item>
+    >
+      <i
+        *ngIf="!provider.enabled && (providerPortalTakeover$ | async)"
+        slot="end"
+        class="bwi bwi-exclamation-triangle tw-text-danger"
+        title="{{ 'providerIsDisabled' | i18n }}"
+        aria-hidden="true"
+      ></i>
+    </bit-nav-item>
    <bit-nav-group
      icon="bwi-sliders"
      [text]="'manage' | i18n"
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts
@@ -38,6 +38,7 @@ export class ProvidersLayoutComponent implements OnInit, OnDestroy {

  protected clientsTranslationKey$: Observable<string>;
  protected managePaymentDetailsOutsideCheckout$: Observable<boolean>;
+  protected providerPortalTakeover$: Observable<boolean>;

  constructor(
    private route: ActivatedRoute,
@@ -94,6 +95,10 @@ export class ProvidersLayoutComponent implements OnInit, OnDestroy {
        takeUntil(this.destroy$),
      )
      .subscribe();
+
+    this.providerPortalTakeover$ = this.configService.getFeatureFlag$(
+      FeatureFlag.PM21821_ProviderPortalTakeover,
+    );
  }

  ngOnDestroy() {
--- a/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-clients.component.html
+++ b/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-clients.component.html
@@ -1,3 +1,5 @@
+@let isSuspensionActive = suspensionActive$ | async;
+@let provider = provider$ | async;
 <app-header [title]="pageTitle">
  <bit-search [placeholder]="'search' | i18n" [formControl]="searchControl"></bit-search>
  <button
@@ -5,17 +7,31 @@
    buttonType="primary"
    type="button"
    [bitMenuTriggerFor]="clientMenu"
+    [disabled]="isSuspensionActive"
+    [title]="isSuspensionActive ? ('providerIsDisabled' | i18n) : ''"
    appA11yTitle="{{ 'add' | i18n }}"
  >
    <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
    {{ "add" | i18n }}
  </button>
  <bit-menu #clientMenu>
-    <button type="button" bitMenuItem (click)="createClient()">
+    <button
+      type="button"
+      bitMenuItem
+      [disabled]="isSuspensionActive"
+      [title]="isSuspensionActive ? ('providerIsDisabled' | i18n) : ''"
+      (click)="createClient()"
+    >
      <i aria-hidden="true" class="bwi bwi-business"></i>
      {{ newClientButtonLabel }}
    </button>
-    <button type="button" bitMenuItem (click)="addExistingOrganization()">
+    <button
+      type="button"
+      bitMenuItem
+      [disabled]="isSuspensionActive"
+      [title]="isSuspensionActive ? ('providerIsDisabled' | i18n) : ''"
+      (click)="addExistingOrganization()"
+    >
      <i aria-hidden="true" class="bwi bwi-filter"></i>
      {{ "existingOrganization" | i18n }}
    </button>
@@ -73,26 +89,41 @@
          appA11yTitle="{{ 'options' | i18n }}"
        ></button>
        <bit-menu #rowMenu>
-          <button type="button" bitMenuItem (click)="manageClientName(row)">
+          <button
+            type="button"
+            bitMenuItem
+            [disabled]="isSuspensionActive"
+            [title]="isSuspensionActive ? ('providerIsDisabled' | i18n) : ''"
+            (click)="manageClientName(row)"
+          >
            <i aria-hidden="true" class="bwi bwi-pencil-square"></i>
            {{ "updateName" | i18n }}
          </button>
-          <button type="button" bitMenuItem (click)="manageClientSubscription(row)">
+          <button
+            type="button"
+            bitMenuItem
+            [disabled]="isSuspensionActive"
+            [title]="isSuspensionActive ? ('providerIsDisabled' | i18n) : ''"
+            (click)="manageClientSubscription(row)"
+          >
            <i aria-hidden="true" class="bwi bwi-family"></i>
            {{ "manageSubscription" | i18n }}
          </button>
-          <button *ngIf="isProviderAdmin" type="button" bitMenuItem (click)="remove(row)">
-            <span class="tw-text-danger">
-              <i aria-hidden="true" class="bwi bwi-close"></i> {{ "unlinkOrganization" | i18n }}
-            </span>
-          </button>
+          @if (provider?.type === ProviderUserType.ProviderAdmin) {
+            <button type="button" bitMenuItem (click)="remove(row)">
+              <span class="tw-text-danger">
+                <i aria-hidden="true" class="bwi bwi-close"></i> {{ "unlinkOrganization" | i18n }}
+              </span>
+            </button>
+          }
        </bit-menu>
      </td>
    </ng-template>
  </bit-table-scroll>
  <div *ngIf="dataSource.data.length === 0" class="tw-mt-10">
    <app-no-clients
-      [showAddOrganizationButton]="isProviderAdmin"
+      [showAddOrganizationButton]="provider?.type === ProviderUserType.ProviderAdmin"
+      [disableAddOrganizationButton]="isSuspensionActive"
      (addNewOrganizationClicked)="createClient()"
    />
  </div>
--- a/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-clients.component.ts
+++ b/bitwarden_license/bit-web/src/app/billing/providers/clients/manage-clients.component.ts
@@ -2,8 +2,16 @@ import { Component } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormControl } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
-import { firstValueFrom, from, lastValueFrom, map } from "rxjs";
-import { debounceTime, first, switchMap } from "rxjs/operators";
+import {
+  firstValueFrom,
+  from,
+  lastValueFrom,
+  map,
+  combineLatest,
+  switchMap,
+  Observable,
+} from "rxjs";
+import { debounceTime, first } from "rxjs/operators";

 import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
 import {
@@ -15,6 +23,8 @@ import { Provider } from "@bitwarden/common/admin-console/models/domain/provider
 import { ProviderOrganizationOrganizationDetailsResponse } from "@bitwarden/common/admin-console/models/response/provider/provider-organization.response";
 import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
 import { PlanResponse } from "@bitwarden/common/billing/models/response/plan.response";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import {
@@ -61,20 +71,49 @@ import { ReplacePipe } from "./replace.pipe";
  ],
 })
 export class ManageClientsComponent {
-  providerId: string = "";
-  provider: Provider | undefined;
  loading = true;
-  isProviderAdmin = false;
  dataSource: TableDataSource<ProviderOrganizationOrganizationDetailsResponse> =
    new TableDataSource();

  protected searchControl = new FormControl("", { nonNullable: true });
  protected plans: PlanResponse[] = [];
+  protected ProviderUserType = ProviderUserType;

  pageTitle = this.i18nService.t("clients");
  clientColumnHeader = this.i18nService.t("client");
  newClientButtonLabel = this.i18nService.t("newClient");

+  protected providerId$: Observable<string> =
+    this.activatedRoute.parent?.params.pipe(map((params) => params.providerId as string)) ??
+    new Observable();
+
+  protected provider$ = this.providerId$.pipe(
+    switchMap((providerId) => this.providerService.get$(providerId)),
+  );
+
+  protected isAdminOrServiceUser$ = this.provider$.pipe(
+    map(
+      (provider) =>
+        provider?.type === ProviderUserType.ProviderAdmin ||
+        provider?.type === ProviderUserType.ServiceUser,
+    ),
+  );
+
+  protected providerPortalTakeover$ = this.configService.getFeatureFlag$(
+    FeatureFlag.PM21821_ProviderPortalTakeover,
+  );
+
+  protected suspensionActive$ = combineLatest([
+    this.isAdminOrServiceUser$,
+    this.providerPortalTakeover$,
+    this.provider$.pipe(map((provider) => provider?.enabled ?? false)),
+  ]).pipe(
+    map(
+      ([isAdminOrServiceUser, portalTakeoverEnabled, providerEnabled]) =>
+        isAdminOrServiceUser && portalTakeoverEnabled && !providerEnabled,
+    ),
+  );
+
  constructor(
    private billingApiService: BillingApiServiceAbstraction,
    private providerService: ProviderService,
@@ -86,29 +125,23 @@ export class ManageClientsComponent {
    private validationService: ValidationService,
    private webProviderService: WebProviderService,
    private billingNotificationService: BillingNotificationService,
+    private configService: ConfigService,
  ) {
    this.activatedRoute.queryParams.pipe(first(), takeUntilDestroyed()).subscribe((queryParams) => {
      this.searchControl.setValue(queryParams.search);
    });

-    this.activatedRoute.parent?.params
-      ?.pipe(
-        switchMap((params) => {
-          this.providerId = params.providerId;
-          return this.providerService.get$(this.providerId).pipe(
-            map((provider: Provider) => provider?.providerStatus === ProviderStatusType.Billable),
-            map((isBillable) => {
-              if (!isBillable) {
-                return from(
-                  this.router.navigate(["../clients"], {
-                    relativeTo: this.activatedRoute,
-                  }),
-                );
-              } else {
-                return from(this.load());
-              }
-            }),
-          );
+    this.provider$
+      .pipe(
+        map((provider: Provider) => {
+          if (provider?.providerStatus !== ProviderStatusType.Billable) {
+            return from(
+              this.router.navigate(["../clients"], {
+                relativeTo: this.activatedRoute,
+              }),
+            );
+          }
+          return from(this.load());
        }),
        takeUntilDestroyed(),
      )
@@ -124,15 +157,15 @@ export class ManageClientsComponent {

  async load() {
    try {
-      this.provider = await firstValueFrom(this.providerService.get$(this.providerId));
-      if (this.provider?.providerType === ProviderType.BusinessUnit) {
+      const providerId = await firstValueFrom(this.providerId$);
+      const provider = await firstValueFrom(this.providerService.get$(providerId));
+      if (provider?.providerType === ProviderType.BusinessUnit) {
        this.pageTitle = this.i18nService.t("businessUnits");
        this.clientColumnHeader = this.i18nService.t("businessUnit");
        this.newClientButtonLabel = this.i18nService.t("newBusinessUnit");
      }
-      this.isProviderAdmin = this.provider?.type === ProviderUserType.ProviderAdmin;
      this.dataSource.data = (
-        await this.billingApiService.getProviderClientOrganizations(this.providerId)
+        await this.billingApiService.getProviderClientOrganizations(providerId)
      ).data;
      this.plans = (await this.billingApiService.getPlans()).data;
      this.loading = false;
@@ -142,10 +175,11 @@ export class ManageClientsComponent {
  }

  addExistingOrganization = async () => {
-    if (this.provider) {
+    const provider = await firstValueFrom(this.provider$);
+    if (provider) {
      const reference = AddExistingOrganizationDialogComponent.open(this.dialogService, {
        data: {
-          provider: this.provider,
+          provider: provider,
        },
      });

@@ -158,9 +192,10 @@ export class ManageClientsComponent {
  };

  createClient = async () => {
+    const providerId = await firstValueFrom(this.providerId$);
    const reference = openCreateClientDialog(this.dialogService, {
      data: {
-        providerId: this.providerId,
+        providerId: providerId,
        plans: this.plans,
      },
    });
@@ -173,9 +208,10 @@ export class ManageClientsComponent {
  };

  manageClientName = async (organization: ProviderOrganizationOrganizationDetailsResponse) => {
+    const providerId = await firstValueFrom(this.providerId$);
    const dialogRef = openManageClientNameDialog(this.dialogService, {
      data: {
-        providerId: this.providerId,
+        providerId: providerId,
        organization: {
          id: organization.id,
          name: organization.organizationName,
@@ -194,10 +230,11 @@ export class ManageClientsComponent {
  manageClientSubscription = async (
    organization: ProviderOrganizationOrganizationDetailsResponse,
  ) => {
+    const provider = await firstValueFrom(this.provider$);
    const dialogRef = openManageClientSubscriptionDialog(this.dialogService, {
      data: {
        organization,
-        provider: this.provider!,
+        provider: provider!,
      },
    });

@@ -220,7 +257,8 @@ export class ManageClientsComponent {
    }

    try {
-      await this.webProviderService.detachOrganization(this.providerId, organization.id);
+      const providerId = await firstValueFrom(this.providerId$);
+      await this.webProviderService.detachOrganization(providerId, organization.id);
      this.toastService.showToast({
        variant: "success",
        title: "",
--- a/bitwarden_license/bit-web/src/app/billing/providers/clients/no-clients.component.ts
+++ b/bitwarden_license/bit-web/src/app/billing/providers/clients/no-clients.component.ts
@@ -30,6 +30,7 @@ const gearIcon = svgIcon`
    <p class="tw-mt-4">{{ "noClients" | i18n }}</p>
    <a
      *ngIf="showAddOrganizationButton"
+      [disabled]="disableAddOrganizationButton"
      type="button"
      bitButton
      buttonType="primary"
@@ -43,6 +44,7 @@ const gearIcon = svgIcon`
 export class NoClientsComponent {
  icon = gearIcon;
  @Input() showAddOrganizationButton = true;
+  @Input() disableAddOrganizationButton = false;
  @Output() addNewOrganizationClicked = new EventEmitter();

  addNewOrganization = () => this.addNewOrganizationClicked.emit();