[core/api/app] added context for registered flags

packages/core/src/api/app/AppBuilder.tsx

@@ -19,7 +19,7 @@ import { Route, Switch, Redirect } from 'react-router-dom';
 import { AppContextProvider } from './AppContext';
 import { App } from './types';
 import BackstagePlugin from '../plugin/Plugin';
-import { FeatureFlagName } from '../plugin/types';
+import { FeatureFlagsEntry, FeatureFlagsContextProvider } from './FeatureFlags';
 import {
   IconComponent,
   SystemIcons,
@@ -63,7 +63,7 @@ export default class AppBuilder {
     const app = new AppImpl(this.systemIcons);
 
     const routes = new Array<JSX.Element>();
-    const registeredFeatureFlags = new Array<{ name: FeatureFlagName }>();
+    const registeredFeatureFlags = new Array<FeatureFlagsEntry>();
 
     for (const plugin of this.plugins.values()) {
       for (const output of plugin.output()) {
@@ -114,6 +114,13 @@ export default class AppBuilder {
       rendered = <ApiProvider apis={this.apis} children={rendered} />;
     }
 
+    rendered = (
+      <FeatureFlagsContextProvider
+        registeredFeatureFlags={registeredFeatureFlags}
+        children={rendered}
+      />
+    );
+
     return () => <AppContextProvider app={app} children={rendered} />;
   }
 }

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-// import React, { createContext, useContext, useState, FC } from 'react';
+import React, { ComponentType, createContext, FC } from 'react';
 import { FeatureFlagName } from '../plugin/types';
 import { FeatureFlagsApi } from '../apis/definitions/featureFlags';
 import { staticImplements } from '../../testUtils';
@@ -75,3 +75,34 @@ export class FeatureFlags {
     this.saveUserEnabledFeatureFlags(flags);
   }
 }
+
+/**
+ * Create a shared React context for Feature Flags.
+ *
+ * This will be used to propagate all available feature flags to
+ * Backstage components. This enables viewing all of the components.
+ */
+export interface FeatureFlagsEntry {
+  name: FeatureFlagName;
+}
+
+export const FeatureFlagsContext = createContext<{
+  registeredFeatureFlags: FeatureFlagsEntry[];
+}>({
+  registeredFeatureFlags: [],
+});
+
+interface Props {
+  registeredFeatureFlags: FeatureFlagsEntry[];
+  children: ComponentType;
+}
+
+export const FeatureFlagsContextProvider: FC<Props> = ({
+  registeredFeatureFlags,
+  children,
+}) => (
+  <FeatureFlagsContext.Provider
+    value={{ registeredFeatureFlags }}
+    children={children}
+  />
+);

packages/core/src/api/index.ts

@@ -16,5 +16,5 @@
 
 export * from './api';
 export * from './apis';
-export { FeatureFlags } from './app/FeatureFlags';
+export { FeatureFlags, FeatureFlagsContext } from './app/FeatureFlags';
 export { useApp } from './app/AppContext';