feat(editor): add readonly state for nodes (#4299)

* fix(editor): add types to Node.vue component props

* fix(editor): some cleanup in NodeView

* fix(editor): fix some boolean usage

* feat(editor): check foreign credentials

* fix(editor): passing readOnly to inputs

* fix(editor): add types to component and solve property mutation

* fix(editor): add types to component and solve property mutation

* fix(editor): component property type

* fix(editor): component property type

* fix(editor): default prop values

* fix(editor): fix FixedCollectionParameter.vue

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

@@ -16,9 +16,9 @@
 				size="small"
 				color="text-dark"
 			/>
-			<div v-if="multipleValues === true">
+			<div v-if="multipleValues">
 				<div
-					v-for="(value, index) in values[property.name]"
+					v-for="(value, index) in mutableValues[property.name]"
 					:key="property.name + index"
 					class="parameter-item"
 				>
@@ -39,7 +39,7 @@
 									@click="moveOptionUp(property.name, index)"
 								/>
 								<font-awesome-icon
-									v-if="index !== (values[property.name].length - 1)"
+									v-if="index !== (mutableValues[property.name].length - 1)"
 									icon="angle-down"
 									class="clickable"
 									:title="$locale.baseText('fixedCollectionParameter.moveDown')"
@@ -52,6 +52,7 @@
 							:nodeValues="nodeValues"
 							:path="getPropertyPath(property.name, index)"
 							:hideDelete="true"
+							:isReadOnly="isReadOnly"
 							@valueChanged="valueChanged"
 						/>
 					</div>
@@ -71,6 +72,7 @@
 						:parameters="property.values"
 						:nodeValues="nodeValues"
 						:path="getPropertyPath(property.name)"
+						:isReadOnly="isReadOnly"
 						class="parameter-item"
 						@valueChanged="valueChanged"
 						:hideDelete="true"
@@ -108,42 +110,66 @@
 </template>
 
 <script lang="ts">
+import Vue, { Component, PropType } from "vue";
 import {
 	IUpdateInformation,
 } from '@/Interface';
 
 import {
-	deepCopy,
 	INodeParameters,
+	INodeProperties,
 	INodePropertyCollection,
 	NodeParameterValue,
+	deepCopy,
+	isINodePropertyCollectionList,
 } from 'n8n-workflow';
 
 import { get } from 'lodash';
 
-import { genericHelpers } from '@/components/mixins/genericHelpers';
-
-import mixins from 'vue-typed-mixins';
-import {Component} from "vue";
-
-export default mixins(genericHelpers)
-	.extend({
+export default Vue.extend({
 		name: 'FixedCollectionParameter',
-		props: [
-			'nodeValues', // INodeParameters
-			'parameter', // INodeProperties
-			'path', // string
-			'values', // INodeParameters
-		],
+	  props: {
+			nodeValues: {
+				type: Object as PropType<Record<string, INodeParameters[]>>,
+				required: true,
+			},
+			parameter: {
+				type: Object as PropType<INodeProperties>,
+				required: true,
+			},
+			path: {
+				type: String,
+				required: true,
+			},
+			values: {
+				type: Object as PropType<Record<string, INodeParameters[]>>,
+				default: () => ({}),
+			},
+			isReadOnly: {
+				type: Boolean,
+				default: false,
+			},
+		},
 		components: {
 			ParameterInputList: () => import('./ParameterInputList.vue') as Promise<Component>,
 		},
 		data() {
 			return {
 				selectedOption: undefined,
+				mutableValues: {} as Record<string, INodeParameters[]>,
 			};
 		},
-
+		watch: {
+			values: {
+				handler(newValues: Record<string, INodeParameters[]>) {
+					this.mutableValues = deepCopy(newValues);
+				},
+				deep: true,
+			},
+		},
+	  created(){
+			this.mutableValues = deepCopy(this.values);
+		},
 		computed: {
 			getPlaceholderText(): string {
 				const placeholder = this.$locale.nodeText().placeholder(this.parameter, this.path);
@@ -161,14 +187,11 @@ export default mixins(genericHelpers)
 				return returnProperties;
 			},
 			multipleValues(): boolean {
-				if (this.parameter.typeOptions !== undefined && this.parameter.typeOptions.multipleValues === true) {
-					return true;
-				}
-				return false;
+				return !!this.parameter.typeOptions?.multipleValues;
 			},
 
 			parameterOptions(): INodePropertyCollection[] {
-				if (this.multipleValues === true) {
+				if (this.multipleValues && isINodePropertyCollectionList(this.parameter.options)) {
 					return this.parameter.options;
 				}
 
@@ -177,18 +200,15 @@ export default mixins(genericHelpers)
 				});
 			},
 			propertyNames(): string[] {
-				if (this.values) {
-					return Object.keys(this.values);
-				}
-				return [];
+				return Object.keys(this.mutableValues || {});
 			},
-			sortable(): string {
-				return this.parameter.typeOptions && this.parameter.typeOptions.sortable;
+			sortable(): boolean {
+				return !!this.parameter.typeOptions?.sortable;
 			},
 		},
 		methods: {
 			deleteOption(optionName: string, index?: number) {
-				const currentOptionsOfSameType = this.values[optionName];
+				const currentOptionsOfSameType = this.mutableValues[optionName];
 				if (!currentOptionsOfSameType || currentOptionsOfSameType.length > 1) {
 					// it's not the only option of this type, so just remove it.
 					this.$emit('valueChanged', {
@@ -207,30 +227,35 @@ export default mixins(genericHelpers)
 				return `${this.path}.${name}` + (index !== undefined ? `[${index}]` : '');
 			},
 			getOptionProperties(optionName: string): INodePropertyCollection | undefined {
-				for (const option of this.parameter.options) {
-					if (option.name === optionName) {
-						return option;
+				if(isINodePropertyCollectionList(this.parameter.options)){
+					for (const option of this.parameter.options) {
+						if (option.name === optionName) {
+							return option;
+						}
 					}
 				}
-
 				return undefined;
 			},
 			moveOptionDown(optionName: string, index: number) {
-				this.values[optionName].splice(index + 1, 0, this.values[optionName].splice(index, 1)[0]);
+				if(Array.isArray(this.mutableValues[optionName])){
+					this.mutableValues[optionName].splice(index + 1, 0, this.mutableValues[optionName].splice(index, 1)[0]);
+				}
 
 				const parameterData = {
 					name: this.getPropertyPath(optionName),
-					value: this.values[optionName],
+					value: this.mutableValues[optionName],
 				};
 
 				this.$emit('valueChanged', parameterData);
 			},
 			moveOptionUp(optionName: string, index: number) {
-				this.values[optionName].splice(index - 1, 0, this.values[optionName].splice(index, 1)[0]);
+				if(Array.isArray(this.mutableValues[optionName])) {
+					this.mutableValues?.[optionName].splice(index - 1, 0, this.mutableValues[optionName].splice(index, 1)[0]);
+				}
 
 				const parameterData = {
 					name: this.getPropertyPath(optionName),
-					value: this.values[optionName],
+					value: this.mutableValues[optionName],
 				};
 
 				this.$emit('valueChanged', parameterData);
@@ -262,8 +287,8 @@ export default mixins(genericHelpers)
 				}
 
 				let newValue;
-				if (this.multipleValues === true) {
-					newValue = get(this.nodeValues, name, []);
+				if (this.multipleValues) {
+					newValue = get(this.nodeValues, name, [] as INodeParameters[]);
 
 					newValue.push(newParameterValue);
 				} else {