[core/apis] adapted to build on existing data structures

plugins/welcome/src/components/WelcomePage/ToggleFeatureFlagButton.test.tsx

@@ -22,37 +22,27 @@ import {
   featureFlagsApiRef,
   ApiProvider,
   FeatureFlags,
-  FeatureFlagsContextProvider,
 } from '@backstage/core';
 
-function withFeatureFlags(children: ReactNode) {
-  const featureFlags = new Set([
-    { pluginId: 'welcome', name: 'enable-welcome-box' },
-  ]);
-
+function withApiRegistry(component: ReactNode, featureFlags: FeatureFlags) {
   return (
-    <FeatureFlagsContextProvider featureFlags={featureFlags}>
-      {children}
-    </FeatureFlagsContextProvider>
-  );
-}
-
-function withApiRegistry(children: ReactNode) {
-  return (
-    <ApiProvider apis={ApiRegistry.from([[featureFlagsApiRef, FeatureFlags]])}>
-      {children}
+    <ApiProvider apis={ApiRegistry.from([[featureFlagsApiRef, featureFlags]])}>
+      {component}
     </ApiProvider>
   );
 }
 
 describe('ToggleFeatureFlagButton', () => {
+  let featureFlags: FeatureFlags;
+
   beforeEach(() => {
+    featureFlags = new FeatureFlags();
     window.localStorage.clear();
   });
 
   it('should enable the feature flag', () => {
     const rendered = render(
-      withFeatureFlags(withApiRegistry(<ToggleFeatureFlagButton />)),
+      withApiRegistry(<ToggleFeatureFlagButton />, featureFlags),
     );
 
     const button = rendered.getByTestId('button-switch-feature-flag-state');
@@ -60,22 +50,22 @@ describe('ToggleFeatureFlagButton', () => {
 
     expect(window.localStorage.featureFlags).toBeUndefined();
     fireEvent.click(button);
-    expect(window.localStorage.featureFlags).toBe(
-      '{"enable-welcome-box":true}',
-    );
+    expect(window.localStorage.featureFlags).toBe('{"enable-welcome-box":1}');
   });
 
   it('should disable the feature flag', () => {
-    const rendered = render(
-      withFeatureFlags(withApiRegistry(<ToggleFeatureFlagButton />)),
-    );
+    const Component = () =>
+      withApiRegistry(<ToggleFeatureFlagButton />, featureFlags);
+    const rendered = render(<Component />);
 
     const button = rendered.getByTestId('button-switch-feature-flag-state');
     expect(button).toBeInTheDocument();
 
     expect(window.localStorage.featureFlags).toBeUndefined();
     fireEvent.click(button);
+    expect(window.localStorage.featureFlags).toBe('{"enable-welcome-box":1}');
+    rendered.rerender(<Component />);
     fireEvent.click(button);
-    expect(window.localStorage.featureFlags).toBe('{}');
+    expect(window.localStorage.featureFlags).toBe('{"enable-welcome-box":0}');
   });
 });

plugins/welcome/src/components/WelcomePage/ToggleFeatureFlagButton.tsx

@@ -19,15 +19,16 @@ import { Button } from '@material-ui/core';
 import { FeatureFlagState, featureFlagsApiRef, useApi } from '@backstage/core';
 
 const ToggleFeatureFlagButton: FC<{}> = () => {
-  const { useFeatureFlag } = useApi(featureFlagsApiRef);
-  const [flagState, setFlagState] = useFeatureFlag('enable-welcome-box');
+  const featureFlagsApi = useApi(featureFlagsApiRef);
+  const flags = featureFlagsApi.getFlags();
+  const flagState = flags.get('enable-welcome-box');
 
   const handleClick = () => {
-    if (flagState === FeatureFlagState.Enabled) {
-      setFlagState(FeatureFlagState.NotEnabled);
-    } else {
-      setFlagState(FeatureFlagState.Enabled);
-    }
+    const newValue = flagState
+      ? FeatureFlagState.NotEnabled
+      : FeatureFlagState.Enabled;
+    flags.set('enable-welcome-box', newValue);
+    window.location.reload();
   };
 
   return (
@@ -37,10 +38,9 @@ const ToggleFeatureFlagButton: FC<{}> = () => {
       onClick={handleClick}
       data-testid="button-switch-feature-flag-state"
     >
-      {flagState === FeatureFlagState.NotEnabled &&
-        'Enable "enable-welcome-box" feature flag'}
-      {flagState === FeatureFlagState.Enabled &&
-        'Disable "enable-welcome-box" feature flag'}
+      {flagState === FeatureFlagState.NotEnabled
+        ? 'Disable "enable-welcome-box" feature flag'
+        : 'Enable "enable-welcome-box" feature flag'}
     </Button>
   );
 };

plugins/welcome/src/plugin.ts

@@ -22,6 +22,6 @@ export default createPlugin({
   register({ router, featureFlags }) {
     router.registerRoute('/', WelcomePage);
 
-    featureFlags.registerFeatureFlag('enable-welcome-box');
+    featureFlags.register('enable-welcome-box');
   },
 });