Cleanup

Author: scdekov

packages/frontend/editor-ui/src/features/ai/instanceAi/__tests__/WorkflowSetupWizard.test.ts

@@ -85,11 +85,12 @@ interface ContextOptions {
 function makeContext(isComplete: Ref<boolean>, options: ContextOptions = {}): WorkflowSetupContext {
 	const sections = options.sections ?? [sectionA];
 	const currentStepIndex = options.currentStepIndex ?? ref(0);
-	const steps = computed<WorkflowSetupStep[]>(() => sections.map((section) => ({ section })));
+	const steps = computed<WorkflowSetupStep[]>(() =>
+		sections.map((section) => ({ kind: 'section', section })),
+	);
 
 	const isStepHandled = (step: WorkflowSetupStep): boolean => {
-		const sec = step.section;
-		if (!sec) return false;
+		if (step.kind !== 'section') return false;
 		return isComplete.value || (options.isSkipped?.value ?? false);
 	};
 

packages/frontend/editor-ui/src/features/ai/instanceAi/workflowSetup/__tests__/factories.ts

@@ -1,5 +1,6 @@
 import type { InstanceAiWorkflowSetupNode } from '@n8n/api-types';
 import type { WorkflowSetupSection } from '../workflowSetup.types';
+import { buildSectionId } from '../workflowSetup.helpers';
 
 export function makeSetupRequest(
 	overrides: Omit<Partial<InstanceAiWorkflowSetupNode>, 'node'> & {
@@ -50,7 +51,7 @@ export function makeWorkflowSetupSection(
 	};
 
 	return {
-		id: overrides.id ?? `${targetNodeName}:${credentialType ?? 'parameters'}`,
+		id: overrides.id ?? buildSectionId(targetNodeName, credentialType),
 		...(credentialType ? { credentialType } : {}),
 		targetNodeName,
 		node: finalNode,

packages/frontend/editor-ui/src/features/ai/instanceAi/workflowSetup/components/WorkflowSetupCard.test.ts

@@ -75,9 +75,9 @@ const renderComponent = createComponentRenderer(WorkflowSetupCard);
 function makeContext(section: WorkflowSetupSection): WorkflowSetupContext {
 	return {
 		sections: computed(() => [section]),
-		steps: computed(() => [{ section }]),
+		steps: computed(() => [{ kind: 'section', section }]),
 		currentStepIndex: ref(0),
-		activeStep: computed(() => ({ section })),
+		activeStep: computed(() => ({ kind: 'section', section })),
 		hasOtherUnhandledSteps: computed(() => false),
 		canAdvanceToNextIncomplete: computed(() => false),
 		credentialSelections: ref({}),

packages/frontend/editor-ui/src/features/ai/instanceAi/workflowSetup/components/WorkflowSetupWizard.vue

@@ -4,19 +4,16 @@ import WorkflowSetupCard from './WorkflowSetupCard.vue';
 import WorkflowSetupGroupCard from './WorkflowSetupGroupCard.vue';
 import WorkflowSetupWizardFooter from './WorkflowSetupWizardFooter.vue';
 import { useWorkflowSetupContext } from '../composables/useWorkflowSetupContext';
-import { isWorkflowSetupGroupStep } from '../workflowSetup.types';
 
 const ctx = useWorkflowSetupContext();
 
-const activeGroup = computed(() => {
-	const step = ctx.activeStep.value;
-	return step && isWorkflowSetupGroupStep(step) ? step.group : undefined;
-});
+const activeGroup = computed(() =>
+	ctx.activeStep.value?.kind === 'group' ? ctx.activeStep.value.group : undefined,
+);
 
-const activeSection = computed(() => {
-	const step = ctx.activeStep.value;
-	return step && !isWorkflowSetupGroupStep(step) ? step.section : undefined;
-});
+const activeSection = computed(() =>
+	ctx.activeStep.value?.kind === 'section' ? ctx.activeStep.value.section : undefined,
+);
 
 const groupKey = computed(() => {
 	return activeGroup.value ? `group:${activeGroup.value.parentNode.name}` : undefined;

packages/frontend/editor-ui/src/features/ai/instanceAi/workflowSetup/composables/useWorkflowSetupActions.test.ts

@@ -47,7 +47,10 @@ function setupHarness(): Harness {
 		credentialType: 'typeB',
 	});
 	const sections = computed(() => [sectionA, sectionB]);
-	const steps = computed<WorkflowSetupStep[]>(() => [{ section: sectionA }, { section: sectionB }]);
+	const steps = computed<WorkflowSetupStep[]>(() => [
+		{ kind: 'section', section: sectionA },
+		{ kind: 'section', section: sectionB },
+	]);
 	const currentStepIndex = ref(0);
 	const activeStep = computed<WorkflowSetupStep | undefined>(
 		() => steps.value[currentStepIndex.value],
@@ -278,6 +281,7 @@ describe('useWorkflowSetupActions', () => {
 			const sections = computed(() => [sectionA, sectionB]);
 			const steps = computed<WorkflowSetupStep[]>(() => [
 				{
+					kind: 'group',
 					group: {
 						parentNode: { name: 'Agent', type: 'agent', typeVersion: 1, id: 'agent-1' },
 						subnodeSections: [sectionA, sectionB],
@@ -353,6 +357,7 @@ describe('useWorkflowSetupActions', () => {
 			const sections = computed(() => [sectionA, sectionB]);
 			const steps = computed<WorkflowSetupStep[]>(() => [
 				{
+					kind: 'group',
 					group: {
 						parentNode: { name: 'Agent', type: 'agent', typeVersion: 1, id: 'agent-1' },
 						subnodeSections: [sectionA, sectionB],

packages/frontend/editor-ui/src/features/ai/instanceAi/workflowSetup/composables/useWorkflowSetupActions.ts

@@ -137,24 +137,21 @@ export function useWorkflowSetupActions(deps: {
 
 		isActionPending.value = true;
 		try {
-			// Skip only the incomplete sections in the active step. Already-complete
-			// sections keep their input and continue to contribute to the apply
-			// payload.
+			// Skipping the active step only marks its incomplete sections — already-
+			// complete sections still contribute to the apply payload.
 			const stepSections = getStepSections(step);
 			for (const section of stepSections) {
 				if (!deps.inputs.isSectionComplete(section)) {
 					deps.inputs.markSectionSkipped(section);
 				}
 			}
 
-			// Non-terminal: more steps still need handling — advance & wait.
 			const next = nextUnhandledIndex.value;
 			if (next >= 0) {
 				deps.goToStep(next);
 				return;
 			}
 
-			// Terminal: every step is now complete or skipped.
 			trackSetupInput();
 			const completedPayload = deps.inputs.buildCompletedSetupPayload();
 			const hasAnyCompleted =

packages/frontend/editor-ui/src/features/ai/instanceAi/workflowSetup/composables/useWorkflowSetupGroupSections.ts

@@ -7,37 +7,25 @@ import { useWorkflowSetupContext } from './useWorkflowSetupContext';
  * Manages per-section expansion state inside a `WorkflowSetupGroup`.
  *
  * Only sub-node sections are collapsible: the parent section renders inline
- * as the group card's primary body and is always visible. The expansion
- * model therefore tracks `subnodeSections` only.
+ * as the group card's primary body and is always visible.
  *
- * Sections are keyed by `section.id` (not `targetNodeName`) so the keys stay
- * stable as parent metadata changes.
- *
- * Behaviour:
- *  - Initial state: open the first incomplete sub-node in display order.
- *  - Auto-expand-next when a credential-only section completes (parent or
- *    sub-node completion both trigger the next incomplete sub-node to open).
- *  - Sections that contain parameters stay open so the user isn't interrupted
- *    mid-typing.
+ * Sections that contain parameters stay open so the user isn't interrupted
+ * mid-typing — only credential-only sections auto-collapse on completion.
  */
 export function useWorkflowSetupGroupSections(group: Ref<WorkflowSetupGroup>) {
 	const ctx = useWorkflowSetupContext();
 
-	const expandableSections = computed<WorkflowSetupSection[]>(() => group.value.subnodeSections);
-
-	// Watching parent + sub-node completion together lets a parent's credential
-	// completion still drive the next sub-node to open.
 	const allSections = computed<WorkflowSetupSection[]>(() => getGroupSections(group.value));
 
 	const expandedSections = reactive<Record<string, boolean>>({});
 
 	function initExpandState() {
-		for (const section of expandableSections.value) {
+		for (const section of group.value.subnodeSections) {
 			if (!(section.id in expandedSections)) {
 				expandedSections[section.id] = false;
 			}
 		}
-		const firstIncomplete = expandableSections.value.find(
+		const firstIncomplete = group.value.subnodeSections.find(
 			(section) => !ctx.isSectionComplete(section),
 		);
 		if (firstIncomplete) {
@@ -50,32 +38,24 @@ export function useWorkflowSetupGroupSections(group: Ref<WorkflowSetupGroup>) {
 		expandedSections[sectionId] = !expandedSections[sectionId];
 	}
 
-	// Auto-expand-next on completion of a credential-only section.
-	const prevSectionComplete = new Map<string, boolean>();
 	watch(
-		// `isSectionComplete` is reactive via deps it consumes; tracking the
-		// completion state of every section keeps this responsive.
 		() => allSections.value.map((section) => [section.id, ctx.isSectionComplete(section)] as const),
-		(states) => {
+		(states, prevStates) => {
+			const prev = new Map(prevStates ?? []);
 			for (const [sectionId, isComplete] of states) {
-				const wasComplete = prevSectionComplete.get(sectionId) ?? false;
-				if (!isComplete || wasComplete) continue;
+				if (!isComplete || prev.get(sectionId)) continue;
 				const section = allSections.value.find((s) => s.id === sectionId);
 				if (!section || section.parameterNames.length > 0) continue;
 				if (sectionId in expandedSections) {
 					expandedSections[sectionId] = false;
 				}
-				const nextIncomplete = expandableSections.value.find(
+				const nextIncomplete = group.value.subnodeSections.find(
 					(s) => !ctx.isSectionComplete(s) && s.id !== sectionId,
 				);
 				if (nextIncomplete) {
 					expandedSections[nextIncomplete.id] = true;
 				}
 			}
-			prevSectionComplete.clear();
-			for (const [sectionId, isComplete] of states) {
-				prevSectionComplete.set(sectionId, isComplete);
-			}
 		},
 		{ immediate: true },
 	);

packages/frontend/editor-ui/src/features/ai/instanceAi/workflowSetup/composables/useWorkflowSetupInputs.ts

@@ -149,10 +149,13 @@ export function useWorkflowSetupInputs(deps: {
 		const includeParams = (section: WorkflowSetupSection) =>
 			!isSectionSkipped(section) && areParametersComplete(section);
 
-		return prunePayload({
-			nodeCredentials: buildNodeCredentials(includeCredential),
-			nodeParameters: buildNodeParameters(includeParams),
-		});
+		const nodeCredentials = buildNodeCredentials(includeCredential);
+		const nodeParameters = buildNodeParameters(includeParams);
+
+		return {
+			...(Object.keys(nodeCredentials).length > 0 ? { nodeCredentials } : {}),
+			...(Object.keys(nodeParameters).length > 0 ? { nodeParameters } : {}),
+		};
 	}
 
 	function buildNodeCredentials(
@@ -188,16 +191,6 @@ export function useWorkflowSetupInputs(deps: {
 		return out;
 	}
 
-	function seedParameterValuesForNewSections(sections: WorkflowSetupSection[]) {
-		let nextParameters: ParameterValuesMap | null = null;
-		for (const section of sections) {
-			if (parameterValues.value[section.targetNodeName]) continue;
-			nextParameters ??= { ...parameterValues.value };
-			nextParameters[section.targetNodeName] = section.node.parameters as INodeParameters;
-		}
-		if (nextParameters) parameterValues.value = nextParameters;
-	}
-
 	function seedCredentialSelectionsForNewSections(
 		newSections: WorkflowSetupSection[],
 	): Array<{ id: string; type: string }> {
@@ -235,7 +228,6 @@ export function useWorkflowSetupInputs(deps: {
 			const previousSectionIds = new Set(oldSections?.map((section) => section.id) ?? []);
 			const newSections = sections.filter((section) => !previousSectionIds.has(section.id));
 
-			seedParameterValuesForNewSections(newSections);
 			const credentialsToTest = seedCredentialSelectionsForNewSections(newSections);
 			for (const credential of credentialsToTest) {
 				testCredential(credential.id, credential.type);
@@ -288,12 +280,3 @@ function setCredentialSelectionForTargetNames(
 
 	return nextCredentialSelections;
 }
-
-function prunePayload(payload: WorkflowSetupApplyPayload): WorkflowSetupApplyPayload {
-	const result: WorkflowSetupApplyPayload = {};
-	if (payload.nodeCredentials && Object.keys(payload.nodeCredentials).length > 0)
-		result.nodeCredentials = payload.nodeCredentials;
-	if (payload.nodeParameters && Object.keys(payload.nodeParameters).length > 0)
-		result.nodeParameters = payload.nodeParameters;
-	return result;
-}

packages/frontend/editor-ui/src/features/ai/instanceAi/workflowSetup/composables/useWorkflowSetupSections.ts

@@ -5,6 +5,7 @@ import { useNodeTypesStore } from '@/app/stores/nodeTypes.store';
 import { isHttpRequestNodeType } from '@/features/setupPanel/setupPanel.utils';
 import { NodeHelpers, type INodeParameters } from 'n8n-workflow';
 import type { WorkflowSetupSection } from '../workflowSetup.types';
+import { buildSectionId } from '../workflowSetup.helpers';
 
 export function useWorkflowSetupSections(
 	setupRequests: Ref<InstanceAiWorkflowSetupNode[]> | ComputedRef<InstanceAiWorkflowSetupNode[]>,
@@ -41,7 +42,7 @@ export function useWorkflowSetupSections(
 				credentialType === undefined ? null : (req.node.credentials?.[credentialType]?.id ?? null);
 
 			const section: WorkflowSetupSection = {
-				id: `${req.node.name}:${credentialType ?? 'parameters'}`,
+				id: buildSectionId(req.node.name, credentialType),
 				...(credentialType ? { credentialType } : {}),
 				targetNodeName: req.node.name,
 				node,

packages/frontend/editor-ui/src/features/ai/instanceAi/workflowSetup/composables/useWorkflowSetupSteps.test.ts

@@ -2,7 +2,7 @@ import { computed, ref } from 'vue';
 import { describe, expect, it } from 'vitest';
 import type { InstanceAiWorkflowSetupNode } from '@n8n/api-types';
 import { makeSetupRequest, makeWorkflowSetupSection } from '../__tests__/factories';
-import { isWorkflowSetupGroupStep, type WorkflowSetupSection } from '../workflowSetup.types';
+import type { WorkflowSetupSection } from '../workflowSetup.types';
 import { useWorkflowSetupSteps } from './useWorkflowSetupSteps';
 
 const agent = { name: 'Agent', type: 'agent', typeVersion: 1, id: 'agent-1' };
@@ -32,7 +32,7 @@ describe('useWorkflowSetupSteps', () => {
 		const { steps } = harness(sections, requests);
 
 		expect(steps.value).toHaveLength(2);
-		expect(steps.value.every((s) => !!s.section)).toBe(true);
+		expect(steps.value.every((s) => s.kind === 'section')).toBe(true);
 	});
 
 	it('inserts the group at the first sub-node position when the parent comes after the sub-nodes', () => {
@@ -50,13 +50,14 @@ describe('useWorkflowSetupSteps', () => {
 		const { steps } = harness(sections, requests);
 
 		expect(steps.value).toHaveLength(2);
-		expect(isWorkflowSetupGroupStep(steps.value[0])).toBe(true);
 		const groupStep = steps.value[0];
-		if (!groupStep.group) throw new Error('expected group step');
+		if (groupStep.kind !== 'group') throw new Error('expected group step');
 		expect(groupStep.group.parentNode.name).toBe('Agent');
 		expect(groupStep.group.subnodeSections.map((s) => s.id)).toEqual(['Model:openAiApi']);
 		expect(groupStep.group.parentSection?.id).toBe('Agent:foo');
-		expect(steps.value[1].section?.targetNodeName).toBe('Standalone');
+		const sectionStep = steps.value[1];
+		if (sectionStep.kind !== 'section') throw new Error('expected section step');
+		expect(sectionStep.section.targetNodeName).toBe('Standalone');
 	});
 
 	it('inserts the group at the parent position when the parent comes before its sub-nodes', () => {
@@ -74,8 +75,10 @@ describe('useWorkflowSetupSteps', () => {
 		const { steps } = harness(sections, requests);
 
 		expect(steps.value).toHaveLength(2);
-		expect(isWorkflowSetupGroupStep(steps.value[0])).toBe(true);
-		expect(steps.value[1].section?.targetNodeName).toBe('Standalone');
+		expect(steps.value[0].kind).toBe('group');
+		const sectionStep = steps.value[1];
+		if (sectionStep.kind !== 'section') throw new Error('expected section step');
+		expect(sectionStep.section.targetNodeName).toBe('Standalone');
 	});
 
 	it('emits a group with no parentSection when the parent has no setup request', () => {
@@ -86,7 +89,7 @@ describe('useWorkflowSetupSteps', () => {
 
 		expect(steps.value).toHaveLength(1);
 		const step = steps.value[0];
-		if (!step.group) throw new Error('expected group');
+		if (step.kind !== 'group') throw new Error('expected group');
 		expect(step.group.parentSection).toBeUndefined();
 		expect(step.group.subnodeSections.map((s) => s.id)).toEqual(['Model:openAiApi']);
 		expect(step.group.parentNode).toEqual(agent);
@@ -116,7 +119,7 @@ describe('useWorkflowSetupSteps', () => {
 
 		expect(steps.value).toHaveLength(1);
 		const step = steps.value[0];
-		if (!step.group) throw new Error('expected group');
+		if (step.kind !== 'group') throw new Error('expected group');
 		expect(step.group.subnodeSections.map((s) => s.id)).toEqual([
 			'Model:openAiApi',
 			'Model:parameters',
@@ -137,7 +140,9 @@ describe('useWorkflowSetupSteps', () => {
 		const { steps } = harness(sections, requests);
 
 		expect(steps.value).toHaveLength(2);
-		expect(steps.value[0].group?.parentNode.name).toBe('Agent');
-		expect(steps.value[1].group?.parentNode.name).toBe('Agent B');
+		const [first, second] = steps.value;
+		if (first.kind !== 'group' || second.kind !== 'group') throw new Error('expected groups');
+		expect(first.group.parentNode.name).toBe('Agent');
+		expect(second.group.parentNode.name).toBe('Agent B');
 	});
 });