Add an option to allow jsonpath/xpath to return as array (#297)

Co-authored-by: Gregory Schier <gschier1990@gmail.com>

src-web/components/TemplateFunctionDialog.tsx

@@ -5,7 +5,7 @@ import type {
   WebsocketRequest,
   Workspace,
 } from '@yaakapp-internal/models';
-import type { TemplateFunction } from '@yaakapp-internal/plugins';
+import type { FormInput, TemplateFunction } from '@yaakapp-internal/plugins';
 import type { FnArg, Tokens } from '@yaakapp-internal/templates';
 import classNames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
@@ -45,24 +45,7 @@ export function TemplateFunctionDialog({ initialTokens, templateFunction, ...pro
     }
 
     (async function () {
-      const initial: Record<string, string> = {};
-      const initialArgs =
-        initialTokens.tokens[0]?.type === 'tag' && initialTokens.tokens[0]?.val.type === 'fn'
-          ? initialTokens.tokens[0]?.val.args
-          : [];
-      for (const arg of templateFunction.args) {
-        if (!('name' in arg)) {
-          // Skip visual-only args
-          continue;
-        }
-        const initialArg = initialArgs.find((a) => a.name === arg.name);
-        const initialArgValue =
-          initialArg?.value.type === 'str'
-            ? initialArg?.value.text
-            : // TODO: Implement variable-based args
-              undefined;
-        initial[arg.name] = initialArgValue ?? arg.defaultValue ?? DYNAMIC_FORM_NULL_ARG;
-      }
+      const initial = collectArgumentValues(initialTokens, templateFunction);
 
       // HACK: Replace the secure() function's encrypted `value` arg with the decrypted version so
       //  we can display it in the editor input.
@@ -71,12 +54,14 @@ export function TemplateFunctionDialog({ initialTokens, templateFunction, ...pro
         initial.value = await convertTemplateToInsecure(template);
       }
 
+      console.log('INITIAL', initial);
       setInitialArgValues(initial);
     })().catch(console.error);
   }, [
     initialArgValues,
     initialTokens,
     initialTokens.tokens,
+    templateFunction,
     templateFunction.args,
     templateFunction.name,
   ]);
@@ -159,84 +144,117 @@ function InitializedTemplateFunctionDialog({
   if (templateFunction == null) return null;
 
   return (
-    <VStack
-      as="form"
-      className="pb-3"
-      space={4}
+    <form
+      className="grid grid-rows-[minmax(0,1fr)_auto_auto] h-full max-h-[90vh]"
       onSubmit={(e) => {
         e.preventDefault();
         handleDone();
       }}
     >
-      {name === 'secure' ? (
-        <PlainInput
-          required
-          label="Value"
-          name="value"
-          type="password"
-          placeholder="••••••••••••"
-          defaultValue={String(argValues['value'] ?? '')}
-          onChange={(value) => setArgValues({ ...argValues, value })}
-        />
-      ) : (
-        <DynamicForm
-          autocompleteVariables
-          autocompleteFunctions
-          inputs={templateFunction.args}
-          data={argValues}
-          onChange={setArgValues}
-          stateKey={`template_function.${templateFunction.name}`}
-        />
-      )}
-      {enablePreview && (
-        <VStack className="w-full" space={1}>
-          <HStack space={0.5}>
-            <HStack className="text-sm text-text-subtle" space={1.5}>
-              Rendered Preview
-              {rendered.isPending && <LoadingIcon size="xs" />}
-            </HStack>
-            <IconButton
-              size="xs"
-              iconSize="sm"
-              icon={showSecretsInPreview ? 'lock' : 'lock_open'}
-              title={showSecretsInPreview ? 'Show preview' : 'Hide preview'}
-              onClick={toggleShowSecretsInPreview}
-              className={classNames(
-                'ml-auto text-text-subtlest',
-                !dataContainsSecrets && 'invisible',
-              )}
-            />
-          </HStack>
-          <InlineCode
-            className={classNames(
-              'whitespace-pre-wrap !select-text cursor-text max-h-[10rem] overflow-y-auto hide-scrollbars',
-              tooLarge && 'italic text-danger',
-            )}
-          >
-            {rendered.error || tagText.error ? (
-              <em className="text-danger">
-                {`${rendered.error || tagText.error}`.replace(/^Render Error: /, '')}
-              </em>
-            ) : dataContainsSecrets && !showSecretsInPreview ? (
-              <span className="italic text-text-subtle">------ sensitive values hidden ------</span>
-            ) : tooLarge ? (
-              'too large to preview'
-            ) : (
-              rendered.data || <>&nbsp;</>
-            )}
-          </InlineCode>
-        </VStack>
-      )}
-      <div className="flex justify-stretch w-full flex-grow gap-2 [&>*]:flex-1">
-        {templateFunction.name === 'secure' && (
-          <Button variant="border" color="secondary" onClick={setupOrConfigureEncryption}>
-            Reveal Encryption Key
-          </Button>
+      <div className="overflow-y-auto h-full px-6">
+        {name === 'secure' ? (
+          <PlainInput
+            required
+            label="Value"
+            name="value"
+            type="password"
+            placeholder="••••••••••••"
+            defaultValue={String(argValues['value'] ?? '')}
+            onChange={(value) => setArgValues({ ...argValues, value })}
+          />
+        ) : (
+          <DynamicForm
+            autocompleteVariables
+            autocompleteFunctions
+            inputs={templateFunction.args}
+            data={argValues}
+            onChange={setArgValues}
+            stateKey={`template_function.${templateFunction.name}`}
+          />
         )}
-        <Button type="submit" color="primary">
-          Save
-        </Button>
       </div>
-    </VStack>
+      <div className="px-6 border-t border-t-border py-3 bg-surface-highlight w-full flex flex-col gap-4">
+        {enablePreview ? (
+          <VStack className="w-full">
+            <HStack space={0.5}>
+              <HStack className="text-sm text-text-subtle" space={1.5}>
+                Rendered Preview
+                {rendered.isPending && <LoadingIcon size="xs" />}
+              </HStack>
+              <IconButton
+                size="xs"
+                iconSize="sm"
+                icon={showSecretsInPreview ? 'lock' : 'lock_open'}
+                title={showSecretsInPreview ? 'Show preview' : 'Hide preview'}
+                onClick={toggleShowSecretsInPreview}
+                className={classNames(
+                  'ml-auto text-text-subtlest',
+                  !dataContainsSecrets && 'invisible',
+                )}
+              />
+            </HStack>
+            <InlineCode
+              className={classNames(
+                'whitespace-pre-wrap !select-text cursor-text max-h-[10rem] overflow-y-auto hide-scrollbars !border-text-subtlest',
+                tooLarge && 'italic text-danger',
+              )}
+            >
+              {rendered.error || tagText.error ? (
+                <em className="text-danger">
+                  {`${rendered.error || tagText.error}`.replace(/^Render Error: /, '')}
+                </em>
+              ) : dataContainsSecrets && !showSecretsInPreview ? (
+                <span className="italic text-text-subtle">
+                  ------ sensitive values hidden ------
+                </span>
+              ) : tooLarge ? (
+                'too large to preview'
+              ) : (
+                rendered.data || <>&nbsp;</>
+              )}
+            </InlineCode>
+          </VStack>
+        ) : (
+          <span />
+        )}
+        <div className="flex justify-stretch w-full flex-grow gap-2 [&>*]:flex-1">
+          {templateFunction.name === 'secure' && (
+            <Button variant="border" color="secondary" onClick={setupOrConfigureEncryption}>
+              Reveal Encryption Key
+            </Button>
+          )}
+          <Button type="submit" color="primary">
+            Save
+          </Button>
+        </div>
+      </div>
+    </form>
   );
 }
+
+/**
+ * Process the initial tokens from the template and merge those with the default values pulled from
+ * the template function definition.
+ */
+function collectArgumentValues(initialTokens: Tokens, templateFunction: TemplateFunction) {
+  const initial: Record<string, string | boolean> = {};
+  const initialArgs =
+    initialTokens.tokens[0]?.type === 'tag' && initialTokens.tokens[0]?.val.type === 'fn'
+      ? initialTokens.tokens[0]?.val.args
+      : [];
+
+  const processArg = (arg: FormInput) => {
+    if ('inputs' in arg && arg.inputs) {
+      arg.inputs.forEach(processArg);
+    }
+    if (!('name' in arg)) return;
+
+    const initialArg = initialArgs.find((a) => a.name === arg.name);
+    const initialArgValue = initialArg?.value.type === 'str' ? initialArg?.value.text : undefined;
+    initial[arg.name] = initialArgValue ?? arg.defaultValue ?? DYNAMIC_FORM_NULL_ARG;
+  };
+
+  templateFunction.args.forEach(processArg);
+
+  return initial;
+}