Pass env and platform from process API over IPC to renderer

15 files changed, 24 insertions, 15 deletions

diff --git a/gui/src/main/index.ts b/gui/src/main/index.ts
index 00a93bf3c0..551571ad49 100644
--- a/gui/src/main/index.ts
+++ b/gui/src/main/index.ts
@@ -1009,6 +1009,8 @@ class ApplicationMain {
       guiSettings: this.guiSettings.state,
       wireguardPublicKey: this.wireguardPublicKey,
       translations: this.translations,
+      platform: process.platform,
+      runningInDevelopment: process.env.NODE_ENV === 'development',
     }));
 
     IpcMainEventChannel.settings.handleSetAllowLan((allowLan: boolean) =>
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 6d37e63279..9ff1459322 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -175,6 +175,9 @@ export default class AppRenderer {
     // Request the initial state from the main process
     const initialState = IpcRendererEventChannel.state.get();
 
+    window.platform = initialState.platform;
+    window.runningInDevelopment = initialState.runningInDevelopment;
+
     this.setLocale(initialState.locale);
     loadTranslations(
       messages,
@@ -582,7 +585,7 @@ export default class AppRenderer {
   }
 
   private async autoConnect() {
-    if (process.env.NODE_ENV === 'development') {
+    if (window.runningInDevelopment) {
       log.info('Skip autoconnect in development');
     } else if (this.autoConnected) {
       log.info('Skip autoconnect because it was done before');
diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 6633e35746..7c97f0d844 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -429,7 +429,7 @@ export default class AdvancedSettings extends React.Component<IProps, IState> {
                     <Cell.Icon height={12} width={7} source="icon-chevron" />
                   </Cell.CellButton>
 
-                  {process.platform === 'linux' && (
+                  {window.platform === 'linux' && (
                     <Cell.CellButton onClick={this.props.onViewLinuxSplitTunneling}>
                       <Cell.Label>
                         {messages.pgettext('advanced-settings-view', 'Split tunneling')}
diff --git a/gui/src/renderer/components/CustomScrollbars.tsx b/gui/src/renderer/components/CustomScrollbars.tsx
index bc56ffcf3c..87c5b82dce 100644
--- a/gui/src/renderer/components/CustomScrollbars.tsx
+++ b/gui/src/renderer/components/CustomScrollbars.tsx
@@ -47,7 +47,7 @@ interface IScrollbarUpdateContext {
 export default class CustomScrollbars extends React.Component<IProps, IState> {
   public static defaultProps: IProps = {
     // auto-hide on macOS by default
-    autoHide: process.platform === 'darwin',
+    autoHide: window.platform === 'darwin',
     trackPadding: { x: 2, y: 2 },
   };
 
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index 67b9622b21..bdf7d51924 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -28,7 +28,7 @@ interface IHeaderBarContainerProps {
 
 const HeaderBarContainer = styled.header({}, (props: IHeaderBarContainerProps) => ({
   padding: '12px 16px',
-  paddingTop: process.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
+  paddingTop: window.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
   backgroundColor: headerBarStyleColorMap[props.barStyle ?? HeaderBarStyle.default],
 }));
 
diff --git a/gui/src/renderer/components/NavigationBarStyles.tsx b/gui/src/renderer/components/NavigationBarStyles.tsx
index 98c5184ea3..a82256b077 100644
--- a/gui/src/renderer/components/NavigationBarStyles.tsx
+++ b/gui/src/renderer/components/NavigationBarStyles.tsx
@@ -20,7 +20,7 @@ export const StyledNavigationItems = styled.div({
 export const StyledNavigationBar = styled.nav((props: { unpinnedWindow: boolean }) => ({
   flex: 0,
   padding: '12px',
-  paddingTop: process.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
+  paddingTop: window.platform === 'darwin' && !props.unpinnedWindow ? '24px' : '12px',
 }));
 
 export const StyledNavigationBarWrapper = styled.div({
diff --git a/gui/src/renderer/components/PlatformWindow.tsx b/gui/src/renderer/components/PlatformWindow.tsx
index 633b7aee95..83aa7b3f7f 100644
--- a/gui/src/renderer/components/PlatformWindow.tsx
+++ b/gui/src/renderer/components/PlatformWindow.tsx
@@ -10,7 +10,7 @@ interface IPlatformWindowProps {
 export default styled.div({}, (props: IPlatformWindowProps) => {
   let mask: string | undefined;
 
-  if (process.platform === 'darwin' && !props.unpinnedWindow) {
+  if (window.platform === 'darwin' && !props.unpinnedWindow) {
     const arrowPositionCss =
       props.arrowPosition !== undefined ? `${props.arrowPosition - ARROW_WIDTH * 0.5}px` : '50%';
 
diff --git a/gui/src/renderer/components/Preferences.tsx b/gui/src/renderer/components/Preferences.tsx
index ab2b423686..d47a7315c6 100644
--- a/gui/src/renderer/components/Preferences.tsx
+++ b/gui/src/renderer/components/Preferences.tsx
@@ -179,8 +179,8 @@ export default class Preferences extends React.Component<IProps> {
                   </Cell.Footer>
                 </AriaInputGroup>
 
-                {(process.platform === 'win32' ||
-                  (process.platform === 'darwin' && process.env.NODE_ENV === 'development')) && (
+                {(window.platform === 'win32' ||
+                  (window.platform === 'darwin' && window.runningInDevelopment)) && (
                   <AriaInputGroup>
                     <Cell.Container>
                       <AriaLabel>
diff --git a/gui/src/renderer/context.tsx b/gui/src/renderer/context.tsx
index 113a29fe71..d4b20daeb1 100644
--- a/gui/src/renderer/context.tsx
+++ b/gui/src/renderer/context.tsx
@@ -6,7 +6,7 @@ export interface IAppContext {
 }
 
 export const AppContext = React.createContext<IAppContext | undefined>(undefined);
-if (process.env.NODE_ENV === 'development') {
+if (window.runningInDevelopment) {
   AppContext.displayName = 'AppContext';
 }
 
@@ -34,7 +34,7 @@ export default function withAppContext<Props>(BaseComponent: React.ComponentType
     );
   };
 
-  if (process.env.NODE_ENV === 'development') {
+  if (window.runningInDevelopment) {
     wrappedComponent.displayName =
       'withAppContext(' + (BaseComponent.displayName || BaseComponent.name) + ')';
   }
diff --git a/gui/src/renderer/redux/settings/reducers.ts b/gui/src/renderer/redux/settings/reducers.ts
index 59b4c32b46..592caab687 100644
--- a/gui/src/renderer/redux/settings/reducers.ts
+++ b/gui/src/renderer/redux/settings/reducers.ts
@@ -148,7 +148,7 @@ const initialState: ISettingsReduxState = {
     autoConnect: true,
     monochromaticIcon: false,
     startMinimized: false,
-    unpinnedWindow: process.platform !== 'win32' && process.platform !== 'darwin',
+    unpinnedWindow: window.platform !== 'win32' && window.platform !== 'darwin',
   },
   relaySettings: {
     normal: {
diff --git a/gui/src/renderer/redux/store.ts b/gui/src/renderer/redux/store.ts
index 49f864d18b..92d85e4dbe 100644
--- a/gui/src/renderer/redux/store.ts
+++ b/gui/src/renderer/redux/store.ts
@@ -54,7 +54,7 @@ export default function configureStore(initialState?: IReduxState) {
   const composeEnhancers: typeof compose = (() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const reduxCompose = window && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
-    if (process.env.NODE_ENV === 'development' && reduxCompose) {
+    if (window.runningInDevelopment && reduxCompose) {
       return reduxCompose({ actionCreators });
     }
     return compose;
diff --git a/gui/src/shared/ipc-schema.ts b/gui/src/shared/ipc-schema.ts
index deead2557a..a31745c01f 100644
--- a/gui/src/shared/ipc-schema.ts
+++ b/gui/src/shared/ipc-schema.ts
@@ -52,6 +52,8 @@ export interface IAppStateSnapshot {
   guiSettings: IGuiSettingsState;
   wireguardPublicKey?: IWireguardPublicKey;
   translations: ITranslations;
+  platform: NodeJS.Platform;
+  runningInDevelopment: boolean;
 }
 
 // The different types of requests are:
diff --git a/gui/src/shared/notifications/error.ts b/gui/src/shared/notifications/error.ts
index d580bf1f1e..c5f15482dc 100644
--- a/gui/src/shared/notifications/error.ts
+++ b/gui/src/shared/notifications/error.ts
@@ -45,7 +45,7 @@ export class ErrorNotificationProvider
 function getMessage(errorDetails: IErrorState, accountExpiry?: string): string {
   if (errorDetails.blockFailure) {
     if (errorDetails.cause.reason === 'set_firewall_policy_error') {
-      switch (process.platform) {
+      switch (process.platform ?? window.platform) {
         case 'win32':
           return messages.pgettext(
             'notifications',
@@ -86,7 +86,7 @@ function getMessage(errorDetails: IErrorState, accountExpiry?: string): string {
           'Could not configure IPv6. Disable it in the app or enable it on your device.',
         );
       case 'set_firewall_policy_error':
-        switch (process.platform) {
+        switch (process.platform ?? window.platform) {
           case 'win32':
             return messages.pgettext(
               'notifications',
diff --git a/gui/src/shared/notifications/no-valid-key.ts b/gui/src/shared/notifications/no-valid-key.ts
index d1b90095e2..8da145a1f0 100644
--- a/gui/src/shared/notifications/no-valid-key.ts
+++ b/gui/src/shared/notifications/no-valid-key.ts
@@ -14,7 +14,7 @@ export class NoValidKeyNotificationProvider implements InAppNotificationProvider
   public mayDisplay() {
     const usingWireGuard =
       this.context.tunnelProtocol === 'wireguard' ||
-      (this.context.tunnelProtocol === 'any' && process.platform !== 'win32');
+      (this.context.tunnelProtocol === 'any' && (process.platform ?? window.platform) !== 'win32');
     const keyInvalid =
       this.context.wireGuardKey.type === 'key-not-set' ||
       this.context.wireGuardKey.type === 'too-many-keys' ||
diff --git a/gui/types/global/index.d.ts b/gui/types/global/index.d.ts
index 03d7e4cf46..9065f4d8a5 100644
--- a/gui/types/global/index.d.ts
+++ b/gui/types/global/index.d.ts
@@ -3,5 +3,7 @@ import { IpcRendererEventChannel } from '../../src/renderer/lib/ipc-event-channe
 declare global {
   interface Window {
     ipc: typeof IpcRendererEventChannel;
+    platform: NodeJS.Platform;
+    runningInDevelopment: boolean;
   }
 }