chaos/chaos-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: migrate select to Base UI items API (#4655)

Browse Source
This commit is contained in:
yyhhyyyyyy
2026-05-06 21:38:58 +08:00
committed by GitHub
parent 38a3314b9b
commit d98f0e8ac3
38 changed files with 1187 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/channels/components/dialogs/channel-test-dialog.tsx
Vendored
+18 -9
View File
@@ -25,6 +25,7 @@ import { Label } from '@/components/ui/label'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -431,21 +432,29 @@ export function ChannelTestDialog({
<div className='grid gap-2'>
<Label htmlFor='endpoint-type'>{t('Endpoint Type')}</Label>
<Select
items={[
...endpointTypeOptions.map((option) => {
const itemValue = option.value
return { value: itemValue, label: t(option.label) }
}),
]}
value={endpointType}
onValueChange={(v) => v !== null && setEndpointType(v)}
>
<SelectTrigger id='endpoint-type'>
<SelectValue placeholder={t('Auto detect (default)')} />
</SelectTrigger>
<SelectContent>
{endpointTypeOptions.map((option) => {
const itemValue = option.value
return (
<SelectItem key={itemValue} value={itemValue}>
{t(option.label)}
</SelectItem>
)
})}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{endpointTypeOptions.map((option) => {
const itemValue = option.value
return (
<SelectItem key={itemValue} value={itemValue}>
{t(option.label)}
</SelectItem>
)
})}
</SelectGroup>
</SelectContent>
</Select>
<p className='text-muted-foreground text-xs'>
web/default/src/features/channels/components/dialogs/edit-tag-dialog.tsx
Vendored
+17 -8
View File
@@ -18,6 +18,7 @@ import { ScrollArea } from '@/components/ui/scroll-area'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -276,6 +277,12 @@ export function EditTagDialog({ open, onOpenChange }: EditTagDialogProps) {
<div className='flex gap-2'>
<Select<string>
items={[
...availableModels.map((model) => ({
value: model,
label: model,
})),
]}
onValueChange={(value) => {
if (value === null) return
if (!selectedModels.includes(value)) {
@@ -288,14 +295,16 @@ export function EditTagDialog({ open, onOpenChange }: EditTagDialogProps) {
placeholder={t('Add from available models...')}
/>
</SelectTrigger>
<SelectContent>
<ScrollArea className='h-60'>
{availableModels.map((model) => (
<SelectItem key={model} value={model}>
{model}
</SelectItem>
))}
</ScrollArea>
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
<ScrollArea className='h-60'>
{availableModels.map((model) => (
<SelectItem key={model} value={model}>
{model}
</SelectItem>
))}
</ScrollArea>
</SelectGroup>
</SelectContent>
</Select>
</div>
web/default/src/features/channels/components/dialogs/multi-key-manage-dialog.tsx
Vendored
+15 -6
View File
@@ -14,6 +14,7 @@ import {
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -257,18 +258,26 @@ export function MultiKeyManageDialog({
{/* Toolbar */}
<div className='flex shrink-0 items-center justify-between'>
<Select
items={[
...MULTI_KEY_FILTER_OPTIONS.map((option) => ({
value: option.value,
label: t(option.label),
})),
]}
value={statusFilter === null ? 'all' : statusFilter.toString()}
onValueChange={(v) => v !== null && handleStatusFilterChange(v)}
>
<SelectTrigger className='w-40'>
<SelectValue placeholder={t('All Status')} />
</SelectTrigger>
<SelectContent>
{MULTI_KEY_FILTER_OPTIONS.map((option) => (
<SelectItem key={option.value} value={option.value}>
{t(option.label)}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{MULTI_KEY_FILTER_OPTIONS.map((option) => (
<SelectItem key={option.value} value={option.value}>
{t(option.label)}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
web/default/src/features/channels/components/dialogs/param-override-editor-dialog.tsx
Vendored
+105 -44
View File
@@ -38,6 +38,7 @@ import { ScrollArea } from '@/components/ui/scroll-area'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -1722,6 +1723,12 @@ export function ParamOverrideEditorDialog(
{t('Template')}
</span>
<Select
items={[
...templatePresetOptions.map((o) => ({
value: o.value,
label: t(o.label),
})),
]}
value={templatePresetKey}
onValueChange={(v) =>
setTemplatePresetKey(v || 'operations_default')
@@ -1730,12 +1737,14 @@ export function ParamOverrideEditorDialog(
<SelectTrigger className='h-8 w-[220px]'>
<SelectValue />
</SelectTrigger>
<SelectContent>
{templatePresetOptions.map((o) => (
<SelectItem key={o.value} value={o.value}>
{t(o.label)}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{templatePresetOptions.map((o) => (
<SelectItem key={o.value} value={o.value}>
{t(o.label)}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<Button
@@ -2140,6 +2149,12 @@ function RuleEditor(ruleEditorProps: RuleEditorProps) {
<div className='space-y-1.5'>
<label className='text-xs font-medium'>{t('Operation Type')}</label>
<Select
items={[
...OPERATION_MODE_OPTIONS.map((o) => ({
value: o.value,
label: t(o.label),
})),
]}
value={mode}
onValueChange={(nextMode) =>
nextMode !== null &&
@@ -2151,12 +2166,14 @@ function RuleEditor(ruleEditorProps: RuleEditorProps) {
<SelectTrigger className='h-9'>
<SelectValue />
</SelectTrigger>
<SelectContent>
{OPERATION_MODE_OPTIONS.map((o) => (
<SelectItem key={o.value} value={o.value}>
{t(o.label)}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{OPERATION_MODE_OPTIONS.map((o) => (
<SelectItem key={o.value} value={o.value}>
{t(o.label)}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
@@ -2339,6 +2356,10 @@ function RuleEditor(ruleEditorProps: RuleEditorProps) {
<div className='flex items-center gap-2'>
<span className='text-sm font-medium'>{t('Conditions')}</span>
<Select
items={[
{ value: 'OR', label: t('Match Any (OR)') },
{ value: 'AND', label: t('Match All (AND)') },
]}
value={operation.logic || 'OR'}
onValueChange={(v) =>
v !== null &&
@@ -2350,9 +2371,11 @@ function RuleEditor(ruleEditorProps: RuleEditorProps) {
<SelectTrigger className='h-7 w-[120px] text-xs'>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value='OR'>{t('Match Any (OR)')}</SelectItem>
<SelectItem value='AND'>{t('Match All (AND)')}</SelectItem>
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
<SelectItem value='OR'>{t('Match Any (OR)')}</SelectItem>
<SelectItem value='AND'>{t('Match All (AND)')}</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
@@ -2515,6 +2538,12 @@ function ConditionEditor(conditionEditorProps: ConditionEditorProps) {
{t('Match Mode')}
</label>
<Select
items={[
...CONDITION_MODE_OPTIONS.map((o) => ({
value: o.value,
label: t(o.label),
})),
]}
value={condition.mode}
onValueChange={(v) =>
v !== null &&
@@ -2528,12 +2557,14 @@ function ConditionEditor(conditionEditorProps: ConditionEditorProps) {
<SelectTrigger className='h-8 text-xs'>
<SelectValue />
</SelectTrigger>
<SelectContent>
{CONDITION_MODE_OPTIONS.map((o) => (
<SelectItem key={o.value} value={o.value}>
{t(o.label)}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{CONDITION_MODE_OPTIONS.map((o) => (
<SelectItem key={o.value} value={o.value}>
{t(o.label)}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
@@ -2889,6 +2920,10 @@ function PruneObjectsEditor(pruneObjectsEditorProps: PruneObjectsEditorProps) {
<div className='space-y-1'>
<label className='text-xs font-medium'>{t('Logic')}</label>
<Select
items={[
{ value: 'AND', label: t('All Must Match (AND)') },
{ value: 'OR', label: t('Any Match (OR)') },
]}
value={draft.logic}
onValueChange={(v) =>
pruneObjectsEditorProps.updateDraft(
@@ -2900,11 +2935,13 @@ function PruneObjectsEditor(pruneObjectsEditorProps: PruneObjectsEditorProps) {
<SelectTrigger className='h-8 text-xs'>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value='AND'>
{t('All Must Match (AND)')}
</SelectItem>
<SelectItem value='OR'>{t('Any Match (OR)')}</SelectItem>
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
<SelectItem value='AND'>
{t('All Must Match (AND)')}
</SelectItem>
<SelectItem value='OR'>{t('Any Match (OR)')}</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
@@ -3021,6 +3058,12 @@ function PruneObjectsEditor(pruneObjectsEditorProps: PruneObjectsEditorProps) {
{t('Match Mode')}
</label>
<Select
items={[
...CONDITION_MODE_OPTIONS.map((o) => ({
value: o.value,
label: t(o.label),
})),
]}
value={rule.mode}
onValueChange={(v) =>
v !== null &&
@@ -3034,12 +3077,14 @@ function PruneObjectsEditor(pruneObjectsEditorProps: PruneObjectsEditorProps) {
<SelectTrigger className='h-7 text-xs'>
<SelectValue />
</SelectTrigger>
<SelectContent>
{CONDITION_MODE_OPTIONS.map((o) => (
<SelectItem key={o.value} value={o.value}>
{t(o.label)}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{CONDITION_MODE_OPTIONS.map((o) => (
<SelectItem key={o.value} value={o.value}>
{t(o.label)}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
@@ -3126,6 +3171,12 @@ function SyncFieldsEditor(syncFieldsEditorProps: SyncFieldsEditorProps) {
</label>
<div className='flex gap-2'>
<Select
items={[
...SYNC_TARGET_TYPE_OPTIONS.map((o) => ({
value: o.value,
label: t(o.label),
})),
]}
value={syncFieldsEditorProps.syncFromTarget.type || 'json'}
onValueChange={(v) =>
v !== null &&
@@ -3143,12 +3194,14 @@ function SyncFieldsEditor(syncFieldsEditorProps: SyncFieldsEditorProps) {
<SelectTrigger className='h-8 w-[110px] text-xs'>
<SelectValue />
</SelectTrigger>
<SelectContent>
{SYNC_TARGET_TYPE_OPTIONS.map((o) => (
<SelectItem key={o.value} value={o.value}>
{t(o.label)}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{SYNC_TARGET_TYPE_OPTIONS.map((o) => (
<SelectItem key={o.value} value={o.value}>
{t(o.label)}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<Input
@@ -3175,6 +3228,12 @@ function SyncFieldsEditor(syncFieldsEditorProps: SyncFieldsEditorProps) {
</label>
<div className='flex gap-2'>
<Select
items={[
...SYNC_TARGET_TYPE_OPTIONS.map((o) => ({
value: o.value,
label: t(o.label),
})),
]}
value={syncFieldsEditorProps.syncToTarget.type || 'json'}
onValueChange={(v) =>
v !== null &&
@@ -3192,12 +3251,14 @@ function SyncFieldsEditor(syncFieldsEditorProps: SyncFieldsEditorProps) {
<SelectTrigger className='h-8 w-[110px] text-xs'>
<SelectValue />
</SelectTrigger>
<SelectContent>
{SYNC_TARGET_TYPE_OPTIONS.map((o) => (
<SelectItem key={o.value} value={o.value}>
{t(o.label)}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{SYNC_TARGET_TYPE_OPTIONS.map((o) => (
<SelectItem key={o.value} value={o.value}>
{t(o.label)}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<Input
web/default/src/features/channels/components/drawers/channel-mutate-drawer.tsx
Vendored
+107 -45
View File
@@ -59,6 +59,7 @@ import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -1376,6 +1377,13 @@ export function ChannelMutateDrawer({
<FormItem>
<FormLabel>{t('AWS Key Format')}</FormLabel>
<Select
items={[
{
value: 'ak_sk',
label: t('AccessKey / SecretAccessKey'),
},
{ value: 'api_key', label: t('API Key') },
]}
onValueChange={field.onChange}
value={field.value}
>
@@ -1386,13 +1394,15 @@ export function ChannelMutateDrawer({
/>
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value='ak_sk'>
{t('AccessKey / SecretAccessKey')}
</SelectItem>
<SelectItem value='api_key'>
{t('API Key')}
</SelectItem>
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
<SelectItem value='ak_sk'>
{t('AccessKey / SecretAccessKey')}
</SelectItem>
<SelectItem value='api_key'>
{t('API Key')}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<FormDescription>
@@ -1534,6 +1544,10 @@ export function ChannelMutateDrawer({
<FormItem>
<FormLabel>{t('Vertex AI Key Format')}</FormLabel>
<Select
items={[
{ value: 'json', label: t('JSON') },
{ value: 'api_key', label: t('API Key') },
]}
onValueChange={field.onChange}
value={field.value}
>
@@ -1542,11 +1556,15 @@ export function ChannelMutateDrawer({
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value='json'>{t('JSON')}</SelectItem>
<SelectItem value='api_key'>
{t('API Key')}
</SelectItem>
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
<SelectItem value='json'>
{t('JSON')}
</SelectItem>
<SelectItem value='api_key'>
{t('API Key')}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<FormDescription>
@@ -1672,6 +1690,22 @@ export function ChannelMutateDrawer({
{t('API Base URL *')}
</FormLabel>
<Select
items={[
{
value: 'https://ark.cn-beijing.volces.com',
label: t('https://ark.cn-beijing.volces.com'),
},
{
value: 'https://ark.ap-southeast.bytepluses.com',
label: t(
'https://ark.ap-southeast.bytepluses.com'
),
},
{
value: 'doubao-coding-plan',
label: t('Doubao Coding Plan'),
},
]}
onValueChange={field.onChange}
value={
field.value || 'https://ark.cn-beijing.volces.com'
@@ -1682,16 +1716,18 @@ export function ChannelMutateDrawer({
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value='https://ark.cn-beijing.volces.com'>
{t('https://ark.cn-beijing.volces.com')}
</SelectItem>
<SelectItem value='https://ark.ap-southeast.bytepluses.com'>
{t('https://ark.ap-southeast.bytepluses.com')}
</SelectItem>
<SelectItem value='doubao-coding-plan'>
{t('Doubao Coding Plan')}
</SelectItem>
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
<SelectItem value='https://ark.cn-beijing.volces.com'>
{t('https://ark.cn-beijing.volces.com')}
</SelectItem>
<SelectItem value='https://ark.ap-southeast.bytepluses.com'>
{t('https://ark.ap-southeast.bytepluses.com')}
</SelectItem>
<SelectItem value='doubao-coding-plan'>
{t('Doubao Coding Plan')}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<FormDescription>
@@ -1790,6 +1826,12 @@ export function ChannelMutateDrawer({
<FormItem>
<FormLabel>{t('Add Mode')}</FormLabel>
<Select
items={[
...ADD_MODE_OPTIONS.map((option) => ({
value: option.value,
label: t(option.label),
})),
]}
onValueChange={field.onChange}
value={field.value}
>
@@ -1798,15 +1840,17 @@ export function ChannelMutateDrawer({
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
{ADD_MODE_OPTIONS.map((option) => (
<SelectItem
key={option.value}
value={option.value}
>
{t(option.label)}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{ADD_MODE_OPTIONS.map((option) => (
<SelectItem
key={option.value}
value={option.value}
>
{t(option.label)}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<FormDescription>
@@ -2027,6 +2071,16 @@ export function ChannelMutateDrawer({
<FormItem>
<FormLabel>{t('Key Update Mode')}</FormLabel>
<Select
items={[
{
value: 'append',
label: t('Append to existing keys'),
},
{
value: 'replace',
label: t('Replace all existing keys'),
},
]}
onValueChange={field.onChange}
value={field.value}
>
@@ -2035,13 +2089,15 @@ export function ChannelMutateDrawer({
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value='append'>
{t('Append to existing keys')}
</SelectItem>
<SelectItem value='replace'>
{t('Replace all existing keys')}
</SelectItem>
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
<SelectItem value='append'>
{t('Append to existing keys')}
</SelectItem>
<SelectItem value='replace'>
{t('Replace all existing keys')}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<FormDescription>
@@ -2067,6 +2123,10 @@ export function ChannelMutateDrawer({
<FormItem>
<FormLabel>{t('Multi-Key Strategy')}</FormLabel>
<Select
items={[
{ value: 'random', label: t('Random') },
{ value: 'polling', label: t('Polling') },
]}
onValueChange={field.onChange}
value={field.value}
>
@@ -2075,13 +2135,15 @@ export function ChannelMutateDrawer({
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value='random'>
{t('Random')}
</SelectItem>
<SelectItem value='polling'>
{t('Polling')}
</SelectItem>
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
<SelectItem value='random'>
{t('Random')}
</SelectItem>
<SelectItem value='polling'>
{t('Polling')}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<FormDescription>