From 6bbd86d81f3f409a96d1e37f41c60afc6855cba1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Mon, 16 May 2022 17:30:24 +0200 Subject: [PATCH 01/45] :zap: Refactor into cred type param --- .../src/components/NodeCredentials.vue | 21 +- .../editor-ui/src/components/NodeSettings.vue | 42 +--- .../src/components/ParameterInput.vue | 180 +++++++++++++++++- .../nodes/HttpRequest/HttpRequest.node.ts | 18 +- packages/workflow/src/Interfaces.ts | 4 +- 5 files changed, 190 insertions(+), 75 deletions(-) diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue index f2b02f0988437..13e764378096e 100644 --- a/packages/editor-ui/src/components/NodeCredentials.vue +++ b/packages/editor-ui/src/components/NodeCredentials.vue @@ -87,6 +87,7 @@ export default mixins( name: 'NodeCredentials', props: [ 'node', // INodeUi + 'overrideCredType', // cred type ], data () { return { @@ -99,14 +100,6 @@ export default mixins( credentialOptions: 'allCredentialsByType', getCredentialTypeByName: 'getCredentialTypeByName', }), - isProxyAuth(): boolean { - return this.isHttpRequestNodeV2(this.node) && - this.node.parameters.authentication === 'existingCredentialType'; - }, - isGenericAuth(): boolean { - return this.isHttpRequestNodeV2(this.node) && - this.node.parameters.authentication === 'genericCredentialType'; - }, credentialTypesNode (): string[] { return this.credentialTypesNodeDescription .map((credentialTypeDescription) => credentialTypeDescription.name); @@ -120,17 +113,9 @@ export default mixins( credentialTypesNodeDescription (): INodeCredentialDescription[] { const node = this.node as INodeUi; - if (this.isGenericAuth) { - const { genericAuthType } = this.node.parameters as { genericAuthType: string }; - - return [this.getCredentialTypeByName(genericAuthType)]; - } - - if (this.isProxyAuth) { - const { nodeCredentialType } = this.node.parameters as { nodeCredentialType?: string }; + const credType = this.getCredentialTypeByName(this.overrideCredType); - if (nodeCredentialType) return [this.getCredentialTypeByName(nodeCredentialType)]; - } + if (credType) return [credType]; const activeNodeType = this.$store.getters.nodeType(node.type, node.typeVersion) as INodeTypeDescription | null; if (activeNodeType && activeNodeType.credentials) { diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue index 1605c6141f715..2dde9feb530cd 100644 --- a/packages/editor-ui/src/components/NodeSettings.vue +++ b/packages/editor-ui/src/components/NodeSettings.vue @@ -32,12 +32,8 @@ :hideDelete="true" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" > - @@ -330,28 +326,6 @@ export default mixins( }, }, methods: { - async prepareScopesNotice(credentialTypeName: string) { - if ( - !this.isHttpRequestNodeV2(this.node) || - !credentialTypeName || !credentialTypeName.endsWith('OAuth2Api') - ) { - this.activeCredential.scopes = []; - return; - } - - const { name, displayName } = this.getCredentialTypeByName(credentialTypeName); - - this.activeCredential.scopes = this.getScopesByCredentialType(name); - this.activeCredential.shortDisplayName = this.shortenCredentialDisplayName(displayName); - }, - shortenCredentialDisplayName (credentialDisplayName: string) { - const oauth1Api = this.$locale.baseText('nodeSettings.oauth1Api'); - const oauth2Api = this.$locale.baseText('nodeSettings.oauth2Api'); - - return credentialDisplayName - .replace(new RegExp(`${oauth1Api}|${oauth2Api}`), '') - .trim(); - }, onNodeExecute () { this.$emit('execute'); }, @@ -428,13 +402,6 @@ export default mixins( }); }, valueChanged (parameterData: IUpdateInformation) { - if ( - this.isHttpRequestNodeV2(this.node) && - parameterData.name === 'parameters.nodeCredentialType' - ) { - this.prepareScopesNotice(parameterData.value as string); - } - let newValue: NodeParameterValue; if (parameterData.hasOwnProperty('value')) { // New value is given @@ -614,13 +581,6 @@ export default mixins( mounted () { this.setNodeValues(); - if ( - this.isHttpRequestNodeV2(this.node) && - this.node.parameters.authentication === 'existingCredentialType' - ) { - this.prepareScopesNotice(this.node.parameters.nodeCredentialType as string); - } - if (this.eventBus) { (this.eventBus as Vue).$on('openSettings', () => { this.openPanel = 'settings'; diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index 63c53a263827f..adba8b0b5dba1 100644 --- a/packages/editor-ui/src/components/ParameterInput.vue +++ b/packages/editor-ui/src/components/ParameterInput.vue @@ -104,6 +104,50 @@ :placeholder="parameter.placeholder" /> +
+ + +
+
+ {{ credType.displayName }} +
+
+
+ + + + +
+ scope.replace(/\//g, '/'), + ).join('
'), + }, + }, + ); + }, + node (): INodeUi { + return this.$store.getters.activeNode; + }, areExpressionsDisabled(): boolean { return this.$store.getters['ui/areExpressionsDisabled']; }, @@ -334,9 +416,6 @@ export default mixins( return returnValues.join('|'); }, - node (): INodeUi | null { - return this.$store.getters.activeNode; - }, displayTitle (): string { const interpolation = { interpolate: { shortPath: this.shortPath } }; @@ -375,6 +454,13 @@ export default mixins( returnValue = this.expressionValueComputed; } + if (this.parameter.type === 'nodeCredentialType') { + const credType = this.$store.getters['credentials/getCredentialTypeByName'](this.value); + if (credType) { + returnValue = credType.displayName; + } + } + if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true && returnValue.charAt(0) === '#') { // Convert the value to rgba that el-color-picker can display it correctly const bigint = parseInt(returnValue.slice(1), 16); @@ -592,8 +678,88 @@ export default mixins( workflow (): Workflow { return this.getWorkflow(); }, + supportedCredentialTypes(): ICredentialType[] { + return this.allCredentialTypes.filter((c: ICredentialType) => this.supportsProxyAuth(c.name)); + }, }, methods: { + credentialSelected (updateInformation: INodeUpdatePropertiesInformation) { + // Update the values on the node + this.$store.commit('updateNodeProperties', updateInformation); + + const node = this.$store.getters.getNodeByName(updateInformation.name); + + // Update the issues + this.updateNodeCredentialIssues(node); + + this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation }); + }, + async prepareScopesNotice(credentialTypeName: string) { + const credType = this.getCredentialTypeByName(credentialTypeName); + + if (!credType) return; + + this.activeCredential.scopes = this.getScopesByCredentialType(credType.name); + this.activeCredential.shortDisplayName = this.shortenCredentialDisplayName(credType.displayName); + }, + shortenCredentialDisplayName (credentialDisplayName: string) { + const oauth1Api = this.$locale.baseText('nodeSettings.oauth1Api'); + const oauth2Api = this.$locale.baseText('nodeSettings.oauth2Api'); + + return credentialDisplayName + .replace(new RegExp(`${oauth1Api}|${oauth2Api}`), '') + .trim(); + }, + getSupportedCredentialTypes(credentialTypes: string[]) { + return credentialTypes.reduce<{ extends: string[]; has: string[] }>((acc, cur) => { + const _extends = cur.split('extends:'); + + if (_extends.length === 2) { + acc.extends.push(_extends[1]); + return acc; + } + + const _has = cur.split('has:'); + + if (_has.length === 2) { + acc.has.push(_has[1]); + return acc; + } + + return acc; + }, { extends: [], has: [] }); + }, + supportsProxyAuth(name: string): boolean { + if (this.parameter.type !== 'nodeCredentialType') return false; + + const supported = this.getSupportedCredentialTypes(this.parameter.credentialTypes); + + const credType = this.$store.getters['credentials/getCredentialTypeByName'](name); + + for (const property of supported.has) { + if (credType[property] !== undefined) return true; + } + + // @TODO: Consolidate two if-checks + + if ( + credType.extends && + credType.extends.some( + (parentType: string) => supported.extends.includes(parentType), + ) + ) { + return true; + } + + if (credType.extends) { + return credType.extends.reduce( + (acc: boolean, parentType: string) => acc || this.supportsProxyAuth(parentType), + false, + ); + } + + return false; + }, /** * Check whether a param value must be skipped when collecting node param issues for validation. */ @@ -752,6 +918,10 @@ export default mixins( this.$emit('textInput', parameterData); }, valueChanged (value: string[] | string | number | boolean | Date | null) { + if (this.parameter.name === 'nodeCredentialType') { + this.prepareScopesNotice(value as string); + } + if (value instanceof Date) { value = value.toISOString(); } @@ -805,6 +975,10 @@ export default mixins( this.nodeName = this.node.name; } + if (this.node.parameters.authentication === 'existingCredentialType') { + this.prepareScopesNotice(this.node.parameters.nodeCredentialType as string); + } + if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true && this.displayValue !== null && this.displayValue.toString().charAt(0) !== '#') { const newValue = this.rgbaToHex(this.displayValue as string); if (newValue !== null) { diff --git a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts index bc6a2436f45cd..481b2c4dfc9d0 100644 --- a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts +++ b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts @@ -253,13 +253,14 @@ export class HttpRequest implements INodeType { { displayName: 'Credential Type', name: 'nodeCredentialType', - type: 'options', + type: 'nodeCredentialType', required: true, - typeOptions: { - loadOptionsMethod: 'getNodeCredentialTypes', - }, default: '', - placeholder: 'None', + credentialTypes: [ + 'extends:oAuth2Api', + 'extends:oAuth1Api', + 'has:authenticate', + ], displayOptions: { show: { authentication: [ @@ -271,13 +272,6 @@ export class HttpRequest implements INodeType { }, }, }, - // @TODO expression not resolving, using Notion as example - // { - // displayName: 'Supports Proxy Auth', - // name: 'supportsProxyAuth', - // type: 'hidden', - // default: '={{ $parameter["&authentication"] === "existingCredentialType" }}', - // }, { displayName: 'Generic Auth Type', name: 'genericAuthType', diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts index b521bf5b2379d..ec733f93c421f 100644 --- a/packages/workflow/src/Interfaces.ts +++ b/packages/workflow/src/Interfaces.ts @@ -831,7 +831,8 @@ export type NodePropertyTypes = | 'multiOptions' | 'number' | 'options' - | 'string'; + | 'string' + | 'nodeCredentialType'; export type CodeAutocompleteTypes = 'function' | 'functionItem'; @@ -888,6 +889,7 @@ export interface INodeProperties { noDataExpression?: boolean; required?: boolean; routing?: INodePropertyRouting; + credentialTypes?: string[]; } export interface INodePropertyOptions { name: string; From 1cac8017f115eb0b74ed9329aba040a8c23d465c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Mon, 16 May 2022 17:42:38 +0200 Subject: [PATCH 02/45] :zap: Componentize scopes notice --- .../src/components/ParameterInput.vue | 33 ++--------- .../editor-ui/src/components/ScopesNotice.vue | 56 +++++++++++++++++++ 2 files changed, 61 insertions(+), 28 deletions(-) create mode 100644 packages/editor-ui/src/components/ScopesNotice.vue diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index adba8b0b5dba1..435fb005dacbd 100644 --- a/packages/editor-ui/src/components/ParameterInput.vue +++ b/packages/editor-ui/src/components/ParameterInput.vue @@ -136,10 +136,10 @@
- scope.replace(/\//g, '/'), - ).join('
'), - }, - }, - ); - }, node (): INodeUi { return this.$store.getters.activeNode; }, diff --git a/packages/editor-ui/src/components/ScopesNotice.vue b/packages/editor-ui/src/components/ScopesNotice.vue new file mode 100644 index 0000000000000..ca6de1c8e7132 --- /dev/null +++ b/packages/editor-ui/src/components/ScopesNotice.vue @@ -0,0 +1,56 @@ + + + + + From e3f8b7957154f60718981234d6cdd1f2b7c667dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Mon, 16 May 2022 18:00:00 +0200 Subject: [PATCH 03/45] :fire: Remove unused data --- packages/editor-ui/src/components/ScopesNotice.vue | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/editor-ui/src/components/ScopesNotice.vue b/packages/editor-ui/src/components/ScopesNotice.vue index ca6de1c8e7132..20f11a15bfb24 100644 --- a/packages/editor-ui/src/components/ScopesNotice.vue +++ b/packages/editor-ui/src/components/ScopesNotice.vue @@ -15,12 +15,6 @@ export default Vue.extend({ 'scopes', 'shortCredentialDisplayName', ], - data() { - return { - content: '', - fullContent: '', - }; - }, computed: { scopesShortContent (): string { return this.$locale.baseText( From 1baa913f47495bc7e97b7bb5c376bfea5305c223 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Mon, 16 May 2022 18:00:10 +0200 Subject: [PATCH 04/45] :fire: Remove unused `loadOptions` --- .../nodes/HttpRequest/HttpRequest.node.ts | 69 ------------------- 1 file changed, 69 deletions(-) diff --git a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts index 481b2c4dfc9d0..dcd9a08f3355e 100644 --- a/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts +++ b/packages/nodes-base/nodes/HttpRequest/HttpRequest.node.ts @@ -865,14 +865,6 @@ export class HttpRequest implements INodeType { ], }; - methods = { - loadOptions: { - getNodeCredentialTypes(this: ILoadOptionsFunctions): Promise { - return Promise.resolve(CREDENTIAL_TYPES); - }, - }, - }; - async execute(this: IExecuteFunctions): Promise { const items = this.getInputData(); @@ -1370,64 +1362,3 @@ export class HttpRequest implements INodeType { return this.prepareOutputData(returnItems); } } - -const NODES_BASE_ROOT: Readonly = path.resolve(__dirname, '..', '..', '..'); - -/** - * Credential types shown as options for `Node Credential Type` parameter. - */ -const CREDENTIAL_TYPES = getCredPaths().reduce((acc, credPath) => { - const credential = new (getCredClass(credPath))(); - - if (!isSupportedNodeCredentialType(credential)) return acc; - - return [ - ...acc, - { - name: credential.displayName, - value: credential.name, - }, - ]; -}, []); - -function getCredPaths(root = NODES_BASE_ROOT): string[] { - const packageJson = require(path.resolve(root, 'package.json')); - - return deduplicate(packageJson.n8n.credentials); -} - -function deduplicate(array: T[]) { - return [...new Set(array)]; -} - -function getCredClass(credPath: string, root = NODES_BASE_ROOT): { new(): Credential } { - const match = credPath.match(/(^dist\/credentials\/(?.*)\.credentials\.js$)/); - - if (!match?.groups) { - throw new Error(`Failed to extract credential class name from: ${credPath}`); - } - - const fullCredPath = path.resolve(root, credPath); - - return require(fullCredPath)[match.groups.credClassName]; -} - -function isGenericAuth(cred: Credential) { - return cred.name.startsWith('http') || cred.name.startsWith('oAuth'); -} - -function isSupportedNodeCredentialType(cred: Credential) { - if (isGenericAuth(cred)) return false; - - if (cred.name === 'notionOAuth2Api') return false; // exists but currently commented out - - if (cred.name.slice(0, -4).endsWith('OAuth')) return true; - - return cred.authenticate !== undefined; -} - -type Credential = { - displayName: string; - name: string; - authenticate?: IAuthenticate; -}; From e8401eac591264473b067c0b73c4c977b8351152 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Mon, 16 May 2022 18:00:29 +0200 Subject: [PATCH 05/45] :zap: Componentize `NodeCredentialType` --- .../src/components/NodeCredentialType.vue | 136 ++++++++++++++++++ .../src/components/ParameterInput.vue | 61 +++----- 2 files changed, 154 insertions(+), 43 deletions(-) create mode 100644 packages/editor-ui/src/components/NodeCredentialType.vue diff --git a/packages/editor-ui/src/components/NodeCredentialType.vue b/packages/editor-ui/src/components/NodeCredentialType.vue new file mode 100644 index 0000000000000..3d32dc7329cf8 --- /dev/null +++ b/packages/editor-ui/src/components/NodeCredentialType.vue @@ -0,0 +1,136 @@ + + + + + diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index 435fb005dacbd..c2f180b28648b 100644 --- a/packages/editor-ui/src/components/ParameterInput.vue +++ b/packages/editor-ui/src/components/ParameterInput.vue @@ -104,49 +104,22 @@ :placeholder="parameter.placeholder" /> -
- - -
-
- {{ credType.displayName }} -
-
-
- - - - -
+ Date: Mon, 16 May 2022 18:16:40 +0200 Subject: [PATCH 06/45] :bug: Fix param validation --- packages/editor-ui/src/components/NodeSettings.vue | 1 - packages/editor-ui/src/components/ParameterInput.vue | 12 +++++------- .../editor-ui/src/components/ParameterInputList.vue | 2 -- 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue index 2dde9feb530cd..73c721a44208d 100644 --- a/packages/editor-ui/src/components/NodeSettings.vue +++ b/packages/editor-ui/src/components/NodeSettings.vue @@ -33,7 +33,6 @@ :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" > diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index c2f180b28648b..10b17bba29aae 100644 --- a/packages/editor-ui/src/components/ParameterInput.vue +++ b/packages/editor-ui/src/components/ParameterInput.vue @@ -511,7 +511,10 @@ export default mixins( const issues = NodeHelpers.getParameterIssues(this.parameter, this.node.parameters, newPath.join('.'), this.node); - if (['options', 'multiOptions'].includes(this.parameter.type) && this.remoteParameterOptionsLoading === false && this.remoteParameterOptionsLoadingIssues === null) { + if (this.parameter.type === 'nodeCredentialType' && this.displayValue === '') { + issues.parameters = issues.parameters || {}; + issues.parameters[this.parameter.name] = ['Select a credential type from the dropdown']; + } else if (['options', 'multiOptions'].includes(this.parameter.type) && this.remoteParameterOptionsLoading === false && this.remoteParameterOptionsLoadingIssues === null) { // Check if the value resolves to a valid option // Currently it only displays an error in the node itself in // case the value is not valid. The workflow can still be executed @@ -534,12 +537,7 @@ export default mixins( if (issues.parameters === undefined) { issues.parameters = {}; } - - if (this.isHttpRequestNodeV2(this.node)) { - issues.parameters[this.parameter.name] = ['Select a credential type from the dropdown']; - } else { - issues.parameters[this.parameter.name] = [`The value "${checkValue}" is not supported!`]; - } + issues.parameters[this.parameter.name] = [`The value "${checkValue}" is not supported!`]; } } } else if (this.remoteParameterOptionsLoadingIssues !== null) { diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue index c7714e8e3f657..8dbf5a98f1e09 100644 --- a/packages/editor-ui/src/components/ParameterInputList.vue +++ b/packages/editor-ui/src/components/ParameterInputList.vue @@ -131,8 +131,6 @@ export default mixins( return this.$store.getters.activeNode; }, indexToShowSlotAt (): number { - if (this.isHttpRequestNodeV2(this.node)) return 2; - if (this.node.type === WEBHOOK_NODE_TYPE) return 1; return 0; From 4a94b05301a34da8924c2fc12f8169eb12ecb3b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Mon, 16 May 2022 18:25:50 +0200 Subject: [PATCH 07/45] :fire: Remove dup methods --- .../src/components/ParameterInput.vue | 53 ------------------- .../src/components/mixins/nodeHelpers.ts | 4 ++ 2 files changed, 4 insertions(+), 53 deletions(-) diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index 10b17bba29aae..1474836800b94 100644 --- a/packages/editor-ui/src/components/ParameterInput.vue +++ b/packages/editor-ui/src/components/ParameterInput.vue @@ -628,9 +628,6 @@ export default mixins( workflow (): Workflow { return this.getWorkflow(); }, - supportedCredentialTypes(): ICredentialType[] { - return this.allCredentialTypes.filter((c: ICredentialType) => this.supportsProxyAuth(c.name)); - }, }, methods: { credentialSelected (updateInformation: INodeUpdatePropertiesInformation) { @@ -660,56 +657,6 @@ export default mixins( .replace(new RegExp(`${oauth1Api}|${oauth2Api}`), '') .trim(); }, - getSupportedCredentialTypes(credentialTypes: string[]) { - return credentialTypes.reduce<{ extends: string[]; has: string[] }>((acc, cur) => { - const _extends = cur.split('extends:'); - - if (_extends.length === 2) { - acc.extends.push(_extends[1]); - return acc; - } - - const _has = cur.split('has:'); - - if (_has.length === 2) { - acc.has.push(_has[1]); - return acc; - } - - return acc; - }, { extends: [], has: [] }); - }, - supportsProxyAuth(name: string): boolean { - if (this.parameter.type !== 'nodeCredentialType') return false; - - const supported = this.getSupportedCredentialTypes(this.parameter.credentialTypes); - - const credType = this.$store.getters['credentials/getCredentialTypeByName'](name); - - for (const property of supported.has) { - if (credType[property] !== undefined) return true; - } - - // @TODO: Consolidate two if-checks - - if ( - credType.extends && - credType.extends.some( - (parentType: string) => supported.extends.includes(parentType), - ) - ) { - return true; - } - - if (credType.extends) { - return credType.extends.reduce( - (acc: boolean, parentType: string) => acc || this.supportsProxyAuth(parentType), - false, - ); - } - - return false; - }, /** * Check whether a param value must be skipped when collecting node param issues for validation. */ diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts index 1b93603fe4211..7166dd26f6e85 100644 --- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts +++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts @@ -47,6 +47,10 @@ export const nodeHelpers = mixins( isHttpRequestNodeV2 (node: INodeUi): boolean { return node.type === HTTP_REQUEST_NODE_TYPE && node.typeVersion === 2; }, + hasProxyAuth (node: INodeUi): boolean { + // @TODO + return false; + }, isCustomApiCallSelected (nodeValues: INodeParameters): boolean { const { parameters } = nodeValues; From d0456ee1a473e407a04af10d28254dff7c34ba9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Mon, 16 May 2022 18:35:04 +0200 Subject: [PATCH 08/45] :zap: Refactor all references to `isHttpRequestNodeV2` --- .../editor-ui/src/components/mixins/nodeHelpers.ts | 12 ++++-------- .../src/components/mixins/workflowHelpers.ts | 2 +- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts index 7166dd26f6e85..86788f280a40b 100644 --- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts +++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts @@ -44,12 +44,8 @@ export const nodeHelpers = mixins( ...mapGetters('credentials', [ 'getCredentialTypeByName', 'getCredentialsByType' ]), }, methods: { - isHttpRequestNodeV2 (node: INodeUi): boolean { - return node.type === HTTP_REQUEST_NODE_TYPE && node.typeVersion === 2; - }, hasProxyAuth (node: INodeUi): boolean { - // @TODO - return false; + return node.parameters.nodeCredentialType !== undefined; }, isCustomApiCallSelected (nodeValues: INodeParameters): boolean { @@ -247,7 +243,7 @@ export const nodeHelpers = mixins( } = node.parameters as HttpRequestNode.V2.AuthParams; if ( - this.isHttpRequestNodeV2(node) && + this.hasProxyAuth(node) && authentication === 'genericCredentialType' && selectedCredsAreUnusable(node, genericAuthType) ) { @@ -256,7 +252,7 @@ export const nodeHelpers = mixins( } if ( - this.isHttpRequestNodeV2(node) && + this.hasProxyAuth(node) && authentication === 'existingCredentialType' && nodeCredentialType !== '' && node.credentials !== undefined @@ -270,7 +266,7 @@ export const nodeHelpers = mixins( } if ( - this.isHttpRequestNodeV2(node) && + this.hasProxyAuth(node) && authentication === 'existingCredentialType' && nodeCredentialType !== '' && selectedCredsAreUnusable(node, nodeCredentialType) diff --git a/packages/editor-ui/src/components/mixins/workflowHelpers.ts b/packages/editor-ui/src/components/mixins/workflowHelpers.ts index 0e86843cc1da0..5608eafccfe5b 100644 --- a/packages/editor-ui/src/components/mixins/workflowHelpers.ts +++ b/packages/editor-ui/src/components/mixins/workflowHelpers.ts @@ -330,7 +330,7 @@ export const workflowHelpers = mixins( if (node.credentials !== undefined && nodeType.credentials !== undefined) { const saveCredenetials: INodeCredentials = {}; for (const nodeCredentialTypeName of Object.keys(node.credentials)) { - if (this.isHttpRequestNodeV2(node)) { + if (this.hasProxyAuth(node)) { saveCredenetials[nodeCredentialTypeName] = node.credentials[nodeCredentialTypeName]; continue; } From fd57ad42d23de0fe5a64a6ff9113ed208343b3a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Mon, 16 May 2022 21:06:59 +0200 Subject: [PATCH 09/45] :art: Fix styling --- .../src/components/NodeCredentialType.vue | 84 +++++++++++-------- .../src/components/ParameterInput.vue | 68 +++++++-------- .../src/components/ParameterIssues.vue | 29 +++++++ .../src/components/ParameterOptions.vue | 39 +++++++++ 4 files changed, 150 insertions(+), 70 deletions(-) create mode 100644 packages/editor-ui/src/components/ParameterIssues.vue create mode 100644 packages/editor-ui/src/components/ParameterOptions.vue diff --git a/packages/editor-ui/src/components/NodeCredentialType.vue b/packages/editor-ui/src/components/NodeCredentialType.vue index 3d32dc7329cf8..b1838fd1b8085 100644 --- a/packages/editor-ui/src/components/NodeCredentialType.vue +++ b/packages/editor-ui/src/components/NodeCredentialType.vue @@ -1,45 +1,51 @@ @@ -88,8 +94,6 @@ export default Vue.extend({ if (credType[property] !== undefined) return true; } - // @TODO: Consolidate two if-checks - if ( credType.extends && credType.extends.some( @@ -131,6 +135,14 @@ export default Vue.extend({ }); - diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index 1474836800b94..43e9122a07cfd 100644 --- a/packages/editor-ui/src/components/ParameterInput.vue +++ b/packages/editor-ui/src/components/ParameterInput.vue @@ -119,7 +119,21 @@ :valueChanged="valueChanged" :setFocus="setFocus" :onBlur="onBlur" - /> + > + +
-
- -
- - -
+ + + -
- - - - - - {{ $locale.baseText('parameterInput.addExpression') }} - {{ $locale.baseText('parameterInput.removeExpression') }} - {{ $locale.baseText('parameterInput.refreshList') }} - {{ $locale.baseText('parameterInput.resetValue') }} - - -
@@ -232,6 +241,8 @@ import NodeCredentialType from '@/components/NodeCredentialType.vue'; import ExpressionEdit from '@/components/ExpressionEdit.vue'; import NodeCredentials from '@/components/NodeCredentials.vue'; import ScopesNotice from '@/components/ScopesNotice.vue'; +import ParameterOptions from '@/components/ParameterOptions.vue'; +import ParameterIssues from '@/components/ParameterIssues.vue'; // @ts-ignore import PrismEditor from 'vue-prism-editor'; import TextEdit from '@/components/TextEdit.vue'; @@ -259,6 +270,8 @@ export default mixins( NodeCredentialType, PrismEditor, ScopesNotice, + ParameterOptions, + ParameterIssues, TextEdit, }, props: [ @@ -604,6 +617,7 @@ export default mixins( const styles = { width: '100%', }; + if (this.parameter.type === 'nodeCredentialType') return styles; if (this.displayOptionsComputed === true) { deductWidth += 25; } @@ -942,20 +956,6 @@ export default mixins( display: inline-block; } -.parameter-options { - width: 25px; - text-align: right; - float: right; -} - -.parameter-issues { - width: 20px; - text-align: right; - float: right; - color: #ff8080; - font-size: var(--font-size-s); -} - ::v-deep .color-input { display: flex; diff --git a/packages/editor-ui/src/components/ParameterIssues.vue b/packages/editor-ui/src/components/ParameterIssues.vue new file mode 100644 index 0000000000000..14b5913edbd3e --- /dev/null +++ b/packages/editor-ui/src/components/ParameterIssues.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/packages/editor-ui/src/components/ParameterOptions.vue b/packages/editor-ui/src/components/ParameterOptions.vue new file mode 100644 index 0000000000000..8b05c9140ca58 --- /dev/null +++ b/packages/editor-ui/src/components/ParameterOptions.vue @@ -0,0 +1,39 @@ + + + + + From d4c2336e2f57c21d9018b132855b1357416a5eed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Mon, 16 May 2022 21:10:23 +0200 Subject: [PATCH 10/45] :fire: Remove unused import --- packages/editor-ui/src/components/mixins/nodeHelpers.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts index 86788f280a40b..69922a92bf57c 100644 --- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts +++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts @@ -1,5 +1,4 @@ import { - HTTP_REQUEST_NODE_TYPE, PLACEHOLDER_FILLED_AT_EXECUTION_TIME, CUSTOM_API_CALL_KEY, } from '@/constants'; From 3b80952e65e20e2a03b38606894f9028c489bc51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Mon, 16 May 2022 21:17:39 +0200 Subject: [PATCH 11/45] :fire: Remove unused properties --- .../editor-ui/src/components/NodeSettings.vue | 35 ------------------- .../src/components/ParameterInput.vue | 1 - 2 files changed, 36 deletions(-) diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue index 73c721a44208d..9a4ec98aef469 100644 --- a/packages/editor-ui/src/components/NodeSettings.vue +++ b/packages/editor-ui/src/components/NodeSettings.vue @@ -90,7 +90,6 @@ import { nodeHelpers } from '@/components/mixins/nodeHelpers'; import mixins from 'vue-typed-mixins'; import NodeExecuteButton from './NodeExecuteButton.vue'; -import { mapGetters } from 'vuex'; export default mixins( externalHooks, @@ -109,10 +108,6 @@ export default mixins( NodeExecuteButton, }, computed: { - ...mapGetters('credentials', [ - 'getCredentialTypeByName', - 'getScopesByCredentialType', - ]), nodeType (): INodeTypeDescription | null { if (this.node) { return this.$store.getters.nodeType(this.node.type, this.node.typeVersion); @@ -173,31 +168,6 @@ export default mixins( return this.nodeType.properties; }, - scopesShortContent (): string { - return this.$locale.baseText( - 'nodeSettings.scopes.notice', - { - adjustToNumber: this.activeCredential.scopes.length, - interpolate: { - activeCredential: this.activeCredential.shortDisplayName, - }, - }, - ); - }, - scopesFullContent (): string { - return this.$locale.baseText( - 'nodeSettings.scopes.expandedNoticeWithScopes', - { - adjustToNumber: this.activeCredential.scopes.length, - interpolate: { - activeCredential: this.activeCredential.shortDisplayName, - scopes: this.activeCredential.scopes.map( - (scope: string) => scope.replace(/\//g, '/'), - ).join('
'), - }, - }, - ); - }, }, props: { eventBus: { @@ -220,10 +190,6 @@ export default mixins( notes: '', parameters: {}, } as INodeParameters, - activeCredential: { - shortDisplayName: '', - scopes: [] as string[], - }, nodeSettings: [ { @@ -579,7 +545,6 @@ export default mixins( }, mounted () { this.setNodeValues(); - if (this.eventBus) { (this.eventBus as Vue).$on('openSettings', () => { this.openPanel = 'settings'; diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index 43e9122a07cfd..194be796308bf 100644 --- a/packages/editor-ui/src/components/ParameterInput.vue +++ b/packages/editor-ui/src/components/ParameterInput.vue @@ -233,7 +233,6 @@ import { INodeParameters, INodePropertyOptions, Workflow, - ICredentialType, } from 'n8n-workflow'; import CodeEdit from '@/components/CodeEdit.vue'; From 9f8689a0f7462ddec78a75f604682403ccf5487b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Mon, 16 May 2022 21:36:52 +0200 Subject: [PATCH 12/45] :art: Fix spacing for Pipedrive Trigger node --- packages/editor-ui/src/components/NodeCredentials.vue | 6 +----- packages/editor-ui/src/components/ParameterInputList.vue | 5 ----- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue index 13e764378096e..623580172bbaf 100644 --- a/packages/editor-ui/src/components/NodeCredentials.vue +++ b/packages/editor-ui/src/components/NodeCredentials.vue @@ -306,11 +306,7 @@ export default mixins( From b5be6a295293e1ee70966562e87eb66910e8eb93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Tue, 17 May 2022 09:47:58 +0200 Subject: [PATCH 15/45] :zap: Cover `httpHeaderAuth` edge case --- packages/editor-ui/src/components/NodeCredentialType.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/editor-ui/src/components/NodeCredentialType.vue b/packages/editor-ui/src/components/NodeCredentialType.vue index b1838fd1b8085..756f2a7855afb 100644 --- a/packages/editor-ui/src/components/NodeCredentialType.vue +++ b/packages/editor-ui/src/components/NodeCredentialType.vue @@ -86,6 +86,9 @@ export default Vue.extend({ supportsProxyAuth(name: string): boolean { if (this.parameter.type !== 'nodeCredentialType') return false; + // edge case: `httpHeaderAuth` has `authenticate` auth but belongs to generic auth + if (name === 'httpHeaderAuth') return false; + const supported = this.getSupportedCredentialTypes(this.parameter.credentialTypes); const credType = this.$store.getters['credentials/getCredentialTypeByName'](name); From e8aa59479222a8d0c64e2d1dacb366a58138c400 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Tue, 17 May 2022 10:48:55 +0200 Subject: [PATCH 16/45] :bug: Fix `this.node` reference --- packages/editor-ui/src/components/ParameterInput.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index 194be796308bf..fb4f9dea75be2 100644 --- a/packages/editor-ui/src/components/ParameterInput.vue +++ b/packages/editor-ui/src/components/ParameterInput.vue @@ -348,9 +348,6 @@ export default mixins( }, computed: { ...mapGetters('credentials', ['allCredentialTypes', 'getScopesByCredentialType']), - node (): INodeUi { - return this.$store.getters.activeNode; - }, areExpressionsDisabled(): boolean { return this.$store.getters['ui/areExpressionsDisabled']; }, @@ -380,6 +377,9 @@ export default mixins( return returnValues.join('|'); }, + node (): INodeUi | null { + return this.$store.getters.activeNode; + }, displayTitle (): string { const interpolation = { interpolate: { shortPath: this.shortPath } }; @@ -885,7 +885,7 @@ export default mixins( this.nodeName = this.node.name; } - if (this.node.parameters.authentication === 'existingCredentialType') { + if (this.node && this.node.parameters.authentication === 'existingCredentialType') { this.prepareScopesNotice(this.node.parameters.nodeCredentialType as string); } From 80189a47c0676a7a2191f4bc1cfb5435bdbfd3cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Tue, 17 May 2022 16:06:23 +0200 Subject: [PATCH 17/45] :truck: Rename to `credentialsSelect` --- ...edentialType.vue => CredentialsSelect.vue} | 4 ++-- .../src/components/ParameterInput.vue | 22 +++++++++---------- .../nodes/HttpRequest/HttpRequest.node.ts | 2 +- packages/workflow/src/Interfaces.ts | 2 +- 4 files changed, 15 insertions(+), 15 deletions(-) rename packages/editor-ui/src/components/{NodeCredentialType.vue => CredentialsSelect.vue} (97%) diff --git a/packages/editor-ui/src/components/NodeCredentialType.vue b/packages/editor-ui/src/components/CredentialsSelect.vue similarity index 97% rename from packages/editor-ui/src/components/NodeCredentialType.vue rename to packages/editor-ui/src/components/CredentialsSelect.vue index 756f2a7855afb..c813ea78894e4 100644 --- a/packages/editor-ui/src/components/NodeCredentialType.vue +++ b/packages/editor-ui/src/components/CredentialsSelect.vue @@ -57,7 +57,7 @@ import ScopesNotice from '@/components/ScopesNotice.vue'; import NodeCredentials from '@/components/NodeCredentials.vue'; export default Vue.extend({ - name: 'NodeCredentialType', + name: 'CredentialsSelect', components: { ScopesNotice, NodeCredentials, @@ -84,7 +84,7 @@ export default Vue.extend({ }, methods: { supportsProxyAuth(name: string): boolean { - if (this.parameter.type !== 'nodeCredentialType') return false; + if (this.parameter.type !== 'credentialsSelect') return false; // edge case: `httpHeaderAuth` has `authenticate` auth but belongs to generic auth if (name === 'httpHeaderAuth') return false; diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index fb4f9dea75be2..dbb8b09ac3b1d 100644 --- a/packages/editor-ui/src/components/ParameterInput.vue +++ b/packages/editor-ui/src/components/ParameterInput.vue @@ -104,8 +104,8 @@ :placeholder="parameter.placeholder" /> - - + Date: Tue, 17 May 2022 16:19:37 +0200 Subject: [PATCH 18/45] :bug: Fix mistaken renaming --- packages/editor-ui/src/components/ParameterInput.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index dbb8b09ac3b1d..f2127e7ba1db1 100644 --- a/packages/editor-ui/src/components/ParameterInput.vue +++ b/packages/editor-ui/src/components/ParameterInput.vue @@ -828,7 +828,7 @@ export default mixins( this.$emit('textInput', parameterData); }, valueChanged (value: string[] | string | number | boolean | Date | null) { - if (this.parameter.name === 'credentialsSelect') { + if (this.parameter.name === 'nodeCredentialType') { this.prepareScopesNotice(value as string); } From 64cb690ed0f07fd09cfc8ff5421b6b5522e995bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= Date: Tue, 17 May 2022 16:23:45 +0200 Subject: [PATCH 19/45] :zap: Set one attribute per line --- .../src/components/ParameterOptions.vue | 41 ++++++++++++++++--- 1 file changed, 35 insertions(+), 6 deletions(-) diff --git a/packages/editor-ui/src/components/ParameterOptions.vue b/packages/editor-ui/src/components/ParameterOptions.vue index 8b05c9140ca58..b5870596b6358 100644 --- a/packages/editor-ui/src/components/ParameterOptions.vue +++ b/packages/editor-ui/src/components/ParameterOptions.vue @@ -1,14 +1,43 @@