@open-mercato/core 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7194.1.ab4fc81f82

package/src/modules/workflows/components/fields/PortFieldArrayEditor.tsx

@@ -0,0 +1,255 @@
+'use client'
+
+import { useState } from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import { ChevronDown, Plus, Trash2 } from 'lucide-react'
+import type { PortField, PortFieldType } from '../../data/validators'
+
+/** The five business-friendly port types surfaced in the Schema Builder. */
+const PORT_TYPES: PortFieldType[] = ['text', 'number', 'boolean', 'select', 'date']
+
+export interface PortFieldArrayEditorProps {
+  id: string
+  value: PortField[]
+  onChange: (next: PortField[]) => void
+  disabled?: boolean
+  /** i18n key for the "add port" button label. */
+  addLabelKey: string
+  /** i18n key for the empty-state message. */
+  emptyLabelKey: string
+}
+
+/**
+ * PortFieldArrayEditor — add / edit / remove a list of sub-workflow port fields.
+ *
+ * Mirrors the proven UserTask `FormFieldArrayEditor` UX (expandable cards with
+ * name / label / type / required) but is scoped to the five port types and the
+ * `PortField` shape, and uses DS-compliant primitives and semantic tokens.
+ * Presentational: state is owned by the parent (SchemaBuilderDialog).
+ */
+export function PortFieldArrayEditor({
+  id,
+  value,
+  onChange,
+  disabled,
+  addLabelKey,
+  emptyLabelKey,
+}: PortFieldArrayEditorProps) {
+  const t = useT()
+  const { confirm, ConfirmDialogElement } = useConfirmDialog()
+  const [expandedIndices, setExpandedIndices] = useState<Set<number>>(new Set())
+
+  const ports = Array.isArray(value) ? value : []
+
+  const toggleExpanded = (index: number) => {
+    const next = new Set(expandedIndices)
+    if (next.has(index)) next.delete(index)
+    else next.add(index)
+    setExpandedIndices(next)
+  }
+
+  const addPort = () => {
+    const newPort: PortField = {
+      name: `field_${ports.length + 1}`,
+      type: 'text',
+      label: '',
+      required: false,
+    }
+    onChange([...ports, newPort])
+    const next = new Set(expandedIndices)
+    next.add(ports.length)
+    setExpandedIndices(next)
+  }
+
+  const removePort = async (index: number) => {
+    const confirmed = await confirm({
+      title: t('workflows.ports.remove'),
+      text: t('workflows.ports.confirmRemove'),
+      variant: 'destructive',
+    })
+    if (!confirmed) return
+    onChange(ports.filter((_, i) => i !== index))
+    const next = new Set(expandedIndices)
+    next.delete(index)
+    setExpandedIndices(next)
+  }
+
+  const updatePort = (index: number, key: keyof PortField, fieldValue: unknown) => {
+    const updated = ports.map((port, i) => (i === index ? { ...port, [key]: fieldValue } : port))
+    onChange(updated)
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex justify-end">
+        <Button type="button" size="sm" onClick={addPort} disabled={disabled}>
+          <Plus className="size-3 mr-1" />
+          {t(addLabelKey)}
+        </Button>
+      </div>
+
+      {ports.length === 0 ? (
+        <div className="p-4 text-center text-sm text-muted-foreground bg-muted rounded-lg border border-border">
+          {t(emptyLabelKey)}
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {ports.map((port, index) => {
+            const isExpanded = expandedIndices.has(index)
+            return (
+              <div key={index} className="border border-border rounded-lg bg-muted/40">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  onClick={() => toggleExpanded(index)}
+                  disabled={disabled}
+                  className="w-full h-auto px-4 py-3 justify-between hover:bg-muted/70"
+                >
+                  <div className="flex-1 min-w-0 text-left">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <span className="text-sm font-semibold text-foreground truncate">
+                        {port.label || port.name}
+                      </span>
+                      <Badge variant="secondary" className="text-xs">
+                        {t(`workflows.ports.types.${port.type}`)}
+                      </Badge>
+                      {port.required && (
+                        <Badge variant="outline" className="text-xs">
+                          {t('workflows.ports.required')}
+                        </Badge>
+                      )}
+                    </div>
+                    <p className="text-xs text-muted-foreground mt-1 font-mono truncate">{port.name}</p>
+                  </div>
+                  <ChevronDown
+                    className={`size-4 text-muted-foreground transition-transform ${isExpanded ? 'rotate-180' : ''}`}
+                  />
+                </Button>
+
+                {isExpanded && (
+                  <div className="px-4 pb-4 space-y-3 border-t border-border bg-background">
+                    <div className="pt-3">
+                      <Label htmlFor={`${id}-${index}-name`} className="text-xs font-medium mb-1">
+                        {t('workflows.ports.name')} *
+                      </Label>
+                      <Input
+                        id={`${id}-${index}-name`}
+                        type="text"
+                        value={port.name}
+                        onChange={(e) => updatePort(index, 'name', e.target.value)}
+                        className="text-xs font-mono"
+                        disabled={disabled}
+                      />
+                      <p className="text-xs text-muted-foreground mt-0.5">{t('workflows.ports.nameHint')}</p>
+                    </div>
+
+                    <div>
+                      <Label htmlFor={`${id}-${index}-label`} className="text-xs font-medium mb-1">
+                        {t('workflows.ports.label')} *
+                      </Label>
+                      <Input
+                        id={`${id}-${index}-label`}
+                        type="text"
+                        value={port.label}
+                        onChange={(e) => updatePort(index, 'label', e.target.value)}
+                        className="text-xs"
+                        disabled={disabled}
+                      />
+                    </div>
+
+                    <div>
+                      <Label htmlFor={`${id}-${index}-type`} className="text-xs font-medium mb-1">
+                        {t('workflows.ports.type')} *
+                      </Label>
+                      <Select
+                        value={port.type}
+                        onValueChange={(next) => updatePort(index, 'type', next)}
+                        disabled={disabled}
+                      >
+                        <SelectTrigger id={`${id}-${index}-type`}>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {PORT_TYPES.map((portType) => (
+                            <SelectItem key={portType} value={portType}>
+                              {t(`workflows.ports.types.${portType}`)}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {port.type === 'select' && (
+                      <div>
+                        <Label htmlFor={`${id}-${index}-options`} className="text-xs font-medium mb-1">
+                          {t('workflows.ports.options')}
+                        </Label>
+                        <Input
+                          id={`${id}-${index}-options`}
+                          type="text"
+                          value={port.options?.join(', ') || ''}
+                          onChange={(e) =>
+                            updatePort(
+                              index,
+                              'options',
+                              e.target.value
+                                .split(',')
+                                .map((option) => option.trim())
+                                .filter(Boolean),
+                            )
+                          }
+                          className="text-xs"
+                          disabled={disabled}
+                        />
+                        <p className="text-xs text-muted-foreground mt-0.5">{t('workflows.ports.optionsHint')}</p>
+                      </div>
+                    )}
+
+                    <div className="flex items-center gap-2">
+                      <Checkbox
+                        id={`${id}-${index}-required`}
+                        checked={port.required}
+                        onCheckedChange={(checked) => updatePort(index, 'required', checked === true)}
+                        disabled={disabled}
+                      />
+                      <Label htmlFor={`${id}-${index}-required`} className="text-xs font-medium cursor-pointer">
+                        {t('workflows.ports.required')}
+                      </Label>
+                    </div>
+
+                    <div className="border-t border-border pt-3">
+                      <IconButton
+                        type="button"
+                        variant="ghost"
+                        onClick={() => removePort(index)}
+                        disabled={disabled}
+                        aria-label={t('workflows.ports.remove')}
+                      >
+                        <Trash2 className="size-4" />
+                      </IconButton>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+      {ConfirmDialogElement}
+    </div>
+  )
+}

package/src/modules/workflows/components/fields/RolesMultiSelect.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { TagsInput, type TagsInputOption } from '@open-mercato/ui/backend/inputs/TagsInput'
+
+type RoleListResponse = {
+  items?: Array<{ id?: string | null; name?: string | null }>
+}
+
+export type RolesMultiSelectProps = {
+  id?: string
+  value: string[]
+  onChange: (next: string[]) => void
+  disabled?: boolean
+}
+
+export function RolesMultiSelect({ id, value, onChange, disabled }: RolesMultiSelectProps) {
+  const t = useT()
+  const [lookupFailed, setLookupFailed] = React.useState(false)
+
+  const loadRoleSuggestions = React.useCallback(async (query?: string): Promise<TagsInputOption[]> => {
+    const params = new URLSearchParams({ page: '1', pageSize: '100' })
+    const trimmedQuery = typeof query === 'string' ? query.trim() : ''
+    if (trimmedQuery) params.set('search', trimmedQuery)
+    try {
+      const call = await apiCall<RoleListResponse>(
+        `/api/auth/roles?${params.toString()}`,
+        // The roles lookup is optional: editors without auth.roles.list fall back
+        // to free-text entry, so suppress the global forbidden/unauthorized
+        // redirect handling (and its toast) for this call.
+        { headers: { 'x-om-forbidden-redirect': '0', 'x-om-unauthorized-redirect': '0' } },
+        { fallback: { items: [] } },
+      )
+      if (!call.ok || !Array.isArray(call.result?.items)) {
+        setLookupFailed(true)
+        return []
+      }
+      setLookupFailed(false)
+      const names = call.result.items
+        .map((item) => (typeof item?.name === 'string' ? item.name.trim() : ''))
+        .filter((name) => name.length > 0)
+      return Array.from(new Set(names)).map((name) => ({ value: name, label: name }))
+    } catch {
+      setLookupFailed(true)
+      return []
+    }
+  }, [])
+
+  return (
+    <div id={id}>
+      <TagsInput
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        allowCustomValues
+        loadSuggestions={loadRoleSuggestions}
+        placeholder={t('workflows.rolesSelect.placeholder')}
+      />
+      {lookupFailed ? (
+        <p className="text-xs text-muted-foreground mt-1">
+          {t('workflows.rolesSelect.lookupUnavailable')}
+        </p>
+      ) : null}
+    </div>
+  )
+}

package/src/modules/workflows/components/fields/RouteOrderEditor.tsx

@@ -0,0 +1,169 @@
+'use client'
+
+import { useState } from 'react'
+import { ArrowDown, ArrowUp, CornerDownLeft, GripVertical } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+import {
+  applyDerivedPriorities,
+  moveRoute,
+  type RouteOrderEntry,
+} from '../../lib/route-priority'
+
+/**
+ * RouteOrderEditor — drag-to-reorder of a step's outgoing routes (spec section
+ * 4.4). The list order IS the evaluation order; the priority number is derived
+ * from it and demoted behind an advanced toggle, where it stays editable for
+ * authors who need an exact value.
+ *
+ * Drag is an enhancement: every row also carries keyboard-reachable move-up /
+ * move-down buttons, so reordering never depends on a pointer.
+ */
+
+export interface RouteOrderEditorProps {
+  id: string
+  value?: RouteOrderEntry[]
+  setValue: (next: RouteOrderEntry[]) => void
+  disabled?: boolean
+}
+
+export function RouteOrderEditor({ id, value, setValue, disabled }: RouteOrderEditorProps) {
+  const t = useT()
+  const entries = Array.isArray(value) ? value : []
+  const [showAdvanced, setShowAdvanced] = useState(false)
+  const [draggingIndex, setDraggingIndex] = useState<number | null>(null)
+
+  const commitOrder = (next: RouteOrderEntry[]) => {
+    setValue(applyDerivedPriorities(next))
+  }
+
+  const move = (fromIndex: number, toIndex: number) => {
+    if (disabled) return
+    commitOrder(moveRoute(entries, fromIndex, toIndex))
+  }
+
+  const setPriority = (transitionId: string, raw: string) => {
+    const parsed = Number.parseInt(raw, 10)
+    setValue(
+      entries.map((entry) =>
+        entry.transitionId === transitionId
+          ? { ...entry, priority: Number.isFinite(parsed) ? Math.max(0, Math.min(9999, parsed)) : 0 }
+          : entry,
+      ),
+    )
+  }
+
+  if (entries.length === 0) {
+    return (
+      <Alert variant="info">
+        <AlertDescription>
+          {t('workflows.routeOrder.empty')}
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-2" data-testid="route-order-editor">
+      <p className="text-xs text-muted-foreground">
+        {t('workflows.routeOrder.hint')}
+      </p>
+
+      <ol className="flex flex-col gap-2">
+        {entries.map((entry, index) => (
+          <li
+            key={entry.transitionId}
+            draggable={!disabled}
+            onDragStart={() => setDraggingIndex(index)}
+            onDragEnd={() => setDraggingIndex(null)}
+            onDragOver={(event) => {
+              if (draggingIndex === null) return
+              event.preventDefault()
+            }}
+            onDrop={(event) => {
+              event.preventDefault()
+              if (draggingIndex === null) return
+              move(draggingIndex, index)
+              setDraggingIndex(null)
+            }}
+            className="flex items-center gap-2 rounded-md border border-border bg-card p-2"
+            data-testid={`route-order-row-${entry.transitionId}`}
+          >
+            <GripVertical className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2">
+                <span className="truncate text-sm font-medium">
+                  {entry.label || entry.transitionId}
+                </span>
+                {entry.isOtherwise ? (
+                  <Badge variant="secondary" className="gap-1 text-xs">
+                    <CornerDownLeft className="size-3" aria-hidden="true" />
+                    {t('workflows.routeChips.otherwise')}
+                  </Badge>
+                ) : null}
+              </div>
+              <span className="text-xs text-muted-foreground">
+                {t('workflows.routeOrder.target', { stepId: entry.toStepId })}
+              </span>
+            </div>
+
+            {showAdvanced ? (
+              <div className="flex shrink-0 items-center gap-1">
+                <Label htmlFor={`${id}-${entry.transitionId}-priority`} className="text-xs text-muted-foreground">
+                  {t('workflows.edgeEditor.priority')}
+                </Label>
+                <Input
+                  id={`${id}-${entry.transitionId}-priority`}
+                  type="number"
+                  className="w-20 text-xs"
+                  value={String(entry.priority)}
+                  onChange={(event) => setPriority(entry.transitionId, event.target.value)}
+                  disabled={disabled}
+                />
+              </div>
+            ) : (
+              <span className="shrink-0 font-mono text-xs text-muted-foreground">{entry.priority}</span>
+            )}
+
+            <div className="flex shrink-0 items-center gap-1">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                disabled={disabled || index === 0}
+                aria-label={t('workflows.routeOrder.moveUp')}
+                onClick={() => move(index, index - 1)}
+              >
+                <ArrowUp className="size-4" />
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                disabled={disabled || index === entries.length - 1}
+                aria-label={t('workflows.routeOrder.moveDown')}
+                onClick={() => move(index, index + 1)}
+              >
+                <ArrowDown className="size-4" />
+              </Button>
+            </div>
+          </li>
+        ))}
+      </ol>
+
+      <SwitchField
+        id={`${id}-advanced`}
+        label={t('workflows.routeOrder.showPriorityNumbers')}
+        checked={showAdvanced}
+        onCheckedChange={setShowAdvanced}
+        disabled={disabled}
+      />
+    </div>
+  )
+}

package/src/modules/workflows/components/fields/SchemaBuilderDialog.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import { useEffect, useState, type KeyboardEvent } from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@open-mercato/ui/primitives/drawer'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
+import { PortFieldArrayEditor } from './PortFieldArrayEditor'
+import type { PortField, WorkflowIoContract } from '../../data/validators'
+
+export interface SchemaBuilderDialogProps {
+  open: boolean
+  /** Current IO contract (child definition.io); undefined → start empty. */
+  value?: WorkflowIoContract | null
+  /** Name of the workflow whose schema is being edited (header context). */
+  workflowName?: string
+  disabled?: boolean
+  onSave: (io: WorkflowIoContract) => void
+  onClose: () => void
+}
+
+/**
+ * SchemaBuilderDialog — "Schemat portów" editor for a sub-workflow's IO contract.
+ *
+ * Lets a business user declare the input (IN) and output (OUT) ports a
+ * sub-workflow accepts/returns, each with one of the five simple types and a
+ * `required` flag. Edits a draft copy and commits via `onSave`; changing or
+ * removing a port can break existing mappings in callers, so a warning banner is
+ * always shown (the affected-connection count arrives with breaking-change
+ * detection in a later phase).
+ *
+ * A rail rather than a modal — two port lists plus a warning banner are a
+ * secondary FORM, and the sub-workflow node whose contract is being declared
+ * stays readable behind it. UX contract unchanged: `Cmd/Ctrl+Enter` submits,
+ * `Escape` cancels.
+ */
+export function SchemaBuilderDialog({
+  open,
+  value,
+  workflowName,
+  disabled,
+  onSave,
+  onClose,
+}: SchemaBuilderDialogProps) {
+  const t = useT()
+  const [inputs, setInputs] = useState<PortField[]>([])
+  const [outputs, setOutputs] = useState<PortField[]>([])
+
+  // Re-seed the draft whenever the dialog opens or the source contract changes.
+  useEffect(() => {
+    if (!open) return
+    setInputs(Array.isArray(value?.inputs) ? value!.inputs : [])
+    setOutputs(Array.isArray(value?.outputs) ? value!.outputs : [])
+  }, [open, value])
+
+  const handleSave = () => {
+    if (disabled) return
+    onSave({ inputs, outputs })
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+      event.preventDefault()
+      handleSave()
+    }
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={(next) => { if (!next) onClose() }}>
+      <DrawerContent
+        data-testid="workflow-schema-builder-drawer"
+        onKeyDown={handleKeyDown}
+        closeAriaLabel={t('workflows.ports.close')}
+      >
+        <DrawerHeader>
+          <DrawerTitle>{t('workflows.ports.title')}</DrawerTitle>
+          <DrawerDescription>
+            {workflowName ? `${workflowName} — ${t('workflows.ports.description')}` : t('workflows.ports.description')}
+          </DrawerDescription>
+        </DrawerHeader>
+
+        <DrawerBody className="space-y-5 py-2">
+          <section className="space-y-2">
+            <h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
+              <span className="size-2 rounded-full bg-primary" aria-hidden="true" />
+              {t('workflows.ports.inputs')}
+            </h3>
+            <PortFieldArrayEditor
+              id="schema-builder-inputs"
+              value={inputs}
+              onChange={setInputs}
+              disabled={disabled}
+              addLabelKey="workflows.ports.addInput"
+              emptyLabelKey="workflows.ports.emptyInputs"
+            />
+          </section>
+
+          <section className="space-y-2">
+            <h3 className="text-sm font-semibold text-foreground flex items-center gap-2">
+              <span className="size-2 rounded-full bg-secondary-foreground" aria-hidden="true" />
+              {t('workflows.ports.outputs')}
+            </h3>
+            <PortFieldArrayEditor
+              id="schema-builder-outputs"
+              value={outputs}
+              onChange={setOutputs}
+              disabled={disabled}
+              addLabelKey="workflows.ports.addOutput"
+              emptyLabelKey="workflows.ports.emptyOutputs"
+            />
+          </section>
+
+          <Alert status="warning" size="sm">
+            <AlertDescription className="text-xs">
+              {t('workflows.ports.breakingWarning')}
+            </AlertDescription>
+          </Alert>
+        </DrawerBody>
+
+        <DrawerFooter>
+          <Button type="button" variant="outline" onClick={onClose}>
+            {t('workflows.ports.cancel')}
+          </Button>
+          <Button type="button" onClick={handleSave} disabled={disabled}>
+            {t('workflows.ports.save')}
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}

package/src/modules/workflows/components/fields/StartPreConditionsEditor.tsx

@@ -327,12 +327,12 @@ export function StartPreConditionsEditor({
                     trigger={
                       <Button
                         type="button"
-                        variant="ghost"
+                        variant="destructive-ghost"
                         size="sm"
                         title={t('workflows.common.delete')}
                         disabled={disabled}
                       >
-                        <Trash2 className="h-4 w-4 text-destructive" />
+                        <Trash2 className="h-4 w-4" />
                       </Button>
                     }
                     title={t('workflows.fieldEditors.preConditions.removePreCondition')}