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