Skip to content

Commit ec19e48

Browse files
SpicyPeteSpicyPete
authored
Bug - Select migration display value fixes (#2519)
* Select migration fixes * Updating some migration stuff * comment reduction
1 parent 44fc8fe commit ec19e48

16 files changed

Lines changed: 123 additions & 33 deletions

File tree

‎frontend/src/components/pages/agents/details/ai-agent-transcripts-tab.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export const AIAgentTranscriptsTab = () => {
107107
value={searchQuery}
108108
/>
109109
</div>
110-
<Select onValueChange={setStatusFilter} value={statusFilter}>
110+
<Select items={STATUS_FILTER_OPTIONS} onValueChange={setStatusFilter} value={statusFilter}>
111111
<SelectTrigger className="w-[140px]">
112112
<SelectValue placeholder="Status" />
113113
</SelectTrigger>

‎frontend/src/components/pages/mcp-servers/connect-client-guide/clients/claude-code.tsx‎

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,36 @@ type ClientClaudeCodeProps = {
3434
mcpServer: MCPServer;
3535
};
3636

37+
// Drives the scope Select's items, options, config file, and help text.
38+
const SCOPE_OPTIONS = [
39+
{
40+
value: 'local',
41+
label: 'Local',
42+
configFile: '~/.claude.json',
43+
description: 'Configuration stored locally for this project only',
44+
},
45+
{
46+
value: 'user',
47+
label: 'User',
48+
configFile: '~/.claude.json',
49+
description: (
50+
<Text as="span">
51+
Configuration available across all your projects in <InlineCode>~/.claude.json</InlineCode>
52+
</Text>
53+
),
54+
},
55+
{
56+
value: 'project',
57+
label: 'Project',
58+
configFile: '.mcp.json',
59+
description: (
60+
<Text as="span">
61+
Configuration shared with team using <InlineCode>.mcp.json</InlineCode> file in project
62+
</Text>
63+
),
64+
},
65+
] as const;
66+
3767
export const ClientClaudeCode = ({ mcpServer }: ClientClaudeCodeProps) => {
3868
const [selectedScope, setSelectedScope] = useState<string>('local');
3969

@@ -56,6 +86,8 @@ export const ClientClaudeCode = ({ mcpServer }: ClientClaudeCodeProps) => {
5686
isServerless: config.isServerless,
5787
});
5888

89+
const selectedScopeOption = SCOPE_OPTIONS.find((option) => option.value === selectedScope);
90+
5991
return (
6092
<div className="space-y-4">
6193
<div className="flex flex-col gap-4">
@@ -74,32 +106,24 @@ export const ClientClaudeCode = ({ mcpServer }: ClientClaudeCodeProps) => {
74106
</div>
75107
<Label className="font-medium text-sm">Scope</Label>
76108
<div>
77-
<Select onValueChange={setSelectedScope} value={selectedScope}>
109+
<Select items={SCOPE_OPTIONS} onValueChange={setSelectedScope} value={selectedScope}>
78110
<SelectTrigger className="w-[180px]">
79111
<SelectValue placeholder="Select scope" />
80112
</SelectTrigger>
81113
<SelectContent>
82114
<SelectGroup>
83115
<SelectLabel>Configuration Scope</SelectLabel>
84-
<SelectItem value="local">Local</SelectItem>
85-
<SelectItem value="user">User</SelectItem>
86-
<SelectItem value="project">Project</SelectItem>
116+
{SCOPE_OPTIONS.map((option) => (
117+
<SelectItem key={option.value} value={option.value}>
118+
{option.label}
119+
</SelectItem>
120+
))}
87121
</SelectGroup>
88122
</SelectContent>
89123
</Select>
90124
</div>
91125
<Text className="text-muted-foreground" variant="small">
92-
{selectedScope === 'local' && 'Configuration stored locally for this project only'}
93-
{selectedScope === 'project' && (
94-
<Text as="span">
95-
Configuration shared with team using <InlineCode>.mcp.json</InlineCode> file in project
96-
</Text>
97-
)}
98-
{selectedScope === 'user' && (
99-
<Text as="span">
100-
Configuration available across all your projects in <InlineCode>~/.claude.json</InlineCode>
101-
</Text>
102-
)}
126+
{selectedScopeOption?.description}
103127
</Text>
104128
</div>
105129
</ListItem>
@@ -112,9 +136,7 @@ export const ClientClaudeCode = ({ mcpServer }: ClientClaudeCodeProps) => {
112136
<ListItem>
113137
<div className="flex flex-wrap items-center gap-1">
114138
<span>Alternatively, you can manually update</span>
115-
{selectedScope === 'local' && <InlineCode className="whitespace-nowrap">~/.claude.json</InlineCode>}
116-
{selectedScope === 'user' && <InlineCode className="whitespace-nowrap">~/.claude.json</InlineCode>}
117-
{selectedScope === 'project' && <InlineCode className="whitespace-nowrap">.mcp.json</InlineCode>}
139+
<InlineCode className="whitespace-nowrap">{selectedScopeOption?.configFile}</InlineCode>
118140
<span>with:</span>
119141
</div>
120142
<DynamicCodeBlock code={claudeCodeConfigJson} lang="json" />

‎frontend/src/components/pages/mcp-servers/connect-client-guide/clients/gemini.tsx‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,20 @@ type ClientGeminiProps = {
3434
mcpServer: MCPServer;
3535
};
3636

37+
// Drives the scope Select's items, options, and help text.
38+
const SCOPE_OPTIONS = [
39+
{
40+
value: 'user',
41+
label: 'User',
42+
description: 'Configuration available across all your projects',
43+
},
44+
{
45+
value: 'project',
46+
label: 'Project',
47+
description: 'Configuration shared with team through project settings',
48+
},
49+
] as const;
50+
3751
export const ClientGemini = ({ mcpServer }: ClientGeminiProps) => {
3852
const [selectedScope, setSelectedScope] = useState<string>('user');
3953

@@ -74,22 +88,24 @@ export const ClientGemini = ({ mcpServer }: ClientGeminiProps) => {
7488
</div>
7589
<Label className="font-medium text-sm">Scope</Label>
7690
<div>
77-
<Select onValueChange={setSelectedScope} value={selectedScope}>
91+
<Select items={SCOPE_OPTIONS} onValueChange={setSelectedScope} value={selectedScope}>
7892
<SelectTrigger className="w-[180px]">
7993
<SelectValue placeholder="Select scope" />
8094
</SelectTrigger>
8195
<SelectContent>
8296
<SelectGroup>
8397
<SelectLabel>Configuration Scope</SelectLabel>
84-
<SelectItem value="user">User</SelectItem>
85-
<SelectItem value="project">Project</SelectItem>
98+
{SCOPE_OPTIONS.map((option) => (
99+
<SelectItem key={option.value} value={option.value}>
100+
{option.label}
101+
</SelectItem>
102+
))}
86103
</SelectGroup>
87104
</SelectContent>
88105
</Select>
89106
</div>
90107
<Text className="text-muted-foreground" variant="small">
91-
{selectedScope === 'user' && 'Configuration available across all your projects'}
92-
{selectedScope === 'project' && 'Configuration shared with team through project settings'}
108+
{SCOPE_OPTIONS.find((option) => option.value === selectedScope)?.description}
93109
</Text>
94110
</div>
95111
</ListItem>

‎frontend/src/components/pages/mcp-servers/connect-client-guide/install-rpk-list-item.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,11 @@ export const InstallRpkListItem = () => {
6565
<div>Install rpk:</div>
6666
<Label className="font-medium text-sm">Installation Method</Label>
6767
<div>
68-
<Select onValueChange={setSelectedMethod} value={selectedMethod}>
68+
<Select
69+
items={installMethods.map((method) => ({ value: method.id, label: method.name }))}
70+
onValueChange={setSelectedMethod}
71+
value={selectedMethod}
72+
>
6973
<SelectTrigger className="w-full max-w-md">
7074
<SelectValue />
7175
</SelectTrigger>

‎frontend/src/components/pages/mcp-servers/connect-client-guide/remote-mcp-connect-client-guide.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,11 @@ export const RemoteMCPConnectClientGuide = ({ mcpServer }: RemoteMCPConnectClien
105105
<div className="space-y-2">
106106
<Label className="font-medium text-sm">Connect to your client</Label>
107107
<div>
108-
<Select onValueChange={(value) => setClient(value as ClientType)} value={client}>
108+
<Select
109+
items={AVAILABLE_CLIENTS.map((clientId) => ({ value: clientId, label: CLIENT_INFO[clientId].name }))}
110+
onValueChange={(value) => setClient(value as ClientType)}
111+
value={client}
112+
>
109113
<SelectTrigger className="w-[180px]">
110114
<SelectValue placeholder="Select a client" />
111115
</SelectTrigger>

‎frontend/src/components/pages/observability/observability-toolbar.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,11 @@ export const ObservabilityToolbar: FC<ObservabilityToolbarProps> = ({
5656
<div className="flex gap-6">
5757
<div>
5858
<div className="mb-1 text-gray-600 text-xs">TIME RANGE</div>
59-
<Select onValueChange={(value) => onTimeRangeChange(value as TimeRange)} value={selectedTimeRange}>
59+
<Select
60+
items={TIME_RANGES}
61+
onValueChange={(value) => onTimeRangeChange(value as TimeRange)}
62+
value={selectedTimeRange}
63+
>
6064
<SelectTrigger className="h-8 w-[145px] text-sm">
6165
<SelectValue />
6266
</SelectTrigger>

‎frontend/src/components/pages/rp-connect/onboarding/advanced-topic-settings.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ const RetentionInputGroup = memo<RetentionInputGroupProps>(
151151
render={({ field }) => (
152152
<FormItem>
153153
<FormControl>
154-
<Select disabled={field.disabled} onValueChange={field.onChange} value={field.value}>
154+
<Select disabled={field.disabled} items={units} onValueChange={field.onChange} value={field.value}>
155155
<SelectTrigger className="w-32 bg-gray-200" disabled={field.disabled}>
156156
<SelectValue />
157157
</SelectTrigger>

‎frontend/src/components/pages/rp-connect/pipeline/pipeline-throughput-card.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,11 @@ export const PipelineThroughputCard: FC<PipelineThroughputCardProps> = ({ pipeli
211211
<div className="flex items-center justify-between gap-2">
212212
<Heading level={3}>Throughput</Heading>
213213
<div className="flex items-center gap-1">
214-
<Select onValueChange={(v) => setSelectedTimeRange(v as TimeRange)} value={selectedTimeRange}>
214+
<Select
215+
items={TIME_RANGES}
216+
onValueChange={(v) => setSelectedTimeRange(v as TimeRange)}
217+
value={selectedTimeRange}
218+
>
215219
<SelectTrigger size="sm">
216220
<SelectValue />
217221
</SelectTrigger>

‎frontend/src/components/pages/rp-connect/template-gallery/slot-fields/select-slot.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const SelectSlotField = ({ slot, control }: SelectSlotFieldProps) => (
3535
required={slot.required}
3636
>
3737
{(field) => (
38-
<Select onValueChange={field.onChange} value={field.value ?? ''}>
38+
<Select items={slot.options} onValueChange={field.onChange} value={field.value ?? ''}>
3939
<SelectTrigger data-testid={`slot-${slot.id}`}>
4040
<SelectValue placeholder="Select an option..." />
4141
</SelectTrigger>

‎frontend/src/components/pages/schemas/schema-create.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -629,6 +629,12 @@ const SchemaEditor = (p: {
629629
<FieldLabel>Strategy</FieldLabel>
630630
<Select
631631
disabled={isAddVersion}
632+
items={{
633+
TOPIC: 'Topic Name',
634+
RECORD_NAME: 'Record Name',
635+
TOPIC_RECORD_NAME: 'Topic-Record Name',
636+
CUSTOM: 'Custom',
637+
}}
632638
onValueChange={(e) => {
633639
p.onStateChange((prev) => ({ ...prev, userInput: '', strategy: e as NamingStrategy }));
634640
}}
@@ -919,6 +925,7 @@ const ReferencesEditor = (p: {
919925
<Field>
920926
<FieldLabel>Context</FieldLabel>
921927
<Select
928+
items={p.contextSelectOptions}
922929
onValueChange={(contextId) => {
923930
p.onStateChange((prev) => ({
924931
...prev,

0 commit comments

Comments
 (0)