core-api: refactor feature flags user flags access

plugins/user-settings/src/components/FeatureFlags/FeatureFlags.tsx

@@ -17,7 +17,6 @@
 import React, { useCallback, useState } from 'react';
 import {
   featureFlagsApiRef,
-  FeatureFlag,
   FeatureFlagState,
   InfoCard,
   useApi,
@@ -29,29 +28,28 @@ import { FlagItem } from './FeatureFlagsItem';
 export const FeatureFlags = () => {
   const featureFlagsApi = useApi(featureFlagsApiRef);
   const featureFlags = featureFlagsApi.getRegisteredFlags();
-  const initialFlagState = featureFlags.reduce(
-    (result, featureFlag: FeatureFlag) => {
-      const state = featureFlagsApi.getFlags().get(featureFlag.name);
 
-      result[featureFlag.name] = state;
-      return result;
-    },
-    {} as Record<string, FeatureFlagState>,
+  const initialFlagState = Object.fromEntries(
+    featureFlags.map(({ name }) => [name, featureFlagsApi.isActive(name)]),
   );
 
-  const [state, setState] = useState<Record<string, FeatureFlagState>>(
-    initialFlagState,
-  );
+  const [state, setState] = useState<Record<string, boolean>>(initialFlagState);
 
   const toggleFlag = useCallback(
     (flagName: string) => {
-      const newState = featureFlagsApi.getFlags().toggle(flagName);
+      const newState = featureFlagsApi.isActive(flagName)
+        ? FeatureFlagState.None
+        : FeatureFlagState.Active;
+
+      featureFlagsApi.save({
+        states: { [flagName]: newState },
+        merge: true,
+      });
 
       setState(prevState => ({
         ...prevState,
-        [flagName]: newState,
+        [flagName]: newState === FeatureFlagState.Active,
       }));
-      featureFlagsApi.getFlags().save();
     },
     [featureFlagsApi],
   );