From cb4294b9f404605b9f2df1311a5319fd120a6a3f Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 4 Oct 2024 15:01:51 +0300
Subject: [PATCH] feat(editor): Add node execution waiting state to new canvas
 (no-changelog) (#11083)

---
 .../nodes/render-types/CanvasNodeDefault.spec.ts    | 13 +++++++++++++
 .../nodes/render-types/CanvasNodeDefault.vue        |  7 +++++++
 .../render-types/parts/CanvasNodeStatusIcons.vue    |  4 ++++
 3 files changed, 24 insertions(+)

diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts
index 6ba17c31e7..422168c2ab 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts
@@ -190,6 +190,19 @@ describe('CanvasNodeDefault', () => {
 		});
 	});
 
+	describe('waiting', () => {
+		it('should apply waiting class when node is waiting', () => {
+			const { getByText } = renderComponent({
+				global: {
+					provide: {
+						...createCanvasNodeProvide({ data: { execution: { running: true, waiting: '123' } } }),
+					},
+				},
+			});
+			expect(getByText('Test Node').closest('.node')).toHaveClass('waiting');
+		});
+	});
+
 	describe('running', () => {
 		it('should apply running class when node is running', () => {
 			const { getByText } = renderComponent({
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
index 4c53ce1ba0..fa99d723bb 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
@@ -25,6 +25,8 @@ const {
 	isDisabled,
 	isSelected,
 	hasPinnedData,
+	executionStatus,
+	executionWaiting,
 	executionRunning,
 	hasRunData,
 	hasIssues,
@@ -53,6 +55,7 @@ const classes = computed(() => {
 		[$style.success]: hasRunData.value,
 		[$style.error]: hasIssues.value,
 		[$style.pinned]: hasPinnedData.value,
+		[$style.waiting]: executionWaiting.value ?? executionStatus.value === 'waiting',
 		[$style.running]: executionRunning.value,
 		[$style.configurable]: renderOptions.value.configurable,
 		[$style.configuration]: renderOptions.value.configuration,
@@ -244,6 +247,10 @@ function openContextMenu(event: MouseEvent) {
 		background-color: var(--color-node-executing-background);
 		border-color: var(--color-canvas-node-running-border-color, var(--color-node-running-border));
 	}
+
+	&.waiting {
+		border-color: var(--color-canvas-node-waiting-border-color, var(--color-secondary));
+	}
 }
 
 .description {
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue
index 6e0dc06d17..b3413183dd 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue
@@ -86,6 +86,10 @@ const hideNodeIssues = computed(() => false); // @TODO Implement this
 	color: var(--color-success);
 }
 
+.waiting {
+	color: var(--color-secondary);
+}
+
 .pinnedData {
 	color: var(--color-secondary);
 }