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

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

packages/plugin-runtime-types/src/bindings/gen_events.ts

@@ -30,7 +30,7 @@ export type CallHttpRequestActionArgs = { httpRequest: HttpRequest, };
 
 export type CallHttpRequestActionRequest = { index: number, pluginRefId: string, args: CallHttpRequestActionArgs, };
 
-export type CallTemplateFunctionArgs = { purpose: RenderPurpose, values: { [key in string]?: JsonValue }, };
+export type CallTemplateFunctionArgs = { purpose: RenderPurpose, values: { [key in string]?: JsonPrimitive }, };
 
 export type CallTemplateFunctionRequest = { name: string, args: CallTemplateFunctionArgs, };
 
@@ -74,7 +74,7 @@ export type FindHttpResponsesRequest = { requestId: string, limit?: number, };
 
 export type FindHttpResponsesResponse = { httpResponses: Array<HttpResponse>, };
 
-export type FormInput = { "type": "text" } & FormInputText | { "type": "editor" } & FormInputEditor | { "type": "select" } & FormInputSelect | { "type": "checkbox" } & FormInputCheckbox | { "type": "file" } & FormInputFile | { "type": "http_request" } & FormInputHttpRequest | { "type": "accordion" } & FormInputAccordion | { "type": "banner" } & FormInputBanner | { "type": "markdown" } & FormInputMarkdown;
+export type FormInput = { "type": "text" } & FormInputText | { "type": "editor" } & FormInputEditor | { "type": "select" } & FormInputSelect | { "type": "checkbox" } & FormInputCheckbox | { "type": "file" } & FormInputFile | { "type": "http_request" } & FormInputHttpRequest | { "type": "accordion" } & FormInputAccordion | { "type": "h_stack" } & FormInputHStack | { "type": "banner" } & FormInputBanner | { "type": "markdown" } & FormInputMarkdown;
 
 export type FormInputAccordion = { label: string, inputs?: Array<FormInput>, hidden?: boolean, };
 
@@ -224,6 +224,8 @@ defaultValue?: string, disabled?: boolean,
  */
 description?: string, };
 
+export type FormInputHStack = { inputs?: Array<FormInput>, };
+
 export type FormInputHttpRequest = { 
 /**
  * The name of the input. The value will be stored at this object attribute in the resulting data

packages/plugin-runtime-types/src/plugins/AuthenticationPlugin.ts

@@ -3,22 +3,37 @@ import {
   CallHttpAuthenticationRequest,
   CallHttpAuthenticationResponse,
   FormInput,
-  GetHttpAuthenticationConfigRequest,
   GetHttpAuthenticationSummaryResponse,
   HttpAuthenticationAction,
 } from '../bindings/gen_events';
 import { MaybePromise } from '../helpers';
 import { Context } from './Context';
 
-type DynamicFormInput = FormInput & {
-  dynamic(
+type AddDynamicMethod<T> = {
+  dynamic?: (
     ctx: Context,
-    args: GetHttpAuthenticationConfigRequest,
-  ): MaybePromise<Partial<FormInput> | undefined | null>;
+    args: CallHttpAuthenticationActionArgs,
+  ) => MaybePromise<Partial<T> | null | undefined>;
 };
 
+type AddDynamic<T> = T extends any
+  ? T extends { inputs?: FormInput[] }
+    ? Omit<T, 'inputs'> & {
+        inputs: Array<AddDynamic<FormInput>>;
+        dynamic?: (
+          ctx: Context,
+          args: CallHttpAuthenticationActionArgs,
+        ) => MaybePromise<
+          Partial<Omit<T, 'inputs'> & { inputs: Array<AddDynamic<FormInput>> }> | null | undefined
+        >;
+      }
+    : T & AddDynamicMethod<T>
+  : never;
+
+export type DynamicAuthenticationArg = AddDynamic<FormInput>;
+
 export type AuthenticationPlugin = GetHttpAuthenticationSummaryResponse & {
-  args: (FormInput | DynamicFormInput)[];
+  args: DynamicAuthenticationArg[];
   onApply(
     ctx: Context,
     args: CallHttpAuthenticationRequest,

packages/plugin-runtime-types/src/plugins/TemplateFunctionPlugin.ts

@@ -1,21 +1,31 @@
-import {
-  CallTemplateFunctionArgs,
-  FormInput,
-  GetHttpAuthenticationConfigRequest,
-  TemplateFunction,
-  TemplateFunctionArg,
-} from '../bindings/gen_events';
+import { CallTemplateFunctionArgs, FormInput, TemplateFunction } from '../bindings/gen_events';
 import { MaybePromise } from '../helpers';
 import { Context } from './Context';
 
-export type DynamicTemplateFunctionArg = FormInput & {
-  dynamic(
+type AddDynamicMethod<T> = {
+  dynamic?: (
     ctx: Context,
-    args: GetHttpAuthenticationConfigRequest,
-  ): MaybePromise<Partial<FormInput> | undefined | null>;
+    args: CallTemplateFunctionArgs,
+  ) => MaybePromise<Partial<T> | null | undefined>;
 };
 
-export type TemplateFunctionPlugin = TemplateFunction & {
-  args: (TemplateFunctionArg | DynamicTemplateFunctionArg)[];
+type AddDynamic<T> = T extends any
+  ? T extends { inputs?: FormInput[] }
+    ? Omit<T, 'inputs'> & {
+        inputs: Array<AddDynamic<FormInput>>;
+        dynamic?: (
+          ctx: Context,
+          args: CallTemplateFunctionArgs,
+        ) => MaybePromise<
+          Partial<Omit<T, 'inputs'> & { inputs: Array<AddDynamic<FormInput>> }> | null | undefined
+        >;
+      }
+    : T & AddDynamicMethod<T>
+  : never;
+
+export type DynamicTemplateFunctionArg = AddDynamic<FormInput>;
+
+export type TemplateFunctionPlugin = Omit<TemplateFunction, 'args'> & {
+  args: DynamicTemplateFunctionArg[];
   onRender(ctx: Context, args: CallTemplateFunctionArgs): Promise<string | null>;
 };

packages/plugin-runtime-types/src/plugins/index.ts

@@ -1,4 +1,6 @@
 import { AuthenticationPlugin } from './AuthenticationPlugin';
+
+import type { Context } from './Context';
 import type { FilterPlugin } from './FilterPlugin';
 import { GrpcRequestActionPlugin } from './GrpcRequestActionPlugin';
 import type { HttpRequestActionPlugin } from './HttpRequestActionPlugin';
@@ -6,9 +8,10 @@ import type { ImporterPlugin } from './ImporterPlugin';
 import type { TemplateFunctionPlugin } from './TemplateFunctionPlugin';
 import type { ThemePlugin } from './ThemePlugin';
 
-import type { Context } from './Context';
-
 export type { Context };
+export type { DynamicTemplateFunctionArg } from './TemplateFunctionPlugin';
+export type { DynamicAuthenticationArg } from './AuthenticationPlugin';
+export type { TemplateFunctionPlugin };
 
 /**
  * The global structure of a Yaak plugin

packages/plugin-runtime/src/PluginInstance.ts

@@ -2,7 +2,6 @@ import {
   BootRequest,
   DeleteKeyValueResponse,
   FindHttpResponsesResponse,
-  FormInput,
   GetCookieValueRequest,
   GetCookieValueResponse,
   GetHttpRequestByIdResponse,
@@ -19,14 +18,13 @@ import {
   RenderHttpRequestResponse,
   SendHttpRequestResponse,
   TemplateFunction,
-  TemplateFunctionArg,
   TemplateRenderResponse,
 } from '@yaakapp-internal/plugins';
 import { Context, PluginDefinition } from '@yaakapp/api';
-import { JsonValue } from '@yaakapp/api/lib/bindings/serde_json/JsonValue';
 import console from 'node:console';
 import { type Stats, statSync, watch } from 'node:fs';
 import path from 'node:path';
+import { applyDynamicFormInput, applyFormInputDefaults } from './common';
 import { EventChannel } from './EventChannel';
 import { migrateTemplateFunctionSelectOptions } from './migrations';
 
@@ -213,24 +211,19 @@ export class PluginInstance {
           return;
         }
 
-        templateFunction = migrateTemplateFunctionSelectOptions(templateFunction);
-        // @ts-ignore
-        delete templateFunction.onRender;
-        const resolvedArgs: TemplateFunctionArg[] = [];
-        for (const arg of templateFunction.args) {
-          if (arg && 'dynamic' in arg) {
-            const dynamicAttrs = await arg.dynamic(ctx, payload);
-            const { dynamic, ...other } = arg;
-            resolvedArgs.push({ ...other, ...dynamicAttrs } as TemplateFunctionArg);
-          } else if (arg) {
-            resolvedArgs.push(arg);
-          }
-          templateFunction.args = resolvedArgs;
-        }
+        const fn = {
+          ...migrateTemplateFunctionSelectOptions(templateFunction),
+          onRender: undefined,
+        };
+
+        payload.values = applyFormInputDefaults(fn.args, payload.values);
+        const p = { ...payload, purpose: 'preview' } as const;
+        const resolvedArgs = await applyDynamicFormInput(ctx, fn.args, p);
+
         const replyPayload: InternalEventPayload = {
           type: 'get_template_function_config_response',
           pluginRefId: this.#workerData.pluginRefId,
-          function: templateFunction,
+          function: { ...fn, args: resolvedArgs },
         };
         this.#sendPayload(context, replyPayload, replyId);
         return;
@@ -248,16 +241,8 @@ export class PluginInstance {
 
       if (payload.type === 'get_http_authentication_config_request' && this.#mod?.authentication) {
         const { args, actions } = this.#mod.authentication;
-        const resolvedArgs: FormInput[] = [];
-        for (const v of args) {
-          if (v && 'dynamic' in v) {
-            const dynamicAttrs = await v.dynamic(ctx, payload);
-            const { dynamic, ...other } = v;
-            resolvedArgs.push({ ...other, ...dynamicAttrs } as FormInput);
-          } else if (v) {
-            resolvedArgs.push(v);
-          }
-        }
+        payload.values = applyFormInputDefaults(args, payload.values);
+        const resolvedArgs = await applyDynamicFormInput(ctx, args, payload);
         const resolvedActions: HttpAuthenticationAction[] = [];
         for (const { onSelect, ...action } of actions ?? []) {
           resolvedActions.push(action);
@@ -277,7 +262,8 @@ export class PluginInstance {
       if (payload.type === 'call_http_authentication_request' && this.#mod?.authentication) {
         const auth = this.#mod.authentication;
         if (typeof auth?.onApply === 'function') {
-          applyFormInputDefaults(auth.args, payload.values);
+          auth.args = await applyDynamicFormInput(ctx, auth.args, payload);
+          payload.values = applyFormInputDefaults(auth.args, payload.values);
           this.#sendPayload(
             context,
             {
@@ -332,7 +318,8 @@ export class PluginInstance {
       ) {
         const fn = this.#mod.templateFunctions.find((a) => a.name === payload.name);
         if (typeof fn?.onRender === 'function') {
-          applyFormInputDefaults(fn.args, payload.args.values);
+          const resolvedArgs = await applyDynamicFormInput(ctx, fn.args, payload.args);
+          payload.args.values = applyFormInputDefaults(resolvedArgs, payload.args.values);
           try {
             const result = await fn.onRender(ctx, payload.args);
             this.#sendPayload(
@@ -652,20 +639,6 @@ function genId(len = 5): string {
   return id;
 }
 
-/** Recursively apply form input defaults to a set of values */
-function applyFormInputDefaults(
-  inputs: TemplateFunctionArg[],
-  values: { [p: string]: JsonValue | undefined },
-) {
-  for (const input of inputs) {
-    if ('inputs' in input) {
-      applyFormInputDefaults(input.inputs ?? [], values);
-    } else if ('defaultValue' in input && values[input.name] === undefined) {
-      values[input.name] = input.defaultValue;
-    }
-  }
-}
-
 const watchedFiles: Record<string, Stats | null> = {};
 
 /**

packages/plugin-runtime/src/common.ts

@@ -0,0 +1,56 @@
+import {
+  CallHttpAuthenticationActionArgs,
+  CallTemplateFunctionArgs,
+  JsonPrimitive,
+  TemplateFunctionArg,
+} from '@yaakapp-internal/plugins';
+import { Context, DynamicAuthenticationArg, DynamicTemplateFunctionArg } from '@yaakapp/api';
+
+/** Recursively apply form input defaults to a set of values */
+export function applyFormInputDefaults(
+  inputs: TemplateFunctionArg[],
+  values: { [p: string]: JsonPrimitive | undefined },
+) {
+  let newValues: { [p: string]: JsonPrimitive | undefined } = { ...values };
+  for (const input of inputs) {
+    if ('defaultValue' in input && values[input.name] === undefined) {
+      newValues[input.name] = input.defaultValue;
+    }
+    // Recurse down to all child inputs
+    if ('inputs' in input) {
+      newValues = applyFormInputDefaults(input.inputs ?? [], newValues);
+    }
+  }
+  return newValues;
+}
+
+export async function applyDynamicFormInput(
+  ctx: Context,
+  args: DynamicTemplateFunctionArg[],
+  callArgs: CallTemplateFunctionArgs,
+): Promise<DynamicTemplateFunctionArg[]>;
+
+export async function applyDynamicFormInput(
+  ctx: Context,
+  args: DynamicAuthenticationArg[],
+  callArgs: CallHttpAuthenticationActionArgs,
+): Promise<DynamicAuthenticationArg[]>;
+
+export async function applyDynamicFormInput(
+  ctx: Context,
+  args: (DynamicTemplateFunctionArg | DynamicAuthenticationArg)[],
+  callArgs: CallTemplateFunctionArgs | CallHttpAuthenticationActionArgs,
+): Promise<(DynamicTemplateFunctionArg | DynamicAuthenticationArg)[]> {
+  const resolvedArgs: any[] = [];
+  for (const { dynamic, ...arg } of args) {
+    const newArg: any = {
+      ...arg,
+      ...(typeof dynamic === 'function' ? await dynamic(ctx, callArgs as any) : undefined),
+    };
+    if ('inputs' in newArg && Array.isArray(newArg.inputs)) {
+      newArg.inputs = await applyDynamicFormInput(ctx, newArg.inputs, callArgs as any);
+    }
+    resolvedArgs.push(newArg);
+  }
+  return resolvedArgs;
+}

packages/plugin-runtime/src/migrations.ts

@@ -1,4 +1,4 @@
-import { TemplateFunctionPlugin } from '@yaakapp/api/lib/plugins/TemplateFunctionPlugin';
+import type { TemplateFunctionPlugin } from '@yaakapp/api';
 
 export function migrateTemplateFunctionSelectOptions(
   f: TemplateFunctionPlugin,
@@ -13,8 +13,5 @@ export function migrateTemplateFunctionSelectOptions(
     return a;
   });
 
-  return {
-    ...f,
-    args: migratedArgs,
-  };
+  return { ...f, args: migratedArgs };
 }

packages/plugin-runtime/tests/common.test.ts

@@ -0,0 +1,150 @@
+import { CallTemplateFunctionArgs } from '@yaakapp-internal/plugins';
+import { Context, DynamicTemplateFunctionArg } from '@yaakapp/api';
+import { describe, expect, test } from 'vitest';
+import { applyDynamicFormInput, applyFormInputDefaults } from '../src/common';
+
+describe('applyFormInputDefaults', () => {
+  test('Works with top-level select', () => {
+    const args: DynamicTemplateFunctionArg[] = [
+      {
+        type: 'select',
+        name: 'test',
+        options: [{ label: 'Option 1', value: 'one' }],
+        defaultValue: 'one',
+      },
+    ];
+    expect(applyFormInputDefaults(args, {})).toEqual({
+      test: 'one',
+    });
+  });
+
+  test('Works with existing value', () => {
+    const args: DynamicTemplateFunctionArg[] = [
+      {
+        type: 'select',
+        name: 'test',
+        options: [{ label: 'Option 1', value: 'one' }],
+        defaultValue: 'one',
+      },
+    ];
+    expect(applyFormInputDefaults(args, { test: 'explicit' })).toEqual({
+      test: 'explicit',
+    });
+  });
+
+  test('Works with recursive select', () => {
+    const args: DynamicTemplateFunctionArg[] = [
+      { type: 'text', name: 'dummy', defaultValue: 'top' },
+      {
+        type: 'accordion',
+        label: 'Test',
+        inputs: [
+          { type: 'text', name: 'name', defaultValue: 'hello' },
+          {
+            type: 'select',
+            name: 'test',
+            options: [{ label: 'Option 1', value: 'one' }],
+            defaultValue: 'one',
+          },
+        ],
+      },
+    ];
+    expect(applyFormInputDefaults(args, {})).toEqual({
+      dummy: 'top',
+      test: 'one',
+      name: 'hello',
+    });
+  });
+
+  test('Works with dynamic options', () => {
+    const args: DynamicTemplateFunctionArg[] = [
+      {
+        type: 'select',
+        name: 'test',
+        defaultValue: 'one',
+        options: [],
+        dynamic() {
+          return { options: [{ label: 'Option 1', value: 'one' }] };
+        },
+      },
+    ];
+    expect(applyFormInputDefaults(args, {})).toEqual({
+      test: 'one',
+    });
+    expect(applyFormInputDefaults(args, {})).toEqual({
+      test: 'one',
+    });
+  });
+});
+
+describe('applyDynamicFormInput', () => {
+  test('Works with plain input', async () => {
+    const ctx = {} as Context;
+    const args: DynamicTemplateFunctionArg[] = [
+      { type: 'text', name: 'name' },
+      { type: 'checkbox', name: 'checked' },
+    ];
+    const callArgs: CallTemplateFunctionArgs = {
+      values: {},
+      purpose: 'preview',
+    };
+    expect(await applyDynamicFormInput(ctx, args, callArgs)).toEqual([
+      { type: 'text', name: 'name' },
+      { type: 'checkbox', name: 'checked' },
+    ]);
+  });
+
+  test('Works with dynamic input', async () => {
+    const ctx = {} as Context;
+    const args: DynamicTemplateFunctionArg[] = [
+      {
+        type: 'text',
+        name: 'name',
+        async dynamic(_ctx, _args) {
+          return { hidden: true };
+        },
+      },
+    ];
+    const callArgs: CallTemplateFunctionArgs = {
+      values: {},
+      purpose: 'preview',
+    };
+    expect(await applyDynamicFormInput(ctx, args, callArgs)).toEqual([
+      { type: 'text', name: 'name', hidden: true },
+    ]);
+  });
+
+  test('Works with recursive dynamic input', async () => {
+    const ctx = {} as Context;
+    const callArgs: CallTemplateFunctionArgs = {
+      values: { hello: 'world' },
+      purpose: 'preview',
+    };
+    const args: DynamicTemplateFunctionArg[] = [
+      {
+        type: 'banner',
+        inputs: [
+          {
+            type: 'text',
+            name: 'name',
+            async dynamic(_ctx, args) {
+              return { hidden: args.values.hello === 'world' };
+            },
+          },
+        ],
+      },
+    ];
+    expect(await applyDynamicFormInput(ctx, args, callArgs)).toEqual([
+      {
+        type: 'banner',
+        inputs: [
+          {
+            type: 'text',
+            name: 'name',
+            hidden: true,
+          },
+        ],
+      },
+    ]);
+  });
+});