refactor(editor): Migrate NodeDetailsView.vue to use script setup (no-changelog) (#9762)

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

@@ -138,8 +138,8 @@
 	</el-dialog>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
 import { createEventBus } from 'n8n-design-system/utils';
 import type { IRunData, ConnectionTypes } from 'n8n-workflow';
 import { jsonParse, NodeHelpers, NodeConnectionType } from 'n8n-workflow';
@@ -177,28 +177,7 @@ import { useTelemetry } from '@/composables/useTelemetry';
 import { useI18n } from '@/composables/useI18n';
 import { storeToRefs } from 'pinia';
 
-export default defineComponent({
+const emit = defineEmits([
-	name: 'NodeDetailsView',
-	components: {
-		NodeSettings,
-		InputPanel,
-		OutputPanel,
-		NDVDraggablePanels,
-		TriggerPanel,
-	},
-	props: {
-		readOnly: {
-			type: Boolean,
-		},
-		renaming: {
-			type: Boolean,
-		},
-		isProductionExecutionPreview: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: [
 	'saveKeyboardShortcut',
 	'valueChanged',
 	'nodeTypeSelected',
@@ -206,8 +185,14 @@ export default defineComponent({
 	'openConnectionNodeCreator',
 	'redrawNode',
 	'stopExecution',
-	],
+]);
-	setup(props, { emit }) {
+
+const props = defineProps<{
+	readOnly: boolean;
+	renaming: boolean;
+	isProductionExecutionPreview: boolean;
+}>();
+
 const ndvStore = useNDVStore();
 const externalHooks = useExternalHooks();
 const nodeHelpers = useNodeHelpers();
@@ -282,8 +267,7 @@ export default defineComponent({
 const parentNodes = computed(() => {
 	if (activeNode.value) {
 		return (
-					workflow.value.getParentNodesByDepth(activeNode.value.name, 1).map(({ name }) => name) ||
+			workflow.value.getParentNodesByDepth(activeNode.value.name, 1).map(({ name }) => name) || []
-					[]
 		);
 	} else {
 		return [];
@@ -339,9 +323,7 @@ export default defineComponent({
 
 const hasOutputConnection = computed(() => {
 	if (!activeNode.value) return false;
-			const outgoingConnections = workflowsStore.outgoingConnectionsByNodeName(
+	const outgoingConnections = workflowsStore.outgoingConnectionsByNodeName(activeNode.value.name);
-				activeNode.value.name,
-			);
 
 	// Check if there's at-least one output connection
 	return (Object.values(outgoingConnections)?.[0]?.[0] ?? []).length > 0;
@@ -394,11 +376,7 @@ export default defineComponent({
 		return 0;
 	}
 
-			const outputs = NodeHelpers.getNodeOutputs(
+	const outputs = NodeHelpers.getNodeOutputs(workflow.value, workflowNode, activeNodeType.value);
-				workflow.value,
-				workflowNode,
-				activeNodeType.value,
-			);
 
 	let node = inputNode.value;
 
@@ -458,10 +436,7 @@ export default defineComponent({
 	const usedCredentials = workflowsStore.usedCredentials;
 
 	const foreignCredentialsArray: string[] = [];
-			if (
+	if (credentials && settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
-				credentials &&
-				settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)
-			) {
 		Object.values(credentials).forEach((credential) => {
 			if (
 				credential.id &&
@@ -777,9 +752,7 @@ export default defineComponent({
 						parameters_pane_position: mainPanelPosition.value,
 						input_first_connector_runs: maxInputRun.value,
 						output_first_connector_runs: maxOutputRun.value,
-								selected_view_inputs: isTriggerNode.value
+						selected_view_inputs: isTriggerNode.value ? 'trigger' : ndvStore.inputPanelDisplayMode,
-									? 'trigger'
-									: ndvStore.inputPanelDisplayMode,
 						selected_view_outputs: ndvStore.outputPanelDisplayMode,
 						input_connectors: parentNodes.value.length,
 						output_connectors: outgoingConnections?.main?.length,
@@ -825,70 +798,6 @@ export default defineComponent({
 onBeforeUnmount(() => {
 	dataPinningEventBus.off('data-pinning-discovery', setIsTooltipVisible);
 });
-
-		return {
-			externalHooks,
-			nodeHelpers,
-			pinnedData,
-			workflowHelpers,
-			workflowActivate,
-			redrawRequired,
-			isInputPaneActive,
-			isDragging,
-			activeNodeType,
-			pushRef,
-			workflowRunning,
-			showTriggerWaitingWarning,
-			activeNode,
-			isExecutableTriggerNode,
-			showTriggerPanel,
-			hasOutputConnection,
-			blockUi,
-			isActiveStickyNode,
-			isTriggerNode,
-			workflow,
-			canLinkRuns,
-			inputRun,
-			linked,
-			inputNodeName,
-			inputSize,
-			hasForeignCredential,
-			outputRun,
-			isOutputPaneActive,
-			foreignCredentials,
-			featureRequestUrl,
-			settingsEventBus,
-			inputPanelMargin,
-			nodeTypeSelected,
-			onOutputItemHover,
-			onOutputTableMounted,
-			onInputTableMounted,
-			onRunOutputIndexChange,
-			onStopExecution,
-			activateInputPane,
-			activateOutputPane,
-			onSearch,
-			onInputNodeChange,
-			onRunInputIndexChange,
-			onLinkRunToInput,
-			valueChanged,
-			onSwitchSelectedNode,
-			onOpenConnectionNodeCreator,
-			close,
-			onKeyDown,
-			onInputItemHover,
-			onWorkflowActivate,
-			onFeatureRequestClick,
-			onDragEnd,
-			onDragStart,
-			onPanelsInit,
-			onLinkRunToOutput,
-			onUnlinkRun,
-			onNodeExecute,
-			openSettings,
-		};
-	},
-});
 </script>
 
 <style lang="scss">