chore: use input for proxy settings

Use the Input component when configuring a proxy. This is the first
control to require disabled inputs, so that support is added here -
from the design it is the same as readonly except user text is the
same color as placeholder text.

Fixes another minor part of #3234.

Signed-off-by: Tim deBoer <git@tdeboer.ca>

packages/renderer/src/lib/preferences/PreferencesProxiesRendering.svelte

@@ -6,6 +6,7 @@ import Button from '../ui/Button.svelte';
 import { faPen } from '@fortawesome/free-solid-svg-icons';
 import { validateProxyAddress } from './Util';
 import ErrorMessage from '/@/lib/ui/ErrorMessage.svelte';
+import Input from '/@/lib/ui/Input.svelte';
 
 let proxySettings: ProxySettings;
 let proxyState: boolean;
@@ -63,7 +64,7 @@ function validate(event: any) {
     <!-- if proxy is not enabled, display a toggle -->
 
     <label for="toggle-proxy" class="inline-flex relative items-center mt-1 mb-4 cursor-pointer">
-      <input
+      <Input
         type="checkbox"
         bind:checked="{proxyState}"
         on:change="{() => updateProxyState()}"
@@ -80,12 +81,11 @@ function validate(event: any) {
       <div class="space-y-2">
         <label for="httpProxy" class="mb-2 text-sm font-medium {proxyState ? 'text-gray-400' : 'text-gray-900'}"
           >Web Proxy (HTTP):</label>
-        <input
+        <Input
           name="httpProxy"
           id="httpProxy"
           disabled="{!proxyState}"
           bind:value="{proxySettings.httpProxy}"
-          class="w-full p-2 outline-none text-sm bg-charcoal-800 rounded-sm text-gray-700 placeholder-gray-700"
           placeholder="URL of the proxy for http: URLs (eg http://myproxy.domain.com:8080)"
           required
           on:input="{event => validate(event)}" />
@@ -96,12 +96,11 @@ function validate(event: any) {
       <div class="space-y-2">
         <label for="httpsProxy" class="pt-4 mb-2 text-sm font-medium {proxyState ? 'text-gray-400' : 'text-gray-900'}"
           >Secure Web Proxy (HTTPS):</label>
-        <input
+        <Input
           name="httpsProxy"
           id="httpsProxy"
           disabled="{!proxyState}"
           bind:value="{proxySettings.httpsProxy}"
-          class="w-full p-2 outline-none text-sm bg-charcoal-800 rounded-sm text-gray-700 placeholder-gray-700"
           placeholder="URL of the proxy for https: URLs (eg http://myproxy.domain.com:8080)"
           required
           on:input="{event => validate(event)}" />
@@ -113,12 +112,12 @@ function validate(event: any) {
         <label for="httpProxy" class="pt-4 mb-2 text-sm font-medium {proxyState ? 'text-gray-400' : 'text-gray-900'}"
           >Bypass proxy settings for these hosts and domains:</label>
         <input
+          <Input
           name="noProxy"
           id="noProxy"
           disabled="{!proxyState}"
           bind:value="{proxySettings.noProxy}"
           placeholder="Example: *.domain.com, 192.168.*.*"
-          class="w-full p-2 outline-none text-sm bg-charcoal-800 rounded-sm text-gray-700 placeholder-gray-700"
           required />
       </div>
       <div class="my-2 pt-4">

packages/renderer/src/lib/ui/Input.spec.ts

@@ -27,10 +27,18 @@ function renderInput(
   value: string,
   placeholder?: string,
   readonly?: boolean,
+  disabled?: boolean,
   clearable?: boolean,
   onClick?: any,
 ): void {
-  render(Input, { value: value, placeholder: placeholder, readonly: readonly, clearable: clearable, onClick: onClick });
+  render(Input, {
+    value: value,
+    placeholder: placeholder,
+    disabled: disabled,
+    readonly: readonly,
+    clearable: clearable,
+    onClick: onClick,
+  });
 }
 
 test('Expect basic styling', async () => {
@@ -86,10 +94,37 @@ test('Expect basic readonly styling', async () => {
   expect(element.parentElement).not.toHaveClass('hover:border-purple-400');
 });
 
-test('Expect clear styling', async () => {
+test('Expect basic disabled styling', async () => {
   const value = 'test';
   renderInput(value, value, false, true);
 
+  const element = screen.getByPlaceholderText(value);
+  expect(element).toBeInTheDocument();
+  expect(element).toHaveClass('px-1');
+  expect(element).toHaveClass('outline-0');
+  expect(element).toHaveClass('bg-charcoal-500');
+  expect(element).toHaveClass('text-sm');
+  expect(element).toHaveClass('text-gray-700');
+
+  expect(element).not.toHaveClass('group-hover:bg-charcoal-900');
+  expect(element).not.toHaveClass('group-focus-within:bg-charcoal-900');
+  expect(element).not.toHaveClass('group-hover-placeholder:text-gray-900');
+
+  expect(element.parentElement).toBeInTheDocument();
+  expect(element.parentElement).toHaveClass('bg-charcoal-500');
+  expect(element.parentElement).toHaveClass('border-[1px]');
+  expect(element.parentElement).toHaveClass('border-charcoal-500');
+  expect(element.parentElement).toHaveClass('border-b-charcoal-100');
+
+  expect(element.parentElement).not.toHaveClass('hover:bg-charcoal-900');
+  expect(element.parentElement).not.toHaveClass('hover:rounded-md');
+  expect(element.parentElement).not.toHaveClass('hover:border-purple-400');
+});
+
+test('Expect clear styling', async () => {
+  const value = 'test';
+  renderInput(value, value, false, false, true);
+
   const element = screen.getByRole('button');
   expect(element).toBeInTheDocument();
   expect(element).toHaveAttribute('aria-label', 'clear');

packages/renderer/src/lib/ui/Input.svelte

@@ -10,6 +10,7 @@ export let value: string | undefined = undefined;
 export let readonly: boolean = false;
 export let required: boolean = false;
 export let clearable: boolean = false;
+export let disabled: boolean = false;
 
 export let element: HTMLInputElement | undefined = undefined;
 
@@ -31,24 +32,27 @@ async function onClear() {
 <div
   class="flex flex-row items-center px-1 py-1 group bg-charcoal-500 border-[1px] border-charcoal-500 {$$props.class ||
     ''}"
-  class:hover:bg-charcoal-900="{!readonly}"
-  class:focus-within:bg-charcoal-900="{!readonly}"
-  class:hover:rounded-md="{!readonly}"
-  class:focus-within:rounded-md="{!readonly}"
-  class:border-b-purple-500="{!readonly}"
-  class:hover:border-purple-400="{!readonly}"
-  class:focus-within:border-purple-500="{!readonly}"
-  class:border-b-charcoal-100="{readonly}">
+  class:hover:bg-charcoal-900="{!readonly && !disabled}"
+  class:focus-within:bg-charcoal-900="{!readonly && !disabled}"
+  class:hover:rounded-md="{!readonly && !disabled}"
+  class:focus-within:rounded-md="{!readonly && !disabled}"
+  class:border-b-purple-500="{!readonly && !disabled}"
+  class:hover:border-purple-400="{!readonly && !disabled}"
+  class:focus-within:border-purple-500="{!readonly && !disabled}"
+  class:border-b-charcoal-100="{readonly || disabled}">
   <slot name="left" />
   <input
     bind:this="{element}"
     on:input
-    class="grow px-1 outline-0 bg-charcoal-500 text-sm text-white placeholder:text-gray-700 overflow-hidden"
-    class:group-hover:bg-charcoal-900="{!readonly}"
-    class:group-focus-within:bg-charcoal-900="{!readonly}"
-    class:group-hover-placeholder:text-gray-900="{!readonly}"
+    class="grow px-1 outline-0 bg-charcoal-500 text-sm placeholder:text-gray-700 overflow-hidden"
+    class:text-white="{!disabled}"
+    class:text-gray-700="{disabled}"
+    class:group-hover:bg-charcoal-900="{!readonly && !disabled}"
+    class:group-focus-within:bg-charcoal-900="{!readonly && !disabled}"
+    class:group-hover-placeholder:text-gray-900="{!readonly && !disabled}"
     name="{name}"
     type="text"
+    disabled="{disabled}"
     readonly="{readonly}"
     required="{required}"
     placeholder="{placeholder}"
@@ -59,7 +63,7 @@ async function onClear() {
   {#if clearable}
     <button
       class="px-1 cursor-pointer text-gray-700 group-hover:text-gray-900 group-focus-within:text-gray-900"
-      class:hidden="{!value || readonly}"
+      class:hidden="{!value || readonly || disabled}"
       aria-label="clear"
       on:click="{onClear}">
       <Fa icon="{faXmark}" />