refactor(studio): simplify pipeline advanced settings (#49841)

## What kind of change does this PR introduce?

Small Studio UI refactor.

## What is the current behavior?

BigQuery-only fields are already conditionally rendered, but repeat that
scope in badges. Number inputs also convert non-empty invalid values
directly with Number().

## What is the new behavior?

Removes the redundant badges, keeps number fields empty instead of
storing NaN, and gives the invalidated-slot menu consistent viewport
collision spacing.

| Before | After |
| --- | --- |
| <img width="1238" height="364" alt="CleanShot 2026-09-02 at 14 40
02@2x"
src="https://github.com/user-attachments/assets/8c9b0c30-250e-422f-af3b-70f84e439459"
/> | <img width="1252" height="358" alt="CleanShot 2026-09-02 at 14 40
22@2x"
src="https://github.com/user-attachments/assets/8b3c6837-2c84-4c0d-ae07-b6b8b7a50cfe"
/> |

## To test

1. Open the pipeline creation sheet and expand Advanced settings.
2. Confirm connection pool size and maximum staleness appear only for
BigQuery, without BigQuery-only badges.
3. Clear and re-enter the numeric advanced settings.
4. Open Invalidated slot behavior near the viewport edge and confirm the
menu remains visible.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved handling of numeric input in advanced replication settings,
including empty and invalid values.
  * Adjusted the invalidated slot menu positioning for better display.

* **UI Improvements**
* Simplified labels for connection pool size and maximum staleness
settings.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Danny White authored and GitHub committed 2026-09-03 10:09:44 +10:00
1 parent 4ee43f3585
commit 442e40a30b
1 file changed
+5 -17
@@ -5,7 +5,6 @@ import {
AccordionContent,
AccordionItem,
AccordionTrigger,
Badge,
FormControl,
FormField,
FormInputGroupInput,
@@ -42,8 +41,8 @@ export const AdvancedSettings = ({
}) => {
const handleNumberChange =
(field: { onChange: (value?: number) => void }) => (e: ChangeEvent<HTMLInputElement>) => {
const val = e.target.value
field.onChange(val === '' ? undefined : Number(val))
const parsed = e.target.valueAsNumber
field.onChange(e.target.value === '' || Number.isNaN(parsed) ? undefined : parsed)
}
return (
@@ -59,7 +58,6 @@ export const AdvancedSettings = ({
</div>
</AccordionTrigger>
<AccordionContent className="pb-0! pt-3 [&>div]:flex [&>div]:flex-col [&>div]:gap-y-4">
{/* Batch wait time - applies to all destinations */}
<FormField
control={form.control}
name="maxFillMs"
@@ -161,7 +159,7 @@ export const AdvancedSettings = ({
<SelectTrigger>
{INVALIDATED_SLOT_BEHAVIOR_LABELS[field.value ?? 'error']}
</SelectTrigger>
<SelectContent>
<SelectContent side="bottom" collisionPadding={16}>
<SelectItem value="error" className="[&>span]:top-2.5">
<p>Block startup</p>
<p className="text-foreground-lighter">
@@ -188,12 +186,7 @@ export const AdvancedSettings = ({
name="connectionPoolSize"
render={({ field }) => (
<FormItemLayout
label={
<div className="flex flex-col gap-y-2">
<span>Connection pool size</span>
<Badge className="w-min">BigQuery only</Badge>
</div>
}
label="Connection pool size"
layout="horizontal"
description="Number of BigQuery connections used for destination writes."
>
@@ -222,12 +215,7 @@ export const AdvancedSettings = ({
name="maxStalenessMins"
render={({ field }) => (
<FormItemLayout
label={
<div className="flex flex-col gap-y-2">
<span>Maximum staleness</span>
<Badge className="w-min">BigQuery only</Badge>
</div>
}
label="Maximum staleness"
layout="horizontal"
description="Set the maximum age of query results while BigQuery applies ongoing changes, or leave blank for the freshest results."
>