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/models/components/dialogs/create-deployment-drawer.tsx
Vendored
+24 -9
View File
@@ -18,6 +18,7 @@ import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -432,6 +433,12 @@ export function CreateDeploymentDrawer({
<FormItem>
<FormLabel>{t('Hardware type')}</FormLabel>
<Select
items={[
...hardwareOptions.map((opt) => ({
value: opt.value,
label: opt.label,
})),
]}
value={field.value}
onValueChange={(v) => field.onChange(v)}
disabled={isLoadingHardware}
@@ -441,12 +448,14 @@ export function CreateDeploymentDrawer({
<SelectValue placeholder={t('Select')} />
</SelectTrigger>
</FormControl>
<SelectContent>
{hardwareOptions.map((opt) => (
<SelectItem key={opt.value} value={opt.value}>
{opt.label}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{hardwareOptions.map((opt) => (
<SelectItem key={opt.value} value={opt.value}>
{opt.label}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<FormMessage />
@@ -593,6 +602,10 @@ export function CreateDeploymentDrawer({
<FormItem>
<FormLabel>{t('Billing currency')}</FormLabel>
<Select
items={[
{ value: 'usdc', label: 'USDC' },
{ value: 'iocoin', label: 'IOCOIN' },
]}
value={field.value || 'usdc'}
onValueChange={(v) => field.onChange(v)}
>
@@ -601,9 +614,11 @@ export function CreateDeploymentDrawer({
<SelectValue placeholder={t('Select')} />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value='usdc'>USDC</SelectItem>
<SelectItem value='iocoin'>IOCOIN</SelectItem>
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
<SelectItem value='usdc'>USDC</SelectItem>
<SelectItem value='iocoin'>IOCOIN</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</FormItem>
web/default/src/features/models/components/dialogs/upstream-conflict-dialog.tsx
Vendored
+15 -6
View File
@@ -36,6 +36,7 @@ import {
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -550,6 +551,12 @@ export function UpstreamConflictDialog({
{t('Rows per page')}
</span>
<Select
items={[
...[5, 10, 20, 50].map((size) => ({
value: String(size),
label: size,
})),
]}
value={String(pageSize)}
onValueChange={(value) => {
setPageSize(Number(value))
@@ -559,12 +566,14 @@ export function UpstreamConflictDialog({
<SelectTrigger className='h-8 w-[70px] text-xs sm:h-8 sm:w-[72px]'>
<SelectValue />
</SelectTrigger>
<SelectContent>
{[5, 10, 20, 50].map((size) => (
<SelectItem key={size} value={String(size)}>
{size}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{[5, 10, 20, 50].map((size) => (
<SelectItem key={size} value={String(size)}>
{size}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
web/default/src/features/models/components/dialogs/view-logs-dialog.tsx
Vendored
+50 -19
View File
@@ -12,6 +12,7 @@ import {
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -175,6 +176,27 @@ export function ViewLogsDialog({
{t('Container')}
</div>
<Select
items={[
...containers.flatMap((c) => {
const id = c?.container_id
if (typeof id !== 'string' || !id) return []
const status =
typeof c?.status === 'string' && c.status
? ` (${c.status})`
: ''
return [
{
value: id,
label: (
<>
{id}
{status}
</>
),
},
]
}),
]}
value={containerId}
onValueChange={(v) => v !== null && setContainerId(v)}
disabled={isLoadingContainers || containers.length === 0}
@@ -190,27 +212,34 @@ export function ViewLogsDialog({
}
/>
</SelectTrigger>
<SelectContent>
{containers.map((c) => {
const id = c?.container_id
if (typeof id !== 'string' || !id) return null
const status =
typeof c?.status === 'string' && c.status
? ` (${c.status})`
: ''
return (
<SelectItem key={id} value={id}>
{id}
{status}
</SelectItem>
)
})}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{containers.map((c) => {
const id = c?.container_id
if (typeof id !== 'string' || !id) return null
const status =
typeof c?.status === 'string' && c.status
? ` (${c.status})`
: ''
return (
<SelectItem key={id} value={id}>
{id}
{status}
</SelectItem>
)
})}
</SelectGroup>
</SelectContent>
</Select>
</div>
<div className='space-y-1'>
<div className='text-muted-foreground text-xs'>{t('Stream')}</div>
<Select
items={[
{ value: 'stdout', label: 'stdout' },
{ value: 'stderr', label: 'stderr' },
{ value: 'all', label: 'all' },
]}
value={stream}
onValueChange={(v) => {
if (v === 'stderr' || v === 'all' || v === 'stdout') {
@@ -223,10 +252,12 @@ export function ViewLogsDialog({
<SelectTrigger>
<SelectValue placeholder={t('Select')} />
</SelectTrigger>
<SelectContent>
<SelectItem value='stdout'>stdout</SelectItem>
<SelectItem value='stderr'>stderr</SelectItem>
<SelectItem value='all'>all</SelectItem>
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
<SelectItem value='stdout'>stdout</SelectItem>
<SelectItem value='stderr'>stderr</SelectItem>
<SelectItem value='all'>all</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
web/default/src/features/models/components/drawers/model-mutate-drawer.tsx
Vendored
+32 -12
View File
@@ -27,6 +27,7 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -701,6 +702,12 @@ export function ModelMutateDrawer({
<FormItem>
<FormLabel>{t('Vendor')}</FormLabel>
<Select
items={[
...vendors.map((vendor) => ({
value: String(vendor.id),
label: vendor.name,
})),
]}
onValueChange={(value) =>
field.onChange(value ? parseInt(value) : undefined)
}
@@ -711,12 +718,17 @@ export function ModelMutateDrawer({
<SelectValue placeholder={t('Select vendor')} />
</SelectTrigger>
</FormControl>
<SelectContent>
{vendors.map((vendor) => (
<SelectItem key={vendor.id} value={String(vendor.id)}>
{vendor.name}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{vendors.map((vendor) => (
<SelectItem
key={vendor.id}
value={String(vendor.id)}
>
{vendor.name}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<FormMessage />
@@ -801,6 +813,12 @@ export function ModelMutateDrawer({
<div className='flex items-center justify-between'>
<h3 className='text-sm font-semibold'>{t('Endpoints')}</h3>
<Select<string>
items={[
...Object.keys(ENDPOINT_TEMPLATES).map((key) => ({
value: key,
label: key,
})),
]}
onValueChange={(v) =>
v !== null && handleFillEndpointTemplate(v)
}
@@ -808,12 +826,14 @@ export function ModelMutateDrawer({
<SelectTrigger size='sm' className='w-[200px]'>
<SelectValue placeholder={t('Load template...')} />
</SelectTrigger>
<SelectContent>
{Object.keys(ENDPOINT_TEMPLATES).map((key) => (
<SelectItem key={key} value={key}>
{key}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{Object.keys(ENDPOINT_TEMPLATES).map((key) => (
<SelectItem key={key} value={key}>
{key}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
web/default/src/features/models/components/drawers/prefill-group-form-drawer.tsx
Vendored
+35 -14
View File
@@ -19,6 +19,7 @@ import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -252,6 +253,22 @@ export function PrefillGroupFormDrawer({
<FormItem>
<FormLabel>Group Type</FormLabel>
<Select
items={[
...PREFILL_GROUP_TYPES.map((type) => ({
value: type.value,
label: (
<div className='flex flex-col text-left'>
<span className='font-medium'>{type.label}</span>
<span
data-prefill-description
className='text-muted-foreground text-xs'
>
{type.description}
</span>
</div>
),
})),
]}
value={field.value}
onValueChange={(value) =>
value !== null &&
@@ -263,20 +280,24 @@ export function PrefillGroupFormDrawer({
<SelectValue placeholder={t('Select a group type')} />
</SelectTrigger>
</FormControl>
<SelectContent>
{PREFILL_GROUP_TYPES.map((type) => (
<SelectItem key={type.value} value={type.value}>
<div className='flex flex-col text-left'>
<span className='font-medium'>{type.label}</span>
<span
data-prefill-description
className='text-muted-foreground text-xs'
>
{type.description}
</span>
</div>
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{PREFILL_GROUP_TYPES.map((type) => (
<SelectItem key={type.value} value={type.value}>
<div className='flex flex-col text-left'>
<span className='font-medium'>
{type.label}
</span>
<span
data-prefill-description
className='text-muted-foreground text-xs'
>
{type.description}
</span>
</div>
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<FormDescription>