🪟 🔧 Allow overwriting experiments and features during development

airbyte-webapp/.gitignore

@@ -24,8 +24,12 @@ yarn-error.log*
 /.idea
 
 .npmrc
+
+# Environment overwrites
 .env.development
 .env.production
+.experiments.dev
+.features.dev
 
 storybook-static/
 

airbyte-webapp/package.json

@@ -8,9 +8,9 @@
   "scripts": {
     "prepare": "cd .. && husky install airbyte-webapp/.husky",
     "prestart": "npm run generate-client",
-    "start": "craco start",
+    "start": "node -r ./scripts/dev-overwrites.js ./node_modules/.bin/craco start",
     "prestart:cloud": "npm run generate-client",
-    "start:cloud": "AB_ENV=${AB_ENV-frontend-dev} node -r ./scripts/environment.js ./node_modules/.bin/craco start",
+    "start:cloud": "AB_ENV=${AB_ENV-frontend-dev} node -r ./scripts/environment.js -r ./scripts/dev-overwrites.js ./node_modules/.bin/craco start",
     "prebuild": "npm run generate-client",
     "build": "BUILD_PATH='./build/app' craco build",
     "pretest": "npm run generate-client",

airbyte-webapp/scripts/dev-overwrites.js

@@ -0,0 +1,46 @@
+const fs = require("fs");
+const path = require("path");
+
+const dotenv = require("dotenv");
+
+function parseFromString(value) {
+  if (value === "true") {
+    return true;
+  }
+  if (value === "false") {
+    return false;
+  }
+  if (value.startsWith("[") || value.startsWith("{")) {
+    return JSON.parse(value);
+  }
+
+  return value;
+}
+
+const EXPERIMENTS_FILE = path.resolve(__dirname, "../.experiments.dev");
+
+if (fs.existsSync(EXPERIMENTS_FILE)) {
+  console.log("\nOverwriting experiments from .experiments.dev ...");
+  const rawOverwrites = dotenv.parse(fs.readFileSync(EXPERIMENTS_FILE));
+  const overwrites = Object.fromEntries(
+    Object.entries(rawOverwrites).map(([key, value]) => {
+      return [key, parseFromString(value)];
+    })
+  );
+
+  if (Object.keys(overwrites).length) {
+    console.log(`Overwriting experiments with the following values:\n\n${JSON.stringify(overwrites, null, 2)}`);
+    process.env.REACT_APP_EXPERIMENT_OVERWRITES = JSON.stringify(overwrites);
+  }
+}
+
+const FEATURES_FILE = path.resolve(__dirname, "../.features.dev");
+
+if (fs.existsSync(FEATURES_FILE)) {
+  console.log("\nOverwriting feature states from .features.dev ...");
+  const overwrites = dotenv.parse(fs.readFileSync(FEATURES_FILE));
+  Object.entries(overwrites).forEach(([key, value]) => {
+    console.log(`Overwrite feature ${key} with value ${value}`);
+    process.env[`REACT_APP_FEATURE_${key}`] = value;
+  });
+}

airbyte-webapp/src/hooks/services/Experiment/ExperimentService.tsx

@@ -4,6 +4,10 @@ import { createContext, useContext, useMemo } from "react";
 import { useObservable } from "react-use";
 import { EMPTY, Observable } from "rxjs";
 
+const devOverwrites = process.env.REACT_APP_EXPERIMENT_OVERWRITES
+  ? (JSON.parse(process.env.REACT_APP_EXPERIMENT_OVERWRITES) as Record<string, unknown>)
+  : {};
+
 const experimentContext = createContext<ExperimentService | null>(null);
 
 /**
@@ -15,7 +19,7 @@ export interface ExperimentService {
   getExperimentChanges$<K extends keyof Experiments>(key: K): Observable<Experiments[K]>;
 }
 
-export function useExperiment<K extends keyof Experiments>(key: K, defaultValue: Experiments[K]): Experiments[K] {
+function useExperimentHook<K extends keyof Experiments>(key: K, defaultValue: Experiments[K]): Experiments[K] {
   const experimentService = useContext(experimentContext);
   // Get the observable for the changes of the experiment or an empty (never emitting) observable in case the
   // experiment service doesn't exist (e.g. we're running in OSS or it failed to initialize)
@@ -25,4 +29,17 @@ export function useExperiment<K extends keyof Experiments>(key: K, defaultValue:
   return useObservable(onChanges$, experimentService?.getExperiment(key, defaultValue) ?? defaultValue);
 }
 
+function useExperimentWithOverwrites<K extends keyof Experiments>(
+  key: K,
+  defaultValue: Experiments[K]
+): Experiments[K] {
+  // Load the regular experiments value via the prod hook
+  const value = useExperimentHook(key, defaultValue);
+  // Use the overwrite value if it's available, otherwise the proper value
+  return key in devOverwrites ? (devOverwrites[key] as Experiments[K]) : value;
+}
+
+// Allow overwriting values via the .experiments.dev file (and thus the REACT_APP_EXPERIMENT_OVERWRITES env variable) only during development
+export const useExperiment = process.env.NODE_ENV === "development" ? useExperimentWithOverwrites : useExperimentHook;
+
 export const ExperimentProvider = experimentContext.Provider;