refactor(editor): Migrate RunDataJson.vue to composition API (#10861)

Co-authored-by: Raúl Gómez Morales <raul00gm@gmail.com>

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

@@ -1,128 +1,91 @@
-<script lang="ts">
+<script setup lang="ts">
-import { defineAsyncComponent, defineComponent, ref } from 'vue';
+import { computed, defineAsyncComponent, ref } from 'vue';
-import type { PropType } from 'vue';
 import VueJsonPretty from 'vue-json-pretty';
-import type { IDataObject, INodeExecutionData } from 'n8n-workflow';
+import type { INodeExecutionData } from 'n8n-workflow';
 import Draggable from '@/components/Draggable.vue';
 import { executionDataToJson } from '@/utils/nodeTypesUtils';
 import { isString } from '@/utils/typeGuards';
 import { shorten } from '@/utils/typesUtils';
 import type { INodeUi } from '@/Interface';
-import { mapStores } from 'pinia';
 import { useNDVStore } from '@/stores/ndv.store';
 import MappingPill from './MappingPill.vue';
 import { getMappedExpression } from '@/utils/mappingUtils';
-import { useWorkflowsStore } from '@/stores/workflows.store';
 import { nonExistingJsonPath } from '@/constants';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import TextWithHighlights from './TextWithHighlights.vue';
+import { useTelemetry } from '@/composables/useTelemetry';
 
 const LazyRunDataJsonActions = defineAsyncComponent(
 	async () => await import('@/components/RunDataJsonActions.vue'),
 );
 
-export default defineComponent({
+const props = withDefaults(
-	name: 'RunDataJson',
+	defineProps<{
-	components: {
+		editMode: { enabled?: boolean; value?: string };
-		VueJsonPretty,
+		pushRef?: string;
-		Draggable,
+		paneType?: string;
-		LazyRunDataJsonActions,
+		node: INodeUi;
-		MappingPill,
+		inputData: INodeExecutionData[];
-		TextWithHighlights,
+		mappingEnabled?: boolean;
+		distanceFromActive: number;
+		runIndex?: number;
+		totalRuns?: number;
+		search?: string;
+	}>(),
+	{
+		editMode: () => ({}),
 	},
-	props: {
+);
-		editMode: {
-			type: Object as PropType<{ enabled?: boolean; value?: string }>,
-			default: () => ({}),
-		},
-		pushRef: {
-			type: String,
-		},
-		paneType: {
-			type: String,
-		},
-		node: {
-			type: Object as PropType<INodeUi>,
-			required: true,
-		},
-		inputData: {
-			type: Array as PropType<INodeExecutionData[]>,
-			required: true,
-		},
-		mappingEnabled: {
-			type: Boolean,
-		},
-		distanceFromActive: {
-			type: Number,
-			required: true,
-		},
-		runIndex: {
-			type: Number,
-		},
-		totalRuns: {
-			type: Number,
-		},
-		search: {
-			type: String,
-		},
-	},
-	setup() {
-		const externalHooks = useExternalHooks();
 
-		const selectedJsonPath = ref(nonExistingJsonPath);
+const ndvStore = useNDVStore();
-		const draggingPath = ref<null | string>(null);
-		const displayMode = ref('json');
 
-		return {
+const externalHooks = useExternalHooks();
-			externalHooks,
+const telemetry = useTelemetry();
-			selectedJsonPath,
+
-			draggingPath,
+const selectedJsonPath = ref(nonExistingJsonPath);
-			displayMode,
+const draggingPath = ref<null | string>(null);
-		};
+const displayMode = ref('json');
-	},
+
-	computed: {
+const jsonData = computed(() => executionDataToJson(props.inputData));
-		...mapStores(useNDVStore, useWorkflowsStore),
+
-		jsonData(): IDataObject[] {
+const highlight = computed(() => ndvStore.highlightDraggables);
-			return executionDataToJson(this.inputData);
+
-		},
+const getShortKey = (el: HTMLElement) => {
-		highlight(): boolean {
-			return this.ndvStore.highlightDraggables;
-		},
-	},
-	methods: {
-		getShortKey(el: HTMLElement): string {
 	if (!el) {
 		return '';
 	}
 
-			return shorten(el.dataset.name || '', 16, 2);
+	return shorten(el.dataset.name ?? '', 16, 2);
-		},
+};
-		getJsonParameterPath(path: string): string {
+
+const getJsonParameterPath = (path: string) => {
 	const subPath = path.replace(/^(\["?\d"?])/, ''); // remove item position
 
 	return getMappedExpression({
-				nodeName: this.node.name,
+		nodeName: props.node.name,
-				distanceFromActive: this.distanceFromActive,
+		distanceFromActive: props.distanceFromActive,
 		path: subPath,
 	});
-		},
+};
-		onDragStart(el: HTMLElement) {
+
+const onDragStart = (el: HTMLElement) => {
 	if (el?.dataset.path) {
-				this.draggingPath = el.dataset.path;
+		draggingPath.value = el.dataset.path;
 	}
 
-			this.ndvStore.resetMappingTelemetry();
+	ndvStore.resetMappingTelemetry();
-		},
+};
-		onDragEnd(el: HTMLElement) {
+
-			this.draggingPath = null;
+const onDragEnd = (el: HTMLElement) => {
-			const mappingTelemetry = this.ndvStore.mappingTelemetry;
+	draggingPath.value = null;
+	const mappingTelemetry = ndvStore.mappingTelemetry;
 	const telemetryPayload = {
-				src_node_type: this.node.type,
+		src_node_type: props.node.type,
-				src_field_name: el.dataset.name || '',
+		src_field_name: el.dataset.name ?? '',
-				src_nodes_back: this.distanceFromActive,
+		src_nodes_back: props.distanceFromActive,
-				src_run_index: this.runIndex,
+		src_run_index: props.runIndex,
-				src_runs_total: this.totalRuns,
+		src_runs_total: props.totalRuns,
-				src_field_nest_level: el.dataset.depth || 0,
+		src_field_nest_level: el.dataset.depth ?? 0,
 		src_view: 'json',
 		src_element: el,
 		success: false,
@@ -130,20 +93,20 @@ export default defineComponent({
 	};
 
 	setTimeout(() => {
-				void this.externalHooks.run('runDataJson.onDragEnd', telemetryPayload);
+		void externalHooks.run('runDataJson.onDragEnd', telemetryPayload);
-				this.$telemetry.track('User dragged data for mapping', telemetryPayload, {
+		telemetry.track('User dragged data for mapping', telemetryPayload, {
 			withPostHog: true,
 		});
 	}, 1000); // ensure dest data gets set if drop
-		},
+};
-		getContent(value: unknown): string {
+
+const getContent = (value: unknown) => {
 	return isString(value) ? `"${value}"` : JSON.stringify(value);
-		},
+};
-		getListItemName(path: string): string {
+
+const getListItemName = (path: string) => {
 	return path.replace(/^(\["?\d"?]\.?)/g, '');
-		},
+};
-	},
-});
 </script>
 
 <template>