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/MultipleParameter.vue

@@ -8,16 +8,16 @@
 			color="text-dark"
 		/>
 
-		<div v-for="(value, index) in values" :key="index" class="duplicate-parameter-item" :class="parameter.type">
+		<div v-for="(value, index) in mutableValues" :key="index" class="duplicate-parameter-item" :class="parameter.type">
 			<div class="delete-item clickable" v-if="!isReadOnly">
 				<font-awesome-icon icon="trash" :title="$locale.baseText('multipleParameter.deleteItem')" @click="deleteItem(index)" />
 				<div v-if="sortable">
 					<font-awesome-icon v-if="index !== 0" icon="angle-up" class="clickable" :title="$locale.baseText('multipleParameter.moveUp')" @click="moveOptionUp(index)" />
-					<font-awesome-icon v-if="index !== (values.length -1)" icon="angle-down" class="clickable" :title="$locale.baseText('multipleParameter.moveDown')" @click="moveOptionDown(index)" />
+					<font-awesome-icon v-if="index !== (mutableValues.length - 1)" icon="angle-down" class="clickable" :title="$locale.baseText('multipleParameter.moveDown')" @click="moveOptionDown(index)" />
 				</div>
 			</div>
 			<div v-if="parameter.type === 'collection'">
-				<collection-parameter :parameter="parameter" :values="value" :nodeValues="nodeValues" :path="getPath(index)" :hideDelete="hideDelete" @valueChanged="valueChanged" />
+				<collection-parameter :parameter="parameter" :values="value" :nodeValues="nodeValues" :path="getPath(index)" :hideDelete="hideDelete" :isReadOnly="isReadOnly" @valueChanged="valueChanged" />
 			</div>
 			<div v-else>
 				<parameter-input-full class="duplicate-parameter-input-item" :parameter="parameter" :value="value" :displayOptions="true" :hideLabel="true" :path="getPath(index)" @valueChanged="valueChanged" inputSize="small" :isReadOnly="isReadOnly" />
@@ -25,7 +25,7 @@
 		</div>
 
 		<div class="add-item-wrapper">
-			<div v-if="values && Object.keys(values).length === 0 || isReadOnly" class="no-items-exist">
+			<div v-if="mutableValues && mutableValues.length === 0 || isReadOnly" class="no-items-exist">
 				<n8n-text size="small">{{ $locale.baseText('multipleParameter.currentlyNoItemsExist') }}</n8n-text>
 			</div>
 			<n8n-button v-if="!isReadOnly" type="tertiary" block @click="addItem()" :label="addButtonText" />
@@ -34,33 +34,60 @@
 </template>
 
 <script lang="ts">
+import Vue, { PropType } from "vue";
 import {
 	IUpdateInformation,
 } from '@/Interface';
-
+import { deepCopy, INodeParameters, INodeProperties } from "n8n-workflow";
 import CollectionParameter from '@/components/CollectionParameter.vue';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 
 import { get } from 'lodash';
 
-import { genericHelpers } from '@/components/mixins/genericHelpers';
-
-import mixins from 'vue-typed-mixins';
-import { deepCopy } from "n8n-workflow";
-
-export default mixins(genericHelpers)
-	.extend({
+export default Vue.extend({
 		name: 'MultipleParameter',
 		components: {
 			CollectionParameter,
 			ParameterInputFull,
 		},
-		props: [
-			'nodeValues', // NodeParameters
-			'parameter', // NodeProperties
-			'path', // string
-			'values', // NodeParameters[]
-		],
+		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: Array as PropType<INodeParameters[]>,
+				default: () => [],
+			},
+			isReadOnly: {
+				type: Boolean,
+				default: false,
+			},
+		},
+		data() {
+			return {
+				mutableValues: [] as INodeParameters[],
+			};
+		},
+		watch: {
+			values: {
+				handler(newValues: INodeParameters[]) {
+					this.mutableValues = deepCopy(newValues);
+				},
+				deep: true,
+			},
+		},
+		created(){
+			this.mutableValues = deepCopy(this.values);
+		},
 		computed: {
 			addButtonText (): string {
 				if (
@@ -73,22 +100,18 @@ export default mixins(genericHelpers)
 				return this.$locale.nodeText().multipleValueButtonText(this.parameter);
 			},
 			hideDelete (): boolean {
-				return this.parameter.options.length === 1;
+				return this.parameter.options?.length === 1;
 			},
-			sortable (): string {
-				return this.parameter.typeOptions && this.parameter.typeOptions.sortable;
+			sortable (): boolean {
+				return !!this.parameter.typeOptions?.sortable;
 			},
 		},
 		methods: {
 			addItem () {
 				const name = this.getPath();
-				let currentValue = get(this.nodeValues, name);
+				const currentValue = get(this.nodeValues, name, [] as INodeParameters[]);
 
-				if (currentValue === undefined) {
-					currentValue = [];
-				}
-
-				currentValue.push(deepCopy(this.parameter.default));
+				currentValue.push(deepCopy(this.parameter.default as INodeParameters));
 
 				const parameterData = {
 					name,
@@ -109,21 +132,21 @@ export default mixins(genericHelpers)
 				return this.path + (index !== undefined ? `[${index}]` : '');
 			},
 			moveOptionDown (index: number) {
-				this.values.splice(index + 1, 0, this.values.splice(index, 1)[0]);
+				this.mutableValues.splice(index + 1, 0, this.mutableValues.splice(index, 1)[0]);
 
 				const parameterData = {
 					name: this.path,
-					value: this.values,
+					value: this.mutableValues,
 				};
 
 				this.$emit('valueChanged', parameterData);
 			},
 			moveOptionUp (index: number) {
-				this.values.splice(index - 1, 0, this.values.splice(index, 1)[0]);
+				this.mutableValues.splice(index - 1, 0, this.mutableValues.splice(index, 1)[0]);
 
 				const parameterData = {
 					name: this.path,
-					value: this.values,
+					value: this.mutableValues,
 				};
 
 				this.$emit('valueChanged', parameterData);