feat: in use

reflagcom · roncohen · Jan 29, 2025 · Jan 29, 2025 · Jan 29, 2025 · Jan 29, 2025
commit 121a36e628c75eeafa76899b95373ee6bb0995d4
diff --git a/packages/browser-sdk/src/client.ts b/packages/browser-sdk/src/client.ts
@@ -337,6 +337,19 @@ 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;
+
+  setInUse(inUse: boolean): void;
 }
 
 function shouldShowToolbar(opts: InitOptions) {
@@ -763,17 +776,16 @@ export class BucketClient {
           ...options,
         });
       },
+      isEnabledOverride: this.featuresClient.getFeatureOverride(key),
+      setIsEnabledOverride(isEnabled: boolean | null) {
+        fClient.setFeatureOverride(key, isEnabled);
+      },
+      setInUse(inUse: boolean) {
+        fClient.setInUse(key, inUse);
+      },
     };
   }
 
-  setFeatureOverride(key: string, isEnabled: boolean | null) {
-    this.featuresClient.setFeatureOverride(key, isEnabled);
-  }
-
-  getFeatureOverride(key: string): boolean | null {
-    return this.featuresClient.getFeatureOverride(key);
-  }
-
   sendCheckEvent(checkEvent: CheckEvent) {
     return this.featuresClient.sendCheckEvent(checkEvent, () => {
       this.hooks.trigger(checkEvent.action, checkEvent);

diff --git a/packages/browser-sdk/src/feature/features.ts b/packages/browser-sdk/src/feature/features.ts
@@ -79,6 +79,11 @@ export type RawFeature = FetchedFeature & {
    * If not null, the result is being overridden locally
    */
   isEnabledOverride: boolean | null;
+
+  /**
+   * If not null, the feature is in use
+   */
+  inUse: boolean;
 };
 
 export type RawFeatures = Record<string, RawFeature>;
@@ -185,6 +190,7 @@ const localStorageFetchedFeaturesKey = `__bucket_fetched_features`;
 const localStorageOverridesKey = `__bucket_overrides`;
 
 type OverridesFeatures = Record<string, boolean | null>;
+type InUseFeatures = Record<string, boolean | null>;
 
 function setOverridesCache(overrides: OverridesFeatures) {
   localStorage.setItem(localStorageOverridesKey, JSON.stringify(overrides));
@@ -210,6 +216,8 @@ export class FeaturesClient {
   private fetchedFeatures: FetchedFeatures;
   private featureOverrides: OverridesFeatures = {};
 
+  private featureInUse: InUseFeatures = {};
+
   private features: RawFeatures = {};
 
   private config: Config;
@@ -399,6 +407,16 @@ export class FeaturesClient {
       mergedFeatures[key] = {
         ...fetchedFeature,
         isEnabledOverride,
+        inUse: false,
+      };
+    }
+
+    for (const key in this.featureInUse) {
+      const inUse = this.featureInUse[key] ?? false;
+      mergedFeatures[key] = {
+        ...mergedFeatures[key],
+        key,
+        inUse,
       };
     }
 
@@ -532,4 +550,9 @@ export class FeaturesClient {
   getFeatureOverride(key: string): boolean | null {
     return this.featureOverrides[key] ?? null;
   }
+
+  setInUse(key: string, value: boolean) {
+    this.featureInUse[key] = value;
+    this.triggerFeaturesChanged();
+  }
 }
diff --git a/packages/browser-sdk/src/toolbar/Features.tsx b/packages/browser-sdk/src/toolbar/Features.tsx
@@ -15,10 +15,15 @@ export function FeaturesTable({
   if (features.length === 0) {
     return <div style={{ color: "var(--gray500)" }}>No features found</div>;
   }
+
+  const sortedFeatures = [...features].sort((a, b) =>
+    a.inUse === b.inUse ? 0 : a.inUse ? -1 : 1,
+  );
+
   return (
     <table class="features-table">
       <tbody>
-        {features.map((feature) => (
+        {sortedFeatures.map((feature) => (
           <FeatureRow
             feature={feature}
             appBaseUrl={appBaseUrl}
@@ -41,7 +46,7 @@ function FeatureRow({
 }) {
   return (
     <tr key={feature.key}>
-      <td class="feature-name-cell">
+      <td class="feature-name-cell in-use">
         <a
           href={`${appBaseUrl}/envs/current/features/by-key/${feature.key}`}
           target="_blank"

diff --git a/packages/browser-sdk/src/toolbar/Toolbar.css b/packages/browser-sdk/src/toolbar/Toolbar.css
@@ -161,3 +161,7 @@
     box-shadow: var(--border-color) -1px 1px 1px 0px;
   }
 }
+
+.in-use-show-all {
+  cursor: pointer;
+}
diff --git a/packages/browser-sdk/src/toolbar/Toolbar.tsx b/packages/browser-sdk/src/toolbar/Toolbar.tsx
@@ -15,6 +15,7 @@ export type FeatureItem = {
   key: string;
   localOverride: boolean | null;
   isEnabled: boolean;
+  inUse: boolean;
 };
 export interface ToolbarPosition {
   placement: DialogPlacement;
@@ -25,6 +26,7 @@ type Feature = {
   key: string;
   isEnabled: boolean;
   localOverride: boolean | null;
+  inUse: boolean;
 };
 
 export default function Toolbar({
@@ -46,8 +48,9 @@ export default function Toolbar({
           (feature) =>
             ({
               key: feature.key,
-              localOverride: bucketClient.getFeatureOverride(feature?.key),
+              localOverride: feature.isEnabledOverride,
               isEnabled: feature.isEnabled,
+              inUse: feature.inUse,
             }) satisfies FeatureItem,
         ),
     );
@@ -101,9 +104,9 @@ export default function Toolbar({
         <DialogContent>
           <FeaturesTable
             features={searchedFeatures}
-            setEnabledOverride={bucketClient.setFeatureOverride.bind(
-              bucketClient,
-            )}
+            setEnabledOverride={(key: string, value: boolean | null) =>
+              bucketClient.getFeature(key).setIsEnabledOverride(value)
+            }
             appBaseUrl={appBaseUrl}
           />
         </DialogContent>

diff --git a/packages/browser-sdk/test/client.test.ts b/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);
     });
   });

diff --git a/packages/react-sdk/dev/plain/app.tsx b/packages/react-sdk/dev/plain/app.tsx
@@ -14,7 +14,7 @@ import {
 // Extending the Features interface to define the available features
 declare module "../../src" {
   interface Features {
-    huddles: boolean;
+    huddles: { optInCopy: string };
   }
 }
 
@@ -185,20 +185,27 @@ function Demos() {
   );
 }
 
-function FeatureOptIn({
+// 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: FeatureKey;
+  featureKey: TKey;
   featureName: string;
 }) {
   const updateUser = useUpdateUser();
   const [sendingUpdate, setSendingUpdate] = useState(false);
-  const { isEnabled } = useFeature(featureKey);
+  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>
       <input
         disabled={sendingUpdate}
         id="huddlesOptIn"
@@ -222,12 +229,13 @@ export function App() {
     <BucketProvider
       publishableKey={publishableKey}
       feedback={{
-        enableLiveSatisfaction: true,
+        enableAutoFeedback: true,
       }}
       company={initialCompany}
       user={initialUser}
       otherContext={initialOtherContext}
       apiBaseUrl={apiBaseUrl}
+      // toolbar={true}
     >
       <Demos />
       {}

diff --git a/packages/react-sdk/src/index.tsx b/packages/react-sdk/src/index.tsx
@@ -206,6 +206,15 @@ export function useFeature<TKey extends FeatureKey>(
   const requestFeedback = (opts: RequestFeedbackOptions) =>
     client?.requestFeedback({ ...opts, featureKey: key });
 
+  // mark the feature as in use on the page
+  useEffect(() => {
+    client?.getFeature(key).setInUse(true);
+
+    return () => {
+      client?.getFeature(key).setInUse(false);
+    };
+  }, [key, client]);
+
   if (isLoading || !client) {
     return {
       isLoading,