fix: system proxy resolver updates (#6273)

packages/bruno-app/src/components/Preferences/ProxySettings/StyledWrapper.js

@@ -25,6 +25,40 @@ const StyledWrapper = styled.div`
     label {
       color: ${(props) => props.theme.colors.text.yellow};
     }
+
+    .system-proxy-title {
+      color: ${(props) => props.theme.text};
+    }
+
+    .system-proxy-description {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
+
+    .system-proxy-error-container {
+      background: ${(props) => props.theme.status.danger.background};
+      border: 1px solid ${(props) => props.theme.status.danger.border};
+    }
+
+    .system-proxy-error-text {
+      color: ${(props) => props.theme.status.danger.text};
+    }
+
+    .system-proxy-source-label {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
+
+    .system-proxy-source-value {
+      color: ${(props) => props.theme.text};
+    }
+
+    .system-proxy-info-text {
+      color: ${(props) => props.theme.colors.text.muted};
+    }
+
+    .system-proxy-value {
+      color: ${(props) => props.theme.colors.text.purple};
+      opacity: 0.8;
+    }
   }
 `;
 

packages/bruno-app/src/components/Preferences/ProxySettings/SystemProxy/index.js

@@ -0,0 +1,83 @@
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { IconLoader2 } from '@tabler/icons';
+import { getSystemProxyVariables } from 'providers/ReduxStore/slices/app';
+import StyledWrapper from '../StyledWrapper';
+
+const SystemProxy = () => {
+  const dispatch = useDispatch();
+  const systemProxyVariables = useSelector((state) => state.app.systemProxyVariables);
+  const { source, http_proxy, https_proxy, no_proxy } = systemProxyVariables || {};
+  const [isFetching, setIsFetching] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    dispatch(getSystemProxyVariables())
+      .then(() => setError(null))
+      .catch((err) => setError(err.message || String(err)))
+      .finally(() => setIsFetching(false));
+  }, [dispatch]);
+
+  return (
+    <StyledWrapper>
+      <div className="mb-3 text-muted system-proxy-settings space-y-4">
+        <div className="flex items-start justify-start flex-col gap-2 mt-2">
+          <div className="flex flex-row items-center gap-2">
+            <div>
+              <h2 className="text-xs system-proxy-title">
+                System Proxy {isFetching ? <IconLoader2 className="animate-spin ml-1" size={18} strokeWidth={1.5} /> : null}
+              </h2>
+              <small className="system-proxy-description">
+                Below values are sourced from your system proxy settings.
+              </small>
+            </div>
+          </div>
+        </div>
+        {error && (
+          <div className="mb-2 p-3 system-proxy-error-container rounded">
+            <small className="system-proxy-error-text">
+              Error loading system proxy settings: {error}
+            </small>
+          </div>
+        )}
+        {source && (
+          <div className="mb-2">
+            <small className="font-medium flex flex-row gap-2">
+              <div className="system-proxy-source-label text-xs">
+                Proxy source:
+              </div>
+              <div className="system-proxy-source-value">
+                {source}
+              </div>
+            </small>
+          </div>
+        )}
+        <small className="system-proxy-info-text">
+          These values cannot be directly updated in Bruno. Please refer to your OS documentation to update these.
+        </small>
+        <div className="flex flex-col justify-start items-start pt-2">
+          <div className="mb-1 flex items-center">
+            <label className="settings-label">
+              http_proxy
+            </label>
+            <div className="system-proxy-value">{http_proxy || '-'}</div>
+          </div>
+          <div className="mb-1 flex items-center">
+            <label className="settings-label">
+              https_proxy
+            </label>
+            <div className="system-proxy-value">{https_proxy || '-'}</div>
+          </div>
+          <div className="mb-1 flex items-center">
+            <label className="settings-label">
+              no_proxy
+            </label>
+            <div className="system-proxy-value">{no_proxy || '-'}</div>
+          </div>
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default SystemProxy;

packages/bruno-app/src/components/Preferences/ProxySettings/index.js

@@ -9,13 +9,11 @@ import StyledWrapper from './StyledWrapper';
 import { useDispatch, useSelector } from 'react-redux';
 import { IconEye, IconEyeOff } from '@tabler/icons';
 import { useState } from 'react';
+import SystemProxy from './SystemProxy';
 
 const ProxySettings = ({ close }) => {
   const preferences = useSelector((state) => state.app.preferences);
-  const systemProxyEnvVariables = useSelector((state) => state.app.systemProxyEnvVariables);
-  const { http_proxy, https_proxy, no_proxy } = systemProxyEnvVariables || {};
   const dispatch = useDispatch();
-  console.log(preferences);
 
   const proxySchema = Yup.object({
     disabled: Yup.boolean().optional(),
@@ -167,30 +165,7 @@ const ProxySettings = ({ close }) => {
         </div>
         {formik.values.disabled === false && formik.values.inherit === true ? (
           <div className="mb-3 pt-1 text-muted system-proxy-settings">
-            <small>
-              Below values are sourced from your system environment variables and cannot be directly updated in Bruno.<br />
-              Please refer to your OS documentation to change these values.
-            </small>
-            <div className="flex flex-col justify-start items-start pt-2">
-              <div className="mb-1 flex items-center">
-                <label className="settings-label" htmlFor="http_proxy">
-                  http_proxy
-                </label>
-                <div className="opacity-80">{http_proxy || '-'}</div>
-              </div>
-              <div className="mb-1 flex items-center">
-                <label className="settings-label" htmlFor="https_proxy">
-                  https_proxy
-                </label>
-                <div className="opacity-80">{https_proxy || '-'}</div>
-              </div>
-              <div className="mb-1 flex items-center">
-                <label className="settings-label" htmlFor="no_proxy">
-                  no_proxy
-                </label>
-                <div className="opacity-80">{no_proxy || '-'}</div>
-              </div>
-            </div>
+            <SystemProxy />
           </div>
         ) : null}
         {formik.values.disabled === false && formik.values.inherit === false ? (

packages/bruno-app/src/providers/App/useIpcEvents.js

@@ -1,8 +1,7 @@
 import { useEffect } from 'react';
 import {
   updateCookies,
-  updatePreferences,
-  updateSystemProxyEnvVariables
+  updatePreferences
 } from 'providers/ReduxStore/slices/app';
 import {
   addTab
@@ -271,10 +270,6 @@ const useIpcEvents = () => {
       dispatch(updatePreferences(val));
     });
 
-    const removeSystemProxyEnvUpdatesListener = ipcRenderer.on('main:load-system-proxy-env', (val) => {
-      dispatch(updateSystemProxyEnvVariables(val));
-    });
-
     const removeCookieUpdateListener = ipcRenderer.on('main:cookies-update', (val) => {
       dispatch(updateCookies(val));
     });
@@ -331,7 +326,6 @@ const useIpcEvents = () => {
       removeShowPreferencesListener();
       removePreferencesUpdatesListener();
       removeCookieUpdateListener();
-      removeSystemProxyEnvUpdatesListener();
       removeGlobalEnvironmentsUpdatesListener();
       removeSnapshotHydrationListener();
       removeCollectionOauth2CredentialsUpdatesListener();

packages/bruno-app/src/providers/ReduxStore/slices/app.js

@@ -48,10 +48,10 @@ const initialState = {
   },
   cookies: [],
   taskQueue: [],
-  systemProxyEnvVariables: {},
   clipboard: {
     hasCopiedItems: false // Whether clipboard has Bruno data (for UI)
-  }
+  },
+  systemProxyVariables: {}
 };
 
 export const appSlice = createSlice({
@@ -111,8 +111,8 @@ export const appSlice = createSlice({
     removeAllTasksFromQueue: (state) => {
       state.taskQueue = [];
     },
-    updateSystemProxyEnvVariables: (state, action) => {
-      state.systemProxyEnvVariables = action.payload;
+    updateSystemProxyVariables: (state, action) => {
+      state.systemProxyVariables = action.payload;
     },
     updateGenerateCode: (state, action) => {
       state.generateCode = {
@@ -161,7 +161,7 @@ export const {
   insertTaskIntoQueue,
   removeTaskFromQueue,
   removeAllTasksFromQueue,
-  updateSystemProxyEnvVariables,
+  updateSystemProxyVariables,
   updateGenerateCode,
   toggleSidebarCollapse,
   setClipboard
@@ -236,4 +236,16 @@ export const copyRequest = (item) => (dispatch, getState) => {
   return Promise.resolve();
 };
 
+export const getSystemProxyVariables = () => (dispatch, getState) => {
+  return new Promise((resolve, reject) => {
+    const { ipcRenderer } = window;
+    ipcRenderer.invoke('renderer:get-system-proxy-variables')
+      .then((variables) => {
+        dispatch(updateSystemProxyVariables(variables));
+        return variables;
+      })
+      .then(resolve).catch(reject);
+  });
+};
+
 export default appSlice.reducer;