Add proxy setting for HTTP requests (#127)

src-web/components/Settings/Settings.tsx

@@ -10,6 +10,7 @@ import { HeaderSize } from '../HeaderSize';
 import { SettingsAppearance } from './SettingsAppearance';
 import { SettingsGeneral } from './SettingsGeneral';
 import { SettingsPlugins } from './SettingsPlugins';
+import {SettingsProxy} from "./SettingsProxy";
 
 interface Props {
   hide?: () => void;
@@ -17,11 +18,12 @@ interface Props {
 
 enum Tab {
   General = 'general',
+  Proxy = 'proxy',
   Appearance = 'appearance',
   Plugins = 'plugins',
 }
 
-const tabs = [Tab.General, Tab.Appearance, Tab.Plugins];
+const tabs = [Tab.General, Tab.Appearance, Tab.Proxy, Tab.Plugins];
 
 export default function Settings({ hide }: Props) {
   const osInfo = useOsInfo();
@@ -78,6 +80,9 @@ export default function Settings({ hide }: Props) {
         <TabContent value={Tab.Plugins} className="pt-3 overflow-y-auto h-full px-4">
           <SettingsPlugins />
         </TabContent>
+        <TabContent value={Tab.Proxy} className="pt-3 overflow-y-auto h-full px-4">
+          <SettingsProxy />
+        </TabContent>
       </Tabs>
     </div>
   );

src-web/components/Settings/SettingsGeneral.tsx

@@ -27,12 +27,13 @@ export function SettingsGeneral() {
   }
 
   return (
-    <VStack space={2} className="mb-4">
+    <VStack space={1.5} className="mb-4">
       <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-1">
         <Select
           name="updateChannel"
           label="Update Channel"
           labelPosition="left"
+          labelClassName="w-[12rem]"
           size="sm"
           value={settings.updateChannel}
           onChange={(updateChannel) => updateSettings.mutate({ updateChannel })}
@@ -54,22 +55,19 @@ export function SettingsGeneral() {
         name="openWorkspace"
         label="Open Workspace"
         labelPosition="left"
+        labelClassName="w-[12rem]"
         size="sm"
         value={
           settings.openWorkspaceNewWindow === true
             ? 'new'
             : settings.openWorkspaceNewWindow === false
-            ? 'current'
-            : 'ask'
+              ? 'current'
+              : 'ask'
         }
         onChange={(v) => {
-          if (v === 'current') {
-            updateSettings.mutate({ openWorkspaceNewWindow: false });
-          } else if (v === 'new') {
-            updateSettings.mutate({ openWorkspaceNewWindow: true });
-          } else {
-            updateSettings.mutate({ openWorkspaceNewWindow: null });
-          }
+          if (v === 'current') updateSettings.mutate({ openWorkspaceNewWindow: false });
+          else if (v === 'new') updateSettings.mutate({ openWorkspaceNewWindow: true });
+          else updateSettings.mutate({ openWorkspaceNewWindow: null });
         }}
         options={[
           { label: 'Always Ask', value: 'ask' },
@@ -77,7 +75,9 @@ export function SettingsGeneral() {
           { label: 'New Window', value: 'new' },
         ]}
       />
+
       <Checkbox
+        className="mt-3"
         checked={settings.telemetry}
         title="Send Usage Statistics"
         onChange={(telemetry) => updateSettings.mutate({ telemetry })}

src-web/components/Settings/SettingsProxy.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { useSettings } from '../../hooks/useSettings';
+import { useUpdateSettings } from '../../hooks/useUpdateSettings';
+import { Checkbox } from '../core/Checkbox';
+import { PlainInput } from '../core/PlainInput';
+import { Select } from '../core/Select';
+import { Separator } from '../core/Separator';
+import { HStack, VStack } from '../core/Stacks';
+
+export function SettingsProxy() {
+  const settings = useSettings();
+  const updateSettings = useUpdateSettings();
+
+  return (
+    <VStack space={1.5} className="mb-4">
+      <Select
+        name="proxy"
+        label="Proxy"
+        hideLabel
+        size="sm"
+        value={settings.proxy?.type ?? 'automatic'}
+        onChange={(v) => {
+          if (v === 'automatic') {
+            updateSettings.mutate({ proxy: undefined });
+          } else if (v === 'enabled') {
+            updateSettings.mutate({
+              proxy: {
+                type: 'enabled',
+                http: '',
+                https: '',
+                auth: { user: '', password: '' },
+              },
+            });
+          } else {
+            updateSettings.mutate({ proxy: { type: 'disabled' } });
+          }
+        }}
+        options={[
+          { label: 'Automatic Proxy Detection', value: 'automatic' },
+          { label: 'Custom Proxy Configuration', value: 'enabled' },
+          { label: 'No Proxy', value: 'disabled' },
+        ]}
+      />
+      {settings.proxy?.type === 'enabled' && (
+        <VStack space={1.5}>
+          <HStack space={1.5} className="mt-3">
+            <PlainInput
+              size="sm"
+              label="HTTP"
+              placeholder="localhost:9090"
+              defaultValue={settings.proxy?.http}
+              onChange={(http) => {
+                const https = settings.proxy?.type === 'enabled' ? settings.proxy.https : '';
+                const auth = settings.proxy?.type === 'enabled' ? settings.proxy.auth : null;
+                updateSettings.mutate({ proxy: { type: 'enabled', http, https, auth } });
+              }}
+            />
+            <PlainInput
+              size="sm"
+              label="HTTPS"
+              placeholder="localhost:9090"
+              defaultValue={settings.proxy?.https}
+              onChange={(https) => {
+                const http = settings.proxy?.type === 'enabled' ? settings.proxy.http : '';
+                const auth = settings.proxy?.type === 'enabled' ? settings.proxy.auth : null;
+                updateSettings.mutate({ proxy: { type: 'enabled', http, https, auth } });
+              }}
+            />
+          </HStack>
+          <Separator className="my-6"/>
+          <Checkbox
+            checked={settings.proxy.auth != null}
+            title="Enable authentication"
+            onChange={(enabled) => {
+              const http = settings.proxy?.type === 'enabled' ? settings.proxy.http : '';
+              const https = settings.proxy?.type === 'enabled' ? settings.proxy.https : '';
+              const auth = enabled ? { user: '', password: '' } : null;
+              updateSettings.mutate({ proxy: { type: 'enabled', http, https, auth } });
+            }}
+          />
+
+          {settings.proxy.auth != null && (
+            <HStack space={1.5}>
+              <PlainInput
+                size="sm"
+                label="User"
+                placeholder="myUser"
+                defaultValue={settings.proxy.auth.user}
+                onChange={(user) => {
+                  const https = settings.proxy?.type === 'enabled' ? settings.proxy.https : '';
+                  const http = settings.proxy?.type === 'enabled' ? settings.proxy.http : '';
+                  const password =
+                    settings.proxy?.type === 'enabled' ? (settings.proxy.auth?.password ?? '') : '';
+                  const auth = { user, password };
+                  updateSettings.mutate({ proxy: { type: 'enabled', http, https, auth } });
+                }}
+              />
+              <PlainInput
+                size="sm"
+                label="Password"
+                type="password"
+                placeholder="s3cretPassw0rd"
+                defaultValue={settings.proxy.auth.password}
+                onChange={(password) => {
+                  const https = settings.proxy?.type === 'enabled' ? settings.proxy.https : '';
+                  const http = settings.proxy?.type === 'enabled' ? settings.proxy.http : '';
+                  const user =
+                    settings.proxy?.type === 'enabled' ? (settings.proxy.auth?.user ?? '') : '';
+                  const auth = { user, password };
+                  updateSettings.mutate({ proxy: { type: 'enabled', http, https, auth } });
+                }}
+              />
+            </HStack>
+          )}
+        </VStack>
+      )}
+    </VStack>
+  );
+}

src-web/components/core/Banner.tsx

@@ -14,6 +14,7 @@ export function Banner({ children, className, color = 'secondary' }: Props) {
         className={classNames(
           className,
           `x-theme-banner--${color}`,
+          'whitespace-pre-wrap',
           'border border-dashed border-border-subtle bg-surface',
           'italic px-3 py-2 rounded select-auto cursor-text',
           'overflow-x-auto text-text',

src-web/components/core/PlainInput.tsx

@@ -93,7 +93,7 @@ export const PlainInput = forwardRef<HTMLInputElement, PlainInputProps>(function
         htmlFor={id}
         className={classNames(
           labelClassName,
-          'text-text-subtle whitespace-nowrap',
+          'text-text-subtle whitespace-nowrap flex-shrink-0',
           hideLabel && 'sr-only',
         )}
       >