Improve feature flags (#3027)

* Fix checking if env flag is enabled

* Restrict flag value to string

* Flagsmit to string value

src/hooks/useFlags/env/helpers.ts

@@ -30,3 +30,5 @@ export const readAllFlagsFromEnv = (): Record<string, string> => {
 
   return {};
 };
+
+export const isFlagEnabled = (flag: string) => flag !== "" && flag !== "false";

src/hooks/useFlags/env/useAllEnvFlags.test.tsx

@@ -37,4 +37,26 @@ describe("useAllEnvFlags hook", () => {
     // Assert
     expect(result.current).toEqual([]);
   });
+
+  test("should return array with disabled flags", () => {
+    // Arrange && Act
+    FLAGS.FF_FLAG_ONE = "";
+    FLAGS.FF_FLAG_TWO = "false";
+
+    const { result } = renderHook(() => useAllEnvFlags());
+
+    // Assert
+    expect(result.current).toEqual([
+      {
+        name: "flagOne",
+        enabled: false,
+        value: "",
+      },
+      {
+        name: "flagTwo",
+        enabled: false,
+        value: "false",
+      },
+    ]);
+  });
 });

src/hooks/useFlags/env/useAllEnvFlags.ts

@@ -1,12 +1,16 @@
 import { FlagWithName } from "../types";
-import { envNameToFlagName, readAllFlagsFromEnv } from "./helpers";
+import {
+  envNameToFlagName,
+  isFlagEnabled,
+  readAllFlagsFromEnv,
+} from "./helpers";
 
 export const useAllEnvFlags = (): FlagWithName[] => {
   const flags = readAllFlagsFromEnv();
 
   return Object.entries(flags).map(([flagKey, flagValue]) => ({
     name: envNameToFlagName(flagKey),
-    enabled: flagValue !== "",
+    enabled: isFlagEnabled(flagValue),
     value: flagValue,
   }));
 };

src/hooks/useFlags/env/useEnvFlags.test.tsx

@@ -54,4 +54,24 @@ describe("useEnvFlags hook", () => {
     // Assert
     expect(result.current).toEqual({});
   });
+
+  test("should return array with disabled flags", () => {
+    // Arrange && Act
+    FLAGS.FF_FLAG_ONE = "";
+    FLAGS.FF_FLAG_TWO = "false";
+
+    const { result } = renderHook(() => useEnvFlags(["flagOne", "flag_two"]));
+
+    // Assert
+    expect(result.current).toEqual({
+      flagOne: {
+        enabled: false,
+        value: "",
+      },
+      flag_two: {
+        enabled: false,
+        value: "false",
+      },
+    });
+  });
 });

src/hooks/useFlags/env/useEnvFlags.ts

@@ -1,5 +1,5 @@
 import { FlagsResults } from "../types";
-import { flagNameToEnvName, readFlagFromEnv } from "./helpers";
+import { flagNameToEnvName, isFlagEnabled, readFlagFromEnv } from "./helpers";
 
 export const useEnvFlags = <T extends readonly string[]>(
   flags: readonly [...T],
@@ -9,7 +9,7 @@ export const useEnvFlags = <T extends readonly string[]>(
 
     if (envFlag) {
       acc[flag] = {
-        enabled: envFlag !== "",
+        enabled: isFlagEnabled(envFlag),
         value: envFlag,
       };
     } else {

src/hooks/useFlags/flagsService/useAllServiceFlags.ts

@@ -9,7 +9,7 @@ export const useAllServiceFlags = (): FlagWithName[] => {
 
   return Object.entries(flags).map(([name, { value, enabled }]) => ({
     name: camelCase(name),
-    value: value ?? "",
+    value: value.toString() ?? "",
     enabled,
   }));
 };

src/hooks/useFlags/flagsService/useServiceFlags.ts

@@ -14,7 +14,7 @@ export const useServiceFlags = <T extends readonly string[]>(
     if (flagsmithFlags[flagName]) {
       acc[flag] = {
         enabled: flagsmithFlags[flagName].enabled,
-        value: flagsmithFlags[flagName].value ?? "",
+        value: flagsmithFlags[flagName].value.toString() ?? "",
       };
     }
 

src/hooks/useFlags/types.ts

@@ -1,5 +1,5 @@
 export interface Flag {
-  value: string | number | boolean;
+  value: string;
   enabled: boolean;
 }