A bit more chaining cleanup

src-web/components/TemplateFunctionDialog.tsx

@@ -1,6 +1,7 @@
 import type {
   TemplateFunction,
   TemplateFunctionArg,
+  TemplateFunctionCheckboxArg,
   TemplateFunctionHttpRequestArg,
   TemplateFunctionSelectArg,
   TemplateFunctionTextArg,
@@ -14,6 +15,7 @@ import { useRenderTemplate } from '../hooks/useRenderTemplate';
 import { useTemplateTokensToString } from '../hooks/useTemplateTokensToString';
 import { fallbackRequestName } from '../lib/fallbackRequestName';
 import { Button } from './core/Button';
+import { Checkbox } from './core/Checkbox';
 import { InlineCode } from './core/InlineCode';
 import { PlainInput } from './core/PlainInput';
 import { Select } from './core/Select';
@@ -29,7 +31,7 @@ interface Props {
 }
 
 export function TemplateFunctionDialog({ templateFunction, hide, initialTokens, onChange }: Props) {
-  const [argValues, setArgValues] = useState<Record<string, string>>(() => {
+  const [argValues, setArgValues] = useState<Record<string, string | boolean>>(() => {
     const initial: Record<string, string> = {};
     const initialArgs =
       initialTokens.tokens[0]?.type === 'tag' && initialTokens.tokens[0]?.val.type === 'fn'
@@ -48,20 +50,20 @@ export function TemplateFunctionDialog({ templateFunction, hide, initialTokens,
     return initial;
   });
 
-  const setArgValue = useCallback((name: string, value: string) => {
+  const setArgValue = useCallback((name: string, value: string | boolean) => {
     setArgValues((v) => ({ ...v, [name]: value }));
   }, []);
 
   const tokens: Tokens = useMemo(() => {
+    console.log('HELLO', argValues);
     const argTokens: FnArg[] = Object.keys(argValues).map((name) => ({
       name,
       value:
         argValues[name] === NULL_ARG
           ? { type: 'null' }
-          : {
-              type: 'str',
-              text: argValues[name] ?? '',
-            },
+          : typeof argValues[name] === 'boolean'
+          ? { type: 'bool', value: argValues[name] }
+          : { type: 'str', text: argValues[name] ?? '' },
     }));
 
     return {
@@ -101,7 +103,7 @@ export function TemplateFunctionDialog({ templateFunction, hide, initialTokens,
                   key={i}
                   arg={a}
                   onChange={(v) => setArgValue(a.name, v)}
-                  value={argValues[a.name] ?? '__ERROR__'}
+                  value={argValues[a.name] ? String(argValues[a.name]) : '__ERROR__'}
                 />
               );
             case 'text':
@@ -110,7 +112,16 @@ export function TemplateFunctionDialog({ templateFunction, hide, initialTokens,
                   key={i}
                   arg={a}
                   onChange={(v) => setArgValue(a.name, v)}
-                  value={argValues[a.name] ?? '__ERROR__'}
+                  value={argValues[a.name] ? String(argValues[a.name]) : '__ERROR__'}
+                />
+              );
+            case 'checkbox':
+              return (
+                <CheckboxArg
+                  key={i}
+                  arg={a}
+                  onChange={(v) => setArgValue(a.name, v)}
+                  value={argValues[a.name] !== undefined ? argValues[a.name] === true : false}
                 />
               );
             case 'http_request':
@@ -119,7 +130,7 @@ export function TemplateFunctionDialog({ templateFunction, hide, initialTokens,
                   key={i}
                   arg={a}
                   onChange={(v) => setArgValue(a.name, v)}
-                  value={argValues[a.name] ?? '__ERROR__'}
+                  value={argValues[a.name] ? String(argValues[a.name]) : '__ERROR__'}
                 />
               );
           }
@@ -211,3 +222,22 @@ function HttpRequestArg({
     />
   );
 }
+
+function CheckboxArg({
+  arg,
+  onChange,
+  value,
+}: {
+  arg: TemplateFunctionCheckboxArg;
+  value: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <Checkbox
+      onChange={onChange}
+      checked={value}
+      title={arg.label ?? arg.name}
+      hideLabel={arg.label == null}
+    />
+  );
+}

src-web/components/TemplateVariableDialog.tsx

@@ -1,4 +1,3 @@
-import type { EnvironmentVariable } from '@yaakapp/api';
 import { useCallback, useMemo, useState } from 'react';
 import type { Tokens } from '../gen/Tokens';
 import { useActiveEnvironmentVariables } from '../hooks/useActiveEnvironmentVariables';
@@ -10,7 +9,6 @@ import { Select } from './core/Select';
 import { VStack } from './core/Stacks';
 
 interface Props {
-  definition: EnvironmentVariable;
   initialTokens: Tokens;
   hide: () => void;
   onChange: (rawTag: string) => void;

src-web/components/core/Editor/Editor.tsx

@@ -180,7 +180,30 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
   );
 
   const onClickVariable = useCallback(
-    async (v: EnvironmentVariable, tagValue: string, startPos: number) => {
+    async (_v: EnvironmentVariable, tagValue: string, startPos: number) => {
+      const initialTokens = await parseTemplate(tagValue);
+      dialog.show({
+        size: 'dynamic',
+        id: 'template-variable',
+        title: 'Configure Variable',
+        render: ({ hide }) => (
+          <TemplateVariableDialog
+            hide={hide}
+            initialTokens={initialTokens}
+            onChange={(insert) => {
+              cm.current?.view.dispatch({
+                changes: [{ from: startPos, to: startPos + tagValue.length, insert }],
+              });
+            }}
+          />
+        ),
+      });
+    },
+    [dialog],
+  );
+
+  const onClickMissingVariable = useCallback(
+    async (_name: string, tagValue: string, startPos: number) => {
       const initialTokens = await parseTemplate(tagValue);
       dialog.show({
         size: 'dynamic',
@@ -188,7 +211,6 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
         title: 'Configure Variable',
         render: ({ hide }) => (
           <TemplateVariableDialog
-            definition={v}
             hide={hide}
             initialTokens={initialTokens}
             onChange={(insert) => {
@@ -215,6 +237,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
       templateFunctions,
       onClickFunction,
       onClickVariable,
+      onClickMissingVariable,
     });
     view.dispatch({ effects: languageCompartment.reconfigure(ext) });
   }, [
@@ -225,6 +248,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
     templateFunctions,
     onClickFunction,
     onClickVariable,
+    onClickMissingVariable,
   ]);
 
   // Initialize the editor when ref mounts
@@ -247,6 +271,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
           templateFunctions,
           onClickVariable,
           onClickFunction,
+          onClickMissingVariable,
         });
 
         const state = EditorState.create({
@@ -358,7 +383,7 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
           justifyContent="end"
           className={classNames(
             'absolute bottom-2 left-0 right-0',
-            'pointer-events-none', // No pointer events so we don't block the editor
+            'pointer-events-none', // No pointer events, so we don't block the editor
           )}
         >
           {decoratedActions}

src-web/components/core/Editor/extensions.ts

@@ -31,10 +31,9 @@ import {
   rectangularSelection,
 } from '@codemirror/view';
 import { tags as t } from '@lezer/highlight';
-import type { EnvironmentVariable } from '@yaakapp/api';
+import type { EnvironmentVariable, TemplateFunction } from '@yaakapp/api';
 import { graphql, graphqlLanguageSupport } from 'cm6-graphql';
 import { EditorView } from 'codemirror';
-import type { TemplateFunction } from '../../../hooks/useTemplateFunctions';
 import type { EditorProps } from './index';
 import { pairs } from './pairs/extension';
 import { text } from './text/extension';
@@ -84,11 +83,13 @@ export function getLanguageExtension({
   templateFunctions,
   onClickVariable,
   onClickFunction,
+  onClickMissingVariable,
 }: {
   environmentVariables: EnvironmentVariable[];
   templateFunctions: TemplateFunction[];
   onClickFunction: (option: TemplateFunction, tagValue: string, startPos: number) => void;
   onClickVariable: (option: EnvironmentVariable, tagValue: string, startPos: number) => void;
+  onClickMissingVariable: (name: string, tagValue: string, startPos: number) => void;
 } & Pick<EditorProps, 'contentType' | 'useTemplating' | 'autocomplete'>) {
   const justContentType = contentType?.split(';')[0] ?? contentType ?? '';
   if (justContentType === 'application/graphql') {
@@ -106,6 +107,7 @@ export function getLanguageExtension({
     autocomplete,
     onClickFunction,
     onClickVariable,
+    onClickMissingVariable,
   });
 }
 

src-web/components/core/Editor/twig/completion.ts

@@ -3,13 +3,22 @@ import type { CompletionContext } from '@codemirror/autocomplete';
 const openTag = '${[ ';
 const closeTag = ' ]}';
 
-export interface TwigCompletionOption {
+export type TwigCompletionOptionVariable = {
+  type: 'variable';
+};
+
+export type TwigCompletionOptionFunction = {
+  args: { name: string }[];
+  type: 'function';
+};
+
+export type TwigCompletionOption = (TwigCompletionOptionFunction | TwigCompletionOptionVariable) & {
   name: string;
   label: string;
-  type: 'function' | 'variable' | 'unknown';
+  onClick: (rawTag: string, startPos: number) => void;
   value: string | null;
-  onClick?: (rawTag: string, startPos: number) => void;
-}
+  invalid?: boolean;
+};
 
 export interface TwigCompletionConfig {
   options: TwigCompletionOption[];
@@ -46,10 +55,9 @@ export function twigCompletion({ options }: TwigCompletionConfig) {
       options: options
         .filter((v) => v.name.trim())
         .map((v) => {
-          const innerLabel = v.type === 'function' ? `${v.name}()` : v.name;
-          const tagSyntax = openTag + innerLabel + closeTag;
+          const tagSyntax = openTag + v.label + closeTag;
           return {
-            label: innerLabel,
+            label: v.label,
             apply: tagSyntax,
             type: v.type === 'variable' ? 'variable' : 'function',
             matchLen: matchLen,

src-web/components/core/Editor/twig/extension.ts

@@ -1,8 +1,7 @@
 import type { LanguageSupport } from '@codemirror/language';
 import { LRLanguage } from '@codemirror/language';
 import { parseMixed } from '@lezer/common';
-import type { EnvironmentVariable } from '@yaakapp/api';
-import type { TemplateFunction } from '../../../../hooks/useTemplateFunctions';
+import type { EnvironmentVariable, TemplateFunction } from '@yaakapp/api';
 import type { GenericCompletionConfig } from '../genericCompletion';
 import { genericCompletion } from '../genericCompletion';
 import { textLanguageName } from '../text/extension';
@@ -18,6 +17,7 @@ export function twig({
   autocomplete,
   onClickFunction,
   onClickVariable,
+  onClickMissingVariable,
 }: {
   base: LanguageSupport;
   environmentVariables: EnvironmentVariable[];
@@ -25,6 +25,7 @@ export function twig({
   autocomplete?: GenericCompletionConfig;
   onClickFunction: (option: TemplateFunction, tagValue: string, startPos: number) => void;
   onClickVariable: (option: EnvironmentVariable, tagValue: string, startPos: number) => void;
+  onClickMissingVariable: (name: string, tagValue: string, startPos: number) => void;
 }) {
   const language = mixLanguage(base);
 
@@ -35,14 +36,23 @@ export function twig({
       label: v.name,
       onClick: (rawTag: string, startPos: number) => onClickVariable(v, rawTag, startPos),
     })) ?? [];
+
   const functionOptions: TwigCompletionOption[] =
-    templateFunctions.map((fn) => ({
-      name: fn.name,
-      type: 'function',
-      value: null,
-      label: fn.name + '(' + fn.args.length + ')',
-      onClick: (rawTag: string, startPos: number) => onClickFunction(fn, rawTag, startPos),
-    })) ?? [];
+    templateFunctions.map((fn) => {
+      const shortArgs =
+        fn.args
+          .slice(0, 2)
+          .map((a) => a.name)
+          .join(', ') + (fn.args.length > 2 ? ', …' : '');
+      return {
+        name: fn.name,
+        type: 'function',
+        args: fn.args.map((a) => ({ name: a.name })),
+        value: null,
+        label: `${fn.name}(${shortArgs})`,
+        onClick: (rawTag: string, startPos: number) => onClickFunction(fn, rawTag, startPos),
+      };
+    }) ?? [];
 
   const options = [...variableOptions, ...functionOptions];
 
@@ -51,7 +61,7 @@ export function twig({
   return [
     language,
     base.support,
-    templateTags(options),
+    templateTags(options, onClickMissingVariable),
     language.data.of({ autocomplete: completions }),
     base.language.data.of({ autocomplete: completions }),
     language.data.of({ autocomplete: genericCompletion(autocomplete) }),

src-web/components/core/Editor/twig/templateTags.ts

@@ -1,11 +1,8 @@
 import type { DecorationSet, ViewUpdate } from '@codemirror/view';
 import { Decoration, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
-import { truncate } from '../../../../lib/truncate';
 import { BetterMatchDecorator } from '../BetterMatchDecorator';
 import type { TwigCompletionOption } from './completion';
 
-const TAG_TRUNCATE_LEN = 30;
-
 class TemplateTagWidget extends WidgetType {
   readonly #clickListenerCallback: () => void;
 
@@ -32,17 +29,15 @@ class TemplateTagWidget extends WidgetType {
   toDOM() {
     const elt = document.createElement('span');
     elt.className = `x-theme-templateTag template-tag ${
-      this.option.type === 'unknown'
+      this.option.invalid
         ? 'x-theme-templateTag--danger'
         : this.option.type === 'variable'
         ? 'x-theme-templateTag--primary'
         : 'x-theme-templateTag--info'
     }`;
-    elt.title = this.option.type === 'unknown' ? '__NOT_FOUND__' : this.option.value ?? '';
-    elt.textContent = truncate(
-      this.rawTag.replace('${[', '').replace(']}', '').trim(),
-      TAG_TRUNCATE_LEN,
-    );
+    elt.title = this.option.invalid ? 'Not Found' : this.option.value ?? '';
+    elt.setAttribute('data-tag-type', this.option.type);
+    elt.textContent = this.option.label;
     elt.addEventListener('click', this.#clickListenerCallback);
     return elt;
   }
@@ -57,7 +52,10 @@ class TemplateTagWidget extends WidgetType {
   }
 }
 
-export function templateTags(options: TwigCompletionOption[]) {
+export function templateTags(
+  options: TwigCompletionOption[],
+  onClickMissingVariable: (name: string, rawTag: string, startPos: number) => void,
+) {
   const templateTagMatcher = new BetterMatchDecorator({
     regexp: /\$\{\[\s*(.+)(?!]})\s*]}/g,
     decoration(match, view, matchStartPos) {
@@ -82,7 +80,14 @@ export function templateTags(options: TwigCompletionOption[]) {
 
       let option = options.find((v) => v.name === name);
       if (option == null) {
-        option = { type: 'unknown', name: innerTagMatch, value: null, label: innerTagMatch };
+        option = {
+          invalid: true,
+          type: 'variable',
+          name: innerTagMatch,
+          value: null,
+          label: innerTagMatch,
+          onClick: () => onClickMissingVariable(name, match[0], matchStartPos),
+        };
       }
 
       return Decoration.replace({

src-web/components/core/Select.tsx

@@ -38,6 +38,8 @@ export function Select<T extends string>({
   const osInfo = useOsInfo();
   const [focused, setFocused] = useState<boolean>(false);
   const id = `input-${name}`;
+  const isInvalidSelection = options.find((o) => 'value' in o && o.value === value) == null;
+
   return (
     <div
       className={classNames(
@@ -67,6 +69,7 @@ export function Select<T extends string>({
             'pl-2',
             'border',
             focused ? 'border-border-focus' : 'border-border',
+            isInvalidSelection && 'border-danger',
             size === 'xs' && 'h-xs',
             size === 'sm' && 'h-sm',
             size === 'md' && 'h-md',
@@ -81,6 +84,7 @@ export function Select<T extends string>({
             onBlur={() => setFocused(false)}
             className={classNames('pr-7 w-full outline-none bg-transparent')}
           >
+            {isInvalidSelection && <option value={'__NONE__'}>-- Select an Option --</option>}
             {options.map((o) => {
               if (o.type === 'separator') return null;
               return (