@asteby/metacore-runtime-react 22.0.0 → 23.1.0

package/src/dynamic-kanban.tsx

@@ -76,10 +76,15 @@ import {
     SheetTrigger,
     Skeleton,
 } from '@asteby/metacore-ui/primitives'
-import { ColumnFilterControl, type ColumnFilterType } from '@asteby/metacore-ui/data-table'
-import { generateBadgeStyles, optionColor, resolveColorCss } from '@asteby/metacore-ui/lib'
+import { ColumnFilterControl, FilterValueCombobox, type ColumnFilterType } from '@asteby/metacore-ui/data-table'
+import { generateBadgeStyles, optionColor } from '@asteby/metacore-ui/lib'
 import { useApi } from './api-context'
 import { useDynamicFilters } from './use-dynamic-filters'
+import {
+    FilterChipsRow,
+    summarizeFilterValues,
+    translateOptionLabels,
+} from './filter-chips'
 import { useMetadataCache } from './metadata-cache'
 import { ActivityValueRenderer } from './activity-value-renderer'
 import { DynamicIcon } from './dynamic-icon'
@@ -96,6 +101,10 @@ import type {
     StageTransition,
 } from './types'
 
+// Re-exported for tests + backward-compat: these live in ./filter-chips now
+// (shared with DynamicTable) but were historically imported from here.
+export { summarizeFilterValues, translateOptionLabels }
+
 // ---------------------------------------------------------------------------
 // Pure helpers (exported for unit tests — no React, no transport)
 // ---------------------------------------------------------------------------
@@ -234,68 +243,37 @@ export function selectCardColumns(
 }
 
 /**
- * Human-readable summary of a field's selected filter values for the removable
- * chip row. Resolves option labels, unwraps the wire operators
- * (`IN:`/`ILIKE:`/`RANGE:`/`GTE:`/`LTE:`/date `from_to`), and caps the list at
- * `maxShown` values with a `+n` overflow. Pure — exported for unit tests.
+ * Whether a card passes a lane funnel. Picked select/facet `values` match by
+ * equality (IN — the card's field value must be one of them); a free-text
+ * `text` matches by case-insensitive substring. No field / no criteria → passes.
+ * Pure — exported for unit tests.
  */
-export function summarizeFilterValues(
-    values: string[] | undefined,
-    options: { label: string; value: string }[] | undefined,
-    maxShown = 2,
-): string {
-    if (!values || values.length === 0) return ''
-    const opts = options ?? []
-    const labelFor = (v: string) =>
-        opts.find((o) => o.value === v)?.label ?? v
-    const first = values[0]
-    if (values.length === 1) {
-        if (first.startsWith('ILIKE:')) return `"${first.slice(6)}"`
-        if (first.startsWith('IN:')) {
-            return summarizeList(first.slice(3).split(','), labelFor, maxShown)
-        }
-        if (first.startsWith('RANGE:')) {
-            const [min, max] = first.slice(6).split(',')
-            return `${min || '…'} – ${max || '…'}`
-        }
-        if (/^\d{4}-\d{2}-\d{2}_/.test(first)) return first.replace('_', ' – ')
+export function cardMatchesLaneFunnel(
+    card: any,
+    filter: { field?: string; values?: string[]; text?: string } | undefined,
+): boolean {
+    if (!filter?.field) return true
+    const raw = String(card?.[filter.field] ?? '')
+    if (filter.values && filter.values.length > 0) {
+        return filter.values.includes(raw)
     }
-    if (first.startsWith('GTE:') || first.startsWith('LTE:')) {
-        const min = values.find((v) => v.startsWith('GTE:'))?.slice(4) ?? ''
-        const max = values.find((v) => v.startsWith('LTE:'))?.slice(4) ?? ''
-        return `${min || '…'} – ${max || '…'}`
+    if (filter.text?.trim()) {
+        return raw.toLowerCase().includes(filter.text.trim().toLowerCase())
     }
-    return summarizeList(values, labelFor, maxShown)
-}
-
-function summarizeList(
-    items: string[],
-    labelFor: (v: string) => string,
-    maxShown: number,
-): string {
-    const labels = items.map(labelFor)
-    if (labels.length <= maxShown) return labels.join(', ')
-    return `${labels.slice(0, maxShown).join(', ')} +${labels.length - maxShown}`
+    return true
 }
 
 /**
- * The color of a filter's first selected value (for the chip's dot) — e.g. a
- * stage's palette color. Returns a resolved CSS color, or undefined for
- * operator/range/free-text values that carry no option color.
+ * Count of applied criteria on a lane funnel: the number of picked select/facet
+ * `values`, else 1 for a free-text `text`, else 0. Drives the funnel's count
+ * badge. Pure — exported for unit tests.
  */
-function chipValueColor(config: {
-    selectedValues: string[]
-    options: { value: string; color?: string }[]
-}): string | undefined {
-    const sel = config.selectedValues
-    if (!sel || sel.length === 0) return undefined
-    const first = sel[0]
-    let value = first
-    if (first.startsWith('IN:')) value = first.slice(3).split(',')[0]
-    else if (/^(ILIKE|RANGE|GTE|LTE):/.test(first)) return undefined
-    else if (/^\d{4}-\d{2}-\d{2}_/.test(first)) return undefined
-    const opt = config.options.find((o) => o.value === value)
-    return opt?.color ? resolveColorCss(opt.color) : undefined
+export function laneFunnelCount(
+    value: { values?: string[]; text?: string } | undefined,
+): number {
+    if (value?.values?.length) return value.values.length
+    if (value?.text?.trim()) return 1
+    return 0
 }
 
 /**
@@ -345,10 +323,17 @@ function useIsDarkTheme(): boolean {
 // Component
 // ---------------------------------------------------------------------------
 
-/** Per-lane client-side filter: an optional field funnel + an optional search. */
+/**
+ * Per-lane client-side filter. Two AND-combined dimensions:
+ *   - The funnel: a `field` plus EITHER `values` (chosen from a select/facet —
+ *     matched by equality/IN against the card's field value) OR `text` (a
+ *     free-text substring for text-only fields).
+ *   - `query`: the lane search — a substring over the card title + field values.
+ */
 interface LaneFilterState {
     field?: string
-    value?: string
+    values?: string[]
+    text?: string
     query?: string
 }
 
@@ -501,11 +486,32 @@ export function DynamicKanban({
             label: string
             config: NonNullable<ReturnType<typeof columnFilterConfigs.get>>
         }[] = []
+        // Option labels come from the manifest as i18n keys (e.g.
+        // "integration_github.stage.backlog"). ColumnFilterControl lives in the
+        // ui package (no i18n), so translate labels HERE — on the static options
+        // and on whatever the facet loader resolves — before they ever reach a
+        // control, chip or value summary. A raw value (a repo name) has no key,
+        // so t() returns it verbatim via defaultValue.
+        const tr = (label: string) => t(label, { defaultValue: label })
         for (const [key, config] of columnFilterConfigs) {
             const f = metadata.filters?.find((x) => x.key === key)
             const c = metadata.columns.find((x) => x.key === key)
             const rawLabel = f?.label || c?.label || key
-            out.push({ key, label: t(rawLabel, { defaultValue: rawLabel }), config })
+            const translatedConfig = {
+                ...config,
+                options: translateOptionLabels(config.options, tr),
+                loadOptions: config.loadOptions
+                    ? (q?: string) =>
+                          config.loadOptions!(q).then((opts) =>
+                              translateOptionLabels(opts, tr),
+                          )
+                    : undefined,
+            }
+            out.push({
+                key,
+                label: tr(rawLabel),
+                config: translatedConfig,
+            })
         }
         return out
     }, [metadata, columnFilterConfigs, t])
@@ -542,7 +548,11 @@ export function DynamicKanban({
             setLaneFilters((prev) => {
                 const merged: LaneFilterState = { ...prev[stageKey], ...patch }
                 const next = { ...prev }
-                const hasFunnel = !!(merged.field && merged.value?.trim())
+                const hasFunnel = !!(
+                    merged.field &&
+                    ((merged.values && merged.values.length > 0) ||
+                        merged.text?.trim())
+                )
                 const hasQuery = !!merged.query?.trim()
                 if (hasFunnel || hasQuery) next[stageKey] = merged
                 else delete next[stageKey]
@@ -814,64 +824,13 @@ export function DynamicKanban({
                 )}
             </div>
 
-            {/* Removable chip row — one chip per active field filter, plus a
-                "Limpiar todo" at the end. Instant feedback without opening the
-                Sheet; clicking a chip's X clears that field server-side. */}
-            {activeFields.length > 0 && (
-                <div
-                    className="flex flex-wrap items-center gap-1.5"
-                    data-testid="kanban-filter-chips"
-                >
-                    {activeFields.map((field) => {
-                        const summary = summarizeFilterValues(
-                            field.config.selectedValues,
-                            field.config.options,
-                        )
-                        const dot = chipValueColor(field.config)
-                        return (
-                            <Badge
-                                key={field.key}
-                                variant="secondary"
-                                className="h-6 gap-1.5 rounded-md pl-2 pr-1 text-xs font-normal"
-                            >
-                                {dot && (
-                                    <span
-                                        className="size-2 shrink-0 rounded-full"
-                                        style={{ backgroundColor: dot }}
-                                    />
-                                )}
-                                <span className="font-medium">{field.label}:</span>
-                                <span className="max-w-[180px] truncate text-muted-foreground">
-                                    {summary}
-                                </span>
-                                <button
-                                    type="button"
-                                    onClick={() =>
-                                        field.config.onFilterChange(
-                                            field.config.filterKey,
-                                            [],
-                                        )
-                                    }
-                                    className="ml-0.5 rounded-sm p-0.5 transition-colors hover:bg-muted-foreground/20"
-                                    aria-label={t('kanban.removeFilter', {
-                                        defaultValue: 'Quitar filtro',
-                                    })}
-                                >
-                                    <X className="h-3 w-3" />
-                                </button>
-                            </Badge>
-                        )
-                    })}
-                    <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-6 gap-1 px-2 text-xs text-muted-foreground"
-                        onClick={clearAll}
-                    >
-                        {t('kanban.clearAll', { defaultValue: 'Limpiar todo' })}
-                    </Button>
-                </div>
-            )}
+            {/* Removable chip row — shared with DynamicTable. Instant feedback
+                without opening the Sheet; a chip's X clears that field. */}
+            <FilterChipsRow
+                fields={activeFields}
+                onClearAll={clearAll}
+                data-testid="kanban-filter-chips"
+            />
 
             <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd}>
                 <div className="flex min-w-0 gap-4 overflow-x-auto p-1" data-testid="kanban-board">
@@ -882,13 +841,9 @@ export function DynamicKanban({
                     // (query) are AND-combined.
                     const laneFilter = laneFilters[stage.key]
                     let cards = allCards
-                    if (laneFilter?.field && laneFilter.value?.trim()) {
-                        const v = laneFilter.value.trim().toLowerCase()
-                        const field = laneFilter.field
+                    if (laneFilter?.field) {
                         cards = cards.filter((c) =>
-                            String(c[field] ?? '')
-                                .toLowerCase()
-                                .includes(v),
+                            cardMatchesLaneFunnel(c, laneFilter),
                         )
                     }
                     if (laneFilter?.query?.trim()) {
@@ -911,7 +866,8 @@ export function DynamicKanban({
                             onFunnelChange={(f) =>
                                 updateLaneFilter(stage.key, {
                                     field: f?.field,
-                                    value: f?.value,
+                                    values: f?.values,
+                                    text: f?.text,
                                 })
                             }
                             onQueryChange={(q) =>
@@ -1056,7 +1012,17 @@ interface LaneFilterField {
 interface ColumnFilterConfigLike {
     filterType?: string
     filterKey?: string
-    options?: { label: string; value: string; color?: string }[]
+    options?: { label: string; value: string; color?: string; count?: number }[]
+    loadOptions?: (q?: string) => Promise<
+        { label: string; value: string; color?: string; count?: number }[]
+    >
+}
+
+/** The funnel's committed value: a field + either picked `values` or free `text`. */
+interface LaneFunnelValue {
+    field: string
+    values?: string[]
+    text?: string
 }
 
 interface KanbanLaneProps {
@@ -1065,7 +1031,7 @@ interface KanbanLaneProps {
     totalCount: number
     filterFields: LaneFilterField[]
     laneFilter: LaneFilterState | undefined
-    onFunnelChange: (filter: { field: string; value: string } | null) => void
+    onFunnelChange: (filter: LaneFunnelValue | null) => void
     onQueryChange: (query: string) => void
     isDark: boolean
     dimmed: boolean
@@ -1091,12 +1057,21 @@ function KanbanLane({
     const headerStyle = generateBadgeStyles(stage.color || optionColor(stage.key), {
         isDark,
     })
-    const funnelActive = !!(laneFilter?.field && laneFilter.value?.trim())
+    const funnelField = filterFields.find((f) => f.key === laneFilter?.field)
+    const funnelActive = !!(
+        laneFilter?.field &&
+        ((laneFilter.values && laneFilter.values.length > 0) ||
+            laneFilter.text?.trim())
+    )
     const queryActive = !!laneFilter?.query?.trim()
     const laneActive = funnelActive || queryActive
-    const activeFieldLabel =
-        filterFields.find((f) => f.key === laneFilter?.field)?.label ??
-        laneFilter?.field
+    const activeFieldLabel = funnelField?.label ?? laneFilter?.field
+    // Human summary of the funnel value: resolved option labels for picked
+    // values, or the raw free text.
+    const funnelSummary =
+        laneFilter?.values && laneFilter.values.length > 0
+            ? summarizeFilterValues(laneFilter.values, funnelField?.config?.options)
+            : laneFilter?.text ?? ''
 
     // Inline lane search: a Search icon expands an Input; Escape or blur-while-
     // empty collapses it. The query itself lives in the parent's laneFilters so
@@ -1106,10 +1081,13 @@ function KanbanLane({
     useEffect(() => {
         if (searchOpen) searchRef.current?.focus()
     }, [searchOpen])
-    const funnelValue =
-        laneFilter?.field && laneFilter.value
-            ? { field: laneFilter.field, value: laneFilter.value }
-            : undefined
+    const funnelValue: LaneFunnelValue | undefined = laneFilter?.field
+        ? {
+              field: laneFilter.field,
+              values: laneFilter.values,
+              text: laneFilter.text,
+          }
+        : undefined
 
     return (
         <div
@@ -1136,18 +1114,14 @@ function KanbanLane({
                         {laneActive ? `${count}/${totalCount}` : count}
                     </span>
                 </div>
-                {/* Lane actions — dimmed until the lane (or the board row) is
-                    hovered/focused, so an idle board stays clean. Stay lit when a
-                    lane filter is active. */}
-                <div
-                    className={`flex items-center gap-0.5 transition-opacity focus-within:opacity-100 group-hover/lane:opacity-100 ${
-                        laneActive || searchOpen ? 'opacity-100' : 'opacity-0'
-                    }`}
-                >
+                {/* Lane actions — always visible in muted (a hidden hover-reveal
+                    was undiscoverable); active state is a primary tint + a count
+                    badge on the funnel. */}
+                <div className="flex items-center gap-0.5">
                     <button
                         type="button"
                         onClick={() => setSearchOpen((o) => !o)}
-                        className={`flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${
+                        className={`relative flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${
                             queryActive ? 'text-primary' : 'text-muted-foreground'
                         }`}
                         aria-label={t('kanban.searchLane', {
@@ -1155,6 +1129,9 @@ function KanbanLane({
                         })}
                     >
                         <Search className="h-3.5 w-3.5" />
+                        {queryActive && (
+                            <span className="absolute -right-0.5 -top-0.5 size-1.5 rounded-full bg-primary" />
+                        )}
                     </button>
                     <LaneFilterButton
                         fields={filterFields}
@@ -1192,7 +1169,7 @@ function KanbanLane({
                 <div className="flex items-center gap-1 px-3 pb-1.5 text-[11px] text-muted-foreground">
                     <ListFilter className="h-3 w-3 shrink-0" />
                     <span className="truncate">
-                        {activeFieldLabel}: {laneFilter!.value}
+                        {activeFieldLabel}: {funnelSummary}
                     </span>
                     <button
                         type="button"
@@ -1228,39 +1205,55 @@ function LaneFilterButton({
     onChange,
 }: {
     fields: LaneFilterField[]
-    value: { field: string; value: string } | undefined
-    onChange: (filter: { field: string; value: string } | null) => void
+    value: LaneFunnelValue | undefined
+    onChange: (filter: LaneFunnelValue | null) => void
 }) {
     const { t } = useTranslation()
     const [open, setOpen] = useState(false)
     const [field, setField] = useState(value?.field ?? fields[0]?.key ?? '')
-    const [text, setText] = useState(value?.value ?? '')
+    const [values, setValues] = useState<string[]>(value?.values ?? [])
+    const [text, setText] = useState(value?.text ?? '')
     // Re-seed the draft from the committed filter each time the popover opens.
     useEffect(() => {
         if (open) {
             setField(value?.field ?? fields[0]?.key ?? '')
-            setText(value?.value ?? '')
+            setValues(value?.values ?? [])
+            setText(value?.text ?? '')
         }
     }, [open, value, fields])
     if (fields.length === 0) return null
-    const active = !!(value && value.value.trim())
-    // When the chosen field carries a known option set (select/facet with
-    // pre-loaded values), offer those values as a Select instead of a raw text
-    // box — so the funnel picks real values, not free strings.
-    const selectedFieldCfg = fields.find((f) => f.key === field)?.config
-    const valueOptions = selectedFieldCfg?.options ?? []
-    const hasValueOptions = valueOptions.length > 0
+    const active = !!(
+        value &&
+        ((value.values && value.values.length > 0) || value.text?.trim())
+    )
+    // Number of applied criteria on this lane's funnel (drives the count badge).
+    const activeCount = laneFunnelCount(value)
+    // The value step mirrors the sheet: when the chosen field is a select or a
+    // facet (static options OR a lazy loader), render the SAME pro combobox —
+    // multi-select, searchable, with counts. Only a genuinely free-text field
+    // (no options, no loader) falls back to a raw "Contiene..." input.
+    const cfg = fields.find((f) => f.key === field)?.config
+    const hasValuePicker = (cfg?.options?.length ?? 0) > 0 || !!cfg?.loadOptions
+    const toggle = (v: string) =>
+        setValues((prev) =>
+            prev.includes(v) ? prev.filter((x) => x !== v) : [...prev, v],
+        )
     const apply = () => {
-        if (field && text.trim()) onChange({ field, value: text })
+        if (field && values.length > 0) onChange({ field, values })
+        else if (field && text.trim()) onChange({ field, text: text.trim() })
         else onChange(null)
         setOpen(false)
     }
+    const clear = () => {
+        onChange(null)
+        setOpen(false)
+    }
     return (
         <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
                 <button
                     type="button"
-                    className={`flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${
+                    className={`relative flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${
                         active ? 'text-primary' : 'text-muted-foreground'
                     }`}
                     aria-label={t('kanban.filterLane', {
@@ -1268,19 +1261,28 @@ function LaneFilterButton({
                     })}
                 >
                     <ListFilter className="h-3.5 w-3.5" />
+                    {activeCount > 0 && (
+                        <span className="absolute -right-1 -top-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[9px] font-bold leading-none text-primary-foreground tabular-nums">
+                            {activeCount}
+                        </span>
+                    )}
                 </button>
             </PopoverTrigger>
-            <PopoverContent align="end" className="w-56 space-y-2 p-2">
+            <PopoverContent
+                align="end"
+                className="w-72 space-y-2.5 rounded-xl p-2.5 shadow-lg"
+            >
                 <Select
                     value={field}
                     onValueChange={(f) => {
                         setField(f)
                         // Reset the value when switching fields — a value picked
                         // for one field is meaningless for another.
+                        setValues([])
                         setText('')
                     }}
                 >
-                    <SelectTrigger className="h-8 text-xs">
+                    <SelectTrigger className="h-8 w-full text-xs">
                         <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
@@ -1291,34 +1293,18 @@ function LaneFilterButton({
                         ))}
                     </SelectContent>
                 </Select>
-                {hasValueOptions ? (
-                    <Select
-                        value={text || undefined}
-                        onValueChange={(v) => {
-                            setText(v)
-                            if (field && v) onChange({ field, value: v })
-                            setOpen(false)
-                        }}
-                    >
-                        <SelectTrigger className="h-8 text-xs">
-                            <SelectValue
-                                placeholder={t('kanban.filterValue', {
-                                    defaultValue: 'Valor...',
-                                })}
-                            />
-                        </SelectTrigger>
-                        <SelectContent>
-                            {valueOptions.map((o) => (
-                                <SelectItem
-                                    key={o.value}
-                                    value={o.value}
-                                    className="text-xs"
-                                >
-                                    {o.label}
-                                </SelectItem>
-                            ))}
-                        </SelectContent>
-                    </Select>
+                {hasValuePicker ? (
+                    // `key={field}` remounts the combobox on field switch so it
+                    // reloads that field's values from scratch (no stale list).
+                    <div className="overflow-hidden rounded-lg border">
+                        <FilterValueCombobox
+                            key={field}
+                            staticOptions={cfg?.options}
+                            loadOptions={cfg?.loadOptions}
+                            selected={values}
+                            onToggle={toggle}
+                        />
+                    </div>
                 ) : (
                     <Input
                         autoFocus
@@ -1328,25 +1314,29 @@ function LaneFilterButton({
                             if (e.key === 'Enter') apply()
                         }}
                         placeholder={t('kanban.filterValue', {
-                            defaultValue: 'Valor...',
+                            defaultValue: 'Contiene...',
                         })}
-                        className="h-8 text-xs"
+                        className="h-8 w-full text-xs"
                     />
                 )}
-                <div className="flex justify-between gap-2">
+                <div className="flex gap-1.5">
                     <Button
-                        variant="ghost"
+                        variant="outline"
                         size="sm"
-                        className="h-7 text-xs"
-                        onClick={() => {
-                            onChange(null)
-                            setOpen(false)
-                        }}
+                        className="h-7 flex-1 text-xs"
+                        onClick={clear}
+                        disabled={!active && values.length === 0 && !text.trim()}
                     >
                         {t('kanban.clearFilters', { defaultValue: 'Limpiar' })}
                     </Button>
-                    <Button size="sm" className="h-7 text-xs" onClick={apply}>
+                    <Button
+                        size="sm"
+                        className="h-7 flex-1 text-xs"
+                        onClick={apply}
+                        disabled={values.length === 0 && !text.trim()}
+                    >
                         {t('kanban.apply', { defaultValue: 'Aplicar' })}
+                        {values.length > 0 ? ` (${values.length})` : ''}
                     </Button>
                 </div>
             </PopoverContent>