Select migration fixes

SpicyPete · SpicyPete · commit c7f1583e1174 · 2026-06-19T11:05:01.000-07:00
diff --git a/frontend/src/components/pages/agents/details/ai-agent-transcripts-tab.tsx b/frontend/src/components/pages/agents/details/ai-agent-transcripts-tab.tsx
@@ -107,7 +107,7 @@ export const AIAgentTranscriptsTab = () => {
             value={searchQuery}
           />
         </div>
-        <Select onValueChange={setStatusFilter} value={statusFilter}>
+        <Select items={STATUS_FILTER_OPTIONS} onValueChange={setStatusFilter} value={statusFilter}>
           <SelectTrigger className="w-[140px]">
             <SelectValue placeholder="Status" />
           </SelectTrigger>
diff --git a/frontend/src/components/pages/mcp-servers/connect-client-guide/clients/claude-code.tsx b/frontend/src/components/pages/mcp-servers/connect-client-guide/clients/claude-code.tsx
@@ -74,7 +74,11 @@ export const ClientClaudeCode = ({ mcpServer }: ClientClaudeCodeProps) => {
               </div>
               <Label className="font-medium text-sm">Scope</Label>
               <div>
-                <Select onValueChange={setSelectedScope} value={selectedScope}>
+                <Select
+                  items={{ local: 'Local', user: 'User', project: 'Project' }}
+                  onValueChange={setSelectedScope}
+                  value={selectedScope}
+                >
                   <SelectTrigger className="w-[180px]">
                     <SelectValue placeholder="Select scope" />
                   </SelectTrigger>
diff --git a/frontend/src/components/pages/mcp-servers/connect-client-guide/clients/gemini.tsx b/frontend/src/components/pages/mcp-servers/connect-client-guide/clients/gemini.tsx
@@ -74,7 +74,7 @@ export const ClientGemini = ({ mcpServer }: ClientGeminiProps) => {
               </div>
               <Label className="font-medium text-sm">Scope</Label>
               <div>
-                <Select onValueChange={setSelectedScope} value={selectedScope}>
+                <Select items={{ user: 'User', project: 'Project' }} onValueChange={setSelectedScope} value={selectedScope}>
                   <SelectTrigger className="w-[180px]">
                     <SelectValue placeholder="Select scope" />
                   </SelectTrigger>
diff --git a/frontend/src/components/pages/mcp-servers/connect-client-guide/install-rpk-list-item.tsx b/frontend/src/components/pages/mcp-servers/connect-client-guide/install-rpk-list-item.tsx
@@ -65,7 +65,11 @@ export const InstallRpkListItem = () => {
         <div>Install rpk:</div>
         <Label className="font-medium text-sm">Installation Method</Label>
         <div>
-          <Select onValueChange={setSelectedMethod} value={selectedMethod}>
+          <Select
+            items={installMethods.map((method) => ({ value: method.id, label: method.name }))}
+            onValueChange={setSelectedMethod}
+            value={selectedMethod}
+          >
             <SelectTrigger className="w-full max-w-md">
               <SelectValue />
             </SelectTrigger>
diff --git a/frontend/src/components/pages/mcp-servers/connect-client-guide/remote-mcp-connect-client-guide.tsx b/frontend/src/components/pages/mcp-servers/connect-client-guide/remote-mcp-connect-client-guide.tsx
@@ -105,7 +105,11 @@ export const RemoteMCPConnectClientGuide = ({ mcpServer }: RemoteMCPConnectClien
     <div className="space-y-2">
       <Label className="font-medium text-sm">Connect to your client</Label>
       <div>
-        <Select onValueChange={(value) => setClient(value as ClientType)} value={client}>
+        <Select
+          items={AVAILABLE_CLIENTS.map((clientId) => ({ value: clientId, label: CLIENT_INFO[clientId].name }))}
+          onValueChange={(value) => setClient(value as ClientType)}
+          value={client}
+        >
           <SelectTrigger className="w-[180px]">
             <SelectValue placeholder="Select a client" />
           </SelectTrigger>
diff --git a/frontend/src/components/pages/observability/observability-toolbar.tsx b/frontend/src/components/pages/observability/observability-toolbar.tsx
@@ -56,7 +56,7 @@ export const ObservabilityToolbar: FC<ObservabilityToolbarProps> = ({
       <div className="flex gap-6">
         <div>
           <div className="mb-1 text-gray-600 text-xs">TIME RANGE</div>
-          <Select onValueChange={(value) => onTimeRangeChange(value as TimeRange)} value={selectedTimeRange}>
+          <Select items={TIME_RANGES} onValueChange={(value) => onTimeRangeChange(value as TimeRange)} value={selectedTimeRange}>
             <SelectTrigger className="h-8 w-[145px] text-sm">
               <SelectValue />
             </SelectTrigger>
diff --git a/frontend/src/components/pages/rp-connect/onboarding/advanced-topic-settings.tsx b/frontend/src/components/pages/rp-connect/onboarding/advanced-topic-settings.tsx
@@ -151,7 +151,7 @@ const RetentionInputGroup = memo<RetentionInputGroupProps>(
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <Select disabled={field.disabled} onValueChange={field.onChange} value={field.value}>
+                  <Select disabled={field.disabled} items={units} onValueChange={field.onChange} value={field.value}>
                     <SelectTrigger className="w-32 bg-gray-200" disabled={field.disabled}>
                       <SelectValue />
                     </SelectTrigger>
diff --git a/frontend/src/components/pages/rp-connect/pipeline/pipeline-throughput-card.tsx b/frontend/src/components/pages/rp-connect/pipeline/pipeline-throughput-card.tsx
@@ -211,7 +211,7 @@ export const PipelineThroughputCard: FC<PipelineThroughputCardProps> = ({ pipeli
       <div className="flex items-center justify-between gap-2">
         <Heading level={3}>Throughput</Heading>
         <div className="flex items-center gap-1">
-          <Select onValueChange={(v) => setSelectedTimeRange(v as TimeRange)} value={selectedTimeRange}>
+          <Select items={TIME_RANGES} onValueChange={(v) => setSelectedTimeRange(v as TimeRange)} value={selectedTimeRange}>
             <SelectTrigger size="sm">
               <SelectValue />
             </SelectTrigger>
diff --git a/frontend/src/components/pages/rp-connect/template-gallery/slot-fields/select-slot.tsx b/frontend/src/components/pages/rp-connect/template-gallery/slot-fields/select-slot.tsx
@@ -35,7 +35,7 @@ export const SelectSlotField = ({ slot, control }: SelectSlotFieldProps) => (
     required={slot.required}
   >
     {(field) => (
-      <Select onValueChange={field.onChange} value={field.value ?? ''}>
+      <Select items={slot.options} onValueChange={field.onChange} value={field.value ?? ''}>
         <SelectTrigger data-testid={`slot-${slot.id}`}>
           <SelectValue placeholder="Select an option..." />
         </SelectTrigger>
diff --git a/frontend/src/components/pages/schemas/schema-create.tsx b/frontend/src/components/pages/schemas/schema-create.tsx
@@ -629,6 +629,12 @@ const SchemaEditor = (p: {
           <FieldLabel>Strategy</FieldLabel>
           <Select
             disabled={isAddVersion}
+            items={{
+              TOPIC: 'Topic Name',
+              RECORD_NAME: 'Record Name',
+              TOPIC_RECORD_NAME: 'Topic-Record Name',
+              CUSTOM: 'Custom',
+            }}
             onValueChange={(e) => {
               p.onStateChange((prev) => ({ ...prev, userInput: '', strategy: e as NamingStrategy }));
             }}
@@ -919,6 +925,7 @@ const ReferencesEditor = (p: {
             <Field>
               <FieldLabel>Context</FieldLabel>
               <Select
+                items={p.contextSelectOptions}
                 onValueChange={(contextId) => {
                   p.onStateChange((prev) => ({
                     ...prev,
diff --git a/frontend/src/components/pages/security/acls/create-acl.tsx b/frontend/src/components/pages/security/acls/create-acl.tsx
@@ -386,6 +386,11 @@ const AclRules = ({
                   <Label className="font-medium text-gray-700 text-sm">Selector</Label>
                   <div className="grid grid-cols-4 gap-3">
                     <Select
+                      items={{
+                        [ResourcePatternTypeAny]: `All ${getPluralResourceName(rule.resourceType)}`,
+                        [ResourcePatternTypeLiteral]: `${getResourceName(rule.resourceType)} names matching`,
+                        [ResourcePatternTypePrefix]: `${getResourceName(rule.resourceType)} names starting with`,
+                      }}
                       onValueChange={(value) =>
                         updateRule(rule.id, {
                           selectorType: value as ResourcePatternType,
@@ -624,6 +629,11 @@ const SharedConfiguration = ({
               <div className="grid grid-cols-4 gap-3">
                 <Select
                   disabled={edit}
+                  items={{
+                    [RoleTypeUser]: 'User',
+                    [RoleTypeGroup]: 'Group',
+                    [RoleTypeRedpandaRole]: 'Redpanda role',
+                  }}
                   onValueChange={(value) => {
                     setPrincipalType(value);
                     // Update the principal to include the new type
@@ -693,6 +703,10 @@ const SharedConfiguration = ({
             <div className="flex gap-3">
               <Select
                 disabled={edit}
+                items={{
+                  [HostTypeAllowAllHosts]: 'Allow all hosts',
+                  [HostTypeSpecificHost]: 'Specific IP addresses',
+                }}
                 onValueChange={(value) => {
                   setHostType(value as HostType);
                   if (value === HostTypeAllowAllHosts) {
diff --git a/frontend/src/components/pages/topics/create-topic-dialog.tsx b/frontend/src/components/pages/topics/create-topic-dialog.tsx
@@ -179,6 +179,7 @@ function RetentionTimeSelect(p: {
     <NumInput
       addonAfter={
         <Select
+          items={options}
           onValueChange={(u) => {
             const newUnit = u as RetentionTimeUnit;
             if (newUnit === 'default') {
@@ -248,6 +249,7 @@ function RetentionSizeSelect(p: {
     <NumInput
       addonAfter={
         <Select
+          items={options}
           onValueChange={(u) => {
             const newUnit = u as RetentionSizeUnit;
             if (newUnit === 'default') {
diff --git a/frontend/src/components/pages/transcripts/components/transcript-filter-bar.tsx b/frontend/src/components/pages/transcripts/components/transcript-filter-bar.tsx
@@ -225,7 +225,11 @@ const AttributeFilterPopover: FC<{
           {/* Operator */}
           <div className="flex flex-col gap-1.5">
             <Label htmlFor="attr-operator">Operator</Label>
-            <Select onValueChange={(v) => setOperator(v as AttributeOperator)} value={operator}>
+            <Select
+              items={OPERATOR_OPTIONS}
+              onValueChange={(v) => setOperator(v as AttributeOperator)}
+              value={operator}
+            >
               <SelectTrigger className="h-8" id="attr-operator">
                 <SelectValue />
               </SelectTrigger>
@@ -413,7 +417,7 @@ export const TranscriptFilterBar: FC<TranscriptFilterBarProps> = ({
         )}
 
         {/* Time range selector */}
-        <Select disabled={jumpedTo !== null} onValueChange={onTimeRangeChange} value={timeRange}>
+        <Select disabled={jumpedTo !== null} items={TIME_RANGES} onValueChange={onTimeRangeChange} value={timeRange}>
           <SelectTrigger className="h-8 w-[140px] text-xs">
             <SelectValue placeholder="Time range" />
           </SelectTrigger>
diff --git a/frontend/src/components/ui/ai-agent/llm-config-section.tsx b/frontend/src/components/ui/ai-agent/llm-config-section.tsx
@@ -201,6 +201,7 @@ export const LLMConfigSection: React.FC<LLMConfigSectionProps> = ({
             render={({ field }) => (
               <Select
                 disabled={isLoadingProviders || (hasAigwDeployed && availableProviders.length === 0)}
+                items={availableProviders.map((provider) => ({ value: provider.id, label: provider.label }))}
                 onValueChange={(value) => {
                   field.onChange(value);
                   handleProviderChange(value);
diff --git a/frontend/src/components/ui/connect/resource-tier-select.tsx b/frontend/src/components/ui/connect/resource-tier-select.tsx
@@ -93,7 +93,11 @@ export const ResourceTierSelect: React.FC<ResourceTierSelectProps> = ({
   onValueChange,
   placeholder = 'Select resource tier',
 }) => (
-  <Select onValueChange={onValueChange} value={value}>
+  <Select
+    items={RESOURCE_TIERS.map((tier) => ({ value: tier.id, label: tier.displayName }))}
+    onValueChange={onValueChange}
+    value={value}
+  >
     <SelectTrigger>
       <SelectValue placeholder={placeholder} />
     </SelectTrigger>
diff --git a/frontend/src/components/ui/secret/secret-selector.tsx b/frontend/src/components/ui/secret/secret-selector.tsx
@@ -203,6 +203,10 @@ export const SecretSelector: React.FC<SecretSelectorProps> = ({
 				// Secrets available - show combobox with create button
 				<div className="flex items-center gap-2">
 					<Select
+						items={availableSecrets.map((secret) => ({
+							value: secret.id,
+							label: secret.name,
+						}))}
 						key={`${extractSecretName(value)}-${availableSecrets.length}`}
 						onValueChange={onChange}
 						value={extractSecretName(value)}

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ export const SelectSlotField = ({ slot, control }: SelectSlotFieldProps) => (`
`35`	`35`	`required={slot.required}`
`36`	`36`	`>`
`37`	`37`	`{(field) => (`
`38`		`- <Select onValueChange={field.onChange} value={field.value ?? ''}>`
	`38`	`+ <Select items={slot.options} onValueChange={field.onChange} value={field.value ?? ''}>`
`39`	`39`	<SelectTrigger data-testid={`slot-${slot.id}`}>
`40`	`40`	`<SelectValue placeholder="Select an option..." />`
`41`	`41`	`</SelectTrigger>`