feat(editor): Add delete and disable button to nodes on hover

cypress/e2e/12-canvas-actions.cy.ts

@@ -160,11 +160,35 @@ describe('Canvas Actions', () => {
 		WorkflowPage.getters
 			.canvasNodes()
 			.last()
-			.find('[data-test-id="execute-node-button"]')
+			.findChildByTestId('execute-node-button')
 			.click({ force: true });
 		WorkflowPage.getters.successToast().should('contain', 'Node executed successfully');
 		WorkflowPage.actions.executeNode(CODE_NODE_NAME);
-		WorkflowPage.getters.successToast().should('contain', 'Node executed successfully');
+		WorkflowPage.getters.successToast().should('contain', 'Node executed suÌccessfully');
+	});
+
+	it('should disable and enable node', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		const disableButton = WorkflowPage.getters
+			.canvasNodes()
+			.last()
+			.findChildByTestId('disable-node-button');
+		disableButton.click({ force: true });
+		WorkflowPage.getters.disabledNodes().should('have.length', 1);
+		disableButton.click({ force: true });
+		WorkflowPage.getters.disabledNodes().should('have.length', 0);
+	});
+
+	it('should delete node', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME);
+		WorkflowPage.getters
+			.canvasNodes()
+			.last()
+			.find('[data-test-id="delete-node-button"]')
+			.click({ force: true });
+		WorkflowPage.getters.canvasNodes().should('have.length', 1);
 	});
 
 	it('should copy selected nodes', () => {

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

@@ -106,24 +106,6 @@
 				/>
 			</div>
 
-			<div v-if="!isReadOnly" v-show="!hideActions" class="node-options no-select-on-click">
-				<n8n-icon-button
-					data-test-id="execute-node-button"
-					type="tertiary"
-					text
-					icon="play"
-					:disabled="workflowRunning || isConfigNode"
-					:title="$locale.baseText('node.testStep')"
-					@click="executeNode"
-				/>
-				<n8n-icon-button
-					data-test-id="overflow-node-button"
-					type="tertiary"
-					text
-					icon="ellipsis-h"
-					@click="(e: MouseEvent) => openContextMenu(e, 'node-button')"
-				/>
-			</div>
 			<div
 				v-if="showDisabledLinethrough"
 				:class="{
@@ -143,6 +125,54 @@
 				{{ nodeSubtitle }}
 			</div>
 		</div>
+
+		<div
+			v-if="!isReadOnly"
+			v-show="!hideActions"
+			class="node-options no-select-on-click"
+			@contextmenu.stop
+			@mousedown.stop
+		>
+			<div class="node-options-inner">
+				<n8n-icon-button
+					v-if="!isConfigNode"
+					data-test-id="execute-node-button"
+					type="tertiary"
+					text
+					size="small"
+					icon="play"
+					:disabled="workflowRunning"
+					:title="$locale.baseText('node.testStep')"
+					@click="executeNode"
+				/>
+				<n8n-icon-button
+					data-test-id="disable-node-button"
+					type="tertiary"
+					text
+					size="small"
+					icon="power-off"
+					:title="nodeDisabledTitle"
+					@click="toggleDisableNode"
+				/>
+				<n8n-icon-button
+					data-test-id="delete-node-button"
+					type="tertiary"
+					size="small"
+					text
+					icon="trash"
+					:title="$locale.baseText('node.delete')"
+					@click="deleteNode"
+				/>
+				<n8n-icon-button
+					data-test-id="overflow-node-button"
+					type="tertiary"
+					size="small"
+					text
+					icon="ellipsis-h"
+					@click="(e: MouseEvent) => openContextMenu(e, 'node-button')"
+				/>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -437,12 +467,10 @@ export default defineComponent({
 			}
 			return issues;
 		},
-		nodeDisabledIcon(): string {
-			if (this.data.disabled === false) {
-				return 'pause';
-			} else {
-				return 'play';
-			}
+		nodeDisabledTitle(): string {
+			return this.data.disabled
+				? this.$locale.baseText('node.enable')
+				: this.$locale.baseText('node.disable');
 		},
 		position(): XYPosition {
 			return this.node ? this.node.position : [0, 0];
@@ -680,6 +708,7 @@ export default defineComponent({
 				});
 			}
 		},
+
 		executeNode() {
 			this.$emit('runWorkflow', this.data.name, 'Node.executeNode');
 			this.$telemetry.track('User clicked node hover button', {
@@ -689,6 +718,25 @@ export default defineComponent({
 			});
 		},
 
+		deleteNode() {
+			this.$telemetry.track('User clicked node hover button', {
+				node_type: this.data.type,
+				button_name: 'delete',
+				workflow_id: this.workflowsStore.workflowId,
+			});
+
+			this.$emit('removeNode', this.data.name);
+		},
+
+		toggleDisableNode() {
+			this.$telemetry.track('User clicked node hover button', {
+				node_type: this.data.type,
+				button_name: 'disable',
+				workflow_id: this.workflowsStore.workflowId,
+			});
+			this.$emit('toggleDisableNode', this.data);
+		},
+
 		onClick(event: MouseEvent) {
 			void this.callDebounced(this.onClickDebounced, { debounceTime: 50, trailing: true }, event);
 		},
@@ -778,6 +826,45 @@ export default defineComponent({
 		}
 	}
 
+	&.touch-active,
+	&:hover,
+	&.menu-open {
+		.node-options {
+			opacity: 1;
+		}
+	}
+
+	.node-options {
+		:deep(.button) {
+			--button-font-color: var(--color-text-light);
+			--button-border-radius: 0;
+		}
+		cursor: default;
+		position: absolute;
+		top: -34px;
+		z-index: 11;
+		min-width: 100%;
+		display: flex;
+		left: calc(-1 * var(--spacing-4xs));
+		right: calc(-1 * var(--spacing-4xs));
+		justify-content: center;
+		align-items: center;
+		padding-bottom: var(--spacing-2xs);
+		font-size: var(--font-size-s);
+		opacity: 0;
+		transition: opacity 100ms ease-in;
+
+		button {
+			background-color: var(--color-canvas-background);
+		}
+
+		&-inner {
+			display: flex;
+			align-items: center;
+			border-radius: var(--border-radius-base);
+		}
+	}
+
 	.node-default {
 		position: absolute;
 		width: 100%;
@@ -803,15 +890,6 @@ export default defineComponent({
 			}
 		}
 
-		&.touch-active,
-		&:hover,
-		&.menu-open {
-			.node-options {
-				pointer-events: all;
-				opacity: 1;
-			}
-		}
-
 		.node-executing-info {
 			display: none;
 			position: absolute;
@@ -868,65 +946,6 @@ export default defineComponent({
 		.waiting {
 			color: var(--color-secondary);
 		}
-
-		.node-options {
-			--node-options-height: 26px;
-			:deep(.button) {
-				--button-font-color: var(--color-text-light);
-			}
-			position: absolute;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			gap: var(--spacing-2xs);
-			transition: opacity 100ms ease-in;
-			opacity: 0;
-			pointer-events: none;
-			top: calc(-1 * (var(--node-options-height) + var(--spacing-4xs)));
-			left: 0;
-			width: var(--node-width);
-			height: var(--node-options-height);
-			font-size: var(--font-size-s);
-			z-index: 10;
-			text-align: center;
-
-			.option {
-				display: inline-block;
-
-				&.touch {
-					display: none;
-				}
-
-				&:hover {
-					color: $color-primary;
-				}
-
-				.execute-icon {
-					position: relative;
-					font-size: var(----font-size-xl);
-				}
-			}
-
-			&:after {
-				content: '';
-				display: block;
-				position: absolute;
-				left: 0;
-				right: 0;
-				top: -1rem;
-				bottom: -1rem;
-				z-index: -1;
-			}
-		}
-
-		&.is-touch-device .node-options {
-			left: -25px;
-			width: 150px;
-
-			.option.touch {
-				display: initial;
-			}
-		}
 	}
 
 	&--config {
@@ -935,20 +954,12 @@ export default defineComponent({
 		--node-height: 75px;
 
 		.node-default {
-			.node-options {
-				background: color-mix(in srgb, var(--color-canvas-background) 80%, transparent);
-				height: 25px;
-			}
-
 			.node-icon {
 				scale: 0.75;
 			}
-		}
 
-		.node-default {
 			.node-box {
 				border: 2px solid var(--color-foreground-xdark);
-				//background-color: $node-background-type-other;
 				border-radius: 50px;
 
 				&.executing {
@@ -1027,11 +1038,6 @@ export default defineComponent({
 				left: var(--configurable-node-icon-offset);
 			}
 
-			.node-options {
-				left: 0;
-				height: 25px;
-			}
-
 			.node-executing-info {
 				left: -67px;
 			}
@@ -1172,10 +1178,6 @@ export default defineComponent({
 	z-index: 100;
 }
 
-.node-options {
-	z-index: 10;
-}
-
 .drop-add-node-label {
 	z-index: 10;
 }