feat(editor): Migrate pinData mixin to usePinnedData composable (no-changelog) (#8207)

## Summary
Required as part of NodeView refactoring:
- Migrates `pinData` mixin to `usePinnedData` composable.
- Adds `useActiveNode` and `useNodeType` composables 

## Related tickets and issues
https://linear.app/n8n/issue/N8N-6355/pindata

## Review / Merge checklist
- [x] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
- [x] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [x] Tests included.
> A bug is not considered fixed, unless a test is added to prevent it
from happening again.
   > A feature is not complete without tests.

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

@@ -159,7 +159,6 @@ import {
 } from '@/constants';
 import { nodeBase } from '@/mixins/nodeBase';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
-import { pinData } from '@/mixins/pinData';
 import type {
 	ConnectionTypes,
 	IExecutionsSummary,
@@ -187,6 +186,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { type ContextMenuTarget, useContextMenu } from '@/composables/useContextMenu';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useExternalHooks } from '@/composables/useExternalHooks';
+import { usePinnedData } from '@/composables/usePinnedData';
 
 export default defineComponent({
 	name: 'Node',
@@ -195,7 +195,7 @@ export default defineComponent({
 		FontAwesomeIcon,
 		NodeIcon,
 	},
-	mixins: [nodeBase, workflowHelpers, pinData, debounceHelper],
+	mixins: [nodeBase, workflowHelpers, debounceHelper],
 	props: {
 		isProductionExecutionPreview: {
 			type: Boolean,
@@ -210,17 +210,20 @@ export default defineComponent({
 			default: false,
 		},
 	},
-	setup() {
+	setup(props) {
+		const workflowsStore = useWorkflowsStore();
 		const contextMenu = useContextMenu();
 		const externalHooks = useExternalHooks();
 		const nodeHelpers = useNodeHelpers();
+		const node = workflowsStore.getNodeByName(props.name);
+		const pinnedData = usePinnedData(node);
 
-		return { contextMenu, externalHooks, nodeHelpers };
+		return { contextMenu, externalHooks, nodeHelpers, pinnedData };
 	},
 	computed: {
 		...mapStores(useNodeTypesStore, useNDVStore, useUIStore, useWorkflowsStore),
 		showPinnedDataInfo(): boolean {
-			return this.hasPinData && !this.isProductionExecutionPreview;
+			return this.pinnedData.hasData.value && !this.isProductionExecutionPreview;
 		},
 		isDuplicatable(): boolean {
 			if (!this.nodeType) return true;
@@ -247,7 +250,7 @@ export default defineComponent({
 				['crashed', 'error', 'failed'].includes(this.nodeExecutionStatus)
 			)
 				return true;
-			if (this.hasPinData) return false;
+			if (this.pinnedData.hasData.value) return false;
 			if (this.data?.issues !== undefined && Object.keys(this.data.issues).length) {
 				return true;
 			}
@@ -531,7 +534,7 @@ export default defineComponent({
 				!!this.node &&
 				this.isTriggerNode &&
 				!this.isPollingTypeNode &&
-				!this.hasPinData &&
+				!this.pinnedData.hasData.value &&
 				!this.isNodeDisabled &&
 				this.workflowRunning &&
 				this.workflowDataItems === 0 &&