Merge pull request #15556 from drodil/app_feature_flags

feat: allow specifying app level feature flags

packages/app-defaults/src/createApp.tsx

@@ -51,6 +51,7 @@ export function createApp(
       ...options?.icons,
     },
     plugins: (options?.plugins as BackstagePlugin[]) ?? [],
+    featureFlags: options?.featureFlags ?? [],
     themes: options?.themes ?? themes,
   });
 }

packages/app/src/App.tsx

@@ -115,6 +115,10 @@ const app = createApp({
     // Custom icon example
     alert: AlarmIcon,
   },
+  // Example of application level feature flag
+  // featureFlags: [
+  // { name: 'tech-radar', description: 'Enables the tech radar plugin' },
+  // ],
   components: {
     SignInPage: props => {
       return (

packages/core-app-api/api-report.md

@@ -208,6 +208,7 @@ export type AppOptions = {
       >;
     }
   >;
+  featureFlags?: (FeatureFlag & Omit<FeatureFlag, 'pluginId'>)[];
   components: AppComponents;
   themes: (Partial<AppTheme> & Omit<AppTheme, 'theme'>)[];
   configLoader?: AppConfigLoader;

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

@@ -40,6 +40,7 @@ import {
   featureFlagsApiRef,
   identityApiRef,
   BackstagePlugin,
+  FeatureFlag,
 } from '@backstage/core-plugin-api';
 import { ApiFactoryRegistry, ApiResolver } from '../apis/system';
 import {
@@ -211,6 +212,8 @@ export class AppManager implements BackstageApp {
   private readonly apis: Iterable<AnyApiFactory>;
   private readonly icons: NonNullable<AppOptions['icons']>;
   private readonly plugins: Set<CompatiblePlugin>;
+  private readonly featureFlags: (FeatureFlag &
+    Omit<FeatureFlag, 'pluginId'>)[];
   private readonly components: AppComponents;
   private readonly themes: AppTheme[];
   private readonly configLoader?: AppConfigLoader;
@@ -224,6 +227,7 @@ export class AppManager implements BackstageApp {
     this.apis = options.apis ?? [];
     this.icons = options.icons;
     this.plugins = new Set((options.plugins as CompatiblePlugin[]) ?? []);
+    this.featureFlags = options.featureFlags ?? [];
     this.components = options.components;
     this.themes = options.themes as AppTheme[];
     this.configLoader = options.configLoader ?? defaultConfigLoader;
@@ -341,6 +345,12 @@ export class AppManager implements BackstageApp {
         const featureFlagsApi = this.getApiHolder().get(featureFlagsApiRef)!;
 
         if (featureFlagsApi) {
+          for (const flag of this.featureFlags) {
+            featureFlagsApi.registerFlag({
+              ...flag,
+              pluginId: '',
+            });
+          }
           for (const plugin of this.plugins.values()) {
             if ('getFeatureFlags' in plugin) {
               for (const flag of plugin.getFeatureFlags()) {

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

@@ -24,6 +24,7 @@ import {
   SubRouteRef,
   ExternalRouteRef,
   IdentityApi,
+  FeatureFlag,
 } from '@backstage/core-plugin-api';
 import { AppConfig } from '@backstage/config';
 
@@ -213,6 +214,11 @@ export type AppOptions = {
     }
   >;
 
+  /**
+   * Application level feature flags.
+   */
+  featureFlags?: (FeatureFlag & Omit<FeatureFlag, 'pluginId'>)[];
+
   /**
    * Supply components to the app to override the default ones.
    */

packages/core-plugin-api/api-report.md

@@ -425,6 +425,7 @@ export type ExternalRouteRef<
 export type FeatureFlag = {
   name: string;
   pluginId: string;
+  description?: string;
 };
 
 // @public

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

@@ -24,6 +24,7 @@ import { ApiRef, createApiRef } from '../system';
 export type FeatureFlag = {
   name: string;
   pluginId: string;
+  description?: string;
 };
 
 /**