refactor(browser-sdk): refactor overrides API

includes new example of how to make your own toolbar

Author: roncohen

packages/browser-sdk/src/client.ts

@@ -319,6 +319,7 @@ export type FeatureRemoteConfig =
 export interface Feature {
   /**
    * Result of feature flag evaluation.
+   * Note: Does not take local overrides into account.
    */
   isEnabled: boolean;
 
@@ -338,6 +339,17 @@ export interface Feature {
   requestFeedback: (
     options: Omit<RequestFeedbackData, "featureKey" | "featureId">,
   ) => void;
+
+  /**
+   * The current override status of isEnabled for the feature.
+   */
+  isEnabledOverride: boolean | null;
+
+  /**
+   * Set the override status for isEnabled for the feature.
+   * Set to `null` to remove the override.
+   */
+  setIsEnabledOverride(isEnabled: boolean | null): void;
 }
 
 function shouldShowToolbar(opts: InitOptions) {
@@ -778,23 +790,13 @@ export class BucketClient {
           ...options,
         });
       },
+      isEnabledOverride: this.featuresClient.getFeatureOverride(key),
+      setIsEnabledOverride(isEnabled: boolean | null) {
+        self.featuresClient.setFeatureOverride(key, isEnabled);
+      },
     };
   }
 
-  /**
-   * @internal
-   */
-  setFeatureOverride(key: string, isEnabled: boolean | null) {
-    this.featuresClient.setFeatureOverride(key, isEnabled);
-  }
-
-  /**
-   * @internal
-   */
-  getFeatureOverride(key: string): boolean | null {
-    return this.featuresClient.getFeatureOverride(key);
-  }
-
   private sendCheckEvent(checkEvent: CheckEvent) {
     return this.featuresClient.sendCheckEvent(checkEvent, () => {
       this.hooks.trigger(

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

@@ -9,15 +9,15 @@ import { FeatureItem } from "./Toolbar";
 export function FeaturesTable({
   features,
   searchQuery,
-  setEnabledOverride,
   appBaseUrl,
   isOpen,
+  setIsEnabledOverride,
 }: {
   features: FeatureItem[];
   searchQuery: string | null;
-  setEnabledOverride: (key: string, value: boolean | null) => void;
   appBaseUrl: string;
   isOpen: boolean;
+  setIsEnabledOverride: (key: string, isEnabled: boolean | null) => void;
 }) {
   const searchedFeatures =
     searchQuery === null
@@ -43,7 +43,7 @@ export function FeaturesTable({
                 .includes(searchQuery.toLocaleLowerCase())
             }
             isOpen={isOpen}
-            setEnabledOverride={setEnabledOverride}
+            setEnabledOverride={() => setIsEnabledOverride(feature.key, null)}
           />
         ))}
       </tbody>
@@ -61,7 +61,7 @@ function FeatureRow({
 }: {
   feature: FeatureItem;
   appBaseUrl: string;
-  setEnabledOverride: (key: string, value: boolean | null) => void;
+  setEnabledOverride: (isEnabled: boolean | null) => void;
   isOpen: boolean;
   index: number;
   isNotVisible: boolean;
@@ -94,11 +94,7 @@ function FeatureRow({
       </td>
       <td class="feature-reset-cell">
         {feature.localOverride !== null ? (
-          <Reset
-            featureKey={feature.key}
-            setEnabledOverride={setEnabledOverride}
-            tabIndex={index + 1}
-          />
+          <Reset setEnabledOverride={setEnabledOverride} tabIndex={index + 1} />
         ) : null}
       </td>
       <td class="feature-switch-cell">
@@ -111,7 +107,7 @@ function FeatureRow({
           onChange={(e) => {
             const isChecked = e.currentTarget.checked;
             const isOverridden = isChecked !== feature.isEnabled;
-            setEnabledOverride(feature.key, isOverridden ? isChecked : null);
+            setEnabledOverride(isOverridden ? isChecked : null);
           }}
         />
       </td>
@@ -138,19 +134,17 @@ export function FeatureSearch({
 
 function Reset({
   setEnabledOverride,
-  featureKey,
   ...props
 }: {
-  setEnabledOverride: (key: string, value: boolean | null) => void;
-  featureKey: string;
+  setEnabledOverride: (isEnabled: boolean | null) => void;
 } & h.JSX.HTMLAttributes<HTMLAnchorElement>) {
   return (
     <a
       class="reset"
       href=""
       onClick={(e) => {
         e.preventDefault();
-        setEnabledOverride(featureKey, null);
+        setEnabledOverride(null);
       }}
       {...props}
     >

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

@@ -48,7 +48,7 @@ export default function Toolbar({
           (feature) =>
             ({
               key: feature.key,
-              localOverride: bucketClient.getFeatureOverride(feature?.key),
+              localOverride: feature.isEnabledOverride,
               isEnabled: feature.isEnabled,
             }) satisfies FeatureItem,
         ),
@@ -108,9 +108,9 @@ export default function Toolbar({
             features={sortedFeatures}
             isOpen={isOpen}
             searchQuery={search}
-            setEnabledOverride={bucketClient.setFeatureOverride.bind(
-              bucketClient,
-            )}
+            setIsEnabledOverride={(key, isEnabled) =>
+              bucketClient.getFeature(key).setIsEnabledOverride(isEnabled)
+            }
           />
         </DialogContent>
       </Dialog>

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

@@ -70,7 +70,7 @@ describe("BucketClient", () => {
       await client.initialize();
       expect(featuresResult["featureA"].isEnabled).toBe(true);
       expect(client.getFeature("featureA").isEnabled).toBe(true);
-      client.setFeatureOverride("featureA", false);
+      client.getFeature("featureA").setIsEnabledOverride(false);
       expect(client.getFeature("featureA").isEnabled).toBe(false);
     });
   });

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

@@ -80,6 +80,8 @@ describe("usage", () => {
       track: expect.any(Function),
       requestFeedback: expect.any(Function),
       config: { key: undefined, payload: undefined },
+      isEnabledOverride: null,
+      setIsEnabledOverride: expect.any(Function),
     });
   });
 
@@ -413,6 +415,8 @@ describe(`sends "check" events `, () => {
         config: { key: undefined, payload: undefined },
         track: expect.any(Function),
         requestFeedback: expect.any(Function),
+        isEnabledOverride: null,
+        setIsEnabledOverride: expect.any(Function),
       });
 
       expect(client.getFeature("featureB")).toStrictEqual({
@@ -426,13 +430,17 @@ describe(`sends "check" events `, () => {
         },
         track: expect.any(Function),
         requestFeedback: expect.any(Function),
+        isEnabledOverride: null,
+        setIsEnabledOverride: expect.any(Function),
       });
 
       expect(client.getFeature("featureC")).toStrictEqual({
         isEnabled: false,
         config: { key: undefined, payload: undefined },
         track: expect.any(Function),
         requestFeedback: expect.any(Function),
+        isEnabledOverride: null,
+        setIsEnabledOverride: expect.any(Function),
       });
     });
 
@@ -567,6 +575,8 @@ describe(`sends "check" events `, () => {
         track: expect.any(Function),
         requestFeedback: expect.any(Function),
         config: { key: undefined, payload: undefined },
+        isEnabledOverride: null,
+        setIsEnabledOverride: expect.any(Function),
       });
 
       vi.spyOn(client, "track");
@@ -586,6 +596,8 @@ describe(`sends "check" events `, () => {
         track: expect.any(Function),
         requestFeedback: expect.any(Function),
         config: { key: undefined, payload: undefined },
+        isEnabledOverride: null,
+        setIsEnabledOverride: expect.any(Function),
       });
 
       vi.spyOn(client, "requestFeedback");

packages/react-sdk/dev/plain/app.tsx

@@ -9,6 +9,7 @@ import {
   useUpdateCompany,
   useUpdateOtherContext,
   useUpdateUser,
+  useClient,
 } from "../../src";
 
 // Extending the Features interface to define the available features
@@ -187,6 +188,7 @@ function Demos() {
       <UpdateContext />
       <Feedback />
       <SendEvent />
+      <CustomToolbar />
     </main>
   );
 }
@@ -223,6 +225,49 @@ function FeatureOptIn({
   );
 }
 
+function CustomToolbar() {
+  const client = useClient();
+
+  if (!client) {
+    return null;
+  }
+
+  return (
+    <div>
+      <h2>Custom toolbar</h2>
+      <ul>
+        {Object.entries(client.getFeatures()).map(([featureKey, feature]) => (
+          <li key={featureKey}>
+            {featureKey} -
+            {(feature.isEnabledOverride ?? feature.isEnabled)
+              ? "Enabled"
+              : "Disabled"}{" "}
+            {feature.isEnabledOverride !== null && (
+              <button
+                onClick={() => {
+                  client.getFeature(featureKey).setIsEnabledOverride(null);
+                }}
+              >
+                Reset
+              </button>
+            )}
+            <input
+              checked={feature.isEnabledOverride ?? false}
+              type="checkbox"
+              onChange={(e) => {
+                console.log("onChange", e.target.checked);
+                client
+                  .getFeature(featureKey)
+                  .setIsEnabledOverride(e.target.checked ?? false);
+              }}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
 export function App() {
   return (
     <BucketProvider
@@ -233,7 +278,6 @@ export function App() {
       apiBaseUrl={apiBaseUrl}
     >
       <Demos />
-      {}
     </BucketProvider>
   );
 }