refactor: update flag terminology and improve client logic

- Renamed `flagKey` to `key` in the feedback form options for consistency.
- Refactored the `updateFlags` function in the `Toolbar` component to use `Object.entries` for better readability and updated flag handling.
- Simplified the `Logo` component's SVG attributes for improved clarity.
- Removed deprecated `getFeature` references in tests and adjusted related logic to align with the new flag-based approach.
- Updated mock handlers to reflect the new endpoint structure for user requests.

Author: pavkam

packages/browser-sdk/src/client.ts

@@ -665,7 +665,7 @@ export class ReflagClient {
     // to prevent the same click from closing it.
     setTimeout(() => {
       feedbackLib.openFeedbackForm({
-        flagKey: options.flagKey,
+        key: options.flagKey,
         title: options.title,
         position: options.position || this.requestFeedbackOptions.position,
         translations:

packages/browser-sdk/src/toolbar/Toolbar.tsx

@@ -38,17 +38,12 @@ export default function Toolbar({
   const updateFlags = useCallback(() => {
     const rawFlags = reflagClient.getFlags();
     setFlags(
-      Object.values(rawFlags).map(
-        (flag) =>
+      Object.entries(rawFlags).map(
+        ([key, value]) =>
           ({
-            flagKey: flag.key,
-            override: flag.valueOverride,
-            value: flag.config
-              ? {
-                  key: flag.config.key,
-                  payload: flag.config.payload,
-                }
-              : flag.isEnabled,
+            flagKey: key,
+            override: reflagClient.getFlagOverride(key),
+            value,
           }) satisfies FlagItem,
       ),
     );

packages/browser-sdk/src/ui/icons/Logo.tsx

@@ -10,16 +10,10 @@ export const Logo: FunctionComponent<h.JSX.SVGAttributes<SVGSVGElement>> = (
     {...props}
   >
     <path
-      clipRule="evenodd"
-      d="M149.608 33.1691C114.541 33.1691 88.1957 34.0727 68.6978 35.2674C45.9877 36.6589 31.2447 53.6165 32.7413 77.1477C33.9788 96.6049 36.0938 122.855 39.6451 157.89C44.0755 201.599 48.0467 231.615 51.1923 251.815C53.8983 269.193 66.5685 280.724 83.8252 281.651C99.4409 282.49 120.822 283.137 149.608 283.137C178.991 283.137 200.659 282.463 216.355 281.599C232.793 280.694 244.886 269.593 247.467 252.738C249.007 242.679 250.794 230.104 252.816 214.471C254.076 204.729 255.427 193.799 256.866 181.551C257.741 174.108 258.648 166.178 259.588 157.731C263.785 119.994 266.075 92.6244 267.274 72.9772C268.564 51.838 255.492 36.9197 234.632 35.5304C214.779 34.208 187.208 33.1691 149.608 33.1691ZM66.7035 2.65939C86.9741 1.41736 113.994 0.5 149.608 0.5C187.792 0.5 216.098 1.55452 236.8 2.93336C275.829 5.53288 302.222 36.1432 299.852 74.9692C298.613 95.2768 296.268 123.202 292.026 161.346C287.025 206.312 282.898 236.995 279.729 257.688C274.896 289.249 250.57 312.434 218.147 314.218C201.752 315.121 179.476 315.806 149.608 315.806C120.346 315.806 98.3726 315.149 82.0761 314.273C49.1273 312.503 23.9794 289.192 18.9427 256.846C15.6873 235.941 11.6471 205.329 7.17277 161.187C3.58873 125.829 1.43655 99.164 0.168272 79.2232C-2.42412 38.4637 25.1723 5.20409 66.7035 2.65939Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-    <path
-      clipRule="evenodd"
-      d="M150.869 165.962C150.29 165.209 149.718 164.45 149.156 163.684C144.318 157.097 140.113 150.016 136.63 142.531C132.143 132.889 136.224 124.122 143.367 120.398C151.531 116.142 162.346 120.398 166.226 128.738C169.442 135.653 173.494 142.1 178.25 147.949C193.08 166.186 214.765 178.615 239.375 181.302C242.678 181.662 246.035 181.848 249.434 181.848C251.936 181.848 254.415 181.747 256.866 181.551C260.357 181.848 256.071 214.471 252.816 214.471C251.692 214.501 250.565 214.517 249.434 214.517C245.891 214.517 242.383 214.368 238.915 214.078C203.102 211.075 171.603 192.885 150.869 165.962Z"
-      fill="currentColor"
-      fillRule="evenodd"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M12.4167 0.5C13.015 0.5 13.5 0.985025 13.5 1.58333V12.4167C13.5 13.015 13.015 13.5 12.4167 13.5H1.58333C0.985025 13.5 0.5 13.015 0.5 12.4167V1.58333C0.5 0.985025 0.985025 0.5 1.58333 0.5H12.4167ZM1.58333 1.58333V12.4167L12.4167 1.58333H1.58333Z"
+      fill="white"
     />
   </svg>
 );

packages/browser-sdk/test/client.test.ts

@@ -4,8 +4,6 @@ import { ReflagClient } from "../src/client";
 import { FlagsClient } from "../src/flag/flags";
 import { HttpClient } from "../src/httpClient";
 
-import { flagsResult } from "./mocks/handlers";
-
 describe("ReflagClient", () => {
   let client: ReflagClient;
   const httpClientPost = vi.spyOn(HttpClient.prototype as any, "post");
@@ -65,18 +63,6 @@ describe("ReflagClient", () => {
     });
   });
 
-  describe("getFeature (deprecated)", () => {
-    it("takes overrides into account", async () => {
-      await client.initialize();
-
-      expect(flagsResult["flagA"].isEnabled).toBe(true);
-      expect(client.getFeature("flagA").isEnabled).toBe(true);
-
-      client.getFeature("flagA").setIsEnabledOverride(false);
-      expect(client.getFeature("flagA").isEnabled).toBe(false);
-    });
-  });
-
   describe("getFlag", () => {
     beforeEach(async () => {
       await client.initialize();
@@ -143,8 +129,6 @@ describe("ReflagClient", () => {
     const userHook = vi.fn();
     const companyHook = vi.fn();
     const checkHook = vi.fn();
-    const checkHookIsEnabled = vi.fn();
-    const checkHookConfig = vi.fn();
     const flagsUpdated = vi.fn();
 
     beforeEach(async () => {
@@ -154,16 +138,12 @@ describe("ReflagClient", () => {
       client.on("user", userHook);
       client.on("company", companyHook);
       client.on("check", checkHook);
-      client.on("configCheck", checkHookConfig);
-      client.on("enabledCheck", checkHookIsEnabled);
       client.on("flagsUpdated", flagsUpdated);
 
       trackHook.mockReset();
       userHook.mockReset();
       companyHook.mockReset();
       checkHook.mockReset();
-      checkHookIsEnabled.mockReset();
-      checkHookConfig.mockReset();
       flagsUpdated.mockReset();
     });
 
@@ -172,8 +152,6 @@ describe("ReflagClient", () => {
       client.off("user", userHook);
       client.off("company", companyHook);
       client.off("check", checkHook);
-      client.off("configCheck", checkHookConfig);
-      client.off("enabledCheck", checkHookIsEnabled);
       client.off("flagsUpdated", flagsUpdated);
     });
 
@@ -246,23 +224,19 @@ describe("ReflagClient", () => {
         version: 1,
       };
 
-      expect(checkHookIsEnabled).toHaveBeenCalledWith(checkEvent);
       expect(checkHook).toHaveBeenCalledWith(checkEvent);
 
       // Remove hooks
       client.off("check", checkHook);
-      client.off("enabledCheck", checkHookIsEnabled);
 
       // Reset mocks
       checkHook.mockReset();
-      checkHookIsEnabled.mockReset();
 
       // Trigger events again
       client.getFlag("flagA");
 
       // Ensure hooks are not called
       expect(checkHook).not.toHaveBeenCalled();
-      expect(checkHookIsEnabled).not.toHaveBeenCalled();
     });
 
     it("check (config)", async () => {
@@ -284,20 +258,16 @@ describe("ReflagClient", () => {
       };
 
       expect(checkHook).toHaveBeenCalledWith(checkEvent);
-      expect(checkHookConfig).toHaveBeenCalledWith(checkEvent);
 
       client.off("check", checkHook);
-      client.off("configCheck", checkHookConfig);
 
       // Reset mocks
       checkHook.mockReset();
-      checkHookConfig.mockReset();
 
       client.getFlag("flagB");
 
       // Ensure hooks are not called
       expect(checkHook).not.toHaveBeenCalled();
-      expect(checkHookConfig).not.toHaveBeenCalled();
     });
 
     it("flagsUpdated", async () => {

packages/browser-sdk/test/hooksManager.test.ts

@@ -25,46 +25,6 @@ describe("HookManager", () => {
     expect(callback).toHaveBeenCalledWith(checkEvent);
   });
 
-  it("should add and trigger `enabledCheck` hooks", () => {
-    const callback = vi.fn();
-    hookManager.addHook("enabledCheck", callback);
-
-    const checkEvent: CheckEvent = {
-      action: "check-is-enabled",
-      key: "test-key",
-      value: true,
-    };
-    hookManager.trigger("enabledCheck", checkEvent);
-
-    expect(callback).toHaveBeenCalledWith(checkEvent);
-  });
-
-  it("should add and trigger `configCheck` hooks", () => {
-    const callback = vi.fn();
-    hookManager.addHook("configCheck", callback);
-
-    const checkEvent: CheckEvent = {
-      action: "check-config",
-      key: "test-key",
-      value: { key: "key", payload: "payload" },
-    };
-    hookManager.trigger("configCheck", checkEvent);
-
-    expect(callback).toHaveBeenCalledWith(checkEvent);
-  });
-
-  it("should add and trigger `featuresUpdated` hooks (deprecated)", () => {
-    const callback = vi.fn();
-    hookManager.addHook("featuresUpdated", callback);
-
-    const flags: RawFlags = {
-      /* mock RawFlags data */
-    };
-    hookManager.trigger("flagsUpdated", flags);
-
-    expect(callback).toHaveBeenCalledWith(flags);
-  });
-
   it("should add and trigger `flagsUpdated` hooks", () => {
     const callback = vi.fn();
     hookManager.addHook("flagsUpdated", callback);

packages/browser-sdk/test/init.test.ts

@@ -40,7 +40,7 @@ describe("init", () => {
 
     server.use(
       http.get(
-        "https://example.com/flags/evaluated",
+        "https://example.com/features/evaluated",
         ({ request }: { request: StrictRequest<DefaultBodyType> }) => {
           usedSpecialHost = true;
           return getFlags({ request });

packages/browser-sdk/test/mocks/handlers.ts

@@ -79,7 +79,7 @@ export function getFlags({
 }
 
 export const handlers = [
-  http.post("https://front.bucket.co/user", async ({ request }) => {
+  http.post("https://front.reflag.co/user", async ({ request }) => {
     if (!checkRequest(request)) return invalidReqResponse;
 
     const data = await request.json();