feat(editor): Add support for configurable configuration nodes in new canvas (no-changelog) (#9991)

packages/editor-ui/src/composables/useCanvasMapping.spec.ts

@@ -114,7 +114,14 @@ describe('useCanvasMapping', () => {
 							input: {},
 							output: {},
 						},
-						renderType: 'trigger',
+						render: {
+							type: 'default',
+							options: {
+								configurable: false,
+								configuration: false,
+								trigger: true,
+							},
+						},
 					},
 				},
 			]);

packages/editor-ui/src/composables/useCanvasMapping.ts

@@ -44,21 +44,18 @@ export function useCanvasMapping({
 
 	const renderTypeByNodeType = computed(
 		() =>
-			workflow.value.nodes.reduce<Record<string, CanvasElementData['renderType']>>((acc, node) => {
-				let renderType: CanvasElementData['renderType'] = 'default';
-				switch (true) {
-					case nodeTypesStore.isTriggerNode(node.type):
-						renderType = 'trigger';
-						break;
-					case nodeTypesStore.isConfigNode(workflowObject.value, node, node.type):
-						renderType = 'configuration';
-						break;
-					case nodeTypesStore.isConfigurableNode(workflowObject.value, node, node.type):
-						renderType = 'configurable';
-						break;
-				}
+			workflow.value.nodes.reduce<Record<string, CanvasElementData['render']>>((acc, node) => {
+				// @TODO Add support for sticky notes here
+
+				acc[node.type] = {
+					type: 'default',
+					options: {
+						trigger: nodeTypesStore.isTriggerNode(node.type),
+						configuration: nodeTypesStore.isConfigNode(workflowObject.value, node, node.type),
+						configurable: nodeTypesStore.isConfigurableNode(workflowObject.value, node, node.type),
+					},
+				};
 
-				acc[node.type] = renderType;
 				return acc;
 			}, {}) ?? {},
 	);
@@ -234,7 +231,7 @@ export function useCanvasMapping({
 					count: nodeExecutionRunDataById.value[node.id]?.length ?? 0,
 					visible: !!nodeExecutionRunDataById.value[node.id],
 				},
-				renderType: renderTypeByNodeType.value[node.type] ?? 'default',
+				render: renderTypeByNodeType.value[node.type] ?? { type: 'default', options: {} },
 			};
 
 			return {

packages/editor-ui/src/composables/useCanvasNode.spec.ts

@@ -29,6 +29,7 @@ describe('useCanvasNode', () => {
 		expect(result.executionStatus.value).toBeUndefined();
 		expect(result.executionWaiting.value).toBeUndefined();
 		expect(result.executionRunning.value).toBe(false);
+		expect(result.renderOptions.value).toEqual({});
 	});
 
 	it('should return node data when node is provided', () => {
@@ -45,7 +46,14 @@ describe('useCanvasNode', () => {
 				execution: { status: 'running', waiting: 'waiting', running: true },
 				runData: { count: 1, visible: true },
 				pinnedData: { count: 1, visible: true },
-				renderType: 'default',
+				render: {
+					type: 'default',
+					options: {
+						configurable: false,
+						configuration: false,
+						trigger: false,
+					},
+				},
 			}),
 			id: ref('1'),
 			label: ref('Node 1'),
@@ -71,5 +79,6 @@ describe('useCanvasNode', () => {
 		expect(result.executionStatus.value).toBe('running');
 		expect(result.executionWaiting.value).toBe('waiting');
 		expect(result.executionRunning.value).toBe(true);
+		expect(result.renderOptions.value).toBe(node.data.value.render.options);
 	});
 });

packages/editor-ui/src/composables/useCanvasNode.ts

@@ -25,7 +25,10 @@ export function useCanvasNode() {
 					running: false,
 				},
 				runData: { count: 0, visible: false },
-				renderType: 'default',
+				render: {
+					type: 'default',
+					options: {},
+				},
 			},
 	);
 
@@ -52,6 +55,8 @@ export function useCanvasNode() {
 	const runDataCount = computed(() => data.value.runData.count);
 	const hasRunData = computed(() => data.value.runData.visible);
 
+	const renderOptions = computed(() => data.value.render.options);
+
 	return {
 		node,
 		label,
@@ -69,5 +74,6 @@ export function useCanvasNode() {
 		executionStatus,
 		executionWaiting,
 		executionRunning,
+		renderOptions,
 	};
 }