Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 | 137x 137x 137x 260x 228x 404x 96x 96x 96x 514x 59x 192x 121x 12x 206x 206x 272x 206x 60x 34x 34x 22x 77x 141x 206x 113x 208x 206x 50x 26x 36x 26x 33x 206x 259x 6x 6x 33x 220x 9x 9x 9x 9x 206x 33x 27x 4x 206x 48x 8x 33x 17x 13x 38x 13x 40x 33x 41x 80x 1x 33x 83x 2x 2x 33x 2x 2x 2x 158x 158x 2x 248x 33x 5x 4x 1x 6x 1x 28x 28x 36x 1x 1x 4x 2x 4x 1x | import { useCallback, useEffect, useRef, useState } from 'react'
import { Button } from '@/components/ui/button'
import { EntitySelect, type SelectionOption } from './EntitySelect'
export type { SelectionOption } from './EntitySelect'
export const ENTITY_SELECT_LIST_MAX_ITEMS = 16
interface EntitySelectListProps {
/** Form value: ordered repository id strings, or the joined ref shape
* ({ repository_id, name, url }) from a read response. Ref shape is
E * normalized into ordered ids before submit. */
value: unknown
options: SelectionOption[]
isLoading?: boolean
onChange?: (value: string[]) => void
readOnly?: boolean
'data-testid'?: string
}
function toIds(value: unknown): string[] {
if (!Array.isArray(value)) return []
return value.map((item) => {
if (typeof item === 'string') return item
Eif (item && typeof item === 'object') {
const record = item as Record<string, unknown>
return typeof record.repository_id === 'string' ? record.repository_id : ''
}
return ''
})
}
function hasRefsShape(value: unknown): boolean {
return (
Array.isArray(value) &&
value.some((item) => typeof item === 'object' && item !== null && 'repository_id' in item)
)
}
function labelOf(id: string, options: SelectionOption[]): string {
return options.find((o) => o.value === id)?.label ?? id
}
export function EntitySelectList({
value,
options,
isLoading = false,
onChange,
EreadOnly = false,
'data-testid': dataTestId,
}: EntitySelectListProps) {
const [rows, setRows] = useState<string[]>(() => toIds(value))
const lastEmitted = useRef<string | null>(
hasRefsShape(value) ? null : JSON.stringify(toIds(value).filter((id) => id !== '')),
)
const emit = useCallback((next: string[]) => {
const ids = next.filter((id) => id !== '')
const key = JSON.stringify(ids)
Iif (key === lastEmitted.current) return
lastEmitted.current = key
onChange?.(ids)
}, [onChange])
// The API request shape is an ordered UUID array; the read response is the
// joined ref shape. Normalize refs into ordered ids once, immediately.
// Runs before the adopt effect so refs never collapse into a no-op emit.
useEffect(() => {
if (!hasRefsShape(value)) return
emit(toIds(value))
}, [value, emit])
// Adopt external value changes (populate, SSE) without clobbering local
// draft rows (e.g. an added-but-empty row that has no value yet).
useEffect(() => {
if (hasRefsShape(value)) return
const next = toIds(value)
const key = JSON.stringify(next.filter((id) => id !== ''))
Eif (key === lastEmitted.current) return
lastEmitted.current = key
setRows(next)
}, [value])
const handleRowChange = (i: number, id: string) => {
const next = rows.map((row, idx) => (idx === i ? id : row))
setRows(next)
emit(next)
}
const handleRemove = (i: number) => {
const next = rows.filter((_, idx) => idx !== i)
setRows(next)
emit(next)
}
const handleMove = (i: number, dir: -1 | 1) => {
const j = i + dir
Iif (j < 0 || j >= rows.length) return
const next = [...rows]
;[next[i], next[j]] = [next[j], next[i]]
setRows(next)
emit(next)
}
if (readOnly) {
if (rows.length === 0) {
return (
<span className="text-sm text-muted-foreground" data-testid={dataTestId}>
No skill repositories
</span>
)
}
return (
<ul className="flex flex-col gap-1" data-testid={dataTestId}>
{rows.map((id) => (
<li key={id} className="text-sm">
{labelOf(id, options)}
</li>
))}
</ul>
)
}
const atCap = rows.length >= ENTITY_SELECT_LIST_MAX_ITEMS
return (
<div className="flex w-full min-w-0 flex-col gap-2" data-testid={dataTestId}>
{rows.map((id, i) => (
<div
key={`${id}-${i}`}
data-testid={`entity-select-list-row-${i}`}
className="flex w-full min-w-0 items-center gap-2"
>
<div className="min-w-0 flex-1" data-testid={`entity-select-list-select-${i}`}>
<EntitySelect
options={options}
value={id || undefined}
onChange={(v) => handleRowChange(i, (v as string | undefined) ?? '')}
isLoading={isLoading}
/>
</div>
<Button
variant="ghost"
size="icon-sm"
type="button"
aria-label={`Move skill repository ${i} up`}
data-testid={`entity-select-list-up-${i}`}
disabled={i === 0}
onClick={() => handleMove(i, -1)}
>
↑
</Button>
<Button
variant="ghost"
size="icon-sm"
type="button"
aria-label={`Move skill repository ${i} down`}
data-testid={`entity-select-list-down-${i}`}
disabled={i === rows.length - 1}
onClick={() => handleMove(i, 1)}
>
↓
</Button>
<Button
variant="ghost"
size="icon-sm"
type="button"
aria-label={`Remove skill repository ${i}`}
data-testid={`entity-select-list-remove-${i}`}
onClick={() => handleRemove(i)}
>
✕
</Button>
</div>
))}
<div>
<Button
variant="outline"
size="sm"
type="button"
disabled={atCap}
data-testid="entity-select-list-add"
onClick={() => setRows([...rows, ''])}
>
+ Add skill repository
</Button>
</div>
</div>
)
}
|