improvement(ui): reuse chip inputs for remaining settings fields (#8030)

* improvement(ui): reuse chip inputs for remaining settings fields

* improvement(ui): reuse the shared branding upload drop zone (#8031)

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>

---------

Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>

Author: BillLeoutsakosvl346

apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/chip-field.ts

@@ -1,5 +1,4 @@
 export { AddPeopleModal } from './components/add-people-modal'
-export { CHIP_FIELD_INPUT, CHIP_FIELD_SHELL } from './components/chip-field'
 export { CredentialDetailHeading } from './components/credential-detail-heading'
 export { CredentialDetailLayout } from './components/credential-detail-layout'
 export { CredentialMembersSection } from './components/credential-members-section'

apps/sim/app/workspace/[workspaceId]/components/credential-detail/index.ts

@@ -16,10 +16,6 @@ import {
 import { Eye, EyeOff, Search } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import {
-  CHIP_FIELD_INPUT,
-  CHIP_FIELD_SHELL,
-} from '@/app/workspace/[workspaceId]/components/credential-detail/components/chip-field'
 import { BYOKProviderKeysModal } from '@/app/workspace/[workspaceId]/settings/components/byok/byok-provider-keys-modal'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import {
@@ -432,34 +428,37 @@ export function BYOKKeyManager(props: BYOKKeyManagerProps) {
               tabIndex={-1}
               readOnly
             />
-            <div className={CHIP_FIELD_SHELL}>
-              <input
-                aria-label='API Key'
-                type={showApiKey ? 'text' : 'password'}
-                value={apiKeyInput}
-                onChange={(e) => {
-                  setApiKeyInput(e.target.value)
-                  if (error) setError(null)
-                }}
-                placeholder={editingMeta?.placeholder}
-                className={CHIP_FIELD_INPUT}
-                name='byok_api_key'
-                autoComplete='off'
-                autoCorrect='off'
-                autoCapitalize='off'
-                data-lpignore='true'
-                data-form-type='other'
-              />
-              <Button
-                variant='quiet'
-                size='icon'
-                className='shrink-0'
-                onClick={() => setShowApiKey(!showApiKey)}
-                aria-label={showApiKey ? 'Hide API key' : 'Show API key'}
-              >
-                {showApiKey ? <EyeOff className='size-[13px]' /> : <Eye className='size-[13px]' />}
-              </Button>
-            </div>
+            <ChipInput
+              aria-label='API Key'
+              type={showApiKey ? 'text' : 'password'}
+              value={apiKeyInput}
+              onChange={(e) => {
+                setApiKeyInput(e.target.value)
+                if (error) setError(null)
+              }}
+              placeholder={editingMeta?.placeholder}
+              name='byok_api_key'
+              autoComplete='off'
+              autoCorrect='off'
+              autoCapitalize='off'
+              data-lpignore='true'
+              data-form-type='other'
+              endAdornment={
+                <Button
+                  variant='quiet'
+                  size='icon'
+                  className='shrink-0'
+                  onClick={() => setShowApiKey(!showApiKey)}
+                  aria-label={showApiKey ? 'Hide API key' : 'Show API key'}
+                >
+                  {showApiKey ? (
+                    <EyeOff className='size-[13px]' />
+                  ) : (
+                    <Eye className='size-[13px]' />
+                  )}
+                </Button>
+              }
+            />
           </ChipModalField>
           {props.multiKey && (
             <ChipModalField

apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-key-manager.tsx

@@ -16,10 +16,6 @@ afterAll(resetEnvFlagsMock)
 vi.mock('@/components/settings/save-discard-actions', () => ({
   saveDiscardActions: () => [],
 }))
-vi.mock('@/app/workspace/[workspaceId]/components/credential-detail', () => ({
-  CHIP_FIELD_INPUT: '',
-  CHIP_FIELD_SHELL: '',
-}))
 vi.mock('@/app/workspace/[workspaceId]/settings/components/settings-empty-state', () => ({
   SettingsEmptyState: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
 }))

apps/sim/ee/whitelabeling/components/whitelabeling-settings.test.tsx

@@ -11,10 +11,7 @@ import { isEnterprise } from '@/lib/billing/plan-helpers'
 import { HEX_COLOR_REGEX } from '@/lib/branding'
 import type { OrganizationWhitelabelSettings } from '@/lib/branding/types'
 import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
-import {
-  CHIP_FIELD_INPUT,
-  CHIP_FIELD_SHELL,
-} from '@/app/workspace/[workspaceId]/components/credential-detail'
+import { DropZone } from '@/app/workspace/[workspaceId]/components/drop-zone'
 import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state'
 import { SettingsPanel } from '@/app/workspace/[workspaceId]/settings/components/settings-panel'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
@@ -31,42 +28,6 @@ import { useWorkspacesQuery } from '@/hooks/queries/workspace'
 
 const logger = createLogger('WhitelabelingSettings')
 
-interface DropZoneProps {
-  onDrop: (e: React.DragEvent) => void
-  children: React.ReactNode
-  className?: string
-}
-
-function DropZone({ onDrop, children, className }: DropZoneProps) {
-  const [isDragging, setIsDragging] = useState(false)
-
-  return (
-    <div
-      className={cn('relative', className)}
-      onDragOver={(e) => {
-        if (e.dataTransfer.types.includes('Files')) {
-          e.preventDefault()
-          setIsDragging(true)
-        }
-      }}
-      onDragLeave={(e) => {
-        if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-          setIsDragging(false)
-        }
-      }}
-      onDrop={(e) => {
-        setIsDragging(false)
-        onDrop(e)
-      }}
-    >
-      {children}
-      {isDragging && (
-        <div className='pointer-events-none absolute inset-0 z-10 rounded-lg border-[1.5px] border-[var(--brand-accent)] border-dashed bg-[color-mix(in_srgb,var(--brand-accent)_8%,transparent)]' />
-      )}
-    </div>
-  )
-}
-
 interface ColorInputProps {
   label: string
   value: string
@@ -81,30 +42,31 @@ function ColorInput({ label, value, onChange, placeholder = '#000000' }: ColorIn
   return (
     <div className='flex flex-col gap-1.5'>
       <Label>{label}</Label>
-      <div className={cn(CHIP_FIELD_SHELL, !isValidHex && 'border-[var(--text-error)]')}>
-        <div
-          className={cn(
-            'size-[16px] shrink-0 rounded-sm border border-[var(--border-1)]',
-            !showColor && 'bg-[var(--surface-3)]'
-          )}
-          style={showColor ? { backgroundColor: value } : undefined}
-        />
-        <input
-          value={value}
-          onChange={(e) => {
-            let v = e.target.value.trim()
-            if (v && !v.startsWith('#')) {
-              v = `#${v}`
-            }
-            v = v.slice(0, 1) + v.slice(1).replace(/[^0-9a-fA-F]/g, '')
-            onChange(v.slice(0, 7))
-          }}
-          onFocus={(e) => e.target.select()}
-          placeholder={placeholder}
-          maxLength={7}
-          className={cn(CHIP_FIELD_INPUT, 'font-mono')}
-        />
-      </div>
+      <ChipInput
+        error={!isValidHex}
+        startAdornment={
+          <div
+            className={cn(
+              'size-[16px] shrink-0 rounded-sm border border-[var(--border-1)]',
+              !showColor && 'bg-[var(--surface-3)]'
+            )}
+            style={showColor ? { backgroundColor: value } : undefined}
+          />
+        }
+        value={value}
+        onChange={(e) => {
+          let v = e.target.value.trim()
+          if (v && !v.startsWith('#')) {
+            v = `#${v}`
+          }
+          v = v.slice(0, 1) + v.slice(1).replace(/[^0-9a-fA-F]/g, '')
+          onChange(v.slice(0, 7))
+        }}
+        onFocus={(e) => e.target.select()}
+        placeholder={placeholder}
+        maxLength={7}
+        inputClassName='font-mono'
+      />
       {!isValidHex && (
         <p className='text-[var(--text-error)] text-caption'>
           Must be a valid hex color (e.g. #33c482)

apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx

@@ -29,6 +29,27 @@ afterEach(() => {
 })
 
 describe('ChipInput', () => {
+  it('keeps the focused input mounted when custom leading content changes', () => {
+    const input = mount()
+    const render = (color: string) => (
+      <ChipInput
+        aria-label='Color'
+        startAdornment={<span aria-hidden style={{ backgroundColor: color }} />}
+        endAdornment={<button type='button'>Reset</button>}
+      />
+    )
+    act(() => root?.render(render('#123456')))
+    input.focus()
+    input.value = '#123456'
+    act(() => root?.render(render('#abcdef')))
+
+    expect(container?.querySelector('input')).toBe(input)
+    expect(document.activeElement).toBe(input)
+    expect(input.value).toBe('#123456')
+    expect(input.previousElementSibling?.getAttribute('style')).toContain('rgb(171, 205, 239)')
+    expect(input.nextElementSibling?.textContent).toBe('Reset')
+  })
+
   it('reserves paintable clearance for a leading glyph without shifting its alignment', () => {
     const input = mount()
 

packages/emcn/src/components/chip-input/chip-input.test.tsx

@@ -35,6 +35,8 @@ type ChipInputIcon = React.ComponentType<{ className?: string }>
 export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
   /** Leading icon component (e.g. `Search` from `@sim/emcn/icons`). Rendered at 14px in `--text-icon`, with the chip's 1.5 gap. */
   icon?: ChipInputIcon
+  /** Custom leading content, such as a color swatch. Takes precedence over `icon`. */
+  startAdornment?: React.ReactNode
   /** Trailing content rendered after the input (e.g. reveal / copy buttons). */
   endAdornment?: React.ReactNode
   /** Marks the field invalid; swaps the border to the error token. */
@@ -55,6 +57,7 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
       className,
       inputClassName,
       icon: Icon,
+      startAdornment,
       endAdornment,
       error,
       disabled,
@@ -73,7 +76,8 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
         className
       )}
     >
-      {Icon ? <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' /> : null}
+      {startAdornment ??
+        (Icon ? <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' /> : null)}
       <input
         ref={ref}
         type={type}