feat(rules): templating actions

packages/desktop-client/src/components/modals/EditRuleModal.jsx

@@ -37,9 +37,10 @@ import {
 } from 'loot-core/src/shared/util';
 
 import { useDateFormat } from '../../hooks/useDateFormat';
+import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { useSelected, SelectedProvider } from '../../hooks/useSelected';
 import { SvgDelete, SvgAdd, SvgSubtract } from '../../icons/v0';
-import { SvgInformationOutline } from '../../icons/v1';
+import { SvgAlignLeft, SvgCode, SvgInformationOutline } from '../../icons/v1';
 import { styles, theme } from '../../style';
 import { Button } from '../common/Button2';
 import { Menu } from '../common/Menu';
@@ -368,6 +369,11 @@ function ActionEditor({ action, editorStyle, onChange, onDelete, onAdd }) {
     options,
   } = action;
 
+  const templated = options?.template !== undefined;
+
+  // Even if the feature flag is disabled, we still want to be able to turn off templating
+  const isTemplatingEnabled = useFeatureFlag('actionTemplating') || templated;
+
   return (
     <Editor style={editorStyle} error={error}>
       {op === 'set' ? (
@@ -388,13 +394,37 @@ function ActionEditor({ action, editorStyle, onChange, onDelete, onAdd }) {
             <GenericInput
               key={inputKey}
               field={field}
-              type={type}
+              type={templated ? 'string' : type}
               op={op}
-              value={value}
+              value={options?.template ?? value}
               onChange={v => onChange('value', v)}
               numberFormatType="currency"
             />
           </View>
+          {/*Due to that these fields have id's as value it is not helpful to have templating here*/}
+          {isTemplatingEnabled &&
+            ['payee', 'category', 'account'].indexOf(field) === -1 && (
+              <Button
+                variant="bare"
+                style={{
+                  padding: 5,
+                }}
+                aria-label={
+                  templated ? 'Disable templating' : 'Enable templating'
+                }
+                onPress={() => onChange('template', !templated)}
+              >
+                {templated ? (
+                  <SvgCode
+                    style={{ width: 12, height: 12, color: 'inherit' }}
+                  />
+                ) : (
+                  <SvgAlignLeft
+                    style={{ width: 12, height: 12, color: 'inherit' }}
+                  />
+                )}
+              </Button>
+            )}
         </>
       ) : op === 'set-split-amount' ? (
         <>
@@ -821,18 +851,31 @@ export function EditRuleModal({ defaultRule, onSave: originalOnSave }) {
         id,
         actions: updateValue(actions, action, () => {
           const a = { ...action };
+
           if (field === 'method') {
             a.options = { ...a.options, method: value };
+          } else if (field === 'template') {
+            if (value) {
+              a.options = { ...a.options, template: a.value };
+            } else {
+              a.options = { ...a.options, template: undefined };
+              if (a.type !== 'string') a.value = null;
+            }
           } else {
             a[field] = value;
+            if (a.options?.template !== undefined) {
+              a.options.template = value;
+            }
 
             if (field === 'field') {
               a.type = FIELD_TYPES.get(a.field);
               a.value = null;
+              a.options = { ...a.options, template: undefined };
               return newInput(a);
             } else if (field === 'op') {
               a.value = null;
               a.inputKey = '' + Math.random();
+              a.options = { ...a.options, template: undefined };
               return newInput(a);
             }
           }

packages/desktop-client/src/components/rules/ActionExpression.tsx

@@ -71,7 +71,14 @@ function SetActionExpression({
       <Text>{friendlyOp(op)}</Text>{' '}
       <Text style={valueStyle}>{mapField(field, options)}</Text>{' '}
       <Text>to </Text>
-      <Value style={valueStyle} value={value} field={field} />
+      {options?.template ? (
+        <>
+          <Text>template </Text>
+          <Text style={valueStyle}>{options.template}</Text>
+        </>
+      ) : (
+        <Value style={valueStyle} value={value} field={field} />
+      )}
     </>
   );
 }

packages/desktop-client/src/components/settings/Experimental.tsx

@@ -110,6 +110,9 @@ export function ExperimentalFeatures() {
             >
               <Trans>Customizable reports page (dashboards)</Trans>
             </FeatureToggle>
+            <FeatureToggle flag="actionTemplating">
+              <Trans>Action templating</Trans>
+            </FeatureToggle>
           </View>
         ) : (
           <Link

packages/desktop-client/src/hooks/useFeatureFlag.ts

@@ -7,6 +7,7 @@ const DEFAULT_FEATURE_FLAG_STATE: Record<FeatureFlag, boolean> = {
   goalTemplatesEnabled: false,
   spendingReport: false,
   dashboards: false,
+  actionTemplating: false,
 };
 
 export function useFeatureFlag(name: FeatureFlag): boolean {

packages/loot-core/package.json

@@ -28,6 +28,7 @@
     "csv-stringify": "^5.6.5",
     "date-fns": "^2.30.0",
     "deep-equal": "^2.2.3",
+    "handlebars": "^4.7.8",
     "lru-cache": "^5.1.1",
     "md5": "^2.3.0",
     "memoize-one": "^6.0.0",

packages/loot-core/src/server/accounts/__snapshots__/transaction-rules.test.ts.snap

@@ -6,6 +6,7 @@ Array [
     "actions": Array [
       Action {
         "field": "category",
+        "handlebarsTemplate": undefined,
         "op": "set",
         "options": undefined,
         "rawValue": "food",
@@ -32,6 +33,7 @@ Array [
     "actions": Array [
       Action {
         "field": "category",
+        "handlebarsTemplate": undefined,
         "op": "set",
         "options": undefined,
         "rawValue": "food",
@@ -58,6 +60,7 @@ Array [
     "actions": Array [
       Action {
         "field": "category",
+        "handlebarsTemplate": undefined,
         "op": "set",
         "options": undefined,
         "rawValue": "beer",
@@ -89,6 +92,7 @@ Array [
     "actions": Array [
       Action {
         "field": "category",
+        "handlebarsTemplate": undefined,
         "op": "set",
         "options": undefined,
         "rawValue": "beer",
@@ -115,6 +119,7 @@ Array [
     "actions": Array [
       Action {
         "field": "category",
+        "handlebarsTemplate": undefined,
         "op": "set",
         "options": undefined,
         "rawValue": "beer",
@@ -141,6 +146,7 @@ Array [
     "actions": Array [
       Action {
         "field": "category",
+        "handlebarsTemplate": undefined,
         "op": "set",
         "options": undefined,
         "rawValue": "beer",

packages/loot-core/src/server/accounts/rules.ts

@@ -1,5 +1,6 @@
 // @ts-strict-ignore
 import * as dateFns from 'date-fns';
+import * as Handlebars from 'handlebars';
 
 import {
   monthFromDate,
@@ -9,6 +10,8 @@ import {
   addDays,
   subDays,
   parseDate,
+  format,
+  currentDay,
 } from '../../shared/months';
 import {
   sortNumbers,
@@ -28,6 +31,57 @@ import { RuleConditionEntity } from '../../types/models';
 import { RuleError } from '../errors';
 import { Schedule as RSchedule } from '../util/rschedule';
 
+void (function registerHandlebarsHelpers() {
+  const regexTest = /^\/(.*)\/([gimuy]*)$/;
+
+  function mathHelper(fn: (a: number, b: number) => number) {
+    return (a: unknown, ...b: unknown[]) => {
+      // Last argument is the Handlebars options object
+      b.splice(-1, 1);
+      return b.map(Number).reduce(fn, Number(a));
+    };
+  }
+
+  const helpers = {
+    regex: (value: unknown, regex: unknown, replace: unknown) => {
+      if (typeof regex !== 'string' || typeof replace !== 'string') {
+        return '';
+      }
+
+      let regexp: RegExp;
+      const match = regexTest.exec(regex);
+      // Regex is in format /regex/flags
+      if (match) {
+        regexp = new RegExp(match[1], match[2]);
+      } else {
+        regexp = new RegExp(regex);
+      }
+
+      return String(value).replace(regexp, replace);
+    },
+    add: mathHelper((a, b) => a + b),
+    sub: mathHelper((a, b) => a - b),
+    div: mathHelper((a, b) => a / b),
+    mul: mathHelper((a, b) => a * b),
+    mod: mathHelper((a, b) => a % b),
+    floor: (a: unknown) => Math.floor(Number(a)),
+    ceil: (a: unknown) => Math.ceil(Number(a)),
+    round: (a: unknown) => Math.round(Number(a)),
+    abs: (a: unknown) => Math.abs(Number(a)),
+    min: mathHelper(Math.min),
+    max: mathHelper(Math.max),
+    fixed: (a: unknown, digits: unknown) => Number(a).toFixed(Number(digits)),
+    day: (date: string) => format(date, 'd'),
+    month: (date: string) => format(date, 'M'),
+    year: (date: string) => format(date, 'yyyy'),
+    format: (date: string, f: string) => format(date, f),
+  };
+
+  for (const [name, fn] of Object.entries(helpers)) {
+    Handlebars.registerHelper(name, fn);
+  }
+})();
+
 function assert(test, type, msg) {
   if (!test) {
     throw new RuleError(type, msg);
@@ -491,6 +545,8 @@ export class Action {
   type;
   value;
 
+  private handlebarsTemplate?: Handlebars.TemplateDelegate;
+
   constructor(op: ActionOperator, field, value, options) {
     assert(
       ACTION_OPS.includes(op),
@@ -503,6 +559,14 @@ export class Action {
       assert(typeName, 'internal', `Invalid field for action: ${field}`);
       this.field = field;
       this.type = typeName;
+      if (options?.template) {
+        this.handlebarsTemplate = Handlebars.compile(options.template);
+        try {
+          this.handlebarsTemplate({});
+        } catch (e) {
+          assert(false, 'invalid-template', `Invalid Handlebars template`);
+        }
+      }
     } else if (op === 'set-split-amount') {
       this.field = null;
       this.type = 'number';
@@ -527,7 +591,27 @@ export class Action {
   exec(object) {
     switch (this.op) {
       case 'set':
-        object[this.field] = this.value;
+        if (this.handlebarsTemplate) {
+          object[this.field] = this.handlebarsTemplate({
+            ...object,
+            today: currentDay(),
+          });
+
+          // Handlebars always returns a string, so we need to convert
+          switch (this.type) {
+            case 'number':
+              object[this.field] = parseFloat(object[this.field]);
+              break;
+            case 'date':
+              object[this.field] = parseDate(object[this.field]);
+              break;
+            case 'boolean':
+              object[this.field] = object[this.field] === 'true';
+              break;
+          }
+        } else {
+          object[this.field] = this.value;
+        }
         break;
       case 'set-split-amount':
         switch (this.options.method) {

packages/loot-core/src/shared/rules.ts

@@ -219,6 +219,8 @@ export function getFieldError(type) {
       return 'Value must be a number';
     case 'invalid-field':
       return 'Please choose a valid field for this type of rule';
+    case 'invalid-template':
+      return 'Invalid handlebars template';
     default:
       return 'Internal error, sorry! Please get in touch https://actualbudget.org/contact/ for support';
   }

packages/loot-core/src/types/models/rule.d.ts

@@ -138,6 +138,7 @@ export interface SetRuleActionEntity {
   op: 'set';
   value: unknown;
   options?: {
+    template?: string;
     splitIndex?: number;
   };
   type?: string;

packages/loot-core/src/types/prefs.d.ts

@@ -2,7 +2,8 @@ export type FeatureFlag =
   | 'dashboards'
   | 'reportBudget'
   | 'goalTemplatesEnabled'
-  | 'spendingReport';
+  | 'spendingReport'
+  | 'actionTemplating';
 
 /**
  * Cross-device preferences. These sync across devices when they are changed.

upcoming-release-notes/3305.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [UnderKoen]
+---
+
+Add rule action templating for set actions using handlebars syntax.