From 35fbc37c8eb0a49352c3b5ec0482d07b4200eeff Mon Sep 17 00:00:00 2001 From: oleg Date: Fri, 8 Dec 2023 16:59:03 +0100 Subject: [PATCH] refactor(editor): Refactor `nodeHelpers` mixin to composable (#7810) - Convert `nodeHelpers` mixin into composable and fix types - Replace usage of the mixin with the new composable - Add missing store imports in components that were dependent on opaque imports from nodeHelpers mixin - Refactor the `CollectionParameter` component to the modern script setup syntax Github issue / Community forum post (link here to close automatically): --------- Signed-off-by: Oleg Ivaniv --- .../src/components/BinaryDataDisplay.vue | 14 +- .../CodeNodeEditor/CodeNodeEditor.vue | 3 +- .../src/components/CollectionParameter.vue | 290 +++---- .../CredentialEdit/CredentialEdit.vue | 23 +- packages/editor-ui/src/components/Node.vue | 14 +- .../src/components/NodeCredentials.vue | 20 +- .../src/components/NodeDetailsView.vue | 18 +- .../editor-ui/src/components/NodeSettings.vue | 21 +- .../src/components/ParameterInput.vue | 9 +- .../src/components/ParameterInputList.vue | 24 +- .../ResourceLocator/ResourceLocator.vue | 3 +- packages/editor-ui/src/components/RunData.vue | 16 +- .../src/components/RunDataJsonActions.vue | 11 +- packages/editor-ui/src/components/Sticky.vue | 3 +- .../src/composables/useNodeHelpers.ts | 723 +++++++++++++++++ packages/editor-ui/src/mixins/nodeHelpers.ts | 743 ------------------ .../editor-ui/src/mixins/pushConnection.ts | 7 +- .../editor-ui/src/mixins/workflowHelpers.ts | 26 +- packages/editor-ui/src/mixins/workflowRun.ts | 8 +- packages/editor-ui/src/views/NodeView.vue | 18 +- 20 files changed, 1017 insertions(+), 977 deletions(-) create mode 100644 packages/editor-ui/src/composables/useNodeHelpers.ts delete mode 100644 packages/editor-ui/src/mixins/nodeHelpers.ts diff --git a/packages/editor-ui/src/components/BinaryDataDisplay.vue b/packages/editor-ui/src/components/BinaryDataDisplay.vue index a826160d07c..f15d98acfb9 100644 --- a/packages/editor-ui/src/components/BinaryDataDisplay.vue +++ b/packages/editor-ui/src/components/BinaryDataDisplay.vue @@ -25,16 +25,22 @@ import type { IBinaryData, IRunData } from 'n8n-workflow'; import BinaryDataDisplayEmbed from '@/components/BinaryDataDisplayEmbed.vue'; -import { nodeHelpers } from '@/mixins/nodeHelpers'; - import { useWorkflowsStore } from '@/stores/workflows.store'; +import { useNodeHelpers } from '@/composables/useNodeHelpers'; export default defineComponent({ name: 'BinaryDataDisplay', - mixins: [nodeHelpers], + components: { BinaryDataDisplayEmbed, }, + setup() { + const nodeHelpers = useNodeHelpers(); + + return { + nodeHelpers, + }; + }, props: [ 'displayData', // IBinaryData 'windowVisible', // boolean @@ -42,7 +48,7 @@ export default defineComponent({ computed: { ...mapStores(useWorkflowsStore), binaryData(): IBinaryData | null { - const binaryData = this.getBinaryData( + const binaryData = this.nodeHelpers.getBinaryData( this.workflowRunData, this.displayData.node, this.displayData.runIndex, diff --git a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue index 559e6478d93..abc21ff4a61 100644 --- a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue +++ b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue @@ -70,6 +70,7 @@ import { completerExtension } from './completer'; import { codeNodeEditorTheme } from './theme'; import AskAI from './AskAI/AskAI.vue'; import { useMessage } from '@/composables/useMessage'; +import { useSettingsStore } from '@/stores/settings.store'; export default defineComponent({ name: 'code-node-editor', @@ -156,7 +157,7 @@ export default defineComponent({ }, }, computed: { - ...mapStores(useRootStore, usePostHog), + ...mapStores(useRootStore, usePostHog, useSettingsStore), aiEnabled(): boolean { const isAiExperimentEnabled = [ASK_AI_EXPERIMENT.gpt3, ASK_AI_EXPERIMENT.gpt4].includes( (this.posthogStore.getVariant(ASK_AI_EXPERIMENT.name) ?? '') as string, diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue index 91d5a838935..1296b3c0142 100644 --- a/packages/editor-ui/src/components/CollectionParameter.vue +++ b/packages/editor-ui/src/components/CollectionParameter.vue @@ -19,10 +19,10 @@
@@ -36,7 +36,11 @@ @@ -47,157 +51,155 @@
-