fix(editor): Add "time saved per execution" workflow setting (#13369)

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

@@ -1,55 +1,61 @@
-import { createPinia, setActivePinia } from 'pinia';
-import WorkflowSettingsVue from '@/components/WorkflowSettings.vue';
-
-import { setupServer } from '@/__tests__/server';
+import { nextTick, reactive } from 'vue';
+import { createTestingPinia } from '@pinia/testing';
 import type { MockInstance } from 'vitest';
-import { afterAll, beforeAll } from 'vitest';
-import { within } from '@testing-library/vue';
+import { within, waitFor } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-
+import type { FrontendSettings } from '@n8n/api-types';
+import { createComponentRenderer } from '@/__tests__/render';
+import { getDropdownItems, mockedStore, type MockedStore } from '@/__tests__/utils';
+import { EnterpriseEditionFeature } from '@/constants';
+import WorkflowSettingsVue from '@/components/WorkflowSettings.vue';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useUIStore } from '@/stores/ui.store';
+import { useSourceControlStore } from '@/stores/sourceControl.store';
 
-import { createComponentRenderer } from '@/__tests__/render';
-import { cleanupAppModals, createAppModals, getDropdownItems } from '@/__tests__/utils';
-import { EnterpriseEditionFeature, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
+vi.mock('vue-router', async () => ({
+	useRouter: vi.fn(),
+	useRoute: () =>
+		reactive({
+			params: {
+				name: '1',
+			},
+		}),
+	RouterLink: {
+		template: '<a><slot /></a>',
+	},
+}));
 
-import { nextTick } from 'vue';
-import type { IWorkflowDb } from '@/Interface';
-import * as permissions from '@/permissions';
-import type { PermissionsRecord } from '@/permissions';
-
-let pinia: ReturnType<typeof createPinia>;
-let workflowsStore: ReturnType<typeof useWorkflowsStore>;
-let settingsStore: ReturnType<typeof useSettingsStore>;
-let uiStore: ReturnType<typeof useUIStore>;
+let workflowsStore: MockedStore<typeof useWorkflowsStore>;
+let settingsStore: MockedStore<typeof useSettingsStore>;
+let sourceControlStore: MockedStore<typeof useSourceControlStore>;
+let pinia: ReturnType<typeof createTestingPinia>;
 
 let fetchAllWorkflowsSpy: MockInstance<(typeof workflowsStore)['fetchAllWorkflows']>;
 
-const createComponent = createComponentRenderer(WorkflowSettingsVue);
+const createComponent = createComponentRenderer(WorkflowSettingsVue, {
+	global: {
+		stubs: {
+			Modal: {
+				template:
+					'<div role="dialog"><slot name="header" /><slot name="content" /><slot name="footer" /></div>',
+			},
+		},
+	},
+});
 
 describe('WorkflowSettingsVue', () => {
-	let server: ReturnType<typeof setupServer>;
-	beforeAll(() => {
-		server = setupServer();
-	});
-
 	beforeEach(async () => {
-		pinia = createPinia();
-		setActivePinia(pinia);
+		pinia = createTestingPinia();
+		workflowsStore = mockedStore(useWorkflowsStore);
+		settingsStore = mockedStore(useSettingsStore);
+		sourceControlStore = mockedStore(useSourceControlStore);
 
-		createAppModals();
-
-		workflowsStore = useWorkflowsStore();
-		settingsStore = useSettingsStore();
-		uiStore = useUIStore();
-
-		await settingsStore.getSettings();
-
-		vi.spyOn(workflowsStore, 'workflowName', 'get').mockReturnValue('Test Workflow');
-		vi.spyOn(workflowsStore, 'workflowId', 'get').mockReturnValue('1');
-		fetchAllWorkflowsSpy = vi.spyOn(workflowsStore, 'fetchAllWorkflows').mockResolvedValue([
+		settingsStore.settings = {
+			enterprise: {},
+		} as FrontendSettings;
+		workflowsStore.workflowName = 'Test Workflow';
+		workflowsStore.workflowId = '1';
+		fetchAllWorkflowsSpy = workflowsStore.fetchAllWorkflows.mockResolvedValue([
 			{
 				id: '1',
 				name: 'Test Workflow',
@@ -61,7 +67,7 @@ describe('WorkflowSettingsVue', () => {
 				versionId: '123',
 			},
 		]);
-		vi.spyOn(workflowsStore, 'getWorkflowById').mockReturnValue({
+		workflowsStore.getWorkflowById.mockImplementation(() => ({
 			id: '1',
 			name: 'Test Workflow',
 			active: true,
@@ -70,24 +76,12 @@ describe('WorkflowSettingsVue', () => {
 			createdAt: 1,
 			updatedAt: 1,
 			versionId: '123',
-		} as IWorkflowDb);
-		vi.spyOn(permissions, 'getResourcePermissions').mockReturnValue({
-			workflow: {
-				update: true,
-			},
-		} as PermissionsRecord);
-
-		uiStore.modalsById[WORKFLOW_SETTINGS_MODAL_KEY] = {
-			open: true,
-		};
+			scopes: ['workflow:update'],
+		}));
 	});
 
 	afterEach(() => {
-		cleanupAppModals();
-	});
-
-	afterAll(() => {
-		server.shutdown();
+		vi.clearAllMocks();
 	});
 
 	it('should render correctly', async () => {
@@ -220,4 +214,79 @@ describe('WorkflowSettingsVue', () => {
 			expect(dropdownItems[0]).toHaveTextContent(optionText);
 		},
 	);
+
+	it('should save time saved per execution correctly', async () => {
+		const { getByTestId, getByRole } = createComponent({ pinia });
+		await nextTick();
+
+		const timeSavedPerExecutionInput = getByTestId('workflow-settings-time-saved-per-execution');
+
+		expect(timeSavedPerExecutionInput).toBeVisible();
+
+		await userEvent.type(timeSavedPerExecutionInput as Element, '10');
+		expect(timeSavedPerExecutionInput).toHaveValue(10);
+
+		await userEvent.click(getByRole('button', { name: 'Save' }));
+		expect(workflowsStore.updateWorkflow).toHaveBeenCalledWith(
+			expect.any(String),
+			expect.objectContaining({ settings: expect.objectContaining({ timeSavedPerExecution: 10 }) }),
+		);
+	});
+
+	it('should remove time saved per execution setting', async () => {
+		workflowsStore.workflowSettings.timeSavedPerExecution = 10;
+
+		const { getByTestId, getByRole } = createComponent({ pinia });
+		await nextTick();
+
+		const timeSavedPerExecutionInput = getByTestId('workflow-settings-time-saved-per-execution');
+
+		expect(timeSavedPerExecutionInput).toBeVisible();
+		await waitFor(() => expect(timeSavedPerExecutionInput).toHaveValue(10));
+
+		await userEvent.clear(timeSavedPerExecutionInput as Element);
+		expect(timeSavedPerExecutionInput).not.toHaveValue();
+
+		await userEvent.click(getByRole('button', { name: 'Save' }));
+		expect(workflowsStore.updateWorkflow).toHaveBeenCalledWith(
+			expect.any(String),
+			expect.objectContaining({
+				settings: expect.not.objectContaining({ timeSavedPerExecution: 10 }),
+			}),
+		);
+	});
+
+	it('should disable save time saved per execution if env is read-only', async () => {
+		sourceControlStore.preferences.branchReadOnly = true;
+
+		const { getByTestId } = createComponent({ pinia });
+		await nextTick();
+
+		const timeSavedPerExecutionInput = getByTestId('workflow-settings-time-saved-per-execution');
+
+		expect(timeSavedPerExecutionInput).toBeVisible();
+		expect(timeSavedPerExecutionInput).toBeDisabled();
+	});
+
+	it('should disable save time saved per execution if user has no permission to update workflow', async () => {
+		workflowsStore.getWorkflowById.mockImplementation(() => ({
+			id: '1',
+			name: 'Test Workflow',
+			active: true,
+			nodes: [],
+			connections: {},
+			createdAt: 1,
+			updatedAt: 1,
+			versionId: '123',
+			scopes: ['workflow:read'],
+		}));
+
+		const { getByTestId } = createComponent({ pinia });
+		await nextTick();
+
+		const timeSavedPerExecutionInput = getByTestId('workflow-settings-time-saved-per-execution');
+
+		expect(timeSavedPerExecutionInput).toBeVisible();
+		expect(timeSavedPerExecutionInput).toBeDisabled();
+	});
 });

packages/frontend/editor-ui/src/components/WorkflowSettings.vue

@@ -378,6 +378,11 @@ const toggleTimeout = () => {
 	workflowSettings.value.executionTimeout = workflowSettings.value.executionTimeout === -1 ? 0 : -1;
 };
 
+const updateTimeSavedPerExecution = (value: string) => {
+	const numValue = parseInt(value, 10);
+	workflowSettings.value.timeSavedPerExecution = isNaN(numValue) ? undefined : numValue;
+};
+
 onMounted(async () => {
 	executionTimeout.value = rootStore.executionTimeout;
 	maxExecutionTimeout.value = rootStore.maxExecutionTimeout;
@@ -484,7 +489,7 @@ onMounted(async () => {
 						{{ i18n.baseText('workflowSettings.executionOrder') + ':' }}
 					</el-col>
 					<el-col :span="14" class="ignore-key-press-canvas">
-						<n8n-select
+						<N8nSelect
 							v-model="workflowSettings.executionOrder"
 							placeholder="Select Execution Order"
 							size="medium"
@@ -493,29 +498,29 @@ onMounted(async () => {
 							:limit-popper-width="true"
 							data-test-id="workflow-settings-execution-order"
 						>
-							<n8n-option
+							<N8nOption
 								v-for="option in executionOrderOptions"
 								:key="option.key"
 								:label="option.value"
 								:value="option.key"
 							>
-							</n8n-option>
-						</n8n-select>
+							</N8nOption>
+						</N8nSelect>
 					</el-col>
 				</el-row>
 
 				<el-row data-test-id="error-workflow">
 					<el-col :span="10" class="setting-name">
 						{{ i18n.baseText('workflowSettings.errorWorkflow') + ':' }}
-						<n8n-tooltip placement="top">
+						<N8nTooltip placement="top">
 							<template #content>
 								<div v-n8n-html="helpTexts.errorWorkflow"></div>
 							</template>
 							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
+						</N8nTooltip>
 					</el-col>
 					<el-col :span="14" class="ignore-key-press-canvas">
-						<n8n-select
+						<N8nSelect
 							v-model="workflowSettings.errorWorkflow"
 							placeholder="Select Workflow"
 							filterable
@@ -523,58 +528,58 @@ onMounted(async () => {
 							:limit-popper-width="true"
 							data-test-id="workflow-settings-error-workflow"
 						>
-							<n8n-option
+							<N8nOption
 								v-for="item in workflows"
 								:key="item.id"
 								:label="item.name"
 								:value="item.id"
 							>
-							</n8n-option>
-						</n8n-select>
+							</N8nOption>
+						</N8nSelect>
 					</el-col>
 				</el-row>
 				<div v-if="isSharingEnabled" data-test-id="workflow-caller-policy">
 					<el-row>
 						<el-col :span="10" class="setting-name">
 							{{ i18n.baseText('workflowSettings.callerPolicy') + ':' }}
-							<n8n-tooltip placement="top">
+							<N8nTooltip placement="top">
 								<template #content>
 									<div v-text="helpTexts.workflowCallerPolicy"></div>
 								</template>
 								<font-awesome-icon icon="question-circle" />
-							</n8n-tooltip>
+							</N8nTooltip>
 						</el-col>
 
 						<el-col :span="14" class="ignore-key-press-canvas">
-							<n8n-select
+							<N8nSelect
 								v-model="workflowSettings.callerPolicy"
 								:disabled="readOnlyEnv || !workflowPermissions.update"
 								:placeholder="i18n.baseText('workflowSettings.selectOption')"
 								filterable
 								:limit-popper-width="true"
 							>
-								<n8n-option
+								<N8nOption
 									v-for="option of workflowCallerPolicyOptions"
 									:key="option.key"
 									:label="option.value"
 									:value="option.key"
 								>
-								</n8n-option>
-							</n8n-select>
+								</N8nOption>
+							</N8nSelect>
 						</el-col>
 					</el-row>
 					<el-row v-if="workflowSettings.callerPolicy === 'workflowsFromAList'">
 						<el-col :span="10" class="setting-name">
 							{{ i18n.baseText('workflowSettings.callerIds') + ':' }}
-							<n8n-tooltip placement="top">
+							<N8nTooltip placement="top">
 								<template #content>
 									<div v-text="helpTexts.workflowCallerIds"></div>
 								</template>
 								<font-awesome-icon icon="question-circle" />
-							</n8n-tooltip>
+							</N8nTooltip>
 						</el-col>
 						<el-col :span="14">
-							<n8n-input
+							<N8nInput
 								v-model="workflowSettings.callerIds"
 								:disabled="readOnlyEnv || !workflowPermissions.update"
 								:placeholder="i18n.baseText('workflowSettings.callerIds.placeholder')"
@@ -588,15 +593,15 @@ onMounted(async () => {
 				<el-row>
 					<el-col :span="10" class="setting-name">
 						{{ i18n.baseText('workflowSettings.timezone') + ':' }}
-						<n8n-tooltip placement="top">
+						<N8nTooltip placement="top">
 							<template #content>
 								<div v-text="helpTexts.timezone"></div>
 							</template>
 							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
+						</N8nTooltip>
 					</el-col>
 					<el-col :span="14" class="ignore-key-press-canvas">
-						<n8n-select
+						<N8nSelect
 							v-model="workflowSettings.timezone"
 							placeholder="Select Timezone"
 							filterable
@@ -604,28 +609,28 @@ onMounted(async () => {
 							:limit-popper-width="true"
 							data-test-id="workflow-settings-timezone"
 						>
-							<n8n-option
+							<N8nOption
 								v-for="timezone of timezones"
 								:key="timezone.key"
 								:label="timezone.value"
 								:value="timezone.key"
 							>
-							</n8n-option>
-						</n8n-select>
+							</N8nOption>
+						</N8nSelect>
 					</el-col>
 				</el-row>
 				<el-row>
 					<el-col :span="10" class="setting-name">
 						{{ i18n.baseText('workflowSettings.saveDataErrorExecution') + ':' }}
-						<n8n-tooltip placement="top">
+						<N8nTooltip placement="top">
 							<template #content>
 								<div v-text="helpTexts.saveDataErrorExecution"></div>
 							</template>
 							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
+						</N8nTooltip>
 					</el-col>
 					<el-col :span="14" class="ignore-key-press-canvas">
-						<n8n-select
+						<N8nSelect
 							v-model="workflowSettings.saveDataErrorExecution"
 							:placeholder="i18n.baseText('workflowSettings.selectOption')"
 							filterable
@@ -633,28 +638,28 @@ onMounted(async () => {
 							:limit-popper-width="true"
 							data-test-id="workflow-settings-save-failed-executions"
 						>
-							<n8n-option
+							<N8nOption
 								v-for="option of saveDataErrorExecutionOptions"
 								:key="option.key"
 								:label="option.value"
 								:value="option.key"
 							>
-							</n8n-option>
-						</n8n-select>
+							</N8nOption>
+						</N8nSelect>
 					</el-col>
 				</el-row>
 				<el-row>
 					<el-col :span="10" class="setting-name">
 						{{ i18n.baseText('workflowSettings.saveDataSuccessExecution') + ':' }}
-						<n8n-tooltip placement="top">
+						<N8nTooltip placement="top">
 							<template #content>
 								<div v-text="helpTexts.saveDataSuccessExecution"></div>
 							</template>
 							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
+						</N8nTooltip>
 					</el-col>
 					<el-col :span="14" class="ignore-key-press-canvas">
-						<n8n-select
+						<N8nSelect
 							v-model="workflowSettings.saveDataSuccessExecution"
 							:placeholder="i18n.baseText('workflowSettings.selectOption')"
 							filterable
@@ -662,28 +667,28 @@ onMounted(async () => {
 							:limit-popper-width="true"
 							data-test-id="workflow-settings-save-success-executions"
 						>
-							<n8n-option
+							<N8nOption
 								v-for="option of saveDataSuccessExecutionOptions"
 								:key="option.key"
 								:label="option.value"
 								:value="option.key"
 							>
-							</n8n-option>
-						</n8n-select>
+							</N8nOption>
+						</N8nSelect>
 					</el-col>
 				</el-row>
 				<el-row>
 					<el-col :span="10" class="setting-name">
 						{{ i18n.baseText('workflowSettings.saveManualExecutions') + ':' }}
-						<n8n-tooltip placement="top">
+						<N8nTooltip placement="top">
 							<template #content>
 								<div v-text="helpTexts.saveManualExecutions"></div>
 							</template>
 							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
+						</N8nTooltip>
 					</el-col>
 					<el-col :span="14" class="ignore-key-press-canvas">
-						<n8n-select
+						<N8nSelect
 							v-model="workflowSettings.saveManualExecutions"
 							:placeholder="i18n.baseText('workflowSettings.selectOption')"
 							filterable
@@ -691,28 +696,28 @@ onMounted(async () => {
 							:limit-popper-width="true"
 							data-test-id="workflow-settings-save-manual-executions"
 						>
-							<n8n-option
+							<N8nOption
 								v-for="option of saveManualOptions"
 								:key="option.key"
 								:label="option.value"
 								:value="option.key"
 							>
-							</n8n-option>
-						</n8n-select>
+							</N8nOption>
+						</N8nSelect>
 					</el-col>
 				</el-row>
 				<el-row>
 					<el-col :span="10" class="setting-name">
 						{{ i18n.baseText('workflowSettings.saveExecutionProgress') + ':' }}
-						<n8n-tooltip placement="top">
+						<N8nTooltip placement="top">
 							<template #content>
 								<div v-text="helpTexts.saveExecutionProgress"></div>
 							</template>
 							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
+						</N8nTooltip>
 					</el-col>
 					<el-col :span="14" class="ignore-key-press-canvas">
-						<n8n-select
+						<N8nSelect
 							v-model="workflowSettings.saveExecutionProgress"
 							:placeholder="i18n.baseText('workflowSettings.selectOption')"
 							filterable
@@ -720,25 +725,25 @@ onMounted(async () => {
 							:limit-popper-width="true"
 							data-test-id="workflow-settings-save-execution-progress"
 						>
-							<n8n-option
+							<N8nOption
 								v-for="option of saveExecutionProgressOptions"
 								:key="option.key"
 								:label="option.value"
 								:value="option.key"
 							>
-							</n8n-option>
-						</n8n-select>
+							</N8nOption>
+						</N8nSelect>
 					</el-col>
 				</el-row>
 				<el-row>
 					<el-col :span="10" class="setting-name">
 						{{ i18n.baseText('workflowSettings.timeoutWorkflow') + ':' }}
-						<n8n-tooltip placement="top">
+						<N8nTooltip placement="top">
 							<template #content>
 								<div v-text="helpTexts.executionTimeoutToggle"></div>
 							</template>
 							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
+						</N8nTooltip>
 					</el-col>
 					<el-col :span="14">
 						<div>
@@ -760,25 +765,25 @@ onMounted(async () => {
 					<el-row>
 						<el-col :span="10" class="setting-name">
 							{{ i18n.baseText('workflowSettings.timeoutAfter') + ':' }}
-							<n8n-tooltip placement="top">
+							<N8nTooltip placement="top">
 								<template #content>
 									<div v-text="helpTexts.executionTimeout"></div>
 								</template>
 								<font-awesome-icon icon="question-circle" />
-							</n8n-tooltip>
+							</N8nTooltip>
 						</el-col>
 						<el-col :span="4">
-							<n8n-input
+							<N8nInput
 								:disabled="readOnlyEnv || !workflowPermissions.update"
 								:model-value="timeoutHMS.hours"
 								:min="0"
 								@update:model-value="(value: string) => setTheTimeout('hours', value)"
 							>
 								<template #append>{{ i18n.baseText('workflowSettings.hours') }}</template>
-							</n8n-input>
+							</N8nInput>
 						</el-col>
 						<el-col :span="4" class="timeout-input">
-							<n8n-input
+							<N8nInput
 								:disabled="readOnlyEnv || !workflowPermissions.update"
 								:model-value="timeoutHMS.minutes"
 								:min="0"
@@ -786,10 +791,10 @@ onMounted(async () => {
 								@update:model-value="(value: string) => setTheTimeout('minutes', value)"
 							>
 								<template #append>{{ i18n.baseText('workflowSettings.minutes') }}</template>
-							</n8n-input>
+							</N8nInput>
 						</el-col>
 						<el-col :span="4" class="timeout-input">
-							<n8n-input
+							<N8nInput
 								:disabled="readOnlyEnv || !workflowPermissions.update"
 								:model-value="timeoutHMS.seconds"
 								:min="0"
@@ -797,15 +802,41 @@ onMounted(async () => {
 								@update:model-value="(value: string) => setTheTimeout('seconds', value)"
 							>
 								<template #append>{{ i18n.baseText('workflowSettings.seconds') }}</template>
-							</n8n-input>
+							</N8nInput>
 						</el-col>
 					</el-row>
 				</div>
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						<label for="timeSavedPerExecution">
+							{{ i18n.baseText('workflowSettings.timeSavedPerExecution') + ':' }}
+							<N8nTooltip placement="top">
+								<template #content>
+									{{ i18n.baseText('workflowSettings.timeSavedPerExecution.tooltip') }}
+								</template>
+								<font-awesome-icon icon="question-circle" />
+							</N8nTooltip>
+						</label>
+					</el-col>
+					<el-col :span="14">
+						<div class="time-saved">
+							<N8nInput
+								id="timeSavedPerExecution"
+								v-model="workflowSettings.timeSavedPerExecution"
+								:disabled="readOnlyEnv || !workflowPermissions.update"
+								data-test-id="workflow-settings-time-saved-per-execution"
+								type="number"
+								@update:model-value="updateTimeSavedPerExecution"
+							/>
+							<span>{{ i18n.baseText('workflowSettings.timeSavedPerExecution.hint') }}</span>
+						</div>
+					</el-col>
+				</el-row>
 			</div>
 		</template>
 		<template #footer>
 			<div class="action-buttons" data-test-id="workflow-settings-save-button">
-				<n8n-button
+				<N8nButton
 					:disabled="readOnlyEnv || !workflowPermissions.update"
 					:label="i18n.baseText('workflowSettings.save')"
 					size="large"
@@ -844,4 +875,17 @@ onMounted(async () => {
 .timeout-input {
 	margin-left: 5px;
 }
+
+.time-saved {
+	display: flex;
+	align-items: center;
+
+	:deep(.el-input) {
+		width: 64px;
+	}
+
+	span {
+		margin-left: var(--spacing-2xs);
+	}
+}
 </style>

packages/frontend/editor-ui/src/plugins/i18n/locales/en.json

@@ -2375,6 +2375,9 @@
 	"workflowSettings.timeoutAfter": "Timeout After",
 	"workflowSettings.timeoutWorkflow": "Timeout Workflow",
 	"workflowSettings.timezone": "Timezone",
+	"workflowSettings.timeSavedPerExecution": "Estimated time saved",
+	"workflowSettings.timeSavedPerExecution.hint": "Minutes per production execution",
+	"workflowSettings.timeSavedPerExecution.tooltip": "Total time savings are summarised in the Overview page.",
 	"workflowHistory.title": "Version History",
 	"workflowHistory.content.title": "Version",
 	"workflowHistory.content.editedBy": "Edited by",