mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): Display Credential-Selector after Authentication Type-Selector (#3461)

Browse source 
* ⚡ Implemented automatic position detection for credential fields.

* ✨ Updating automatic credentials position logic (removing `getParameterResolveOrder`call and fixing input spacing).

* 🔨 Using crednetial fileds displayOptions to determine the position relative to authentication fields.

* 👌 Handling credentials position detection edge-cases (no node type, no credentials)
This commit is contained in:
Milorad FIlipović 2022-06-07 15:02:08 +02:00 committed by GitHub
parent ca92ff70d7
commit 59a59e0c5f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/editor-ui/src/components/NodeCredentials.vue
View file

@ -315,6 +315,10 @@ export default mixins(
<style lang="scss" module> <style lang="scss" module>
.container { .container {
margin-top: var(--spacing-xs); margin-top: var(--spacing-xs);
& > div:not(:first-child) {
margin-top: var(--spacing-xs);
}
} }
.warning { .warning {

29
packages/editor-ui/src/components/ParameterInputList.vue
View file

@ -88,6 +88,8 @@
import { import {
INodeParameters, INodeParameters,
INodeProperties, INodeProperties,
INodeType,
INodeTypeDescription,
NodeParameterValue, NodeParameterValue,
} from 'n8n-workflow'; } from 'n8n-workflow';
@ -101,7 +103,6 @@ import ParameterInputFull from '@/components/ParameterInputFull.vue';
import { get, set } from 'lodash'; import { get, set } from 'lodash';
import mixins from 'vue-typed-mixins'; import mixins from 'vue-typed-mixins';
import { WEBHOOK_NODE_TYPE } from '@/constants';
export default mixins( export default mixins(
genericHelpers, genericHelpers,
@ -131,12 +132,34 @@ export default mixins(
return this.$store.getters.activeNode; return this.$store.getters.activeNode;
}, },
indexToShowSlotAt (): number { indexToShowSlotAt (): number {
if (this.node.type === WEBHOOK_NODE_TYPE) return 1; let index = 0;
const credentialsDependencies = this.getCredentialsDependencies();
return 0; this.filteredParameters.forEach((prop, propIndex) => {
if (credentialsDependencies.has(prop.name)) {
index = propIndex + 1;
}
});
return index < this.filteredParameters.length ?
index : this.filteredParameters.length - 1;
}, },
}, },
methods: { methods: {
getCredentialsDependencies() {
const dependencies = new Set();
const nodeType = this.$store.getters.nodeType(this.node.type, this.node.typeVersion) as INodeTypeDescription | undefined;
// Get names of all fields that credentials rendering depends on (using displayOptions > show)
if(nodeType && nodeType.credentials) {
for(const cred of nodeType.credentials) {
if(cred.displayOptions && cred.displayOptions.show) {
Object.keys(cred.displayOptions.show).forEach(fieldName => dependencies.add(fieldName));
}
}
}
return dependencies;
},
multipleValues (parameter: INodeProperties): boolean { multipleValues (parameter: INodeProperties): boolean {
if (this.getArgument('multipleValues', parameter) === true) { if (this.getArgument('multipleValues', parameter) === true) {
return true; return true;