Skip to content

Commit df0ad87

Browse files
SpicyPeteSpicyPete
committed
Updating some migration stuff
1 parent c7f1583 commit df0ad87

4 files changed

Lines changed: 75 additions & 29 deletions

File tree

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

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

37+
// Single source of truth for the scope picker: drives the Select's `items` (so
38+
// `<SelectValue>` resolves the label without flashing the raw value), the
39+
// rendered `<SelectItem>`s, the config file shown in step 4, and the help text.
40+
const SCOPE_OPTIONS = [
41+
{
42+
value: 'local',
43+
label: 'Local',
44+
configFile: '~/.claude.json',
45+
description: 'Configuration stored locally for this project only',
46+
},
47+
{
48+
value: 'user',
49+
label: 'User',
50+
configFile: '~/.claude.json',
51+
description: (
52+
<Text as="span">
53+
Configuration available across all your projects in <InlineCode>~/.claude.json</InlineCode>
54+
</Text>
55+
),
56+
},
57+
{
58+
value: 'project',
59+
label: 'Project',
60+
configFile: '.mcp.json',
61+
description: (
62+
<Text as="span">
63+
Configuration shared with team using <InlineCode>.mcp.json</InlineCode> file in project
64+
</Text>
65+
),
66+
},
67+
] as const;
68+
3769
export const ClientClaudeCode = ({ mcpServer }: ClientClaudeCodeProps) => {
3870
const [selectedScope, setSelectedScope] = useState<string>('local');
3971

@@ -56,6 +88,8 @@ export const ClientClaudeCode = ({ mcpServer }: ClientClaudeCodeProps) => {
5688
isServerless: config.isServerless,
5789
});
5890

91+
const selectedScopeOption = SCOPE_OPTIONS.find((option) => option.value === selectedScope);
92+
5993
return (
6094
<div className="space-y-4">
6195
<div className="flex flex-col gap-4">
@@ -74,36 +108,24 @@ export const ClientClaudeCode = ({ mcpServer }: ClientClaudeCodeProps) => {
74108
</div>
75109
<Label className="font-medium text-sm">Scope</Label>
76110
<div>
77-
<Select
78-
items={{ local: 'Local', user: 'User', project: 'Project' }}
79-
onValueChange={setSelectedScope}
80-
value={selectedScope}
81-
>
111+
<Select items={SCOPE_OPTIONS} onValueChange={setSelectedScope} value={selectedScope}>
82112
<SelectTrigger className="w-[180px]">
83113
<SelectValue placeholder="Select scope" />
84114
</SelectTrigger>
85115
<SelectContent>
86116
<SelectGroup>
87117
<SelectLabel>Configuration Scope</SelectLabel>
88-
<SelectItem value="local">Local</SelectItem>
89-
<SelectItem value="user">User</SelectItem>
90-
<SelectItem value="project">Project</SelectItem>
118+
{SCOPE_OPTIONS.map((option) => (
119+
<SelectItem key={option.value} value={option.value}>
120+
{option.label}
121+
</SelectItem>
122+
))}
91123
</SelectGroup>
92124
</SelectContent>
93125
</Select>
94126
</div>
95127
<Text className="text-muted-foreground" variant="small">
96-
{selectedScope === 'local' && 'Configuration stored locally for this project only'}
97-
{selectedScope === 'project' && (
98-
<Text as="span">
99-
Configuration shared with team using <InlineCode>.mcp.json</InlineCode> file in project
100-
</Text>
101-
)}
102-
{selectedScope === 'user' && (
103-
<Text as="span">
104-
Configuration available across all your projects in <InlineCode>~/.claude.json</InlineCode>
105-
</Text>
106-
)}
128+
{selectedScopeOption?.description}
107129
</Text>
108130
</div>
109131
</ListItem>
@@ -116,9 +138,7 @@ export const ClientClaudeCode = ({ mcpServer }: ClientClaudeCodeProps) => {
116138
<ListItem>
117139
<div className="flex flex-wrap items-center gap-1">
118140
<span>Alternatively, you can manually update</span>
119-
{selectedScope === 'local' && <InlineCode className="whitespace-nowrap">~/.claude.json</InlineCode>}
120-
{selectedScope === 'user' && <InlineCode className="whitespace-nowrap">~/.claude.json</InlineCode>}
121-
{selectedScope === 'project' && <InlineCode className="whitespace-nowrap">.mcp.json</InlineCode>}
141+
<InlineCode className="whitespace-nowrap">{selectedScopeOption?.configFile}</InlineCode>
122142
<span>with:</span>
123143
</div>
124144
<DynamicCodeBlock code={claudeCodeConfigJson} lang="json" />

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

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

37+
// Single source of truth for the scope picker: drives the Select's `items` (so
38+
// `<SelectValue>` resolves the label without flashing the raw value), the
39+
// rendered `<SelectItem>`s, and the help text below.
40+
const SCOPE_OPTIONS = [
41+
{
42+
value: 'user',
43+
label: 'User',
44+
description: 'Configuration available across all your projects',
45+
},
46+
{
47+
value: 'project',
48+
label: 'Project',
49+
description: 'Configuration shared with team through project settings',
50+
},
51+
] as const;
52+
3753
export const ClientGemini = ({ mcpServer }: ClientGeminiProps) => {
3854
const [selectedScope, setSelectedScope] = useState<string>('user');
3955

@@ -74,22 +90,24 @@ export const ClientGemini = ({ mcpServer }: ClientGeminiProps) => {
7490
</div>
7591
<Label className="font-medium text-sm">Scope</Label>
7692
<div>
77-
<Select items={{ user: 'User', project: 'Project' }} onValueChange={setSelectedScope} value={selectedScope}>
93+
<Select items={SCOPE_OPTIONS} onValueChange={setSelectedScope} value={selectedScope}>
7894
<SelectTrigger className="w-[180px]">
7995
<SelectValue placeholder="Select scope" />
8096
</SelectTrigger>
8197
<SelectContent>
8298
<SelectGroup>
8399
<SelectLabel>Configuration Scope</SelectLabel>
84-
<SelectItem value="user">User</SelectItem>
85-
<SelectItem value="project">Project</SelectItem>
100+
{SCOPE_OPTIONS.map((option) => (
101+
<SelectItem key={option.value} value={option.value}>
102+
{option.label}
103+
</SelectItem>
104+
))}
86105
</SelectGroup>
87106
</SelectContent>
88107
</Select>
89108
</div>
90109
<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'}
110+
{SCOPE_OPTIONS.find((option) => option.value === selectedScope)?.description}
93111
</Text>
94112
</div>
95113
</ListItem>

‎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 items={TIME_RANGES} 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/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 items={TIME_RANGES} 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>

0 commit comments

Comments
 (0)