refactor(editor): Refactor workflowHelpers mixin to composable (no-ch…

…angelog) (#8600)

packages/editor-ui/src/components/AssignmentCollection/Assignment.vue

@@ -4,7 +4,7 @@ import InputTriple from '@/components/InputTriple/InputTriple.vue';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 import ParameterInputHint from '@/components/ParameterInputHint.vue';
 import ParameterIssues from '@/components/ParameterIssues.vue';
-import { resolveParameter } from '@/mixins/workflowHelpers';
+import { resolveParameter } from '@/composables/useWorkflowHelpers';
 import { isExpression } from '@/utils/expressions';
 import { isObject } from '@jsplumb/util';
 import type { AssignmentValue, INodeProperties } from 'n8n-workflow';

packages/editor-ui/src/components/AssignmentCollection/__tests__/AssignmentCollection.test.ts

@@ -3,7 +3,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { createTestingPinia } from '@pinia/testing';
 import userEvent from '@testing-library/user-event';
 import { fireEvent, within } from '@testing-library/vue';
-import * as workflowHelpers from '@/mixins/workflowHelpers';
+import * as workflowHelpers from '@/composables/useWorkflowHelpers';
 import AssignmentCollection from '../AssignmentCollection.vue';
 import { createPinia, setActivePinia } from 'pinia';
 

packages/editor-ui/src/components/AssignmentCollection/utils.ts

@@ -1,6 +1,6 @@
 import { isObject } from 'lodash-es';
 import type { AssignmentValue, IDataObject } from 'n8n-workflow';
-import { resolveParameter } from '@/mixins/workflowHelpers';
+import { resolveParameter } from '@/composables/useWorkflowHelpers';
 import { v4 as uuid } from 'uuid';
 
 export function nameFromExpression(expression: string): string {

packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue

@@ -63,7 +63,6 @@ import { python } from '@codemirror/lang-python';
 import type { CodeExecutionMode, CodeNodeEditorLanguage } from 'n8n-workflow';
 import { CODE_EXECUTION_MODES, CODE_LANGUAGES } from 'n8n-workflow';
 
-import { workflowHelpers } from '@/mixins/workflowHelpers'; // for json field completions
 import { ASK_AI_EXPERIMENT, CODE_NODE_TYPE } from '@/constants';
 import { codeNodeEditorEventBus } from '@/event-bus';
 import { useRootStore } from '@/stores/n8nRoot.store';
@@ -83,7 +82,7 @@ export default defineComponent({
 	components: {
 		AskAI,
 	},
-	mixins: [linterExtension, completerExtension, workflowHelpers],
+	mixins: [linterExtension, completerExtension],
 	props: {
 		aiButtonEnabled: {
 			type: Boolean,

packages/editor-ui/src/components/ContactPromptModal.vue

@@ -37,7 +37,6 @@ import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 import type { IN8nPromptResponse } from '@/Interface';
 import { VALID_EMAIL_REGEX } from '@/constants';
-import { workflowHelpers } from '@/mixins/workflowHelpers';
 import Modal from '@/components/Modal.vue';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
@@ -47,7 +46,6 @@ import { useToast } from '@/composables/useToast';
 export default defineComponent({
 	name: 'ContactPromptModal',
 	components: { Modal },
-	mixins: [workflowHelpers],
 	props: ['modalName'],
 	setup() {
 		return {

packages/editor-ui/src/components/DuplicateWorkflowDialog.vue

@@ -51,7 +51,6 @@
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 import { MAX_WORKFLOW_NAME_LENGTH, PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
-import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { useToast } from '@/composables/useToast';
 import TagsDropdown from '@/components/TagsDropdown.vue';
 import Modal from '@/components/Modal.vue';
@@ -63,15 +62,20 @@ import { getWorkflowPermissions } from '@/permissions';
 import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from 'n8n-design-system/utils';
 import { useCredentialsStore } from '@/stores/credentials.store';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { useRouter } from 'vue-router';
 
 export default defineComponent({
 	name: 'DuplicateWorkflow',
 	components: { TagsDropdown, Modal },
-	mixins: [workflowHelpers],
 	props: ['modalName', 'isActive', 'data'],
 	setup() {
+		const router = useRouter();
+		const workflowHelpers = useWorkflowHelpers(router);
+
 		return {
 			...useToast(),
+			workflowHelpers,
 		};
 	},
 	data() {
@@ -156,13 +160,13 @@ export default defineComponent({
 						await this.workflowsStore.fetchWorkflow(this.data.id);
 					workflowToUpdate = workflow;
 
-					this.removeForeignCredentialsFromWorkflow(
+					this.workflowHelpers.removeForeignCredentialsFromWorkflow(
 						workflowToUpdate,
 						this.credentialsStore.allCredentials,
 					);
 				}
 
-				const saved = await this.saveAsNewWorkflow({
+				const saved = await this.workflowHelpers.saveAsNewWorkflow({
 					name,
 					data: workflowToUpdate,
 					tags: this.currentTagIds,

packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue

@@ -45,7 +45,8 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { PLACEHOLDER_EMPTY_WORKFLOW_ID, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
 import type { IWorkflowSettings } from 'n8n-workflow';
 import { deepCopy } from 'n8n-workflow';
-import { workflowHelpers } from '@/mixins/workflowHelpers';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { useRouter } from 'vue-router';
 
 interface IWorkflowSaveSettings {
 	saveFailedExecutions: boolean;
@@ -55,13 +56,20 @@ interface IWorkflowSaveSettings {
 
 export default defineComponent({
 	name: 'ExecutionsInfoAccordion',
-	mixins: [workflowHelpers],
 	props: {
 		initiallyExpanded: {
 			type: Boolean,
 			default: false,
 		},
 	},
+	setup() {
+		const router = useRouter();
+		const workflowHelpers = useWorkflowHelpers(router);
+
+		return {
+			workflowHelpers,
+		};
+	},
 	data() {
 		return {
 			defaultValues: {
@@ -211,7 +219,7 @@ export default defineComponent({
 			} else if (this.$route.params.name && this.$route.params.name !== 'new') {
 				currentId = this.$route.params.name;
 			}
-			const saved = await this.saveCurrentWorkflow({
+			const saved = await this.workflowHelpers.saveCurrentWorkflow({
 				id: currentId,
 				name: this.workflowName,
 				tags: this.currentWorkflowTagIds,

packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue

@@ -55,12 +55,11 @@ import { NodeHelpers } from 'n8n-workflow';
 import { useMessage } from '@/composables/useMessage';
 import { useToast } from '@/composables/useToast';
 import { v4 as uuid } from 'uuid';
-import type { Route } from 'vue-router';
+import { useRouter, type Route } from 'vue-router';
 import { executionHelpers } from '@/mixins/executionsHelpers';
 import { range as _range } from 'lodash-es';
 import { NO_NETWORK_ERROR_CODE } from '@/utils/apiUtils';
 import { getNodeViewTab } from '@/utils/canvasUtils';
-import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
@@ -69,6 +68,7 @@ import { useTagsStore } from '@/stores/tags.store';
 import { executionFilterToQueryFilter } from '@/utils/executionUtils';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useDebounce } from '@/composables/useDebounce';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 
 // Number of execution pages that are fetched before temporary execution card is shown
 const MAX_LOADING_ATTEMPTS = 5;
@@ -80,13 +80,16 @@ export default defineComponent({
 	components: {
 		ExecutionsSidebar,
 	},
-	mixins: [executionHelpers, workflowHelpers],
+	mixins: [executionHelpers],
 	setup() {
 		const externalHooks = useExternalHooks();
+		const router = useRouter();
+		const workflowHelpers = useWorkflowHelpers(router);
 		const { callDebounced } = useDebounce();
 
 		return {
 			externalHooks,
+			workflowHelpers,
 			callDebounced,
 			...useToast(),
 			...useMessage(),
@@ -168,7 +171,7 @@ export default defineComponent({
 			);
 
 			if (confirmModal === MODAL_CONFIRM) {
-				const saved = await this.saveCurrentWorkflow({}, false);
+				const saved = await this.workflowHelpers.saveCurrentWorkflow({}, false);
 				if (saved) {
 					await this.settingsStore.fetchPromptsData();
 				}

packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue

@@ -8,7 +8,6 @@ import { EditorView, keymap } from '@codemirror/view';
 import { EditorState, Prec } from '@codemirror/state';
 import { history, redo, undo } from '@codemirror/commands';
 
-import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { expressionManager } from '@/mixins/expressionManager';
 import { completionManager } from '@/mixins/completionManager';
 import { expressionInputHandler } from '@/plugins/codemirror/inputHandlers/expression.inputHandler';
@@ -22,7 +21,7 @@ import type { IVariableItemSelected } from '@/Interface';
 
 export default defineComponent({
 	name: 'ExpressionEditorModalInput',
-	mixins: [expressionManager, completionManager, workflowHelpers],
+	mixins: [expressionManager, completionManager],
 	props: {
 		modelValue: {
 			type: String,

packages/editor-ui/src/components/FilterConditions/Condition.vue

@@ -4,7 +4,7 @@ import InputTriple from '@/components/InputTriple/InputTriple.vue';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 import ParameterIssues from '@/components/ParameterIssues.vue';
 import { useI18n } from '@/composables/useI18n';
-import { resolveParameter } from '@/mixins/workflowHelpers';
+import { resolveParameter } from '@/composables/useWorkflowHelpers';
 import { DateTime } from 'luxon';
 import {
 	FilterError,
@@ -240,7 +240,7 @@ const onBlur = (): void => {
 					@operatorChange="onOperatorChange"
 				></OperatorSelect>
 			</template>
-			<template #right="{ breakpoint }" v-if="!operator.singleValue">
+			<template v-if="!operator.singleValue" #right="{ breakpoint }">
 				<ParameterInputFull
 					:key="rightParameter.type"
 					display-options

packages/editor-ui/src/components/FilterConditions/FilterConditions.vue

@@ -21,7 +21,7 @@ import { useI18n } from '@/composables/useI18n';
 import { useDebounce } from '@/composables/useDebounce';
 import Condition from './Condition.vue';
 import CombinatorSelect from './CombinatorSelect.vue';
-import { resolveParameter } from '@/mixins/workflowHelpers';
+import { resolveParameter } from '@/composables/useWorkflowHelpers';
 import { v4 as uuid } from 'uuid';
 
 interface Props {

packages/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorInput.vue

@@ -12,7 +12,6 @@ import { history, redo, undo } from '@codemirror/commands';
 import { acceptCompletion, autocompletion, completionStatus } from '@codemirror/autocomplete';
 
 import { useNDVStore } from '@/stores/ndv.store';
-import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { expressionManager } from '@/mixins/expressionManager';
 import { highlighter } from '@/plugins/codemirror/resolvableHighlighter';
 import { expressionInputHandler } from '@/plugins/codemirror/inputHandlers/expression.inputHandler';
@@ -25,7 +24,7 @@ const editableConf = new Compartment();
 
 export default defineComponent({
 	name: 'InlineExpressionEditorInput',
-	mixins: [completionManager, expressionManager, workflowHelpers],
+	mixins: [completionManager, expressionManager],
 	props: {
 		modelValue: {
 			type: String,

packages/editor-ui/src/components/InputPanel.vue

@@ -174,7 +174,6 @@ import type {
 	Workflow,
 } from 'n8n-workflow';
 import RunData from './RunData.vue';
-import { workflowHelpers } from '@/mixins/workflowHelpers';
 import NodeExecuteButton from './NodeExecuteButton.vue';
 import WireMeUp from './WireMeUp.vue';
 import {
@@ -186,13 +185,13 @@ import {
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { useUIStore } from '@/stores/ui.store';
 
 type MappingMode = 'debugging' | 'mapping';
 
 export default defineComponent({
 	name: 'InputPanel',
 	components: { RunData, NodeExecuteButton, WireMeUp },
-	mixins: [workflowHelpers],
 	props: {
 		currentNodeName: {
 			type: String,
@@ -236,7 +235,7 @@ export default defineComponent({
 		};
 	},
 	computed: {
-		...mapStores(useNodeTypesStore, useNDVStore, useWorkflowsStore),
+		...mapStores(useNodeTypesStore, useNDVStore, useWorkflowsStore, useUIStore),
 		focusedMappableInput(): string {
 			return this.ndvStore.focusedMappableInput;
 		},

packages/editor-ui/src/components/MainHeader/MainHeader.vue

@@ -29,7 +29,6 @@ import {
 	VIEWS,
 } from '@/constants';
 import type { INodeUi, ITabBarItem } from '@/Interface';
-import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useUIStore } from '@/stores/ui.store';
@@ -40,13 +39,11 @@ export default defineComponent({
 		WorkflowDetails,
 		TabBar,
 	},
-	mixins: [pushConnection, workflowHelpers],
+	mixins: [pushConnection],
 	setup(props, ctx) {
 		return {
 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
 			...pushConnection.setup?.(props, ctx),
-			// eslint-disable-next-line @typescript-eslint/no-misused-promises
-			...workflowHelpers.setup?.(props, ctx),
 		};
 	},
 	data() {

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -158,7 +158,6 @@ import ShortenName from '@/components/ShortenName.vue';
 import TagsContainer from '@/components/TagsContainer.vue';
 import PushConnectionTracker from '@/components/PushConnectionTracker.vue';
 import WorkflowActivator from '@/components/WorkflowActivator.vue';
-import { workflowHelpers } from '@/mixins/workflowHelpers';
 import SaveButton from '@/components/SaveButton.vue';
 import TagsDropdown from '@/components/TagsDropdown.vue';
 import InlineTextEdit from '@/components/InlineTextEdit.vue';
@@ -185,6 +184,8 @@ import { createEventBus } from 'n8n-design-system/utils';
 import { nodeViewEventBus } from '@/event-bus';
 import { hasPermission } from '@/rbac/permissions';
 import { useCanvasStore } from '@/stores/canvas.store';
+import { useRouter } from 'vue-router';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 
 const hasChanged = (prev: string[], curr: string[]) => {
 	if (prev.length !== curr.length) {
@@ -208,15 +209,18 @@ export default defineComponent({
 		BreakpointsObserver,
 		CollaborationPane,
 	},
-	mixins: [workflowHelpers],
 	props: {
 		readOnly: {
 			type: Boolean,
 			default: false,
 		},
 	},
 	setup() {
+		const router = useRouter();
+		const workflowHelpers = useWorkflowHelpers(router);
+
 		return {
+			workflowHelpers,
 			...useTitleChange(),
 			...useToast(),
 			...useMessage(),
@@ -390,7 +394,7 @@ export default defineComponent({
 			} else if (this.$route.params.name && this.$route.params.name !== 'new') {
 				currentId = this.$route.params.name;
 			}
-			const saved = await this.saveCurrentWorkflow({
+			const saved = await this.workflowHelpers.saveCurrentWorkflow({
 				id: currentId,
 				name: this.workflowName,
 				tags: this.currentWorkflowTagIds,
@@ -443,7 +447,7 @@ export default defineComponent({
 			}
 			this.tagsSaving = true;
 
-			const saved = await this.saveCurrentWorkflow({ tags });
+			const saved = await this.workflowHelpers.saveCurrentWorkflow({ tags });
 			this.$telemetry.track('User edited workflow tags', {
 				workflow_id: this.currentWorkflowId,
 				new_tag_count: tags.length,
@@ -494,7 +498,7 @@ export default defineComponent({
 				return;
 			}
 
-			const saved = await this.saveCurrentWorkflow({ name });
+			const saved = await this.workflowHelpers.saveCurrentWorkflow({ name });
 			if (saved) {
 				this.isNameEditEnabled = false;
 			}
@@ -539,7 +543,7 @@ export default defineComponent({
 					break;
 				}
 				case WORKFLOW_MENU_ACTIONS.DOWNLOAD: {
-					const workflowData = await this.getWorkflowDataToSave();
+					const workflowData = await this.workflowHelpers.getWorkflowDataToSave();
 					const { tags, ...data } = workflowData;
 					const exportData: IWorkflowToShare = {
 						...data,