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 | 58x 58x 58x 127x 95x 159x 32x 32x 32x 204x 76x 100x 100x 110x 100x 25x 15x 15x 11x 11x 100x 52x 8x 100x 23x 15x 17x 15x 100x 8x 5x 5x 100x 3x 2x 2x 100x 100x 20x 4x 16x 32x 80x 80x 102x 5x 2x 4x | 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>
)
}
|