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 <me@olegivaniv.com>

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

@@ -146,8 +146,6 @@ import type {
 } from 'n8n-workflow';
 import { jsonParse, NodeHelpers, NodeConnectionType } from 'n8n-workflow';
 import type { IExecutionResponse, INodeUi, IUpdateInformation, TargetItem } from '@/Interface';
-
-import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 
 import NodeSettings from '@/components/NodeSettings.vue';
@@ -173,12 +171,13 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useDeviceSupport } from 'n8n-design-system/composables/useDeviceSupport';
+import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useMessage } from '@/composables/useMessage';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 
 export default defineComponent({
 	name: 'NodeDetailsView',
-	mixins: [nodeHelpers, workflowHelpers, workflowActivate, pinData],
+	mixins: [workflowHelpers, workflowActivate, pinData],
 	components: {
 		NodeSettings,
 		InputPanel,
@@ -200,9 +199,11 @@ export default defineComponent({
 	},
 	setup(props, ctx) {
 		const externalHooks = useExternalHooks();
+		const nodeHelpers = useNodeHelpers();
 
 		return {
 			externalHooks,
+			nodeHelpers,
 			...useDeviceSupport(),
 			...useMessage(),
 			// eslint-disable-next-line @typescript-eslint/no-misused-promises
@@ -471,14 +472,18 @@ export default defineComponent({
 
 				setTimeout(() => this.ndvStore.setNDVSessionId(), 0);
 				void this.externalHooks.run('dataDisplay.nodeTypeChanged', {
-					nodeSubtitle: this.getNodeSubtitle(node, this.activeNodeType, this.getCurrentWorkflow()),
+					nodeSubtitle: this.nodeHelpers.getNodeSubtitle(
+						node,
+						this.activeNodeType,
+						this.getCurrentWorkflow(),
+					),
 				});
 
 				setTimeout(() => {
 					if (this.activeNode) {
 						const outgoingConnections = this.workflowsStore.outgoingConnectionsByNodeName(
 							this.activeNode.name,
-						) as INodeConnections;
+						);
 
 						this.$telemetry.track('User opened node modal', {
 							node_type: this.activeNodeType ? this.activeNodeType.name : '',
@@ -493,8 +498,7 @@ export default defineComponent({
 								: this.ndvStore.inputPanelDisplayMode,
 							selected_view_outputs: this.ndvStore.outputPanelDisplayMode,
 							input_connectors: this.parentNodes.length,
-							output_connectors:
-								outgoingConnections && outgoingConnections.main && outgoingConnections.main.length,
+							output_connectors: outgoingConnections?.main?.length,
 							input_displayed_run_index: this.inputRun,
 							output_displayed_run_index: this.outputRun,
 							data_pinning_tooltip_presented: this.pinDataDiscoveryTooltipVisible,