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 | 57x 57x 57x 69x 53x 80x 16x 16x 16x 102x 36x 54x 54x 54x 54x 14x 9x 9x 7x 7x 54x 28x 4x 54x 13x 9x 10x 9x 54x 5x 3x 3x 54x 3x 2x 2x 54x 54x 12x 4x 8x 16x 42x 42x 50x 3x 2x 2x | 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>
)
}
|