feat(Proxy Settings): Improve Proxy experience

packages/insomnia-smoke-test/tests/smoke/pre-request-script-features.test.ts

@@ -355,6 +355,7 @@ test.describe('pre-request features tests', async () => {
         // update proxy configuration
         await page.locator('[data-testid="settings-button"]').click();
         await page.locator('text=Insomnia Preferences').first().click();
+        await page.getByRole('tab', { name: 'Proxy' }).click();
         await page.locator('text=Enable proxy').click();
         await page.locator('[name="httpProxy"]').fill('localhost:1111');
         await page.locator('[name="httpsProxy"]').fill('localhost:2222');

packages/insomnia/src/ui/components/check-for-updates-button.tsx

@@ -1,11 +1,8 @@
-import React, { FC, ReactNode, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
-interface Props {
-  children: ReactNode;
-  className?: string | null;
-}
+import { Icon } from './icon';
 
-export const CheckForUpdatesButton: FC<Props> = ({ children, className }) => {
+export const CheckForUpdatesButton = () => {
   const [disabled, setDisabled] = useState(false);
   const [status, setStatus] = useState('');
 
@@ -16,9 +13,10 @@ export const CheckForUpdatesButton: FC<Props> = ({ children, className }) => {
       unsubscribe();
     };
   });
+
   return (
     <button
-      className={className ?? ''}
+      className="flex items-center gap-2 btn btn--outlined btn--super-compact"
       disabled={disabled}
       onClick={() => {
         window.main.manualUpdateCheck();
@@ -27,7 +25,8 @@ export const CheckForUpdatesButton: FC<Props> = ({ children, className }) => {
         setDisabled(true);
       }}
     >
-      {status || children}
+      <Icon className={status && 'animate-spin'} icon="refresh" />
+      {status || 'Check now'}
     </button>
   );
 };

packages/insomnia/src/ui/components/modals/settings-modal.tsx

@@ -7,10 +7,13 @@ import { ModalBody } from '../base/modal-body';
 import { ModalHeader } from '../base/modal-header';
 import { PanelContainer, TabItem, Tabs } from '../base/tabs';
 import { AI } from '../settings/ai';
+import { BooleanSetting } from '../settings/boolean-setting';
 import { General } from '../settings/general';
 import { ImportExport } from '../settings/import-export';
+import { MaskedSetting } from '../settings/masked-setting';
 import { Plugins } from '../settings/plugins';
 import { Shortcuts } from '../settings/shortcuts';
+import { TextSetting } from '../settings/text-setting';
 import { ThemePanel } from '../settings/theme-panel';
 import { showModal } from './index';
 
@@ -27,7 +30,7 @@ export const TAB_INDEX_AI = 'ai';
 
 export const SettingsModal = forwardRef<SettingsModalHandle, ModalProps>((props, ref) => {
   const [defaultTabKey, setDefaultTabKey] = useState('general');
-  const { userSession } = useRootLoaderData();
+  const { userSession, settings } = useRootLoaderData();
   const modalRef = useRef<ModalHandle>(null);
 
   useImperativeHandle(ref, () => ({
@@ -52,8 +55,41 @@ export const SettingsModal = forwardRef<SettingsModalHandle, ModalProps>((props,
       <ModalBody noScroll>
         <Tabs aria-label="Insomnia Settings"  defaultSelectedKey={defaultTabKey}>
           <TabItem key="general" title="General">
+            <General />
+          </TabItem>
+          <TabItem key="proxy" title="Proxy">
             <PanelContainer className="pad">
-              <General />
+              <h2 className='font-bold pt-5 pb-2 text-lg sticky top-0 left-0 bg-[--color-bg] z-10'>Network Proxy</h2>
+
+              <BooleanSetting
+                label="Enable proxy"
+                setting="proxyEnabled"
+                help="If checked, enables a global network proxy on all requests sent through Insomnia. This proxy supports Basic Auth, digest, and NTLM authentication."
+              />
+
+              <div className="form-row pad-top-sm">
+                <MaskedSetting
+                  label='Proxy for HTTP'
+                  setting='httpProxy'
+                  help="Enter a HTTP or SOCKS4/5 proxy starting with appropriate prefix from the following (http://, socks4://, socks5://)"
+                  placeholder="localhost:8005"
+                  disabled={!settings.proxyEnabled}
+                />
+                <MaskedSetting
+                  label='Proxy for HTTPS'
+                  setting='httpsProxy'
+                  help="Enter a HTTPS or SOCKS4/5 proxy starting with appropriate prefix from the following (https://, socks4://, socks5://)"
+                  placeholder="localhost:8005"
+                  disabled={!settings.proxyEnabled}
+                />
+                <TextSetting
+                  label="No proxy"
+                  setting="noProxy"
+                  help="Enter a comma-separated list of hostnames that don’t require a proxy."
+                  placeholder="localhost,127.0.0.1"
+                  disabled={!settings.proxyEnabled}
+                />
+              </div>
             </PanelContainer>
           </TabItem>
           <TabItem key="data" title="Data">
@@ -87,4 +123,4 @@ export const SettingsModal = forwardRef<SettingsModalHandle, ModalProps>((props,
   );
 });
 SettingsModal.displayName = 'SettingsModal';
-export const showSettingsModal = () => showModal(SettingsModal);
+export const showSettingsModal = (options?: { tab?: string }) => showModal(SettingsModal, options);

packages/insomnia/src/ui/components/settings/boolean-setting.tsx

@@ -39,17 +39,17 @@ export const BooleanSetting: FC<{
 
   return (
     <>
-      <div className="form-control form-control--thin">
-        <label className="inline-block">
-          {label}
-          {help && <HelpTooltip className="space-left">{help}</HelpTooltip>}
+      <div className="">
+        <label className="flex items-center gap-2">
           <input
             checked={Boolean(settings[setting])}
             name={setting}
             onChange={event => patchSettings({ [setting]: event.currentTarget.checked })}
             type="checkbox"
             disabled={disabled}
           />
+          {label}
+          {help && <HelpTooltip className="space-left">{help}</HelpTooltip>}
         </label>
       </div>
 

packages/insomnia/src/ui/components/settings/general.tsx

@@ -18,7 +18,6 @@ import { Link } from '../base/link';
 import { CheckForUpdatesButton } from '../check-for-updates-button';
 import { BooleanSetting } from './boolean-setting';
 import { EnumSetting } from './enum-setting';
-import { MaskedSetting } from './masked-setting';
 import { NumberSetting } from './number-setting';
 import { TextSetting } from './text-setting';
 
@@ -30,8 +29,10 @@ export const General: FC = () => {
   const isLoggedIn = Boolean(userSession.id);
 
   return (
-    <div className="pad-bottom">
-      <div className="row-fill row-fill--top">
+    <div className="relative p-4">
+      <h2 className='font-bold pt-5 pb-2 text-lg sticky top-0 left-0 bg-[--color-bg] z-10'>Application</h2>
+
+      <div className="">
         <div>
           <BooleanSetting
             label="Use bulk header editor"
@@ -77,8 +78,7 @@ export const General: FC = () => {
         />
       </div>
 
-      <hr className="pad-top" />
-      <h2>Font</h2>
+      <h2 className='font-bold pt-5 pb-2 text-lg sticky top-0 left-0 bg-[--color-bg] z-10'>Font</h2>
 
       <div className="row-fill row-fill--top">
         <div>
@@ -158,9 +158,7 @@ export const General: FC = () => {
         />
       </div>
 
-      <hr className="pad-top" />
-
-      <h2>Request / Response</h2>
+      <h2 className='font-bold pt-5 pb-2 text-lg sticky top-0 left-0 bg-[--color-bg] z-10'>Request / Response</h2>
 
       <div className="row-fill row-fill--top">
         <div>
@@ -246,9 +244,7 @@ export const General: FC = () => {
         />
       </div>
 
-      <hr className="pad-top" />
-
-      <h2>Security</h2>
+      <h2 className='font-bold pt-5 pb-2 text-lg sticky top-0 left-0 bg-[--color-bg] z-10'>Security</h2>
       <div className="form-row pad-top-sm">
         <BooleanSetting
           label="Clear OAuth 2 session on start"
@@ -273,50 +269,11 @@ export const General: FC = () => {
         />
       </div>
 
-      <hr className="pad-top" />
-
-      <h2>Network Proxy</h2>
-
-      <BooleanSetting
-        label="Enable proxy"
-        setting="proxyEnabled"
-        help="If checked, enables a global network proxy on all requests sent through Insomnia. This proxy supports Basic Auth, digest, and NTLM authentication."
-      />
-
-      <div className="form-row pad-top-sm">
-        <MaskedSetting
-          label='Proxy for HTTP'
-          setting='httpProxy'
-          help="Enter a HTTP or SOCKS4/5 proxy starting with appropriate prefix from the following (http://, socks4://, socks5://)"
-          placeholder="localhost:8005"
-          disabled={!settings.proxyEnabled}
-        />
-        <MaskedSetting
-          label='Proxy for HTTPS'
-          setting='httpsProxy'
-          help="Enter a HTTPS or SOCKS4/5 proxy starting with appropriate prefix from the following (https://, socks4://, socks5://)"
-          placeholder="localhost:8005"
-          disabled={!settings.proxyEnabled}
-        />
-        <TextSetting
-          label="No proxy"
-          setting="noProxy"
-          help="Enter a comma-separated list of hostnames that don’t require a proxy."
-          placeholder="localhost,127.0.0.1"
-          disabled={!settings.proxyEnabled}
-        />
-      </div>
-
       {updatesSupported() && (
         <Fragment>
-          <hr className="pad-top" />
-          <div>
-            <div className="pull-right">
-              <CheckForUpdatesButton className="btn btn--outlined btn--super-duper-compact">
-                Check now
-              </CheckForUpdatesButton>
-            </div>
-            <h2>Software Updates</h2>
+          <h2 className='font-bold pt-5 pb-2 text-lg sticky top-0 left-0 bg-[--color-bg] z-10'>Software Updates</h2>
+          <div className="w-full">
+            <CheckForUpdatesButton />
           </div>
           <BooleanSetting
             label="Automatically download and install updates"
@@ -346,8 +303,7 @@ export const General: FC = () => {
           /></>
       )}
 
-      <hr className="pad-top" />
-      <h2>Plugins</h2>
+      <h2 className='font-bold pt-5 pb-2 text-lg sticky top-0 left-0 bg-[--color-bg] z-10'>Plugins</h2>
       <TextSetting
         label="Additional Plugin Path"
         setting="pluginPath"

packages/insomnia/src/ui/routes/auth.authorize.tsx

@@ -6,7 +6,6 @@ import { invariant } from '../../utils/invariant';
 import { SegmentEvent } from '../analytics';
 import { getLoginUrl, submitAuthCode } from '../auth-session-provider';
 import { Icon } from '../components/icon';
-import { showSettingsModal } from '../components/modals/settings-modal';
 import { Button } from '../components/themed-button';
 
 export const action: ActionFunction = async ({
@@ -153,13 +152,6 @@ const Authorize = () => {
           <Icon icon="arrow-left" />
           <span>Go Back</span>
         </Button>
-        <Button
-          data-testid="settings-button-auth-authorize"
-          className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
-          onClick={showSettingsModal}
-        >
-          <Icon icon="gear" /> Preferences
-        </Button>
       </div>
     </div>
   );