feat(editor): Node creator actions

cypress/e2e/4-node-creator.cy.ts

@@ -70,11 +70,20 @@ describe('Node Creator', () => {
 		.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', 1);
+
+		nodeCreatorFeature.getters.searchBar().find('input').clear().type('this node totally does not exist');
+		nodeCreatorFeature.getters.creatorItem().should('have.length', 0);
+
+		nodeCreatorFeature.getters.searchBar().find('input').clear()
+		nodeCreatorFeature.getters.getCreatorItem('On App Event').click();
+
 		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');
+		.should('contain.text', 'To see all results, click here');
 
 		nodeCreatorFeature.getters.noResults().contains('click here').click();
 		nodeCreatorFeature.getters.nodeCreatorTabs().should('exist');
@@ -85,6 +94,7 @@ describe('Node Creator', () => {
 	})
 
 	it('should add manual trigger node', () => {
+		cy.get('.el-loading-mask').should('not.exist');
 		nodeCreatorFeature.getters.canvasAddButton().click();
 		nodeCreatorFeature.getters.getCreatorItem('Manually').click();
 
@@ -95,7 +105,7 @@ describe('Node Creator', () => {
 		nodeCreatorFeature.getters.nodeCreator().should('not.exist');
 
 		// TODO: Replace once we have canvas feature utils
-		cy.get('div').contains("On clicking 'execute'").should('exist');
+		cy.get('div').contains("Add first step").should('exist');
 	})
 	it('check if non-core nodes are rendered', () => {
 		cy.wait('@nodesIntercept').then((interception) => {
@@ -144,7 +154,7 @@ describe('Node Creator', () => {
 			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).findChildByTestId('node-creator-item-tooltip').should('exist');
 			nodeCreatorFeature.getters.getCreatorItem(customNode).contains(customNodeDescription).should('exist');
 			nodeCreatorFeature.actions.selectNode(customNode);
 

cypress/e2e/7-workflow-actions.cy.ts

@@ -66,15 +66,15 @@ describe('Workflow Actions', () => {
 	it('should add more tags', () => {
 		WorkflowPage.getters.newTagLink().click();
 		WorkflowPage.actions.addTags(TEST_WF_TAGS);
-		WorkflowPage.getters.workflowTagElements().first().click();
+		WorkflowPage.getters.firstWorkflowTagElement().click();
 		WorkflowPage.actions.addTags(['Another one']);
 		WorkflowPage.getters.workflowTagElements().should('have.length', TEST_WF_TAGS.length + 1);
 	});
 
 	it('should remove tags by clicking X in tag', () => {
 		WorkflowPage.getters.newTagLink().click();
 		WorkflowPage.actions.addTags(TEST_WF_TAGS);
-		WorkflowPage.getters.workflowTagElements().first().click();
+		WorkflowPage.getters.firstWorkflowTagElement().click();
 		WorkflowPage.getters.workflowTagsContainer().find('.el-tag__close').first().click();
 		cy.get('body').type('{enter}');
 		WorkflowPage.getters.workflowTagElements().should('have.length', TEST_WF_TAGS.length - 1);
@@ -83,7 +83,7 @@ describe('Workflow Actions', () => {
 	it('should remove tags from dropdown', () => {
 		WorkflowPage.getters.newTagLink().click();
 		WorkflowPage.actions.addTags(TEST_WF_TAGS);
-		WorkflowPage.getters.workflowTagElements().first().click();
+		WorkflowPage.getters.firstWorkflowTagElement().click();
 		WorkflowPage.getters.workflowTagsDropdown().find('li').first().click();
 		cy.get('body').type('{enter}');
 		WorkflowPage.getters.workflowTagElements().should('have.length', TEST_WF_TAGS.length - 1);

cypress/pages/features/node-creator.ts

@@ -16,12 +16,13 @@ export class NodeCreator extends BasePage {
 		creatorItem: () => cy.getByTestId('item-iterator-item'),
 		communityNodeTooltip: () => cy.getByTestId('node-item-community-tooltip'),
 		noResults: () => cy.getByTestId('categorized-no-results'),
-		nodeItemName: () => cy.getByTestId('node-item-name'),
+		nodeItemName: () => cy.getByTestId('node-creator-item-name'),
 		activeSubcategory: () => cy.getByTestId('categorized-items-subcategory'),
 		expandedCategories: () => this.getters.creatorItem().find('>div').filter('.active').invoke('text'),
 	};
 	actions = {
 		openNodeCreator: () => {
+			cy.get('.el-loading-mask').should('not.exist');
 			this.getters.plusButton().click();
 			this.getters.nodeCreator().should('be.visible')
 		},

cypress/pages/workflow.ts

@@ -10,6 +10,7 @@ export class WorkflowPage extends BasePage {
 		workflowTagsContainer: () => cy.getByTestId('workflow-tags-container'),
 		workflowTagsInput: () => this.getters.workflowTagsContainer().then(($el) => cy.wrap($el.find('input').first())),
 		workflowTagElements: () => cy.get('[data-test-id="workflow-tags-container"] span.tags > span'),
+		firstWorkflowTagElement: () => cy.get('[data-test-id="workflow-tags-container"] span.tags > span:nth-child(1)'),
 		workflowTagsDropdown: () => cy.getByTestId('workflow-tags-dropdown'),
 		newTagLink: () => cy.getByTestId('new-tag-link'),
 		saveButton: () => cy.getByTestId('workflow-save-button'),
@@ -43,12 +44,14 @@ export class WorkflowPage extends BasePage {
 		addInitialNodeToCanvas: (nodeDisplayName: string) => {
 			this.getters.canvasPlusButton().click();
 			this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
-			this.getters.nodeCreatorSearchBar().type('{enter}{esc}');
+			this.getters.nodeCreatorSearchBar().type('{enter}');
+			cy.get('body').type('{esc}');
 		},
 		addNodeToCanvas: (nodeDisplayName: string) => {
 			this.getters.nodeCreatorPlusButton().click();
 			this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
-			this.getters.nodeCreatorSearchBar().type('{enter}{esc}');
+			this.getters.nodeCreatorSearchBar().type('{enter}');
+			cy.get('body').type('{esc}');
 		},
 		openNodeNdv: (nodeTypeName: string) => {
 			this.getters.canvasNodeByName(nodeTypeName).dblclick();

packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.stories.ts

@@ -0,0 +1,58 @@
+/* tslint:disable:variable-name */
+import N8nNodeCreatorNode from './NodeCreatorNode.vue';
+import { StoryFn } from '@storybook/vue';
+
+export default {
+	title: 'Modules/Node Creator Node',
+	component: N8nNodeCreatorNode,
+};
+
+const DefaultTemplate: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nNodeCreatorNode,
+	},
+	template: `
+		<n8n-node-creator-node v-bind="$props">
+			<template v-slot:icon>
+				<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/cartman.svg" />
+			</template>
+		</n8n-node-creator-node>
+	`,
+});
+
+export const WithTitle = DefaultTemplate.bind({});
+WithTitle.args = {
+	title: 'Node with title',
+	tooltipHtml: '<b>Bold</b> tooltip',
+	description:
+		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et vehicula ipsum, eu facilisis lacus. Aliquam commodo vel elit eget mollis. Quisque ac elit non purus iaculis placerat. Quisque fringilla ultrices nisi sed porta.',
+};
+
+const PanelTemplate: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nNodeCreatorNode,
+	},
+	data() {
+		return {
+			isPanelActive: false,
+		};
+	},
+	template: `
+		<n8n-node-creator-node v-bind="$props" :isPanelActive="isPanelActive" @click.capture="isPanelActive = true">
+			<template v-slot:icon>
+				<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/cartman.svg" />
+			</template>
+			<template v-slot:panel>
+				<p style="width: 100%; height: 300px; background: white">Lorem ipsum dolor sit amet</p>
+				<button @click="isPanelActive = false">Close</button>
+			</template>
+		</n8n-node-creator-node>
+	`,
+});
+export const WithPanel = PanelTemplate.bind({});
+WithPanel.args = {
+	title: 'Node with panel',
+	isTrigger: true,
+};

packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue

@@ -0,0 +1,125 @@
+<template>
+	<div
+		:class="{
+			[$style.creatorNode]: true,
+			[$style.hasAction]: !showActionArrow,
+		}"
+		v-on="$listeners"
+		v-bind="$attrs"
+	>
+		<div :class="$style.nodeIcon">
+			<slot name="icon" />
+		</div>
+		<div>
+			<div :class="$style.details">
+				<span :class="$style.name" v-text="title" data-test-id="node-creator-item-name" />
+				<trigger-icon v-if="isTrigger" :class="$style.triggerIcon" />
+				<n8n-tooltip
+					v-if="!!$slots.tooltip"
+					placement="top"
+					data-test-id="node-creator-item-tooltip"
+				>
+					<template #content>
+						<slot name="tooltip" />
+					</template>
+					<n8n-icon :class="$style.tooltipIcon" icon="cube" />
+				</n8n-tooltip>
+			</div>
+			<p :class="$style.description" v-if="description" v-text="description" />
+		</div>
+		<slot name="dragContent" />
+		<button :class="$style.panelIcon" v-if="showActionArrow">
+			<font-awesome-icon :class="$style.panelArrow" icon="arrow-right" />
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import TriggerIcon from './TriggerIcon.vue';
+import N8nTooltip from '../N8nTooltip';
+
+export interface Props {
+	active?: boolean;
+	isTrigger?: boolean;
+	description?: string;
+	title: string;
+	showActionArrow?: boolean;
+}
+
+defineProps<Props>();
+
+defineEmits<{
+	(event: 'tooltipClick', $e: MouseEvent): void;
+}>();
+</script>
+
+<style lang="scss" module>
+.creatorNode {
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	z-index: 1;
+	padding: 11px 8px 11px 0;
+
+	&.hasAction {
+		user-select: none;
+	}
+}
+.creatorNode:hover .panelIcon {
+	color: var(--color-text-light);
+}
+
+.panelIcon {
+	flex-grow: 1;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	margin-left: var(--spacing-2xs);
+	color: var(--color-text-lighter);
+	cursor: pointer;
+	background: transparent;
+	border: none;
+}
+.tooltipIcon {
+	margin-left: var(--spacing-3xs);
+}
+.panelArrow {
+	font-size: var(--font-size-2xs);
+	width: 12px;
+}
+.details {
+	align-items: center;
+}
+.nodeIcon {
+	display: flex;
+	margin-right: var(--spacing-s);
+
+	& > :global(*) {
+		min-width: 25px;
+		max-width: 25px;
+	}
+}
+.name {
+	font-weight: var(--font-weight-bold);
+	font-size: var(--font-size-s);
+	line-height: 1.115rem;
+}
+.description {
+	margin-top: var(--spacing-5xs);
+	font-size: var(--font-size-2xs);
+	line-height: 1rem;
+	font-weight: 400;
+	color: var(--node-creator-description-colo, var(--color-text-base));
+}
+
+.triggerIcon {
+	margin-left: var(--spacing-2xs);
+}
+</style>
+
+<style lang="scss" scoped>
+.el-tooltip svg {
+	color: var(--color-foreground-xdark);
+}
+</style>

packages/design-system/src/components/N8nNodeCreatorNode/TriggerIcon.vue

@@ -0,0 +1,65 @@
+<template>
+	<span :class="$style.trigger">
+		<svg
+			width="36px"
+			height="36px"
+			viewBox="0 0 36 36"
+			version="1.1"
+			xmlns="http://www.w3.org/2000/svg"
+			xmlns:xlink="http://www.w3.org/1999/xlink"
+		>
+			<title>Trigger node</title>
+			<g
+				id="/integrations-(V1-feature)"
+				stroke="none"
+				stroke-width="1"
+				fill="none"
+				fill-rule="evenodd"
+			>
+				<g
+					id="Individual-node-view"
+					transform="translate(-304.000000, -137.000000)"
+					fill-rule="nonzero"
+				>
+					<g id="left-column" transform="translate(120.000000, 131.000000)">
+						<g id="trigger-badge" transform="translate(178.000000, 0.000000)">
+							<g id="trigger-icon" transform="translate(6.857143, 6.857143)">
+								<g id="Icon" transform="translate(8.571429, 0.000000)" fill="#FF6150">
+									<polygon
+										id="Icon-Path"
+										points="7.14285714 21.4285714 0 21.4285714 10 1.42857143 10 12.8571429 17.1428571 12.8571429 7.14285714 32.8571429"
+									></polygon>
+								</g>
+								<rect id="ViewBox" x="0" y="0" width="34.2857143" height="34.2857143"></rect>
+							</g>
+						</g>
+					</g>
+				</g>
+			</g>
+		</svg>
+	</span>
+</template>
+
+<script lang="ts">
+export default {
+	name: 'TriggerIcon',
+};
+</script>
+
+<style lang="scss" module>
+.trigger {
+	background-color: var(--trigger-icon-background-color, var(--color-background-xlight));
+	border: 1px solid var(--trigger-icon-border-color, var(--color-background-xlight));
+	border-radius: 4px;
+	height: 16px;
+	width: 16px;
+	display: inline-block;
+	vertical-align: middle;
+	line-height: 16px;
+
+	> svg {
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

packages/design-system/src/components/N8nNodeCreatorNode/index.ts

@@ -0,0 +1,3 @@
+import NodeCreatorNode from './NodeCreatorNode.vue';
+
+export default NodeCreatorNode;