From 28ad66cc1208e169fa6349f67a5ce08c785192ab Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Thu, 7 Nov 2024 09:26:06 -0500
Subject: [PATCH] refactor(editor): Extract `OrderSwitcher` component out of
 `ActionsMode.vue` (#11626)

---
 .../Node/NodeCreator/Modes/ActionsMode.vue    | 26 ++-----------------
 .../Node/NodeCreator/OrderSwitcher.vue        | 21 +++++++++++++++
 2 files changed, 23 insertions(+), 24 deletions(-)
 create mode 100644 packages/editor-ui/src/components/Node/NodeCreator/OrderSwitcher.vue

diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue b/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
index 728215c02c..7952a489d0 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Modes/ActionsMode.vue
@@ -1,16 +1,13 @@
 <script setup lang="ts">
-import { computed, onMounted, defineComponent, h } from 'vue';
-import type { PropType } from 'vue';
+import { computed, onMounted } from 'vue';
 import type {
 	INodeCreateElement,
-	NodeFilterType,
 	IUpdateInformation,
 	ActionCreateElement,
 	NodeCreateElement,
 } from '@/Interface';
 import {
 	HTTP_REQUEST_NODE_TYPE,
-	REGULAR_NODE_CREATOR_VIEW,
 	TRIGGER_NODE_CREATOR_VIEW,
 	CUSTOM_API_CALL_KEY,
 	OPEN_AI_NODE_MESSAGE_ASSISTANT_TYPE,
@@ -30,6 +27,7 @@ import type { IDataObject } from 'n8n-workflow';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useI18n } from '@/composables/useI18n';
 import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
+import OrderSwitcher from './../OrderSwitcher.vue';
 
 const emit = defineEmits<{
 	nodeTypeSelected: [value: [actionKey: string, nodeName: string] | [nodeName: string]];
@@ -212,26 +210,6 @@ function addHttpNode() {
 	nodeCreatorStore.onActionsCustomAPIClicked({ app_identifier });
 }
 
-// Anonymous component to handle triggers and actions rendering order
-const OrderSwitcher = defineComponent({
-	props: {
-		rootView: {
-			type: String as PropType<NodeFilterType>,
-			required: true,
-		},
-	},
-	setup(props, { slots }) {
-		return () =>
-			h(
-				'div',
-				{},
-				props.rootView === REGULAR_NODE_CREATOR_VIEW
-					? [slots.actions?.(), slots.triggers?.()]
-					: [slots.triggers?.(), slots.actions?.()],
-			);
-	},
-});
-
 onMounted(() => {
 	trackActionsView();
 });
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/OrderSwitcher.vue b/packages/editor-ui/src/components/Node/NodeCreator/OrderSwitcher.vue
new file mode 100644
index 0000000000..4a8ca49afd
--- /dev/null
+++ b/packages/editor-ui/src/components/Node/NodeCreator/OrderSwitcher.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { NodeFilterType } from '@/Interface';
+import { REGULAR_NODE_CREATOR_VIEW } from '@/constants';
+
+defineProps<{
+	rootView: NodeFilterType;
+}>();
+</script>
+
+<template>
+	<div>
+		<template v-if="rootView === REGULAR_NODE_CREATOR_VIEW">
+			<slot name="actions" />
+			<slot name="triggers" />
+		</template>
+		<template v-else>
+			<slot name="triggers" />
+			<slot name="actions" />
+		</template>
+	</div>
+</template>