🪟 🔧 Add PostHog A/B Testing tool

Posthog is an analytics tool that will allow us to run A/B tests in
product in a simple manner.

The advantage vs LaunchDarkly is that they provide features for
experimenting, setting goals, create funnels, etc. Thanks to their UI, we can define experiments and
monitor which variant is the winner. Posthog will do all the maths for
us.
More info: https://posthog.com/product/experimentation-suite

This addition needs to be approved by @timroes after a security audit
has been performed.

This PR sets all the code needed in case the audit is succesful

airbyte-webapp/.env

@@ -3,3 +3,4 @@ REACT_APP_FULL_STORY_ORG=13AXQ4
 REACT_APP_SENTRY_DSN=
 REACT_APP_INTERCOM_APP_ID=nj1oam7s
 REACT_APP_OSANO=16A0CTTE7vE8m1Qif/cff33c53-d6e6-45af-8a66-76be4c5ac568
+REACT_APP_POSTHOG=phc_6nrn7nfNbiHszdF5zntXhNwgshvD7s3lvIxWAmhQvtg

airbyte-webapp/package.json

@@ -44,6 +44,7 @@
     "launchdarkly-js-client-sdk": "^2.22.1",
     "lodash": "^4.17.21",
     "mdast": "^3.0.0",
+    "posthog-js": "^1.32.0",
     "query-string": "^6.13.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

airbyte-webapp/src/config/types.ts

@@ -25,6 +25,7 @@ export interface Config {
   version?: string;
   integrationUrl: string;
   launchDarkly?: string;
+  postHog?: string;
 }
 
 export type DeepPartial<T> = {

airbyte-webapp/src/hooks/services/PostHogExperiment/PostHogExperimentService.tsx

@@ -0,0 +1,38 @@
+import posthog, { PostHog } from "posthog-js";
+import { useContext, useEffect } from "react";
+import React from "react";
+
+import { useConfig } from "config";
+
+interface Context {
+  posthog: PostHog;
+  featureFlagsVariants?: Record<string, boolean | string>;
+}
+const postHogServiceContext = React.createContext<Context | null>(null);
+const PostHogServiceProvider = postHogServiceContext.Provider;
+
+export const PostHogProvider = ({ children }: { children: React.ReactNode }) => {
+  const { postHog: posthogKey } = useConfig();
+
+  useEffect(() => {
+    if (posthogKey) {
+      posthog.init(posthogKey, { api_host: "https://app.posthog.com" });
+    }
+  }, []);
+
+  if (posthogKey) {
+    return <PostHogServiceProvider value={{ posthog }}>{children}</PostHogServiceProvider>;
+  }
+
+  return <>{children}</>;
+};
+
+export const usePostHog = () => {
+  const posthogContext = useContext(postHogServiceContext);
+
+  if (!posthogContext) {
+    throw new Error("posthogContext must be used within a PostHogProvider.");
+  }
+
+  return posthogContext;
+};

airbyte-webapp/src/packages/cloud/cloudRoutes.tsx

@@ -9,6 +9,7 @@ import { useAnalyticsIdentifyUser, useAnalyticsRegisterValues } from "hooks/serv
 import { FeatureItem, FeatureSet, useFeatureService } from "hooks/services/Feature";
 import { useApiHealthPoll } from "hooks/services/Health";
 import { OnboardingServiceProvider } from "hooks/services/Onboarding";
+import { PostHogProvider } from "hooks/services/PostHogExperiment/PostHogExperimentService";
 import { useQuery } from "hooks/useQuery";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
 import { useIntercom } from "packages/cloud/services/thirdParty/intercom/useIntercom";
@@ -163,16 +164,18 @@ export const Routing: React.FC = () => {
   return (
     <WorkspaceServiceProvider>
       <LDExperimentServiceProvider>
-        <Suspense fallback={<LoadingPage />}>
-          {/* Allow email verification no matter whether the user is logged in or not */}
-          <Routes>
-            <Route path={CloudRoutes.FirebaseAction} element={<VerifyEmailAction />} />
-          </Routes>
-          {/* Show the login screen if the user is not logged in */}
-          {!user && <Auth />}
-          {/* Allow all regular routes if the user is logged in */}
-          {user && <MainViewRoutes />}
-        </Suspense>
+        <PostHogProvider>
+          <Suspense fallback={<LoadingPage />}>
+            {/* Allow email verification no matter whether the user is logged in or not */}
+            <Routes>
+              <Route path={CloudRoutes.FirebaseAction} element={<VerifyEmailAction />} />
+            </Routes>
+            {/* Show the login screen if the user is not logged in */}
+            {!user && <Auth />}
+            {/* Allow all regular routes if the user is logged in */}
+            {user && <MainViewRoutes />}
+          </Suspense>
+        </PostHogProvider>
       </LDExperimentServiceProvider>
     </WorkspaceServiceProvider>
   );

airbyte-webapp/src/packages/cloud/services/config/configProviders.ts

@@ -48,6 +48,7 @@ const cloudEnvConfigProvider: ConfigProvider<CloudConfig> = async () => {
       appId: process.env.REACT_APP_INTERCOM_APP_ID,
     },
     launchDarkly: process.env.REACT_APP_LAUNCHDARKLY_KEY,
+    postHog: process.env.REACT_APP_POSTHOG,
   };
 };