introduce: in-use API for use with React

Author: roncohen

packages/browser-sdk/src/feature/features.ts

@@ -399,29 +399,24 @@ export class FeaturesClient {
   private triggerFeaturesChanged() {
     const mergedFeatures: RawFeatures = {};
 
-    // merge fetched features with overrides into `this.features`
-    for (const key in this.fetchedFeatures) {
-      const fetchedFeature = this.fetchedFeatures[key];
-      if (!fetchedFeature) continue;
-      const isEnabledOverride = this.featureOverrides[key] ?? null;
-      mergedFeatures[key] = {
-        ...fetchedFeature,
-        isEnabledOverride,
-        inUse: false,
-      };
-    }
+    const allKeys = new Set([
+      ...Object.keys(this.fetchedFeatures),
+      ...Object.keys(this.featureInUse),
+      ...Object.keys(this.featureOverrides),
+    ]);
 
-    for (const key in this.featureInUse) {
-      const inUse = this.featureInUse[key] ?? false;
+    for (const key of allKeys) {
       mergedFeatures[key] = {
-        ...mergedFeatures[key],
-        key,
-        inUse,
+        ...(this.fetchedFeatures[key] ?? {
+          key,
+          isEnabled: false,
+        }),
+        isEnabledOverride: this.featureOverrides[key] ?? null,
+        inUse: this.featureInUse[key] ?? false,
       };
     }
 
     this.features = mergedFeatures;
-
     this.eventTarget.dispatchEvent(new Event(FEATURES_UPDATED_EVENT));
   }
 

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

@@ -40,6 +40,16 @@
 .features-table {
   width: 100%;
   border-collapse: collapse;
+  a {
+    color: var(--text-color);
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  .in-use a {
+    color: var(--brand400);
+  }
 }
 
 .feature-name-cell {
@@ -50,14 +60,6 @@
   padding: 6px 6px 6px 0;
 }
 
-.feature-link {
-  color: var(--text-color);
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
 .feature-reset-cell {
   width: 30px;
   padding: 6px 0;

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

@@ -41,8 +41,8 @@ function FeatureRow({
   setEnabledOverride: (key: string, value: boolean | null) => void;
 }) {
   return (
-    <tr key={feature.key}>
-      <td class="feature-name-cell in-use">
+    <tr key={feature.key} class={feature.inUse ? "in-use" : ""}>
+      <td class="feature-name-cell">
         <a
           href={`${appBaseUrl}/envs/current/features/by-key/${feature.key}`}
           target="_blank"

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

@@ -161,7 +161,3 @@
     box-shadow: var(--border-color) -1px 1px 1px 0px;
   }
 }
-
-.in-use-show-all {
-  cursor: pointer;
-}

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

@@ -1,4 +1,4 @@
-import { afterAll, beforeEach, describe, expect, test, vi } from "vitest";
+import { afterAll, beforeEach, describe, expect, it, test, vi } from "vitest";
 
 import { version } from "../package.json";
 import {
@@ -384,4 +384,24 @@ describe("FeaturesClient", () => {
     expect(updated).toBe(true);
     expect(client.getFeatures().featureC).toBeUndefined();
   });
+
+  describe("in use", () => {
+    it("handled in use", async () => {
+      // change the response so we can validate that we'll serve the stale cache
+      const { newFeaturesClient } = featuresClientFactory();
+
+      // localStorage.clear();
+      const client = newFeaturesClient(undefined);
+      await client.initialize();
+
+      client.setInUse("featureC", true);
+      expect(client.getFeatures().featureC.isEnabled).toBe(false);
+      expect(client.getFeatures().featureC.isEnabledOverride).toBe(null);
+
+      client.setFeatureOverride("featureC", true);
+
+      expect(client.getFeatures().featureC.isEnabled).toBe(false);
+      expect(client.getFeatures().featureC.isEnabledOverride).toBe(true);
+    });
+  });
 });

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

@@ -15,6 +15,7 @@ import {
 declare module "../../src" {
   interface Features {
     huddles: { optInCopy: string };
+    "voice-chat": { optInCopy: string };
   }
 }
 
@@ -164,6 +165,9 @@ function Feedback() {
 
 // App.tsx
 function Demos() {
+  const [showVoiceChatOptIn, setShowVoiceChatOptIn] = useState(true);
+  const [showHuddleOptIn, setShowHuddleOptIn] = useState(true);
+
   return (
     <main>
       <h1>React SDK</h1>
@@ -176,7 +180,14 @@ function Demos() {
         <code>optin-huddles IS TRUE</code>. Hit the checkbox below to opt-in/out
         of the feature.
       </div>
-      <FeatureOptIn featureKey={"huddles"} featureName={"Huddles"} />
+      {showHuddleOptIn && <FeatureOptIn featureKey={"huddles"} />}
+      <button onClick={() => setShowHuddleOptIn((prev) => !prev)}>
+        Toggle voice chat opt-in
+      </button>
+      {showVoiceChatOptIn && <FeatureOptIn featureKey={"voice-chat"} />}
+      <button onClick={() => setShowVoiceChatOptIn((prev) => !prev)}>
+        Toggle voice chat opt-in
+      </button>
 
       <UpdateContext />
       <Feedback />
@@ -185,27 +196,22 @@ function Demos() {
   );
 }
 
-// type KeysOfValue<T, TCondition> = {
-//   [K in keyof T]: T[K] extends TCondition ? K : never;
-// }[keyof T];
-
-// type OptInFeature = KeysOfValue<Features, { optInCopy: any }>;
-
 function FeatureOptIn<TKey extends FeatureKey>({
   featureKey,
-  featureName,
 }: {
   featureKey: TKey;
-  featureName: string;
 }) {
   const updateUser = useUpdateUser();
   const [sendingUpdate, setSendingUpdate] = useState(false);
   const { isEnabled, config } = useFeature(featureKey);
 
   return (
     <div>
-      <label htmlFor="huddlesOptIn">Opt-in to {featureName} feature</label>
-      <span>{config.payload?.optInCopy ?? "Hit the checkbox to opt-in"}</span>
+      <label htmlFor="huddlesOptIn">
+        {config.payload?.optInCopy ?? "Hit the checkbox to opt-in"}:{" "}
+        {featureKey}
+      </label>
+
       <input
         disabled={sendingUpdate}
         id="huddlesOptIn"