feat(editor): Make ‘Execute workflow’ a split button (#15933)

Author: autologie

cypress/e2e/19-execution.cy.ts

@@ -483,7 +483,7 @@ describe('Execution', () => {
 		cy.wait('@workflowRun').then((interception) => {
 			expect(interception.request.body).to.have.property('runData').that.is.an('object');
 
-			const expectedKeys = ['Start Manually', 'Edit Fields', 'Process The Data'];
+			const expectedKeys = ['Start on Schedule', 'Edit Fields', 'Process The Data'];
 
 			const { runData } = interception.request.body;
 			expect(Object.keys(runData)).to.have.lengthOf(expectedKeys.length);

packages/@n8n/utils/src/string/truncate.test.ts

@@ -1,4 +1,4 @@
-import { truncate } from './truncate';
+import { truncateBeforeLast, truncate } from './truncate';
 
 describe('truncate', () => {
 	it('should truncate text to 30 chars by default', () => {
@@ -13,3 +13,37 @@ describe('truncate', () => {
 		);
 	});
 });
+
+describe(truncateBeforeLast, () => {
+	it('should return unmodified text if the length does not exceed max length', () => {
+		expect(truncateBeforeLast('I love nodemation', 25)).toBe('I love nodemation');
+		expect(truncateBeforeLast('I ❤️ nodemation', 25)).toBe('I ❤️ nodemation');
+		expect(truncateBeforeLast('Nodemation is cool', 25)).toBe('Nodemation is cool');
+		expect(truncateBeforeLast('Internationalization', 25)).toBe('Internationalization');
+		expect(truncateBeforeLast('I love 👨‍👩‍👧‍👦', 8)).toBe('I love 👨‍👩‍👧‍👦');
+	});
+
+	it('should remove chars just before the last word, as long as the last word is under 15 chars', () => {
+		expect(truncateBeforeLast('I love nodemation', 15)).toBe('I lo…nodemation');
+		expect(truncateBeforeLast('I love "nodemation"', 15)).toBe('I …"nodemation"');
+		expect(truncateBeforeLast('I ❤️ nodemation', 13)).toBe('I …nodemation');
+		expect(truncateBeforeLast('Nodemation is cool', 15)).toBe('Nodemation…cool');
+		expect(truncateBeforeLast('"Nodemation" is cool', 15)).toBe('"Nodematio…cool');
+		expect(truncateBeforeLast('Is it fun to automate boring stuff?', 15)).toBe('Is it fu…stuff?');
+		expect(truncateBeforeLast('Is internationalization fun?', 15)).toBe('Is interna…fun?');
+		expect(truncateBeforeLast('I love 👨‍👩‍👧‍👦', 7)).toBe('I lov…👨‍👩‍👧‍👦');
+	});
+
+	it('should preserve last 5 characters if the last word is longer than 15 characters', () => {
+		expect(truncateBeforeLast('I love internationalization', 25)).toBe('I love internationa…ation');
+		expect(truncateBeforeLast('I love "internationalization"', 25)).toBe(
+			'I love "internation…tion"',
+		);
+		expect(truncateBeforeLast('I "love" internationalization', 25)).toBe(
+			'I "love" internatio…ation',
+		);
+		expect(truncateBeforeLast('I ❤️ internationalization', 9)).toBe('I ❤️…ation');
+		expect(truncateBeforeLast('I ❤️ internationalization', 8)).toBe('I …ation');
+		expect(truncateBeforeLast('Internationalization', 15)).toBe('Internati…ation');
+	});
+});

packages/@n8n/utils/src/string/truncate.ts

@@ -1,2 +1,44 @@
 export const truncate = (text: string, length = 30): string =>
 	text.length > length ? text.slice(0, length) + '...' : text;
+
+/**
+ * Replace part of given text with ellipsis following the rules below:
+ *
+ * - Remove chars just before the last word, as long as the last word is under 15 chars
+ * - Otherwise preserve the last 5 chars of the name and remove chars before that
+ */
+export function truncateBeforeLast(text: string, maxLength: number): string {
+	const chars: string[] = [];
+
+	const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+
+	for (const { segment } of segmenter.segment(text)) {
+		chars.push(segment);
+	}
+
+	if (chars.length <= maxLength) {
+		return text;
+	}
+
+	const lastWhitespaceIndex = chars.findLastIndex((ch) => ch.match(/^\s+$/));
+	const lastWordIndex = lastWhitespaceIndex + 1;
+	const lastWord = chars.slice(lastWordIndex);
+	const ellipsis = '…';
+	const ellipsisLength = ellipsis.length;
+
+	if (lastWord.length < 15) {
+		const charsToRemove = chars.length - maxLength + ellipsisLength;
+		const indexBeforeLastWord = lastWordIndex;
+		const keepLength = indexBeforeLastWord - charsToRemove;
+
+		if (keepLength > 0) {
+			return (
+				chars.slice(0, keepLength).join('') + ellipsis + chars.slice(indexBeforeLastWord).join('')
+			);
+		}
+	}
+
+	return (
+		chars.slice(0, maxLength - 5 - ellipsisLength).join('') + ellipsis + chars.slice(-5).join('')
+	);
+}

packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.vue

@@ -56,6 +56,12 @@ const emit = defineEmits<{
 	select: [action: string];
 	visibleChange: [open: boolean];
 }>();
+
+defineSlots<{
+	activator: {};
+	menuItem: (props: ActionDropdownItem) => void;
+}>();
+
 const elementDropdown = ref<InstanceType<typeof ElDropdown>>();
 
 const popperClass = computed(
@@ -115,7 +121,9 @@ defineExpose({ open, close });
 								<N8nIcon :icon="item.icon" :size="iconSize" />
 							</span>
 							<span :class="$style.label">
-								{{ item.label }}
+								<slot name="menuItem" v-bind="item">
+									{{ item.label }}
+								</slot>
 							</span>
 							<N8nIcon v-if="item.checked" icon="check" :size="iconSize" />
 							<span v-if="item.badge">

packages/frontend/@n8n/design-system/src/components/N8nButton/Button.scss

@@ -22,7 +22,11 @@
 	box-sizing: border-box;
 	outline: none;
 	margin: 0;
-	transition: 0.3s;
+	transition:
+		all 0.3s,
+		padding 0s,
+		width 0s,
+		height 0s;
 
 	@include utils-user-select(none);
 

packages/frontend/@n8n/i18n/src/locales/en.json

@@ -1479,6 +1479,7 @@
 	"nodeView.runButtonText.executeWorkflow": "Execute workflow",
 	"nodeView.runButtonText.executingWorkflow": "Executing workflow",
 	"nodeView.runButtonText.waitingForTriggerEvent": "Waiting for trigger event",
+	"nodeView.runButtonText.from": "from {nodeName}",
 	"nodeView.showError.workflowError": "Workflow execution had an error",
 	"nodeView.showError.getWorkflowDataFromUrl.title": "Problem loading workflow",
 	"nodeView.showError.importWorkflowData.title": "Problem importing workflow",

packages/frontend/editor-ui/src/components/CanvasChat/future/LogsPanel.vue

@@ -116,13 +116,13 @@ async function handleOpenNdv(treeNode: LogEntry) {
 					ref="container"
 					:class="$style.container"
 					tabindex="-1"
-					@keydown.esc.stop="select(undefined)"
-					@keydown.j.stop="selectNext"
-					@keydown.down.stop.prevent="selectNext"
-					@keydown.k.stop="selectPrev"
-					@keydown.up.stop.prevent="selectPrev"
-					@keydown.space.stop="selected && toggleExpanded(selected)"
-					@keydown.enter.stop="selected && handleOpenNdv(selected)"
+					@keydown.esc.exact.stop="select(undefined)"
+					@keydown.j.exact.stop="selectNext"
+					@keydown.down.exact.stop.prevent="selectNext"
+					@keydown.k.exact.stop="selectPrev"
+					@keydown.up.exact.stop.prevent="selectPrev"
+					@keydown.space.exact.stop="selected && toggleExpanded(selected)"
+					@keydown.enter.exact.stop="selected && handleOpenNdv(selected)"
 				>
 					<N8nResizeWrapper
 						v-if="hasChat && (!props.isReadOnly || messages.length > 0)"

packages/frontend/editor-ui/src/components/ParameterInput.test.ts

@@ -14,12 +14,8 @@ import { createMockEnterpriseSettings } from '@/__tests__/mocks';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import type { INodeParameterResourceLocator } from 'n8n-workflow';
 
-let mockNdvState: Partial<ReturnType<typeof useNDVStore>>;
-let mockNodeTypesState: Partial<ReturnType<typeof useNodeTypesStore>>;
-let mockCompletionResult: Partial<CompletionResult>;
-
-beforeEach(() => {
-	mockNdvState = {
+function getNdvStateMock(): Partial<ReturnType<typeof useNDVStore>> {
+	return {
 		hasInputData: true,
 		activeNode: {
 			id: faker.string.uuid(),
@@ -32,9 +28,21 @@ beforeEach(() => {
 		isInputPanelEmpty: false,
 		isOutputPanelEmpty: false,
 	};
-	mockNodeTypesState = {
+}
+
+function getNodeTypesStateMock(): Partial<ReturnType<typeof useNodeTypesStore>> {
+	return {
 		allNodeTypes: [],
 	};
+}
+
+let mockNdvState = getNdvStateMock();
+let mockNodeTypesState = getNodeTypesStateMock();
+let mockCompletionResult: Partial<CompletionResult> = {};
+
+beforeEach(() => {
+	mockNdvState = getNdvStateMock();
+	mockNodeTypesState = getNodeTypesStateMock();
 	mockCompletionResult = {};
 	createAppModals();
 });

packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasChatButton.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-export interface Props {
-	type: 'primary' | 'tertiary';
-	label: string;
-}
+import { type ButtonProps } from '@n8n/design-system';
+
+export type Props = Pick<ButtonProps, 'label' | 'type'>;
+
 defineProps<Props>();
 </script>
 <template>

packages/frontend/editor-ui/src/components/canvas/elements/buttons/CanvasRunWorkflowButton.test.ts

@@ -1,11 +1,23 @@
 import { createComponentRenderer } from '@/__tests__/render';
 import CanvasRunWorkflowButton from './CanvasRunWorkflowButton.vue';
 import userEvent from '@testing-library/user-event';
-import { waitFor } from '@testing-library/vue';
-
-const renderComponent = createComponentRenderer(CanvasRunWorkflowButton);
+import { fireEvent, waitFor } from '@testing-library/vue';
+import { createTestNode } from '@/__tests__/mocks';
+import {
+	CHAT_TRIGGER_NODE_TYPE,
+	MANUAL_CHAT_TRIGGER_NODE_TYPE,
+	MANUAL_TRIGGER_NODE_TYPE,
+	SCHEDULE_TRIGGER_NODE_TYPE,
+} from '@/constants';
 
 describe('CanvasRunWorkflowButton', () => {
+	const renderComponent = createComponentRenderer(CanvasRunWorkflowButton, {
+		props: {
+			triggerNodes: [createTestNode({ type: MANUAL_CHAT_TRIGGER_NODE_TYPE })],
+			getNodeType: () => null,
+		},
+	});
+
 	it('should render correctly', () => {
 		const wrapper = renderComponent();
 
@@ -50,4 +62,80 @@ describe('CanvasRunWorkflowButton', () => {
 
 		await waitFor(() => expect(isTooltipVisible(false)).toBeTruthy());
 	});
+
+	it('should render split button if multiple triggers are available', () => {
+		const wrapper = renderComponent({
+			props: {
+				selectedTriggerNodeName: 'A',
+				triggerNodes: [
+					createTestNode({ name: 'A', type: MANUAL_TRIGGER_NODE_TYPE }),
+					createTestNode({ name: 'B', type: SCHEDULE_TRIGGER_NODE_TYPE }),
+				],
+			},
+		});
+
+		expect(wrapper.container.textContent).toBe('Execute workflow from A');
+		expect(wrapper.queryByLabelText('Select trigger node')).toBeInTheDocument();
+	});
+
+	it('should not render split button if there is only one trigger that is not disabled nor a chat trigger', () => {
+		const wrapper = renderComponent({
+			props: {
+				selectedTriggerNodeName: 'A',
+				triggerNodes: [
+					createTestNode({ name: 'A', type: MANUAL_TRIGGER_NODE_TYPE }),
+					createTestNode({ name: 'B', type: MANUAL_TRIGGER_NODE_TYPE, disabled: true }),
+					createTestNode({ name: 'C', type: CHAT_TRIGGER_NODE_TYPE }),
+				],
+			},
+		});
+
+		expect(wrapper.container.textContent).toBe('Execute workflow ');
+		expect(wrapper.queryByLabelText('Select trigger node')).not.toBeInTheDocument();
+	});
+
+	it('should show available triggers in the ordering of coordinate on the canvas when chevron icon is clicked', async () => {
+		const wrapper = renderComponent({
+			props: {
+				selectedTriggerNodeName: 'A',
+				triggerNodes: [
+					createTestNode({ name: 'A', type: MANUAL_TRIGGER_NODE_TYPE, position: [1, 1] }),
+					createTestNode({ name: 'B', type: MANUAL_TRIGGER_NODE_TYPE, position: [1, 0] }),
+					createTestNode({ name: 'C', type: MANUAL_TRIGGER_NODE_TYPE, position: [0, 0] }),
+					createTestNode({ name: 'D', type: MANUAL_TRIGGER_NODE_TYPE, position: [0, 1] }),
+				],
+			},
+		});
+
+		const chevron = (await wrapper.findAllByRole('button'))[1];
+
+		await fireEvent.click(chevron);
+
+		const menuItems = await wrapper.findAllByRole('menuitem');
+
+		expect(menuItems).toHaveLength(4);
+		expect(menuItems[0]).toHaveTextContent('from C');
+		expect(menuItems[1]).toHaveTextContent('from B');
+		expect(menuItems[2]).toHaveTextContent('from D');
+		expect(menuItems[3]).toHaveTextContent('from A');
+	});
+
+	it('should allow to select and execute a different trigger', async () => {
+		const wrapper = renderComponent({
+			props: {
+				selectedTriggerNodeName: 'A',
+				triggerNodes: [
+					createTestNode({ name: 'A', type: MANUAL_TRIGGER_NODE_TYPE }),
+					createTestNode({ name: 'B', type: MANUAL_TRIGGER_NODE_TYPE }),
+				],
+			},
+		});
+
+		const [executeButton, chevron] = await wrapper.findAllByRole('button');
+		await fireEvent.click(chevron);
+		const menuItems = await wrapper.findAllByRole('menuitem');
+		await fireEvent.click(menuItems[1]);
+		await fireEvent.click(executeButton);
+		expect(wrapper.emitted('selectTriggerNode')).toEqual([['B']]);
+	});
 });