diff --git a/airbyte-webapp/src/config/configProviders.ts b/airbyte-webapp/src/config/configProviders.ts index 188e6857deab..91fbc69764ab 100644 --- a/airbyte-webapp/src/config/configProviders.ts +++ b/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, - }, }; }; diff --git a/airbyte-webapp/src/config/defaultConfig.ts b/airbyte-webapp/src/config/defaultConfig.ts index cbf3087ff4cb..ce5bf12f1426 100644 --- a/airbyte-webapp/src/config/defaultConfig.ts +++ b/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: "", diff --git a/airbyte-webapp/src/config/types.ts b/airbyte-webapp/src/config/types.ts index 7e2182860382..59b370e35063 100644 --- a/airbyte-webapp/src/config/types.ts +++ b/airbyte-webapp/src/config/types.ts @@ -1,24 +1,20 @@ -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; } } @@ -26,7 +22,6 @@ declare global { export type Config = { ui: UiConfig; segment: { token: string; enabled: boolean }; - fullstory: Fullstory.SnippetOptions; apiUrl: string; oauthRedirectUrl: string; healthCheckInterval: number; diff --git a/airbyte-webapp/src/packages/cloud/App.tsx b/airbyte-webapp/src/packages/cloud/App.tsx index ce5621d1c6a7..489aa0cc3b7d 100644 --- a/airbyte-webapp/src/packages/cloud/App.tsx +++ b/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 }) => ( {children} @@ -65,7 +60,7 @@ const App: React.FC = () => { - + diff --git a/airbyte-webapp/src/packages/cloud/routes.tsx b/airbyte-webapp/src/packages/cloud/routes.tsx index 1495b31055fd..b55135afe2d5 100644 --- a/airbyte-webapp/src/packages/cloud/routes.tsx +++ b/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 ( diff --git a/airbyte-webapp/src/packages/cloud/services/ConfigProvider.tsx b/airbyte-webapp/src/packages/cloud/services/ConfigProvider.tsx index dce19d1414f5..ffe9957cfdd7 100644 --- a/airbyte-webapp/src/packages/cloud/services/ConfigProvider.tsx +++ b/airbyte-webapp/src/packages/cloud/services/ConfigProvider.tsx @@ -10,13 +10,15 @@ import { import { cloudEnvConfigProvider, - fileConfigProvider, + // fileConfigProvider, defaultConfig, + cloudWindowConfigProvider, } from "./config"; const configProviders: ValueProvider = [ - fileConfigProvider, + // fileConfigProvider, cloudEnvConfigProvider, + cloudWindowConfigProvider, windowConfigProvider, envConfigProvider, ]; diff --git a/airbyte-webapp/src/packages/cloud/services/IntercomProvider.tsx b/airbyte-webapp/src/packages/cloud/services/IntercomProvider.tsx new file mode 100644 index 000000000000..919bee68dea2 --- /dev/null +++ b/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 ( + + {children} + + ); +}; + +export { IntercomProvider }; diff --git a/airbyte-webapp/src/packages/cloud/services/config/configProviders.ts b/airbyte-webapp/src/packages/cloud/services/config/configProviders.ts index 7ec9a7b4f405..9329319933a7 100644 --- a/airbyte-webapp/src/packages/cloud/services/config/configProviders.ts +++ b/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,6 +21,22 @@ const fileConfigProvider: ConfigProvider = async () => { return {}; }; +const cloudWindowConfigProvider: ConfigProvider = 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 = async () => { return { cloudApiUrl: process.env.REACT_APP_CLOUD_API_URL, @@ -27,7 +44,20 @@ const cloudEnvConfigProvider: ConfigProvider = async () => { 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, +}; diff --git a/airbyte-webapp/src/packages/cloud/services/config/index.ts b/airbyte-webapp/src/packages/cloud/services/config/index.ts index 0dfec911a4ad..ac1e68b937da 100644 --- a/airbyte-webapp/src/packages/cloud/services/config/index.ts +++ b/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( diff --git a/airbyte-webapp/src/packages/cloud/services/config/types.ts b/airbyte-webapp/src/packages/cloud/services/config/types.ts index 360400588c20..756e1870886b 100644 --- a/airbyte-webapp/src/packages/cloud/services/config/types.ts +++ b/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; diff --git a/airbyte-webapp/src/hooks/useFullStory.tsx b/airbyte-webapp/src/packages/cloud/services/useFullStory.tsx similarity index 73% rename from airbyte-webapp/src/hooks/useFullStory.tsx rename to airbyte-webapp/src/packages/cloud/services/useFullStory.tsx index 004822cee9bc..dd00b0402486 100644 --- a/airbyte-webapp/src/hooks/useFullStory.tsx +++ b/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; diff --git a/airbyte-webapp/src/packages/cloud/services/useIntercom.ts b/airbyte-webapp/src/packages/cloud/services/useIntercom.ts index 19ce23b9d226..0c93efc39ec4 100644 --- a/airbyte-webapp/src/packages/cloud/services/useIntercom.ts +++ b/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(); diff --git a/airbyte-webapp/src/views/common/AnalyticsInitializer.tsx b/airbyte-webapp/src/views/common/AnalyticsInitializer.tsx index 29856abba75a..c54a4f137401 100644 --- a/airbyte-webapp/src/views/common/AnalyticsInitializer.tsx +++ b/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; }