chore(editor): The zoomed view misc updates (#17865)

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

@@ -49,6 +49,7 @@ export type Props = {
 	disableDisplayModeSelection?: boolean;
 	focusedMappableInput: string;
 	isMappingOnboarded: boolean;
+	nodeNotRunMessageVariant?: 'default' | 'simple';
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -57,6 +58,7 @@ const props = withDefaults(defineProps<Props>(), {
 	readOnly: false,
 	isProductionExecutionPreview: false,
 	isPaneActive: false,
+	nodeNotRunMessageVariant: 'default',
 });
 
 const emit = defineEmits<{
@@ -249,6 +251,10 @@ const isNDVV2 = computed(() =>
 	),
 );
 
+const nodeNameToExecute = computed(
+	() => (isActiveNodeConfig.value ? rootNode.value : activeNode.value?.name) ?? '',
+);
+
 watch(
 	inputMode,
 	(mode) => {
@@ -455,7 +461,23 @@ function handleChangeCollapsingColumn(columnName: string | null) {
 				v-if="(isActiveNodeConfig && rootNode) || parentNodes.length"
 				:class="$style.noOutputData"
 			>
-				<template v-if="isNDVV2">
+				<N8nText v-if="nodeNotRunMessageVariant === 'simple'" color="text-base" size="small">
+					<I18nT scope="global" keypath="ndv.input.noOutputData.embeddedNdv.description">
+						<template #link>
+							<NodeExecuteButton
+								:class="$style.executeButton"
+								size="medium"
+								:node-name="nodeNameToExecute"
+								:label="i18n.baseText('ndv.input.noOutputData.embeddedNdv.link')"
+								text
+								telemetry-source="inputs"
+								hide-icon
+							/>
+						</template>
+					</I18nT>
+				</N8nText>
+
+				<template v-else-if="isNDVV2">
 					<NDVEmptyState
 						v-if="isMappingEnabled || hasRootNodeRun"
 						:title="i18n.baseText('ndv.input.noOutputData.v2.title')"
@@ -470,7 +492,7 @@ function handleChangeCollapsingColumn(columnName: string | null) {
 										hide-icon
 										transparent
 										type="secondary"
-										:node-name="(isActiveNodeConfig ? rootNode : activeNode?.name) ?? ''"
+										:node-name="nodeNameToExecute"
 										:label="i18n.baseText('ndv.input.noOutputData.v2.action')"
 										:tooltip="i18n.baseText('ndv.input.noOutputData.v2.tooltip')"
 										tooltip-placement="bottom"
@@ -537,7 +559,7 @@ function handleChangeCollapsingColumn(columnName: string | null) {
 						type="secondary"
 						hide-icon
 						:transparent="true"
-						:node-name="(isActiveNodeConfig ? rootNode : activeNode?.name) ?? ''"
+						:node-name="nodeNameToExecute"
 						:label="i18n.baseText('ndv.input.noOutputData.executePrevious')"
 						class="mt-m"
 						telemetry-source="inputs"
@@ -707,4 +729,8 @@ function handleChangeCollapsingColumn(columnName: string | null) {
 	letter-spacing: 2px;
 	font-size: var(--font-size-xs);
 }
+
+.executeButton {
+	padding: 0;
+}
 </style>