core-api: remove FeatureFlagName type

docs/reference/createPlugin-feature-flags.md

@@ -10,7 +10,7 @@ can use this to split out logic in your code for manual A/B testing, etc.
 
 ```typescript
 export type FeatureFlagsHooks = {
-  register(name: FeatureFlagName): void;
+  register(name: string): void;
 };
 ```
 

packages/core-api/src/apis/definitions/FeatureFlagsApi.ts

@@ -16,7 +16,6 @@
 
 import { ApiRef, createApiRef } from '../system';
 import { UserFlags, FeatureFlagsRegistry } from '../../app/FeatureFlags';
-import { FeatureFlagName } from '../../plugin';
 
 /**
  * The feature flags API is used to toggle functionality to users across plugins and Backstage.
@@ -54,7 +53,7 @@ export interface FeatureFlagsApi {
 
 export interface FeatureFlagsRegistryItem {
   pluginId: string;
-  name: FeatureFlagName;
+  name: string;
 }
 
 export const featureFlagsApiRef: ApiRef<FeatureFlagsApi> = createApiRef({

packages/core-api/src/app/FeatureFlags.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import { FeatureFlagName } from '../plugin/types';
 import {
   FeatureFlagState,
   FeatureFlagsApi,
@@ -32,7 +31,7 @@ export function validateBrowserCompat(): void {
   }
 }
 
-export function validateFlagName(name: FeatureFlagName): void {
+export function validateFlagName(name: string): void {
   if (name.length < 3) {
     throw new Error(
       `The '${name}' feature flag must have a minimum length of three characters.`,
@@ -60,7 +59,7 @@ export function validateFlagName(name: FeatureFlagName): void {
  * can use this to retrieve, add, edit, delete, clear and save the user's
  * feature flags to the local browser for persisted storage.
  */
-export class UserFlags extends Map<FeatureFlagName, FeatureFlagState> {
+export class UserFlags extends Map<string, FeatureFlagState> {
   static load(): UserFlags {
     validateBrowserCompat();
 
@@ -73,18 +72,18 @@ export class UserFlags extends Map<FeatureFlagName, FeatureFlagState> {
     }
   }
 
-  get(name: FeatureFlagName): FeatureFlagState {
+  get(name: string): FeatureFlagState {
     return super.get(name) || FeatureFlagState.Off;
   }
 
-  set(name: FeatureFlagName, state: FeatureFlagState): this {
+  set(name: string, state: FeatureFlagState): this {
     validateFlagName(name);
     const output = super.set(name, state);
     this.save();
     return output;
   }
 
-  toggle(name: FeatureFlagName): FeatureFlagState {
+  toggle(name: string): FeatureFlagState {
     if (super.get(name) === FeatureFlagState.On) {
       super.set(name, FeatureFlagState.Off);
     } else {
@@ -93,7 +92,7 @@ export class UserFlags extends Map<FeatureFlagName, FeatureFlagState> {
     return super.get(name) || FeatureFlagState.Off;
   }
 
-  delete(name: FeatureFlagName): boolean {
+  delete(name: string): boolean {
     const output = super.delete(name);
     this.save();
     return output;

packages/core-api/src/plugin/types.ts

@@ -54,11 +54,9 @@ export type LegacyRedirectRouteOutput = {
   options?: RouteOptions;
 };
 
-export type FeatureFlagName = string;
-
 export type FeatureFlagOutput = {
   type: 'feature-flag';
-  name: FeatureFlagName;
+  name: string;
 };
 
 export type PluginOutput =
@@ -103,5 +101,5 @@ export type RouterHooks = {
 };
 
 export type FeatureFlagsHooks = {
-  register(name: FeatureFlagName): void;
+  register(name: string): void;
 };

plugins/user-settings/src/components/FeatureFlags/FeatureFlags.tsx

@@ -16,7 +16,6 @@
 
 import React, { useCallback, useState } from 'react';
 import {
-  FeatureFlagName,
   featureFlagsApiRef,
   FeatureFlagsRegistryItem,
   FeatureFlagState,
@@ -37,15 +36,15 @@ export const FeatureFlags = () => {
       result[featureFlag.name] = state;
       return result;
     },
-    {} as Record<FeatureFlagName, FeatureFlagState>,
+    {} as Record<string, FeatureFlagState>,
   );
 
-  const [state, setState] = useState<Record<FeatureFlagName, FeatureFlagState>>(
+  const [state, setState] = useState<Record<string, FeatureFlagState>>(
     initialFlagState,
   );
 
   const toggleFlag = useCallback(
-    (flagName: FeatureFlagName) => {
+    (flagName: string) => {
       const newState = featureFlagsApi.getFlags().toggle(flagName);
 
       setState(prevState => ({