refactor(editor): Refactor BinaryDataDisplay components to Vue 3 syntax (no-changelog) (#9753)

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>

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

@@ -18,77 +18,75 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import { computed } from 'vue';
 import type { IBinaryData, IRunData } from 'n8n-workflow';
-
 import BinaryDataDisplayEmbed from '@/components/BinaryDataDisplayEmbed.vue';
-
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 
-export default defineComponent({
-	name: 'BinaryDataDisplay',
+const props = defineProps<{
+	displayData: IBinaryData;
+	windowVisible: boolean;
+}>();
 
-	components: {
-		BinaryDataDisplayEmbed,
-	},
-	props: [
-		'displayData', // IBinaryData
-		'windowVisible', // boolean
-	],
-	setup() {
-		const nodeHelpers = useNodeHelpers();
+const emit = defineEmits<{
+	(event: 'close'): void;
+}>();
 
-		return {
-			nodeHelpers,
-		};
-	},
-	computed: {
-		...mapStores(useWorkflowsStore),
-		binaryData(): IBinaryData | null {
-			const binaryData = this.nodeHelpers.getBinaryData(
-				this.workflowRunData,
-				this.displayData.node,
-				this.displayData.runIndex,
-				this.displayData.outputIndex,
-			);
+const nodeHelpers = useNodeHelpers();
+const workflowsStore = useWorkflowsStore();
 
-			if (binaryData.length === 0) {
-				return null;
-			}
-
-			if (
-				this.displayData.index >= binaryData.length ||
-				binaryData[this.displayData.index][this.displayData.key] === undefined
-			) {
-				return null;
-			}
-
-			const binaryDataItem: IBinaryData = binaryData[this.displayData.index][this.displayData.key];
-
-			return binaryDataItem;
-		},
-
-		workflowRunData(): IRunData | null {
-			const workflowExecution = this.workflowsStore.getWorkflowExecution;
-			if (workflowExecution === null) {
-				return null;
-			}
-			const executionData = workflowExecution.data;
-			return executionData ? executionData.resultData.runData : null;
-		},
-	},
-	methods: {
-		closeWindow() {
-			// Handle the close externally as the visible parameter is an external prop
-			// and is so not allowed to be changed here.
-			this.$emit('close');
-			return false;
-		},
-	},
+const workflowRunData = computed<IRunData | null>(() => {
+	const workflowExecution = workflowsStore.getWorkflowExecution;
+	if (workflowExecution === null) {
+		return null;
+	}
+	const executionData = workflowExecution.data;
+	return executionData ? executionData.resultData.runData : null;
 });
+
+const binaryData = computed<IBinaryData | null>(() => {
+	if (
+		typeof props.displayData.node !== 'string' ||
+		typeof props.displayData.key !== 'string' ||
+		typeof props.displayData.runIndex !== 'number' ||
+		typeof props.displayData.index !== 'number' ||
+		typeof props.displayData.outputIndex !== 'number'
+	) {
+		return null;
+	}
+
+	const binaryDataLocal = nodeHelpers.getBinaryData(
+		workflowRunData.value,
+		props.displayData.node,
+		props.displayData.runIndex,
+		props.displayData.outputIndex,
+	);
+
+	if (binaryDataLocal.length === 0) {
+		return null;
+	}
+
+	if (
+		props.displayData.index >= binaryDataLocal.length ||
+		binaryDataLocal[props.displayData.index][props.displayData.key] === undefined
+	) {
+		return null;
+	}
+
+	const binaryDataItem: IBinaryData =
+		binaryDataLocal[props.displayData.index][props.displayData.key];
+
+	return binaryDataItem;
+});
+
+function closeWindow() {
+	// Handle the close externally as the visible parameter is an external prop
+	// and is so not allowed to be changed here.
+	emit('close');
+	return false;
+}
 </script>
 
 <style lang="scss">