🪟 🔧 Clean up unused window properties (#5815)

.env

@@ -61,7 +61,6 @@ INTERNAL_API_HOST=airbyte-server:8001
 CONNECTOR_BUILDER_API_HOST=airbyte-connector-builder-server:80
 WEBAPP_URL=http://localhost:8000/
 # Although not present as an env var, required for webapp configuration.
-API_URL=/api/v1/
 CONNECTOR_BUILDER_API_URL=/connector-builder-api
 
 ### JOBS ###

airbyte-webapp/.env

@@ -4,5 +4,5 @@ REACT_APP_FULL_STORY_ORG=13AXQ4
 REACT_APP_INTERCOM_APP_ID=nj1oam7s
 REACT_APP_OSANO=16A0CTTE7vE8m1Qif/67beec9b-e563-4736-bdb4-4fe4adc39d48
 REACT_APP_CLOUD_PUBLIC_API_URL=/cloud_api
-REACT_APP_API_URL=http://localhost:8000/api
-REACT_APP_CONNECTOR_BUILDER_API_URL=http://localhost:8000/connector-builder-api
+REACT_APP_API_URL=/api
+REACT_APP_CONNECTOR_BUILDER_API_URL=/connector-builder-api

airbyte-webapp/.env.development

@@ -0,0 +1,3 @@
+# For local OSS development we will be running on localhost:3000, so we need to specify the port explicitly
+REACT_APP_API_URL=http://localhost:8000/api
+REACT_APP_CONNECTOR_BUILDER_API_URL=http://localhost:8000/connector-builder-api

airbyte-webapp/.gitignore

@@ -21,8 +21,6 @@ yarn-error.log*
 /.idea
 
 # Environment overwrites
-.env.development
-.env.production
 .env.local
 .env.development.local
 .env.test.local

airbyte-webapp/nginx/default.conf.template

@@ -25,9 +25,6 @@ server {
         sub_filter </head>
                 '<script data-script="config-overwrites">
                 window.TRACKING_STRATEGY = "$TRACKING_STRATEGY";
-                window.AIRBYTE_VERSION = "$AIRBYTE_VERSION";
-                window.API_URL = "$API_URL";
-                window.CONNECTOR_BUILDER_API_URL = "$CONNECTOR_BUILDER_API_URL";
                 </script></head>';
         sub_filter_once on;
     }

airbyte-webapp/package.json

@@ -11,9 +11,11 @@
     "prestart": "TS_NODE_TRANSPILE_ONLY=true pnpm run generate-client",
     "start": "vite",
     "prestart:cloud": "TS_NODE_TRANSPILE_ONLY=true pnpm run generate-client",
-    "start:cloud": "AB_ENV=${AB_ENV-frontend-dev} NODE_OPTIONS='-r ./scripts/environment.js' vite",
-    "prestart:cloud-preview": "TS_NODE_TRANSPILE_ONLY=true pnpm run generate-client && AB_ENV=${AB_ENV-frontend-dev} NODE_OPTIONS='-r ./scripts/environment.js' vite build",
+    "start:cloud": "CLOUD_ENV=${CLOUD_ENV-frontend-dev} NODE_OPTIONS='-r ./scripts/local-cloud-dev.js' vite",
+    "prestart:cloud-preview": "TS_NODE_TRANSPILE_ONLY=true pnpm run generate-client && CLOUD_ENV=${CLOUD_ENV-frontend-dev} NODE_OPTIONS='-r ./scripts/local-cloud-dev.js' vite build",
     "start:cloud-preview": "vite preview --port 3001",
+    "preoss-preview": "TS_NODE_TRANSPILE_ONLY=true pnpm run generate-client",
+    "oss-preview": "DOTENV_CONFIG_DEBUG=true DOTENV_CONFIG_PATH=./.env.development NODE_OPTIONS='-r dotenv/config' vite build && vite preview --port 3000",
     "prebuild": "pnpm run generate-client",
     "build": ". ./scripts/calculate-source-hash.sh && vite build",
     "postbuild": "./scripts/download-docs.sh",

airbyte-webapp/packages/vite-plugins/environment-variables.ts

@@ -16,13 +16,11 @@ export function environmentVariables(): Plugin {
   return {
     name: "airbyte/environment-variables",
     config: (_config, { mode }) => {
-      console.log(`🌍 Determining environment variables for env ${chalk.cyan(mode)}\n`);
-
       // Load any cloud-specific .env files
       let cloudEnvVariables = {};
       const cloudEnv = process.env.WEBAPP_BUILD_CLOUD_ENV;
       if (cloudEnv) {
-        console.log(`  - Getting env file for cloud environment ${chalk.green(cloudEnv)}\n`);
+        console.log(`☁️ Getting env file for cloud environment ${chalk.green(cloudEnv)}\n`);
         const envDirPath = path.join(ROOT_PATH, `../../cloud-webapp/envs/`, cloudEnv);
 
         // loadEnv will not throw if you give it a non-existent path, so we explicitly check here
@@ -32,14 +30,16 @@ export function environmentVariables(): Plugin {
           );
         }
 
-        cloudEnvVariables = loadEnv(mode, envDirPath, ["REACT_APP_"]);
+        cloudEnvVariables = { REACT_APP_CLOUD: true, ...loadEnv(mode, envDirPath, ["REACT_APP_"]) };
       }
 
       // Environment variables that should be available in the frontend
       const frontendEnvVariables = loadEnv(mode, ROOT_PATH, ["REACT_APP_"]);
 
       // Mirrors the backend version which is set during deployment in .github/actions/deploy/action.yaml
-      const version = JSON.stringify(`${process.env.VERSION}${process.env.WEBAPP_BUILD_CLOUD_ENV ? "-cloud" : ""}`);
+      const version = JSON.stringify(
+        `${process.env.VERSION || "dev"}${process.env.WEBAPP_BUILD_CLOUD_ENV ? "-cloud" : ""}`
+      );
 
       // Create an object of defines that will shim all required process.env variables.
       const processEnv = {

airbyte-webapp/scripts/environment.js → airbyte-webapp/scripts/local-cloud-dev.js

@@ -4,21 +4,23 @@ const path = require("path");
 const chalk = require("chalk");
 const dotenv = require("dotenv");
 
-if (!process.env.AB_ENV) {
+if (!process.env.CLOUD_ENV) {
   return;
 }
 
-const envFile = path.resolve(__dirname, "../../../cloud-webapp/development", `.env.${process.env.AB_ENV}`);
+const envFile = path.resolve(__dirname, "../../../cloud-webapp/development", `.env.${process.env.CLOUD_ENV}`);
 
 if (!fs.existsSync(envFile)) {
   console.error(
     `${chalk.bold.inverse.red(
       "This mode is for Airbyte employees only and doesn't work in the airbyte-platform repository."
     )}\n` +
-      `Could not find .env file for environment ${process.env.AB_ENV} (looking for ${chalk.bold.gray(envFile)}).\n` +
+      `Could not find .env file for environment ${process.env.CLOUD_ENV} (looking for ${chalk.bold.gray(envFile)}).\n` +
       `You can only run this command from the ${chalk.green("airbyte-platform-internal")} repository.\n`
   );
   process.exit(42);
 }
 
+process.env.REACT_APP_CLOUD = true;
+
 dotenv.config({ path: envFile });

airbyte-webapp/src/config/config.ts

@@ -2,31 +2,29 @@ import { AirbyteWebappConfig } from "./types";
 
 export const config: AirbyteWebappConfig = {
   segment: {
-    token: window.SEGMENT_TOKEN ?? process.env.REACT_APP_SEGMENT_TOKEN,
+    token: process.env.REACT_APP_SEGMENT_TOKEN,
     enabled: !window.TRACKING_STRATEGY || window.TRACKING_STRATEGY === "segment",
   },
-  fathomSiteId: window.FATHOM_SITE_ID ?? process.env.REACT_APP_FATHOM_SITE_ID,
-  apiUrl: window.API_URL ?? process.env.REACT_APP_API_URL ?? "/api",
-  cloudApiUrl: window.CLOUD_API_URL ?? process.env.REACT_APP_CLOUD_API_URL,
+  fathomSiteId: process.env.REACT_APP_FATHOM_SITE_ID,
+  apiUrl: process.env.REACT_APP_API_URL ?? "/api",
+  cloudApiUrl: process.env.REACT_APP_CLOUD_API_URL ?? "/cloud",
   connectorBuilderApiUrl: process.env.REACT_APP_CONNECTOR_BUILDER_API_URL ?? "/connector-builder-api",
-  version: window.AIRBYTE_VERSION ?? process.env.REACT_APP_VERSION ?? "dev",
-  integrationUrl: process.env.REACT_APP_INTEGRATION_DOCS_URLS ?? "/docs",
-  oauthRedirectUrl: `${window.location.protocol}//${window.location.host}`,
+  version: process.env.REACT_APP_VERSION,
   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,
+    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
+    authEmulatorHost: 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,
+  launchDarkly: process.env.REACT_APP_LAUNCHDARKLY_KEY,
   datadog: {
-    applicationId: window.REACT_APP_DATADOG_APPLICATION_ID ?? process.env.REACT_APP_DATADOG_APPLICATION_ID,
-    clientToken: window.REACT_APP_DATADOG_CLIENT_TOKEN ?? process.env.REACT_APP_DATADOG_CLIENT_TOKEN,
-    site: window.REACT_APP_DATADOG_SITE ?? process.env.REACT_APP_DATADOG_SITE,
-    service: window.REACT_APP_DATADOG_SERVICE ?? process.env.REACT_APP_DATADOG_SERVICE,
+    applicationId: process.env.REACT_APP_DATADOG_APPLICATION_ID,
+    clientToken: process.env.REACT_APP_DATADOG_CLIENT_TOKEN,
+    site: process.env.REACT_APP_DATADOG_SITE,
+    service: process.env.REACT_APP_DATADOG_SERVICE,
   },
 };
 

airbyte-webapp/src/config/types.ts

@@ -1,26 +1,6 @@
 declare global {
   interface Window {
     TRACKING_STRATEGY?: string;
-    AIRBYTE_VERSION?: string;
-    API_URL?: string;
-    CONNECTOR_BUILDER_API_URL?: string;
-    CLOUD?: string;
-    REACT_APP_DATADOG_APPLICATION_ID?: string;
-    REACT_APP_DATADOG_CLIENT_TOKEN?: string;
-    REACT_APP_DATADOG_SITE?: string;
-    REACT_APP_DATADOG_SERVICE?: string;
-    REACT_APP_WEBAPP_TAG?: string;
-    REACT_APP_INTERCOM_APP_ID?: string;
-    REACT_APP_INTEGRATION_DOCS_URLS?: string;
-    SEGMENT_TOKEN?: string;
-    LAUNCHDARKLY_KEY?: string;
-    FATHOM_SITE_ID?: string;
-    // 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;
   }
 }
 
@@ -29,10 +9,8 @@ export interface AirbyteWebappConfig {
   fathomSiteId?: string;
   apiUrl: string;
   connectorBuilderApiUrl: string;
-  version: string;
-  integrationUrl: string;
-  oauthRedirectUrl: string;
-  cloudApiUrl?: string;
+  version?: string;
+  cloudApiUrl: string;
   cloudPublicApiUrl?: string;
   firebase: {
     apiKey?: string;
@@ -48,6 +26,5 @@ export interface AirbyteWebappConfig {
     clientToken?: string;
     site?: string;
     service?: string;
-    tag?: string;
   };
 }

airbyte-webapp/src/core/api/apis.ts

@@ -1,4 +1,5 @@
 import { config, MissingConfigError } from "config";
+import { isCloudApp } from "utils/app";
 
 import { ApiCallOptions, fetchApiCall, RequestOptions } from "./apiCall";
 
@@ -20,7 +21,7 @@ export const connectorBuilderApiCall = async <T, U = unknown>(request: RequestOp
  * Execute a call against the Cloud API (cloud-server)
  */
 export const cloudApiCall = async <T, U = unknown>(request: RequestOptions<U>, options: ApiCallOptions) => {
-  if (!config.cloudApiUrl) {
+  if (!isCloudApp() || !config.cloudApiUrl) {
     throw new MissingConfigError(`Can't fetch ${request.url}, because cloudApiUrl config isn't set.`);
   }
   return fetchApiCall<T>(request, options, config.cloudApiUrl);

airbyte-webapp/src/hooks/services/useConnectorAuth.tsx

@@ -25,6 +25,8 @@ import { useQuery } from "../useQuery";
 
 let windowObjectReference: Window | null = null; // global variable
 
+const OAUTH_REDIRECT_URL = `${window.location.protocol}//${window.location.host}`;
+
 function openWindow(url: string): void {
   if (windowObjectReference == null || windowObjectReference.closed) {
     /* if the pointer to the window object in memory does not exist
@@ -59,7 +61,7 @@ export function useConnectorAuth(): {
   const { formatMessage } = useIntl();
   const { trackError } = useAppMonitoringService();
   const { workspaceId } = useCurrentWorkspace();
-  const { apiUrl, oauthRedirectUrl } = useConfig();
+  const { apiUrl } = useConfig();
   const notificationService = useNotificationService();
   const { connectorId } = useConnectorForm();
 
@@ -88,7 +90,7 @@ export function useConnectorAuth(): {
           const payload: SourceOauthConsentRequest = {
             workspaceId,
             sourceDefinitionId: ConnectorSpecification.id(connector),
-            redirectUrl: `${oauthRedirectUrl}/auth_flow`,
+            redirectUrl: `${OAUTH_REDIRECT_URL}/auth_flow`,
             oAuthInputConfiguration,
             sourceId: connectorId,
           };
@@ -99,7 +101,7 @@ export function useConnectorAuth(): {
         const payload: DestinationOauthConsentRequest = {
           workspaceId,
           destinationDefinitionId: ConnectorSpecification.id(connector),
-          redirectUrl: `${oauthRedirectUrl}/auth_flow`,
+          redirectUrl: `${OAUTH_REDIRECT_URL}/auth_flow`,
           oAuthInputConfiguration,
           destinationId: connectorId,
         };

airbyte-webapp/src/hooks/services/useDocumentation.ts

@@ -1,16 +1,17 @@
 import { UseQueryResult, useQuery } from "react-query";
 
-import { useConfig } from "config";
 import { fetchDocumentation } from "core/domain/Documentation";
 
 import { useExperiment } from "./Experiment";
 
 type UseDocumentationResult = UseQueryResult<string, Error>;
 
 export const documentationKeys = {
-  text: (integrationUrl: string) => ["document", integrationUrl] as const,
+  text: (docsUrl: string) => ["document", docsUrl] as const,
 };
 
+export const EMBEDDED_DOCS_PATH = "/docs";
+
 const DOCS_URL = /^https:\/\/docs\.airbyte\.(io|com)/;
 
 const AVAILABLE_INAPP_DOCS = [
@@ -23,11 +24,10 @@ const AVAILABLE_INAPP_DOCS = [
 ];
 
 export const useDocumentation = (documentationUrl: string): UseDocumentationResult => {
-  const { integrationUrl } = useConfig();
   const shortSetupGuides = useExperiment("connector.shortSetupGuides", false);
   const docName = documentationUrl.substring(documentationUrl.lastIndexOf("/") + 1);
   const showShortSetupGuide = shortSetupGuides && AVAILABLE_INAPP_DOCS.includes(docName);
-  const url = `${documentationUrl.replace(DOCS_URL, integrationUrl)}${showShortSetupGuide ? ".inapp.md" : ".md"}`;
+  const url = `${documentationUrl.replace(DOCS_URL, EMBEDDED_DOCS_PATH)}${showShortSetupGuide ? ".inapp.md" : ".md"}`;
 
   return useQuery(documentationKeys.text(documentationUrl), () => fetchDocumentation(url), {
     enabled: !!documentationUrl,

airbyte-webapp/src/utils/app.ts

@@ -1 +1 @@
-export const isCloudApp = () => (process.env.REACT_APP_CLOUD || window.CLOUD) === "true";
+export const isCloudApp = () => process.env.REACT_APP_CLOUD === "true";

airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanel.tsx

@@ -13,10 +13,9 @@ import { LoadingPage } from "components";
 import { Markdown } from "components/ui/Markdown";
 import { StepsMenu } from "components/ui/StepsMenu";
 
-import { useConfig } from "config";
 import { isSourceDefinition } from "core/domain/connector/source";
 import { useExperiment } from "hooks/services/Experiment";
-import { useDocumentation } from "hooks/services/useDocumentation";
+import { EMBEDDED_DOCS_PATH, useDocumentation } from "hooks/services/useDocumentation";
 import { isCloudApp } from "utils/app";
 import { links } from "utils/links";
 import { useDocumentationPanelContext } from "views/Connector/ConnectorDocumentationLayout/DocumentationPanelContext";
@@ -34,7 +33,6 @@ type TabsType = "setupGuide" | "schema" | "erd";
 
 export const DocumentationPanel: React.FC = () => {
   const { formatMessage } = useIntl();
-  const config = useConfig();
   const { setDocumentationPanelOpen, documentationUrl, selectedConnectorDefinition } = useDocumentationPanelContext();
 
   const sourceType =
@@ -54,7 +52,7 @@ export const DocumentationPanel: React.FC = () => {
       if (url.path?.startsWith("../../")) {
         if (element.tagName === "img") {
           // In images replace relative URLs with links to our bundled assets
-          return url.path.replace("../../", `${config.integrationUrl}/`);
+          return url.path.replace("../../", `${EMBEDDED_DOCS_PATH}/`);
         }
         // In links replace with a link to the external documentation instead
         // The external path is the markdown URL without the "../../" prefix and the .md extension
@@ -64,7 +62,7 @@ export const DocumentationPanel: React.FC = () => {
       return url.href;
     };
     return [[urls, sanitizeLinks], [rehypeSlug]];
-  }, [config.integrationUrl]);
+  }, []);
 
   const location = useLocation();
 

charts/airbyte-webapp/templates/deployment.yaml

@@ -57,21 +57,6 @@ spec:
         imagePullPolicy: "{{ .Values.image.pullPolicy }}"
         env:
         {{- if eq .Values.global.deploymentMode "oss"  }}
-        - name: AIRBYTE_VERSION
-          valueFrom:
-            configMapKeyRef:
-              name: {{ .Release.Name }}-airbyte-env
-              key: AIRBYTE_VERSION
-        - name: API_URL
-          valueFrom:
-            configMapKeyRef:
-              name: {{ .Release.Name }}-airbyte-env
-              key: API_URL
-        - name: CONNECTOR_BUILDER_API_URL
-          valueFrom:
-            configMapKeyRef:
-              name: {{ .Release.Name }}-airbyte-env
-              key: CONNECTOR_BUILDER_API_URL
         - name: TRACKING_STRATEGY
           valueFrom:
             configMapKeyRef: