fix(dashboard,api-service): rename maily for loop to repeat (#7663)

Author: LetItRock

apps/api/package.json

@@ -37,7 +37,7 @@
     "@aws-sdk/client-secrets-manager": "^3.716.0",
     "@godaddy/terminus": "^4.12.1",
     "@google-cloud/storage": "^6.2.3",
-    "@maily-to/render": "^0.0.17",
+    "@maily-to/render": "^0.0.19",
     "@nestjs/axios": "3.0.3",
     "@nestjs/common": "10.4.1",
     "@nestjs/core": "10.4.1",

apps/api/src/app/environments-v1/usecases/output-renderers/email-output-renderer.spec.ts

@@ -559,13 +559,13 @@ describe('EmailOutputRendererUsecase', () => {
     });
   });
 
-  describe('for block transformation and expansion', () => {
-    it('should handle for loop block transformation with array of objects', async () => {
+  describe('repeat block transformation and expansion', () => {
+    it('should handle repeat loop block transformation with array of objects', async () => {
       const mockTipTapNode: MailyJSONContent = {
         type: 'doc',
         content: [
           {
-            type: 'for',
+            type: 'repeat',
             attrs: {
               each: 'payload.comments',
               isUpdatingKey: false,
@@ -610,7 +610,7 @@ describe('EmailOutputRendererUsecase', () => {
 
       const renderCommand = {
         controlValues: {
-          subject: 'For Loop Test',
+          subject: 'Repeat Loop Test',
           body: JSON.stringify(mockTipTapNode),
         },
         fullPayloadForRender: {
@@ -626,12 +626,12 @@ describe('EmailOutputRendererUsecase', () => {
       expect(result.body).to.include('This is an author: <!-- -->Jane<!-- -->Post Title');
     });
 
-    it('should handle for loop block transformation with array of primitives', async () => {
+    it('should handle repeat loop block transformation with array of primitives', async () => {
       const mockTipTapNode: MailyJSONContent = {
         type: 'doc',
         content: [
           {
-            type: 'for',
+            type: 'repeat',
             attrs: {
               each: 'payload.names',
               isUpdatingKey: false,
@@ -662,7 +662,7 @@ describe('EmailOutputRendererUsecase', () => {
 
       const renderCommand = {
         controlValues: {
-          subject: 'For Loop Test',
+          subject: 'Repeat Loop Test',
           body: JSON.stringify(mockTipTapNode),
         },
         fullPayloadForRender: {

apps/api/src/app/environments-v1/usecases/output-renderers/email-output-renderer.usecase.ts

@@ -1,13 +1,14 @@
 /* eslint-disable no-param-reassign */
 import { render as mailyRender, JSONContent as MailyJSONContent } from '@maily-to/render';
 import { Injectable } from '@nestjs/common';
-import { Liquid } from 'liquidjs';
 import { EmailRenderOutput } from '@novu/shared';
 import { InstrumentUsecase } from '@novu/application-generic';
+
 import { FullPayloadForRender, RenderCommand } from './render-command';
 import { WrapMailyInLiquidUseCase } from './maily-to-liquid/wrap-maily-in-liquid.usecase';
-import { MAILY_ITERABLE_MARK, MailyAttrsEnum, MailyContentTypeEnum } from './maily-to-liquid/maily.types';
+import { MAILY_ITERABLE_MARK, MailyAttrsEnum } from './maily-to-liquid/maily.types';
 import { parseLiquid } from '../../../shared/helpers/liquid';
+import { hasShow, isRepeatNode, isVariableNode } from './maily-to-liquid/maily-utils';
 
 export class EmailOutputRendererCommand extends RenderCommand {}
 
@@ -88,15 +89,15 @@ export class EmailOutputRendererUsecase {
     while (queue.length > 0) {
       const current = queue.shift()!;
 
-      if (this.hasShow(current.node)) {
+      if (hasShow(current.node)) {
         await this.handleShowNode(current.node, variables, current.parent);
       }
 
-      if (this.isForNode(current.node)) {
+      if (isRepeatNode(current.node)) {
         await this.handleEachNode(current.node, variables, current.parent);
       }
 
-      if (this.isVariableNode(current.node)) {
+      if (isVariableNode(current.node)) {
         this.processVariableNodeTypes(current.node);
       }
 
@@ -156,23 +157,6 @@ export class EmailOutputRendererUsecase {
     node.text = node.attrs?.id || '';
   }
 
-  private isForNode(
-    node: MailyJSONContent
-  ): node is MailyJSONContent & { attrs: { [MailyAttrsEnum.EACH_KEY]: string } } {
-    return !!(
-      node.type === MailyContentTypeEnum.FOR &&
-      node.attrs &&
-      node.attrs[MailyAttrsEnum.EACH_KEY] !== undefined &&
-      typeof node.attrs[MailyAttrsEnum.EACH_KEY] === 'string'
-    );
-  }
-
-  private hasShow(
-    node: MailyJSONContent
-  ): node is MailyJSONContent & { attrs: { [MailyAttrsEnum.SHOW_IF_KEY]: string } } {
-    return node.attrs?.[MailyAttrsEnum.SHOW_IF_KEY] !== undefined && node.attrs?.[MailyAttrsEnum.SHOW_IF_KEY] !== null;
-  }
-
   /**
    * For 'each' node, multiply the content by the number of items in the iterable array
    * and add indexes to the placeholders.
@@ -229,7 +213,7 @@ export class EmailOutputRendererUsecase {
     return nodes.map((node) => {
       const processedNode = { ...node };
 
-      if (this.isVariableNode(processedNode)) {
+      if (isVariableNode(processedNode)) {
         this.processVariableNodeTypes(processedNode);
 
         if (processedNode.text) {
@@ -257,15 +241,4 @@ export class EmailOutputRendererUsecase {
       return Boolean(normalized);
     }
   }
-
-  private isVariableNode(
-    node: MailyJSONContent
-  ): node is MailyJSONContent & { attrs: { [MailyAttrsEnum.ID]: string } } {
-    return !!(
-      node.type === MailyContentTypeEnum.VARIABLE &&
-      node.attrs &&
-      node.attrs[MailyAttrsEnum.ID] !== undefined &&
-      typeof node.attrs[MailyAttrsEnum.ID] === 'string'
-    );
-  }
 }

apps/api/src/app/environments-v1/usecases/output-renderers/maily-to-liquid/maily-utils.ts

@@ -0,0 +1,39 @@
+import { JSONContent as MailyJSONContent } from '@maily-to/render';
+
+import { MailyAttrsEnum, MailyContentTypeEnum } from './maily.types';
+
+export const isRepeatNode = (
+  node: MailyJSONContent
+): node is MailyJSONContent & { attrs: { [MailyAttrsEnum.EACH_KEY]: string } } => {
+  return !!(
+    (node.type === MailyContentTypeEnum.REPEAT || node.type === MailyContentTypeEnum.FOR) &&
+    node.attrs &&
+    node.attrs[MailyAttrsEnum.EACH_KEY] !== undefined &&
+    typeof node.attrs[MailyAttrsEnum.EACH_KEY] === 'string'
+  );
+};
+
+export const isVariableNode = (
+  node: MailyJSONContent
+): node is MailyJSONContent & { attrs: { [MailyAttrsEnum.ID]: string } } => {
+  return !!(
+    node.type === MailyContentTypeEnum.VARIABLE &&
+    node.attrs &&
+    node.attrs[MailyAttrsEnum.ID] !== undefined &&
+    typeof node.attrs[MailyAttrsEnum.ID] === 'string'
+  );
+};
+
+export const hasShow = (
+  node: MailyJSONContent
+): node is MailyJSONContent & { attrs: { [MailyAttrsEnum.SHOW_IF_KEY]: string } } => {
+  return node.attrs?.[MailyAttrsEnum.SHOW_IF_KEY] !== undefined && node.attrs?.[MailyAttrsEnum.SHOW_IF_KEY] !== null;
+};
+
+export const hasAttrs = (node: MailyJSONContent): node is MailyJSONContent & { attrs: Record<string, any> } => {
+  return !!node.attrs;
+};
+
+export const hasMarks = (node: MailyJSONContent): node is MailyJSONContent & { marks: Record<string, any>[] } => {
+  return !!node.marks;
+};

apps/api/src/app/environments-v1/usecases/output-renderers/maily-to-liquid/maily.types.ts

@@ -1,5 +1,10 @@
 export enum MailyContentTypeEnum {
   VARIABLE = 'variable',
+  REPEAT = 'repeat',
+  /**
+   * Legacy enum value maintained for backwards compatibility
+   * @deprecated
+   */
   FOR = 'for',
   BUTTON = 'button',
   IMAGE = 'image',

apps/api/src/app/environments-v1/usecases/output-renderers/maily-to-liquid/wrap-maily-in-liquid.usecase.ts

@@ -1,21 +1,23 @@
 /* eslint-disable no-param-reassign */
 import { Injectable } from '@nestjs/common';
 import { JSONContent as MailyJSONContent } from '@maily-to/render';
+
 import { WrapMailyInLiquidCommand } from './wrap-maily-in-liquid.command';
 import {
   MailyContentTypeEnum,
   MailyAttrsEnum,
   MAILY_ITERABLE_MARK,
   MAILY_FIRST_CITIZEN_VARIABLE_KEY,
 } from './maily.types';
+import { hasAttrs, hasMarks, isRepeatNode } from './maily-utils';
 
 /**
- * Enriches Maily JSON content with Liquid syntax for variables.
+ * Enriches Maily JSON content with Liquid syntax repeat variables.
  *
  * @example
  * Input:
  * {
- *   type: "for",
+ *   type: "repeat",
  *   attrs: { each: "payload.comments" },
  *   content: [{
  *     type: "variable",
@@ -53,19 +55,19 @@ export class WrapMailyInLiquidUseCase {
     const newNode = { ...node } as MailyJSONContent & { attrs: Record<string, any> };
 
     // if this is a for loop node, track its variable
-    if (this.isForNode(node)) {
+    if (isRepeatNode(node)) {
       parentForLoopKey = node.attrs[MailyAttrsEnum.EACH_KEY];
     }
 
     if (node.content) {
       newNode.content = node.content.map((child) => this.wrapVariablesInLiquid(child, parentForLoopKey));
     }
 
-    if (this.hasAttrs(node)) {
+    if (hasAttrs(node)) {
       newNode.attrs = this.processVariableNodeAttributes(node, parentForLoopKey);
     }
 
-    if (this.hasMarks(node)) {
+    if (hasMarks(node)) {
       newNode.marks = this.processNodeMarks(node);
     }
 
@@ -144,25 +146,6 @@ export class WrapMailyInLiquidUseCase {
 
     return `{{ ${variableName}${fallbackSuffix} }}`;
   }
-
-  private hasAttrs(node: MailyJSONContent): node is MailyJSONContent & { attrs: Record<string, any> } {
-    return !!node.attrs;
-  }
-
-  private hasMarks(node: MailyJSONContent): node is MailyJSONContent & { marks: Record<string, any>[] } {
-    return !!node.marks;
-  }
-
-  private isForNode(
-    node: MailyJSONContent
-  ): node is MailyJSONContent & { attrs: { [MailyAttrsEnum.EACH_KEY]: string } } {
-    return !!(
-      node.type === MailyContentTypeEnum.FOR &&
-      node.attrs &&
-      node.attrs[MailyAttrsEnum.EACH_KEY] !== undefined &&
-      typeof node.attrs[MailyAttrsEnum.EACH_KEY] === 'string'
-    );
-  }
 }
 
 const variableAttributeConfig = (type: MailyContentTypeEnum) => {

apps/api/src/app/workflows-v2/maily-test-data.ts

@@ -227,7 +227,7 @@ export function fullCodeSnippet() {
             },
             content: [
               {
-                type: 'for',
+                type: 'repeat',
                 attrs: {
                   each: 'payload.origins',
                   isUpdatingKey: false,
@@ -307,7 +307,7 @@ export function fullCodeSnippet() {
             },
             content: [
               {
-                type: 'for',
+                type: 'repeat',
                 attrs: {
                   each: 'payload.students',
                   isUpdatingKey: false,
@@ -400,12 +400,12 @@ export function fullCodeSnippet() {
         content: [
           {
             type: 'text',
-            text: 'This will be a nested for block',
+            text: 'This will be a nested repeat block',
           },
         ],
       },
       {
-        type: 'for',
+        type: 'repeat',
         attrs: {
           each: 'payload.food.items',
           isUpdatingKey: false,

apps/dashboard/src/components/workflow-editor/steps/email/extensions/for-view.tsx

@@ -7,7 +7,7 @@ function TooltipContent({ forNodeEachKey, currentProperty }: { forNodeEachKey: s
   return (
     <p className="mly-top-1/2 mly-left-1/2 -mly-translate-x-1/2 -mly-translate-y-1/2 mly-text-gray-400 mly-shadow-sm absolute z-[1] flex items-center gap-2 rounded-md bg-white px-3 py-1.5">
       <Lightbulb className="size-3.5 stroke-[2] text-gray-400" />
-      Access 'for' loop items using{' '}
+      Access 'repeat' loop items using{' '}
       <code className="mly-px-1 mly-py-0.5 mly-bg-gray-50 mly-rounded mly-font-mono mly-text-gray-400">
         {`{{ ${forNodeEachKey}`}
         <span className="inline-block pr-1">
@@ -71,7 +71,7 @@ export function ForView(props: NodeViewProps) {
   }, []);
 
   return (
-    <NodeViewWrapper draggable="true" data-drag-handle="" data-type="for" className="mly-relative">
+    <NodeViewWrapper draggable="true" data-drag-handle="" data-type="repeat" className="mly-relative">
       <NodeViewContent className="is-editable" />
       {isOnEmptyForNodeLine && forNodeEachKey && (
         <TooltipContent forNodeEachKey={forNodeEachKey} currentProperty={currentProperty} />

apps/dashboard/src/components/workflow-editor/steps/email/extensions/for.tsx

@@ -24,7 +24,7 @@ declare module '@tiptap/core' {
  * @see https://github.com/arikchakma/maily.to/blob/d7ea26e6b28201fc66c241200adaebc689018b03/packages/core/src/editor/nodes/for/for.ts
  */
 export const ForExtension = Node.create({
-  name: 'for',
+  name: 'repeat',
   group: 'block',
   content: '(block|columns)+',
   draggable: true,

apps/dashboard/src/components/workflow-editor/steps/email/maily.tsx

@@ -86,7 +86,7 @@ export const Maily = ({ value, onChange, className, ...rest }: MailyProps) => {
         return dedupAndSortVariables(filteredVariables, queryWithoutSuffix);
       }
 
-      const iterableName = editor?.getAttributes('for')?.each;
+      const iterableName = editor?.getAttributes('repeat')?.each;
 
       const newNamespaces = [...namespaces, ...(iterableName ? [{ name: iterableName, required: false }] : [])];
 
@@ -123,7 +123,7 @@ export const Maily = ({ value, onChange, className, ...rest }: MailyProps) => {
     <>
       <div className={cn('mx-auto flex h-full flex-col items-start', className)} {...rest}>
         <Editor
-          key="for-block-enabled"
+          key="repeat-block-enabled"
           config={DEFAULT_EDITOR_CONFIG}
           blocks={DEFAULT_EDITOR_BLOCKS}
           extensions={extensions}