fix(editor): Update node status icons precedence (executing -> highest) (#18003)

This commit is contained in:
Alex Grozav
2025-08-05 16:09:57 +03:00
committed by GitHub
parent 318a91a3e9
commit dd049249be
2 changed files with 74 additions and 21 deletions

View File

@@ -104,4 +104,57 @@ describe('CanvasNodeStatusIcons', () => {
expect(getByTestId('canvas-node-status-warning')).toBeInTheDocument();
});
describe('status precedence', () => {
it('should render executing status even if node is invalid', () => {
const { getByTestId, queryByTestId } = renderComponent({
global: {
provide: {
...createCanvasProvide({
isExecuting: true,
}),
...createCanvasNodeProvide({
data: {
execution: { running: true },
runData: { outputMap: {}, iterations: 15, visible: true },
render: {
type: CanvasNodeRenderType.Default,
options: { dirtiness: CanvasNodeDirtiness.PARAMETERS_UPDATED },
},
},
}),
},
},
});
expect(getByTestId('canvas-node-status-running')).toBeVisible();
expect(queryByTestId('canvas-node-status-warning')).not.toBeInTheDocument();
});
it('should render executing status even if node is disabled', () => {
const { getByTestId, queryByTestId } = renderComponent({
global: {
provide: {
...createCanvasProvide({
isExecuting: true,
}),
...createCanvasNodeProvide({
data: {
disabled: true,
execution: { running: true },
runData: { outputMap: {}, iterations: 15, visible: true },
render: {
type: CanvasNodeRenderType.Default,
options: { dirtiness: CanvasNodeDirtiness.PARAMETERS_UPDATED },
},
},
}),
},
},
});
expect(getByTestId('canvas-node-status-running')).toBeVisible();
expect(queryByTestId('canvas-node-status-warning')).not.toBeInTheDocument();
});
});
});

View File

@@ -48,7 +48,27 @@ const commonClasses = computed(() => [$style.status, spinnerScrim ? $style.spinn
</script>
<template>
<div v-if="isDisabled" :class="[...commonClasses, $style.disabled]">
<div v-if="executionWaiting || executionStatus === 'waiting'">
<div :class="[...commonClasses, $style.waiting]">
<N8nTooltip placement="bottom">
<template #content>
<div v-text="executionWaiting"></div>
</template>
<N8nIcon icon="clock" :size="size" />
</N8nTooltip>
</div>
<div :class="[...commonClasses, $style['node-waiting-spinner']]">
<N8nIcon icon="refresh-cw" spin />
</div>
</div>
<div
v-else-if="isNodeExecuting"
data-test-id="canvas-node-status-running"
:class="[...commonClasses, $style.running]"
>
<N8nIcon icon="refresh-cw" spin />
</div>
<div v-else-if="isDisabled" :class="[...commonClasses, $style.disabled]">
<N8nIcon icon="power" :size="size" />
</div>
<div
@@ -63,29 +83,9 @@ const commonClasses = computed(() => [$style.status, spinnerScrim ? $style.spinn
<N8nIcon icon="node-error" :size="size" />
</N8nTooltip>
</div>
<div v-else-if="executionWaiting || executionStatus === 'waiting'">
<div :class="[...commonClasses, $style.waiting]">
<N8nTooltip placement="bottom">
<template #content>
<div v-text="executionWaiting"></div>
</template>
<N8nIcon icon="clock" :size="size" />
</N8nTooltip>
</div>
<div :class="[...commonClasses, $style['node-waiting-spinner']]">
<N8nIcon icon="refresh-cw" spin />
</div>
</div>
<div v-else-if="executionStatus === 'unknown'">
<!-- Do nothing, unknown means the node never executed -->
</div>
<div
v-else-if="isNodeExecuting"
data-test-id="canvas-node-status-running"
:class="[...commonClasses, $style.running]"
>
<N8nIcon icon="refresh-cw" spin />
</div>
<div
v-else-if="hasPinnedData && !nodeHelpers.isProductionExecutionPreview.value"
data-test-id="canvas-node-status-pinned"