refactor(editor): Migrate ui.store to use composition API (no-changelog) (#9892)

packages/editor-ui/src/composables/__tests__/useCanvasPanning.test.ts

@@ -8,7 +8,7 @@ vi.mock('@/stores/ui.store', () => ({
 	useUIStore: vi.fn(() => ({
 		nodeViewOffsetPosition: [0, 0],
 		nodeViewMoveInProgress: false,
-		isActionActive: vi.fn(),
+		isActionActive: vi.fn().mockReturnValue(() => true),
 	})),
 }));
 
@@ -62,7 +62,7 @@ describe('useCanvasPanning()', () => {
 			vi.mocked(useUIStore).mockReturnValueOnce({
 				nodeViewOffsetPosition: [0, 0],
 				nodeViewMoveInProgress: true,
-				isActionActive: vi.fn(),
+				isActionActive: vi.fn().mockReturnValue(() => true),
 			} as unknown as ReturnType<typeof useUIStore>);
 
 			const removeEventListenerSpy = vi.spyOn(element, 'removeEventListener');

packages/editor-ui/src/composables/__tests__/useNodeBase.spec.ts

@@ -140,21 +140,15 @@ describe('useNodeBase', () => {
 		it('should handle mouse left click correctly', () => {
 			const { mouseLeftClick } = nodeBase;
 
-			const isActionActiveFn = vi.fn().mockReturnValue(false);
-
-			// @ts-expect-error Pinia has a known issue when mocking getters, will be solved when migrating the uiStore to composition api
-			vi.spyOn(uiStore, 'isActionActive', 'get').mockReturnValue(isActionActiveFn);
-			// @ts-expect-error Pinia has a known issue when mocking getters, will be solved when migrating the uiStore to composition api
-			vi.spyOn(uiStore, 'isNodeSelected', 'get').mockReturnValue(() => false);
-
 			const event = new MouseEvent('click', {
 				bubbles: true,
 				cancelable: true,
 			});
 
+			uiStore.addActiveAction('notDragActive');
+
 			mouseLeftClick(event);
 
-			expect(isActionActiveFn).toHaveBeenCalledWith('dragActive');
 			expect(emit).toHaveBeenCalledWith('deselectAllNodes');
 			expect(emit).toHaveBeenCalledWith('nodeSelected', node.name);
 		});

packages/editor-ui/src/composables/__tests__/useRunWorkflow.spec.ts

@@ -25,14 +25,6 @@ vi.mock('@/stores/workflows.store', () => ({
 	}),
 }));
 
-vi.mock('@/stores/ui.store', () => ({
-	useUIStore: vi.fn().mockReturnValue({
-		isActionActive: vi.fn().mockReturnValue(false),
-		addActiveAction: vi.fn(),
-		removeActiveAction: vi.fn(),
-	}),
-}));
-
 vi.mock('@/composables/useTelemetry', () => ({
 	useTelemetry: vi.fn().mockReturnValue({ track: vi.fn() }),
 }));
@@ -103,6 +95,10 @@ describe('useRunWorkflow({ router })', () => {
 		workflowHelpers = useWorkflowHelpers({ router });
 	});
 
+	beforeEach(() => {
+		uiStore.activeActions = [];
+	});
+
 	describe('runWorkflowApi()', () => {
 		it('should throw an error if push connection is not active', async () => {
 			const { runWorkflowApi } = useRunWorkflow({ router });
@@ -157,7 +153,7 @@ describe('useRunWorkflow({ router })', () => {
 	describe('runWorkflow()', () => {
 		it('should return undefined if UI action "workflowRunning" is active', async () => {
 			const { runWorkflow } = useRunWorkflow({ router });
-			vi.mocked(uiStore).isActionActive.mockReturnValue(true);
+			uiStore.addActiveAction('workflowRunning');
 			const result = await runWorkflow({});
 			expect(result).toBeUndefined();
 		});
@@ -166,7 +162,7 @@ describe('useRunWorkflow({ router })', () => {
 			const mockExecutionResponse = { executionId: '123' };
 			const { runWorkflow } = useRunWorkflow({ router });
 
-			vi.mocked(uiStore).isActionActive.mockReturnValue(false);
+			vi.mocked(uiStore).activeActions = [''];
 			vi.mocked(workflowHelpers).getCurrentWorkflow.mockReturnValue({
 				name: 'Test Workflow',
 			} as unknown as Workflow);

packages/editor-ui/src/composables/useCanvasMouseSelect.ts

@@ -167,7 +167,7 @@ export default function useCanvasMouseSelect() {
 			return;
 		}
 
-		if (uiStore.isActionActive('dragActive')) {
+		if (uiStore.isActionActive['dragActive']) {
 			// If a node does currently get dragged we do not activate the selection
 			return;
 		}

packages/editor-ui/src/composables/useCanvasPanning.ts

@@ -49,7 +49,7 @@ export function useCanvasPanning(
 			return;
 		}
 
-		if (uiStore.isActionActive('dragActive')) {
+		if (uiStore.isActionActive['dragActive']) {
 			// If a node does currently get dragged we do not activate the selection
 			return;
 		}
@@ -95,7 +95,7 @@ export function useCanvasPanning(
 			return;
 		}
 
-		if (uiStore.isActionActive('dragActive')) {
+		if (uiStore.isActionActive['dragActive']) {
 			return;
 		}
 

packages/editor-ui/src/composables/useNodeBase.ts

@@ -621,7 +621,7 @@ export function useNodeBase({
 	}
 
 	function touchEnd(_e: MouseEvent) {
-		if (deviceSupport.isTouchDevice && uiStore.isActionActive('dragActive')) {
+		if (deviceSupport.isTouchDevice && uiStore.isActionActive['dragActive']) {
 			uiStore.removeActiveAction('dragActive');
 		}
 	}
@@ -640,14 +640,14 @@ export function useNodeBase({
 		}
 
 		if (!deviceSupport.isTouchDevice) {
-			if (uiStore.isActionActive('dragActive')) {
+			if (uiStore.isActionActive['dragActive']) {
 				uiStore.removeActiveAction('dragActive');
 			} else {
 				if (!deviceSupport.isCtrlKeyPressed(e)) {
 					emit('deselectAllNodes');
 				}
 
-				if (uiStore.isNodeSelected(data.value?.name ?? '')) {
+				if (uiStore.isNodeSelected[data.value?.name ?? '']) {
 					emit('deselectNode', name);
 				} else {
 					emit('nodeSelected', name);

packages/editor-ui/src/composables/usePushConnection.ts

@@ -149,7 +149,7 @@ export function usePushConnection({ router }: { router: ReturnType<typeof useRou
 		}
 
 		if (receivedData.type === 'nodeExecuteAfter' || receivedData.type === 'nodeExecuteBefore') {
-			if (!uiStore.isActionActive('workflowRunning')) {
+			if (!uiStore.isActionActive['workflowRunning']) {
 				// No workflow is running so ignore the messages
 				return false;
 			}
@@ -169,7 +169,7 @@ export function usePushConnection({ router }: { router: ReturnType<typeof useRou
 		let recoveredPushData: IPushDataExecutionFinished | undefined = undefined;
 		if (receivedData.type === 'executionRecovered') {
 			const recoveredExecutionId = receivedData.data?.executionId;
-			const isWorkflowRunning = uiStore.isActionActive('workflowRunning');
+			const isWorkflowRunning = uiStore.isActionActive['workflowRunning'];
 			if (isWorkflowRunning && workflowsStore.activeExecutionId === recoveredExecutionId) {
 				// pull execution data for the recovered execution from the server
 				const executionData = await workflowsStore.fetchExecutionDataById(
@@ -262,7 +262,7 @@ export function usePushConnection({ router }: { router: ReturnType<typeof useRou
 				workflowsStore.finishActiveExecution(pushData);
 			}
 
-			if (!uiStore.isActionActive('workflowRunning')) {
+			if (!uiStore.isActionActive['workflowRunning']) {
 				// No workflow is running so ignore the messages
 				return false;
 			}

packages/editor-ui/src/composables/useRunWorkflow.ts

@@ -91,7 +91,7 @@ export function useRunWorkflow(useRunWorkflowOpts: { router: ReturnType<typeof u
 	}): Promise<IExecutionPushResponse | undefined> {
 		const workflow = workflowHelpers.getCurrentWorkflow();
 
-		if (uiStore.isActionActive('workflowRunning')) {
+		if (uiStore.isActionActive['workflowRunning']) {
 			return;
 		}
 

packages/editor-ui/src/composables/useToast.ts

@@ -175,7 +175,7 @@ export function useToast() {
 	function showNotificationForViews(views: VIEWS[]) {
 		const notifications: NotificationOptions[] = [];
 		views.forEach((view) => {
-			notifications.push(...uiStore.getNotificationsForView(view));
+			notifications.push(...(uiStore.pendingNotificationsForViews[view] ?? []));
 		});
 		if (notifications.length) {
 			notifications.forEach(async (notification) => {