[PM-2282] Make feature flags type safe

apps/web/src/app/auth/key-rotation/user-key-rotation.service.ts

@@ -86,7 +86,7 @@ export class UserKeyRotationService {
     request.emergencyAccessKeys = await this.emergencyAccessService.getRotatedKeys(newUserKey);
     request.resetPasswordKeys = await this.resetPasswordService.getRotatedKeys(newUserKey);
 
-    if (await this.configService.getFeatureFlag<boolean>(FeatureFlag.KeyRotationImprovements)) {
+    if (await this.configService.getFeatureFlag(FeatureFlag.KeyRotationImprovements)) {
       await this.apiService.postUserKeyUpdate(request);
     } else {
       await this.rotateUserKeyAndEncryptedDataLegacy(request);

apps/web/src/app/vault/individual-vault/vault-onboarding/vault-onboarding.component.ts

@@ -60,7 +60,7 @@ export class VaultOnboardingComponent implements OnInit, OnChanges, OnDestroy {
   ) {}
 
   async ngOnInit() {
-    this.showOnboardingAccess$ = await this.configService.getFeatureFlag$<boolean>(
+    this.showOnboardingAccess$ = await this.configService.getFeatureFlag$(
       FeatureFlag.VaultOnboarding,
       false,
     );

libs/angular/src/directives/if-feature.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from "@angular/core";
 
-import { FeatureFlag, FeatureFlagValue } from "@bitwarden/common/enums/feature-flag.enum";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 
@@ -23,7 +23,7 @@ export class IfFeatureDirective implements OnInit {
    * Optional value to compare against the value of the feature flag in the config service.
    * @default true
    */
-  @Input() appIfFeatureValue: FeatureFlagValue = true;
+  @Input() appIfFeatureValue: string | number | boolean = true;
 
   private hasView = false;
 

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

@@ -11,5 +11,31 @@ export enum FeatureFlag {
   AC1795_UpdatedSubscriptionStatusSection = "AC-1795_updated-subscription-status-section",
 }
 
-// Replace this with a type safe lookup of the feature flag values in PM-2282
-export type FeatureFlagValue = number | string | boolean;
+// Map of feature flags to their value type. `string`, `number` and `boolean` are the only supported types.
+export const FeatureFlagRuntimeTypes = {
+  [FeatureFlag.BrowserFilelessImport]: "boolean",
+  [FeatureFlag.ItemShare]: "boolean",
+  [FeatureFlag.FlexibleCollectionsV1]: "boolean",
+  [FeatureFlag.VaultOnboarding]: "boolean",
+  [FeatureFlag.GeneratorToolsModernization]: "boolean",
+  [FeatureFlag.KeyRotationImprovements]: "boolean",
+  [FeatureFlag.FlexibleCollectionsMigration]: "boolean",
+  [FeatureFlag.ShowPaymentMethodWarningBanners]: "boolean",
+  [FeatureFlag.EnableConsolidatedBilling]: "boolean",
+  [FeatureFlag.AC1795_UpdatedSubscriptionStatusSection]: "boolean",
+} as const;
+
+// Helpers for mapping between runtime and static types
+type RuntimeType = "boolean" | "string" | "number";
+type RuntimeToStatic<T extends RuntimeType> = T extends "boolean"
+  ? boolean
+  : T extends "string"
+    ? string
+    : T extends "number"
+      ? number
+      : never;
+
+// Typescript type of the feature flag values
+export type FeatureFlagType<Flag extends FeatureFlag> = RuntimeToStatic<
+  (typeof FeatureFlagRuntimeTypes)[Flag]
+>;

libs/common/src/platform/abstractions/config/config.service.ts

@@ -1,7 +1,7 @@
 import { Observable } from "rxjs";
 import { SemVer } from "semver";
 
-import { FeatureFlag } from "../../../enums/feature-flag.enum";
+import { FeatureFlag, FeatureFlagType } from "../../../enums/feature-flag.enum";
 import { Region } from "../environment.service";
 
 import { ServerConfig } from "./server-config";
@@ -17,20 +17,20 @@ export abstract class ConfigService {
    * @param defaultValue The default value to return if the feature flag is not set or the server's config is irretrievable
    * @returns An observable that emits the value of the feature flag, updates as the server config changes
    */
-  getFeatureFlag$: <T extends boolean | number | string>(
-    key: FeatureFlag,
-    defaultValue?: T,
-  ) => Observable<T>;
+  getFeatureFlag$: <Flag extends FeatureFlag>(
+    key: Flag,
+    defaultValue?: FeatureFlagType<Flag>,
+  ) => Observable<FeatureFlagType<Flag>>;
   /**
    * Retrieves the value of a feature flag for the currently active user
    * @param key The feature flag to retrieve
    * @param defaultValue The default value to return if the feature flag is not set or the server's config is irretrievable
    * @returns The value of the feature flag
    */
-  getFeatureFlag: <T extends boolean | number | string>(
-    key: FeatureFlag,
-    defaultValue?: T,
-  ) => Promise<T>;
+  getFeatureFlag: <Flag extends FeatureFlag>(
+    key: Flag,
+    defaultValue?: FeatureFlagType<Flag>,
+  ) => Promise<FeatureFlagType<Flag>>;
   /**
    * Verifies whether the server version meets the minimum required version
    * @param minimumRequiredServerVersion The minimum version required

libs/common/src/platform/services/config/default-config.service.ts

@@ -13,7 +13,7 @@ import {
 } from "rxjs";
 import { SemVer } from "semver";
 
-import { FeatureFlag, FeatureFlagValue } from "../../../enums/feature-flag.enum";
+import { FeatureFlag, FeatureFlagType } from "../../../enums/feature-flag.enum";
 import { UserId } from "../../../types/guid";
 import { ConfigApiServiceAbstraction } from "../../abstractions/config/config-api.service.abstraction";
 import { ConfigService } from "../../abstractions/config/config.service";
@@ -90,19 +90,20 @@ export class DefaultConfigService implements ConfigService {
       map((config) => config?.environment?.cloudRegion ?? Region.US),
     );
   }
-  getFeatureFlag$<T extends FeatureFlagValue>(key: FeatureFlag, defaultValue?: T) {
+
+  getFeatureFlag$<Flag extends FeatureFlag>(key: Flag, defaultValue?: FeatureFlagType<Flag>) {
     return this.serverConfig$.pipe(
       map((serverConfig) => {
         if (serverConfig?.featureStates == null || serverConfig.featureStates[key] == null) {
           return defaultValue;
         }
 
-        return serverConfig.featureStates[key] as T;
+        return serverConfig.featureStates[key] as FeatureFlagType<Flag>;
       }),
     );
   }
 
-  async getFeatureFlag<T extends FeatureFlagValue>(key: FeatureFlag, defaultValue?: T) {
+  async getFeatureFlag<Flag extends FeatureFlag>(key: Flag, defaultValue?: FeatureFlagType<Flag>) {
     return await firstValueFrom(this.getFeatureFlag$(key, defaultValue));
   }