Merge pull request #6467 from voxel51/feat/feature-flags-v0

tom-vx51 · web-flow · commit 83a277d1062e · 2025-10-23T19:15:04.000-07:00
implement basic feature flags
diff --git a/app/packages/analytics/src/useTrackEvent.ts b/app/packages/analytics/src/useTrackEvent.ts
@@ -13,8 +13,12 @@ export default function useTrackEvent() {
   const info = useRecoilValue<AnalyticsInfo>(analyticsInfo);
   return useCallback(
     (eventName: string, properties?: Record<string, any>) => {
-      const analytics = usingAnalytics(info);
-      analytics.trackEvent(eventName, properties);
+      try {
+        const analytics = usingAnalytics(info);
+        analytics.trackEvent(eventName, properties);
+      } catch (err) {
+        console.warn("Failed to track event", err);
+      }
     },
     [info]
   );
diff --git a/app/packages/feature-flags/.gitignore b/app/packages/feature-flags/.gitignore
@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+dist
diff --git a/app/packages/feature-flags/package.json b/app/packages/feature-flags/package.json
@@ -0,0 +1,38 @@
+{
+    "name": "@fiftyone/feature-flags",
+    "version": "1.0.0",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview",
+        "watch": "nodemon --watch ./src --ext js,jsx,ts,tsx --exec 'yarn build'",
+        "test": "vitest"
+    },
+    "files": [
+        "dist"
+    ],
+    "main": "src/index.ts",
+    "dependencies": {
+        "@fiftyone/analytics": "*"
+    },
+    "devDependencies": {
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/react": "^16.2.0",
+        "@typescript-eslint/eslint-plugin": "^6.0.0",
+        "@typescript-eslint/parser": "^6.0.0",
+        "eslint": "^8.0.0",
+        "jsdom": "^26.0.0",
+        "typescript": "^4.7.4",
+        "vite": "^5.4.12",
+        "vite-plugin-externals": "^0.5.0",
+        "vitest": "^1.6.0"
+    },
+    "fiftyone": {
+        "script": "dist/index.umd.js"
+    },
+    "packageManager": "yarn@4.9.1",
+    "peerDependencies": {
+        "jotai": "*",
+        "react": "*"
+    }
+}
diff --git a/app/packages/feature-flags/src/client/featureClient.ts b/app/packages/feature-flags/src/client/featureClient.ts
@@ -0,0 +1,15 @@
+import { getFetchFunction } from "@fiftyone/utilities";
+
+/**
+ * Response type for ListFeatures API.
+ */
+export type ListFeaturesResponse = {
+  features: string[];
+};
+
+/**
+ * List enabled features.
+ */
+export const listEnabledFeatures = (): Promise<ListFeaturesResponse> => {
+  return getFetchFunction()("GET", "/features");
+};
diff --git a/app/packages/feature-flags/src/client/flags.ts b/app/packages/feature-flags/src/client/flags.ts
@@ -0,0 +1,4 @@
+/**
+ * Enumeration of active feature flags.
+ */
+export enum FeatureFlag {}
diff --git a/app/packages/feature-flags/src/client/index.ts b/app/packages/feature-flags/src/client/index.ts
@@ -0,0 +1,2 @@
+export * from "./featureClient";
+export * from "./flags";
diff --git a/app/packages/feature-flags/src/components/FeatureFlagged.tsx b/app/packages/feature-flags/src/components/FeatureFlagged.tsx
@@ -0,0 +1,25 @@
+import { useFeature } from "../hooks";
+import { Fragment } from "react";
+import { FeatureFlag } from "../client";
+
+/**
+ * Component which conditionally renders children based on the status of a feature.
+ *
+ * @param feature Feature identifier
+ * @param children Component to render if the feature is enabled
+ * @param fallback Optional fallback component to render if the feature is disabled
+ */
+export const FeatureFlagged = ({
+  feature,
+  children,
+  fallback,
+}: {
+  feature: FeatureFlag;
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}) => {
+  const isFeatureEnabled = useFeature({ feature });
+
+  const content = isFeatureEnabled ? children : fallback ?? <Fragment />;
+  return <>{content}</>;
+};
diff --git a/app/packages/feature-flags/src/components/index.ts b/app/packages/feature-flags/src/components/index.ts
@@ -0,0 +1 @@
+export * from "./FeatureFlagged";
diff --git a/app/packages/feature-flags/src/hooks/index.ts b/app/packages/feature-flags/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./useFeature";
diff --git a/app/packages/feature-flags/src/hooks/useFeature.ts b/app/packages/feature-flags/src/hooks/useFeature.ts
@@ -0,0 +1,35 @@
+import { useFeatureCache } from "./useFeatureCache";
+import { FeatureFlag } from "../client";
+import { useTrackEvent } from "@fiftyone/analytics";
+import { useEffect } from "react";
+
+/**
+ * Hook which provides the status of a given feature.
+ *
+ * @param feature Feature identifier
+ * @param enableTracking If enabled, will emit tracking events
+ * @returns true if the feature is enabled, else false
+ */
+export const useFeature = ({
+  feature,
+  enableTracking,
+}: {
+  feature: FeatureFlag;
+  enableTracking?: boolean;
+}): boolean => {
+  const cache = useFeatureCache();
+  const trackEvent = useTrackEvent();
+
+  const isEnabled = cache.isFeatureEnabled(feature.toString());
+
+  useEffect(() => {
+    if (enableTracking) {
+      trackEvent("VFF:CHECK", {
+        feature,
+        isEnabled,
+      });
+    }
+  }, [enableTracking, feature, isEnabled]);
+
+  return isEnabled;
+};
diff --git a/app/packages/feature-flags/src/hooks/useFeatureCache.ts b/app/packages/feature-flags/src/hooks/useFeatureCache.ts
@@ -0,0 +1,39 @@
+import { atom, useAtom, useAtomValue } from "jotai";
+import { FeatureCache } from "../utils";
+import { useEffect } from "react";
+import { listEnabledFeatures } from "../client";
+
+/**
+ * Cache mapping feature flags to their status.
+ */
+const featureCacheAtom = atom<FeatureCache>(new FeatureCache());
+const isInitializedAtom = atom<boolean>(false);
+const isFetchingAtom = atom<boolean>(false);
+
+/**
+ * Hook which provides access to a shared cache of enabled features.
+ */
+export const useFeatureCache = (): FeatureCache => {
+  const cache = useAtomValue(featureCacheAtom);
+  const [isInitialized, setIsInitialized] = useAtom(isInitializedAtom);
+  const [isFetching, setIsFetching] = useAtom(isFetchingAtom);
+
+  useEffect(() => {
+    if (!isInitialized && !isFetching) {
+      setIsFetching(true);
+
+      listEnabledFeatures()
+        .then((res) => {
+          cache.clear();
+          res?.features?.forEach((feature) => cache.setFeature(feature, true));
+        })
+        .catch((err) => console.warn("Failed to fetch features", err))
+        .finally(() => {
+          setIsFetching(false);
+          setIsInitialized(true);
+        });
+    }
+  }, [cache]);
+
+  return cache;
+};
diff --git a/app/packages/feature-flags/src/index.ts b/app/packages/feature-flags/src/index.ts
@@ -0,0 +1,3 @@
+export * from "./client";
+export * from "./components";
+export * from "./hooks";
diff --git a/app/packages/feature-flags/src/utils/cache.spec.ts b/app/packages/feature-flags/src/utils/cache.spec.ts
@@ -0,0 +1,66 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { FeatureCache } from "./cache";
+
+describe("FeatureCache", () => {
+  let cache: FeatureCache;
+  const feature = "some-feature";
+
+  beforeEach(() => {
+    cache = new FeatureCache();
+  });
+
+  describe("hasFeature", () => {
+    it("should return false if not in the cache", () => {
+      expect(cache.hasFeature(feature)).toBeFalsy();
+    });
+
+    it("should return true if the feature is enabled", () => {
+      cache.setFeature(feature, true);
+      expect(cache.hasFeature(feature)).toBeTruthy();
+    });
+
+    it("should return true if the feature is disabled", () => {
+      cache.setFeature(feature, false);
+      expect(cache.hasFeature(feature)).toBeTruthy();
+    });
+  });
+
+  describe("setFeature", () => {
+    it("should correctly set the feature status for enabled features", () => {
+      cache.setFeature(feature, true);
+      expect(cache.isFeatureEnabled(feature)).toBeTruthy();
+    });
+
+    it("should correctly set the feature status for disabled features", () => {
+      cache.setFeature(feature, false);
+      expect(cache.isFeatureEnabled(feature)).toBeFalsy();
+    });
+  });
+
+  describe("isFeatureEnabled", () => {
+    it("should return true for enabled features", () => {
+      cache.setFeature(feature, true);
+      expect(cache.isFeatureEnabled(feature)).toBeTruthy();
+    });
+
+    it("should return false for disabled features", () => {
+      cache.setFeature(feature, false);
+      expect(cache.isFeatureEnabled(feature)).toBeFalsy();
+    });
+
+    it("should return false for non-existent features", () => {
+      expect(cache.isFeatureEnabled(feature)).toBeFalsy();
+    });
+  });
+
+  describe("clear", () => {
+    it("should clear the cache", () => {
+      cache.setFeature(feature, true);
+      expect(cache.isFeatureEnabled(feature)).toBeTruthy();
+
+      cache.clear();
+
+      expect(cache.isFeatureEnabled(feature)).toBeFalsy();
+    });
+  });
+});
diff --git a/app/packages/feature-flags/src/utils/cache.ts b/app/packages/feature-flags/src/utils/cache.ts
@@ -0,0 +1,46 @@
+/**
+ * In-memory cache which maps features to their status.
+ */
+export class FeatureCache {
+  private readonly cache: Record<string, boolean> = {};
+
+  /**
+   * Returns whether the given feature is in the cache.
+   *
+   * @param feature Feature identifier
+   * @returns true if the feature is in the cache, else false
+   */
+  public hasFeature(feature: string): boolean {
+    return Object.keys(this.cache).includes(feature);
+  }
+
+  /**
+   * Returns whether the given feature is enabled.
+   *
+   * @param feature Feature identifier
+   * @returns true if the feature is enabled, else false
+   */
+  public isFeatureEnabled(feature: string): boolean {
+    return !!this.cache[feature];
+  }
+
+  /**
+   * Set the status of a feature.
+   *
+   * @param feature Feature identifier
+   * @param enabled Feature status
+   */
+  public setFeature(feature: string, enabled: boolean): void {
+    this.cache[feature] = enabled;
+  }
+
+  /**
+   * Clear the cache.
+   */
+  public clear(): void {
+    const keys = Object.keys(this.cache);
+    for (const key of keys) {
+      delete this.cache[key];
+    }
+  }
+}
diff --git a/app/packages/feature-flags/src/utils/index.ts b/app/packages/feature-flags/src/utils/index.ts
@@ -0,0 +1 @@
+export * from "./cache";
diff --git a/app/packages/feature-flags/tsconfig.json b/app/packages/feature-flags/tsconfig.json
@@ -0,0 +1,22 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "noImplicitAny": true,
+        "allowJs": false,
+        "skipLibCheck": true,
+        "esModuleInterop": false,
+        "allowSyntheticDefaultImports": true,
+        "strict": false,
+        "forceConsistentCasingInFileNames": true,
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        "types": ["vite/client", "node"]
+    },
+    "include": ["src"]
+}
diff --git a/app/packages/feature-flags/vite.config.ts b/app/packages/feature-flags/vite.config.ts
@@ -0,0 +1,37 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { viteExternalsPlugin } from "vite-plugin-externals";
+
+const isPluginBuild = process.env.STANDALONE !== "true";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  mode: "development",
+  plugins: [
+    react(),
+    isPluginBuild
+      ? viteExternalsPlugin({
+          react: "React",
+          "react-dom": "ReactDOM",
+          recoil: "recoil",
+          "@fiftyone/state": "__fos__",
+        })
+      : undefined,
+  ],
+  build: {
+    minify: true,
+    lib: {
+      entry: path.resolve(__dirname, "./src/index.ts"),
+      name: "FeatureFlags",
+      fileName: (format) => `index.${format}.js`,
+      formats: ["umd"],
+    },
+  },
+  define: {
+    "process.env.NODE_ENV": '"development"',
+  },
+  optimizeDeps: {
+    exclude: ["react", "react-dom"],
+  },
+});
diff --git a/app/packages/feature-flags/vitest.config.ts b/app/packages/feature-flags/vitest.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+  },
+});
diff --git a/app/yarn.lock b/app/yarn.lock
diff --git a/fiftyone/internal/features/__init__.py b/fiftyone/internal/features/__init__.py
diff --git a/fiftyone/internal/features/environment_manager.py b/fiftyone/internal/features/environment_manager.py
diff --git a/fiftyone/internal/features/flags.py b/fiftyone/internal/features/flags.py
diff --git a/fiftyone/internal/features/manager.py b/fiftyone/internal/features/manager.py
diff --git a/fiftyone/internal/features/registry.py b/fiftyone/internal/features/registry.py
diff --git a/fiftyone/server/routes/__init__.py b/fiftyone/server/routes/__init__.py
diff --git a/fiftyone/server/routes/features.py b/fiftyone/server/routes/features.py

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +/**
 + * Enumeration of active feature flags.
 + */
 +export enum FeatureFlag {}
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from "./featureClient";`
	`2`	`+export * from "./flags";`