@@ -45,7 +45,9 @@ import { Input } from "ui/input"
4545import { Item , ItemContent , ItemHeader } from "ui/item"
4646import { Select , SelectContent , SelectItem , SelectTrigger , SelectValue } from "ui/select"
4747import { FormSubmitButton } from "ui/submit-button"
48+ import { Textarea } from "ui/textarea"
4849import { type TokenContext , TokenProvider } from "ui/tokens"
50+ import { Tooltip , TooltipContent , TooltipTrigger } from "ui/tooltip"
4951import { cn } from "utils"
5052
5153import { ActionConfigBuilder } from "~/actions/_lib/ActionConfigBuilder"
@@ -386,62 +388,82 @@ const ResolverFieldSection = memo(
386388 form : UseFormReturn < CreateAutomationsSchema >
387389 resolver : string | null | undefined
388390 } ) {
391+ const hasResolver = props . resolver !== undefined && props . resolver !== null
392+
393+ if ( ! hasResolver ) {
394+ return (
395+ < Button
396+ type = "button"
397+ variant = "ghost"
398+ size = "sm"
399+ className = "h-8 p-0 text-muted-foreground text-xs"
400+ onClick = { ( ) => props . form . setValue ( "resolver" , "" ) }
401+ >
402+ < Plus size = { 14 } />
403+ Add resolver
404+ </ Button >
405+ )
406+ }
407+
389408 return (
390409 < Controller
391410 control = { props . form . control }
392411 name = "resolver"
393412 render = { ( { field, fieldState } ) => (
394- < Field data-invalid = { fieldState . invalid } >
395- < div className = "flex items-center justify-between" >
396- < FieldLabel >
397- Resolver (optional)
398- < InfoButton >
399- < p className = "text-xs" >
400- A JSONata expression to resolve a different Pub or transform
401- JSON input before actions run.
402- < br />
403- < br />
404- < strong > Comparison expressions</ strong > like{ " " }
405- < code > $.json.some.id = $.pub.values.fieldname</ code > will
406- find a Pub where the field matches the left side value.
407- < br />
408- < br />
409- < strong > Transform expressions</ strong > can restructure the
410- input data for the automation's actions.
411- </ p >
412- </ InfoButton >
413- </ FieldLabel >
414- { props . resolver && (
415- < Button
416- type = "button"
417- variant = "ghost"
418- size = "sm"
419- className = "h-7 text-neutral-500 text-xs"
420- onClick = { ( ) => {
421- field . onChange ( undefined )
422- } }
423- >
424- Remove resolver
425- </ Button >
426- ) }
413+ < div >
414+ < div className = "mb-2 flex items-center justify-between" >
415+ < div className = "flex items-center gap-2" >
416+ < Tooltip delayDuration = { 300 } >
417+ < TooltipTrigger asChild >
418+ < span className = "cursor-help rounded bg-amber-100 px-1.5 py-0.5 font-medium text-amber-800 text-xs" >
419+ Resolver
420+ </ span >
421+ </ TooltipTrigger >
422+ < TooltipContent className = "max-w-sm text-xs" >
423+ < p >
424+ A JSONata expression to resolve a different Pub or
425+ transform JSON input before actions run.
426+ </ p >
427+ < p className = "mt-2" >
428+ < strong > Query:</ strong > { " " }
429+ < code className = "text-xs" >
430+ { "$.pub.values.externalId = {{ $.json.body.id }}" }
431+ </ code >
432+ </ p >
433+ < p className = "mt-1" >
434+ < strong > Transform:</ strong > { " " }
435+ < code className = "text-xs" >
436+ { '{ "title": $.json.body.name }' }
437+ </ code >
438+ </ p >
439+ </ TooltipContent >
440+ </ Tooltip >
441+ </ div >
442+ < Button
443+ type = "button"
444+ variant = "ghost"
445+ size = "sm"
446+ className = "h-6 p-1 text-muted-foreground hover:text-destructive"
447+ onClick = { ( ) => field . onChange ( undefined ) }
448+ >
449+ < X size = { 14 } />
450+ </ Button >
427451 </ div >
428- < Input
452+ < Textarea
429453 { ...field }
430454 value = { field . value ?? "" }
431- placeholder = "Enter JSONata expression (e.g., $.json.articleId = $.pub.values.externalId) "
455+ placeholder = "$.pub.values.externalId = {{ $.json.body.articleId }} "
432456 className = { cn (
433- "font-mono text-sm" ,
457+ "min-h-[60px] border-amber-300 bg-white font-mono text-sm focus:border-amber-400 focus-visible:ring-amber-400 dark:bg-input/30 dark:text-white " ,
434458 fieldState . invalid && "border-red-300"
435459 ) }
436460 />
437- < FieldDescription >
438- Use a JSONata expression to resolve a Pub by comparing values, e.g.,{ " " }
439- < code > $.json.id = $.pub.values.externalId</ code >
440- </ FieldDescription >
441461 { fieldState . error && (
442- < FieldError className = "text-xs" > { fieldState . error . message } </ FieldError >
462+ < p className = "mt-1 text-destructive text-xs" >
463+ { fieldState . error . message }
464+ </ p >
443465 ) }
444- </ Field >
466+ </ div >
445467 ) }
446468 />
447469 )
0 commit comments