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 | 125x 125x 125x 318x 260x 468x 104x 104x 104x 602x 248x 252x 252x 324x 252x 66x 37x 37x 24x 24x 252x 138x 26x 252x 58x 32x 40x 32x 252x 12x 7x 7x 252x 6x 4x 4x 252x 252x 60x 8x 52x 104x 192x 192x 282x 7x 4x 5x | 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
if (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)
if (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 !== ''))
if (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
if (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>
)
}
|