Enable fullstory only for cloud (#7298)

airbyte-webapp/src/config/configProviders.ts

@@ -4,7 +4,6 @@ import { isDefined } from "utils/common";
 
 const windowConfigProvider: ConfigProvider = async () => {
   return {
-    fullstory: { devMode: window.FULLSTORY === "disabled" },
     segment: {
       enabled: isDefined(window.TRACKING_STRATEGY)
         ? window.TRACKING_STRATEGY === "segment"
@@ -14,11 +13,7 @@ const windowConfigProvider: ConfigProvider = async () => {
     version: window.AIRBYTE_VERSION,
     isDemo: window.IS_DEMO === "true",
     // cloud only start
-    firebase: {
-      apiKey: window.FIREBASE_API_KEY,
-      authDomain: window.FIREBASE_AUTH_DOMAIN,
-    },
-    cloudApiUrl: window.CLOUD_API_URL,
+    // TODO: remove when infra team supports proper webapp building
     cloud: window.CLOUD === "true",
     // cloud only end
   };
@@ -30,9 +25,6 @@ const envConfigProvider: ConfigProvider = async () => {
     segment: {
       token: process.env.REACT_APP_SEGMENT_TOKEN,
     },
-    fullstory: {
-      orgId: process.env.REACT_APP_FULL_STORY_ORG,
-    },
   };
 };
 

airbyte-webapp/src/config/defaultConfig.ts

@@ -3,9 +3,6 @@ import { uiConfig } from "./uiConfig";
 
 const defaultConfig: Config = {
   ui: uiConfig,
-  fullstory: {
-    orgId: "",
-  },
   segment: { enabled: true, token: "" },
   healthCheckInterval: 10000,
   version: "",

airbyte-webapp/src/config/types.ts

@@ -1,32 +1,27 @@
-import * as Fullstory from "@fullstory/browser";
-
 import { SegmentAnalytics } from "core/analytics/types";
 import { UiConfig } from "./uiConfig";
 
 declare global {
   interface Window {
     TRACKING_STRATEGY?: string;
-    FULLSTORY?: string;
     AIRBYTE_VERSION?: string;
     API_URL?: string;
     IS_DEMO?: string;
     CLOUD?: string;
-    FIREBASE_API_KEY?: string;
-    FIREBASE_AUTH_DOMAIN?: string;
-    CLOUD_API_URL?: string;
     REACT_APP_SENTRY_DSN?: string;
     REACT_APP_WEBAPP_TAG?: string;
     REACT_APP_INTERCOM_APP_ID?: string;
 
     analytics: SegmentAnalytics;
+
+    // API_URL to hack rest-hooks resources
     _API_URL: string;
   }
 }
 
 export type Config = {
   ui: UiConfig;
   segment: { token: string; enabled: boolean };
-  fullstory: Fullstory.SnippetOptions;
   apiUrl: string;
   oauthRedirectUrl: string;
   healthCheckInterval: number;

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

@@ -3,7 +3,6 @@ import { ThemeProvider } from "styled-components";
 import { IntlProvider } from "react-intl";
 import { CacheProvider } from "rest-hooks";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { IntercomProvider } from "react-use-intercom";
 
 import en from "locales/en.json";
 import cloudLocales from "packages/cloud/locales/en.json";
@@ -18,14 +17,10 @@ import { AnalyticsInitializer } from "views/common/AnalyticsInitializer";
 import { Feature, FeatureItem, FeatureService } from "hooks/services/Feature";
 import { AuthenticationProvider } from "packages/cloud/services/auth/AuthService";
 import { AppServicesProvider } from "./services/AppServicesProvider";
+import { IntercomProvider } from "./services/IntercomProvider";
 
 const messages = Object.assign({}, en, cloudLocales);
 
-const INTERCOM_APP_ID =
-  process.env.REACT_APP_INTERCOM_APP_ID ||
-  window.REACT_APP_INTERCOM_APP_ID ||
-  "";
-
 const I18NProvider: React.FC = ({ children }) => (
   <IntlProvider locale="en" messages={messages}>
     {children}
@@ -65,7 +60,7 @@ const App: React.FC = () => {
                   <FeatureService features={Features}>
                     <AppServicesProvider>
                       <AuthenticationProvider>
-                        <IntercomProvider appId={INTERCOM_APP_ID}>
+                        <IntercomProvider>
                           <AnalyticsInitializer>
                             <Routing />
                           </AnalyticsInitializer>

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

@@ -45,6 +45,8 @@ import { WithPageAnalytics } from "pages/withPageAnalytics";
 import useWorkspace from "../../hooks/services/useWorkspace";
 import { CompleteOauthRequest } from "../../pages/CompleteOauthRequest";
 import { OnboardingServiceProvider } from "hooks/services/Onboarding";
+import { useConfig } from "./services/config";
+import useFullStory from "./services/useFullStory";
 
 export enum Routes {
   Preferences = "/preferences",
@@ -225,6 +227,8 @@ const FirebaseActionRoute: React.FC = () => {
 
 export const Routing: React.FC = () => {
   const { user, inited, emailVerified } = useAuthService();
+  const config = useConfig();
+  useFullStory(config.fullstory, config.fullstory.enabled);
 
   return (
     <Router>

airbyte-webapp/src/packages/cloud/services/ConfigProvider.tsx

@@ -10,13 +10,15 @@ import {
 
 import {
   cloudEnvConfigProvider,
-  fileConfigProvider,
+  // fileConfigProvider,
   defaultConfig,
+  cloudWindowConfigProvider,
 } from "./config";
 
 const configProviders: ValueProvider<Config> = [
-  fileConfigProvider,
+  // fileConfigProvider,
   cloudEnvConfigProvider,
+  cloudWindowConfigProvider,
   windowConfigProvider,
   envConfigProvider,
 ];

airbyte-webapp/src/packages/cloud/services/IntercomProvider.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { IntercomProvider as IntercomProviderCore } from "react-use-intercom";
+import { useConfig } from "packages/cloud/services/config";
+
+const IntercomProvider: React.FC = ({ children }) => {
+  const config = useConfig();
+
+  return (
+    <IntercomProviderCore appId={config.intercom.appId}>
+      {children}
+    </IntercomProviderCore>
+  );
+};
+
+export { IntercomProvider };

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

@@ -1,5 +1,6 @@
 import { ConfigProvider } from "config/types";
 import { CloudConfig } from "./types";
+import { isDefined } from "../../../../utils/common";
 
 const CONFIG_PATH = "/config.json";
 
@@ -20,14 +21,43 @@ const fileConfigProvider: ConfigProvider<CloudConfig> = async () => {
   return {};
 };
 
+const cloudWindowConfigProvider: ConfigProvider<CloudConfig> = async () => {
+  return {
+    fullstory: {
+      enabled: isDefined(window.FULLSTORY) && window.FULLSTORY !== "disabled",
+    },
+    intercom: {
+      appId: window.REACT_APP_INTERCOM_APP_ID,
+    },
+    firebase: {
+      apiKey: window.FIREBASE_API_KEY,
+      authDomain: window.FIREBASE_AUTH_DOMAIN,
+    },
+    cloudApiUrl: window.CLOUD_API_URL,
+  };
+};
+
 const cloudEnvConfigProvider: ConfigProvider<CloudConfig> = async () => {
   return {
     cloudApiUrl: process.env.REACT_APP_CLOUD_API_URL,
     firebase: {
       apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
       authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
     },
+    fullstory: {
+      orgId: process.env.REACT_APP_FULL_STORY_ORG,
+      enabled:
+        isDefined(process.env.REACT_APP_FULLSTORY) &&
+        process.env.REACT_APP_FULLSTORY !== "disabled",
+    },
+    intercom: {
+      appId: process.env.REACT_APP_INTERCOM_APP_ID,
+    },
   };
 };
 
-export { fileConfigProvider, cloudEnvConfigProvider };
+export {
+  fileConfigProvider,
+  cloudWindowConfigProvider,
+  cloudEnvConfigProvider,
+};

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

@@ -14,6 +14,13 @@ const cloudConfigExtensionDefault: CloudConfigExtension = {
     apiKey: "",
     authDomain: "",
   },
+  fullstory: {
+    orgId: "",
+    enabled: true,
+  },
+  intercom: {
+    appId: "",
+  },
 };
 
 export const defaultConfig: CloudConfig = Object.assign(

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

@@ -1,11 +1,26 @@
 import { Config } from "config";
+import * as Fullstory from "@fullstory/browser";
+
+declare global {
+  interface Window {
+    // Cloud specific params that should be moved to cloud repo
+    FULLSTORY?: string;
+    FIREBASE_API_KEY?: string;
+    FIREBASE_AUTH_DOMAIN?: string;
+    CLOUD_API_URL?: string;
+  }
+}
 
 export type CloudConfigExtension = {
   cloudApiUrl: string;
+  fullstory: Fullstory.SnippetOptions & { enabled: boolean };
   firebase: {
     apiKey: string;
     authDomain: string;
   };
+  intercom: {
+    appId: string;
+  };
 };
 
 export type CloudConfig = Config & CloudConfigExtension;

airbyte-webapp/src/hooks/useFullStory.tsx → airbyte-webapp/src/packages/cloud/services/useFullStory.tsx

@@ -3,9 +3,12 @@ import * as FullStory from "@fullstory/browser";
 
 let inited = false;
 
-const useFullStory = (config: FullStory.SnippetOptions): boolean => {
+const useFullStory = (
+  config: FullStory.SnippetOptions,
+  enabled: boolean
+): boolean => {
   useEffect(() => {
-    if (!inited) {
+    if (!inited && enabled) {
       try {
         FullStory.init(config);
         inited = true;

airbyte-webapp/src/packages/cloud/services/useIntercom.ts

@@ -3,7 +3,7 @@ import { useIntercom as useIntercomProvider } from "react-use-intercom";
 
 import { useCurrentUser } from "./auth/AuthService";
 
-export const useIntercom = () => {
+export const useIntercom = (): void => {
   const user = useCurrentUser();
   const { boot, shutdown } = useIntercomProvider();
 

airbyte-webapp/src/views/common/AnalyticsInitializer.tsx

@@ -1,8 +1,6 @@
 import React, { useEffect } from "react";
-import * as FullStory from "@fullstory/browser";
 
 import { useConfig } from "config";
-import useFullStory from "hooks/useFullStory";
 import AnalyticsServiceProvider, { useAnalytics } from "hooks/useAnalytics";
 import useSegment from "hooks/useSegment";
 import { useGetService } from "core/servicesProvider";
@@ -22,14 +20,6 @@ function WithAnalytics({
     analyticsService.identify(customerId);
   }, [analyticsService, customerId]);
 
-  // fullstory section
-  const initializedFullstory = useFullStory(config.fullstory);
-  useEffect(() => {
-    if (initializedFullstory) {
-      FullStory.identify(customerId);
-    }
-  }, [initializedFullstory, customerId]);
-
   return null;
 }