🪟 🔧 Refactor webapp configuration provider

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/67beec9b-e563-4736-bdb4-4fe4adc39d48
+REACT_APP_CONNECTOR_BUILDER_API_URL=/connector-builder-api

airbyte-webapp/src/App.tsx

@@ -5,6 +5,7 @@ import { ThemeProvider } from "styled-components";
 
 import { ApiErrorBoundary } from "components/common/ApiErrorBoundary";
 
+import { newStaticConfig } from "config/config";
 import { ApiServices } from "core/ApiServices";
 import { I18nProvider } from "core/i18n";
 import { ServicesProvider } from "core/servicesProvider";
@@ -18,14 +19,7 @@ import { AnalyticsProvider } from "views/common/AnalyticsProvider";
 import { StoreProvider } from "views/common/StoreProvider";
 
 import LoadingPage from "./components/LoadingPage";
-import {
-  Config,
-  ConfigServiceProvider,
-  defaultConfig,
-  envConfigProvider,
-  ValueProvider,
-  windowConfigProvider,
-} from "./config";
+import { ConfigServiceProvider } from "./config";
 import en from "./locales/en.json";
 import { Routing } from "./pages/routes";
 import { WorkspaceServiceProvider } from "./services/workspaces/WorkspacesService";
@@ -35,8 +29,6 @@ const StyleProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children })
   <ThemeProvider theme={theme}>{children}</ThemeProvider>
 );
 
-const configProviders: ValueProvider<Config> = [envConfigProvider, windowConfigProvider];
-
 const Services: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <AnalyticsProvider>
     <AppMonitoringServiceProvider>
@@ -69,7 +61,7 @@ const App: React.FC = () => {
           <StoreProvider>
             <ServicesProvider>
               <Suspense fallback={<LoadingPage />}>
-                <ConfigServiceProvider defaultConfig={defaultConfig} providers={configProviders}>
+                <ConfigServiceProvider defaultConfig={newStaticConfig}>
                   <Router>
                     <Services>
                       <Routing />

airbyte-webapp/src/config/ConfigServiceProvider.tsx

@@ -4,15 +4,15 @@ import { useAsync } from "react-use";
 import { LoadingPage } from "components";
 
 import { applyProviders } from "./configProviders";
-import { Config, ValueProvider } from "./types";
+import { AirbyteWebappConfig, ValueProvider } from "./types";
 
-export interface ConfigContextData<T extends Config = Config> {
+export interface ConfigContextData<T extends AirbyteWebappConfig = AirbyteWebappConfig> {
   config: T;
 }
 
 export const ConfigContext = React.createContext<ConfigContextData | null>(null);
 
-export function useConfig<T extends Config>(): T {
+export function useConfig<T extends AirbyteWebappConfig>(): T {
   const configService = useContext(ConfigContext);
 
   if (configService === null) {
@@ -24,8 +24,8 @@ export function useConfig<T extends Config>(): T {
 
 const ConfigServiceInner: React.FC<
   React.PropsWithChildren<{
-    defaultConfig: Config;
-    providers?: ValueProvider<Config>;
+    defaultConfig: AirbyteWebappConfig;
+    providers?: ValueProvider<AirbyteWebappConfig>;
   }>
 > = ({ children, defaultConfig, providers }) => {
   const { loading, value } = useAsync(

airbyte-webapp/src/config/config.ts

@@ -0,0 +1,17 @@
+import { AirbyteWebappConfig } from "./types";
+
+export const newStaticConfig: AirbyteWebappConfig = {
+  segment: {
+    token: window.SEGMENT_TOKEN ?? process.env.REACT_APP_SEGMENT_TOKEN ?? "",
+    enabled: window.TRACKING_STRATEGY === "segment",
+  },
+  apiUrl:
+    window.API_URL ??
+    process.env.REACT_APP_API_URL ??
+    `${window.location.protocol}//${window.location.hostname}:8001/api`,
+  connectorBuilderApiUrl:
+    process.env.REACT_APP_CONNECTOR_BUILDER_API_URL ?? `${window.location.protocol}//${window.location.hostname}:8003`,
+  healthCheckInterval: 20000,
+  version: window.AIRBYTE_VERSION ?? "dev",
+  integrationUrl: process.env.REACT_APP_INTEGRATION_DOCS_URLS ?? "/docs",
+};

airbyte-webapp/src/config/defaultConfig.ts

@@ -1,6 +1,6 @@
-import { Config } from "./types";
+import { AirbyteWebappConfig } from "./types";
 
-const defaultConfig: Config = {
+const defaultConfig: AirbyteWebappConfig = {
   segment: { enabled: true, token: "" },
   healthCheckInterval: 20000,
   version: "dev",

airbyte-webapp/src/config/types.ts

@@ -13,21 +13,30 @@ declare global {
     REACT_APP_WEBAPP_TAG?: string;
     REACT_APP_INTERCOM_APP_ID?: string;
     REACT_APP_INTEGRATION_DOCS_URLS?: string;
-    SEGMENT_TOKEN?: string;
+    SEGMENT_TOKEN: string;
     LAUNCHDARKLY_KEY?: string;
     analytics: SegmentAnalytics.AnalyticsJS;
   }
 }
 
-export interface Config {
+export interface AirbyteWebappConfig {
   segment: { token: string; enabled: boolean };
   apiUrl: string;
   connectorBuilderApiUrl: string;
-  oauthRedirectUrl: string;
+  oauthRedirectUrl?: string;
   healthCheckInterval: number;
   version?: string;
   integrationUrl: string;
   launchDarkly?: string;
+  cloudApiUrl?: string;
+  firebase?: {
+    apiKey?: string;
+    authDomain?: string;
+    authEmulatorHost?: string;
+  };
+  intercom?: {
+    appId?: string;
+  };
 }
 
 export type DeepPartial<T> = {
@@ -39,4 +48,4 @@ export type Provider<T> = () => T;
 
 export type ValueProvider<T> = Array<ProviderAsync<DeepPartial<T>>>;
 
-export type ConfigProvider<T extends Config = Config> = ProviderAsync<DeepPartial<T>>;
+export type ConfigProvider<T extends AirbyteWebappConfig = AirbyteWebappConfig> = ProviderAsync<DeepPartial<T>>;

airbyte-webapp/src/core/request/apiOverride.ts

@@ -1,10 +1,10 @@
-import { Config } from "../../config";
+import { AirbyteWebappConfig } from "../../config";
 import { CommonRequestError } from "./CommonRequestError";
 import { RequestMiddleware } from "./RequestMiddleware";
 import { VersionError } from "./VersionError";
 
 export interface ApiOverrideRequestOptions {
-  config: Pick<Config, "apiUrl">;
+  config: Pick<AirbyteWebappConfig, "apiUrl">;
   middlewares: RequestMiddleware[];
   signal?: RequestInit["signal"];
 }

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

@@ -1,16 +1,16 @@
 import React from "react";
 
-import { Config, ConfigServiceProvider, ValueProvider, envConfigProvider, windowConfigProvider } from "config";
-
 import {
-  cloudEnvConfigProvider,
-  // fileConfigProvider,
-  defaultConfig,
-  cloudWindowConfigProvider,
-} from "./config";
+  AirbyteWebappConfig,
+  ConfigServiceProvider,
+  ValueProvider,
+  envConfigProvider,
+  windowConfigProvider,
+} from "config";
+
+import { cloudEnvConfigProvider, defaultConfig, cloudWindowConfigProvider } from "./config";
 
-const configProviders: ValueProvider<Config> = [
-  // fileConfigProvider,
+const configProviders: ValueProvider<AirbyteWebappConfig> = [
   cloudEnvConfigProvider,
   cloudWindowConfigProvider,
   envConfigProvider,

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

@@ -2,25 +2,6 @@ import type { CloudConfig } from "./types";
 
 import type { ConfigProvider } from "config/types";
 
-const CONFIG_PATH = "/config.json";
-
-const fileConfigProvider: ConfigProvider<CloudConfig> = async () => {
-  const response = await fetch(CONFIG_PATH);
-
-  if (response.ok) {
-    try {
-      const config = await response.json();
-
-      return config;
-    } catch (e) {
-      console.error("error occurred while parsing the json config");
-      return {};
-    }
-  }
-
-  return {};
-};
-
 const cloudWindowConfigProvider: ConfigProvider<CloudConfig> = async () => {
   return {
     intercom: {
@@ -52,4 +33,4 @@ const cloudEnvConfigProvider: ConfigProvider<CloudConfig> = async () => {
   };
 };
 
-export { fileConfigProvider, cloudWindowConfigProvider, cloudEnvConfigProvider };
+export { cloudWindowConfigProvider, cloudEnvConfigProvider };

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

@@ -26,3 +26,30 @@ export const defaultConfig: CloudConfig = {
 
 export * from "./configProviders";
 export * from "./types";
+
+// export const newStaticConfig: Config = {
+//   segment: {
+//     token: window.SEGMENT_TOKEN ?? process.env.REACT_APP_SEGMENT_TOKEN ?? "",
+//     enabled: window.TRACKING_STRATEGY === "segment",
+//   },
+//   apiUrl:
+//     window.API_URL ??
+//     process.env.REACT_APP_API_URL ??
+//     `${window.location.protocol}//${window.location.hostname}:8001/api`,
+//   connectorBuilderApiUrl: process.env.REACT_APP_CONNECTOR_BUILDER_API_URL ?? "",
+//   oauthRedirectUrl: "string",
+//   healthCheckInterval: 20000,
+//   version: window.AIRBYTE_VERSION ?? "dev",
+//   integrationUrl: process.env.REACT_APP_INTEGRATION_DOCS_URLS ?? "/docs",
+//   launchDarkly: "string",
+//   // Cloud-only values:
+//   cloudApiUrl: process.env.REACT_APP_CLOUD_API_URL ?? window.CLOUD_API_URL,
+//   firebase: {
+//     apiKey: process.env.REACT_APP_FIREBASE_API_KEY ?? window.FIREBASE_API_KEY,
+//     authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN ?? window.FIREBASE_AUTH_DOMAIN,
+//     authEmulatorHost: process.env.REACT_APP_FIREBASE_AUTH_EMULATOR_HOST ?? window.FIREBASE_AUTH_EMULATOR_HOST,
+//   },
+//   intercom: {
+//     appId: process.env.REACT_APP_INTERCOM_APP_ID,
+//   },
+// };

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

@@ -1,4 +1,4 @@
-import { Config } from "config";
+import { AirbyteWebappConfig } from "config";
 
 declare global {
   interface Window {
@@ -24,4 +24,4 @@ export interface CloudConfigExtension {
   };
 }
 
-export type CloudConfig = Config & CloudConfigExtension;
+export type CloudConfig = AirbyteWebappConfig & CloudConfigExtension;