@open-mercato/core 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7195.1.b5efd1d51a

package/src/modules/workflows/components/ConfigJsonTextarea.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import * as React from 'react'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+interface ConfigJsonTextareaProps {
+  id: string
+  value: Record<string, unknown> | undefined
+  onChange: (config: Record<string, unknown>) => void
+  onValidityChange?: (valid: boolean) => void
+  rows?: number
+  placeholder?: string
+  className?: string
+}
+
+export function ConfigJsonTextarea({
+  id,
+  value,
+  onChange,
+  onValidityChange,
+  rows = 3,
+  placeholder = '{"key": "value"}',
+  className,
+}: ConfigJsonTextareaProps) {
+  const t = useT()
+  const serialized = React.useMemo(() => JSON.stringify(value ?? {}, null, 2), [value])
+  const [text, setText] = React.useState(serialized)
+  const [isInvalid, setIsInvalid] = React.useState(false)
+  const [errorKind, setErrorKind] = React.useState<'syntax' | 'not-object'>('syntax')
+  const isFocusedRef = React.useRef(false)
+  const lastSerializedRef = React.useRef(serialized)
+  const onValidityChangeRef = React.useRef(onValidityChange)
+
+  React.useEffect(() => {
+    onValidityChangeRef.current = onValidityChange
+  }, [onValidityChange])
+
+  React.useEffect(() => {
+    onValidityChangeRef.current?.(!isInvalid)
+  }, [isInvalid])
+
+  React.useEffect(() => {
+    if (serialized === lastSerializedRef.current) return
+    lastSerializedRef.current = serialized
+    if (isFocusedRef.current) return
+    setText(serialized)
+    setIsInvalid(false)
+  }, [serialized])
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const nextText = event.target.value
+    setText(nextText)
+    let parsed: unknown
+    try {
+      parsed = JSON.parse(nextText)
+    } catch {
+      setIsInvalid(true)
+      setErrorKind('syntax')
+      return
+    }
+    // Valid JSON is not necessarily a valid config: an array or a scalar parses
+    // cleanly but breaks every `config.<key>` lookup downstream, so it is
+    // refused here rather than written into the activity.
+    if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed)) {
+      setIsInvalid(true)
+      setErrorKind('not-object')
+      return
+    }
+    setIsInvalid(false)
+    // Adopt the value we are about to emit as the baseline, so the round trip
+    // through the parent does not overwrite the user's raw text with a
+    // re-serialized copy — that reformat-on-every-keystroke is what made a
+    // pasted config feel uneditable (#4234).
+    lastSerializedRef.current = JSON.stringify(parsed, null, 2)
+    onChange(parsed as Record<string, unknown>)
+  }
+
+  const handleFocus = () => {
+    isFocusedRef.current = true
+  }
+
+  const handleBlur = () => {
+    isFocusedRef.current = false
+    if (!isInvalid) setText(serialized)
+  }
+
+  return (
+    <div>
+      <Textarea
+        id={id}
+        value={text}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        placeholder={placeholder}
+        rows={rows}
+        className={className}
+        aria-invalid={isInvalid || undefined}
+        aria-describedby={isInvalid ? `${id}-error` : undefined}
+      />
+      {isInvalid && (
+        <p id={`${id}-error`} role="alert" className="text-xs text-status-error-text mt-1">
+          {errorKind === 'not-object'
+            ? t('workflows.activities.configMustBeObject', 'Config must be a JSON object')
+            : t('workflows.fieldEditors.activities.invalidJson')}
+        </p>
+      )}
+    </div>
+  )
+}

package/src/modules/workflows/components/ContextSchemaEditor.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+import * as React from 'react'
+import { useCallback, useState } from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+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 { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import { TagsInput } from '@open-mercato/ui/backend/inputs/TagsInput'
+import { Braces, ChevronDown, Plus, X } from 'lucide-react'
+import type { WorkflowContextSchema, WorkflowContextSchemaField } from '../data/entities'
+
+const CONTEXT_FIELD_TYPES = ['text', 'number', 'boolean', 'select', 'date'] as const
+
+interface ContextSchemaEditorProps {
+  value: WorkflowContextSchema | undefined
+  onChange: (next: WorkflowContextSchema | undefined) => void
+  className?: string
+}
+
+export function ContextSchemaEditor({ value, onChange, className }: ContextSchemaEditorProps) {
+  const t = useT()
+  const [collapsed, setCollapsed] = useState(false)
+
+  const fields = value?.input?.fields ?? []
+
+  const emitFields = useCallback((nextFields: WorkflowContextSchemaField[]) => {
+    onChange(nextFields.length > 0 ? { input: { fields: nextFields } } : undefined)
+  }, [onChange])
+
+  const addField = useCallback(() => {
+    emitFields([...fields, { name: '', type: 'text' }])
+  }, [emitFields, fields])
+
+  const removeField = useCallback((index: number) => {
+    emitFields(fields.filter((_, fieldIndex) => fieldIndex !== index))
+  }, [emitFields, fields])
+
+  const updateField = useCallback((index: number, patch: Partial<WorkflowContextSchemaField>) => {
+    emitFields(fields.map((field, fieldIndex) => {
+      if (fieldIndex !== index) return field
+      const next = { ...field, ...patch }
+      if (next.type !== 'select') delete next.options
+      return next
+    }))
+  }, [emitFields, fields])
+
+  return (
+    <div className={className}>
+      <div className="rounded-lg border bg-card p-3 md:p-4">
+        <div className="mb-1 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <button
+            type="button"
+            onClick={() => setCollapsed((previous) => !previous)}
+            aria-expanded={!collapsed}
+            className="flex items-center gap-2 text-left focus-visible:outline-none focus-visible:shadow-focus"
+          >
+            <Braces className="w-5 h-5 text-muted-foreground" />
+            <h3 className="text-sm font-semibold uppercase text-muted-foreground">
+              {t('workflows.contextSchema.title')} ({fields.length})
+            </h3>
+            <ChevronDown className={`w-4 h-4 text-muted-foreground transition-transform ${collapsed ? '-rotate-90' : ''}`} />
+          </button>
+          <Button size="sm" variant="outline" onClick={addField} className="w-full sm:w-auto">
+            <Plus className="w-4 h-4 mr-1" />
+            {t('workflows.contextSchema.addField')}
+          </Button>
+        </div>
+
+        {!collapsed && (
+          <>
+            <p className="text-xs text-muted-foreground mb-4">
+              {t('workflows.contextSchema.description')}
+            </p>
+
+            {fields.length === 0 ? (
+              <div className="p-4 text-center text-sm text-muted-foreground bg-muted rounded-lg border">
+                {t('workflows.contextSchema.emptyState')}
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {fields.map((field, index) => (
+                  <div key={index} className="rounded-lg border bg-background p-2 space-y-2">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <Input
+                        value={field.name}
+                        onChange={(event) => updateField(index, { name: event.target.value })}
+                        placeholder={t('workflows.contextSchema.placeholders.name')}
+                        aria-label={t('workflows.contextSchema.fields.name')}
+                        className="w-full sm:w-1/4"
+                      />
+                      <Select
+                        value={field.type}
+                        onValueChange={(type) => updateField(index, { type: type as WorkflowContextSchemaField['type'] })}
+                      >
+                        <SelectTrigger
+                          size="lg"
+                          className="w-full sm:w-[130px]"
+                          aria-label={t('workflows.contextSchema.fields.type')}
+                        >
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {CONTEXT_FIELD_TYPES.map((type) => (
+                            <SelectItem key={type} value={type}>
+                              {t(`workflows.contextSchema.types.${type}`)}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <Input
+                        value={field.label ?? ''}
+                        onChange={(event) => updateField(index, { label: event.target.value })}
+                        placeholder={t('workflows.contextSchema.placeholders.label')}
+                        aria-label={t('workflows.contextSchema.fields.label')}
+                        className="flex-1 min-w-[120px]"
+                      />
+                      <label className="flex shrink-0 cursor-pointer items-center gap-2">
+                        <Checkbox
+                          checked={field.required === true}
+                          onCheckedChange={(checked) => updateField(index, { required: checked === true })}
+                          aria-label={t('workflows.contextSchema.fields.required')}
+                        />
+                        <span className="text-xs text-muted-foreground">
+                          {t('workflows.contextSchema.fields.required')}
+                        </span>
+                      </label>
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        className="shrink-0"
+                        onClick={() => removeField(index)}
+                        aria-label={t('workflows.contextSchema.removeField')}
+                      >
+                        <X className="w-4 h-4" />
+                      </Button>
+                    </div>
+                    {field.type === 'select' && (
+                      <div className="space-y-1">
+                        <Label className="text-xs">{t('workflows.contextSchema.fields.options')}</Label>
+                        <TagsInput
+                          value={field.options ?? []}
+                          onChange={(options) => updateField(index, { options })}
+                          placeholder={t('workflows.contextSchema.placeholders.options')}
+                        />
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/modules/workflows/components/DefinitionErrorHandlerField.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import { Label } from '@open-mercato/ui/primitives/label'
+import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { WorkflowErrorHandlerConfig } from '../data/validators'
+
+export type DefinitionErrorHandlerFieldProps = {
+  value: WorkflowErrorHandlerConfig | null | undefined
+  onChange: (next: WorkflowErrorHandlerConfig | null) => void
+  stepOptions: Array<{ stepId: string; label: string }>
+}
+
+const NONE_MODE = 'none'
+const STEP_MODE = 'step'
+const WORKFLOW_MODE = 'workflow'
+
+function readMode(value: WorkflowErrorHandlerConfig | null | undefined): string {
+  if (value?.stepId) return STEP_MODE
+  if (value?.workflowId) return WORKFLOW_MODE
+  return NONE_MODE
+}
+
+/**
+ * Definition-level catch-all error handler (spec 5.9). Exactly one form is
+ * declared at a time; clearing it back to "none" removes the key so the saved
+ * definition is identical to one that never used the picker.
+ */
+export function DefinitionErrorHandlerField({
+  value,
+  onChange,
+  stepOptions,
+}: DefinitionErrorHandlerFieldProps) {
+  const t = useT()
+  const mode = readMode(value)
+
+  const handleModeChange = (next: string) => {
+    if (next === STEP_MODE) {
+      onChange({ stepId: stepOptions[0]?.stepId ?? '' })
+      return
+    }
+    if (next === WORKFLOW_MODE) {
+      onChange({ workflowId: '' })
+      return
+    }
+    onChange(null)
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div className="min-w-0 space-y-1.5">
+          <Label htmlFor="error-handler-mode" className="text-xs">
+            {t('workflows.visualEditor.errorHandler.label', 'On unhandled failure')}
+          </Label>
+          <Select value={mode} onValueChange={handleModeChange}>
+            <SelectTrigger
+              id="error-handler-mode"
+              aria-label={t('workflows.visualEditor.errorHandler.label', 'On unhandled failure')}
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value={NONE_MODE}>
+                {t('workflows.visualEditor.errorHandler.none', 'Fail the instance (default)')}
+              </SelectItem>
+              <SelectItem value={STEP_MODE}>
+                {t('workflows.visualEditor.errorHandler.step', 'Go to a handler step')}
+              </SelectItem>
+              <SelectItem value={WORKFLOW_MODE}>
+                {t('workflows.visualEditor.errorHandler.workflow', 'Run a handler workflow')}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+      </div>
+
+      {mode === STEP_MODE ? (
+        <div className="min-w-0 space-y-1.5">
+          <Label htmlFor="error-handler-step" className="text-xs">
+            {t('workflows.visualEditor.errorHandler.stepLabel', 'Handler step')}
+          </Label>
+          <Select
+            value={value?.stepId ?? ''}
+            onValueChange={(stepId) => onChange({ stepId })}
+          >
+            <SelectTrigger
+              id="error-handler-step"
+              aria-label={t('workflows.visualEditor.errorHandler.stepLabel', 'Handler step')}
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {stepOptions.map((step) => (
+                <SelectItem key={step.stepId} value={step.stepId}>
+                  {step.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      ) : null}
+
+      {mode === WORKFLOW_MODE ? (
+        <div className="min-w-0 space-y-1.5">
+          <Label htmlFor="error-handler-workflow" className="text-xs">
+            {t('workflows.visualEditor.errorHandler.workflowLabel', 'Handler workflow id')}
+          </Label>
+          <Input
+            id="error-handler-workflow"
+            value={value?.workflowId ?? ''}
+            placeholder={t('workflows.visualEditor.errorHandler.workflowPlaceholder', 'order-failure-handler')}
+            onChange={(event) => onChange({ workflowId: event.target.value, version: value?.version })}
+          />
+        </div>
+      ) : null}
+      </div>
+
+      <p className="text-xs text-muted-foreground">
+        {t(
+          'workflows.visualEditor.errorHandler.help',
+          'Catch-all for failures no error route and no step directive handled. A handler step keeps the run going in place; a handler workflow starts separately with the failed step, the error and a context snapshot.',
+        )}
+      </p>
+    </div>
+  )
+}