fix(editor): Fix 0 items labels on new canvas (no-changelog) (#11344)

packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue

@@ -31,6 +31,7 @@ onEdgeMouseEnter(({ edge }) => {
 	if (edge.id !== props.id) return;
 	isHovered.value = true;
 });
+
 onEdgeMouseLeave(({ edge }) => {
 	if (edge.id !== props.id) return;
 	isHovered.value = false;

packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.spec.ts

@@ -64,7 +64,7 @@ describe('CanvasHandleMainOutput', () => {
 		expect(getByText('1 item')).toBeInTheDocument();
 	});
 
-	it('should not render run data label if output label is available', async () => {
+	it('should render run data label even if output label is available', async () => {
 		const runData = {
 			total: 1,
 			iterations: 1,
@@ -77,7 +77,22 @@ describe('CanvasHandleMainOutput', () => {
 			},
 		});
 
-		expect(() => getByText('1 item')).toThrow();
+		expect(getByText('1 item')).toBeInTheDocument();
 		expect(getByText('Output')).toBeInTheDocument();
 	});
+
+	it('should not render run data label if handle is connected', async () => {
+		const runData = {
+			total: 1,
+			iterations: 1,
+		};
+		const { queryByText } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasHandleProvide({ label: '', runData, isConnected: true }),
+				},
+			},
+		});
+		expect(queryByText('1 item')).not.toBeInTheDocument();
+	});
 });

packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue

@@ -31,7 +31,7 @@ const renderOptions = computed(() => render.value.options as CanvasNodeDefaultRe
 const runDataTotal = computed(() => runData.value?.total ?? 0);
 
 const runDataLabel = computed(() =>
-	runData.value
+	!isConnected.value && runData.value && runData.value.total > 0
 		? i18n.baseText('ndv.output.items', {
 				adjustToNumber: runData.value.total,
 				interpolate: { count: String(runData.value.total) },
@@ -77,7 +77,7 @@ function onClickAdd() {
 <template>
 	<div :class="classes">
 		<div v-if="label" :class="outputLabelClasses">{{ label }}</div>
-		<div v-else-if="runData" :class="runDataLabelClasses">{{ runDataLabel }}</div>
+		<div v-if="runData" :class="runDataLabelClasses">{{ runDataLabel }}</div>
 		<CanvasHandleDot :handle-classes="handleClasses" />
 		<Transition name="canvas-node-handle-main-output">
 			<CanvasHandlePlus

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

@@ -555,19 +555,23 @@ export function useCanvasMapping({
 
 		if (nodePinnedDataById.value[fromNode.id]) {
 			const pinnedDataCount = nodePinnedDataById.value[fromNode.id]?.length ?? 0;
-			return i18n.baseText('ndv.output.items', {
+			return pinnedDataCount > 0
+				? i18n.baseText('ndv.output.items', {
 						adjustToNumber: pinnedDataCount,
 						interpolate: { count: String(pinnedDataCount) },
-			});
+					})
+				: '';
 		} else if (nodeExecutionRunDataById.value[fromNode.id]) {
 			const { type, index } = parseCanvasConnectionHandleString(connection.sourceHandle);
 			const runDataTotal =
 				nodeExecutionRunDataOutputMapById.value[fromNode.id]?.[type]?.[index]?.total ?? 0;
 
-			return i18n.baseText('ndv.output.items', {
+			return runDataTotal > 0
+				? i18n.baseText('ndv.output.items', {
 						adjustToNumber: runDataTotal,
 						interpolate: { count: String(runDataTotal) },
-			});
+					})
+				: '';
 		}
 
 		return '';