feat: update proxy implementation in preferences

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

@@ -6,28 +6,14 @@ import * as Yup from 'yup';
 import toast from 'react-hot-toast';
 import { IconEye, IconEyeOff } from '@tabler/icons';
 import { useState } from 'react';
-import { useMemo } from 'react';
-import { cloneDeep } from 'lodash';
-
-const ProxySettings = ({ proxyConfig: _proxyConfig, onUpdate }) => {
-  const proxyConfig = useMemo(() => {
-    const proxyConfigCopy = cloneDeep(_proxyConfig);
-    // backward compatibility check
-    if (proxyConfigCopy?.enabled == 'true') proxyConfigCopy.enabled = true;
-    if (proxyConfigCopy?.enabled == 'false') proxyConfigCopy.enabled = false;
-
-    proxyConfigCopy.enabled = ['string', 'boolean'].includes(typeof proxyConfigCopy?.enabled)
-      ? proxyConfigCopy?.enabled
-      : 'global';
-    return proxyConfigCopy;
-  }, [_proxyConfig]);
 
+const ProxySettings = ({ proxyConfig, onUpdate }) => {
   const proxySchema = Yup.object({
-    enabled: Yup.mixed().oneOf([false, true, 'global']),
+    enabled: Yup.string().oneOf(['global', 'true', 'false']),
     protocol: Yup.string().oneOf(['http', 'https', 'socks4', 'socks5']),
     hostname: Yup.string()
       .when('enabled', {
-        is: true,
+        is: 'true',
         then: (hostname) => hostname.required('Specify the hostname for your proxy.'),
         otherwise: (hostname) => hostname.nullable()
       })
@@ -40,7 +26,7 @@ const ProxySettings = ({ proxyConfig: _proxyConfig, onUpdate }) => {
       .transform((_, val) => (val ? Number(val) : null)),
     auth: Yup.object()
       .when('enabled', {
-        is: true,
+        is: 'true',
         then: Yup.object({
           enabled: Yup.boolean(),
           username: Yup.string()
@@ -63,7 +49,7 @@ const ProxySettings = ({ proxyConfig: _proxyConfig, onUpdate }) => {
 
   const formik = useFormik({
     initialValues: {
-      enabled: proxyConfig.enabled,
+      enabled: proxyConfig.enabled || 'global',
       protocol: proxyConfig.protocol || 'http',
       hostname: proxyConfig.hostname || '',
       port: proxyConfig.port || '',
@@ -79,6 +65,13 @@ const ProxySettings = ({ proxyConfig: _proxyConfig, onUpdate }) => {
       proxySchema
         .validate(values, { abortEarly: true })
         .then((validatedProxy) => {
+          // serialize 'enabled' to boolean
+          if (validatedProxy.enabled === 'true') {
+            validatedProxy.enabled = true;
+          } else if (validatedProxy.enabled === 'false') {
+            validatedProxy.enabled = false;
+          }
+
           onUpdate(validatedProxy);
         })
         .catch((error) => {
@@ -91,7 +84,7 @@ const ProxySettings = ({ proxyConfig: _proxyConfig, onUpdate }) => {
 
   useEffect(() => {
     formik.setValues({
-      enabled: proxyConfig.enabled,
+      enabled: proxyConfig.enabled === true ? 'true' : proxyConfig.enabled === false ? 'false' : 'global',
       protocol: proxyConfig.protocol || 'http',
       hostname: proxyConfig.hostname || '',
       port: proxyConfig.port || '',
@@ -125,229 +118,214 @@ const ProxySettings = ({ proxyConfig: _proxyConfig, onUpdate }) => {
             />
           </label>
           <div className="flex items-center">
-            <label className="flex items-center cursor-pointer">
+            <label className="flex items-center">
               <input
                 type="radio"
                 name="enabled"
                 value="global"
                 checked={formik.values.enabled === 'global'}
                 onChange={formik.handleChange}
-                className="mr-1 cursor-pointer"
+                className="mr-1"
               />
               global
             </label>
-            <label className="flex items-center ml-4 cursor-pointer">
+            <label className="flex items-center ml-4">
               <input
                 type="radio"
                 name="enabled"
                 value={'true'}
-                checked={formik.values.enabled === true}
-                onChange={(e) => {
-                  formik.setFieldValue('enabled', true);
-                }}
-                className="mr-1 cursor-pointer"
+                checked={formik.values.enabled === 'true'}
+                onChange={formik.handleChange}
+                className="mr-1"
               />
               enabled
             </label>
-            <label className="flex items-center ml-4 cursor-pointer">
+            <label className="flex items-center ml-4">
               <input
                 type="radio"
                 name="enabled"
                 value={'false'}
-                checked={formik.values.enabled === false}
-                onChange={(e) => {
-                  formik.setFieldValue('enabled', false);
-                }}
-                className="mr-1 cursor-pointer"
+                checked={formik.values.enabled === 'false'}
+                onChange={formik.handleChange}
+                className="mr-1"
               />
               disabled
             </label>
           </div>
         </div>
-        {formik.values.enabled === 'global' ? (
-          <div className="opacity-50">Global proxy can be configured in the app preferences.</div>
-        ) : null}
-        {formik.values.enabled === true ? (
-          <>
-            <div className="mb-3 flex items-center">
-              <label className="settings-label" htmlFor="protocol">
-                Protocol
-              </label>
-              <div className="flex items-center">
-                <label className="flex items-center">
-                  <input
-                    type="radio"
-                    name="protocol"
-                    value="http"
-                    checked={formik.values.protocol === 'http'}
-                    onChange={formik.handleChange}
-                    className="mr-1"
-                  />
-                  HTTP
-                </label>
-                <label className="flex items-center ml-4">
-                  <input
-                    type="radio"
-                    name="protocol"
-                    value="https"
-                    checked={formik.values.protocol === 'https'}
-                    onChange={formik.handleChange}
-                    className="mr-1"
-                  />
-                  HTTPS
-                </label>
-                <label className="flex items-center ml-4">
-                  <input
-                    type="radio"
-                    name="protocol"
-                    value="socks4"
-                    checked={formik.values.protocol === 'socks4'}
-                    onChange={formik.handleChange}
-                    className="mr-1"
-                  />
-                  SOCKS4
-                </label>
-                <label className="flex items-center ml-4">
-                  <input
-                    type="radio"
-                    name="protocol"
-                    value="socks5"
-                    checked={formik.values.protocol === 'socks5'}
-                    onChange={formik.handleChange}
-                    className="mr-1"
-                  />
-                  SOCKS5
-                </label>
-              </div>
-            </div>
-            <div className="mb-3 flex items-center">
-              <label className="settings-label" htmlFor="hostname">
-                Hostname
-              </label>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="protocol">
+            Protocol
+          </label>
+          <div className="flex items-center">
+            <label className="flex items-center">
               <input
-                id="hostname"
-                type="text"
-                name="hostname"
-                className="block textbox"
+                type="radio"
+                name="protocol"
+                value="http"
+                checked={formik.values.protocol === 'http'}
+                onChange={formik.handleChange}
+                className="mr-1"
+              />
+              HTTP
+            </label>
+            <label className="flex items-center ml-4">
+              <input
+                type="radio"
+                name="protocol"
+                value="https"
+                checked={formik.values.protocol === 'https'}
+                onChange={formik.handleChange}
+                className="mr-1"
+              />
+              HTTPS
+            </label>
+            <label className="flex items-center ml-4">
+              <input
+                type="radio"
+                name="protocol"
+                value="socks4"
+                checked={formik.values.protocol === 'socks4'}
+                onChange={formik.handleChange}
+                className="mr-1"
+              />
+              SOCKS4
+            </label>
+            <label className="flex items-center ml-4">
+              <input
+                type="radio"
+                name="protocol"
+                value="socks5"
+                checked={formik.values.protocol === 'socks5'}
+                onChange={formik.handleChange}
+                className="mr-1"
+              />
+              SOCKS5
+            </label>
+          </div>
+        </div>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="hostname">
+            Hostname
+          </label>
+          <input
+            id="hostname"
+            type="text"
+            name="hostname"
+            className="block textbox"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            onChange={formik.handleChange}
+            value={formik.values.hostname || ''}
+          />
+          {formik.touched.hostname && formik.errors.hostname ? (
+            <div className="ml-3 text-red-500">{formik.errors.hostname}</div>
+          ) : null}
+        </div>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="port">
+            Port
+          </label>
+          <input
+            id="port"
+            type="number"
+            name="port"
+            className="block textbox"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            onChange={formik.handleChange}
+            value={formik.values.port}
+          />
+          {formik.touched.port && formik.errors.port ? (
+            <div className="ml-3 text-red-500">{formik.errors.port}</div>
+          ) : null}
+        </div>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="auth.enabled">
+            Auth
+          </label>
+          <input
+            type="checkbox"
+            name="auth.enabled"
+            checked={formik.values.auth.enabled}
+            onChange={formik.handleChange}
+          />
+        </div>
+        <div>
+          <div className="mb-3 flex items-center">
+            <label className="settings-label" htmlFor="auth.username">
+              Username
+            </label>
+            <input
+              id="auth.username"
+              type="text"
+              name="auth.username"
+              className="block textbox"
+              autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              value={formik.values.auth.username}
+              onChange={formik.handleChange}
+            />
+            {formik.touched.auth?.username && formik.errors.auth?.username ? (
+              <div className="ml-3 text-red-500">{formik.errors.auth.username}</div>
+            ) : null}
+          </div>
+          <div className="mb-3 flex items-center">
+            <label className="settings-label" htmlFor="auth.password">
+              Password
+            </label>
+            <div className="textbox flex flex-row items-center w-[13.2rem] h-[1.70rem] relative">
+              <input
+                id="auth.password"
+                type={passwordVisible ? 'text' : 'password'}
+                name="auth.password"
+                className="outline-none bg-transparent w-[10.5rem]"
                 autoComplete="off"
                 autoCorrect="off"
                 autoCapitalize="off"
                 spellCheck="false"
-                onChange={formik.handleChange}
-                value={formik.values.hostname || ''}
-              />
-              {formik.touched.hostname && formik.errors.hostname ? (
-                <div className="ml-3 text-red-500">{formik.errors.hostname}</div>
-              ) : null}
-            </div>
-            <div className="mb-3 flex items-center">
-              <label className="settings-label" htmlFor="port">
-                Port
-              </label>
-              <input
-                id="port"
-                type="number"
-                name="port"
-                className="block textbox"
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck="false"
-                onChange={formik.handleChange}
-                value={formik.values.port}
-              />
-              {formik.touched.port && formik.errors.port ? (
-                <div className="ml-3 text-red-500">{formik.errors.port}</div>
-              ) : null}
-            </div>
-            <div className="mb-3 flex items-center">
-              <label className="settings-label" htmlFor="auth.enabled">
-                Auth
-              </label>
-              <input
-                type="checkbox"
-                name="auth.enabled"
-                checked={formik.values.auth.enabled}
+                value={formik.values.auth.password}
                 onChange={formik.handleChange}
               />
+              <button
+                type="button"
+                className="btn btn-sm absolute right-0"
+                onClick={() => setPasswordVisible(!passwordVisible)}
+              >
+                {passwordVisible ? <IconEyeOff size={18} strokeWidth={1.5} /> : <IconEye size={18} strokeWidth={1.5} />}
+              </button>
             </div>
-            <div>
-              <div className="mb-3 flex items-center">
-                <label className="settings-label" htmlFor="auth.username">
-                  Username
-                </label>
-                <input
-                  id="auth.username"
-                  type="text"
-                  name="auth.username"
-                  className="block textbox"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  autoCapitalize="off"
-                  spellCheck="false"
-                  value={formik.values.auth.username}
-                  onChange={formik.handleChange}
-                />
-                {formik.touched.auth?.username && formik.errors.auth?.username ? (
-                  <div className="ml-3 text-red-500">{formik.errors.auth.username}</div>
-                ) : null}
-              </div>
-              <div className="mb-3 flex items-center">
-                <label className="settings-label" htmlFor="auth.password">
-                  Password
-                </label>
-                <div className="textbox flex flex-row items-center w-[13.2rem] h-[1.70rem] relative">
-                  <input
-                    id="auth.password"
-                    type={passwordVisible ? 'text' : 'password'}
-                    name="auth.password"
-                    className="outline-none bg-transparent w-[10.5rem]"
-                    autoComplete="off"
-                    autoCorrect="off"
-                    autoCapitalize="off"
-                    spellCheck="false"
-                    value={formik.values.auth.password}
-                    onChange={formik.handleChange}
-                  />
-                  <button
-                    type="button"
-                    className="btn btn-sm absolute right-0"
-                    onClick={() => setPasswordVisible(!passwordVisible)}
-                  >
-                    {passwordVisible ? (
-                      <IconEyeOff size={18} strokeWidth={1.5} />
-                    ) : (
-                      <IconEye size={18} strokeWidth={1.5} />
-                    )}
-                  </button>
-                </div>
-                {formik.touched.auth?.password && formik.errors.auth?.password ? (
-                  <div className="ml-3 text-red-500">{formik.errors.auth.password}</div>
-                ) : null}
-              </div>
-            </div>
-            <div className="mb-3 flex items-center">
-              <label className="settings-label" htmlFor="bypassProxy">
-                Proxy Bypass
-              </label>
-              <input
-                id="bypassProxy"
-                type="text"
-                name="bypassProxy"
-                className="block textbox"
-                autoComplete="off"
-                autoCorrect="off"
-                autoCapitalize="off"
-                spellCheck="false"
-                onChange={formik.handleChange}
-                value={formik.values.bypassProxy || ''}
-              />
-              {formik.touched.bypassProxy && formik.errors.bypassProxy ? (
-                <div className="ml-3 text-red-500">{formik.errors.bypassProxy}</div>
-              ) : null}
-            </div>
-          </>
-        ) : null}
+            {formik.touched.auth?.password && formik.errors.auth?.password ? (
+              <div className="ml-3 text-red-500">{formik.errors.auth.password}</div>
+            ) : null}
+          </div>
+        </div>
+        <div className="mb-3 flex items-center">
+          <label className="settings-label" htmlFor="bypassProxy">
+            Proxy Bypass
+          </label>
+          <input
+            id="bypassProxy"
+            type="text"
+            name="bypassProxy"
+            className="block textbox"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            onChange={formik.handleChange}
+            value={formik.values.bypassProxy || ''}
+          />
+          {formik.touched.bypassProxy && formik.errors.bypassProxy ? (
+            <div className="ml-3 text-red-500">{formik.errors.bypassProxy}</div>
+          ) : null}
+        </div>
         <div className="mt-6">
           <button type="submit" className="submit btn btn-sm btn-secondary">
             Save
@@ -358,4 +336,4 @@ const ProxySettings = ({ proxyConfig: _proxyConfig, onUpdate }) => {
   );
 };
 
-export default ProxySettings;
+export default ProxySettings;

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

@@ -20,6 +20,12 @@ const StyledWrapper = styled.div`
       outline: none !important;
     }
   }
+
+  .system-proxy-settings {
+    label {
+      color: ${(props) => props.theme.colors.text.yellow};
+    }
+  }
 `;
 
 export default StyledWrapper;

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

@@ -8,26 +8,13 @@ import StyledWrapper from './StyledWrapper';
 import { useDispatch, useSelector } from 'react-redux';
 import { IconEye, IconEyeOff } from '@tabler/icons';
 import { useState } from 'react';
-import { useMemo } from 'react';
-import { cloneDeep } from 'lodash';
 
 const ProxySettings = ({ close }) => {
-  const _preferences = useSelector((state) => state.app.preferences);
+  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();
-
-  const preferences = useMemo(() => {
-    const preferencesCopy = cloneDeep(_preferences);
-    // backward compatibility check
-    if (typeof preferencesCopy?.proxy?.enabled === 'boolean') {
-      preferencesCopy.proxy.mode = preferencesCopy?.proxy?.enabled ? 'on' : 'off';
-    } else {
-      preferencesCopy.proxy.mode =
-        typeof preferencesCopy?.proxy?.mode === 'string' ? preferencesCopy?.proxy?.mode : 'off';
-    }
-    return preferencesCopy;
-  }, [_preferences]);
+  console.log(preferences);
 
   const proxySchema = Yup.object({
     mode: Yup.string().oneOf(['off', 'on', 'system']),
@@ -142,7 +129,7 @@ const ProxySettings = ({ close }) => {
                 }}
                 className="mr-1 cursor-pointer"
               />
-              off
+              Off
             </label>
             <label className="flex items-center ml-4 cursor-pointer">
               <input
@@ -155,7 +142,7 @@ const ProxySettings = ({ close }) => {
                 }}
                 className="mr-1 cursor-pointer"
               />
-              on
+              On
             </label>
             <label className="flex items-center ml-4 cursor-pointer">
               <input
@@ -166,26 +153,30 @@ const ProxySettings = ({ close }) => {
                 onChange={formik.handleChange}
                 className="mr-1 cursor-pointer"
               />
-              system
+              System Proxy
             </label>
           </div>
         </div>
         {formik?.values?.mode === 'system' ? (
-          <div className="mb-3 flex items-start pb-3">
-            <div className="flex flex-col gap-2 justify-start items-start">
-              <div className="mb-3 flex items-center">
+          <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-3 flex items-center">
+              <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-3 flex items-center">
+              <div className="mb-1 flex items-center">
                 <label className="settings-label" htmlFor="no_proxy">
                   no_proxy
                 </label>