do not read process.env vars indirectly

.github/cilium-values.yaml

@@ -25,12 +25,6 @@ hubble:
           value: /var/log/hubble-ui-testing/log_files
         - name: CORS_ENABLED
           value: 'true'
-    frontend:
-      extraEnv:
-        - name: E2E_TEST_MODE
-          value: 'true'
-        - name: NODE_ENV
-          value: 'e2e'
     ingress:
       enabled: true
       className: nginx

src/environment/index.ts

@@ -4,18 +4,14 @@ export class Environment {
   }
 
   public get isTesting(): boolean {
-    const nenv = this.var('NODE_ENV');
-    const e2eTestMode = this.var('E2E_TEST_MODE') === 'true';
+    const nenv = process.env.NODE_ENV;
+    const e2eTestMode = process.env.E2E_TEST_MODE === 'true';
 
     return nenv?.startsWith('test') || nenv?.startsWith('e2e') || e2eTestMode;
   }
 
   public get isDev(): boolean {
-    const nenv = this.var('NODE_ENV') || 'dev';
+    const nenv = process.env.NODE_ENV || 'dev';
     return nenv.startsWith('dev');
   }
-
-  public var(name: string): string | undefined {
-    return process.env[name];
-  }
 }

src/index.tsx

@@ -24,11 +24,13 @@ const buildAPIUrl = (env: Environment): string => {
     return `${document.location.origin}/api/`;
   }
 
-  const schemaRaw = env.var('API_SCHEMA') || document.location.protocol || 'http';
+  // NOTE: Do not edit those `process.env.VAR_NAME` variable accesses
+  // because they only work if you have such a direct call for them.
+  const schemaRaw = process.env.API_SCHEMA || document.location.protocol || 'http';
   const schema = schemaRaw.endsWith(':') ? schemaRaw : `${schemaRaw}:`;
-  const hostname = env.var('API_HOST') || document.location.hostname;
-  const port = env.var('API_PORT') || document.location.port;
-  const path = env.var('API_PATH') || 'api';
+  const hostname = process.env.API_HOST || document.location.hostname;
+  const port = process.env.API_PORT || document.location.port;
+  const path = process.env.API_PATH || 'api';
   const slashedPath = path?.startsWith('/') ? path : `/${path}`;
 
   return `${schema}//${hostname}${port ? `:${port}` : ''}${slashedPath}`;
@@ -69,13 +71,18 @@ const run = async () => {
   };
 
   const app = new Application(env, router, store, dataLayer, uiLayer, renderFn);
+
+  router.onInitialized(() => {
+    e2e.attributes.setEnabled(router.mockModeParam != null);
+  });
+
   app
     .onBeforeMount(_app => {
-      const env = app.environment;
-      e2e.attributes.setEnabled(env.isDev || env.isTesting);
       uiLayer.onBeforeMount();
     })
-    .onMounted(app => app.uiLayer.onMounted())
+    .onMounted(app => {
+      app.uiLayer.onMounted();
+    })
     .mount('#app');
 };
 

src/router/router.ts

@@ -74,6 +74,10 @@ export class Router extends EventEmitter<Handlers> {
     this.setupEventHandlers();
   }
 
+  public get mockModeParam() {
+    return this.searchParams.get('e2e');
+  }
+
   public get isInMemory() {
     return this.kind === RouterKind.Memory;
   }

webpack.config.js

@@ -9,8 +9,9 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 /* eslint-enable @typescript-eslint/no-var-requires */
 
-const isProduction = process.env.NODE_ENV === 'production';
-const isDevelopment = process.env.NODE_ENV === 'development';
+const nodeEnv = process.env.NODE_ENV || 'development';
+const isProduction = nodeEnv.startsWith('prod');
+const isDevelopment = nodeEnv.startsWith('dev');
 
 const stylesLoaders = ({ enableSass, enableModules }) => {
   const sassOpts = {