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

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

@@ -16,16 +16,21 @@ import {
 import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@open-mercato/ui/primitives/dialog'
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@open-mercato/ui/primitives/drawer'
 import { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'
+import { ConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
 import { EventPatternInput } from '@open-mercato/ui/backend/inputs/EventPatternInput'
+import { ComboboxInput, type ComboboxOption } from '@open-mercato/ui/backend/inputs/ComboboxInput'
+import { useAvailableEvents } from '@open-mercato/ui/backend/inputs/EventSelect'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { EventPayloadSchemaField } from '@open-mercato/shared/modules/events'
 import { Plus, Trash2, Edit2, Zap, X } from 'lucide-react'
 import type { WorkflowDefinitionTrigger } from '../data/entities'
 
@@ -94,6 +99,41 @@ export function DefinitionTriggersEditor({
   const [editingTrigger, setEditingTrigger] = useState<WorkflowDefinitionTrigger | null>(null)
   const [formValues, setFormValues] = useState<TriggerFormValues>(defaultFormValues)
   const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null)
+  const { events: availableEvents } = useAvailableEvents()
+
+  // Declared payload fields for the selected event. Only an EXACT event id
+  // resolves a schema — wildcard patterns can match events with different
+  // payloads, so they stay free-text with the untyped-payload chip.
+  const payloadFields = React.useMemo<ReadonlyArray<EventPayloadSchemaField> | null>(() => {
+    const pattern = formValues.eventPattern.trim()
+    if (!pattern || pattern.includes('*')) return null
+    const event = availableEvents.find(candidate => candidate.id === pattern)
+    const fields = event?.payloadSchema?.fields
+    return fields && fields.length > 0 ? fields : null
+  }, [availableEvents, formValues.eventPattern])
+
+  const payloadPathOptions = React.useMemo<ComboboxOption[]>(
+    () =>
+      (payloadFields ?? []).map(field => ({
+        value: field.path,
+        label: field.path,
+        description: field.optional
+          ? `${field.type} · ${t('workflows.triggers.payloadField.optional', 'optional')}`
+          : field.type,
+      })),
+    [payloadFields, t],
+  )
+
+  const payloadFieldType = useCallback(
+    (path: string) => payloadFields?.find(field => field.path === path)?.type,
+    [payloadFields],
+  )
+
+  const untypedPayloadChip = formValues.eventPattern.trim() && !payloadFields ? (
+    <Badge variant="outline" className="text-muted-foreground">
+      {t('workflows.triggers.untypedPayload', 'Untyped event payload')}
+    </Badge>
+  ) : null
 
   // Generate trigger ID from name
   const generateTriggerId = useCallback((name: string) => {
@@ -324,13 +364,18 @@ export function DefinitionTriggersEditor({
                   </div>
                 </div>
                 <div className="flex items-center gap-2 self-end sm:self-auto">
-                  <Button size="sm" variant="ghost" onClick={() => handleEdit(trigger)}>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    aria-label={t('workflows.triggers.actions.edit', 'Edit trigger')}
+                    onClick={() => handleEdit(trigger)}
+                  >
                     <Edit2 className="w-4 h-4" />
                   </Button>
                   <Button
                     size="sm"
-                    variant="ghost"
-                    className="text-destructive hover:text-destructive"
+                    variant="destructive-ghost"
+                    aria-label={t('workflows.triggers.actions.delete', 'Delete trigger')}
                     onClick={() => setDeleteConfirmId(trigger.triggerId)}
                   >
                     <Trash2 className="w-4 h-4" />
@@ -342,22 +387,39 @@ export function DefinitionTriggersEditor({
         )}
       </div>
 
-      {/* Create/Edit Dialog */}
-      <Dialog open={showDialog} onOpenChange={setShowDialog}>
-        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle>
+      {/* Create/Edit rail. It opens ON TOP of the definition metadata drawer
+          that hosts this editor, so it slides in over it rather than centring a
+          modal on a page whose left half is already a panel. */}
+      <Drawer open={showDialog} onOpenChange={setShowDialog}>
+        <DrawerContent
+          data-testid="workflow-trigger-drawer"
+          className="w-full max-w-none sm:w-3/5"
+          closeAriaLabel={t('workflows.triggers.dialog.close', 'Close trigger editor')}
+          // Cmd/Ctrl+Enter submits — the project-wide rule this surface never
+          // implemented. It also stops the keystroke here so it cannot bubble
+          // to the details drawer and save the whole workflow from a
+          // half-filled trigger form.
+          onKeyDown={(event) => {
+            if (!(event.metaKey || event.ctrlKey) || event.key !== 'Enter') return
+            event.preventDefault()
+            event.stopPropagation()
+            if (!formValues.name.trim() || !formValues.eventPattern.trim()) return
+            handleSubmit()
+          }}
+        >
+          <DrawerHeader>
+            <DrawerTitle>
               {editingTrigger
                 ? t('workflows.triggers.dialog.edit.title', 'Edit Event Trigger')
                 : t('workflows.triggers.dialog.create.title', 'Create Event Trigger')
               }
-            </DialogTitle>
-            <DialogDescription>
+            </DrawerTitle>
+            <DrawerDescription>
               {t('workflows.triggers.dialog.description', 'Configure when this workflow should be automatically started based on system events.')}
-            </DialogDescription>
-          </DialogHeader>
+            </DrawerDescription>
+          </DrawerHeader>
 
-          <div className="space-y-4 py-4">
+          <DrawerBody className="space-y-4 py-4">
             {/* Basic Info */}
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               <div className="space-y-1">
@@ -420,7 +482,10 @@ export function DefinitionTriggersEditor({
             {/* Filter Conditions */}
             <div className="space-y-2">
               <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                <Label>{t('workflows.triggers.fields.filterConditions', 'Filter Conditions')}</Label>
+                <div className="flex items-center gap-2">
+                  <Label>{t('workflows.triggers.fields.filterConditions', 'Filter Conditions')}</Label>
+                  {untypedPayloadChip}
+                </div>
                 <Button size="sm" variant="ghost" onClick={addFilterCondition} className="w-full sm:w-auto">
                   <Plus className="w-4 h-4 mr-1" />
                   {t('workflows.triggers.addCondition', 'Add Condition')}
@@ -429,46 +494,80 @@ export function DefinitionTriggersEditor({
               <p className="text-xs text-muted-foreground">
                 {t('workflows.triggers.hints.filterConditions', 'Only trigger when the event payload matches these conditions (all must match)')}
               </p>
-              {formValues.filterConditions.map((fc, index) => (
-                <div key={index} className="flex flex-wrap items-center gap-2">
-                  <Input
-                    value={fc.field}
-                    onChange={e => updateFilterCondition(index, 'field', e.target.value)}
-                    placeholder="status"
-                    className="w-full sm:w-1/3"
-                  />
-                  <Select
-                    value={fc.operator}
-                    onValueChange={(value) => updateFilterCondition(index, 'operator', value)}
-                  >
-                    <SelectTrigger size="lg" className="w-full sm:w-[140px]">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {FILTER_OPERATORS.map(op => (
-                        <SelectItem key={op.value} value={op.value}>
-                          {op.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <Input
-                    value={fc.value}
-                    onChange={e => updateFilterCondition(index, 'value', e.target.value)}
-                    placeholder="submitted"
-                    className="flex-1 min-w-0"
-                  />
-                  <Button size="icon" variant="ghost" className="shrink-0" onClick={() => removeFilterCondition(index)}>
-                    <X className="w-4 h-4" />
-                  </Button>
-                </div>
-              ))}
+              {formValues.filterConditions.map((fc, index) => {
+                const conditionFieldType = payloadFieldType(fc.field)
+                return (
+                  <div key={index} className="flex flex-wrap items-center gap-2">
+                    {payloadFields ? (
+                      <div className="w-full sm:w-1/3">
+                        <ComboboxInput
+                          value={fc.field}
+                          onChange={next => updateFilterCondition(index, 'field', next)}
+                          suggestions={payloadPathOptions}
+                          placeholder={t('workflows.triggers.placeholders.status', 'status')}
+                          allowCustomValues
+                        />
+                      </div>
+                    ) : (
+                      <Input
+                        value={fc.field}
+                        onChange={e => updateFilterCondition(index, 'field', e.target.value)}
+                        placeholder={t('workflows.triggers.placeholders.status', 'status')}
+                        className="w-full sm:w-1/3"
+                      />
+                    )}
+                    <Select
+                      value={fc.operator}
+                      onValueChange={(value) => updateFilterCondition(index, 'operator', value)}
+                    >
+                      <SelectTrigger size="lg" className="w-full sm:w-[140px]">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {FILTER_OPERATORS.map(op => (
+                          <SelectItem key={op.value} value={op.value}>
+                            {op.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    {conditionFieldType === 'boolean' ? (
+                      <Select
+                        value={fc.value || undefined}
+                        onValueChange={(value) => updateFilterCondition(index, 'value', value ?? '')}
+                      >
+                        <SelectTrigger size="lg" className="flex-1 min-w-0">
+                          <SelectValue placeholder={t('workflows.triggers.values.placeholder', 'Select value')} />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="true">{t('workflows.triggers.values.true', 'True')}</SelectItem>
+                          <SelectItem value="false">{t('workflows.triggers.values.false', 'False')}</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    ) : (
+                      <Input
+                        type={conditionFieldType === 'number' ? 'number' : 'text'}
+                        value={fc.value}
+                        onChange={e => updateFilterCondition(index, 'value', e.target.value)}
+                        placeholder={t('workflows.triggers.placeholders.submitted', 'submitted')}
+                        className="flex-1 min-w-0"
+                      />
+                    )}
+                    <Button size="icon" variant="ghost" className="shrink-0" onClick={() => removeFilterCondition(index)}>
+                      <X className="w-4 h-4" />
+                    </Button>
+                  </div>
+                )
+              })}
             </div>
 
             {/* Context Mapping */}
             <div className="space-y-2">
               <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-                <Label>{t('workflows.triggers.fields.contextMapping', 'Context Mapping')}</Label>
+                <div className="flex items-center gap-2">
+                  <Label>{t('workflows.triggers.fields.contextMapping', 'Context Mapping')}</Label>
+                  {untypedPayloadChip}
+                </div>
                 <Button size="sm" variant="ghost" onClick={addContextMapping} className="w-full sm:w-auto">
                   <Plus className="w-4 h-4 mr-1" />
                   {t('workflows.triggers.addMapping', 'Add Mapping')}
@@ -482,20 +581,32 @@ export function DefinitionTriggersEditor({
                   <Input
                     value={cm.targetKey}
                     onChange={e => updateContextMapping(index, 'targetKey', e.target.value)}
-                    placeholder="orderId"
+                    placeholder={t('workflows.triggers.placeholders.orderId', 'orderId')}
                     className="w-full sm:w-1/3"
                   />
                   <span className="hidden sm:inline text-muted-foreground">=</span>
-                  <Input
-                    value={cm.sourceExpression}
-                    onChange={e => updateContextMapping(index, 'sourceExpression', e.target.value)}
-                    placeholder="id"
-                    className="flex-1 min-w-0"
-                  />
+                  {payloadFields ? (
+                    <div className="flex-1 min-w-0">
+                      <ComboboxInput
+                        value={cm.sourceExpression}
+                        onChange={next => updateContextMapping(index, 'sourceExpression', next)}
+                        suggestions={payloadPathOptions}
+                        placeholder={t('workflows.triggers.placeholders.sourceExpression', 'id')}
+                        allowCustomValues
+                      />
+                    </div>
+                  ) : (
+                    <Input
+                      value={cm.sourceExpression}
+                      onChange={e => updateContextMapping(index, 'sourceExpression', e.target.value)}
+                      placeholder={t('workflows.triggers.placeholders.sourceExpression', 'id')}
+                      className="flex-1 min-w-0"
+                    />
+                  )}
                   <Input
                     value={cm.defaultValue}
                     onChange={e => updateContextMapping(index, 'defaultValue', e.target.value)}
-                    placeholder="default"
+                    placeholder={t('workflows.triggers.placeholders.defaultValue', 'default')}
                     className="w-full sm:w-24"
                   />
                   <Button size="icon" variant="ghost" className="shrink-0" onClick={() => removeContextMapping(index)}>
@@ -514,10 +625,10 @@ export function DefinitionTriggersEditor({
                   type="number"
                   value={formValues.debounceMs}
                   onChange={e => setFormValues(prev => ({ ...prev, debounceMs: e.target.value }))}
-                  placeholder="0"
+                  placeholder={t('workflows.triggers.placeholders.debounce', 'e.g. 1000')}
                 />
                 <p className="text-xs text-muted-foreground">
-                  {t('workflows.triggers.hints.debounce', 'Delay to prevent rapid re-triggers')}
+                  {t('workflows.triggers.hints.debounce', 'Wait this many milliseconds after an event before starting, so a burst of similar events starts only one workflow. Leave empty to start immediately.')}
                 </p>
               </div>
               <div className="space-y-1">
@@ -530,13 +641,13 @@ export function DefinitionTriggersEditor({
                   placeholder={t('workflows.triggers.placeholders.unlimited', 'Unlimited')}
                 />
                 <p className="text-xs text-muted-foreground">
-                  {t('workflows.triggers.hints.maxConcurrent', 'Limit simultaneous workflow instances')}
+                  {t('workflows.triggers.hints.maxConcurrent', 'Cap how many instances this trigger can have running at the same time; events past the cap are skipped. Leave empty for no limit.')}
                 </p>
               </div>
             </div>
-          </div>
+          </DrawerBody>
 
-          <DialogFooter>
+          <DrawerFooter>
             <Button variant="outline" onClick={handleCloseDialog}>
               {t('common.cancel', 'Cancel')}
             </Button>
@@ -549,32 +660,22 @@ export function DefinitionTriggersEditor({
                 : t('common.create', 'Create')
               }
             </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* Delete Confirmation Dialog */}
-      <Dialog open={!!deleteConfirmId} onOpenChange={() => setDeleteConfirmId(null)}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{t('workflows.triggers.delete.title', 'Delete Event Trigger?')}</DialogTitle>
-            <DialogDescription>
-              {t('workflows.triggers.delete.description', 'This will remove the event trigger. The change will take effect when you save the workflow definition.')}
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setDeleteConfirmId(null)}>
-              {t('common.cancel', 'Cancel')}
-            </Button>
-            <Button
-              variant="destructive-solid"
-              onClick={() => deleteConfirmId && handleDelete(deleteConfirmId)}
-            >
-              {t('common.delete', 'Delete')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+
+      {/* Removing a trigger is a yes/no interruption, so it stays a blocking
+          confirmation rather than becoming a rail. */}
+      <ConfirmDialog
+        open={!!deleteConfirmId}
+        onOpenChange={(next) => { if (!next) setDeleteConfirmId(null) }}
+        title={t('workflows.triggers.delete.title', 'Delete Event Trigger?')}
+        text={t('workflows.triggers.delete.description', 'This will remove the event trigger. The change will take effect when you save the workflow definition.')}
+        confirmText={t('common.delete', 'Delete')}
+        cancelText={t('common.cancel', 'Cancel')}
+        variant="destructive"
+        onConfirm={() => { if (deleteConfirmId) handleDelete(deleteConfirmId) }}
+      />
     </div>
   )
 }

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

@@ -27,8 +27,10 @@ import {ChevronDown, Plus, Trash2} from 'lucide-react'
 import {type BusinessRule, BusinessRulesSelector} from './BusinessRulesSelector'
 import {JsonBuilder} from '@open-mercato/ui/backend/JsonBuilder'
 import {useT} from '@open-mercato/shared/lib/i18n/context'
+import {useActivityTypeOptions} from './fields/useActivityTypeOptions'
 import {useDialogKeyHandler} from '@open-mercato/ui/hooks/useDialogKeyHandler'
 import {useConfirmDialog} from '@open-mercato/ui/backend/confirm-dialog'
+import {DurationInput} from '@open-mercato/ui/backend/inputs/DurationInput'
 
 export interface EdgeEditDialogProps {
   edge: Edge | null
@@ -56,6 +58,7 @@ interface TransitionCondition {
  */
 export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: EdgeEditDialogProps) {
   const t = useT()
+  const activityTypeOptions = useActivityTypeOptions()
   const { confirm: confirmDialog, ConfirmDialogElement } = useConfirmDialog()
   const [transitionName, setTransitionName] = useState('')
   const [trigger, setTrigger] = useState('auto')
@@ -538,7 +541,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                           <div className="border-t border-border pt-3">
                             <Button
                               type="button"
-                              variant="destructive"
+                              variant="destructive-outline"
                               size="sm"
                               onClick={() => removePreCondition(index)}
                             >
@@ -684,7 +687,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                           <div className="border-t border-border pt-3">
                             <Button
                               type="button"
-                              variant="destructive"
+                              variant="destructive-outline"
                               size="sm"
                               onClick={() => removePostCondition(index)}
                             >
@@ -788,13 +791,11 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                                 <SelectValue />
                               </SelectTrigger>
                               <SelectContent>
-                                <SelectItem value="SEND_EMAIL">{t('workflows.activities.types.SEND_EMAIL')}</SelectItem>
-                                <SelectItem value="CALL_API">{t('workflows.activities.types.CALL_API')}</SelectItem>
-                                <SelectItem value="UPDATE_ENTITY">{t('workflows.activities.types.UPDATE_ENTITY')}</SelectItem>
-                                <SelectItem value="EMIT_EVENT">{t('workflows.activities.types.EMIT_EVENT')}</SelectItem>
-                                <SelectItem value="CALL_WEBHOOK">{t('workflows.activities.types.CALL_WEBHOOK')}</SelectItem>
-                                <SelectItem value="EXECUTE_FUNCTION">{t('workflows.activities.types.EXECUTE_FUNCTION')}</SelectItem>
-                                <SelectItem value="WAIT">{t('workflows.activities.types.WAIT')}</SelectItem>
+                                {activityTypeOptions.map((type) => (
+                                  <SelectItem key={type.value} value={type.value}>
+                                    {type.label}
+                                  </SelectItem>
+                                ))}
                               </SelectContent>
                             </Select>
                           </div>
@@ -802,12 +803,10 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                           {/* Timeout */}
                           <div>
                             <label className="block text-xs font-medium text-foreground mb-1">{t('workflows.edgeEditor.timeout')}</label>
-                            <Input
-                              type="text"
-                              size="sm"
+                            <DurationInput
                               value={activity.timeout || ''}
-                              onChange={(e) => updateActivity(index, 'timeout', e.target.value)}
-                              placeholder={t('workflows.edgeEditor.timeoutPlaceholder')}
+                              onChange={(value) => updateActivity(index, 'timeout', value)}
+                              aria-label={t('workflows.edgeEditor.timeout')}
                             />
                             <p className="text-xs text-muted-foreground mt-0.5">{t('workflows.edgeEditor.timeoutHint')}</p>
                           </div>
@@ -911,7 +910,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                           <div className="border-t border-border pt-3">
                             <Button
                               type="button"
-                              variant="destructive"
+                              variant="destructive-outline"
                               size="sm"
                               onClick={() => removeActivity(index)}
                             >
@@ -959,7 +958,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
         <DialogFooter className="flex justify-between">
           <Button
             type="button"
-            variant="destructive"
+            variant="destructive-outline"
             onClick={handleDelete}
           >
             <Trash2 className="size-4" />