Add possibility to override feature flags with environment variable FEATURE_FLAGS

.changeset/pretty-dingos-sing.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Feature flags: take into account env variable FEATURE_FLAGS to override feature flags

.changeset/quiet-doors-cross.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Feature flags: take into account env variable FEATURE_FLAGS to override feature flags

.changeset/silent-beers-carry.md

@@ -0,0 +1,6 @@
+---
+"@ledgerhq/live-common": patch
+"@ledgerhq/types-live": patch
+---
+
+Add FEATURE_FLAGS env variable to override feature flags

apps/ledger-live-desktop/src/renderer/components/FirebaseFeatureFlags.tsx

@@ -6,6 +6,7 @@ import { Feature, FeatureId } from "@ledgerhq/types-live";
 import { getValue } from "firebase/remote-config";
 
 import { formatFeatureId, useFirebaseRemoteConfig } from "./FirebaseRemoteConfig";
+import { getEnv } from "@ledgerhq/live-common/env";
 
 const checkFeatureFlagVersion = (feature: Feature) => {
   if (
@@ -42,6 +43,17 @@ export const FirebaseFeatureFlagsProvider = ({ children }: Props): JSX.Element =
           return checkFeatureFlagVersion(localOverrides[key]);
         }
 
+        const envFlags = getEnv("FEATURE_FLAGS") as { [key in FeatureId]?: Feature } | undefined;
+        if (allowOverride && envFlags) {
+          const feature = envFlags[key];
+          if (feature)
+            return {
+              ...feature,
+              overridesRemote: true,
+              overriddenByEnv: true,
+            };
+        }
+
         const value = getValue(remoteConfig, formatFeatureId(key));
         const feature: Feature = JSON.parse(value.asString());
 
@@ -58,7 +70,8 @@ export const FirebaseFeatureFlagsProvider = ({ children }: Props): JSX.Element =
     (key: FeatureId, value: Feature): void => {
       const actualRemoteValue = getFeature(key, false);
       if (!isEqual(actualRemoteValue, value)) {
-        const overridenValue = { ...value, overridesRemote: true };
+        const { overriddenByEnv, ...pureValue } = value; // eslint-disable-line
+        const overridenValue = { ...pureValue, overridesRemote: true };
         setLocalOverrides(currentOverrides => ({ ...currentOverrides, [key]: overridenValue }));
       } else {
         setLocalOverrides(currentOverrides => ({ ...currentOverrides, [key]: undefined }));

apps/ledger-live-desktop/src/renderer/screens/settings/sections/Developer/FeatureFlagsSettings/FeatureFlagDetails.tsx

@@ -0,0 +1,74 @@
+import React, { useCallback } from "react";
+import ButtonV2 from "~/renderer/components/Button";
+import { useFeatureFlags } from "@ledgerhq/live-common/featureFlags/index";
+import { Text, Flex, Tag } from "@ledgerhq/react-ui";
+import { FeatureId } from "@ledgerhq/types-live";
+import { withV2StyleProvider } from "~/renderer/styles/StyleProvider";
+import Box from "~/renderer/components/Box";
+import FeatureFlagEdit from "./FeatureFlagEdit";
+
+const OldButton = withV2StyleProvider(ButtonV2);
+
+type Props = {
+  flagName: FeatureId;
+  focused?: boolean;
+  setFocusedName: (arg0: string | undefined) => void;
+};
+
+const FeatureFlagDetails: React.FC<Props> = props => {
+  const { flagName, focused, setFocusedName } = props;
+  const { getFeature } = useFeatureFlags();
+  const flagValue = getFeature(flagName as FeatureId);
+
+  const {
+    overriddenByEnv,
+    overridesRemote,
+    enabledOverriddenForCurrentLanguage,
+    enabledOverriddenForCurrentDesktopVersion,
+  } = flagValue || {};
+
+  const handleClick = useCallback(() => {
+    focused ? setFocusedName(undefined) : setFocusedName(flagName);
+  }, [focused, flagName, setFocusedName]);
+
+  if (!flagValue) return null;
+
+  return (
+    <>
+      <OldButton flexDirection="row" py={1} onClick={handleClick}>
+        <Flex flex={1} mr={3} alignItems="center">
+          <Box
+            bg={flagValue?.enabled ? "success.c100" : "error.c100"}
+            height={10}
+            width={10}
+            mr={2}
+            borderRadius={999}
+          />
+          <Text mr={1}>{flagName}</Text>
+          {overriddenByEnv ? (
+            <Tag active mx={1} type="opacity" size="small">
+              overridden by env
+            </Tag>
+          ) : overridesRemote ? (
+            <Tag active mx={1} type="opacity" size="small">
+              overridden locally
+            </Tag>
+          ) : null}
+          {enabledOverriddenForCurrentLanguage ? (
+            <Tag active mx={1} type="outlinedOpacity" size="small">
+              disabled for current language
+            </Tag>
+          ) : null}
+          {enabledOverriddenForCurrentDesktopVersion ? (
+            <Tag active mx={1} type="outlinedOpacity" size="small">
+              disabled for current version
+            </Tag>
+          ) : null}
+        </Flex>
+      </OldButton>
+      {focused ? <FeatureFlagEdit flagName={flagName} flagValue={flagValue} /> : null}
+    </>
+  );
+};
+
+export default FeatureFlagDetails;