Switch dropdown to describeselect component

This commit is contained in:
Owen
2026-10-16 10:34:50 -04:00
parent 50639bb21a
commit 4a1512f39e
2 changed files with 29 additions and 40 deletions
+2
View File
@@ -795,6 +795,8 @@
"targetStickySessions": "Enable Sticky Sessions",
"targetStickySessionsDescription": "Keep connections on the same backend target for their entire session.",
"loadBalancingStrategy": "Load Balancing Strategy",
"loadBalancingStrategySearch": "Search strategies...",
"loadBalancingStrategyNotFound": "No strategy found",
"loadBalancingStrategy_wrr": "Round Robin",
"loadBalancingStrategy_wrr_description": "Distribute requests evenly across targets in rotation.",
"loadBalancingStrategy_p2c": "Power of Two Choices",
@@ -3,12 +3,9 @@
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue
} from "@app/components/ui/select";
DescribedSelect,
type DescribedSelectOption
} from "@app/components/DescribedSelect";
import { HeadersInput } from "@app/components/HeadersInput";
import {
SettingsContainer,
@@ -53,6 +50,7 @@ import { useForm } from "react-hook-form";
import { z } from "zod";
const LOAD_BALANCING_STRATEGIES = ["wrr", "p2c", "hrw", "leasttime"] as const;
type LoadBalancingStrategy = (typeof LOAD_BALANCING_STRATEGIES)[number];
export default function ReverseProxyTargetsPage() {
const params = useParams();
@@ -151,6 +149,13 @@ function ProxyResourceHttpForm({
mode: "onChange"
});
const loadBalancingOptions: DescribedSelectOption<LoadBalancingStrategy>[] =
LOAD_BALANCING_STRATEGIES.map((strategy) => ({
value: strategy,
title: t(`loadBalancingStrategy_${strategy}`),
description: t(`loadBalancingStrategy_${strategy}_description`)
}));
const [, formAction, saveLoading] = useActionState(onSubmit, null);
const [requestHeadersValid, setRequestHeadersValid] = useState(true);
const [responseHeadersValid, setResponseHeadersValid] = useState(true);
@@ -352,41 +357,23 @@ function ProxyResourceHttpForm({
"loadBalancingStrategy"
)}
</FormLabel>
<Select
value={field.value}
onValueChange={
field.onChange
}
>
<FormControl>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
{LOAD_BALANCING_STRATEGIES.map(
(strategy) => (
<SelectItem
key={
strategy
}
value={
strategy
}
>
{t(
`loadBalancingStrategy_${strategy}`
)}
</SelectItem>
)
<FormControl>
<DescribedSelect<LoadBalancingStrategy>
options={
loadBalancingOptions
}
value={field.value}
onChange={
field.onChange
}
searchPlaceholder={t(
"loadBalancingStrategySearch"
)}
</SelectContent>
</Select>
<FormDescription>
{t(
`loadBalancingStrategy_${field.value}_description`
)}
</FormDescription>
emptyMessage={t(
"loadBalancingStrategyNotFound"
)}
/>
</FormControl>
<FormMessage />
</FormItem>
)}