chore: Move router usage out of useCanvasOperation and useWorkflowHelpers (no-changelog) (#16041)

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

@@ -5,7 +5,7 @@ import LogsPanel from '@/components/CanvasChat/future/LogsPanel.vue';
 import { useSettingsStore } from '@/stores/settings.store';
 import { createTestingPinia, type TestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
-import { createRouter, createWebHistory, useRouter } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { h, nextTick } from 'vue';
 import {
@@ -281,8 +281,7 @@ describe('LogsPanel', () => {
 	});
 
 	it('should still show logs for a removed node', async () => {
-		const router = useRouter();
-		const operations = useCanvasOperations({ router });
+		const operations = useCanvasOperations();
 
 		logsStore.toggleOpen(true);
 		workflowsStore.setWorkflow(deepCopy(aiChatWorkflow));

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

@@ -13,6 +13,7 @@ import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 import { useRouter } from 'vue-router';
 import { useI18n } from '@n8n/i18n';
 import { useTelemetry } from '@/composables/useTelemetry';
+import { useWorkflowSaving } from '@/composables/useWorkflowSaving';
 
 const props = defineProps<{
 	modalName: string;
@@ -27,7 +28,8 @@ const props = defineProps<{
 }>();
 
 const router = useRouter();
-const workflowHelpers = useWorkflowHelpers({ router });
+const workflowSaving = useWorkflowSaving({ router });
+const workflowHelpers = useWorkflowHelpers();
 const { showMessage, showError } = useToast();
 const i18n = useI18n();
 const telemetry = useTelemetry();
@@ -103,7 +105,7 @@ const save = async (): Promise<void> => {
 			);
 		}
 
-		const saved = await workflowHelpers.saveAsNewWorkflow({
+		const saved = await workflowSaving.saveAsNewWorkflow({
 			name: workflowName,
 			data: workflowToUpdate,
 			tags: currentTagIds.value,

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

@@ -59,6 +59,7 @@ import { useFoldersStore } from '@/stores/folders.store';
 import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
 import { type BaseTextKey, useI18n } from '@n8n/i18n';
 import { ProjectTypes } from '@/types/projects.types';
+import { useWorkflowSaving } from '@/composables/useWorkflowSaving';
 
 const props = defineProps<{
 	readOnly?: boolean;
@@ -95,7 +96,8 @@ const telemetry = useTelemetry();
 const message = useMessage();
 const toast = useToast();
 const documentTitle = useDocumentTitle();
-const workflowHelpers = useWorkflowHelpers({ router });
+const workflowSaving = useWorkflowSaving({ router });
+const workflowHelpers = useWorkflowHelpers();
 const pageRedirectionHelper = usePageRedirectionHelper();
 
 const isTagsEditEnabled = ref(false);
@@ -290,7 +292,7 @@ async function onSaveButtonClick() {
 	const name = props.name;
 	const tags = props.tags as string[];
 
-	const saved = await workflowHelpers.saveCurrentWorkflow({
+	const saved = await workflowSaving.saveCurrentWorkflow({
 		id,
 		name,
 		tags,
@@ -347,7 +349,7 @@ async function onTagsBlur() {
 	}
 	tagsSaving.value = true;
 
-	const saved = await workflowHelpers.saveCurrentWorkflow({ tags });
+	const saved = await workflowSaving.saveCurrentWorkflow({ tags });
 	telemetry.track('User edited workflow tags', {
 		workflow_id: props.id,
 		new_tag_count: tags.length,
@@ -390,7 +392,7 @@ async function onNameSubmit(name: string) {
 
 	uiStore.addActiveAction('workflowSaving');
 	const id = getWorkflowId();
-	const saved = await workflowHelpers.saveCurrentWorkflow({ name });
+	const saved = await workflowSaving.saveCurrentWorkflow({ name });
 	if (saved) {
 		showCreateWorkflowSuccessToast(id);
 		workflowHelpers.setDocumentTitle(newName, 'IDLE');

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

@@ -10,7 +10,6 @@ import {
 } from '@/constants';
 import { useClipboard } from '@/composables/useClipboard';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
-import { useRouter } from 'vue-router';
 import type { INodeUi } from '@/Interface';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from '@n8n/i18n';
@@ -21,9 +20,8 @@ const props = defineProps<{
 	nodeTypeDescription: INodeTypeDescription | null;
 }>();
 
-const router = useRouter();
 const clipboard = useClipboard();
-const workflowHelpers = useWorkflowHelpers({ router });
+const workflowHelpers = useWorkflowHelpers();
 const toast = useToast();
 const i18n = useI18n();
 const telemetry = useTelemetry();

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

@@ -64,7 +64,6 @@ import { isCredentialOnlyNodeType } from '@/utils/credentialOnlyNodes';
 import { N8nIcon, N8nInput, N8nInputNumber, N8nOption, N8nSelect } from '@n8n/design-system';
 import type { EventBus } from '@n8n/utils/event-bus';
 import { createEventBus } from '@n8n/utils/event-bus';
-import { useRouter } from 'vue-router';
 import { useElementSize } from '@vueuse/core';
 import { captureMessage } from '@sentry/vue';
 import { completeExpressionSyntax, shouldConvertToExpression } from '@/utils/expressions';
@@ -124,8 +123,7 @@ const externalHooks = useExternalHooks();
 const i18n = useI18n();
 const nodeHelpers = useNodeHelpers();
 const { debounce } = useDebounce();
-const router = useRouter();
-const workflowHelpers = useWorkflowHelpers({ router });
+const workflowHelpers = useWorkflowHelpers();
 const telemetry = useTelemetry();
 
 const credentialsStore = useCredentialsStore();

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

@@ -39,7 +39,6 @@ import { computedWithControl } from '@vueuse/core';
 import get from 'lodash/get';
 import set from 'lodash/set';
 import { N8nIcon, N8nIconButton, N8nInputLabel, N8nNotice, N8nText } from '@n8n/design-system';
-import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 
 const LazyFixedCollectionParameter = defineAsyncComponent(
@@ -75,8 +74,7 @@ const ndvStore = useNDVStore();
 
 const nodeHelpers = useNodeHelpers();
 const asyncLoadingError = ref(false);
-const router = useRouter();
-const workflowHelpers = useWorkflowHelpers({ router });
+const workflowHelpers = useWorkflowHelpers();
 const i18n = useI18n();
 
 const { activeNode } = storeToRefs(ndvStore);

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

@@ -43,7 +43,6 @@ import {
 	useCssModule,
 	watch,
 } from 'vue';
-import { useRouter } from 'vue-router';
 import ResourceLocatorDropdown from './ResourceLocatorDropdown.vue';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { onClickOutside, type VueInstance } from '@vueuse/core';
@@ -124,8 +123,7 @@ const emit = defineEmits<{
 	modalOpenerClick: [];
 }>();
 
-const router = useRouter();
-const workflowHelpers = useWorkflowHelpers({ router });
+const workflowHelpers = useWorkflowHelpers();
 const { callDebounced } = useDebounce();
 const i18n = useI18n();
 const telemetry = useTelemetry();

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

@@ -8,7 +8,6 @@ import { renderComponent } from '@/__tests__/render';
 import { waitFor } from '@testing-library/vue';
 import { userEvent } from '@testing-library/user-event';
 import { setActivePinia } from 'pinia';
-import { useRouter } from 'vue-router';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import type { INodeUi } from '@/Interface';
 
@@ -40,7 +39,7 @@ const nodes = [
 const mockResolveExpression = () => {
 	const mock = vi.fn();
 	vi.spyOn(workflowHelpers, 'useWorkflowHelpers').mockReturnValueOnce({
-		...workflowHelpers.useWorkflowHelpers({ router: useRouter() }),
+		...workflowHelpers.useWorkflowHelpers(),
 		resolveExpression: mock,
 	});
 

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

@@ -45,7 +45,7 @@ const workflowsStore = useWorkflowsStore();
 const ndvStore = useNDVStore();
 
 const router = useRouter();
-const workflowHelpers = useWorkflowHelpers({ router });
+const workflowHelpers = useWorkflowHelpers();
 const i18n = useI18n();
 const telemetry = useTelemetry();
 

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

@@ -19,7 +19,6 @@ import { OPEN_AI_API_CREDENTIAL_TYPE } from 'n8n-workflow';
 import { useUIStore } from '@/stores/ui.store';
 
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
-import { useRouter } from 'vue-router';
 
 const props = defineProps<{
 	isArchived: boolean;
@@ -37,8 +36,7 @@ const workflowActivate = useWorkflowActivate();
 
 const uiStore = useUIStore();
 
-const router = useRouter();
-const workflowHelpers = useWorkflowHelpers({ router });
+const workflowHelpers = useWorkflowHelpers();
 
 const i18n = useI18n();
 const workflowsStore = useWorkflowsStore();

packages/frontend/editor-ui/src/components/canvas/composables/useNodeSettingsInCanvas.ts

@@ -3,7 +3,6 @@ import { useSettingsStore } from '@/stores/settings.store';
 import { useVueFlow } from '@vue-flow/core';
 import { useDebounce } from '@vueuse/core';
 import { computed, type ComputedRef } from 'vue';
-import { useRouter } from 'vue-router';
 
 export function useNodeSettingsInCanvas(): ComputedRef<number | undefined> {
 	const settingsStore = useSettingsStore();
@@ -15,8 +14,7 @@ export function useNodeSettingsInCanvas(): ComputedRef<number | undefined> {
 		return computed(() => undefined);
 	}
 
-	const router = useRouter();
-	const { editableWorkflow } = useCanvasOperations({ router });
+	const { editableWorkflow } = useCanvasOperations();
 	const viewFlow = useVueFlow({ id: editableWorkflow.value.id });
 	const zoom = computed(() => viewFlow.viewport.value.zoom);
 	const debouncedZoom = useDebounce(zoom, 100);

packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeTrigger.vue

@@ -39,7 +39,7 @@ const i18n = useI18n();
 const workflowsStore = useWorkflowsStore();
 const logsStore = useLogsStore();
 const { runEntireWorkflow } = useRunWorkflow({ router });
-const { startChat } = useCanvasOperations({ router });
+const { startChat } = useCanvasOperations();
 
 const isChatOpen = computed(() => logsStore.isOpen);
 const isExecuting = computed(() => workflowsStore.isWorkflowRunning);

packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionsInfoAccordion.vue

@@ -7,9 +7,9 @@ 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 { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
 import { useI18n } from '@n8n/i18n';
+import { useWorkflowSaving } from '@/composables/useWorkflowSaving';
 
 interface IWorkflowSaveSettings {
 	saveFailedExecutions: boolean;
@@ -28,7 +28,7 @@ const props = withDefaults(
 
 const i18n = useI18n();
 const router = useRouter();
-const workflowHelpers = useWorkflowHelpers({ router });
+const workflowSaving = useWorkflowSaving({ router });
 const locale = useI18n();
 
 const settingsStore = useSettingsStore();
@@ -177,7 +177,7 @@ async function onSaveWorkflowClick(): Promise<void> {
 	if (!currentId) {
 		return;
 	}
-	const saved = await workflowHelpers.saveCurrentWorkflow({
+	const saved = await workflowSaving.saveCurrentWorkflow({
 		id: currentId,
 		name: workflowName.value,
 		tags: currentWorkflowTagIds.value,