feat: Replace all Vue.set usages with direct assignment and spread operator (no-changelog)

cypress/e2e/12-canvas.cy.ts

@@ -29,7 +29,6 @@ describe('Canvas Node Manipulation and Navigation', () => {
 		WorkflowPage.actions.visit();
 	});
 
-
 	it('should add switch node and test connections', () => {
 		WorkflowPage.actions.addNodeToCanvas(SWITCH_NODE_NAME, true);
 
@@ -114,7 +113,7 @@ describe('Canvas Node Manipulation and Navigation', () => {
 		WorkflowPage.actions.zoomToFit();
 
 		cy.get('.plus-draggable-endpoint').filter(':visible').should('not.have.class', 'ep-success');
-		cy.get('.jtk-connector.success').should('have.length', 3);
+		cy.get('.jtk-connector.success').should('have.length', 4);
 		cy.get('.jtk-connector').should('have.length', 4);
 	});
 

cypress/e2e/14-mapping.cy.ts

@@ -16,12 +16,10 @@ describe('Data mapping', () => {
 	beforeEach(() => {
 		workflowPage.actions.visit();
 
-		cy.window().then(
-			(win) => {
-				// @ts-ignore
-				win.preventNodeViewBeforeUnload = true;
-			},
-		);
+		cy.window().then((win) => {
+			// @ts-ignore
+			win.preventNodeViewBeforeUnload = true;
+		});
 	});
 
 	it('maps expressions from table header', () => {
@@ -303,19 +301,28 @@ describe('Data mapping', () => {
 
 		ndv.getters.parameterInput('keepOnlySet').find('input[type="checkbox"]').should('exist');
 		ndv.getters.parameterInput('keepOnlySet').find('input[type="text"]').should('not.exist');
-		ndv.getters.inputDataContainer().should('exist').find('span').contains('count').realMouseDown().realMouseMove(100, 100);
+		ndv.getters
+			.inputDataContainer()
+			.should('exist')
+			.find('span')
+			.contains('count')
+			.realMouseDown()
+			.realMouseMove(100, 100);
 		cy.wait(50);
 
 		ndv.getters.parameterInput('keepOnlySet').find('input[type="checkbox"]').should('not.exist');
-		ndv.getters.parameterInput('keepOnlySet').find('input[type="text"]')
+		ndv.getters
+			.parameterInput('keepOnlySet')
+			.find('input[type="text"]')
 			.should('exist')
 			.invoke('css', 'border')
 			.then((border) => expect(border).to.include('dashed rgb(90, 76, 194)'));
 
-		ndv.getters.parameterInput('value').find('input[type="text"]')
-		.should('exist')
-		.invoke('css', 'border')
-		.then((border) => expect(border).to.include('dashed rgb(90, 76, 194)'));
+		ndv.getters
+			.parameterInput('value')
+			.find('input[type="text"]')
+			.should('exist')
+			.invoke('css', 'border')
+			.then((border) => expect(border).to.include('dashed rgb(90, 76, 194)'));
 	});
-
 });

cypress/pages/ndv.ts

@@ -13,14 +13,17 @@ export class NDV extends BasePage {
 		outputPanel: () => cy.getByTestId('output-panel'),
 		executingLoader: () => cy.getByTestId('ndv-executing'),
 		inputDataContainer: () => this.getters.inputPanel().findChildByTestId('ndv-data-container'),
-		inputDisplayMode: () => this.getters.inputPanel().findChildByTestId('ndv-run-data-display-mode').first(),
+		inputDisplayMode: () =>
+			this.getters.inputPanel().findChildByTestId('ndv-run-data-display-mode').first(),
 		outputDataContainer: () => this.getters.outputPanel().findChildByTestId('ndv-data-container'),
-		outputDisplayMode: () => this.getters.outputPanel().findChildByTestId('ndv-run-data-display-mode').first(),
+		outputDisplayMode: () =>
+			this.getters.outputPanel().findChildByTestId('ndv-run-data-display-mode').first(),
 		pinDataButton: () => cy.getByTestId('ndv-pin-data'),
 		editPinnedDataButton: () => cy.getByTestId('ndv-edit-pinned-data'),
 		pinnedDataEditor: () => this.getters.outputPanel().find('.cm-editor .cm-scroller'),
 		runDataPaneHeader: () => cy.getByTestId('run-data-pane-header'),
-		savePinnedDataButton: () => this.getters.runDataPaneHeader().find('button').filter(':visible').contains('Save'),
+		savePinnedDataButton: () =>
+			this.getters.runDataPaneHeader().find('button').filter(':visible').contains('Save'),
 		outputTableRows: () => this.getters.outputDataContainer().find('table tr'),
 		outputTableHeaders: () => this.getters.outputDataContainer().find('table thead th'),
 		outputTableRow: (row: number) => this.getters.outputTableRows().eq(row),
@@ -52,10 +55,13 @@ export class NDV extends BasePage {
 		outputBranches: () => this.getters.outputPanel().findChildByTestId('branches'),
 		inputBranches: () => this.getters.inputPanel().findChildByTestId('branches'),
 		resourceLocator: (paramName: string) => cy.getByTestId(`resource-locator-${paramName}`),
-		resourceLocatorInput: (paramName: string) => this.getters.resourceLocator(paramName).find('[data-test-id="rlc-input-container"]'),
-		resourceLocatorDropdown: (paramName: string) => this.getters.resourceLocator(paramName).find('[data-test-id="resource-locator-dropdown"]'),
+		resourceLocatorInput: (paramName: string) =>
+			this.getters.resourceLocator(paramName).find('[data-test-id="rlc-input-container"]'),
+		resourceLocatorDropdown: (paramName: string) =>
+			this.getters.resourceLocator(paramName).find('[data-test-id="resource-locator-dropdown"]'),
 		resourceLocatorErrorMessage: () => cy.getByTestId('rlc-error-container'),
-		resourceLocatorModeSelector: (paramName: string) => this.getters.resourceLocator(paramName).find('[data-test-id="rlc-mode-selector"]'),
+		resourceLocatorModeSelector: (paramName: string) =>
+			this.getters.resourceLocator(paramName).find('[data-test-id="rlc-mode-selector"]'),
 	};
 
 	actions = {
@@ -82,7 +88,9 @@ export class NDV extends BasePage {
 			this.getters.editPinnedDataButton().click();
 
 			this.getters.pinnedDataEditor().click();
-			this.getters.pinnedDataEditor().type(`{selectall}{backspace}${JSON.stringify(data).replace(new RegExp('{', 'g'), '{{}')}`);
+			this.getters
+				.pinnedDataEditor()
+				.type(`{selectall}{backspace}${JSON.stringify(data).replace(new RegExp('{', 'g'), '{{}')}`);
 
 			this.actions.savePinnedData();
 		},
@@ -131,15 +139,11 @@ export class NDV extends BasePage {
 		},
 		changeInputRunSelector: (runName: string) => {
 			this.getters.inputRunSelector().click();
-			cy.get('.el-select-dropdown:visible .el-select-dropdown__item')
-				.contains(runName)
-				.click();
+			cy.get('.el-select-dropdown:visible .el-select-dropdown__item').contains(runName).click();
 		},
 		changeOutputRunSelector: (runName: string) => {
 			this.getters.outputRunSelector().click();
-			cy.get('.el-select-dropdown:visible .el-select-dropdown__item')
-				.contains(runName)
-				.click();
+			cy.get('.el-select-dropdown:visible .el-select-dropdown__item').contains(runName).click();
 		},
 		toggleOutputRunLinking: () => {
 			this.getters.outputRunSelector().find('button').click();
@@ -159,7 +163,10 @@ export class NDV extends BasePage {
 			this.getters.resourceLocatorInput(paramName).type(value);
 		},
 		validateExpressionPreview: (paramName: string, value: string) => {
-			this.getters.parameterExpressionPreview(paramName).find('span').should('include.html', asEncodedHTML(value));
+			this.getters
+				.parameterExpressionPreview(paramName)
+				.find('span')
+				.should('include.html', asEncodedHTML(value));
 		},
 	};
 }
@@ -172,4 +179,3 @@ function asEncodedHTML(str: string): string {
 		.replace(/"/g, '"')
 		.replace(/ /g, ' ');
 }
-

packages/editor-ui/src/Interface.ts

@@ -975,13 +975,10 @@ export interface ITagsState {
 	fetchedUsageCount: boolean;
 }
 
-export type Modals =
-	| {
-			[key: string]: ModalState;
-	  }
-	| {
-			[CREDENTIAL_EDIT_MODAL_KEY]: NewCredentialsModal;
-	  };
+export type Modals = {
+	[CREDENTIAL_EDIT_MODAL_KEY]: NewCredentialsModal;
+	[key: string]: ModalState;
+};
 
 export type ModalState = {
 	open: boolean;

packages/editor-ui/src/components/CredentialEdit/AuthTypeSelector.vue

@@ -11,7 +11,6 @@ import {
 } from '@/utils';
 import type { INodeProperties, INodeTypeDescription, NodeParameterValue } from 'n8n-workflow';
 import { computed, onMounted, ref } from 'vue';
-import Vue from 'vue';
 
 export interface Props {
 	credentialType: Object;
@@ -27,7 +26,7 @@ const ndvStore = useNDVStore();
 const props = defineProps<Props>();
 
 const selected = ref('');
-const authRelatedFieldsValues = ref({} as { [key: string]: NodeParameterValue });
+const authRelatedFieldsValues = ref<{ [key: string]: NodeParameterValue }>({});
 
 onMounted(() => {
 	if (activeNodeType.value?.credentials) {
@@ -43,7 +42,10 @@ onMounted(() => {
 
 	// Populate default values of related fields
 	authRelatedFields.value.forEach((field) => {
-		Vue.set(authRelatedFieldsValues.value, field.name, field.default);
+		authRelatedFieldsValues.value = {
+			...authRelatedFieldsValues.value,
+			[field.name]: field.default as NodeParameterValue,
+		};
 	});
 });
 
@@ -102,7 +104,10 @@ function onAuthTypeChange(newType: string): void {
 }
 
 function valueChanged(data: IUpdateInformation): void {
-	Vue.set(authRelatedFieldsValues.value, data.name, data.value);
+	authRelatedFieldsValues.value = {
+		...authRelatedFieldsValues.value,
+		[data.name]: data.value as NodeParameterValue,
+	};
 }
 
 defineExpose({

packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue

@@ -264,7 +264,7 @@ export default defineComponent({
 			);
 		},
 		credentialTypeName(): string {
-			return (this.credentialType as ICredentialType).name;
+			return (this.credentialType as ICredentialType)?.name;
 		},
 		credentialOwnerName(): string {
 			return this.credentialsStore.getCredentialOwnerNameById(`${this.credentialId}`);

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

@@ -109,7 +109,6 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
 
@@ -234,12 +233,15 @@ export default defineComponent({
 			});
 
 			if (this.currentUser) {
-				Vue.set(this.credentialData, 'ownedBy', {
-					id: this.currentUser.id,
-					firstName: this.currentUser.firstName,
-					lastName: this.currentUser.lastName,
-					email: this.currentUser.email,
-				});
+				this.credentialData = {
+					...this.credentialData,
+					ownedBy: {
+						id: this.currentUser.id,
+						firstName: this.currentUser.firstName,
+						lastName: this.currentUser.lastName,
+						email: this.currentUser.email,
+					},
+				};
 			}
 		} else {
 			await this.loadCurrentCredential();
@@ -251,7 +253,10 @@ export default defineComponent({
 					!this.credentialData.hasOwnProperty(property.name) &&
 					!this.credentialType.__overwrittenProperties?.includes(property.name)
 				) {
-					Vue.set(this.credentialData, property.name, property.default as CredentialInformation);
+					this.credentialData = {
+						...this.credentialData,
+						[property.name]: property.default as CredentialInformation,
+					};
 				}
 			}
 		}
@@ -594,12 +599,18 @@ export default defineComponent({
 					);
 				}
 
-				this.credentialData = currentCredentials.data || {};
+				this.credentialData = (currentCredentials.data as ICredentialDataDecryptedObject) || {};
 				if (currentCredentials.sharedWith) {
-					Vue.set(this.credentialData, 'sharedWith', currentCredentials.sharedWith);
+					this.credentialData = {
+						...this.credentialData,
+						sharedWith: currentCredentials.sharedWith as IDataObject[],
+					};
 				}
 				if (currentCredentials.ownedBy) {
-					Vue.set(this.credentialData, 'ownedBy', currentCredentials.ownedBy);
+					this.credentialData = {
+						...this.credentialData,
+						ownedBy: currentCredentials.ownedBy as IDataObject[],
+					};
 				}
 
 				this.credentialName = currentCredentials.name;
@@ -650,7 +661,10 @@ export default defineComponent({
 			}
 		},
 		onChangeSharedWith(sharees: IDataObject[]) {
-			Vue.set(this.credentialData, 'sharedWith', sharees);
+			this.credentialData = {
+				...this.credentialData,
+				sharedWith: sharees,
+			};
 			this.hasUnsavedChanges = true;
 		},
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -997,7 +1011,11 @@ export default defineComponent({
 			const params =
 				'scrollbars=no,resizable=yes,status=no,titlebar=noe,location=no,toolbar=no,menubar=no,width=500,height=700';
 			const oauthPopup = window.open(url, 'OAuth2 Authorization', params);
-			Vue.set(this.credentialData, 'oauthTokenData', null);
+
+			this.credentialData = {
+				...this.credentialData,
+				oauthTokenData: null as unknown as CredentialInformation,
+			};
 
 			const receiveMessage = (event: MessageEvent) => {
 				// // TODO: Add check that it came from n8n
@@ -1009,7 +1027,11 @@ export default defineComponent({
 
 					// Set some kind of data that status changes.
 					// As data does not get displayed directly it does not matter what data.
-					Vue.set(this.credentialData, 'oauthTokenData', {});
+					this.credentialData = {
+						...this.credentialData,
+						oauthTokenData: {} as CredentialInformation,
+					};
+
 					this.credentialsStore.enableOAuthCredential(credential);
 
 					// Close the window
@@ -1061,7 +1083,10 @@ export default defineComponent({
 			}
 			for (const property of this.credentialType.properties) {
 				if (!this.credentialType.__overwrittenProperties?.includes(property.name)) {
-					Vue.set(this.credentialData, property.name, property.default as CredentialInformation);
+					this.credentialData = {
+						...this.credentialData,
+						[property.name]: property.default as CredentialInformation,
+					};
 				}
 			}
 		},