fix(editor): Change label for unexecuted nodes (#14260)

packages/frontend/editor-ui/src/components/VirtualSchema.test.ts

@@ -191,16 +191,14 @@ describe('VirtualSchema.vue', () => {
 		});
 	});
 
-	it('renders schema for empty data', async () => {
+	it('renders schema for empty data for unexecuted nodes', async () => {
 		const { getAllByText, getAllByTestId } = renderComponent();
 
-		await waitFor(() =>
-			expect(getAllByText("No fields - item(s) exist, but they're empty").length).toBe(2),
-		);
+		await waitFor(() => expect(getAllByText('Execute previous nodes').length).toBe(2));
 
 		// Collapse second node
 		await userEvent.click(getAllByTestId('run-data-schema-header')[1]);
-		expect(getAllByText("No fields - item(s) exist, but they're empty").length).toBe(1);
+		expect(getAllByText('Execute previous nodes').length).toBe(1);
 	});
 
 	it('renders schema for empty data with binary', async () => {
@@ -295,7 +293,7 @@ describe('VirtualSchema.vue', () => {
 
 		await waitFor(() => {
 			const items = getAllByTestId('run-data-schema-item');
-			expect(items).toHaveLength(6);
+			expect(items).toHaveLength(5);
 		});
 
 		expect(container).toMatchSnapshot();
@@ -309,7 +307,7 @@ describe('VirtualSchema.vue', () => {
 
 		const { getAllByText } = renderComponent();
 		await waitFor(() =>
-			expect(getAllByText("No fields - item(s) exist, but they're empty").length).toBe(2),
+			expect(getAllByText("No fields - item(s) exist, but they're empty").length).toBe(1),
 		);
 	});
 
@@ -482,7 +480,7 @@ describe('VirtualSchema.vue', () => {
 			const { getAllByTestId } = renderComponent();
 
 			await waitFor(() => {
-				expect(getAllByTestId('run-data-schema-item')).toHaveLength(6);
+				expect(getAllByTestId('run-data-schema-item')).toHaveLength(5);
 			});
 			const items = getAllByTestId('run-data-schema-item');
 

packages/frontend/editor-ui/src/components/VirtualSchema.vue

@@ -49,6 +49,7 @@ import { asyncComputed } from '@vueuse/core';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
 import { pick } from 'lodash-es';
 import { DateTime } from 'luxon';
+import NodeExecuteButton from './NodeExecuteButton.vue';
 
 type Props = {
 	nodes?: IConnectedNode[];
@@ -89,7 +90,7 @@ const { getSchemaForExecutionData, getSchemaForJsonSchema, getSchema, filterSche
 	useDataSchema();
 const { closedNodes, flattenSchema, flattenMultipleSchemas, toggleLeaf, toggleNode } =
 	useFlattenSchema();
-const { getNodeInputData } = useNodeHelpers();
+const { getNodeInputData, getNodeTaskData } = useNodeHelpers();
 
 const emit = defineEmits<{
 	'clear:search': [];
@@ -104,6 +105,8 @@ const toggleNodeAndScrollTop = (id: string) => {
 
 const getNodeSchema = async (fullNode: INodeUi, connectedNode: IConnectedNode) => {
 	const pinData = workflowsStore.pinDataByNodeName(connectedNode.name);
+	const hasPinnedData = pinData ? pinData.length > 0 : false;
+	const isNodeExecuted = getNodeTaskData(fullNode, props.runIndex) !== null || hasPinnedData;
 	const connectedOutputIndexes = connectedNode.indicies.length > 0 ? connectedNode.indicies : [0];
 	const nodeData = connectedOutputIndexes.map((outputIndex) =>
 		getNodeInputData(fullNode, props.runIndex, outputIndex, props.paneType, props.connectionType),
@@ -128,6 +131,7 @@ const getNodeSchema = async (fullNode: INodeUi, connectedNode: IConnectedNode) =
 		itemsCount: data.length,
 		preview,
 		hasBinary,
+		isNodeExecuted,
 	};
 };
 
@@ -242,10 +246,8 @@ const nodesSchemas = asyncComputed<SchemaNode[]>(async () => {
 		const nodeType = nodeTypesStore.getNodeType(fullNode.type, fullNode.typeVersion);
 		if (!nodeType) continue;
 
-		const { schema, connectedOutputIndexes, itemsCount, preview, hasBinary } = await getNodeSchema(
-			fullNode,
-			node,
-		);
+		const { schema, connectedOutputIndexes, itemsCount, preview, hasBinary, isNodeExecuted } =
+			await getNodeSchema(fullNode, node);
 
 		const filteredSchema = filterSchema(schema, search);
 
@@ -260,6 +262,7 @@ const nodesSchemas = asyncComputed<SchemaNode[]>(async () => {
 			schema: filteredSchema,
 			preview,
 			hasBinary,
+			isNodeExecuted,
 		});
 	}
 
@@ -431,6 +434,34 @@ const onDragEnd = (el: HTMLElement) => {
 							class="notice"
 							:style="{ marginLeft: `calc(var(--spacing-l) + var(--spacing-l) * ${item.level})` }"
 						/>
+						<div
+							v-else-if="item.type === 'empty'"
+							:style="{
+								paddingBottom: `var(--spacing-xs)`,
+								marginLeft: `var(--spacing-xl)`,
+							}"
+						>
+							<N8nText tag="div" size="small">
+								<i18n-t
+									v-if="item.key === 'executeSchema'"
+									tag="span"
+									keypath="dataMapping.schemaView.executeSchema"
+								>
+									<template #link>
+										<NodeExecuteButton
+											:node-name="item.nodeName"
+											text
+											telemetry-source="inputs"
+											hide-icon
+											:label="i18n.baseText('ndv.input.noOutputData.executePrevious')"
+											size="small"
+											:style="{ padding: 0 }"
+										/>
+									</template>
+								</i18n-t>
+								<i18n-t v-else tag="span" :keypath="`dataMapping.schemaView.${item.key}`" />
+							</N8nText>
+						</div>
 					</DynamicScrollerItem>
 				</template>
 			</DynamicScroller>

packages/frontend/editor-ui/src/components/__snapshots__/VirtualSchema.test.ts.snap

@@ -2005,32 +2005,40 @@ exports[`VirtualSchema.vue > renders schema with spaces and dots 1`] = `
         
         
         <div
-          class="schema-item draggable"
-          data-test-id="run-data-schema-item"
-          data-v-0f5e7239=""
           data-v-d00cba9a=""
-          type="item"
         >
           <div
-            class="toggle-container"
-            data-v-0f5e7239=""
-          >
-            <!--v-if-->
-          </div>
-          <!--v-if-->
-          <!--v-if-->
-          <span
-            class="content text"
-            data-test-id="run-data-schema-item-value"
-            data-v-0f5e7239=""
+            class="n8n-text size-small regular"
+            data-v-d00cba9a=""
           >
             
-            <span>
-              <!--v-if-->
-              No fields - item(s) exist, but they're empty
+            <span
+              data-v-d00cba9a=""
+            >
+              
+              
+              <button
+                aria-live="polite"
+                class="button button primary small text el-tooltip__trigger el-tooltip__trigger"
+                style="padding: 0px;"
+                title="Runs the current node. Will also run previous nodes if they have not been run yet"
+                transparent-background="false"
+              >
+                <!--v-if-->
+                <span>
+                  
+                  Execute previous nodes
+                  
+                </span>
+              </button>
+              <!--teleport start-->
+              <!--teleport end-->
+              
+              
+               to see schema
             </span>
             
-          </span>
+          </div>
         </div>