PR Feedback

packages/editor-ui/src/components/OutputPanel.vue

@@ -21,7 +21,7 @@ import { usePinnedData } from '@/composables/usePinnedData';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useI18n } from '@/composables/useI18n';
 import { waitingNodeTooltip } from '@/utils/executionUtils';
-import { N8nCallout, N8nRadioButtons, N8nText } from 'n8n-design-system';
+import { N8nRadioButtons, N8nText } from 'n8n-design-system';
 
 // Types
 
@@ -215,6 +215,24 @@ const canPinData = computed(() => {
 	return pinnedData.isValidNodeType.value && !props.isReadOnly;
 });
 
+const allToolsWereUnusedNotice = computed(() => {
+	if (!node.value) return undefined;
+
+	const toolsAvailable = props.workflow.getParentNodes(
+		node.value.name,
+		NodeConnectionType.AiTool,
+		1,
+	);
+	const toolsUsedInLatestRun = toolsAvailable.filter(
+		(x) => !!workflowRunData.value?.[x]?.[props.runIndex],
+	);
+	if (toolsAvailable.length > 0 && toolsUsedInLatestRun.length === 0) {
+		return i18n.baseText('ndv.output.noToolUsedInfo');
+	} else {
+		return undefined;
+	}
+});
+
 // Methods
 
 const insertTestData = () => {
@@ -283,20 +301,6 @@ watch(defaultOutputMode, (newValue: OutputType, oldValue: OutputType) => {
 const activatePane = () => {
 	emit('activatePane');
 };
-
-const didNotUseTools = computed(() => {
-	if (!node.value) return false;
-
-	const toolsAvailable = props.workflow.getParentNodes(
-		node.value.name,
-		NodeConnectionType.AiTool,
-		1,
-	);
-	const toolsUsedInLatestRun = toolsAvailable.filter(
-		(x) => !!workflowRunData.value?.[x]?.[props.runIndex],
-	);
-	return toolsAvailable.length > 0 && toolsUsedInLatestRun.length === 0;
-});
 </script>
 
 <template>
@@ -318,6 +322,7 @@ const didNotUseTools = computed(() => {
 		:hide-pagination="outputMode === 'logs'"
 		pane-type="output"
 		:data-output-type="outputMode"
+		:callout-message-key="allToolsWereUnusedNotice"
 		@activate-pane="activatePane"
 		@run-change="onRunIndexChange"
 		@link-run="onLinkRun"
@@ -390,14 +395,6 @@ const didNotUseTools = computed(() => {
 			<RunDataAi :node="node" :run-index="runIndex" :workflow="workflow" />
 		</template>
 
-		<template v-if="didNotUseTools" #panel-callout-info>
-			<div :class="$style.noToolsUsedAlert" data-test-id="no-tools-used-callout">
-				<N8nCallout theme="secondary">
-					{{ i18n.baseText('ndv.output.noToolUsedInfo') }}
-				</N8nCallout>
-			</div>
-		</template>
-
 		<template #recovered-artificial-output-data>
 			<div :class="$style.recoveredOutputData">
 				<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
@@ -464,10 +461,4 @@ const didNotUseTools = computed(() => {
 		margin-bottom: var(--spacing-m);
 	}
 }
-
-.noToolsUsedAlert {
-	padding-left: var(--spacing-s);
-	padding-right: var(--spacing-s);
-	padding-bottom: var(--spacing-xs);
-}
 </style>

packages/editor-ui/src/components/RunData.vue

@@ -118,6 +118,7 @@ type Props = {
 	isProductionExecutionPreview?: boolean;
 	isPaneActive?: boolean;
 	hidePagination?: boolean;
+	calloutMessageKey?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -1351,6 +1352,14 @@ defineExpose({ enterEditMode });
 
 		<slot v-if="!displaysMultipleNodes" name="before-data" />
 
+		<N8nCallout
+			v-if="props.calloutMessageKey"
+			:key="props.calloutMessageKey"
+			:class="$style.callout"
+			theme="secondary"
+			data-test-id="no-tools-used-callout"
+		/>
+
 		<N8nCallout
 			v-for="hint in getNodeHints()"
 			:key="hint.message"
@@ -1360,9 +1369,6 @@ defineExpose({ enterEditMode });
 			<N8nText v-n8n-html="hint.message" size="small"></N8nText>
 		</N8nCallout>
 
-		<div v-if="hasNodeRun">
-			<slot name="panel-callout-info"></slot>
-		</div>
 		<div
 			v-if="maxOutputIndex > 0 && branches.length > 1 && !displaysMultipleNodes"
 			:class="$style.outputs"
@@ -2078,6 +2084,10 @@ defineExpose({ enterEditMode });
 .schema {
 	padding: 0 var(--spacing-s);
 }
+
+.noToolsUsedAlert {
+	padding: var(--spacing-s);
+}
 </style>
 
 <style lang="scss" scoped>

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

@@ -247,14 +247,9 @@ exports[`InputPanel > should render 1`] = `
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
+    <!--v-if-->
     
     
-    <div
-      data-v-2e5cd75c=""
-    >
-      
-      
-    </div>
     <!--v-if-->
     <div
       class="dataContainer"