fix(editor): Format action names properly when action is not defined

packages/editor-ui/package.json

@@ -48,6 +48,7 @@
     "@vueuse/core": "^10.11.0",
     "axios": "catalog:",
     "bowser": "2.11.0",
+    "change-case": "^5.4.4",
     "chart.js": "^4.4.0",
     "codemirror-lang-html-n8n": "^1.0.0",
     "dateformat": "^3.0.3",

packages/editor-ui/src/components/Node/NodeCreator/__tests__/utils.test.ts

@@ -1,5 +1,5 @@
 import type { SectionCreateElement } from '@/Interface';
-import { groupItemsInSections, sortNodeCreateElements } from '../utils';
+import { formatTriggerActionName, groupItemsInSections, sortNodeCreateElements } from '../utils';
 import { mockActionCreateElement, mockNodeCreateElement, mockSectionCreateElement } from './utils';
 
 describe('NodeCreator - utils', () => {
@@ -62,4 +62,15 @@ describe('NodeCreator - utils', () => {
 			expect(sortNodeCreateElements([node1, node2, node3])).toEqual([node1, node2, node3]);
 		});
 	});
+
+	describe('formatTriggerActionName', () => {
+		test.each([
+			['project.created', 'project created'],
+			['Project Created', 'project created'],
+			['field.value.created', 'field value created'],
+			['attendee.checked_in', 'attendee checked in'],
+		])('Action name %i should become as %i', (actionName, expected) => {
+			expect(formatTriggerActionName(actionName)).toEqual(expected);
+		});
+	});
 });

packages/editor-ui/src/components/Node/NodeCreator/composables/useActionsGeneration.ts

@@ -12,6 +12,7 @@ import type {
 import { i18n } from '@/plugins/i18n';
 
 import { getCredentialOnlyNodeType } from '@/utils/credentialOnlyNodes';
+import { formatTriggerActionName } from '../utils';
 
 const PLACEHOLDER_RECOMMENDED_ACTION_KEY = 'placeholder_recommended';
 
@@ -138,7 +139,7 @@ function triggersCategory(nodeTypeDescription: INodeTypeDescription): ActionType
 			displayName:
 				categoryItem.action ??
 				cachedBaseText('nodeCreator.actionsCategory.onEvent', {
-					interpolate: { event: startCase(categoryItem.name) },
+					interpolate: { event: formatTriggerActionName(categoryItem.name) },
 				}),
 			description: categoryItem.description ?? '',
 			displayOptions: matchedProperty.displayOptions,

packages/editor-ui/src/components/Node/NodeCreator/utils.ts

@@ -19,6 +19,7 @@ import { sublimeSearch } from '@/utils/sortUtils';
 import type { NodeViewItemSection } from './viewsData';
 import { i18n } from '@/plugins/i18n';
 import { sortBy } from 'lodash-es';
+import * as changeCase from 'change-case';
 
 import { usePostHog } from '@/stores/posthog.store';
 
@@ -177,3 +178,11 @@ export function groupItemsInSections(
 
 	return result;
 }
+
+export const formatTriggerActionName = (actionPropertyName: string) => {
+	let name = actionPropertyName;
+	if (actionPropertyName.includes('.')) {
+		name = actionPropertyName.split('.').join(' ');
+	}
+	return changeCase.noCase(name);
+};