[core] change FeatureFlagState to {On,Off}

docs/reference/createPlugin-feature-flags.md

@@ -51,7 +51,7 @@ const ExampleButton: FC<{}> = () => {
   const flags = useApi(featureFlagsApiRef).getFlags();
 
   const handleClick = () => {
-    flags.set('enable-example-feature', FeatureFlagState.Enabled);
+    flags.set('enable-example-feature', FeatureFlagState.On);
   };
 
   return (

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

@@ -34,8 +34,8 @@ import {
  */
 
 export enum FeatureFlagState {
-  NotEnabled = 0,
-  Enabled = 1,
+  Off = 0,
+  On = 1,
 }
 
 export interface FeatureFlagsApi {

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

@@ -45,9 +45,9 @@ describe('FeatureFlags', () => {
 
       featureFlags = new FeatureFlagsImpl();
       expect(featureFlags.getFlags().toObject()).toMatchObject({
-        'feature-flag-one': FeatureFlagState.Enabled,
-        'feature-flag-two': FeatureFlagState.Enabled,
-        'feature-flag-three': FeatureFlagState.NotEnabled,
+        'feature-flag-one': FeatureFlagState.On,
+        'feature-flag-two': FeatureFlagState.On,
+        'feature-flag-three': FeatureFlagState.Off,
       });
     });
 
@@ -63,21 +63,21 @@ describe('FeatureFlags', () => {
       featureFlags = new FeatureFlagsImpl();
 
       expect(featureFlags.getFlags().get('feature-flag-one')).toEqual(
-        FeatureFlagState.Enabled,
+        FeatureFlagState.On,
       );
       expect(featureFlags.getFlags().get('feature-flag-two')).toEqual(
-        FeatureFlagState.NotEnabled,
+        FeatureFlagState.Off,
       );
       expect(featureFlags.getFlags().get('feature-flag-three')).toEqual(
-        FeatureFlagState.NotEnabled,
+        FeatureFlagState.Off,
       );
     });
 
     it('sets the correct values', () => {
       const flags = featureFlags.getFlags();
-      flags.set('feature-flag-zero', FeatureFlagState.Enabled);
+      flags.set('feature-flag-zero', FeatureFlagState.On);
 
-      expect(flags.get('feature-flag-zero')).toEqual(FeatureFlagState.Enabled);
+      expect(flags.get('feature-flag-zero')).toEqual(FeatureFlagState.On);
       expect(window.localStorage.getItem('featureFlags')).toEqual(
         '{"feature-flag-zero":1}',
       );
@@ -96,9 +96,7 @@ describe('FeatureFlags', () => {
       const flags = featureFlags.getFlags();
       flags.delete('feature-flag-one');
 
-      expect(flags.get('feature-flag-one')).toEqual(
-        FeatureFlagState.NotEnabled,
-      );
+      expect(flags.get('feature-flag-one')).toEqual(FeatureFlagState.Off);
       expect(window.localStorage.getItem('featureFlags')).toEqual(
         '{"feature-flag-two":0}',
       );

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

@@ -73,7 +73,7 @@ export class UserFlags extends Map<FeatureFlagName, FeatureFlagState> {
   }
 
   get(name: FeatureFlagName): FeatureFlagState {
-    return super.get(name) || FeatureFlagState.NotEnabled;
+    return super.get(name) || FeatureFlagState.Off;
   }
 
   set(name: FeatureFlagName, state: FeatureFlagState): this {
@@ -168,9 +168,10 @@ export class FeatureFlagsRegistry extends Array<FeatureFlagsRegistryItem> {
  */
 export class FeatureFlags implements FeatureFlagsApi {
   public registeredFeatureFlags: FeatureFlagsRegistryItem[] = [];
-  private readonly userFlags: UserFlags = UserFlags.load();
+  private userFlags: UserFlags | undefined;
 
   getFlags(): UserFlags {
+    if (!this.userFlags) this.userFlags = UserFlags.load();
     return this.userFlags;
   }
 

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

@@ -54,17 +54,16 @@ describe('ToggleFeatureFlagButton', () => {
   });
 
   it('should disable the feature flag', () => {
-    const Component = () =>
-      withApiRegistry(<ToggleFeatureFlagButton />, featureFlags);
-    const rendered = render(<Component />);
+    window.localStorage.setItem('featureFlags', '{"enable-welcome-box":1}');
+
+    const rendered = render(
+      withApiRegistry(<ToggleFeatureFlagButton />, featureFlags),
+    );
 
     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('{"enable-welcome-box":0}');
   });

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

@@ -24,9 +24,10 @@ const ToggleFeatureFlagButton: FC<{}> = () => {
   const flagState = flags.get('enable-welcome-box');
 
   const handleClick = () => {
-    const newValue = flagState
-      ? FeatureFlagState.NotEnabled
-      : FeatureFlagState.Enabled;
+    const newValue =
+      flagState === FeatureFlagState.On
+        ? FeatureFlagState.Off
+        : FeatureFlagState.On;
     flags.set('enable-welcome-box', newValue);
     window.location.reload();
   };
@@ -38,7 +39,7 @@ const ToggleFeatureFlagButton: FC<{}> = () => {
       onClick={handleClick}
       data-testid="button-switch-feature-flag-state"
     >
-      {flagState === FeatureFlagState.NotEnabled
+      {flagState === FeatureFlagState.On
         ? 'Disable "enable-welcome-box" feature flag'
         : 'Enable "enable-welcome-box" feature flag'}
     </Button>