Add possibility to override feature flags with environment variable F…

…EATURE_FLAGS (#1372)

* Add env variable FEATURE_FLAGS for overriding flags with env


Add feature flags parameter to playwright test fixtures


doc:ljs


Add env overriding of feature flags in LLM


changesets


Fix FeatureFlagsButton LLD


Fix FeatureFlagsButton


remove console log


Refactor feature flag settings on LLD


Add null to JSONValue type


Refactor FeatureFlagsSettings (split in components)


Move LLD's FeatureFlagEdit to own component


Apply switch toggle directly rather than just modifying the input


Remove useless badly typed tryParse

* Fix styling of LLD feature flags settings, trim input & hide programatically set flag keys

* LLM feature flag settings: trim add flag input &  hide programatically set flag keys

* Add hint on how to use the "add missing flag name" input

* Fix bad "value" prop in inputs

.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;