From 85c3ce7d9a9344c62b8c6370a74850152757cab8 Mon Sep 17 00:00:00 2001
From: Bilawal Hameed <bil@spotify.com>
Date: Thu, 26 Mar 2020 15:50:45 +0100
Subject: [PATCH] [core/api/app] added context for registered flags

---
 packages/core/src/api/app/AppBuilder.tsx   | 11 ++++++--
 packages/core/src/api/app/FeatureFlags.tsx | 33 +++++++++++++++++++++-
 packages/core/src/api/index.ts             |  2 +-
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/api/app/AppBuilder.tsx b/packages/core/src/api/app/AppBuilder.tsx
index 6ea2d0f366..95537d5101 100644
--- a/packages/core/src/api/app/AppBuilder.tsx
+++ b/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} />;
   }
 }
diff --git a/packages/core/src/api/app/FeatureFlags.tsx b/packages/core/src/api/app/FeatureFlags.tsx
index e55660f240..a5b0c7eaed 100644
--- a/packages/core/src/api/app/FeatureFlags.tsx
+++ b/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}
+  />
+);
diff --git a/packages/core/src/api/index.ts b/packages/core/src/api/index.ts
index e60a7efa18..e1bca9814e 100644
--- a/packages/core/src/api/index.ts
+++ b/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';