feat: Implement getFlowDataWithIconUrls method for templates

packages/backend/src/models/template.ee.js

@@ -1,5 +1,6 @@
 import Base from './base.js';
 import Flow from './flow.js';
+import { generateIconUrl } from '../helpers/generate-icon-url.js';
 
 class Template extends Base {
   static tableName = 'templates';
@@ -23,6 +24,18 @@ class Template extends Base {
 
     return this.query().insertAndFetch({ name, flowData });
   }
+
+  getFlowDataWithIconUrls() {
+    if (!this.flowData) return null;
+
+    return {
+      ...this.flowData,
+      steps: this.flowData.steps?.map((step) => ({
+        ...step,
+        iconUrl: generateIconUrl(step.appKey),
+      })),
+    };
+  }
 }
 
 export default Template;

packages/backend/src/models/template.ee.test.js

@@ -1,8 +1,9 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import Crypto from 'crypto';
 import Template from './template.ee.js';
 import { createFlow } from '../../test/factories/flow';
 import { createStep } from '../../test/factories/step';
+import appConfig from '../config/app.js';
 
 describe('Template model', () => {
   it('tableName should return correct name', () => {
@@ -76,4 +77,96 @@ describe('Template model', () => {
       });
     });
   });
+
+  describe('getFlowDataWithIconUrls', () => {
+    beforeEach(() => {
+      vi.spyOn(appConfig, 'baseUrl', 'get').mockReturnValue(
+        'https://automatisch.io'
+      );
+    });
+
+    it('should add iconUrl to each step in flowData', () => {
+      const template = new Template();
+      template.flowData = {
+        id: 'flow-id',
+        name: 'Test Flow',
+        steps: [
+          {
+            id: 'step-1',
+            appKey: 'webhook',
+            type: 'trigger',
+          },
+          {
+            id: 'step-2',
+            appKey: 'formatter',
+            type: 'action',
+          },
+        ],
+      };
+
+      const result = template.getFlowDataWithIconUrls();
+
+      expect(result.steps[0].iconUrl).toBe(
+        'https://automatisch.io/apps/webhook/assets/favicon.svg'
+      );
+      expect(result.steps[1].iconUrl).toBe(
+        'https://automatisch.io/apps/formatter/assets/favicon.svg'
+      );
+    });
+
+    it('should handle steps with null appKey', () => {
+      const template = new Template();
+      template.flowData = {
+        id: 'flow-id',
+        name: 'Test Flow',
+        steps: [
+          {
+            id: 'step-1',
+            appKey: null,
+            type: 'trigger',
+          },
+        ],
+      };
+
+      const result = template.getFlowDataWithIconUrls();
+
+      expect(result.steps[0].iconUrl).toBeNull();
+    });
+
+    it('should preserve all other flowData properties', () => {
+      const template = new Template();
+      template.flowData = {
+        id: 'flow-id',
+        name: 'Test Flow',
+        customField: 'test',
+        steps: [
+          {
+            id: 'step-1',
+            appKey: 'webhook',
+            type: 'trigger',
+            position: 1,
+            parameters: { test: true },
+          },
+        ],
+      };
+
+      const result = template.getFlowDataWithIconUrls();
+
+      expect(result).toEqual({
+        id: 'flow-id',
+        name: 'Test Flow',
+        customField: 'test',
+        steps: [
+          {
+            id: 'step-1',
+            appKey: 'webhook',
+            type: 'trigger',
+            position: 1,
+            parameters: { test: true },
+            iconUrl: 'https://automatisch.io/apps/webhook/assets/favicon.svg',
+          },
+        ],
+      });
+    });
+  });
 });

packages/backend/src/serializers/template.ee.js

@@ -1,18 +1,8 @@
-import { generateIconUrl } from '../helpers/generate-icon-url.js';
-
 const templateSerializer = (template) => {
-  const flowDataWithIconUrls = {
-    ...template.flowData,
-    steps: template.flowData.steps?.map((step) => ({
-      ...step,
-      iconUrl: generateIconUrl(step.appKey),
-    })),
-  };
-
   return {
     id: template.id,
     name: template.name,
-    flowData: flowDataWithIconUrls,
+    flowData: template.getFlowDataWithIconUrls(),
     createdAt: template.createdAt.getTime(),
     updatedAt: template.updatedAt.getTime(),
   };

packages/backend/src/serializers/template.ee.test.js

@@ -1,7 +1,6 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import templateSerializer from './template.ee.js';
 import { createTemplate } from '../../test/factories/template.js';
-
 describe('templateSerializer', () => {
   let template;
 
@@ -13,7 +12,7 @@ describe('templateSerializer', () => {
     const expectedPayload = {
       id: template.id,
       name: template.name,
-      flowData: template.flowData,
+      flowData: template.getFlowDataWithIconUrls(),
       createdAt: template.createdAt.getTime(),
       updatedAt: template.updatedAt.getTime(),
     };

packages/backend/test/mocks/rest/api/v1/templates/get-templates.ee.js

@@ -1,11 +1,13 @@
 const getTemplatesMock = async (templates) => {
-  const data = templates.map((template) => ({
-    id: template.id,
-    name: template.name,
-    flowData: template.flowData,
-    createdAt: template.createdAt.getTime(),
-    updatedAt: template.updatedAt.getTime(),
-  }));
+  const data = templates.map((template) => {
+    return {
+      id: template.id,
+      name: template.name,
+      flowData: template.getFlowDataWithIconUrls(),
+      createdAt: template.createdAt.getTime(),
+      updatedAt: template.updatedAt.getTime(),
+    };
+  });
 
   return {
     data: data,