🐛 fix(system-settings): resolve save detection and number input NaN issues
System settings forms that used flat dotted API keys (e.g. `performance_setting.monitor_cpu_threshold`) with React Hook Form were broken: RHF stores dotted paths as nested objects on update, while dirty checks and submit comparisons still read flat keys from defaults. Users could edit values but always saw "No changes to save". Refactor affected sections to use nested Zod schemas and default values for RHF, with explicit helpers to convert between nested form state and flat API keys. Track a normalized baseline in refs for accurate change detection and post-save resets. Add `safeNumberFieldProps` to prevent native `<input type="number">` from writing NaN into form state when cleared. NaN caused Zod validation to fail silently and made the save button appear unresponsive. The helper ignores non-finite updates so controlled inputs snap back to the last valid value, matching legacy Semi InputNumber behavior. Sections refactored for dotted-key handling: - maintenance/performance-section - models/grok-settings-card - auth/passkey-section - auth/oauth-section - auth/section-registry (pass attachment_preference raw; normalize in section) Sections migrated to safeNumberFieldProps: - maintenance/performance-section - models/grok-settings-card - integrations/monitoring-settings-section - integrations/payment-settings-section - integrations/creem-product-dialog - general/pricing-section (USD exchange rate) - general/system-behavior-section - content/dashboard-section Optional numeric fields (e.g. custom currency exchange rate) keep their existing empty-to-undefined semantics and are intentionally unchanged.
This commit is contained in:
+5
-5
@@ -357,7 +357,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
|
||||
)}
|
||||
</div>
|
||||
{log.channel_name && (
|
||||
<span className='text-muted-foreground/70 truncate !text-xs [font-family:var(--font-body)]'>
|
||||
<span className='text-muted-foreground/70 truncate [font-family:var(--font-body)] !text-xs'>
|
||||
{channelName}
|
||||
</span>
|
||||
)}
|
||||
@@ -502,7 +502,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
{metaParts.length > 0 && (
|
||||
<span className='text-muted-foreground/60 truncate !text-xs [font-family:var(--font-body)]'>
|
||||
<span className='text-muted-foreground/60 truncate [font-family:var(--font-body)] !text-xs'>
|
||||
{metaParts.join(' · ')}
|
||||
</span>
|
||||
)}
|
||||
@@ -598,8 +598,8 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className='flex items-center gap-1 !text-xs leading-none [font-family:var(--font-body)]'>
|
||||
<span className='text-muted-foreground/60 !text-xs leading-none [font-family:var(--font-body)]'>
|
||||
<div className='flex items-center gap-1 [font-family:var(--font-body)] !text-xs leading-none'>
|
||||
<span className='text-muted-foreground/60 [font-family:var(--font-body)] !text-xs leading-none'>
|
||||
{log.is_stream ? t('Stream') : t('Non-stream')}
|
||||
{tokensPerSecond != null && (
|
||||
<>
|
||||
@@ -736,7 +736,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-0.5'>
|
||||
<span className='border-border/80 bg-muted/60 inline-flex w-fit items-center rounded-md border px-1.5 py-0.5 font-semibold tabular-nums [font-family:var(--font-body)]'>
|
||||
<span className='border-border/80 bg-muted/60 inline-flex w-fit items-center rounded-md border px-1.5 py-0.5 [font-family:var(--font-body)] font-semibold tabular-nums'>
|
||||
{quotaStr}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user