🪟 🔧 Refactor webapp configuration provider

airbyte-webapp/src/App.tsx

@@ -5,6 +5,7 @@ import { ThemeProvider } from "styled-components";
 
 import { ApiErrorBoundary } from "components/common/ApiErrorBoundary";
 
+import { config } from "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 config={config}>
                   <Router>
                     <Services>
                       <Routing />

airbyte-webapp/src/config/ConfigServiceProvider.tsx

@@ -1,44 +1,27 @@
-import React, { useContext, useMemo } from "react";
-import { useAsync } from "react-use";
+import React, { useContext } from "react";
 
-import { LoadingPage } from "components";
+import { AirbyteWebappConfig } from "./types";
 
-import { applyProviders } from "./configProviders";
-import { Config, ValueProvider } from "./types";
-
-export interface ConfigContextData<T extends Config = Config> {
-  config: T;
+export interface ConfigContextData {
+  config: AirbyteWebappConfig;
 }
 
 export const ConfigContext = React.createContext<ConfigContextData | null>(null);
 
-export function useConfig<T extends Config>(): T {
+export function useConfig(): AirbyteWebappConfig {
   const configService = useContext(ConfigContext);
 
   if (configService === null) {
     throw new Error("useConfig must be used within a ConfigProvider");
   }
 
-  return useMemo(() => configService.config as unknown as T, [configService.config]);
+  return configService.config;
 }
 
-const ConfigServiceInner: React.FC<
+export const ConfigServiceProvider: React.FC<
   React.PropsWithChildren<{
-    defaultConfig: Config;
-    providers?: ValueProvider<Config>;
+    config: AirbyteWebappConfig;
   }>
-> = ({ children, defaultConfig, providers }) => {
-  const { loading, value } = useAsync(
-    async () => (providers ? applyProviders(defaultConfig, providers) : defaultConfig),
-    [providers]
-  );
-  const config: ConfigContextData | null = useMemo(() => (value ? { config: value } : null), [value]);
-
-  if (loading) {
-    return <LoadingPage />;
-  }
-
-  return <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>;
+> = ({ children, config }) => {
+  return <ConfigContext.Provider value={{ config }}>{children}</ConfigContext.Provider>;
 };
-
-export const ConfigServiceProvider = React.memo(ConfigServiceInner);

airbyte-webapp/src/config/config.ts

@@ -0,0 +1,36 @@
+import { AirbyteWebappConfig } from "./types";
+
+export const config: 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",
+  oauthRedirectUrl: `${window.location.protocol}//${window.location.host}`,
+  cloudApiUrl: window.CLOUD_API_URL ?? process.env.REACT_APP_CLOUD_API_URL,
+  cloudPublicApiUrl: process.env.REACT_APP_CLOUD_PUBLIC_API_URL,
+  firebase: {
+    apiKey: window.FIREBASE_API_KEY ?? process.env.REACT_APP_FIREBASE_API_KEY,
+    authDomain: window.FIREBASE_AUTH_DOMAIN ?? process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
+    authEmulatorHost: window.FIREBASE_AUTH_EMULATOR_HOST ?? process.env.REACT_APP_FIREBASE_AUTH_EMULATOR_HOST,
+  },
+  intercom: {
+    appId: process.env.REACT_APP_INTERCOM_APP_ID,
+  },
+  launchDarkly: window.LAUNCHDARKLY_KEY ?? process.env.REACT_APP_LAUNCHDARKLY_KEY,
+};
+
+export class MissingConfigError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "MissingConfigError";
+  }
+}

airbyte-webapp/src/config/index.ts

@@ -1,4 +1,3 @@
-export * from "./defaultConfig";
-export * from "./configProviders";
+export * from "./config";
 export * from "./ConfigServiceProvider";
 export * from "./types";

airbyte-webapp/src/config/types.ts

@@ -16,17 +16,33 @@ declare global {
     SEGMENT_TOKEN?: string;
     LAUNCHDARKLY_KEY?: string;
     analytics: SegmentAnalytics.AnalyticsJS;
+    // Cloud specific properties
+    FIREBASE_API_KEY?: string;
+    FIREBASE_AUTH_DOMAIN?: string;
+    FIREBASE_AUTH_EMULATOR_HOST?: string;
+    CLOUD_API_URL?: string;
+    CLOUD_PUBLIC_API_URL?: string;
   }
 }
 
-export interface Config {
-  segment: { token: string; enabled: boolean };
+export interface AirbyteWebappConfig {
+  segment: { token?: string; enabled: boolean };
   apiUrl: string;
   connectorBuilderApiUrl: string;
-  oauthRedirectUrl: string;
   healthCheckInterval: number;
-  version?: string;
+  version: string;
   integrationUrl: string;
+  oauthRedirectUrl: string;
+  cloudApiUrl?: string;
+  cloudPublicApiUrl?: string;
+  firebase: {
+    apiKey?: string;
+    authDomain?: string;
+    authEmulatorHost?: string;
+  };
+  intercom: {
+    appId?: string;
+  };
   launchDarkly?: string;
 }
 
@@ -39,4 +55,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/App.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from "styled-components";
 import { ApiErrorBoundary } from "components/common/ApiErrorBoundary";
 import LoadingPage from "components/LoadingPage";
 
+import { ConfigServiceProvider, config } from "config";
 import { I18nProvider } from "core/i18n";
 import { AppMonitoringServiceProvider } from "hooks/services/AppMonitoringService";
 import { ConfirmationModalService } from "hooks/services/ConfirmationModal";
@@ -22,7 +23,6 @@ import { AnalyticsProvider } from "views/common/AnalyticsProvider";
 import { StoreProvider } from "views/common/StoreProvider";
 
 import { AppServicesProvider } from "./services/AppServicesProvider";
-import { ConfigProvider } from "./services/ConfigProvider";
 import { IntercomProvider } from "./services/thirdParty/intercom/IntercomProvider";
 
 const messages = { ...en, ...cloudLocales };
@@ -64,13 +64,13 @@ const App: React.FC = () => {
         <I18nProvider locale="en" messages={messages}>
           <StoreProvider>
             <Suspense fallback={<LoadingPage />}>
-              <ConfigProvider>
+              <ConfigServiceProvider config={config}>
                 <Router>
                   <Services>
                     <Routing />
                   </Services>
                 </Router>
-              </ConfigProvider>
+              </ConfigServiceProvider>
             </Suspense>
           </StoreProvider>
         </I18nProvider>

airbyte-webapp/src/packages/cloud/components/experiments/FreeConnectorProgram/hooks/useFreeConnectorProgram.ts

@@ -1,7 +1,7 @@
 import { useQuery } from "react-query";
 
+import { MissingConfigError, useConfig } from "config";
 import { useExperiment } from "hooks/services/Experiment";
-import { useConfig } from "packages/cloud/services/config";
 import { useDefaultRequestMiddlewares } from "services/useDefaultRequestMiddlewares";
 import { useCurrentWorkspaceId } from "services/workspaces/WorkspacesService";
 
@@ -10,6 +10,9 @@ import { webBackendGetFreeConnectorProgramInfoForWorkspace } from "../lib/api";
 export const useFreeConnectorProgramInfo = () => {
   const workspaceId = useCurrentWorkspaceId();
   const { cloudApiUrl } = useConfig();
+  if (!cloudApiUrl) {
+    throw new MissingConfigError("Missing required configuration cloudApiUrl");
+  }
   const config = { apiUrl: cloudApiUrl };
   const middlewares = useDefaultRequestMiddlewares();
   const requestOptions = { config, middlewares };

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

@@ -2,14 +2,14 @@ import React, { useMemo } from "react";
 
 import { LoadingPage } from "components";
 
+import { MissingConfigError, useConfig } from "config";
 import { ApiServices } from "core/ApiServices";
 import { RequestMiddleware } from "core/request/RequestMiddleware";
 import { ServicesProvider, useGetService, useInjectServices } from "core/servicesProvider";
 import { RequestAuthMiddleware } from "packages/cloud/lib/auth/RequestAuthMiddleware";
 import { UserService } from "packages/cloud/lib/domain/users";
 import { useAuth } from "packages/firebaseReact";
 
-import { useConfig } from "./config";
 import { FirebaseSdkProvider } from "./FirebaseSdkProvider";
 
 /**
@@ -43,6 +43,10 @@ const ServiceOverrides: React.FC<React.PropsWithChildren<unknown>> = React.memo(
 
   const { cloudApiUrl } = useConfig();
 
+  if (!cloudApiUrl) {
+    throw new MissingConfigError("Missing required configuration cloudApiUrl");
+  }
+
   const inject = useMemo(
     () => ({
       UserService: new UserService(cloudApiUrl, middlewares),