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">

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

@@ -18,77 +18,60 @@
 				:show-length="true"
 			/>
 			<RunDataHtml v-else-if="binaryData.fileType === 'html'" :input-html="data" />
-			<embed v-else :src="embedSource" class="binary-data" :class="embedClass()" />
+			<embed v-else :src="embedSource" class="binary-data" :class="embedClass" />
 		</span>
 	</span>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useWorkflowsStore } from '@/stores/workflows.store';
 import type { IBinaryData } from 'n8n-workflow';
 import { jsonParse } from 'n8n-workflow';
-import type { PropType } from 'vue';
 import VueJsonPretty from 'vue-json-pretty';
-import { useWorkflowsStore } from '@/stores/workflows.store';
 import RunDataHtml from '@/components/RunDataHtml.vue';
 
-export default defineComponent({
-	name: 'BinaryDataDisplayEmbed',
-	components: {
-		VueJsonPretty,
-		RunDataHtml,
-	},
-	props: {
-		binaryData: {
-			type: Object as PropType<IBinaryData>,
-			required: true,
-		},
-	},
-	data() {
-		return {
-			isLoading: true,
-			embedSource: '',
-			error: false,
-			data: '',
-		};
-	},
-	computed: {
-		...mapStores(useWorkflowsStore),
-	},
-	async mounted() {
-		const { id, data, fileName, fileType, mimeType } = this.binaryData;
-		const isJSONData = fileType === 'json';
-		const isHTMLData = fileType === 'html';
+const props = defineProps<{
+	binaryData: IBinaryData;
+}>();
 
-		if (!id) {
-			if (isJSONData || isHTMLData) {
-				this.data = jsonParse(atob(data));
-			} else {
-				this.embedSource = 'data:' + mimeType + ';base64,' + data;
-			}
+const isLoading = ref(true);
+const embedSource = ref('');
+const error = ref(false);
+const data = ref('');
+
+const workflowsStore = useWorkflowsStore();
+
+const embedClass = computed(() => {
+	return [props.binaryData.fileType ?? 'other'];
+});
+
+onMounted(async () => {
+	const { id, data: binaryData, fileName, fileType, mimeType } = props.binaryData;
+	const isJSONData = fileType === 'json';
+	const isHTMLData = fileType === 'html';
+
+	if (!id) {
+		if (isJSONData || isHTMLData) {
+			data.value = jsonParse(atob(binaryData));
 		} else {
-			try {
-				const binaryUrl = this.workflowsStore.getBinaryUrl(id, 'view', fileName ?? '', mimeType);
-				if (isJSONData || isHTMLData) {
-					const fetchedData = await fetch(binaryUrl, { credentials: 'include' });
-					this.data = await (isJSONData ? fetchedData.json() : fetchedData.text());
-				} else {
-					this.embedSource = binaryUrl;
-				}
-			} catch (e) {
-				this.error = true;
-			}
+			embedSource.value = 'data:' + mimeType + ';base64,' + binaryData;
 		}
+	} else {
+		try {
+			const binaryUrl = workflowsStore.getBinaryUrl(id, 'view', fileName ?? '', mimeType);
+			if (isJSONData || isHTMLData) {
+				const fetchedData = await fetch(binaryUrl, { credentials: 'include' });
+				data.value = await (isJSONData ? fetchedData.json() : fetchedData.text());
+			} else {
+				embedSource.value = binaryUrl;
+			}
+		} catch (e) {
+			error.value = true;
+		}
+	}
 
-		this.isLoading = false;
-	},
-	methods: {
-		embedClass(): string[] {
-			const { fileType } = this.binaryData;
-			return [fileType ?? 'other'];
-		},
-	},
+	isLoading.value = false;
 });
 </script>
 

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

@@ -35,6 +35,7 @@
 		</n8n-callout>
 
 		<BinaryDataDisplay
+			v-if="binaryDataDisplayData"
 			:window-visible="binaryDataDisplayVisible"
 			:display-data="binaryDataDisplayData"
 			@close="closeBinaryDataDisplay"