diff --git a/packages/core/src/api/app/AppBuilder.tsx b/packages/core/src/api/app/AppBuilder.tsx index ccd9982249..84317a735a 100644 --- a/packages/core/src/api/app/AppBuilder.tsx +++ b/packages/core/src/api/app/AppBuilder.tsx @@ -119,7 +119,7 @@ export default class AppBuilder { rendered = ( ); diff --git a/packages/core/src/api/app/FeatureFlags.test.tsx b/packages/core/src/api/app/FeatureFlags.test.tsx index 2159d05e65..3e3bb3e50d 100644 --- a/packages/core/src/api/app/FeatureFlags.test.tsx +++ b/packages/core/src/api/app/FeatureFlags.test.tsx @@ -124,8 +124,8 @@ describe('FeatureFlagsContext', () => { expect.assertions(1); const Component = () => { - const { registeredFeatureFlags } = useContext(FeatureFlagsContext); - expect(registeredFeatureFlags).toEqual([]); + const { featureFlags } = useContext(FeatureFlagsContext); + expect(featureFlags).toEqual([]); return null; }; @@ -141,13 +141,13 @@ describe('FeatureFlagsContext', () => { ]; const Component = () => { - const { registeredFeatureFlags } = useContext(FeatureFlagsContext); - expect(registeredFeatureFlags).toBe(mockFeatureFlags); + const { featureFlags } = useContext(FeatureFlagsContext); + expect(featureFlags).toBe(mockFeatureFlags); return null; }; render( - + , ); diff --git a/packages/core/src/api/app/FeatureFlags.tsx b/packages/core/src/api/app/FeatureFlags.tsx index b8799e5a71..9921486999 100644 --- a/packages/core/src/api/app/FeatureFlags.tsx +++ b/packages/core/src/api/app/FeatureFlags.tsx @@ -14,13 +14,57 @@ * limitations under the License. */ -import React, { ReactNode, createContext, FC } from 'react'; +import React, { + ReactNode, + createContext, + useContext, + useState, + FC, +} from 'react'; import { FeatureFlagName } from '../plugin/types'; import { FeatureFlagState, FeatureFlagsApi, } from '../apis/definitions/featureFlags'; +/** + * 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 available flags. + */ +export interface FeatureFlagsEntry { + pluginId: string; + name: FeatureFlagName; + userEnabled: boolean; +} + +export interface IFeatureFlagsContext { + featureFlags: FeatureFlagsEntry[]; +} + +export const FeatureFlagsContext = createContext({ + featureFlags: [], +}); + +export const FeatureFlagsContextProvider: FC<{ + featureFlags: FeatureFlagsEntry[]; + children: ReactNode; +}> = ({ featureFlags, children }) => { + const [userEnabledFlags, setUserEnabledFlags] = useState([]); + + return ( + + ); +}; + +/** + * Create the FeatureFlags implementation based on the API. + */ + // TODO: figure out where to put implementations of APIs, both inside apps // but also in core/separate package. class FeatureFlagsImpl implements FeatureFlagsApi { @@ -108,35 +152,3 @@ class FeatureFlagsImpl implements FeatureFlagsApi { } export const FeatureFlags = new FeatureFlagsImpl(); - -/** - * 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 available flags. - */ -export interface FeatureFlagsEntry { - pluginId: string; - name: FeatureFlagName; -} - -export const FeatureFlagsContext = createContext<{ - registeredFeatureFlags: FeatureFlagsEntry[]; -}>({ - registeredFeatureFlags: [], -}); - -interface Props { - registeredFeatureFlags: FeatureFlagsEntry[]; - children: ReactNode; -} - -export const FeatureFlagsContextProvider: FC = ({ - registeredFeatureFlags, - children, -}) => ( - -);