fix(editor): Fix canvas selection breaking after interacting with node actions (#7466)

Sometimes canvas selection stops working after users interact with node
action buttons (for example if node is moved by dragging one of the
buttons)
NOTE: Ticket number in the branch name is wrong, this fixes ADO-1226

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

@@ -198,4 +198,30 @@ describe('Canvas Actions', () => {
 		cy.get('body').type('{shift}', { release: false }).type('{leftArrow}');
 		WorkflowPage.getters.selectedNodes().should('have.length', 2);
 	});
+
+	it('should not break lasso selection when dragging node action buttons', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.getters
+			.canvasNodes()
+			.last()
+			.findChildByTestId('disable-node-button').as('disableNodeButton');
+		cy.drag('@disableNodeButton', [200, 200]);
+		WorkflowPage.actions.testLassoSelection([100, 100], [200, 200]);
+	});
+
+	it('should not break lasso selection with multiple clicks on node action buttons', () => {
+		WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
+		WorkflowPage.actions.testLassoSelection([100, 100], [200, 200]);
+		WorkflowPage.getters
+			.canvasNodes()
+			.last().as('lastNode');
+		cy.get('@lastNode').findChildByTestId('disable-node-button').as('disableNodeButton');
+		for (let i = 0; i < 20; i++) {
+			cy.get('@lastNode').realHover();
+			cy.get('@disableNodeButton').should('be.visible');
+			cy.get('@disableNodeButton').realTouch();
+			cy.getByTestId('execute-workflow-button').realHover();
+			WorkflowPage.actions.testLassoSelection([100, 100], [200, 200]);
+		}
+	});
 });

cypress/pages/workflow.ts

@@ -327,5 +327,12 @@ export class WorkflowPage extends BasePage {
 		shouldHaveWorkflowName: (name: string) => {
 			this.getters.workflowNameInputContainer().invoke('attr', 'title').should('include', name);
 		},
+		testLassoSelection: (from: [number, number], to: [number, number]) => {
+			cy.getByTestId('node-view-wrapper').trigger('mousedown', from[0], from[1], { force: true });
+			cy.getByTestId('node-view-wrapper').trigger('mousemove', to[0], to[1], { force: true });
+			cy.get('#select-box').should('be.visible');
+			cy.getByTestId('node-view-wrapper').trigger('mouseup', to[0], to[1], { force: true });
+			cy.get('#select-box').should('not.be.visible');
+		},
 	};
 }

packages/editor-ui/src/stores/canvas.store.ts

@@ -271,6 +271,9 @@ export const useCanvasStore = defineStore('canvas', () => {
 						if (moveNodes.length > 1) {
 							historyStore.stopRecordingUndo();
 						}
+						if (uiStore.isActionActive('dragActive')) {
+							uiStore.removeActiveAction('dragActive');
+						}
 					}
 				},
 				filter: '.node-description, .node-description .node-name, .node-description .node-subtitle',

packages/editor-ui/src/views/NodeView.vue

@@ -10,6 +10,7 @@
 			<div
 				class="node-view-wrapper"
 				:class="workflowClasses"
+				data-test-id="node-view-wrapper"
 				@touchstart="mouseDown"
 				@touchend="mouseUp"
 				@touchmove="mouseMoveNodeWorkflow"