[PM-18523] Make the External ID in the Group dialog conditional (#14006)

* Add SsoExternalIdVisibility feature flag

* Implement visibility logic for Group external ID based on SsoExternalIdVisibility feature flag

apps/web/src/app/admin-console/organizations/manage/group-add-edit.component.html

@@ -23,7 +23,7 @@
             <input bitInput appAutofocus type="text" formControlName="name" />
             <bit-hint>{{ "characterMaximum" | i18n: 100 }}</bit-hint>
           </bit-form-field>
-          <bit-form-field>
+          <bit-form-field *ngIf="isExternalIdVisible$ | async">
             <bit-label>{{ "externalId" | i18n }}</bit-label>
             <input bitInput type="text" formControlName="externalId" />
             <bit-hint>{{ "externalIdDesc" | i18n }}</bit-hint>

apps/web/src/app/admin-console/organizations/manage/group-add-edit.component.ts

@@ -29,7 +29,9 @@ import {
 } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -215,6 +217,10 @@ export class GroupAddEditComponent implements OnInit, OnDestroy {
     this.groupDetails$,
   ]).pipe(map(([allowAdminAccess, groupDetails]) => !allowAdminAccess && groupDetails != null));
 
+  protected isExternalIdVisible$ = this.configService
+    .getFeatureFlag$(FeatureFlag.SsoExternalIdVisibility)
+    .pipe(map((isEnabled) => !isEnabled || !!this.groupForm.get("externalId")?.value));
+
   constructor(
     @Inject(DIALOG_DATA) private params: GroupAddEditDialogParams,
     private dialogRef: DialogRef<GroupAddEditDialogResultType>,
@@ -231,6 +237,7 @@ export class GroupAddEditComponent implements OnInit, OnDestroy {
     private accountService: AccountService,
     private collectionAdminService: CollectionAdminService,
     private toastService: ToastService,
+    private configService: ConfigService,
   ) {
     this.tabIndex = params.initialTab ?? GroupAddEditTabType.Info;
   }

libs/common/src/enums/feature-flag.enum.ts

@@ -8,6 +8,7 @@ export enum FeatureFlag {
   AccountDeprovisioning = "pm-10308-account-deprovisioning",
   VerifiedSsoDomainEndpoint = "pm-12337-refactor-sso-details-endpoint",
   LimitItemDeletion = "pm-15493-restrict-item-deletion-to-can-manage-permission",
+  SsoExternalIdVisibility = "pm-18630-sso-external-id-visibility",
 
   /* Autofill */
   BlockBrowserInjectionsByDomain = "block-browser-injections-by-domain",
@@ -68,6 +69,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.AccountDeprovisioning]: FALSE,
   [FeatureFlag.VerifiedSsoDomainEndpoint]: FALSE,
   [FeatureFlag.LimitItemDeletion]: FALSE,
+  [FeatureFlag.SsoExternalIdVisibility]: FALSE,
 
   /* Autofill */
   [FeatureFlag.BlockBrowserInjectionsByDomain]: FALSE,