From 4a1512f39eab2cd05b96e85ed8d4532b7f3e6b96 Mon Sep 17 00:00:00 2001
From: Owen <owen@txv.io>
Date: Fri, 16 Oct 2026 10:34:50 -0400
Subject: [PATCH] Switch dropdown to describeselect component

---
 messages/en-US.json                           |  2 +
 .../resources/public/[niceId]/http/page.tsx   | 67 ++++++++-----------
 2 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index 4d3202ce0..6864ef489 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -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",
diff --git a/src/app/[orgId]/settings/resources/public/[niceId]/http/page.tsx b/src/app/[orgId]/settings/resources/public/[niceId]/http/page.tsx
index a165db9c7..fcdd9b25a 100644
--- a/src/app/[orgId]/settings/resources/public/[niceId]/http/page.tsx
+++ b/src/app/[orgId]/settings/resources/public/[niceId]/http/page.tsx
@@ -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>
                                         )}