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 | 62x 62x 62x 137x 121x 216x 48x 48x 48x 278x 59x 116x 121x 12x 110x 110x 150x 110x 30x 17x 17x 11x 77x 141x 110x 60x 112x 110x 25x 13x 18x 13x 33x 110x 163x 3x 3x 33x 124x 9x 9x 9x 9x 110x 33x 27x 4x 110x 28x 4x 33x 17x 13x 34x 13x 24x 33x 25x 48x 1x 33x 51x 2x 2x 33x 2x 2x 2x 82x 82x 2x 130x 33x 5x 4x 1x 3x 1x 28x 28x 36x 1x 1x 2x 2x 2x 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>
)
}
|