fix(editor): Small UI tweaks for data size warnings (#21693)

packages/frontend/@n8n/i18n/src/locales/en.json

@@ -1245,7 +1245,6 @@
 	"ndv.input.mapping": "Mapping",
 	"ndv.input.fromAI": "From AI",
 	"ndv.input.parentNodes": "Parent nodes",
-	"ndv.input.tooMuchData.title": "Display data?",
 	"ndv.input.noOutputDataInBranch": "No input data in this branch",
 	"ndv.input.noOutputDataInNode": "Node did not output any data. n8n stops executing the workflow when a node has no output data.",
 	"ndv.input.noOutputData": "No data",
@@ -1308,10 +1307,6 @@
 	"ndv.output.insertTestData": "set mock data",
 	"ndv.output.staleDataWarning.regular": "Node parameters have changed.<br>Test node again to refresh output.",
 	"ndv.output.staleDataWarning.pinData": "Node parameter changes will not affect pinned output data.",
-	"ndv.output.tooMuchData.message": "The node contains {size} MB of data. Displaying it may slow down your browser temporarily.",
-	"ndv.output.tooMuchData.showDataAnyway": "Show data",
-	"ndv.output.tooMuchData.title": "Display data?",
-	"ndv.output.logs.tooMuchData.message": "The {inOut} contains {size} MB of data. Displaying it may slow down your browser temporarily.",
 	"ndv.output.waitingToRun": "Waiting to execute...",
 	"ndv.output.noToolUsedInfo": "None of your tools were used in this run. Try giving your tools clearer names and descriptions to help the AI",
 	"ndv.title.cancel": "Cancel",
@@ -1337,6 +1332,9 @@
 	"ndv.pinData.error.tooLarge.description": "Workflow has reached the maximum allowed pinned data size ({size} mb / {limit} mb)",
 	"ndv.pinData.error.tooLargeWorkflow.title": "Unable to pin data due to size limit",
 	"ndv.pinData.error.tooLargeWorkflow.description": "Workflow has reached the maximum allowed size ({size} mb / {limit} mb)",
+	"ndv.tooMuchData.message": "This may temporarily slow down your browser.",
+	"ndv.tooMuchData.showDataAnyway": "Show data",
+	"ndv.tooMuchData.title": "Show {size} MB of data?",
 	"ndv.httpRequest.credentialOnly.docsNotice": "Use the <a target=\"_blank\" href=\"{docsUrl}\">{nodeName} docs</a> to construct your request. We'll take care of the authentication part if you add a {nodeName} credential below.",
 	"noTagsView.readyToOrganizeYourWorkflows": "Ready to organize your workflows?",
 	"noTagsView.withWorkflowTagsYouReFree": "With workflow tags, you're free to create the perfect tagging system for your flows",

packages/frontend/editor-ui/src/features/execution/logs/components/LogsViewRunData.vue

@@ -83,7 +83,6 @@ function handleChangeDisplayMode(value: IRunDataDisplayMode) {
 		:class="$style.component"
 		:workflow-object="logEntry.workflow"
 		:workflow-execution="logEntry.execution"
-		:too-much-data-title="locale.baseText('ndv.output.tooMuchData.title')"
 		:no-data-in-branch-message="locale.baseText('ndv.output.noOutputDataInBranch')"
 		:executing-message="locale.baseText('ndv.output.executing')"
 		:pane-type="paneType"

packages/frontend/editor-ui/src/features/ndv/panel/components/InputPanel.vue

@@ -415,7 +415,6 @@ function handleChangeCollapsingColumn(columnName: string | null) {
 		:run-index="isMappingMode ? 0 : runIndex"
 		:linked-runs="linkedRuns"
 		:can-link-runs="!mappedNode && canLinkRuns"
-		:too-much-data-title="i18n.baseText('ndv.input.tooMuchData.title')"
 		:no-data-in-branch-message="i18n.baseText('ndv.input.noOutputDataInBranch')"
 		:is-executing="isExecutingPrevious"
 		:executing-message="i18n.baseText('ndv.input.executingPrevious')"

packages/frontend/editor-ui/src/features/ndv/panel/components/NDVEmptyState.vue

@@ -35,12 +35,14 @@ defineSlots<{
 .title {
 	font-size: var(--font-size--md);
 	font-weight: var(--font-weight--bold);
+	line-height: 145%;
 	color: var(--color--text);
 	margin: 0;
 }
 
 .description {
 	font-size: var(--font-size--sm);
+	line-height: var(--line-height--xl);
 	margin: 0;
 	text-align: center;
 	max-width: 240px;

packages/frontend/editor-ui/src/features/ndv/panel/components/OutputPanel.vue

@@ -309,7 +309,6 @@ function handleChangeCollapsingColumn(columnName: string | null) {
 		:run-index="runIndex"
 		:linked-runs="linkedRuns"
 		:can-link-runs="canLinkRuns"
-		:too-much-data-title="i18n.baseText('ndv.output.tooMuchData.title')"
 		:no-data-in-branch-message="i18n.baseText('ndv.output.noOutputDataInBranch')"
 		:is-executing="isNodeRunning"
 		:executing-message="i18n.baseText('ndv.output.executing')"

packages/frontend/editor-ui/src/features/ndv/runData/components/RunData.test.ts

@@ -1276,7 +1276,6 @@ describe('RunData', () => {
 				isExecuting: false,
 				mappingEnabled: true,
 				distanceFromActive: 0,
-				tooMuchDataTitle: '',
 				executingMessage: '',
 				noDataInBranchMessage: '',
 				overrideOutputs,

packages/frontend/editor-ui/src/features/ndv/runData/components/RunData.vue

@@ -113,7 +113,6 @@ type Props = {
 	workflowObject: Workflow;
 	workflowExecution?: IRunExecutionData;
 	runIndex: number;
-	tooMuchDataTitle: string;
 	executingMessage: string;
 	pushRef?: string;
 	paneType: NodePanelType;
@@ -1831,27 +1830,34 @@ defineExpose({ enterEditMode });
 				data-test-id="ndv-data-size-warning"
 				:class="$style.center"
 			>
-				<NDVEmptyState :title="tooMuchDataTitle">
-					<span
-						v-n8n-html="
-							i18n.baseText('ndv.output.tooMuchData.message', {
-								interpolate: { size: dataSizeInMB },
+				<div :class="$style.dataSizeWarning">
+					<NDVEmptyState
+						:title="
+							i18n.baseText('ndv.tooMuchData.title', {
+								interpolate: {
+									size: dataSizeInMB,
+								},
 							})
 						"
-					/>
-				</NDVEmptyState>
+					>
+						<span v-n8n-html="i18n.baseText('ndv.tooMuchData.message')" />
+					</NDVEmptyState>
 
-				<N8nButton
-					outline
-					:label="i18n.baseText('ndv.output.tooMuchData.showDataAnyway')"
-					@click="showTooMuchData"
-				/>
+					<div :class="$style.warningActions">
+						<N8nButton
+							outline
+							size="small"
+							:label="i18n.baseText('runData.downloadBinaryData')"
+							@click="downloadJsonData()"
+						/>
 
-				<N8nButton
-					size="small"
-					:label="i18n.baseText('runData.downloadBinaryData')"
-					@click="downloadJsonData()"
-				/>
+						<N8nButton
+							size="small"
+							:label="i18n.baseText('ndv.tooMuchData.showDataAnyway')"
+							@click="showTooMuchData"
+						/>
+					</div>
+				</div>
 			</div>
 
 			<!-- V-else slot named content which only renders if $slots.content is passed and hasNodeRun -->
@@ -2311,6 +2317,25 @@ defineExpose({ enterEditMode });
 .compact {
 	--ndv--spacing: var(--spacing--2xs);
 }
+
+.dataSizeWarning {
+	padding: var(--spacing--sm) var(--spacing--md);
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--spacing--sm);
+}
+
+.warningActions {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: var(--spacing--2xs);
+	width: 100%;
+	align-items: center;
+}
 </style>
 
 <style lang="scss" scoped>

packages/frontend/editor-ui/src/features/ndv/runData/components/ai/AiRunContentBlock.test.ts

@@ -43,7 +43,7 @@ describe('AiRunContentBlock', () => {
 			},
 		});
 
-		expect(await screen.findByText('Display data?')).toBeInTheDocument();
+		expect(await screen.findByText('Show 0.5 MB of data?')).toBeInTheDocument();
 		expect(await screen.findByRole('button', { name: 'Show data' })).toBeInTheDocument();
 		expect(screen.queryByTestId('ai-content')).not.toBeInTheDocument();
 
@@ -67,7 +67,7 @@ describe('AiRunContentBlock', () => {
 		});
 
 		expect(screen.queryByTestId('ai-content')).not.toBeInTheDocument();
-		expect(await screen.findByText('Display data?')).toBeInTheDocument();
+		expect(await screen.findByText('Show 0.5 MB of data?')).toBeInTheDocument();
 	});
 
 	it('shows small payloads automatically', async () => {

packages/frontend/editor-ui/src/features/ndv/runData/components/ai/AiRunContentBlock.vue

@@ -127,28 +127,28 @@ watch(
 			/>
 			<section v-else :class="$style.warning">
 				<NDVEmptyState
-					:title="i18n.baseText('ndv.output.tooMuchData.title')"
+					:title="
+						i18n.baseText('ndv.tooMuchData.title', {
+							interpolate: {
+								size: dataSizeInMB,
+							},
+						})
+					"
 					:class="$style.warningState"
 				>
-					<span
-						v-n8n-html="
-							i18n.baseText('ndv.output.logs.tooMuchData.message', {
-								interpolate: { size: dataSizeInMB, inOut: runData.inOut },
-							})
-						"
-					/>
+					<span v-n8n-html="i18n.baseText('ndv.tooMuchData.message')" />
 				</NDVEmptyState>
 				<div :class="$style.warningActions">
 					<N8nButton
 						outline
 						size="small"
-						:label="i18n.baseText('ndv.output.tooMuchData.showDataAnyway')"
-						@click.stop="onShowDataAnyway"
+						:label="i18n.baseText('runData.downloadBinaryData')"
+						@click.stop="downloadJsonData"
 					/>
 					<N8nButton
 						size="small"
-						:label="i18n.baseText('runData.downloadBinaryData')"
-						@click.stop="downloadJsonData"
+						:label="i18n.baseText('ndv.tooMuchData.showDataAnyway')"
+						@click.stop="onShowDataAnyway"
 					/>
 				</div>
 			</section>
@@ -232,8 +232,10 @@ watch(
 
 .warningActions {
 	display: flex;
-	flex-direction: column;
-	gap: var(--spacing--xs);
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: var(--spacing--2xs);
 	width: 100%;
 	align-items: center;
 }