🔀 Merge branch 'RicardoE105-feature/github-oauth' into oauth-support

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

@@ -34,11 +34,11 @@ import CredentialsInput from '@/components/CredentialsInput.vue';
 import {
 	ICredentialsCreatedEvent,
 	ICredentialsDecryptedResponse,
-	INodeProperties,
 } from '@/Interface';
 
 import {
 	ICredentialType,
+	INodeProperties,
 } from 'n8n-workflow';
 
 import mixins from 'vue-typed-mixins';
@@ -172,6 +172,42 @@ export default mixins(
 		},
 	},
 	methods: {
+		mergeCredentialProperties (mainProperties: INodeProperties[], addProperties: INodeProperties[]): void {
+			let existingIndex: number;
+			for (const property of addProperties) {
+				existingIndex = mainProperties.findIndex(element => element.name === property.name);
+
+				if (existingIndex === -1) {
+					// Property does not exist yet, so add
+					mainProperties.push(property);
+				} else {
+					// Property exists already, so overwrite
+					mainProperties[existingIndex] = property;
+				}
+			}
+		},
+		getCredentialProperties (name: string): INodeProperties[] {
+			const credentialsData = this.$store.getters.credentialType(name);
+
+			if (credentialsData === null) {
+				throw new Error(`Could not find credentials of type: ${name}`);
+			}
+
+			if (credentialsData.extends === undefined) {
+				return credentialsData.properties;
+			}
+
+			const combineProperties = [] as INodeProperties[];
+			for (const credentialsTypeName of credentialsData.extends) {
+				const mergeCredentialProperties = this.getCredentialProperties(credentialsTypeName);
+				this.mergeCredentialProperties(combineProperties, mergeCredentialProperties);
+			}
+
+			// The properties defined on the parent credentials take presidence
+			this.mergeCredentialProperties(combineProperties, credentialsData.properties);
+
+			return combineProperties;
+		},
 		getCredentialTypeData (name: string): ICredentialType | null {
 			let credentialData = this.$store.getters.credentialType(name);
 
@@ -179,25 +215,14 @@ export default mixins(
 				return credentialData;
 			}
 
+			// TODO: The credential-extend-resolve-logic is currently not needed in the backend
+			//       as the whole credential data gets saved with the defaults. That logic should,
+			//       however, probably also get improved in the future.
+
 			// Credentials extends another one. So get the properties of the one it
 			// extends and add them.
 			credentialData = JSON.parse(JSON.stringify(credentialData));
-			let existingIndex: number;
-			for (const credentialTypeName of credentialData.extends) {
-				const data = this.$store.getters.credentialType(credentialTypeName);
-
-				for (const property of data.properties) {
-					existingIndex = credentialData.properties.findIndex(element => element.name === property.name);
-
-					if (existingIndex === -1) {
-						// Property does not exist yet, so add
-						credentialData.properties.push(property);
-					} else {
-						// Property exists already, so overwrite
-						credentialData.properties[existingIndex] = property;
-					}
-				}
-			}
+			credentialData.properties = this.getCredentialProperties(credentialData.name);
 
 			return credentialData;
 		},

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

@@ -41,18 +41,21 @@
 				<font-awesome-icon icon="question-circle" />
 			</el-tooltip>
 		</div>
-		<el-row v-for="parameter in credentialProperties" :key="parameter.name" class="parameter-wrapper">
-			<el-col :span="6" class="parameter-name">
-				{{parameter.displayName}}:
-				<el-tooltip placement="top" class="parameter-info" v-if="parameter.description" effect="light">
-					<div slot="content" v-html="parameter.description"></div>
-					<font-awesome-icon icon="question-circle"/>
-				</el-tooltip>
-			</el-col>
-			<el-col :span="18">
-				<parameter-input :parameter="parameter" :value="propertyValue[parameter.name]" :path="parameter.name" :isCredential="true" @valueChanged="valueChanged" />
-			</el-col>
-		</el-row>
+		<div v-for="parameter in credentialProperties" :key="parameter.name">
+			<el-row v-if="displayNodeParameter(parameter)" class="parameter-wrapper">
+				<el-col :span="6" class="parameter-name">
+					{{parameter.displayName}}:
+					<el-tooltip placement="top" class="parameter-info" v-if="parameter.description" effect="light">
+						<div slot="content" v-html="parameter.description"></div>
+						<font-awesome-icon icon="question-circle"/>
+					</el-tooltip>
+				</el-col>
+				<el-col :span="18">
+					<parameter-input :parameter="parameter" :value="propertyValue[parameter.name]" :path="parameter.name" :isCredential="true" @valueChanged="valueChanged" />
+				</el-col>
+			</el-row>
+		</div>
+
 
 		<el-row class="nodes-access-wrapper">
 			<el-col :span="6" class="headline">
@@ -239,6 +242,13 @@ export default mixins(
 
 			return result;
 		},
+		displayNodeParameter (parameter: INodeProperties): boolean {
+			if (parameter.type === 'hidden') {
+				return false;
+			}
+
+			return true;
+		},
 		async oAuth2CredentialAuthorize () {
 			let url;