[core/apis] consolidated methods to get/set

docs/reference/createPlugin-feature-flags.md

@@ -35,7 +35,7 @@ import { featureFlagsApiRef, useApi } from '@backstage/core';
 
 const ExampleButton: FC<{}> = () => {
   const featureFlagsApi = useApi(featureFlagsApiRef);
-  const handleClick = () => featureFlagsApi.enable('enable-example-feature');
+  const handleClick = () => featureFlagsApi.set('enable-example-feature', .Enabled);
 
   return (
     <Button variant="contained" color="primary" onClick={handleClick}>
@@ -55,7 +55,7 @@ import { Button } from '@material-ui/core';
 import { FeatureFlags } from '@backstage/core';
 
 const ExampleButton: FC<{}> = () => {
-  const handleClick = () => FeatureFlags.enable('enable-example-feature');
+  const handleClick = () => FeatureFlags.set('enable-example-feature', .Enabled);
 
   return (
     <Button variant="contained" color="primary" onClick={handleClick}>

packages/core/src/api/apis/definitions/featureFlags.ts

@@ -40,22 +40,12 @@ export type FeatureFlagsApi = {
    *
    * @returns bool True if the current user has enabled the feature flag
    */
-  getItem(name: FeatureFlagName): FeatureFlagState;
+  get(name: FeatureFlagName): FeatureFlagState;
 
   /**
-   * Enable an registered feature flag.
+   * Set the state of a Feature Flag
    */
-  enable(name: FeatureFlagName): void;
-
-  /**
-   * Disable an registered feature flag.
-   */
-  disable(name: FeatureFlagName): void;
-
-  /**
-   * Toggle an registered feature flag on or off.
-   */
-  toggle(name: FeatureFlagName): void;
+  set(name: FeatureFlagName, state: FeatureFlagState): void;
 };
 
 export const featureFlagsApiRef = new ApiRef<FeatureFlagsApi>({

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

@@ -43,12 +43,15 @@ class FeatureFlagsImpl implements FeatureFlagsApi {
     }
   }
 
-  private saveUserEnabledFeatureFlags(flags: Set<FeatureFlagName>): void {
-    if (!('localStorage' in window)) {
-      throw new Error(
-        'Feature Flags are not supported on browsers without the Local Storage API',
-      );
-    }
+  get(name: FeatureFlagName): FeatureFlagState {
+    return this.getUserEnabledFeatureFlags().has(name) as FeatureFlagState;
+  }
+
+  set(name: FeatureFlagName, state: FeatureFlagState): void {
+    const flags = this.getUserEnabledFeatureFlags();
+
+    if (state === FeatureFlagState.NotEnabled) flags.delete(name);
+    if (state === FeatureFlagState.Enabled) flags.add(name);
 
     window.localStorage.setItem(
       this.localStorageKey,
@@ -57,26 +60,6 @@ class FeatureFlagsImpl implements FeatureFlagsApi {
       ),
     );
   }
-
-  getItem(name: FeatureFlagName): FeatureFlagState {
-    return this.getUserEnabledFeatureFlags().has(name) as FeatureFlagState;
-  }
-
-  enable(name: FeatureFlagName): void {
-    const flags = this.getUserEnabledFeatureFlags();
-    flags.add(name);
-    this.saveUserEnabledFeatureFlags(flags);
-  }
-
-  disable(name: FeatureFlagName): void {
-    const flags = this.getUserEnabledFeatureFlags();
-    flags.delete(name);
-    this.saveUserEnabledFeatureFlags(flags);
-  }
-
-  toggle(name: FeatureFlagName): void {
-    (this.getItem(name) ? this.disable : this.enable).bind(this)(name);
-  }
 }
 
 export const FeatureFlags = new FeatureFlagsImpl();

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

@@ -36,7 +36,6 @@ import {
   SupportButton,
   featureFlagsApiRef,
   useApi,
-  FeatureFlagsContext,
 } from '@backstage/core';
 import ErrorButton from './ErrorButton';
 
@@ -132,11 +131,14 @@ const WelcomePage: FC<{}> = () => {
                 variant="contained"
                 color="secondary"
                 onClick={() => {
-                  featureFlagsApi.toggle('enable-welcome-box');
+                  featureFlagsApi.set(
+                    'enable-welcome-box',
+                    !featureFlagsApi.get('enable-welcome-box'),
+                  );
                   window.location.reload();
                 }}
               >
-                {featureFlagsApi.getItem('enable-welcome-box')
+                {featureFlagsApi.get('enable-welcome-box')
                   ? 'Disable '
                   : 'Enable '}{' '}
                 'enable-welcome-box' feature flag