From 9419c28ff31f72adf37ce90731795bf32f550639 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= Date: Fri, 31 May 2024 17:22:27 +0200 Subject: [PATCH] fix(editor): Fix type errors in `TriggerPanel.vue` (no-changelog) (#9578) --- .../editor-ui/src/components/TriggerPanel.vue | 81 +++++++++---------- packages/editor-ui/src/utils/typeGuards.ts | 13 ++- packages/workflow/src/Interfaces.ts | 26 ++---- 3 files changed, 60 insertions(+), 60 deletions(-) diff --git a/packages/editor-ui/src/components/TriggerPanel.vue b/packages/editor-ui/src/components/TriggerPanel.vue index c53ecfc0de..6782572162 100644 --- a/packages/editor-ui/src/components/TriggerPanel.vue +++ b/packages/editor-ui/src/components/TriggerPanel.vue @@ -14,7 +14,7 @@ {{ $locale.baseText('ndv.trigger.webhookNode.requestHint', { - interpolate: { type: webhookHttpMethod }, + interpolate: { type: webhookHttpMethod ?? '' }, }) }} @@ -130,6 +130,7 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store'; import { createEventBus } from 'n8n-design-system/utils'; import { useRouter } from 'vue-router'; import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers'; +import { isTriggerPanelObject } from '@/utils/typeGuards'; export default defineComponent({ name: 'TriggerPanel', @@ -141,11 +142,14 @@ export default defineComponent({ props: { nodeName: { type: String, + required: true, }, pushRef: { type: String, + default: '', }, }, + emits: { activate: null, execute: null }, setup() { const router = useRouter(); const workflowHelpers = useWorkflowHelpers({ router }); @@ -162,7 +166,7 @@ export default defineComponent({ computed: { ...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore), node(): INodeUi | null { - return this.workflowsStore.getNodeByName(this.nodeName as string); + return this.workflowsStore.getNodeByName(this.nodeName); }, nodeType(): INodeTypeDescription | null { if (this.node) { @@ -171,28 +175,26 @@ export default defineComponent({ return null; }, + triggerPanel() { + const panel = this.nodeType?.triggerPanel; + if (isTriggerPanelObject(panel)) { + return panel; + } + return undefined; + }, hideContent(): boolean { - if (!this.nodeType?.triggerPanel) { - return false; + const hideContent = this.triggerPanel?.hideContent; + if (typeof hideContent === 'boolean') { + return hideContent; } - if ( - this.nodeType?.triggerPanel && - this.nodeType?.triggerPanel.hasOwnProperty('hideContent') - ) { - const hideContent = this.nodeType?.triggerPanel.hideContent; - if (typeof hideContent === 'boolean') { - return hideContent; - } + if (this.node) { + const hideContentValue = this.workflowHelpers + .getCurrentWorkflow() + .expression.getSimpleParameterValue(this.node, hideContent, 'internal', {}); - if (this.node) { - const hideContentValue = this.workflowHelpers - .getCurrentWorkflow() - .expression.getSimpleParameterValue(this.node, hideContent, 'internal', {}); - - if (typeof hideContentValue === 'boolean') { - return hideContentValue; - } + if (typeof hideContentValue === 'boolean') { + return hideContentValue; } } @@ -200,7 +202,7 @@ export default defineComponent({ }, hasIssues(): boolean { return Boolean( - this.node?.issues && (this.node.issues.parameters || this.node.issues.credentials), + this.node?.issues && (this.node.issues.parameters ?? this.node.issues.credentials), ); }, serviceName(): string { @@ -296,8 +298,8 @@ export default defineComponent({ return this.$locale.baseText('ndv.trigger.pollingNode.fetchingEvent'); } - if (this.nodeType?.triggerPanel && typeof this.nodeType.triggerPanel.header === 'string') { - return this.nodeType.triggerPanel.header; + if (this.triggerPanel?.header) { + return this.triggerPanel.header; } if (this.isWebhookBasedNode) { @@ -319,15 +321,15 @@ export default defineComponent({ return ''; }, executionsHelp(): string { - if (this.nodeType?.triggerPanel?.executionsHelp !== undefined) { - if (typeof this.nodeType.triggerPanel.executionsHelp === 'string') { - return this.nodeType.triggerPanel.executionsHelp; + if (this.triggerPanel?.executionsHelp) { + if (typeof this.triggerPanel.executionsHelp === 'string') { + return this.triggerPanel.executionsHelp; } - if (!this.isWorkflowActive && this.nodeType.triggerPanel.executionsHelp.inactive) { - return this.nodeType.triggerPanel.executionsHelp.inactive; + if (!this.isWorkflowActive && this.triggerPanel.executionsHelp.inactive) { + return this.triggerPanel.executionsHelp.inactive; } - if (this.isWorkflowActive && this.nodeType.triggerPanel.executionsHelp.active) { - return this.nodeType.triggerPanel.executionsHelp.active; + if (this.isWorkflowActive && this.triggerPanel.executionsHelp.active) { + return this.triggerPanel.executionsHelp.active; } } @@ -358,25 +360,22 @@ export default defineComponent({ return ''; }, activationHint(): string { - if (this.isActivelyPolling) { + if (this.isActivelyPolling || !this.triggerPanel) { return ''; } - if (this.nodeType?.triggerPanel?.activationHint) { - if (typeof this.nodeType.triggerPanel.activationHint === 'string') { - return this.nodeType.triggerPanel.activationHint; + if (this.triggerPanel.activationHint) { + if (typeof this.triggerPanel.activationHint === 'string') { + return this.triggerPanel.activationHint; } if ( !this.isWorkflowActive && - typeof this.nodeType.triggerPanel.activationHint.inactive === 'string' + typeof this.triggerPanel.activationHint.inactive === 'string' ) { - return this.nodeType.triggerPanel.activationHint.inactive; + return this.triggerPanel.activationHint.inactive; } - if ( - this.isWorkflowActive && - typeof this.nodeType.triggerPanel.activationHint.active === 'string' - ) { - return this.nodeType.triggerPanel.activationHint.active; + if (this.isWorkflowActive && typeof this.triggerPanel.activationHint.active === 'string') { + return this.triggerPanel.activationHint.active; } } diff --git a/packages/editor-ui/src/utils/typeGuards.ts b/packages/editor-ui/src/utils/typeGuards.ts index ba32e1ae2d..5cd497f007 100644 --- a/packages/editor-ui/src/utils/typeGuards.ts +++ b/packages/editor-ui/src/utils/typeGuards.ts @@ -1,4 +1,9 @@ -import type { INodeParameterResourceLocator, NodeConnectionType } from 'n8n-workflow'; +import type { + INodeParameterResourceLocator, + INodeTypeDescription, + NodeConnectionType, + TriggerPanelDefinition, +} from 'n8n-workflow'; import { nodeConnectionTypes } from 'n8n-workflow'; import type { ICredentialsResponse, NewCredentialsModal } from '@/Interface'; @@ -56,3 +61,9 @@ export function isValidNodeConnectionType( ): connectionType is NodeConnectionType { return nodeConnectionTypes.includes(connectionType as NodeConnectionType); } + +export function isTriggerPanelObject( + triggerPanel: INodeTypeDescription['triggerPanel'], +): triggerPanel is TriggerPanelDefinition { + return triggerPanel !== undefined && typeof triggerPanel === 'object' && triggerPanel !== null; +} diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts index fe8e6baf1b..d70bb4b620 100644 --- a/packages/workflow/src/Interfaces.ts +++ b/packages/workflow/src/Interfaces.ts @@ -1766,29 +1766,19 @@ export interface INodeTypeDescription extends INodeTypeBaseDescription { webhooks?: IWebhookDescription[]; translation?: { [key: string]: object }; mockManualExecution?: true; - triggerPanel?: - | { - hideContent?: boolean | string; - header?: string; - executionsHelp?: - | string - | { - active: string; - inactive: string; - }; - activationHint?: - | string - | { - active: string; - inactive: string; - }; - } - | boolean; + triggerPanel?: TriggerPanelDefinition | boolean; extendsCredential?: string; hints?: NodeHint[]; __loadOptionsMethods?: string[]; // only for validation during build } +export type TriggerPanelDefinition = { + hideContent?: boolean | string; + header?: string; + executionsHelp?: string | { active: string; inactive: string }; + activationHint?: string | { active: string; inactive: string }; +}; + export type NodeHint = { message: string; type?: 'info' | 'warning' | 'danger';