core-api: refactor feature flags user flags access

plugins/cost-insights/src/components/CostInsightsPage/CostInsightsPage.tsx

@@ -55,9 +55,7 @@ import { useSubtleTypographyStyles } from '../../utils/styles';
 
 export const CostInsightsPage = () => {
   const classes = useSubtleTypographyStyles();
-  const flags = useApi(featureFlagsApiRef).getFlags();
-  // There is not currently a UI to set feature flags
-  // flags.set('cost-insights-currencies', FeatureFlagState.On);
+  const featureFlags = useApi(featureFlagsApiRef);
   const client = useApi(costInsightsApiRef);
   const config = useConfig();
   const groups = useGroups();
@@ -211,7 +209,7 @@ export const CostInsightsPage = () => {
         </Typography>
       </Box>
       <Box minHeight={40} maxHeight={60} display="flex">
-        {!!flags.get('cost-insights-currencies') && (
+        {featureFlags.isActive('cost-insights-currencies') && (
           <Box mr={1}>
             <CurrencySelect
               currency={currency}

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],
   );