API support for added template functions (eg. cookies)

src-web/components/DynamicForm.tsx

@@ -237,6 +237,7 @@ function TextArg({
       defaultValue={value === DYNAMIC_FORM_NULL_ARG ? arg.defaultValue : value}
       required={!arg.optional}
       disabled={arg.disabled}
+      help={arg.description}
       type={arg.password ? 'password' : 'text'}
       label={arg.label ?? arg.name}
       size={INPUT_SIZE}
@@ -278,6 +279,7 @@ function EditorArg({
         htmlFor={id}
         required={!arg.optional}
         visuallyHidden={arg.hideLabel}
+        help={arg.description}
         tags={arg.language ? [capitalize(arg.language)] : undefined}
       >
         {arg.label}
@@ -319,6 +321,7 @@ function SelectArg({
     <Select
       label={arg.label ?? arg.name}
       name={arg.name}
+      help={arg.description}
       onChange={onChange}
       hideLabel={arg.hideLabel}
       value={value}
@@ -341,6 +344,7 @@ function FileArg({
   return (
     <SelectFile
       disabled={arg.disabled}
+      help={arg.description}
       onChange={({ filePath }) => onChange(filePath)}
       filePath={filePath === '__NULL__' ? null : filePath}
       directory={!!arg.directory}
@@ -365,6 +369,7 @@ function HttpRequestArg({
       label={arg.label ?? arg.name}
       name={arg.name}
       onChange={onChange}
+      help={arg.description}
       value={value}
       disabled={arg.disabled}
       options={[
@@ -412,6 +417,7 @@ function CheckboxArg({
     <Checkbox
       onChange={onChange}
       checked={value}
+      help={arg.description}
       disabled={arg.disabled}
       title={arg.label ?? arg.name}
       hideLabel={arg.label == null}

src-web/components/core/Input.tsx

@@ -58,6 +58,7 @@ export type InputProps = Pick<
   fullHeight?: boolean;
   hideLabel?: boolean;
   inputWrapperClassName?: string;
+  help?: ReactNode;
   label: ReactNode;
   labelClassName?: string;
   labelPosition?: 'top' | 'left';
@@ -94,33 +95,34 @@ const BaseInput = forwardRef<EditorView, InputProps>(function InputBase(
   {
     className,
     containerClassName,
-    inputWrapperClassName,
     defaultValue,
+    disableObscureToggle,
+    disabled,
     forceUpdateKey,
     fullHeight,
+    help,
     hideLabel,
+    inputWrapperClassName,
     label,
     labelClassName,
     labelPosition = 'top',
     leftSlot,
+    multiLine,
     onBlur,
     onChange,
     onFocus,
     onPaste,
     onPasteOverwrite,
     placeholder,
+    readOnly,
     required,
     rightSlot,
-    wrapLines,
     size = 'md',
-    type = 'text',
-    disableObscureToggle,
-    tint,
-    validate,
-    readOnly,
     stateKey,
-    multiLine,
-    disabled,
+    tint,
+    type = 'text',
+    validate,
+    wrapLines,
     ...props
   }: InputProps,
   ref,
@@ -216,6 +218,7 @@ const BaseInput = forwardRef<EditorView, InputProps>(function InputBase(
     >
       <Label
         htmlFor={id.current}
+        help={help}
         required={required}
         visuallyHidden={hideLabel}
         className={classNames(labelClassName)}

src-web/components/core/Select.tsx

@@ -16,6 +16,7 @@ export interface SelectProps<T extends string> {
   labelClassName?: string;
   hideLabel?: boolean;
   value: T;
+  help?: ReactNode;
   leftSlot?: ReactNode;
   options: RadioDropdownItem<T>[];
   onChange: (value: T) => void;
@@ -28,6 +29,7 @@ export interface SelectProps<T extends string> {
 export function Select<T extends string>({
   labelPosition = 'top',
   name,
+  help,
   labelClassName,
   disabled,
   hideLabel,
@@ -59,7 +61,7 @@ export function Select<T extends string>({
         labelPosition === 'top' && 'flex-row gap-0.5',
       )}
     >
-      <Label htmlFor={id} visuallyHidden={hideLabel} className={labelClassName}>
+      <Label htmlFor={id} visuallyHidden={hideLabel} className={labelClassName} help={help}>
         {label}
       </Label>
       {type() === 'macos' ? (