From 442e40a30b032b67286f180ed894364be2913eba Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Thu, 3 Sep 2026 10:09:44 +1000
Subject: [PATCH] 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 -->
---
 .../DestinationForm/AdvancedSettings.tsx      | 22 +++++--------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx
index 877915b1e54..23b147e9699 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AdvancedSettings.tsx
@@ -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."
                     >