[AC-2026] Add flexible collections opt-in UI (#7443)

apps/web/src/app/admin-console/organizations/settings/account.component.html

@@ -52,6 +52,25 @@
     {{ "rotateApiKey" | i18n }}
   </button>
 </ng-container>
+<form
+  *ngIf="
+    org && !loading && !org.flexibleCollections && (flexibleCollectionsMigrationEnabled$ | async)
+  "
+>
+  <h1 bitTypography="h1" class="tw-mt-16 tw-pb-2.5">
+    {{ "collectionManagement" | i18n }}
+    <span bitBadge variant="warning" class="!tw-align-middle">{{ "beta" | i18n }}</span>
+  </h1>
+  <p>
+    {{ "collectionEnhancementsDesc" | i18n }}
+    <a href="https://bitwarden.com/help/collection-management" target="_blank" rel="noopener">
+      {{ "collectionEnhancementsLearnMore" | i18n }}
+    </a>
+  </p>
+  <button type="button" bitButton buttonType="primary" [bitAction]="enableCollectionEnhancements">
+    {{ "enable" | i18n }}
+  </button>
+</form>
 <form
   *ngIf="org && !loading && org.flexibleCollections"
   [bitSubmit]="submitCollectionManagement"

apps/web/src/app/admin-console/organizations/settings/account.component.ts

@@ -41,6 +41,12 @@ export class AccountComponent {
   canUseApi = false;
   org: OrganizationResponse;
   taxFormPromise: Promise<unknown>;
+
+  protected flexibleCollectionsMigrationEnabled$ = this.configService.getFeatureFlag$(
+    FeatureFlag.FlexibleCollectionsMigration,
+    false,
+  );
+
   flexibleCollectionsV1Enabled$ = this.configService.getFeatureFlag$(
     FeatureFlag.FlexibleCollectionsV1,
     false,
@@ -177,6 +183,16 @@ export class AccountComponent {
     this.platformUtilsService.showToast("success", null, this.i18nService.t("organizationUpdated"));
   };
 
+  enableCollectionEnhancements = async () => {
+    await this.organizationApiService.enableCollectionEnhancements(this.organizationId);
+
+    this.platformUtilsService.showToast(
+      "success",
+      null,
+      this.i18nService.t("updatedCollectionManagement"),
+    );
+  };
+
   submitCollectionManagement = async () => {
     // Early exit if self-hosted
     if (this.selfHosted) {
@@ -194,7 +210,7 @@ export class AccountComponent {
     this.platformUtilsService.showToast(
       "success",
       null,
-      this.i18nService.t("collectionManagementUpdated"),
+      this.i18nService.t("updatedCollectionManagement"),
     );
   };
 

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

@@ -7325,8 +7325,8 @@
   "allowAdminAccessToAllCollectionItemsDesc": {
     "message": "Owners and admins can manage all collections and items"
   },
-  "collectionManagementUpdated": {
+  "updatedCollectionManagement": {
-    "message": "Collection management behavior saved"
+    "message": "Updated collection management setting"
   },
   "passwordManagerPlanPrice": {
     "message": "Password Manager plan price"
@@ -7461,5 +7461,12 @@
   "addAPaymentMethod": {
     "message": "add a payment method",
     "description": "This will be used as part of a larger sentence, broken up to include links. The full sentence will read 'To maintain your subscription for $ORG$, add a payment method.'"
+  },
+  "collectionEnhancementsDesc": {
+    "message": "Add new settings and permissions for additional flexibility. Replace the Manager role with the \"can manage\" permission, and introduce options to allow users to create collections as well as restrict administrative access to collections.",
+    "description": "This describes new features and improvements for user roles and collections"
+  },
+  "collectionEnhancementsLearnMore": {
+    "message": "Learn more about collection management"
   }
 }

libs/common/src/admin-console/abstractions/organization/organization-api.service.abstraction.ts

@@ -80,4 +80,5 @@ export class OrganizationApiServiceAbstraction {
     request: OrganizationCollectionManagementUpdateRequest,
   ) => Promise<OrganizationResponse>;
   risksSubscriptionFailure: (id: string) => Promise<OrganizationRisksSubscriptionFailureResponse>;
+  enableCollectionEnhancements: (id: string) => Promise<void>;
 }

libs/common/src/admin-console/services/organization/organization-api.service.ts

@@ -357,4 +357,15 @@ export class OrganizationApiService implements OrganizationApiServiceAbstraction
 
     return new OrganizationRisksSubscriptionFailureResponse(r);
   }
+
+  async enableCollectionEnhancements(id: string): Promise<void> {
+    await this.apiService.send(
+      "POST",
+      "/organizations/" + id + "/enable-collection-enhancements",
+      null,
+      true,
+      false,
+    );
+    await this.syncService.fullSync(true);
+  }
 }