feat(editor, core, cli): implement new workflow experience (#4358)

* feat(ExecuteWorkflowTrigger node): Implement ExecuteWorkflowTrigger node (#4108)

* feat(ExecuteWorkflowTrigger node): Implement ExecuteWorkflowTrigger node

* feat(editor): Do not show duplicate button if canvas contains `maxNodes` amount of nodes

* feat(ManualTrigger node): Implement ManualTrigger node (#4110)

* feat(ManualTrigger node): Implement ManualTrigger node

* 📝 Remove generics doc items from ManualTrigger node

* feat(editor-ui): Trigger tab redesign (#4150)

* 🚧 Begin with TriggerPanel implementation, add Other Trigger Nodes subcategory

* 🚧 Extracted categorized categories/subcategory/nodes rendering into its own component — CategorizedItems, removed SubcategoryPanel, added translations

* ✨ Implement MainPanel background scrim

* ♻️ Move `categoriesWithNodes`, 'visibleNodeTypes` and 'categorizedItems` to store, implemented dynamic categories count based on `selectedType`

* 🐛 Fix SlideTransition for all the NodeCreato panels

* 💄 Fix cursos for CategoryItem and NodeItem

* 🐛 Make sure ALL_NODE_FILTER is always set when MainPanel is mounted

* 🎨 Address PR comments

* label: Use Array type for CategorizedItems props

* 🏷️ Add proper types for Vue props

* 🎨 Use standard component registration for CategorizedItems inside TriggerHelperPanel

* 🎨 Use kebab case for main-panel and icon component

* 🏷️ Improve types

* feat(editor-ui): Redesign search input inside node creator panel (#4204)

* 🚧 Begin with TriggerPanel implementation, add Other Trigger Nodes subcategory

* 🚧 Extracted categorized categories/subcategory/nodes rendering into its own component — CategorizedItems, removed SubcategoryPanel, added translations

* ✨ Implement MainPanel background scrim

* ♻️ Move `categoriesWithNodes`, 'visibleNodeTypes` and 'categorizedItems` to store, implemented dynamic categories count based on `selectedType`

* 🐛 Fix SlideTransition for all the NodeCreato panels

* 💄 Fix cursos for CategoryItem and NodeItem

* 🐛 Make sure ALL_NODE_FILTER is always set when MainPanel is mounted

* 🎨 Address PR comments

* label: Use Array type for CategorizedItems props

* 🏷️ Add proper types for Vue props

* 🎨 Use standard component registration for CategorizedItems inside TriggerHelperPanel

* ✨ Redesign search input and unify usage of categorized items

* 🏷️ Use lowercase "Boolean" as `isSearchVisible` computed return type

* 🔥 Remove useless emit

* ✨ Implement no result view based on subcategory, minor fixes

* 🎨 Remove unused properties

* feat(node-email): Change EmailReadImap display name and name (#4239)

* feat(editor-ui):  Implement "Choose a Triger" action and related behaviour (#4226)

* ✨ Implement "Choose a Triger" action and related behaviour

* 🔇 Lint fix

* ♻️ Remove PlaceholderTrigger node, add a button instead

* 🎨 Merge onMouseEnter and onMouseLeave to a single function

* 💡 Add comment

* 🔥 Remove PlaceholderNode registration

* 🎨 Rename TriggerPlaceholderButton to CanvasAddButton

* ✨ Add method to unregister custom action and rework CanvasAddButton centering logic

* 🎨 Run `setRecenteredCanvasAddButtonPosition` on `CanvasAddButton` mount

* fix(editor): Fix selecting of node from node-creator panel by clicking

* 🔀 Merge fixes

* fix(editor): Show execute workflow trigger instead of workflow trigger in the trigger helper panel

* feat(editor): Fix node creator panel slide transition (#4261)

* fix(editor): Fix node creator panel slide-in/slide-out transitions

* 🎨 Fix naming

* 🎨 Use kebab-case for transition component name

* feat(editor): Disable execution and show notice when user tries to run workflow without enabled triggers

* fix(editor): Address first batch of new WF experience review (#4279)

* fix(editor): Fix first batch of review items

* bug(editor): Fix nodeview canvas add button centering

* 🔇 Fix linter errors

* bug(ManualTrigger Node): Fix manual trigger node execution

* fix(editor): Do not show canvas add button in execution or demo mode and prevent clicking if creator is open

* fix(editor): do not show pin data tooltip for manual trigger node

* fix(editor): do not use nodeViewOffset on zoomToFit

* 💄 Add margin for last node creator item and set font-weight to 700 for category title

* ✨ Position welcome note next to the added trigger node

* 🐛 Remve always true welcome note

* feat(editor): Minor UI and UX tweaks (#4328)

* 💄 Make top viewport buttons less prominent

* ✨ Allow user to switch to all tabs if it contains filter results, move nodecreator state props to its own module

* 🔇 Fix linting errors

* 🔇 Fix linting errors

* 🔇 Fix linting errors

* chore(build): Ping Turbo version to 1.5.5

* 💄 Minor traigger panel and node view style changes

* 💬 Update display name of execute workflow trigger

* feat(core, editor): Update subworkflow execution logic (#4269)

* ✨ Implement `findWorkflowStart`

* ⚡ Extend `WorkflowOperationError`

* ⚡ Add `WorkflowOperationError` to toast

* 📘 Extend interface

* ✨ Add `subworkflowExecutionError` to store

* ✨ Create `SubworkflowOperationError`

* ⚡ Render subworkflow error as node error

* 🚚 Move subworkflow start validation to `cli`

* ⚡ Reset subworkflow execution error state

* 🔥 Remove unused import

* ⚡ Adjust CLI commands

* 🔥 Remove unneeded check

* 🔥 Remove stray log

* ⚡ Simplify syntax

* ⚡ Sort in case both Start and EWT present

* ♻️ Address Omar's feedback

* 🔥 Remove unneeded lint exception

* ✏️ Fix copy

* 👕 Fix lint

* fix: moved find start node function to catchable place

Co-authored-by: Omar Ajoue <krynble@gmail.com>

* 💄 Change ExecuteWorkflow node to primary

* ✨ Allow user to navigate to all tab if it contains search results

* 🐛 Fixed canvas control button while in demo, disable workflow activation for non-activavle nodes and revert zoomToFit bottom offset

* :fix: Do not chow request text if there's results

* 💬 Update noResults text

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Omar Ajoue <krynble@gmail.com>

packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue

@@ -3,9 +3,9 @@
 		draggable
 		@dragstart="onDragStart"
 		@dragend="onDragEnd"
-		:class="{[$style['node-item']]: true, [$style.bordered]: bordered}"
+		:class="{[$style['node-item']]: true}"
 	>
-		<NodeIcon :class="$style['node-icon']" :nodeType="nodeType" />
+		<node-icon :class="$style['node-icon']" :nodeType="nodeType" />
 		<div>
 			<div :class="$style.details">
 				<span :class="$style.name">
@@ -16,7 +16,7 @@
 					}}
 				</span>
 				<span v-if="isTrigger" :class="$style['trigger-icon']">
-					<TriggerIcon />
+					<trigger-icon />
 				</span>
 				<n8n-tooltip v-if="isCommunityNode" placement="top">
 					<div
@@ -45,7 +45,7 @@
 					ref="draggable"
 					v-show="dragging"
 				>
-					<NodeIcon class="node-icon" :nodeType="nodeType" :size="40" :shrink="false" />
+					<node-icon class="node-icon" :nodeType="nodeType" :size="40" :shrink="false" />
 				</div>
 			</transition>
 		</div>
@@ -54,26 +54,29 @@
 
 <script lang="ts">
 
-import {getNewNodePosition, NODE_SIZE} from '@/views/canvasHelpers';
-import Vue from 'vue';
-
-import NodeIcon from '../../NodeIcon.vue';
-import TriggerIcon from '../../TriggerIcon.vue';
+import Vue, { PropType } from 'vue';
+import { INodeTypeDescription } from 'n8n-workflow';
 
+import { getNewNodePosition, NODE_SIZE } from '@/views/canvasHelpers';
 import { COMMUNITY_NODES_INSTALLATION_DOCS_URL } from '@/constants';
-import { isCommunityPackageName } from '../../helpers';
 
-Vue.component('NodeIcon', NodeIcon);
-Vue.component('TriggerIcon', TriggerIcon);
+import NodeIcon from '@/components/NodeIcon.vue';
+import TriggerIcon from '@/components/TriggerIcon.vue';
+import { isCommunityPackageName } from '@/components/helpers';
+
+Vue.component('node-icon', NodeIcon);
+Vue.component('trigger-icon', TriggerIcon);
 
 export default Vue.extend({
 	name: 'NodeItem',
-	props: [
-		'active',
-		'filter',
-		'nodeType',
-		'bordered',
-	],
+	props: {
+		nodeType: {
+			type: Object as PropType<INodeTypeDescription>,
+		},
+		active: {
+			type: Boolean,
+		},
+	},
 	data() {
 		return {
 			dragging: false,
@@ -160,10 +163,7 @@ export default Vue.extend({
 	margin-left: 15px;
 	margin-right: 12px;
 	display: flex;
-
-	&.bordered {
-		border-bottom: 1px solid $node-creator-border-color;
-	}
+	cursor: grab;
 }
 
 .details {
@@ -177,7 +177,7 @@ export default Vue.extend({
 }
 
 .name {
-	font-weight: bold;
+	font-weight: var(--font-weight-bold);
 	font-size: 14px;
 	line-height: 18px;
 	margin-right: 5px;
@@ -189,7 +189,7 @@ export default Vue.extend({
 
 .description {
 	margin-top: 2px;
-	font-size: 11px;
+	font-size: var(--font-size-2xs);
 	line-height: 16px;
 	font-weight: 400;
 	color: $node-creator-description-color;