From d8c2dffc37155eb013a12d21cab6504264d16b8e Mon Sep 17 00:00:00 2001
From: OlegIvaniv <me@olegivaniv.com>
Date: Fri, 25 Nov 2022 12:45:36 +0100
Subject: [PATCH 1/6] fix(editor): Fix slots rendering of NodeCreator's
 NoResults component (#4721)

---
 .../Node/NodeCreator/CategorizedItems.vue     | 67 +++++++++----------
 1 file changed, 30 insertions(+), 37 deletions(-)

diff --git a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
index 36dc5032d9437..1e00350a03f9d 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
@@ -43,48 +43,41 @@
 					@selected="selected"
 				/>
 			</div>
-			<no-results v-else :showRequest="filteredAllNodeTypes.length === 0" :show-icon="filteredAllNodeTypes.length === 0">
-				<!-- There are results in other sub-categories/tabs  -->
-				<template #title>
-					<p v-if="filteredAllNodeTypes.length === 0" v-text="$locale.baseText('nodeCreator.noResults.weDidntMakeThatYet')" />
-					<p v-else v-html="$locale.baseText('nodeCreator.noResults.clickToSeeResults')" />
-				</template>
-
-				<!-- Regular Search -->
-				<template v-if="filteredAllNodeTypes.length === 0" #action>
-					{{ $locale.baseText('nodeCreator.noResults.dontWorryYouCanProbablyDoItWithThe') }}
-					<n8n-link @click="selectHttpRequest" v-if="[REGULAR_NODE_FILTER, ALL_NODE_FILTER].includes(selectedType)">
-						{{ $locale.baseText('nodeCreator.noResults.httpRequest') }}
-					</n8n-link>
-					<template v-if="selectedType === ALL_NODE_FILTER">
-						{{ $locale.baseText('nodeCreator.noResults.or') }}
+			<no-results
+				v-else
+				:showRequest="filteredAllNodeTypes.length === 0"
+				:show-icon="filteredAllNodeTypes.length === 0"
+			>
+					<!-- There are results in other sub-categories/tabs  -->
+					<template v-if="filteredAllNodeTypes.length > 0" #title>
+						<p v-html="$locale.baseText('nodeCreator.noResults.clickToSeeResults')" />
+					</template>
+
+					<!-- Regular Search -->
+					<template v-else  #title>
+						<p v-text="$locale.baseText('nodeCreator.noResults.weDidntMakeThatYet')" />
 					</template>
 
-					<no-results v-else :showRequest="filteredAllNodeTypes.length === 0" :show-icon="filteredAllNodeTypes.length === 0">
-						<!-- There are results in other sub-categories/tabs  -->
-						<template #title>
-							<p v-html="$locale.baseText('nodeCreator.noResults.clickToSeeResults')" />
-							<p v-if="filteredAllNodeTypes.length === 0" v-text="$locale.baseText('nodeCreator.noResults.weDidntMakeThatYet')" />
-							<p v-else v-html="$locale.baseText('nodeCreator.noResults.clickToSeeResults')" />
+					<template v-if="filteredAllNodeTypes.length === 0" #action>
+						{{ $locale.baseText('nodeCreator.noResults.dontWorryYouCanProbablyDoItWithThe') }}
+						<n8n-link
+							@click="selectHttpRequest"
+							v-if="[REGULAR_NODE_FILTER, ALL_NODE_FILTER].includes(nodeCreatorStore.selectedType)"
+						>
+							{{ $locale.baseText('nodeCreator.noResults.httpRequest') }}
+						</n8n-link>
+						<template v-if="nodeCreatorStore.selectedType === ALL_NODE_FILTER">
+							{{ $locale.baseText('nodeCreator.noResults.or') }}
 						</template>
 
-						<!-- Regular Search -->
-						<template v-if="filteredAllNodeTypes.length === 0" #action>
-							{{ $locale.baseText('nodeCreator.noResults.dontWorryYouCanProbablyDoItWithThe') }}
-							<n8n-link @click="selectHttpRequest" v-if="[REGULAR_NODE_FILTER, ALL_NODE_FILTER].includes(selectedType)">
-								{{ $locale.baseText('nodeCreator.noResults.httpRequest') }}
-							</n8n-link>
-							<template v-if="selectedType === ALL_NODE_FILTER">
-								{{ $locale.baseText('nodeCreator.noResults.or') }}
-							</template>
-
-							<n8n-link @click="selectWebhook" v-if="[TRIGGER_NODE_FILTER, ALL_NODE_FILTER].includes(selectedType)">
-								{{ $locale.baseText('nodeCreator.noResults.webhook') }}
-							</n8n-link>
+						<n8n-link
+							@click="selectWebhook"
+							v-if="[TRIGGER_NODE_FILTER, ALL_NODE_FILTER].includes(nodeCreatorStore.selectedType)"
+						>
+							{{ $locale.baseText('nodeCreator.noResults.webhook') }}
 							{{ $locale.baseText('nodeCreator.noResults.node') }}
-						</template>
-					</no-results>
-				</template>
+						</n8n-link>
+					</template>
 			</no-results>
 		</div>
 	</transition>

From 1821bb06992c5b6595853bd8f82c98b28a4fa2d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <netroy@users.noreply.github.com>
Date: Fri, 25 Nov 2022 13:00:59 +0100
Subject: [PATCH 2/6] fix: Lint typescript stories (no-changelog) (#4723)

* fix: Lint typescript stories (no-changelog)

* import StoryFn as type
---
 packages/design-system/.storybook/main.js                    | 2 +-
 .../src/components/N8nActionToggle/ActionToggle.stories.ts   | 3 ++-
 .../design-system/src/components/N8nAvatar/Avatar.stories.ts | 3 ++-
 .../design-system/src/components/N8nBadge/Badge.stories.ts   | 3 ++-
 .../src/components/N8nBlockUi/BlockUi.stories.ts             | 3 ++-
 .../src/components/N8nFormBox/FormBox.stories.ts             | 3 ++-
 .../src/components/N8nFormInput/FormInput.stories.ts         | 3 ++-
 .../src/components/N8nFormInputs/FormInputs.stories.ts       | 3 ++-
 .../src/components/N8nHeading/Heading.stories.ts             | 3 ++-
 .../design-system/src/components/N8nIcon/Icon.stories.ts     | 3 ++-
 .../src/components/N8nInputLabel/InputLabel.stories.ts       | 3 ++-
 .../src/components/N8nInputNumber/InputNumber.stories.ts     | 5 +++--
 .../design-system/src/components/N8nLink/Link.stories.ts     | 3 ++-
 .../src/components/N8nLoading/Loading.stories.ts             | 3 ++-
 .../src/components/N8nMarkdown/Markdown.stories.ts           | 3 ++-
 .../src/components/N8nPopover/Popover.stories.ts             | 3 ++-
 .../src/components/N8nRadioButtons/RadioButtons.stories.ts   | 3 ++-
 .../{ResizeWrapper.stories.ts => ResizeWrapper.stories.js}   | 0
 .../src/components/N8nSpinner/Spinner.stories.ts             | 3 ++-
 .../design-system/src/components/N8nSticky/Sticky.stories.ts | 3 ++-
 .../design-system/src/components/N8nTabs/Tabs.stories.ts     | 3 ++-
 packages/design-system/src/components/N8nTag/Tag.stories.ts  | 3 ++-
 .../design-system/src/components/N8nTags/Tags.stories.ts     | 3 ++-
 .../design-system/src/components/N8nText/Text.stories.ts     | 3 ++-
 .../src/components/N8nTooltip/Tooltip.stories.ts             | 3 ++-
 .../src/components/N8nUserInfo/UserInfo.stories.ts           | 3 ++-
 .../src/components/N8nUserSelect/UserSelect.stories.ts       | 3 ++-
 .../src/components/N8nUsersList/UsersList.stories.ts         | 3 ++-
 28 files changed, 54 insertions(+), 28 deletions(-)
 rename packages/design-system/src/components/N8nResizeWrapper/{ResizeWrapper.stories.ts => ResizeWrapper.stories.js} (100%)

diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js
index f11d0b2cd90f0..3e512d7a6d1ee 100644
--- a/packages/design-system/.storybook/main.js
+++ b/packages/design-system/.storybook/main.js
@@ -4,7 +4,7 @@ const path = require('path');
  * @type {import('@storybook/core-common').StorybookConfig}
  */
 module.exports = {
-	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.ts'],
+	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.{ts,js}'],
 	addons: [
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',
diff --git a/packages/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts b/packages/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts
index 176121f3b1b20..f3f3c03a516e3 100644
--- a/packages/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts
+++ b/packages/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts
@@ -1,5 +1,6 @@
 import N8nActionToggle from './ActionToggle.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Atoms/ActionToggle',
@@ -23,7 +24,7 @@ const methods = {
 	onAction: action('action'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nActionToggle,
diff --git a/packages/design-system/src/components/N8nAvatar/Avatar.stories.ts b/packages/design-system/src/components/N8nAvatar/Avatar.stories.ts
index a1d22012758e2..b690009016421 100644
--- a/packages/design-system/src/components/N8nAvatar/Avatar.stories.ts
+++ b/packages/design-system/src/components/N8nAvatar/Avatar.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nAvatar from './Avatar.vue';
 
 export default {
@@ -11,7 +12,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nAvatar,
diff --git a/packages/design-system/src/components/N8nBadge/Badge.stories.ts b/packages/design-system/src/components/N8nBadge/Badge.stories.ts
index 6d0a65a556688..ac4d178eda5da 100644
--- a/packages/design-system/src/components/N8nBadge/Badge.stories.ts
+++ b/packages/design-system/src/components/N8nBadge/Badge.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nBadge from './Badge.vue';
 
 export default {
@@ -15,7 +16,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nBadge,
diff --git a/packages/design-system/src/components/N8nBlockUi/BlockUi.stories.ts b/packages/design-system/src/components/N8nBlockUi/BlockUi.stories.ts
index f9a8f8a842382..bbcc750712199 100644
--- a/packages/design-system/src/components/N8nBlockUi/BlockUi.stories.ts
+++ b/packages/design-system/src/components/N8nBlockUi/BlockUi.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nBlockUi from './BlockUi.vue';
 
 export default {
@@ -5,7 +6,7 @@ export default {
 	component: N8nBlockUi,
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nBlockUi,
diff --git a/packages/design-system/src/components/N8nFormBox/FormBox.stories.ts b/packages/design-system/src/components/N8nFormBox/FormBox.stories.ts
index a073bd5c9147f..44a45077bdcd1 100644
--- a/packages/design-system/src/components/N8nFormBox/FormBox.stories.ts
+++ b/packages/design-system/src/components/N8nFormBox/FormBox.stories.ts
@@ -1,5 +1,6 @@
 import N8nFormBox from './FormBox.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Modules/FormBox',
@@ -15,7 +16,7 @@ const methods = {
 	onInput: action('input'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nFormBox,
diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.stories.ts b/packages/design-system/src/components/N8nFormInput/FormInput.stories.ts
index e524d60b5ffbb..1542944794c1f 100644
--- a/packages/design-system/src/components/N8nFormInput/FormInput.stories.ts
+++ b/packages/design-system/src/components/N8nFormInput/FormInput.stories.ts
@@ -1,5 +1,6 @@
 import N8nFormInput from './FormInput.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Modules/FormInput',
@@ -13,7 +14,7 @@ const methods = {
 	onChange: action('change'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nFormInput,
diff --git a/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.ts b/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.ts
index c073577a4c6c5..09f59bf2b78e0 100644
--- a/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.ts
+++ b/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.ts
@@ -1,5 +1,6 @@
 import N8nFormInputs from './FormInputs.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Modules/FormInputs',
@@ -15,7 +16,7 @@ const methods = {
 	onSubmit: action('submit'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nFormInputs,
diff --git a/packages/design-system/src/components/N8nHeading/Heading.stories.ts b/packages/design-system/src/components/N8nHeading/Heading.stories.ts
index 055a48c37021a..c581f3c7901b8 100644
--- a/packages/design-system/src/components/N8nHeading/Heading.stories.ts
+++ b/packages/design-system/src/components/N8nHeading/Heading.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nHeading from './Heading.vue';
 
 export default {
@@ -19,7 +20,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nHeading,
diff --git a/packages/design-system/src/components/N8nIcon/Icon.stories.ts b/packages/design-system/src/components/N8nIcon/Icon.stories.ts
index 6d8c5c2754e22..6d71ea5a00c2d 100644
--- a/packages/design-system/src/components/N8nIcon/Icon.stories.ts
+++ b/packages/design-system/src/components/N8nIcon/Icon.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nIcon from './Icon.vue';
 
 export default {
@@ -21,7 +22,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nIcon,
diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.stories.ts b/packages/design-system/src/components/N8nInputLabel/InputLabel.stories.ts
index 828d22b1136a1..8eb6539865391 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.stories.ts
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.stories.ts
@@ -1,5 +1,6 @@
 import N8nInputLabel from './InputLabel.vue';
 import N8nInput from '../N8nInput';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Atoms/Input Label',
@@ -10,7 +11,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nInputLabel,
diff --git a/packages/design-system/src/components/N8nInputNumber/InputNumber.stories.ts b/packages/design-system/src/components/N8nInputNumber/InputNumber.stories.ts
index fae34a57835a8..78ce48e77d9f5 100644
--- a/packages/design-system/src/components/N8nInputNumber/InputNumber.stories.ts
+++ b/packages/design-system/src/components/N8nInputNumber/InputNumber.stories.ts
@@ -1,5 +1,6 @@
 import N8nInputNumber from './InputNumber.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Atoms/Input Number',
@@ -51,7 +52,7 @@ const methods = {
 	onInput: action('input'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nInputNumber,
@@ -71,7 +72,7 @@ Input.args = {
 	controls: false,
 };
 
-const ManyTemplate = (args, { argTypes }) => ({
+const ManyTemplate: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nInputNumber,
diff --git a/packages/design-system/src/components/N8nLink/Link.stories.ts b/packages/design-system/src/components/N8nLink/Link.stories.ts
index 2224190d1f1c0..6daeb93d64ac4 100644
--- a/packages/design-system/src/components/N8nLink/Link.stories.ts
+++ b/packages/design-system/src/components/N8nLink/Link.stories.ts
@@ -1,5 +1,6 @@
 import N8nLink from './Link.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Atoms/Link',
@@ -18,7 +19,7 @@ const methods = {
 	onClick: action('click'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nLink,
diff --git a/packages/design-system/src/components/N8nLoading/Loading.stories.ts b/packages/design-system/src/components/N8nLoading/Loading.stories.ts
index 2d08e3a409d1f..86f0bd1461104 100644
--- a/packages/design-system/src/components/N8nLoading/Loading.stories.ts
+++ b/packages/design-system/src/components/N8nLoading/Loading.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nLoading from './Loading.vue';
 
 export default {
@@ -29,7 +30,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nLoading,
diff --git a/packages/design-system/src/components/N8nMarkdown/Markdown.stories.ts b/packages/design-system/src/components/N8nMarkdown/Markdown.stories.ts
index 93259c5b34337..b185505b6c21c 100644
--- a/packages/design-system/src/components/N8nMarkdown/Markdown.stories.ts
+++ b/packages/design-system/src/components/N8nMarkdown/Markdown.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nMarkdown from './Markdown.vue';
 
 export default {
@@ -29,7 +30,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nMarkdown,
diff --git a/packages/design-system/src/components/N8nPopover/Popover.stories.ts b/packages/design-system/src/components/N8nPopover/Popover.stories.ts
index f2709a2429d73..36bd7179c78f1 100644
--- a/packages/design-system/src/components/N8nPopover/Popover.stories.ts
+++ b/packages/design-system/src/components/N8nPopover/Popover.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nPopover from './Popover.vue';
 
 export default {
@@ -34,7 +35,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nPopover,
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts
index 27efc67487b64..c711b0ce85a2b 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts
@@ -1,6 +1,7 @@
 import N8nRadioButtons from './RadioButtons.vue';
 
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Atoms/RadioButtons',
@@ -20,7 +21,7 @@ const methods = {
 	onInput: action('input'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nRadioButtons,
diff --git a/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.ts b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js
similarity index 100%
rename from packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.ts
rename to packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js
diff --git a/packages/design-system/src/components/N8nSpinner/Spinner.stories.ts b/packages/design-system/src/components/N8nSpinner/Spinner.stories.ts
index 7e3acff6152b7..0a51e8ec4ce14 100644
--- a/packages/design-system/src/components/N8nSpinner/Spinner.stories.ts
+++ b/packages/design-system/src/components/N8nSpinner/Spinner.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nSpinner from './Spinner.vue';
 
 export default {
@@ -19,7 +20,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nSpinner,
diff --git a/packages/design-system/src/components/N8nSticky/Sticky.stories.ts b/packages/design-system/src/components/N8nSticky/Sticky.stories.ts
index c41339456af9d..d453e5e6a8dfd 100644
--- a/packages/design-system/src/components/N8nSticky/Sticky.stories.ts
+++ b/packages/design-system/src/components/N8nSticky/Sticky.stories.ts
@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 import N8nSticky from './Sticky.vue';
 
 export default {
@@ -45,7 +46,7 @@ const methods = {
 	onResizeStart: action('resizestart'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nSticky,
diff --git a/packages/design-system/src/components/N8nTabs/Tabs.stories.ts b/packages/design-system/src/components/N8nTabs/Tabs.stories.ts
index b8cc4f0f2bdd1..2cb7a55e4f128 100644
--- a/packages/design-system/src/components/N8nTabs/Tabs.stories.ts
+++ b/packages/design-system/src/components/N8nTabs/Tabs.stories.ts
@@ -1,6 +1,7 @@
 import N8nTabs from './Tabs.vue';
 
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Atoms/Tabs',
@@ -15,7 +16,7 @@ const methods = {
 	onInput: action('input'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nTabs,
diff --git a/packages/design-system/src/components/N8nTag/Tag.stories.ts b/packages/design-system/src/components/N8nTag/Tag.stories.ts
index 3f3c9490ce4d5..3ce2fe65a8596 100644
--- a/packages/design-system/src/components/N8nTag/Tag.stories.ts
+++ b/packages/design-system/src/components/N8nTag/Tag.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nTag from './Tag.vue';
 
 export default {
@@ -12,7 +13,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nTag,
diff --git a/packages/design-system/src/components/N8nTags/Tags.stories.ts b/packages/design-system/src/components/N8nTags/Tags.stories.ts
index 0fa9b3af45328..a4d751cf45bd5 100644
--- a/packages/design-system/src/components/N8nTags/Tags.stories.ts
+++ b/packages/design-system/src/components/N8nTags/Tags.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nTags from './Tags.vue';
 
 export default {
@@ -6,7 +7,7 @@ export default {
 	argTypes: {},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nTags,
diff --git a/packages/design-system/src/components/N8nText/Text.stories.ts b/packages/design-system/src/components/N8nText/Text.stories.ts
index 49d12dd7074cc..dd0313f3b1bc8 100644
--- a/packages/design-system/src/components/N8nText/Text.stories.ts
+++ b/packages/design-system/src/components/N8nText/Text.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nText from './Text.vue';
 
 export default {
@@ -27,7 +28,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nText,
diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.stories.ts b/packages/design-system/src/components/N8nTooltip/Tooltip.stories.ts
index 60c2a410e4d0e..337d50ebb1e36 100644
--- a/packages/design-system/src/components/N8nTooltip/Tooltip.stories.ts
+++ b/packages/design-system/src/components/N8nTooltip/Tooltip.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nTooltip from './Tooltip.vue';
 
 export default {
@@ -34,7 +35,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nTooltip,
diff --git a/packages/design-system/src/components/N8nUserInfo/UserInfo.stories.ts b/packages/design-system/src/components/N8nUserInfo/UserInfo.stories.ts
index dd521b000a2e1..29247db8f0a37 100644
--- a/packages/design-system/src/components/N8nUserInfo/UserInfo.stories.ts
+++ b/packages/design-system/src/components/N8nUserInfo/UserInfo.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nUserInfo from './UserInfo.vue';
 
 export default {
@@ -8,7 +9,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nUserInfo,
diff --git a/packages/design-system/src/components/N8nUserSelect/UserSelect.stories.ts b/packages/design-system/src/components/N8nUserSelect/UserSelect.stories.ts
index 875fe2df42fc0..dfc574dcabacd 100644
--- a/packages/design-system/src/components/N8nUserSelect/UserSelect.stories.ts
+++ b/packages/design-system/src/components/N8nUserSelect/UserSelect.stories.ts
@@ -1,5 +1,6 @@
 import N8nUserSelect from './UserSelect.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Modules/UserSelect',
@@ -16,7 +17,7 @@ const methods = {
 	onFocus: action('focus'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nUserSelect,
diff --git a/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts b/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts
index 63a9415275b07..f3e9e65d751b2 100644
--- a/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts
+++ b/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts
@@ -1,5 +1,6 @@
 import N8nUsersList from './UsersList.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Modules/UsersList',
@@ -15,7 +16,7 @@ const methods = {
 	onDelete: action('delete'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nUsersList,

From 62d30f2b43558e16f8f0b2716f73f80cfee54d74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 25 Nov 2022 13:09:44 +0100
Subject: [PATCH 3/6] test: Set up e2e tests for HTTP Request node (#4718)

* :test_tube: Add test identifiers

* :zap: Add getters

* :test_tube: Add initial test

* :zap: Refactor to use actions

* :zap: Refactor per Oleg's advice

* :bug: Fix overlapping input label IDs
---
 cypress/e2e/4-http-request-node.cy.ts         | 23 ++++++++++
 cypress/pages/workflow.ts                     | 43 ++++++++++++++++++-
 cypress/pages/workflows.ts                    |  6 +++
 packages/editor-ui/src/components/Node.vue    |  4 +-
 .../src/components/Node/NodeCreation.vue      |  2 +-
 .../components/Node/NodeCreator/SearchBar.vue |  1 +
 .../src/components/NodeDetailsView.vue        |  1 +
 .../src/components/ParameterInputExpanded.vue |  1 +
 .../src/components/ParameterInputWrapper.vue  |  4 +-
 .../editor-ui/src/views/CanvasAddButton.vue   |  2 +-
 10 files changed, 80 insertions(+), 7 deletions(-)
 create mode 100644 cypress/e2e/4-http-request-node.cy.ts

diff --git a/cypress/e2e/4-http-request-node.cy.ts b/cypress/e2e/4-http-request-node.cy.ts
new file mode 100644
index 0000000000000..3ba914b1aa28a
--- /dev/null
+++ b/cypress/e2e/4-http-request-node.cy.ts
@@ -0,0 +1,23 @@
+import { WorkflowsPage as WorkflowsPageClass } from '../pages/workflows';
+import { WorkflowPage as WorkflowPageClass } from '../pages/workflow';
+
+const WorkflowsPage = new WorkflowsPageClass();
+const WorkflowPage = new WorkflowPageClass();
+
+describe('HTTP Request node', () => {
+	beforeEach(() => {
+		cy.skipSetup();
+	});
+
+	it('should make a request with a URL and receive a response', () => {
+		WorkflowsPage.actions.createWorkflowFromCard();
+		WorkflowPage.actions.addInitialNodeToCanvas('Manual Trigger');
+		WorkflowPage.actions.addNodeToCanvas('HTTP Request');
+		WorkflowPage.actions.openNodeNdv('HTTP Request');
+		WorkflowPage.actions.typeIntoParameterInput('url', 'https://google.com');
+
+		WorkflowPage.actions.executeNodeFromNdv();
+
+		WorkflowPage.getters.ndvOutputPanel().contains('<!doctype html>');
+	});
+});
diff --git a/cypress/pages/workflow.ts b/cypress/pages/workflow.ts
index 538a4086aacd8..f6326f837e3a1 100644
--- a/cypress/pages/workflow.ts
+++ b/cypress/pages/workflow.ts
@@ -1,11 +1,50 @@
-import { BasePage } from "./base";
+import { BasePage } from './base';
 
 export class WorkflowPage extends BasePage {
 	url = '/workflow/new';
 	getters = {
-		workflowNameInput: () => cy.getByTestId('workflow-name-input', { timeout: 5000 }).then($el => cy.wrap($el.find('input'))),
+		workflowNameInput: () =>
+			cy
+				.getByTestId('workflow-name-input', { timeout: 5000 })
+				.then(($el) => cy.wrap($el.find('input'))),
 		workflowImportInput: () => cy.getByTestId('workflow-import-input'),
 		workflowTags: () => cy.getByTestId('workflow-tags'),
 		saveButton: () => cy.getByTestId('save-button'),
+
+		nodeCreatorSearchBar: () => cy.getByTestId('node-creator-search-bar'),
+		nodeCreatorPlusButton: () => cy.getByTestId('node-creator-plus-button'),
+		canvasPlusButton: () => cy.getByTestId('canvas-plus-button'),
+		canvasNodeBox: (nodeDisplayName: string) => {
+			return cy
+				.getByTestId('canvas-node-box-title')
+				.contains(nodeDisplayName)
+				.parents('[data-test-id="canvas-node-box"]');
+		},
+
+		ndvParameterInput: (parameterName: string) =>
+			cy.getByTestId(`parameter-input-${parameterName}`),
+		ndvOutputPanel: () => cy.getByTestId('output-panel'),
+	};
+
+	actions = {
+		addInitialNodeToCanvas: (nodeDisplayName: string) => {
+			this.getters.canvasPlusButton().click();
+			this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
+			this.getters.nodeCreatorSearchBar().type('{enter}{esc}');
+		},
+		addNodeToCanvas: (nodeDisplayName: string) => {
+			this.getters.nodeCreatorPlusButton().click();
+			this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
+			this.getters.nodeCreatorSearchBar().type('{enter}{esc}');
+		},
+		openNodeNdv: (nodeTypeName: string) => {
+			this.getters.canvasNodeBox(nodeTypeName).dblclick();
+		},
+		typeIntoParameterInput: (parameterName: string, content: string) => {
+			this.getters.ndvParameterInput(parameterName).type(content);
+		},
+		executeNodeFromNdv: () => {
+			cy.contains('Execute node').click();
+		},
 	};
 }
diff --git a/cypress/pages/workflows.ts b/cypress/pages/workflows.ts
index 7e1ce4600725e..783d45bd22f34 100644
--- a/cypress/pages/workflows.ts
+++ b/cypress/pages/workflows.ts
@@ -24,4 +24,10 @@ export class WorkflowsPage extends BasePage {
 		// myWorkflows: () => cy.getByTestId('my-workflows'),
 		// allWorkflows: () => cy.getByTestId('all-workflows'),
 	};
+
+	actions = {
+		createWorkflowFromCard: () => {
+			this.getters.newWorkflowButtonCard().click();
+		},
+	}
 }
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 845c5acca1e2e..a8758ebf3ce76 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="node-wrapper" :style="nodePosition" :id="nodeId">
+	<div class="node-wrapper" :style="nodePosition" :id="nodeId" data-test-id="canvas-node-box">
 		<div class="select-background" v-show="isSelected"></div>
 		<div :class="{'node-default': true, 'touch-active': isTouchActive, 'is-touch-device': isTouchDevice}" :data-name="data.name" :ref="data.name">
 			<div :class="nodeClass" :style="nodeStyle" @click.left="onClick" v-touch:start="touchStart" v-touch:end="touchEnd">
@@ -80,7 +80,7 @@
 		</div>
 		<div class="node-description">
 			<div class="node-name ph-no-capture" :title="nodeTitle">
-				<p>
+				<p data-test-id="canvas-node-box-title">
 					{{ nodeTitle }}
 				</p>
 				<p v-if="data.disabled">
diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue
index c15ad1d04be20..53d597a054027 100644
--- a/packages/editor-ui/src/components/Node/NodeCreation.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreation.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<div v-if="!createNodeActive" :class="[$style.nodeButtonsWrapper, showStickyButton ? $style.noEvents : '']" @mouseenter="onCreateMenuHoverIn">
-			<div :class="$style.nodeCreatorButton">
+			<div :class="$style.nodeCreatorButton" data-test-id="node-creator-plus-button">
 				<n8n-icon-button size="xlarge" icon="plus" type="tertiary" :class="$style.nodeCreatorPlus" @click="openNodeCreator" :title="$locale.baseText('nodeView.addNode')"/>
 				<div :class="[$style.addStickyButton, showStickyButton ? $style.visibleButton : '']" @click="addStickyNote">
 					<n8n-icon-button size="medium" type="tertiary" :icon="['far', 'note-sticky']" :title="$locale.baseText('nodeView.addSticky')"/>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue b/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
index a79d38866fd40..3627dc3407252 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
@@ -10,6 +10,7 @@
 				:value="value"
 				@input="onInput"
 				:class="$style.input"
+				data-test-id="node-creator-search-bar"
 			/>
 		</div>
 		<div :class="$style.suffix" v-if="value.length > 0" @click="clear">
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 1d2b545ee155a..d7bc02e5bfd71 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -70,6 +70,7 @@
 				</template>
 				<template #output>
 					<OutputPanel
+						data-test-id="output-panel"
 						:canLinkRuns="canLinkRuns"
 						:runIndex="outputRun"
 						:linkedRuns="linked"
diff --git a/packages/editor-ui/src/components/ParameterInputExpanded.vue b/packages/editor-ui/src/components/ParameterInputExpanded.vue
index 7c817eab5dcce..ff8c5256af9ab 100644
--- a/packages/editor-ui/src/components/ParameterInputExpanded.vue
+++ b/packages/editor-ui/src/components/ParameterInputExpanded.vue
@@ -5,6 +5,7 @@
 		:required="parameter.required"
 		:showTooltip="focused"
 		:showOptions="menuExpanded"
+		:data-test-id="parameter.name"
 	>
 		<template #options>
 			<parameter-options
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 3548d55279e99..326a90970d402 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -20,7 +20,9 @@
 				@blur="onBlur"
 				@drop="onDrop"
 				@textInput="onTextInput"
-				@valueChanged="onValueChanged" />
+				@valueChanged="onValueChanged"
+				:data-test-id="`parameter-input-${parameter.name}`"
+			/>
 		<input-hint v-if="expressionOutput" :class="$style.hint" :highlight="!!(expressionOutput && targetItem)" :hint="expressionOutput" />
 		<input-hint v-else-if="parameterHint" :class="$style.hint" :renderHTML="true" :hint="parameterHint" />
 	</div>
diff --git a/packages/editor-ui/src/views/CanvasAddButton.vue b/packages/editor-ui/src/views/CanvasAddButton.vue
index 573ec4cbc5ef4..3115a26536c55 100644
--- a/packages/editor-ui/src/views/CanvasAddButton.vue
+++ b/packages/editor-ui/src/views/CanvasAddButton.vue
@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.container" :style="containerCssVars" ref="container">
 		<n8n-tooltip placement="top" :value="showTooltip" manual :disabled="isScrimActive" :popper-class="$style.tooltip" :open-delay="700">
-			<button :class="$style.button" @click="$emit('click')">
+			<button :class="$style.button" @click="$emit('click')" data-test-id="canvas-plus-button">
 				<font-awesome-icon icon="plus" size="lg" />
 			</button>
 			<template #content>

From aa3d9c7feac7cd42a7e104c1b03e8d83d7fde6cf Mon Sep 17 00:00:00 2001
From: OlegIvaniv <me@olegivaniv.com>
Date: Fri, 25 Nov 2022 13:52:33 +0100
Subject: [PATCH 4/6] test: Add e2e tests for node creator (#4714)

* test: Add basic e2e tests for node creator

* add spec to check if all nodes are rendered

* revert SearchBar.vue changes

* fixed manual key typo

Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>

* Add custom component tests

* Fix wrongly resolved merge conflcit

Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
---
 cypress/e2e/4-node-creator.cy.ts              | 168 ++++++++++++++++++
 cypress/fixtures/Custom_node.json             |  55 ++++++
 cypress/pages/features/node-creator.ts        |  55 ++++++
 .../Node/NodeCreator/CategorizedItems.vue     |   4 +-
 .../Node/NodeCreator/ItemIterator.vue         |   1 +
 .../Node/NodeCreator/NodeCreator.vue          |   1 +
 .../components/Node/NodeCreator/NodeItem.vue  |   2 +-
 .../components/Node/NodeCreator/SearchBar.vue |   2 +-
 .../Node/NodeCreator/TypeSelector.vue         |   2 +-
 .../editor-ui/src/views/CanvasAddButton.vue   |   2 +-
 10 files changed, 287 insertions(+), 5 deletions(-)
 create mode 100644 cypress/e2e/4-node-creator.cy.ts
 create mode 100644 cypress/fixtures/Custom_node.json
 create mode 100644 cypress/pages/features/node-creator.ts

diff --git a/cypress/e2e/4-node-creator.cy.ts b/cypress/e2e/4-node-creator.cy.ts
new file mode 100644
index 0000000000000..516bfafa6b92d
--- /dev/null
+++ b/cypress/e2e/4-node-creator.cy.ts
@@ -0,0 +1,168 @@
+import { DEFAULT_USER_EMAIL, DEFAULT_USER_PASSWORD } from "../constants";
+import { randFirstName, randLastName } from "@ngneat/falso";
+import { NodeCreator } from '../pages/features/node-creator';
+import { INodeTypeDescription } from '../../packages/workflow';
+import CustomNodeFixture from '../fixtures/Custom_node.json';
+
+const username = DEFAULT_USER_EMAIL;
+const password = DEFAULT_USER_PASSWORD;
+const firstName = randFirstName();
+const lastName = randLastName();
+const nodeCreatorFeature = new NodeCreator();
+
+describe('Node Creator', () => {
+	beforeEach(() => {
+		cy.intercept('GET', '/types/nodes.json', (req) => {
+			// Delete caching headers so that we can intercept the request
+			['etag', 'if-none-match', 'if-modified-since'].forEach(header => {delete req.headers[header]});
+
+
+			req.continue((res) => {
+				const nodes = res.body as INodeTypeDescription[];
+
+				nodes.push(CustomNodeFixture as INodeTypeDescription);
+				res.send(nodes)
+			})
+		}).as('nodesIntercept')
+
+		cy.signup(username, firstName, lastName, password);
+
+		cy.on('uncaught:exception', (err, runnable) => {
+			expect(err.message).to.include('Not logged in');
+
+			return false;
+		})
+
+		cy.signin(username, password);
+		cy.visit(nodeCreatorFeature.url);
+	});
+
+	it('should open node creator on trigger tab if no trigger is on canvas', () => {
+		nodeCreatorFeature.getters.canvasAddButton().click();
+
+		nodeCreatorFeature.getters.nodeCreator().contains('When should this workflow run?').should('be.visible');
+
+		nodeCreatorFeature.getters.nodeCreatorTabs().should('not.exist');
+	})
+
+	it('should see all tabs when opening via plus button', () => {
+		nodeCreatorFeature.actions.openNodeCreator();
+		nodeCreatorFeature.getters.nodeCreatorTabs().should('exist');
+		nodeCreatorFeature.getters.selectedTab().should('have.text', 'Trigger');
+	});
+
+	it('should navigate subcategory', () => {
+		nodeCreatorFeature.actions.openNodeCreator();
+		nodeCreatorFeature.getters.getCreatorItem('On App Event').click();
+		nodeCreatorFeature.getters.activeSubcategory().should('have.text', 'On App Event');
+		// Go back
+		nodeCreatorFeature.getters.activeSubcategory().find('button').click()
+		nodeCreatorFeature.getters.activeSubcategory().should('not.exist');
+	})
+
+	it('should search for nodes', () => {
+		nodeCreatorFeature.actions.openNodeCreator();
+		nodeCreatorFeature.getters.selectedTab().should('have.text', 'Trigger');
+
+		nodeCreatorFeature.getters.searchBar().find('input').type('manual');
+		nodeCreatorFeature.getters.creatorItem().should('have.length', 1);
+		nodeCreatorFeature.getters.searchBar().find('input').clear().type('manual123');
+		nodeCreatorFeature.getters.creatorItem().should('have.length', 0);
+		nodeCreatorFeature.getters.noResults()
+		.should('exist')
+		.should('contain.text', 'We didn\'t make that... yet');
+
+		nodeCreatorFeature.getters.searchBar().find('input').clear().type('edit image');
+		nodeCreatorFeature.getters.creatorItem().should('have.length', 0);
+		nodeCreatorFeature.getters.noResults()
+		.should('exist')
+		.should('contain.text', 'To see results, click here');
+
+		nodeCreatorFeature.getters.noResults().contains('click here').click();
+		nodeCreatorFeature.getters.nodeCreatorTabs().should('exist');
+		nodeCreatorFeature.getters.getCreatorItem('Edit Image').should('exist');
+		nodeCreatorFeature.getters.selectedTab().should('have.text', 'All');
+		nodeCreatorFeature.getters.searchBar().find('button').click();
+		nodeCreatorFeature.getters.searchBar().find('input').should('be.empty')
+	})
+
+	it('should add manual trigger node', () => {
+		nodeCreatorFeature.getters.canvasAddButton().click();
+		nodeCreatorFeature.getters.getCreatorItem('Manually').click();
+
+		// TODO: Replace once we have canvas feature utils
+		cy.get('span').contains('Back to canvas').click();
+
+		nodeCreatorFeature.getters.canvasAddButton().should('not.be.visible');
+		nodeCreatorFeature.getters.nodeCreator().should('not.exist');
+
+		// TODO: Replace once we have canvas feature utils
+		cy.get('div').contains("On clicking 'execute'").should('exist');
+	})
+
+	it('check if non-core nodes are rendered all nodes', () => {
+		cy.wait('@nodesIntercept').then((interception) => {
+			const nodes = interception.response?.body as INodeTypeDescription[];
+
+			const categorizedNodes = nodeCreatorFeature.actions.categorizeNodes(nodes);
+			nodeCreatorFeature.actions.openNodeCreator();
+			nodeCreatorFeature.actions.selectTab('All');
+
+			const categories = Object.keys(categorizedNodes);
+			categories.forEach((category: string) => {
+				// Core Nodes contains subcategories which we'll test separately
+				if(category === 'Core Nodes') return;
+
+				nodeCreatorFeature.actions.toggleCategory(category)
+
+				// Check if all nodes are present
+				categorizedNodes[category].forEach((node: INodeTypeDescription) => {
+					if(node.hidden) return;
+					nodeCreatorFeature.getters.categorizedItems().contains(node.displayName).should('exist');
+				})
+
+				nodeCreatorFeature.actions.toggleCategory(category)
+			})
+		})
+	})
+
+	it.only('should render and select community node', () => {
+		cy.wait('@nodesIntercept').then(() => {
+			const customCategory = 'customCategory';
+			const customNode = 'E2E Node';
+			const customNodeDescription = 'Demonstrate rendering of node';
+
+			nodeCreatorFeature.actions.openNodeCreator();
+			nodeCreatorFeature.actions.selectTab('All');
+
+			nodeCreatorFeature.getters.getCreatorItem(customCategory).should('exist');
+
+			nodeCreatorFeature.actions.toggleCategory(customCategory);
+			nodeCreatorFeature.getters.getCreatorItem(customNode).findChildByTestId('node-item-community-tooltip').should('exist');
+			nodeCreatorFeature.getters.getCreatorItem(customNode).contains(customNodeDescription).should('exist');
+			nodeCreatorFeature.actions.selectNode(customNode);
+
+			// TODO: Replace once we have canvas feature utils
+			cy.get('.data-display .node-name').contains(customNode).should('exist');
+
+			const nodeParameters = () => cy.getByTestId('node-parameters')
+			const firstParameter = () => nodeParameters().find('.parameter-item').eq(0);
+			const secondParameter = () => nodeParameters().find('.parameter-item').eq(1);
+
+			// Check correct fields are rendered
+			nodeParameters().should('exist')
+			// Test property text input
+			firstParameter().contains('Test property').should('exist');
+			firstParameter().find('input.el-input__inner').should('have.value', 'Some default');
+			// Resource select input
+			secondParameter().find('label').contains('Resource').should('exist');
+			secondParameter().find('input.el-input__inner').should('have.value', 'option2');
+			secondParameter().find('.el-select').click();
+			secondParameter().find('.el-select-dropdown__list').should('exist')
+			// Check if all options are rendered and select the fourth one
+			secondParameter().find('.el-select-dropdown__list').children().should('have.length', 4);
+			secondParameter().find('.el-select-dropdown__list').children().eq(3).contains('option4').should('exist').click();
+			secondParameter().find('input.el-input__inner').should('have.value', 'option4');
+		})
+	})
+});
diff --git a/cypress/fixtures/Custom_node.json b/cypress/fixtures/Custom_node.json
new file mode 100644
index 0000000000000..bbd661d261dc4
--- /dev/null
+++ b/cypress/fixtures/Custom_node.json
@@ -0,0 +1,55 @@
+{
+  "properties": [{
+      "displayName": "Test property",
+      "name": "testProp",
+      "type": "string",
+      "required": true,
+      "noDataExpression": false,
+      "default": "Some default"
+    },
+    {
+      "displayName": "Resource",
+      "name": "resource",
+      "type": "options",
+      "noDataExpression": true,
+      "options": [{
+          "name": "option1",
+          "value": "option1"
+        },
+        {
+          "name": "option2",
+          "value": "option2"
+        },
+        {
+          "name": "option3",
+          "value": "option3"
+        },
+        {
+          "name": "option4",
+          "value": "option4"
+        }
+      ],
+      "default": "option2"
+    }
+  ],
+  "displayName": "E2E Node",
+  "name": "@e2e/n8n-nodes-e2e",
+  "group": [
+    "transform"
+  ],
+	"codex": {
+		"categories": ["CustomCategory"]
+	},
+  "version": 1,
+  "description": "Demonstrate rendering of node",
+  "defaults": {
+    "name": "E2E Node "
+  },
+  "inputs": [
+    "main"
+  ],
+  "outputs": [
+    "main"
+  ],
+  "icon": "fa:network-wired"
+}
diff --git a/cypress/pages/features/node-creator.ts b/cypress/pages/features/node-creator.ts
new file mode 100644
index 0000000000000..129277a753168
--- /dev/null
+++ b/cypress/pages/features/node-creator.ts
@@ -0,0 +1,55 @@
+import { BasePage } from "../base";
+import { INodeTypeDescription } from '../../packages/workflow';
+
+export class NodeCreator extends BasePage {
+	url = '/workflow/new';
+	getters = {
+		plusButton: () => cy.getByTestId('node-creator-plus-button'),
+		canvasAddButton: () => cy.getByTestId('canvas-add-button'),
+		searchBar: () => cy.getByTestId('search-bar'),
+		getCreatorItem: (label: string) => this.getters.creatorItem().contains(label).parents('[data-test-id="item-iterator-item"]'),
+		getNthCreatorItem: (n: number) => this.getters.creatorItem().eq(n),
+		nodeCreator: () => cy.getByTestId('node-creator'),
+		nodeCreatorTabs: () => cy.getByTestId('node-creator-type-selector'),
+		selectedTab: () => this.getters.nodeCreatorTabs().find('.is-active'),
+		categorizedItems: () => cy.getByTestId('categorized-items'),
+		creatorItem: () => cy.getByTestId('item-iterator-item'),
+		communityNodeTooltip: () => cy.getByTestId('node-item-community-tooltip'),
+		noResults: () => cy.getByTestId('categorized-no-results'),
+		activeSubcategory: () => cy.getByTestId('categorized-items-subcategory'),
+		expandedCategories: () => this.getters.creatorItem().find('>div').filter('.active').invoke('text'),
+	};
+	actions = {
+		openNodeCreator: () => {
+			this.getters.plusButton().click();
+			this.getters.nodeCreator().should('be.visible')
+		},
+		selectNode: (displayName: string) => {
+			this.getters.getCreatorItem(displayName).click();
+		},
+		selectTab: (tab: string) => {
+			this.getters.nodeCreatorTabs().contains(tab).click();
+		},
+		toggleCategory: (category: string) => {
+			this.getters.getCreatorItem(category).click()
+		},
+		categorizeNodes: (nodes: INodeTypeDescription[]) => {
+			const categorizedNodes = nodes.reduce((acc, node) => {
+				const categories = (node?.codex?.categories || []).map((category: string) => category.trim());
+
+				categories.forEach((category: {[key: string]: INodeTypeDescription[]}) => {
+					// Node creator should show only the latest version of a node
+					const newerVersion = nodes.find((n: INodeTypeDescription) => n.name === node.name && (n.version > node.version || Array.isArray(n.version)));
+
+					if (acc[category] === undefined) {
+						acc[category] = [];
+					}
+					acc[category].push(newerVersion ?? node);
+				});
+				return acc;
+			}, {})
+
+			return categorizedNodes;
+		}
+	};
+}
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
index 1e00350a03f9d..9d6b50b62bfa8 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
@@ -7,12 +7,13 @@
 			tabindex="0"
 			@keydown.capture="nodeFilterKeyDown"
 			:key="`${activeSubcategoryTitle}_transition`"
+			data-test-id="categorized-items"
 		>
 			<div class="header" v-if="$slots.header">
 				<slot name="header" />
 			</div>
 
-			<div :class="$style.subcategoryHeader" v-if="activeSubcategory">
+			<div :class="$style.subcategoryHeader" v-if="activeSubcategory" data-test-id="categorized-items-subcategory">
 				<button :class="$style.subcategoryBackButton" @click="onSubcategoryClose">
 					<font-awesome-icon :class="$style.subcategoryBackIcon" icon="arrow-left" size="2x" />
 				</button>
@@ -45,6 +46,7 @@
 			</div>
 			<no-results
 				v-else
+				data-test-id="categorized-no-results"
 				:showRequest="filteredAllNodeTypes.length === 0"
 				:show-icon="filteredAllNodeTypes.length === 0"
 			>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue
index 24ffb1aa2829a..bf0396cd5a65b 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue
@@ -13,6 +13,7 @@
 			:key="item.key"
 			:class="item.type"
 			:data-key="item.key"
+			data-test-id="item-iterator-item"
 		>
 			<creator-item
 				:item="item"
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
index 509defe55751e..2cba51a60ac4c 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
@@ -10,6 +10,7 @@
 			 	v-click-outside="onClickOutside"
 			 	@dragover="onDragOver"
 			 	@drop="onDrop"
+				data-test-id="node-creator"
 			>
 				<main-panel
 					@nodeTypeSelected="nodeTypeSelected"
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue
index fb95116f51661..f48bfe25bdc30 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue
@@ -18,7 +18,7 @@
 				<span v-if="isTrigger" :class="$style['trigger-icon']">
 					<trigger-icon />
 				</span>
-				<n8n-tooltip v-if="isCommunityNode" placement="top">
+				<n8n-tooltip v-if="isCommunityNode" placement="top" data-test-id="node-item-community-tooltip">
 					<template #content>
 						<div
 							:class="$style['community-node-icon']"
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue b/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
index 3627dc3407252..960077f458bab 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.searchContainer">
+	<div :class="$style.searchContainer" data-test-id="search-bar">
 		<div :class="{ [$style.prefix]: true, [$style.active]: value.length > 0 }">
 			<font-awesome-icon icon="search" size="sm" />
 		</div>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/TypeSelector.vue b/packages/editor-ui/src/components/Node/NodeCreator/TypeSelector.vue
index 7a09835d120fd..67971c4bde061 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/TypeSelector.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/TypeSelector.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="type-selector" v-if="showTabs">
+	<div class="type-selector" v-if="showTabs" data-test-id="node-creator-type-selector">
 		<el-tabs stretch :value="selectedType" @input="setType">
 			<el-tab-pane :label="$locale.baseText('nodeCreator.mainPanel.all')" :name="ALL_NODE_FILTER"></el-tab-pane>
 			<el-tab-pane :label="$locale.baseText('nodeCreator.mainPanel.regular')" :name="REGULAR_NODE_FILTER"></el-tab-pane>
diff --git a/packages/editor-ui/src/views/CanvasAddButton.vue b/packages/editor-ui/src/views/CanvasAddButton.vue
index 3115a26536c55..783488037232f 100644
--- a/packages/editor-ui/src/views/CanvasAddButton.vue
+++ b/packages/editor-ui/src/views/CanvasAddButton.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.container" :style="containerCssVars" ref="container">
+	<div :class="$style.container" :style="containerCssVars" ref="container" data-test-id="canvas-add-button">
 		<n8n-tooltip placement="top" :value="showTooltip" manual :disabled="isScrimActive" :popper-class="$style.tooltip" :open-delay="700">
 			<button :class="$style.button" @click="$emit('click')" data-test-id="canvas-plus-button">
 				<font-awesome-icon icon="plus" size="lg" />

From 39a5dc57a84568671f5b505d7c103e482fee2d34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Fri, 25 Nov 2022 13:57:34 +0100
Subject: [PATCH 5/6] fix: Fix HTTP Request node e2e test in full run
 (no-changelog) (#4728)

:bug: Reset state
---
 cypress/e2e/4-http-request-node.cy.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cypress/e2e/4-http-request-node.cy.ts b/cypress/e2e/4-http-request-node.cy.ts
index 3ba914b1aa28a..51a50fab45c08 100644
--- a/cypress/e2e/4-http-request-node.cy.ts
+++ b/cypress/e2e/4-http-request-node.cy.ts
@@ -6,6 +6,7 @@ const WorkflowPage = new WorkflowPageClass();
 
 describe('HTTP Request node', () => {
 	beforeEach(() => {
+		cy.task('db:reset');
 		cy.skipSetup();
 	});
 

From 1579d05fd19abd9438f57a0e4ede5c3feed3c702 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E0=A4=95=E0=A4=BE=E0=A4=B0=E0=A4=A4=E0=A5=8B=E0=A4=AB?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=AB=E0=A5=87=E0=A4=B2=E0=A4=B8=E0=A5=8D=E0=A4=95?=
 =?UTF-8?q?=E0=A5=8D=E0=A4=B0=E0=A4=BF=E0=A4=AA=E0=A5=8D=E0=A4=9F=E2=84=A2?=
 <netroy@users.noreply.github.com>
Date: Fri, 25 Nov 2022 14:20:28 +0100
Subject: [PATCH 6/6] refactor: Trim down the response on the Workflows listing
 endpoint (#4726)

* fix: Avoid hashing workflows in the listing page

* stop returning full nodes data on the listings page when sharing is enabled

* fix the relations array for workflow listing

* add a comment explaining the hash skipping hack
---
 .../src/databases/entities/WorkflowEntity.ts  |  3 ++
 .../src/workflows/workflows.controller.ee.ts  | 16 +++++----
 .../src/workflows/workflows.services.ee.ts    | 10 ++----
 .../cli/src/workflows/workflows.services.ts   | 33 ++++++++++---------
 4 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/packages/cli/src/databases/entities/WorkflowEntity.ts b/packages/cli/src/databases/entities/WorkflowEntity.ts
index 4bb7168b82f30..06d47e40d1776 100644
--- a/packages/cli/src/databases/entities/WorkflowEntity.ts
+++ b/packages/cli/src/databases/entities/WorkflowEntity.ts
@@ -101,6 +101,9 @@ export class WorkflowEntity extends AbstractEntity implements IWorkflowDb {
 	setHash(): void {
 		const { name, active, nodes, connections, settings, staticData, pinData } = this;
 
+		// Workflow listing page does not request the `connections` column, so we can use this for `undefined` to avoid generating hashes for all the workflows.
+		if (!connections) return;
+
 		const state = JSON.stringify({
 			name,
 			active,
diff --git a/packages/cli/src/workflows/workflows.controller.ee.ts b/packages/cli/src/workflows/workflows.controller.ee.ts
index 292e1092ec082..5403c81445cde 100644
--- a/packages/cli/src/workflows/workflows.controller.ee.ts
+++ b/packages/cli/src/workflows/workflows.controller.ee.ts
@@ -97,10 +97,9 @@ EEWorkflowController.get(
 			);
 		}
 
-		return EEWorkflows.addCredentialsToWorkflow(
-			EEWorkflows.addOwnerAndSharings(workflow),
-			req.user,
-		);
+		EEWorkflows.addOwnerAndSharings(workflow);
+		await EEWorkflows.addCredentialsToWorkflow(workflow, req.user);
+		return workflow;
 	}),
 );
 
@@ -200,9 +199,12 @@ EEWorkflowController.get(
 		)) as unknown as WorkflowEntity[];
 
 		return Promise.all(
-			workflows.map(async (workflow) =>
-				EEWorkflows.addCredentialsToWorkflow(EEWorkflows.addOwnerAndSharings(workflow), req.user),
-			),
+			workflows.map(async (workflow) => {
+				EEWorkflows.addOwnerAndSharings(workflow);
+				await EEWorkflows.addCredentialsToWorkflow(workflow, req.user);
+				workflow.nodes = [];
+				return workflow;
+			}),
 		);
 	}),
 );
diff --git a/packages/cli/src/workflows/workflows.services.ee.ts b/packages/cli/src/workflows/workflows.services.ee.ts
index 21ce1cfbd1d3c..fdc68db4da33d 100644
--- a/packages/cli/src/workflows/workflows.services.ee.ts
+++ b/packages/cli/src/workflows/workflows.services.ee.ts
@@ -85,9 +85,7 @@ export class EEWorkflowsService extends WorkflowsService {
 		return transaction.save(newSharedWorkflows);
 	}
 
-	static addOwnerAndSharings(
-		workflow: WorkflowWithSharingsAndCredentials,
-	): WorkflowWithSharingsAndCredentials {
+	static addOwnerAndSharings(workflow: WorkflowWithSharingsAndCredentials): void {
 		workflow.ownedBy = null;
 		workflow.sharedWith = [];
 		workflow.usedCredentials = [];
@@ -104,14 +102,12 @@ export class EEWorkflowsService extends WorkflowsService {
 		});
 
 		delete workflow.shared;
-
-		return workflow;
 	}
 
 	static async addCredentialsToWorkflow(
 		workflow: WorkflowWithSharingsAndCredentials,
 		currentUser: User,
-	): Promise<WorkflowWithSharingsAndCredentials> {
+	): Promise<void> {
 		workflow.usedCredentials = [];
 		const userCredentials = await EECredentials.getAll(currentUser);
 		const credentialIdsUsedByWorkflow = new Set<number>();
@@ -155,8 +151,6 @@ export class EEWorkflowsService extends WorkflowsService {
 			});
 			workflow.usedCredentials?.push(workflowCredential);
 		});
-
-		return workflow;
 	}
 
 	static validateCredentialPermissionsToUser(
diff --git a/packages/cli/src/workflows/workflows.services.ts b/packages/cli/src/workflows/workflows.services.ts
index 9b4df6e17d9ff..27dfc2ed62840 100644
--- a/packages/cli/src/workflows/workflows.services.ts
+++ b/packages/cli/src/workflows/workflows.services.ts
@@ -140,26 +140,27 @@ export class WorkflowsService {
 		}
 
 		const fields: Array<keyof WorkflowEntity> = ['id', 'name', 'active', 'createdAt', 'updatedAt'];
+		const relations: string[] = [];
 
-		const query: FindManyOptions<WorkflowEntity> = {
-			select: config.get('enterprise.features.sharing') ? [...fields, 'nodes'] : fields,
-			relations: config.get('enterprise.features.sharing')
-				? ['tags', 'shared', 'shared.user', 'shared.role']
-				: ['tags'],
-		};
+		if (!config.getEnv('workflowTagsDisabled')) {
+			relations.push('tags');
+		}
 
-		if (config.getEnv('workflowTagsDisabled')) {
-			delete query.relations;
+		const isSharingEnabled = config.getEnv('enterprise.features.sharing');
+		if (isSharingEnabled) {
+			relations.push('shared', 'shared.user', 'shared.role');
 		}
 
-		const workflows = await Db.collections.Workflow.find(
-			Object.assign(query, {
-				where: {
-					id: In(sharedWorkflowIds),
-					...filter,
-				},
-			}),
-		);
+		const query: FindManyOptions<WorkflowEntity> = {
+			select: isSharingEnabled ? [...fields, 'nodes'] : fields,
+			relations,
+			where: {
+				id: In(sharedWorkflowIds),
+				...filter,
+			},
+		};
+
+		const workflows = await Db.collections.Workflow.find(query);
 
 		return workflows.map((workflow) => {
 			const { id, ...rest } = workflow;