feat(editor): Node creator actions (#4696)

* WIP: Node Actions List UI

* WIP: Recommended Actions and preseting of fields

* WIP: Resource category

* 🎨 Moved actions categorisation to the server

* 🏷️ Add missing INodeAction type

* ✨ Improve SSR categorisation, fix adding of mixed actions

* ♻️ Refactor CategorizedItems to composition api, style fixes

* WIP: Adding multiple nodes

* ♻️ Refactor rest of the NodeCreator component to composition API, conver globalLinkActions to composable

* ✨ Allow actions dragging, fix search and refactor passing of actions to categorized items

* 💄 Fix node actions title

* Migrate to the pinia store, add posthog feature and various fixes

* 🐛 Fix filtering of trigger actions when not merged

* fix: N8N-5439 — Do not use simple node item when at NodeHelperPanel root

* 🐛 Design review fixes

* 🐛 Fix disabling of merged actions

* Fix trigger root filtering

* ✨ Allow for custom node actions parser, introduce hubspot parser

* 🐛 Fix initial node params validation, fix position of second added node

* 🐛 Introduce operations category, removed canvas node names overrride, fix API actions display and prevent dragging of action nodes

* ✨ Prevent NDV auto-open feature flag

* 🐛 Inject recommened action for trigger nodes without actions

* Refactored NodeCreatorNode to Storybook, change filtering of merged nodes for the trigger helper panel, minor fixes

* Improve rendering of app nodes and animation

* Cleanup, any only enable accordion transition on triggerhelperpanel

* Hide node creator scrollbars in Firefox

* Minor styles fixes

* Do not copy the array in rendering method

* Removed unused props

* Fix memory leak

* Fix categorisation of regular nodes with a single resource

* Implement telemetry calls for node actions

* Move categorization to FE

* Fix client side actions categorisation

* Skip custom action show

* Only load tooltip for NodeIcon if necessary

* Fix lodash startCase import

* Remove lodash.startcase

* Cleanup

* Fix node creator autofocus on "tab"

* Prevent posthog getFeatureFlag from crashing

* Debugging preview env search issues

* Remove logs

* Make sure the pre-filled params are update not overwritten

* Get rid of transition in itemiterator

* WIP: Rough version of NodeActions keyboard navigation, replace nodeCreator composable with Pinia store module

* Rewrite to add support for ActionItem to ItemIterator and make CategorizedItems accept items props

* Fix category item counter & cleanup

* Add APIHint to actions search no-result, clean up NodeCreatorNode

* Improve node actions no results message

* Remove logging, fix filtering of recommended placeholder category

* Remove unused NodeActions component and node merging feature falg

* Do not show regular nodes without actions

* Make sure to add manual trigger when adding http node via actions hint

* Fixed api hint footer line height

* Prevent pointer-events od NodeIcon img and remove "this" from template

* Address PR points

* Fix e2e specs

* Make sure canvas ia loaded

* Make sure canvas ia loaded before opening nodeCreator in e2e spec

* Fix flaky workflows tags e2e getter

* Imrpove node creator click outside UX, add manual node to regular nodes added from trigger panel

* Add manual trigger node if dragging regular from trigger panel

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

@@ -5,12 +5,14 @@
 		</div>
 		<div :class="$style.text">
 			<input
-				:placeholder="$locale.baseText('nodeCreator.searchBar.searchNodes')"
-				ref="input"
+				:placeholder="placeholder"
 				:value="value"
 				@input="onInput"
 				:class="$style.input"
+				ref="inputRef"
+				autofocus
 				data-test-id="node-creator-search-bar"
+				tabindex="0"
 			/>
 		</div>
 		<div :class="$style.suffix" v-if="value.length > 0" @click="clear">
@@ -21,50 +23,56 @@
 	</div>
 </template>
 
-<script lang="ts">
-import Vue, { PropType } from 'vue';
-import mixins from 'vue-typed-mixins';
-
+<script setup lang="ts">
+import Vue, { onMounted, reactive, toRefs, onBeforeUnmount  } from 'vue';
 import { externalHooks } from '@/mixins/externalHooks';
 
-export default mixins(externalHooks).extend({
-	name: "SearchBar",
-	props: {
-		value: {
-			type: String,
-		},
-		eventBus: {
-			type: Object as PropType<Vue>,
-		},
-	},
-	mounted() {
-		if (this.eventBus) {
-			this.eventBus.$on("focus", this.focus);
-		}
-		setTimeout(this.focus, 0);
+export interface Props {
+	placeholder: string;
+	value: string;
+	eventBus?: Vue;
+}
 
-		this.$externalHooks().run('nodeCreator_searchBar.mount', { inputRef: this.$refs['input'] });
-	},
-	methods: {
-		focus() {
-			const input = this.$refs.input as HTMLInputElement;
-			if (input) {
-				input.focus();
-			}
-		},
-		onInput(event: InputEvent) {
-			const input = event.target as HTMLInputElement;
-			this.$emit("input", input.value);
-		},
-		clear() {
-			this.$emit("input", "");
-		},
-	},
-	beforeDestroy() {
-		if (this.eventBus) {
-			this.eventBus.$off("focus", this.focus);
-		}
-	},
+withDefaults(defineProps<Props>(), {
+	placeholder: '',
+	value: '',
+});
+
+const emit = defineEmits<{
+	(event: 'input', value: string): void,
+}>();
+
+const { $externalHooks } = new externalHooks();
+
+const state = reactive({
+	inputRef: null as HTMLInputElement | null,
+});
+
+function focus() {
+	state.inputRef?.focus();
+}
+
+function onInput(event: Event) {
+	const input = event.target as HTMLInputElement;
+	emit("input", input.value);
+}
+
+function clear() {
+	emit("input", "");
+}
+
+onMounted(() => {
+	$externalHooks().run('nodeCreator_searchBar.mount', { inputRef: state.inputRef });
+	setTimeout(focus, 0);
+});
+
+onBeforeUnmount(() => {
+	state.inputRef?.remove();
+});
+
+const { inputRef } = toRefs(state);
+defineExpose({
+	focus,
 });
 </script>
 
@@ -74,7 +82,7 @@ export default mixins(externalHooks).extend({
 	height: 40px;
 	padding: var(--spacing-s) var(--spacing-xs);
 	align-items: center;
-	margin: var(--spacing-s);
+	margin: var(--search-margin, var(--spacing-s));
 	filter: drop-shadow(0px 2px 5px rgba(46, 46, 50, 0.04));
 
 	border: 1px solid $node-creator-border-color;