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

* refactor: replace all Vue.set usages with direct assignment and spread operator

* chore: fix linting issue

* fix: fix updateNodeAtIndex function

* fix: various post-refactoring fixes

* fix: refactor recently added Vue.set directive

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,
+					};
 				}
 			}
 		},